drp-ui/src/views/business/spd/target/targetMk/templateDownload.vue

<template>
  <div>
    <el-button type="primary" size="mini" @click="openDialog">模板导出</el-button>
    <el-dialog
      title="选择目标模板"
      :visible.sync="open"
    >
      <el-form size="mini" label-width="120px" >
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="年度">
              <el-input
                v-model="queryParams.year"
                clearable
                style="width: 200px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="模板名称">
              <el-input
                v-model="queryParams.name"
                clearable
                style="width: 200px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" plain @click="useSearch">搜索</el-button>
              <el-button icon="el-icon-refresh" plain @click="useReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table 
          :data="tableData"
          size="mini"
          @row-dblclick="useDoubleClick"
          height="450px"
        >
        <el-table-column show-overflow-tooltip label="年度" align="center" width="100" prop="year">
          <template slot-scope="scope">
            {{scope.row.year}}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="模板名称" align="center" width="200" prop="name"/>
        <el-table-column show-overflow-tooltip label="开始日期" align="center" width="150" prop="startTime" />
        <el-table-column show-overflow-tooltip label="结束日期" align="center" width="150" prop="deadlineTime" />
        <el-table-column show-overflow-tooltip label="周期" align="center" width="100" prop="cycle">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.mk_periodic_unit"
              :value="scope.row.cycle"
            />
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="创建人" align="center" width="150" prop="createByName" />
        <el-table-column show-overflow-tooltip label="创建时间" align="center" width="150" prop="createTime" />
      </el-table>
      <el-pagination
          background
          @size-change="useChangePageSize"
          @current-change="useCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
        </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { listTargetTemplate,download } from "@/api/business/spd/starget/targetTemplate";

export default {
  name: 'templateList',
  dicts: ["mk_periodic_unit"],
  data() {
    return {
      //是否打开弹窗
      open:false,
      //搜索框参数
      queryParams:{
        year: null,
        name: null,
        pageNum: 1,
        pageSize: 10
      },
      //总条数
      total: 0,
      //列表数据
      tableData:[],
    };
  },
  watch: {},
  created() {
  },
  methods: {
    //打开弹窗
    openDialog(){
      this.open = true;
      this.getList();
    },
    //获取列表数据
    async getList() {
      try {
        this.loading = true;
        const { code, rows, total } = await listTargetTemplate(this.queryParams);
        if (code === 200) {
          this.tableData = rows;
          this.total = total;
        }
      } catch (err) {
        // catch
        console.error(err);
      } finally {
        // finally
        this.loading = false;
      }
    },
    //双击选择
    async useDoubleClick(row){
      try {
        await download(row.id);
      } catch (err) {
        console.error(err);
      } finally {
        this.open = false;
      }
    },
    //搜索
    useSearch(){
      this.getList(this.queryParams);
    },
    //重置
    useReset(){
      this.queryParams = {
        year: null,
        name: null,
        pageNum: 1,
        pageSize: 10
      }
      this.getList(this.queryParams);
    },
    //改变一页显示条数
    useChangePageSize(val){
      this.queryParams.pageSize = val
      this.getList(this.queryParams)
    },
    //翻页
    useCurrentChange(val){
      this.queryParams.pageNum = val
      this.getList(this.queryParams)
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>