【目标管理】列表、详情优化

src/views/business/spd/target/targetTemplate/columns.js

@@ -31,7 +31,7 @@ export default function useColumns() {
 
   const TableColumns = [
     {
-      item: { key: "year", title: "年度" },
+      item: { key: "year", title: "年度", width: 100, },
       attr: {}
     },
     {
@@ -39,23 +39,29 @@ export default function useColumns() {
       attr: {}
     },
     {
-      item: { key: "startTime", title: "开始日期" },
+      item: { key: "startTime", title: "开始日期", },
       attr: {}
     },
     {
-      item: { key: "deadlineTime", title: "结束日期" },
+      item: { key: "deadlineTime", title: "结束日期", },
       attr: {}
     },
     {
-      item: { key: "cycle", title: "周期" },
-      attr: {}
+      item: { key: "cycle", title: "周期", width: 100, },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_periodic_unit",
+      }
     },
     {
       item: { key: "unfold", title: "按列展开" },
-      attr: {}
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_expansion_mode",
+      }
     },
     {
-      item: { key: "createByName", title: "创建人" },
+      item: { key: "createByName", title: "创建人", width: 120, },
       attr: {}
     },
     {
@@ -63,14 +69,23 @@ export default function useColumns() {
       attr: {}
     },
     {
-      item: { key: "updateByName", title: "修改人" },
+      item: { key: "updateByName", title: "修改人", width: 120, },
       attr: {}
     },
     {
       item: { key: "updateTime", title: "修改时间" },
       attr: {}
     },
-  ];
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      sortabled: true,
+      fixedabled: true,
+      filterabled: true,
+      hiddenabled: true,
+    },
+  }));
 
   return { SearchColumns, TableColumns }
 }

src/views/business/spd/target/targetTemplate/details/columns.js

@@ -0,0 +1,135 @@
+export default function useColumns() {
+  const FormColumns = [
+    {
+      item: { key: "year", title: "年份", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "year",
+        valueFormat: "yyyy-MM-dd",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "name", title: "模板名称", required: true, },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "startTime", title: "开始日期", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        valueFormat: "yyyy-MM-dd",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "deadlineTime", title: "结束日期", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        valueFormat: "yyyy-MM-dd",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "cycle", title: "周期", required: true, },
+      attr: {
+        is: "el-select",
+        dictName: "mk_periodic_unit",
+      },
+    },
+    {
+      item: { key: "unfold", title: "按列展开" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_expansion_mode",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    item: {
+      ...item,
+      span: item.span || 6,
+    },
+    attr,
+  }));
+
+  const TabColumns = [
+    {
+      item: {
+        key: 'indexs',
+        title: '指标',
+      },
+      attr: {
+        value: []
+      },
+      TableColumns: [
+        {
+          item: { key: 'target', title: '指标', },
+          attr: {
+            is: "el-select",
+            dictName: "mk_index_type",
+          },
+        },
+      ],
+    },
+    {
+      item: {
+        key: 'dimensionalitys',
+        title: '维度',
+      },
+      attr: {
+        value: []
+      },
+      TableColumns: [
+        {
+          item: { key: 'dimensionality', title: '维度', },
+          attr: {
+            is: "el-select",
+            dictName: "mk_dimensionality",
+          },
+        },
+      ],
+    },
+    {
+      item: {
+        key: 'cycles',
+        title: '周期',
+      },
+      attr: {
+        value: []
+      },
+      TableColumns: [
+        {
+          item: { key: 'name', title: '周期', },
+          attr: {
+            is: "el-input",
+            clearable: true,
+          },
+        },
+        {
+          item: { key: 'startTime', title: '开始日期', },
+          attr: {
+            is: "el-date-picker",
+            clearable: true,
+            type: "date",
+            valueFormat: "yyyy-MM-dd",
+          },
+        },
+        {
+          item: { key: 'deadlineTime', title: '结束日期', },
+          attr: {
+            is: "el-date-picker",
+            clearable: true,
+            type: "date",
+            valueFormat: "yyyy-MM-dd",
+          },
+        },
+      ],
+    },
+  ];
+  return { FormColumns, TabColumns }
+}

src/views/business/spd/target/targetTemplate/details/index.vue

