cy-revenue-budget-portal/src/views/base/selectTemplateCopy-list.vue

<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="true"
      style="text-align:left;"
      :close-on-click-modal="true"
      @close="closeDialog"
      :append-to-body="true"
      width="900px"
    >
      <div class="user-panel" v-loading="loading">
            <el-table
            :data="tableData"
            style="min-height:400px;"
            v-loading="loading"
            highlight-current-row
            @current-change="handleCurrentChange"
        >
            <el-table-column  prop="year"  label="所属年份"></el-table-column>
            <el-table-column  prop="title"  label="标题" ></el-table-column>
            <el-table-column  prop="subtitle"  label="副标题"></el-table-column>
            <el-table-column  prop="type"  label="模板类型">
                <template slot-scope="{row}">
                    <span v-if="row.type=='1'">收入</span>
                    <span v-else-if="row.type=='2'">支出</span>
                </template>
            </el-table-column>
            <!-- <el-table-column  prop="serialNum"  label="序号"></el-table-column> -->
            <el-table-column  prop="status"  label="状态">
            <template slot-scope="{row}">
                    <span v-if="row.status=='0'" style="color:#F56C6C">未审核</span>
                    <span v-else-if="row.status=='1'" style="color:#67C23A">已审核</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="text-align:center"
            :current-page.sync="pageIndex"
            :total="totalElements"
            :page-sizes="pageSizeList"
            @current-change="changePage"
            @size-change="pageSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </template>
  <script>
  import Constant from "@/constant";
  import templateInfoApi from "@/api/base/templateInfo";
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
            formModel: {},
            showDialog: true,
            loading: false,
            tableData: [],
            pageIndex: 1,
            pageSize: 10,
            totalPages: 0,
            totalElements: 0,
            field: "",
            direction: "",
            pageSizeList: [10, 20, 30],
            multipleSelection: [],
            selectId:"",
      };
    },
    created() {
    },
    methods: {
      closeDialog() {
        this.$emit("close", false);
      },
      handleSubmit() {
        if(this.selectId==null||this.selectId==""){
            this.$message.error("请选择一项需要复制项目的模板！");
            return;
        }
        this.$emit("close", this.selectId);
      },
      changePage(pageIndex) {
        var self = this;
  
        console.log(pageIndex);
  
        self.pageIndex = pageIndex;
        var formData = new FormData();
  
        formData.append("pageIndex", self.pageIndex);
        formData.append("pageSize", self.pageSize);
  
        self.loading = true;
  
        templateInfoApi.pageList(formData).then(function(response) {
          self.loading = false;
            var jsonData = response.data;
            if(jsonData.result) {
                //分页查看
                var page = jsonData.data;

                self.tableData = page.data;
                self.totalPages = page.totalPages;
                self.totalElements = page.recordsTotal;
            }
            else{
                self.$message.warning(jsonData.message);
            }
        }).catch((error)=>{
          self.loading = false;
        });
      },
      pageSizeChange(pageSize) {
        this.pageSize = pageSize;
      },
      sortChange(data) {
        this.field = data.column.field;
        this.direction = data.order == "ascending" ? "asc" : "desc";
  
        this.changePage(this.pageIndex);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(row) {
        this.selectId = row.id;
      }
    },
    async mounted() {
        this.changePage(1);
    },
    components: {
    },
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>