drp-ui/src/views/business/spd/target/targetTemplate/index.vue

<template>
  <div>
    <div v-if="!openDetail">
      <el-card>
        <el-form size="mini" class="search_area" label-width="120px">
          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-form-item label="年度">
                <el-date-picker
                  v-model="queryParams.params.year"
                  type="year"
                  value-format="yyyy-MM-dd"
                  clearable
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="模板名称">
                <el-input
                  v-model="queryParams.name"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="开始日期">
                <el-date-picker
                  size="mini"
                  v-model="dateRange"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始"
                  end-placeholder="结束"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="" label-width="20px">
                <el-button type="primary" size="mini" icon="el-icon-search" plain @click="useSearch">搜索</el-button>
                <el-button size="mini" icon="el-icon-refresh" plain @click="useReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-divider></el-divider>
        <div class="btn_grooup">
          <el-button type="primary" size="mini" @click="useAdd">新增</el-button>
        </div>

        <el-table 
          :data="tableList"
          @row-dblclick="useDoubleClick"
          height="600px"
        >
          <el-table-column label="序号" type="index" width="50" align="center" fixed/>
          <el-table-column show-overflow-tooltip label="年度" align="center" width="200" prop="year">
            <template slot-scope="scope">
              {{scope.row.year.substring(0,4)}}
            </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="200" prop="startTime"/>
          <el-table-column show-overflow-tooltip label="结束日期" align="center" width="200" prop="deadlineTime"/>
          <el-table-column show-overflow-tooltip label="周期" align="center" width="200" 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="200" prop="unfold">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.mk_expansion_mode"
                :value="scope.row.unfold"
              />
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="创建人" align="center" width="200" prop="createByName" />
          <el-table-column show-overflow-tooltip label="创建时间" align="center" width="200" prop="createTime" />
          <el-table-column show-overflow-tooltip label="修改人" align="center" width="200" prop="updateByName" />
          <el-table-column show-overflow-tooltip label="修改时间" align="center" width="200" prop="updateTime" />
          <el-table-column fixed="right" label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="useEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="mini" @click="useDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </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-card>
    </div>
    <Detail v-if="openDetail" :openMode="openMode" :row="row"/>
  </div>
</template>

<script>
import Detail from './detail.vue'
import { listTargetTemplate,delTargetTemplate,checkQuote, } from "@/api/business/spd/starget/targetTemplate";

export default {
  name: "targettemplate",
  dicts: ["mk_periodic_unit","mk_expansion_mode"],
  components: {Detail},
  data() {
    return {
      // 搜索框参数
      queryParams: {
        name:null,
        pageNum: 1,
        pageSize: 10,
        params:{
          year: '',
        }
      },
      // 查询日期范围
      dateRange: [],
      //总条数
      total: 0,
      //列表数据
      tableList:[],
      //是否打开详情页面
      openDetail:false,
      //编辑页面打开方式，add或edit或see
      openMode:'',
      //行数据
      row:{},
    };
  },
  created() {
    this.getList(this.queryParams);
  },
  methods: {
    //是否打开详情页面
    useOpenDetail(){
      this.openDetail = !this.openDetail;
    },
    //新增
    useAdd(){
      this.openMode = 'add';
      this.openDetail = true;
    },
    //编辑
    async useEdit(row){
      const { code, data } = await checkQuote(row.id);
      if (code == "200") {
        if (data) {
          this.$modal.msgError("该目标模板存在引用，无法修改！");
          this.visible = false;
          return;
        }
      } else {
        this.$modal.msgError("校验该目标模板是否存在引用异常，无法修改！");
        this.visible = false;
        return;
      }
      this.openMode = 'edit';
      this.row = row;
      this.openDetail = true;
    },
    //删除
    async useDel(row){
      const { code, data } = await checkQuote(row.id);
      if (code == "200") {
        if (data) {
          this.$modal.msgError("该目标模板存在引用，无法删除！");
          this.visible = false;
          return;
        }
      } else {
        this.$modal.msgError("校验该目标模板是否存在引用异常，无法删除！");
        this.visible = false;
        return;
      }
      this.$modal.confirm('确认删除选择数据').then(() => {
        delTargetTemplate(row.id).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList(this.queryParams)
          }
        })
      }).catch(() => {})
    },
    //查询列表
    getList(params){
      listTargetTemplate(this.addDateRange(params, this.dateRange)).then(res => {
        if (res.code === 200) {
          this.tableList = res.rows
          this.total = res.total
          console.log(res, 'res---------')
        }
      })
    },
    //双击
    useDoubleClick(row){
      this.openMode = 'see';
      this.row = row;
      this.openDetail = true;
    },
    //改变一页显示条数
    useChangePageSize(val){
      this.queryParams.pageSize = val
      this.getList(this.queryParams)
    },
    //翻页
    useCurrentChange(val){
      this.queryParams.pageNum = val
      this.getList(this.queryParams)
    },
    //搜索
    useSearch() {
      console.log(this.queryParams, 'this.queryParams');
      this.getList(this.queryParams);
    },
    //重置
    useReset(){
      this.dateRange = [];
      this.queryParams = {
        name: '',
        pageNum: 1,
        pageSize: 10,
        params:{
          year:'',
        },
      }
      this.getList(this.queryParams);
    },
  },
};
</script>

<style scoped lang="scss">
.el-card {
  width: calc(100% - 20px);
  height: 100%;
  margin: 10px;
  padding: 20px;
}
.el-button-group + .el-button-group {
  margin: 0 0 0 10px;
}
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>