@@ -0,0 +1,445 @@
+<template>
+  <el-drawer
+    v-bind="$attrs"
+    v-on="$listeners"
+    :size="width"
+    :visible.sync="visible"
+    destroy-on-close
+    :show-close="false"
+    @close="useBack"
+    @open="beforeOpen"
+    v-loading="loading"
+  >
+    <div
+      slot="title"
+      style="display: flex; justify-content: space-between; align-items: center"
+    >
+      <h3>{{ title }}</h3>
+      <div>
+        <el-button
+          v-if="openMode !== 'see'"
+          type="primary"
+          :size="size"
+          @click="useSave('superForm')"
+          >保存</el-button
+        >
+        <el-button :size="size" @click="useBack">取消</el-button>
+      </div>
+    </div>
+
+    <el-super-form
+      v-model="form"
+      :dict="dict"
+      :rules="rules"
+      :size="$attrs.size"
+      :columns="FormColumns"
+      ref="superForm"
+      label-width="auto"
+      label-position="right"
+      style="padding: 20px"
+      :disabled="openMode == 'see'"
+    >
+    </el-super-form>
+
+    <el-card style="margin: 10px 20px">
+      <div style="position: relative">
+        <el-tabs v-model="activeName" @tab-click="useSwitchTab">
+          <el-tab-pane
+            v-for="({ item, TableColumns: columns }, index) in TabColumns"
+            :key="index"
+            :label="item.title"
+            :name="item.key"
+            lazy
+          >
+            <el-super-ux-table
+              index
+              v-model="form[item.key]"                              
+              :dict="dict"
+              :ref="activeName"
+              :columns="columns"
+              :size="$attrs.size"
+              :height="500"
+            >
+              <ux-table-column
+                fixed="right"
+                title="操作"
+                align="center"
+                width="120"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    v-if="openMode !== 'see'"
+                    type="text"
+                    :size="size"
+                    @click="useRowRemove(scope.$index, scope.row)"
+                    >删 行</el-button
+                  >
+                </template>
+              </ux-table-column>
+            </el-super-ux-table>
+          </el-tab-pane>
+        </el-tabs>
+        <el-button
+          @click="useResetCycle"
+          v-if="activeName == 'cycles' && openMode !== 'see'"
+          :size="size"
+          style="position: absolute; right: 10px; top: 5px"
+          >重算周期</el-button
+        >
+        <el-button
+          @click="useRowAdd"
+          v-if="
+            (activeName == 'indexs' || activeName == 'dimensionalitys') &&
+            openMode !== 'see'
+          "
+          :size="size"
+          type="primary"
+          style="position: absolute; right: 10px; top: 5px"
+          >增行</el-button
+        >
+      </div>
+    </el-card>
+  </el-drawer>
+</template>
+
+<script>
+import {
+  addTargetTemplate,
+  updateTargetTemplate,
+  getTargetTemplate,
+} from "@/api/business/spd/starget/targetTemplate";
+import useColumns from "./columns";
+
+export default {
+  name: "targettemplateDetail",
+  components: {
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+  },
+  props: {
+    openMode: {
+      type: String,
+      default: "add",
+    },
+    row: {
+      type: [Object, Array],
+      required: true,
+    },
+    dict: {
+      type: Object,
+    },
+  },
+  data() {
+    const { FormColumns, TabColumns } = useColumns();
+    const rules = this.$init.rules(FormColumns);
+    const params = this.$init.params(FormColumns);
+    return {
+      visible: false,
+      loading: false,
+      width: "100%",
+      size: "mini",
+      rules,
+      TabColumns,
+      FormColumns,
+      form: {
+        ...params,
+        indexs: [],
+        dimensionalitys: [],
+        cycles: [],
+      },
+      activeName: "indexs",
+    };
+  },
+  computed: {
+    title: {
+      get() {
+        const { openMode } = this;
+        if (openMode === "edit") {
+          return "编 辑";
+        }
+        if (openMode === "see") {
+          return "查 看";
+        }
+        if (openMode === "add") {
+          return "新 增";
+        }
+      },
+      set() {},
+    },
+    indexs() {
+      return this.form.indexs.filter(({ delFlag }) => delFlag !== "2");
+    },
+    dimensionalitys() {
+      return this.form.dimensionalitys.filter(({ delFlag }) => delFlag !== "2");
+    },
+  },
+  async created() {},
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    async beforeOpen() {
+      switch (this.openMode) {
+        case "add":
+          var date = new Date();
+          this.form.year = date.getFullYear() + "-" + "01" + "-" + "01";
+          this.form.startTime = date.getFullYear() + "-" + "01" + "-" + "01";
+          this.form.deadlineTime = date.getFullYear() + "-" + "12" + "-" + "31";
+          this.form.cycle = "month";
+          break;
+        case "edit":
+          await this.fetchTemplate(this.row.id);
+          break;
+        case "see":
+          let columns = _.cloneDeep(this.TabColumns);
+          this.TabColumns = columns.map(({ item, attr, TableColumns }) => ({
+            item,
+            attr,
+            TableColumns: TableColumns.map(({ item, attr }) => ({
+              item,
+              attr: {
+                ...attr,
+                disabled: true,
+              },
+            })),
+          }));
+          await this.fetchTemplate(this.row.id);
+          break;
+      }
+    },
+    //保存
+    async useSave(prop) {
+      this.$refs[prop].validate(async (valid) => {
+        if (valid) {
+          try {
+            let checkRes = this.checkBeforeSave(this.form);
+            if (!checkRes) {
+              return;
+            }
+            this.loading = true;
+            let res = null;
+            if (this.openMode === "add") {
+              res = await addTargetTemplate(this.form);
+            }
+            if (this.openMode === "edit") {
+              res = await updateTargetTemplate(this.form);
+            }
+            if (res.code === 200) {
+              this.$modal.msgSuccess("保存成功");
+              this.useBack();
+            }
+          } catch (err) {
+            console.error(err);
+          } finally {
+            this.loading = false;
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    //保存前校验
+    checkBeforeSave(form) {
+      if (form.indexs) {
+        let arr = form.indexs.filter((item) => item.delFlag != "2");
+        if (arr.length < 1) {
+          this.$modal.msgError("指标页签不能为空！");
+          return false;
+        }
+        arr = arr.filter((item) => !item.target);
+        if (arr.length > 0) {
+          this.$modal.msgError("指标页签不能存在空数据！");
+          return false;
+        }
+      } else {
+        this.$modal.msgError("指标页签不能为空！");
+        return false;
+      }
+      if (form.dimensionalitys) {
+        let arr = form.dimensionalitys.filter((item) => item.delFlag != "2");
+        if (arr.length < 1) {
+          this.$modal.msgError("维度页签不能为空！");
+          return false;
+        }
+        arr = arr.filter((item) => !item.dimensionality);
+        if (arr.length > 0) {
+          this.$modal.msgError("维度页签不能存在空数据！");
+          return false;
+        }
+      } else {
+        this.$modal.msgError("维度页签不能为空！");
+        return false;
+      }
+      if (form.cycles) {
+        let arr = form.cycles.filter((item) => item.delFlag != "2");
+        if (arr.length < 1) {
+          this.$modal.msgError("周期页签不能为空！");
+          return false;
+        }
+      } else {
+        this.$modal.msgError("周期页签不能为空！");
+        return false;
+      }
+      return true;
+    },
+    //查询详情
+    async fetchTemplate(id) {
+      try {
+        // try
+        this.loading = true;
+        const { code, data } = await getTargetTemplate(id);
+        if (code === 200) {
+          this.form = data;
+          return true;
+        } else {
+          return false;
+        }
+      } catch (err) {
+        // catch
+        console.error(err);
+      } finally {
+        // finally
+        this.loading = false;
+      }
+    },
+    //增行
+    async useRowAdd() {
+      let row = {};
+      if (this.activeName == "indexs") {
+        row = {
+          target: null,
+        };
+      }
+      if (this.activeName == "dimensionalitys") {
+        row = {
+          dimensionality: null,
+        };
+      }
+      this.form[this.activeName].push({
+        delFlag: "0",
+        $index: new Date().getTime(),
+        ...row,
+      });
+      console.log("this.form[this.activeName]", this.form[this.activeName]);
+    },
+    //删行
+    async useRowRemove(index, row) {
+      if (row.id) {
+        this.form[this.activeName].forEach((e) => {
+          if (e.id == row.id) {
+            e.delFlag = "2";
+          }
+        });
+      } else {
+        this.form[this.activeName].splice(index, 1);
+      }
+      console.log("this.form[this.activeName]", this.form[this.activeName]);
+    },
+    //切换多页签
+    useSwitchTab() {},
+    //返回
+    useBack() {
+      const params = this.$init.params(this.FormColumns);
+      this.from = {
+        ...params,
+        indexs: [],
+        dimensionalitys: [],
+        cycles: [],
+      };
+      this.visible = false;
+      const { FormColumns, TabColumns } = useColumns();
+      this.TabColumns = TabColumns;
+      this.activeName = "indexs";
+      this.$emit("success");
+    },
+    //重算周期
+    useResetCycle() {
+      if (!this.form.startTime || !this.form.deadlineTime || !this.form.cycle) {
+        this.$modal.msgError("开始日期、结束日期、周期不能存在空值！");
+        return;
+      }
+      if (this.form.startTime > this.form.deadlineTime) {
+        this.$modal.msgError("开始日期不能大于结束日期！");
+        return;
+      }
+      this.form.cycles = [];
+      var cycles = [];
+      var start = new Date(this.form.startTime);
+      var deadline = new Date(this.form.deadlineTime);
+      start.setHours(0, 0, 0);
+      deadline.setHours(0, 0, 0);
+      if (this.form.cycle == "period") {
+        cycles.push({
+          name:
+            new Date(start).Format("yyyy-MM-dd") +
+            "到" +
+            new Date(deadline).Format("yyyy-MM-dd"),
+          startTime: new Date(start).Format("yyyy-MM-dd"),
+          deadlineTime: new Date(deadline).Format("yyyy-MM-dd"),
+        });
+      } else {
+        while (deadline >= start) {
+          if (this.form.cycle == "day") {
+            var cy = {
+              name: new Date(start).Format("yyyy-MM-dd"),
+              startTime: new Date(start).Format("yyyy-MM-dd"),
+              deadlineTime: new Date(start).Format("yyyy-MM-dd"),
+            };
+            cycles.push(cy);
+            start.setDate(start.getDate() + 1);
+          }
+          if (this.form.cycle == "week") {
+            var cy = {};
+            let date = new Date(start).Format("yyyy-MM-dd");
+            cy.startTime = new Date(start).Format("yyyy-MM-dd");
+            start.setDate(start.getDate() + 6);
+            cy.deadlineTime = new Date(start).Format("yyyy-MM-dd");
+            cy.name = date + "到" + new Date(start).Format("yyyy-MM-dd");
+            cycles.push(cy);
+            start.setDate(start.getDate() + 1);
+          }
+          if (this.form.cycle == "month") {
+            var cy = {};
+            cy.name = new Date(start).Format("yyyy-MM");
+            cy.startTime = new Date(start).Format("yyyy-MM-dd");
+            let arr = cy.startTime.split("-");
+            start = this.getLastDay(arr[0], arr[1]);
+            console.log("start", start);
+            cy.deadlineTime = new Date(start).Format("yyyy-MM-dd");
+            cycles.push(cy);
+            start.setDate(start.getDate() + 1);
+          }
+          if (this.form.cycle == "season") {
+            var cy = {};
+            let date = new Date(start).Format("yyyy-MM");
+            cy.startTime = new Date(start).Format("yyyy-MM-dd");
+            start.setDate(start.getDate() + 90);
+            cy.deadlineTime = new Date(start).Format("yyyy-MM-dd");
+            cy.name = date + "到" + new Date(start).Format("yyyy-MM");
+            cycles.push(cy);
+            start.setDate(start.getDate() + 1);
+          }
+        }
+        cycles[cycles.length - 1].deadlineTime = deadline;
+      }
+      this.form.cycles = cycles;
+      console.log("this.form.cycles", this.form.cycles);
+    },
+
+    getLastDay(year, month) {
+      return new Date(
+        new Date(
+          `${month < 12 ? year : ++year}-${month == 12 ? 1 : ++month} 00:00`
+        ).getTime() - 1
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+>>> .el-drawer__header {
+  margin-bottom: 0;
+  padding: 5px 20px;
+}
+</style>

src/views/business/spd/target/targetTemplate/dicts.js

@@ -1,6 +1,5 @@
 import { initDicts } from "@/utils/init.js";
-
-const modules = require.context("./", true, /column.js$/);
+const modules = require.context("./", true, /columns.js$/);
 const columns = [];
 modules.keys().forEach((fileName) => {
   const data = modules(fileName).default();
@@ -12,4 +11,4 @@ modules.keys().forEach((fileName) => {
     }
   }
 });
-export const dicts = initDicts(columns);
+export const dicts = initDicts(columns);

src/views/business/spd/target/targetTemplate/index copy.vue

@@ -0,0 +1,268 @@
+
+<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"
+          v-horizontal-scroll
+        >
+          <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="useDoubleClick(scope.row)">查看</el-button>
+              <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, 20, 50, 100]"
+          :page-size="10"
+          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>

src/views/business/spd/target/targetTemplate/index.vue

@@ -1,164 +1,126 @@
-
 <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-card
+    v-loading="loading"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <el-super-search
+      v-model="params"
+      :size="size"
+      :dict="dict"
+      :columns="SearchColumns"
+      @reset="useReset"
+      @submit="getList(params, page)"
+    ></el-super-search>
 
-        <el-table 
-          :data="tableList"
-          @row-dblclick="useDoubleClick"
-          height="600px"
-          v-horizontal-scroll
-        >
-          <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="useDoubleClick(scope.row)">查看</el-button>
-              <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-row
+      :gutter="10"
+      class="mb10"
+      type="flex"
+      justify="end"
+      style="margin-top: 20px"
+    >
+      <el-col :span="1.5">
+        <el-button type="primary" :size="size" @click="useAdd">新增</el-button>
+      </el-col>
+    </el-row>
 
-        <el-pagination
-          background
-          @size-change="useChangePageSize"
-          @current-change="useCurrentChange"
-          :current-page="queryParams.pageNum"
-          :page-sizes="[10, 20, 50, 100]"
-          :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total=total>
-        </el-pagination>
-      </el-card>
-    </div>
-    <Detail v-if="openDetail" :openMode="openMode" :row="row"/>
-  </div>
+    <el-super-ux-table
+      v-model="tableList"
+      :size="size"
+      :dict="dict"
+      :page="page"
+      :columns="TableColumns"
+      index
+      pagination
+      convenitentOperation
+      highlight-current-row
+      storage-key="targetTemplateSuperTable"
+      @row-dblclick="useDoubleClick"
+      @pagination="getList({ ...page, ...params })"
+      style="margin: 16px 0 0"
+    >
+      <!-- 模板 -->
+      <template slot="year" slot-scope="scope">
+        {{ scope.row.year.substring(0, 4) }}
+      </template>
+      <ux-table-column fixed="right" title="操作" align="center" width="120">
+        <template slot-scope="scope">
+          <el-button type="text" :size="size" @click="useDoubleClick(scope.row)"
+            >查看</el-button
+          >
+          <el-button type="text" :size="size" @click="useEdit(scope.row)"
+            >编辑</el-button
+          >
+          <el-button type="text" :size="size" @click="useDel(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </ux-table-column>
+    </el-super-ux-table>
+    <Detail
+      ref="targetTemplateDetail"
+      :row="row"
+      :size="size"
+      :dict="dict"
+      :openMode="openMode"
+      @success="getList({ ...page, ...params })"
+    />
+  </el-card>
 </template>
 
 <script>
-import Detail from './detail.vue'
-import { listTargetTemplate,delTargetTemplate,checkQuote, } from "@/api/business/spd/starget/targetTemplate";
+import useColumns from "./columns";
+import { dicts } from "./dicts";
+import {
+  listTargetTemplate,
+  delTargetTemplate,
+  checkQuote,
+} from "@/api/business/spd/starget/targetTemplate";
 
 export default {
   name: "targettemplate",
-  dicts: ["mk_periodic_unit","mk_expansion_mode"],
-  components: {Detail},
+  dicts: [...dicts],
+  components: {
+    Detail: () => import("./details/index.vue"),
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+  },
   data() {
+    const { SearchColumns, TableColumns } = useColumns();
+    const params = this.$init.params(SearchColumns);
+    const page = this.$init.page();
     return {
-      // 搜索框参数
-      queryParams: {
-        name:null,
-        pageNum: 1,
-        pageSize: 10,
-        params:{
-          year: '',
-        }
-      },
-      // 查询日期范围
-      dateRange: [],
-      //总条数
-      total: 0,
+      page,
+      params,
+      SearchColumns,
+      TableColumns,
+      size: "mini",
+      loading: false,
       //列表数据
-      tableList:[],
-      //是否打开详情页面
-      openDetail:false,
+      tableList: [],
       //编辑页面打开方式，add或edit或see
-      openMode:'',
+      openMode: "",
       //行数据
-      row:{},
+      row: {},
     };
   },
   created() {
-    this.getList(this.queryParams);
+    this.getList(this.params, this.page);
   },
   methods: {
-    //是否打开详情页面
-    useOpenDetail(){
-      this.openDetail = !this.openDetail;
-    },
     //新增
-    useAdd(){
-      this.openMode = 'add';
-      this.openDetail = true;
+    useAdd() {
+      this.openMode = "add";
+      let { setVisible } = this.$refs.targetTemplateDetail;
+      setVisible(true);
     },
     //编辑
-    async useEdit(row){
+    async useEdit(row) {
       const { code, data } = await checkQuote(row.id);
       if (code == "200") {
         if (data) {
@@ -171,12 +133,13 @@ export default {
         this.visible = false;
         return;
       }
-      this.openMode = 'edit';
+      this.openMode = "edit";
       this.row = row;
-      this.openDetail = true;
+      let { setVisible } = this.$refs.targetTemplateDetail;
+      setVisible(true);
     },
     //删除
-    async useDel(row){
+    async useDel(row) {
       const { code, data } = await checkQuote(row.id);
       if (code == "200") {
         if (data) {
@@ -189,58 +152,54 @@ export default {
         this.visible = false;
         return;
       }
-      this.$modal.confirm('确认删除选择数据').then(() => {
-        delTargetTemplate(row.id).then(res => {
-          if (res.code === 200) {
-            this.$modal.msgSuccess("删除成功");
-            this.getList(this.queryParams)
-          }
+      this.$modal
+        .confirm("确认删除选择数据")
+        .then(() => {
+          delTargetTemplate(row.id).then((res) => {
+            if (res.code === 200) {
+              this.$modal.msgSuccess("删除成功");
+              this.getList(this.params, this.page);
+            }
+          });
         })
-      }).catch(() => {})
+        .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---------')
+    async getList(prop, page) {
+      try {
+        this.loading = true;
+        let params = {
+          ...prop,
+          ...page,
+          params: {
+            beginTime: prop["dateRange"] ? prop["dateRange"][0] : "",
+            endTime: prop["dateRange"] ? prop["dateRange"][1] : "",
+          },
+        };
+        delete params.dateRange;
+        let { code, rows, total } = await listTargetTemplate(params);
+        if (code === 200) {
+          this.tableList = rows;
+          this.page.total = total;
         }
-      })
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
     },
     //双击
-    useDoubleClick(row){
-      this.openMode = 'see';
+    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);
+      let { setVisible } = this.$refs.targetTemplateDetail;
+      setVisible(true);
     },
+
     //重置
-    useReset(){
-      this.dateRange = [];
-      this.queryParams = {
-        name: '',
-        pageNum: 1,
-        pageSize: 10,
-        params:{
-          year:'',
-        },
-      }
-      this.getList(this.queryParams);
+    useReset() {
+      this.params = this.$init.params(this.SearchColumns);
+      this.page = this.$init.page();
+      this.getList(this.params, this.page);
     },
   },
 };
@@ -248,21 +207,16 @@ export default {
 
 <style scoped lang="scss">
 .el-card {
-  width: calc(100% - 20px);
-  height: 100%;
-  margin: 10px;
-  padding: 20px;
+  width: calc(100% - 32px);
+  height: calc(100vh - 32px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
+
 .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;
+  margin: 0 0 0 8px;
 }
 </style>