【营销目标】列表、详情优化

src/views/business/spd/target/targetMk/add/columns.js

@@ -0,0 +1,88 @@
+export default function useColumns() {
+  const FormColumns = [
+    {
+      item: { key: "code", title: "单据编号", },
+      attr: {
+        is: "el-input",
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "date", title: "单据日期", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        valueFormat: "yyyy-MM-dd",
+        clearable: true,
+
+      },
+    },
+    {
+      item: { key: "name", title: "目标名称", required: true, },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "templateName", title: "模板", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "MK_TARGET_TEMPLATE_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          template: 'id',
+        }
+      },
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    },
+  }));
+
+  const DesColumns = [
+    {
+      item: { key: "year", title: "年度" },
+      attr: {},
+    },
+    {
+      item: { key: "startTime", title: "开始日期" },
+      attr: {},
+    },
+    {
+      item: { key: "deadlineTime", title: "结束日期" },
+      attr: {},
+    },
+    {
+      item: { key: "cycle", title: "周期" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_periodic_unit",
+      },
+    },
+    {
+      item: { key: "dimensionalitys", title: "维度" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_dimensionality",
+      },
+    },
+    {
+      item: { key: "indexs", title: "指标" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_index_type",
+      },
+    },
+    {
+      item: { key: "unfold", title: "展开方式" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_expansion_mode",
+      },
+    },
+  ];
+  return { FormColumns, DesColumns }
+}

src/views/business/spd/target/targetMk/add/index.vue

@@ -0,0 +1,300 @@
+<script>
+import useColumns from "./columns";
+import {
+  getTargetTemplate,
+  getHeaderData,
+} from "@/api/business/spd/starget/targetTemplate";
+import {
+  getTarget,
+  addTarget,
+  updateTarget,
+} from "@/api/business/spd/starget/target";
+
+export default {
+  name: "targetDetails",
+  props: {
+    dict: {
+      type: Object,
+    },
+    addType: {
+      type: String,
+      default: "add",
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    Item: () => import("../item.vue"),
+    ElDictTag: () => import("@/components/DictTag/index.vue"),
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+  },
+  data() {
+    const { FormColumns, DesColumns } = useColumns();
+    const rules = this.$init.rules(FormColumns);
+    return {
+      width: "100%",
+      visible: false,
+      loading: false,
+      rules,
+      DesColumns,
+      FormColumns,
+      form: {
+        date: new Date().Format("yyyy-MM-dd"),
+        template: null,
+      },
+      template: {},
+      //子表表头数据
+      headers: [],
+      //是否展示Item组件
+      isItem: false,
+      //是否为最新模板
+      latestTemplate: false,
+    };
+  },
+  computed: {
+    title: {
+      get() {
+        const { addType } = this;
+        if (addType === "edit") {
+          return "编 辑";
+        }
+        if (addType === "see") {
+          return "查 看";
+        }
+        if (addType === "add") {
+          return "新 增";
+        }
+      },
+      set() {},
+    },
+  },
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    async beforeOpen() {
+      if (this.addType == "add") {
+        // this.form.date = new Date();
+        this.form.status = "0";
+      }
+      if (this.addType == "edit" || this.addType == "see") {
+        await this.fetchTarget(this.row);
+        await this.fetchTemplate(this.row.template);
+        await this.fetchHeaderData(this.row.template);
+        this.latestTemplate = true;
+        this.isItem = true;
+      }
+    },
+    hide() {
+      this.isItem = false;
+      this.visible = false;
+      this.form = {
+        date: new Date().Format("yyyy-MM-dd"),
+        template: null,
+      };
+      this.template = {};
+      this.headers = [];
+      this.$emit("refresh");
+    },
+    //保存
+    async useSave(prop) {
+      console.log("this.form", this.form);
+      let passrule = false;
+      this.$refs[prop].validate((valid) => {
+        if (valid) {
+          passrule = true;
+        }
+      });
+      if (passrule) {
+        try {
+          this.form.items = this.$refs.child.merge();
+          if (!this.form.items.length) {
+            this.$modal.msgError("子表数据不能为空！");
+            return;
+          }
+          console.log("this.form", this.form);
+          const { addType, form } = this;
+          this.loading = true;
+          let res = null;
+          if (addType == "add") {
+            res = await addTarget(form);
+          }
+          if (addType == "edit") {
+            res = await updateTarget(form);
+          }
+          if (res.code === 200) {
+            this.$modal.msgSuccess(res.msg);
+            this.hide();
+          }
+        } catch (err) {
+          // catch
+          console.error(err);
+        } finally {
+          this.loading = false;
+        }
+      }
+    },
+    //查询目标模板
+    async fetchTemplate(id) {
+      try {
+        this.loading = true;
+        const { code, data } = await getTargetTemplate(id);
+        if (code === 200) {
+          this.template = data;
+          return true;
+        } else {
+          return false;
+        }
+      } catch (err) {
+        // catch
+        console.error(err);
+      } finally {
+        // finally
+        this.loading = false;
+      }
+    },
+    //查询详情
+    async fetchTarget(row) {
+      await getTarget(row.id).then((res) => {
+        if (res.code === 200) {
+          this.form = res.data;
+        }
+      });
+    },
+    //查询动态表头数据
+    async fetchHeaderData(id) {
+      await getHeaderData(id).then((res) => {
+        if (res.code === 200) {
+          this.headers = res.rows;
+        }
+      });
+    },
+    async changeTemplateName(prop) {
+      this.isItem = false;
+      await this.fetchTemplate(prop.id);
+      await this.fetchHeaderData(prop.id);
+      this.isItem = true;
+    },
+  },
+  created() {},
+};
+</script>
+<template>
+  <el-drawer
+    v-bind="$attrs"
+    v-on="$listeners"
+    :size="width"
+    :visible.sync="visible"
+    destroy-on-close
+    :show-close="false"
+    @close="hide"
+    @open="beforeOpen"
+    v-loading="loading"
+  >
+    <div
+      slot="title"
+      style="display: flex; justify-content: space-between; align-items: center"
+    >
+      <h3>{{ title }}</h3>
+      <div>
+        <el-button
+          type="primary"
+          :size="$attrs.size"
+          @click="useSave('superForm')"
+          v-if="addType == 'add' || addType == 'edit'"
+          >保存</el-button
+        >
+        <el-button :size="$attrs.size" @click="hide">取消</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="addType == 'see'"
+    >
+      <template slot="templateName" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          @change="changeTemplateName"
+        >
+        </component
+      ></template>
+    </el-super-form>
+
+    <el-card shadow="never" style="margin: 0 20px">
+      <el-descriptions title="模板信息">
+        <el-descriptions-item
+          v-for="({ item, attr }, index) in DesColumns"
+          :label="item.title"
+        >
+          <component
+            v-if="item.key === 'cycle' || item.key === 'unfold'"
+            v-bind="attr"
+            :size="$attrs.size"
+            :value="template[item.key]"
+            :options="dict.type[attr.dictName]"
+          ></component>
+
+          <template v-else-if="item.key === 'dimensionalitys'">
+            <div v-for="d in template[item.key]">
+              <component
+                v-bind="attr"
+                :size="$attrs.size"
+                :value="d.dimensionality"
+                :options="dict.type[attr.dictName]"
+              ></component>
+            </div>
+          </template>
+          <template v-else-if="item.key === 'indexs'">
+            <div v-for="d in template[item.key]">
+              <component
+                v-bind="attr"
+                :size="$attrs.size"
+                :value="d.target"
+                :options="dict.type[attr.dictName]"
+              ></component>
+            </div>
+          </template>
+
+          <span v-else>{{ template[item.key] }}</span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card
+      style="height: calc(100vh - 345px); margin: 10px 20px"
+      v-if="isItem"
+    >
+      <Item
+        ref="child"
+        :pageStu="addType"
+        :template="template"
+        :form="form"
+        :columns="headers"
+        :latestTemplate="latestTemplate"
+      ></Item>
+    </el-card>
+  </el-drawer>
+</template>
+
+<style scoped>
+>>> .el-drawer__header {
+  margin-bottom: 0;
+  padding: 5px 20px;
+}
+</style>

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

@@ -0,0 +1,143 @@
+export default function useColumns() {
+
+  const SearchColumns = [
+    {
+      item: { key: "status", title: "单据状态" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_status",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "code", title: "单据编号" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "name", title: "目标名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "dateRange", title: "单据日期" },
+      attr: {
+        is: "el-date-picker",
+        type: "daterange",
+        rangeSeparator: "-",
+        startPlaceholder: "开始",
+        endPlaceholder: "结束",
+        valueFormat: "yyyy-MM-dd",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "templateName", title: "模板" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "MK_TARGET_TEMPLATE_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          template: 'id',
+          templateName: 'name',
+        },
+        clearable: true,
+      },
+    },
+
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "code", title: "单据编号" },
+      attr: {},
+    },
+    {
+      item: { key: "date", title: "单据日期", width: 100, },
+      attr: {},
+    },
+    {
+      item: { key: "name", title: "目标名称" },
+      attr: {},
+    },
+    {
+      item: { key: "status", title: "状态", width: 100, },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "sys_status",
+      },
+    },
+    {
+      item: { key: "year", title: "年度", width: 60, },
+      attr: {},
+    },
+    {
+      item: { key: "name", title: "模板" },
+      attr: {},
+    },
+    {
+      item: { key: "startTime", title: "开始日期", width: 100, },
+      attr: {},
+    },
+    {
+      item: { key: "deadlineTime", title: "结束日期", width: 100, },
+      attr: {},
+    },
+    {
+      item: { key: "cycle", title: "周期", width: 100, },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_periodic_unit",
+      },
+    },
+    {
+      item: { key: "dimensionalitys", title: "维度" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_dimensionality",
+      },
+    },
+    {
+      item: { key: "indexs", title: "指标" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_index_type",
+      },
+    },
+    {
+      item: { key: "createByName", title: "创建人", width: 100, },
+      attr: {},
+    },
+    {
+      item: { key: "createTime", title: "创建时间" },
+      attr: {},
+    },
+    {
+      item: { key: "updateByName", title: "修改人", width: 100, },
+      attr: {},
+    },
+    {
+      item: { key: "updateTime", title: "修改时间" },
+      attr: {},
+    },
+
+    // {
+    //   item: { key: "", title: "" },
+    //   attr: {},
+    // },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      sortabled: true,
+      fixedabled: true,
+      filterabled: true,
+      hiddenabled: true,
+    },
+  }));
+  return { SearchColumns, TableColumns }
+}

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

@@ -0,0 +1,14 @@
+import { initDicts } from "@/utils/init.js";
+const modules = require.context("./", true, /columns.js$/);
+const columns = [];
+modules.keys().forEach((fileName) => {
+  const data = modules(fileName).default();
+  for (const key in data) {
+    if (key === "TabColumns") {
+      columns.push(...data[key].map((item) => item.TableColumns).flat());
+    } else {
+      columns.push(...data[key]);
+    }
+  }
+});
+export const dicts = initDicts(columns);

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

@@ -0,0 +1,365 @@
+<template>
+  <div id="deliveryAddressList">
+    <div v-if="isList">
+      <el-card>
+        <el-form class="search_area" label-width="120px">
+          <el-row :gutter="10">
+            <el-col :span="1.5">
+              <el-form-item label="单据状态" prop="status">
+                <el-select size="mini" v-model="queryParams.status" clearable>
+                  <el-option v-for="dict in dict.type.sys_status" :key="dict.value" :label="dict.label"
+                    :value="dict.value"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1.5">
+              <el-form-item label="单据编号">
+                <el-input v-model="queryParams.code" size="mini" clearable style="width: 200px" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="1.5">
+              <el-form-item label="目标名称">
+                <el-input v-model="queryParams.name" size="mini" clearable style="width: 200px" />
+              </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="模板" prop="template">
+                <dr-popover-select size="mini" v-model="queryParams.templateName" title="模板"
+                  type="MK_TARGET_TEMPLATE_PARAM" :dataMapping="{
+                    template: 'id',
+                    templateName: 'name',
+                  }" :source.sync="queryParams">
+                </dr-popover-select>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :span="1.5">
+              <el-form-item label="模板">
+                <el-input
+                  v-model="queryParams.template"
+                  size="mini"
+                  clearable
+                  style="width: 200px"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="1.5">
+              <el-form-item label="年度">
+                <el-input
+                  v-model="queryParams.year"
+                  size="mini"
+                  clearable
+                  style="width: 200px"
+                />
+              </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>
+          <CollapseTransition>
+            <div v-show="expanded">
+
+            </div>
+          </CollapseTransition>
+        </el-form>
+        <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'"
+            @click="drop"></i></el-divider>
+
+        <div class="btn_grooup">
+          <el-button type="primary" size="mini" @click="useAdd">新增</el-button>
+          <!-- <TemplateDownload/>
+          <el-button type="primary" size="mini" @click="useUpload">导入</el-button> -->
+        </div>
+
+        <el-table v-loading="loading" :data="tableList" @selection-change="useSelectionRow"
+          @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="code" />
+          <el-table-column show-overflow-tooltip label="单据日期" align="center" width="200" prop="date" />
+          <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="status">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_status" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column show-overflow-tooltip label="年度" align="center" width="200" prop="templateData.year" />
+          <el-table-column show-overflow-tooltip label="模板" align="center" width="200" prop="templateData.name" />
+          <el-table-column show-overflow-tooltip label="开始日期" align="center" width="200"
+            prop="templateData.startTime" />
+          <el-table-column show-overflow-tooltip label="结束日期" align="center" width="200"
+            prop="templateData.deadlineTime" />
+          <el-table-column show-overflow-tooltip label="周期" align="center" width="200" prop="templateData.cycle">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_periodic_unit" :value="scope.row.templateData.cycle" />
+            </template>
+          </el-table-column>
+          <el-table-column show-overflow-tooltip label="维度" align="center" min-width="200"
+            prop="templateData.dimensionalitys">
+            <template slot-scope="scope">
+              <div style="display:flex;">
+                <span v-for="o in scope.row.templateData.dimensionalitys">
+                  <dict-tag :options="dict.type.mk_dimensionality" :value="o.dimensionality" />
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column show-overflow-tooltip label="指标" align="center" min-width="200" prop="templateData.indexs">
+            <template slot-scope="scope">
+              <div style="display:flex;">
+                <span v-for="o in scope.row.templateData.indexs">
+                  <dict-tag :options="dict.type.mk_index_type" :value="o.target" />
+                </span>
+              </div>
+            </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 size="mini" type="text" @click="useDoubleClick(scope.row)">查看
+              </el-button>
+              <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" type="text" size="mini"
+                @click="useSubmit(scope.row)">提交</el-button>
+              <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" type="text" size="mini"
+                @click="useEdit(scope.row)">编辑</el-button>
+              <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" type="text" size="mini"
+                @click="useDel(scope.row)">删除</el-button>
+              <el-button v-if="scope.row.status == '1'" type="text" size="mini" @click="useRevocation(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>
+    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="useSearch" />
+  </div>
+</template>
+
+<script>
+  import Add from './add.vue'
+  import TemplateDownload from './templateDownload.vue'
+  import CollapseTransition from '@/components/MyCollapse/collapse.vue'
+  import {
+    listTarget,
+    delTarget,
+    submitTarget
+  } from "@/api/business/spd/starget/target";
+  import {
+    rebacktWork
+  } from '@/api/purchase/workSpace.js'
+  export default {
+    name: 'target',
+    dicts: [
+      "sys_status", "mk_periodic_unit", "mk_dimensionality", "mk_index_type", 'oa_templete_id'
+    ],
+    components: {
+      Add,
+      TemplateDownload,
+      CollapseTransition
+    },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        expanded: false,
+        // 页面配置
+        isList: true,
+        // 页面状态
+        page: '',
+        // 搜索框参数
+        queryParams: {
+          status: '',
+          code: '',
+          name: '',
+          template: '',
+          templateName: '',
+          year: '',
+          pageNum: 1,
+          pageSize: 10
+        },
+        // 查询日期范围
+        dateRange: [],
+        //总条数
+        total: 0,
+        //列表数据
+        tableList: [],
+        disable: false,
+        rowDetail: {},
+        openTemplateDownload: false,
+      }
+    },
+    created() {
+      this.getList(this.queryParams)
+    },
+    methods: {
+      //新增
+      useAdd() {
+        this.isList = false
+        this.page = 'add'
+        this.disable = false
+      },
+      //提交
+      async useSubmit(row) {
+        this.$modal.loading("提交中...");
+        try {
+          const {
+            msg,
+            code
+          } = await submitTarget(row.id);
+          if (code === 200) {
+            this.$modal.notifySuccess("提交成功");
+            this.$modal.closeLoading();
+            row.status = '1'
+          }
+        } catch (err) {
+          console.error(err);
+          this.$modal.closeLoading();
+        }
+      },
+      //撤回
+      useRevocation(row) {
+        this.$modal.loading("收回中...");
+        let params = {
+          billCode: row.code,
+          fdId: row.flowId,
+          fdTemplateId: this.dict.type.oa_templete_id.find(item => {
+            return item.label == "营销目标"
+          }).value,
+          billMaker: row.createBy
+        }
+        rebacktWork(params).then(res => {
+          if (res.code === 200) {
+            this.$modal.notifySuccess("收回成功");
+            this.$modal.closeLoading();
+          }
+        }).catch(err => {
+          this.$message.error(err);
+          this.$modal.closeLoading();
+        })
+      },
+      //修改
+      useEdit(row) {
+        this.isList = false
+        this.page = 'edit'
+        this.rowDetail = row
+        this.disable = false
+      },
+      //删除
+      useDel(row) {
+        this.$modal.confirm('确认删除选择数据').then(() => {
+          delTarget(row.id).then(res => {
+            if (res.code === 200) {
+              this.$modal.msgSuccess("删除成功");
+              this.getList(this.queryParams)
+            }
+          })
+        }).catch(() => {})
+      },
+      //查看
+      useSee() {
+
+      },
+      //选择列
+      useSelectionRow() {
+
+      },
+      //双击
+      useDoubleClick(row) {
+        this.isList = false
+        this.page = 'see'
+        this.rowDetail = row
+        this.disable = false
+      },
+      //改变一页显示条数
+      useChangePageSize(val) {
+        this.queryParams.pageSize = val
+        this.getList(this.queryParams)
+      },
+      //翻页
+      useCurrentChange(val) {
+        this.queryParams.pageNum = val
+        this.getList(this.queryParams)
+      },
+      //搜索
+      useSearch() {
+        this.getList(this.queryParams)
+      },
+      //重置
+      useReset() {
+        this.dateRange = [];
+        this.queryParams = {
+          code: '',
+          name: '',
+          template: '',
+          templateName: '',
+          year: '',
+          pageNum: 1,
+          pageSize: 10
+        }
+        this.getList(this.queryParams)
+      },
+      //查询列表
+      getList(params) {
+        this.loading = true;
+        if (this.dateRange[1] != null) {
+          this.dateRange[1] = this.dateRange[1] + ' 23:59:59'
+        }
+        listTarget(this.addDateRange(params, this.dateRange)).then(res => {
+          if (res.code === 200) {
+            this.tableList = res.rows;
+            for (const item of this.tableList) {
+              item.templateData.year = item.templateData.year.substr(0, 4);
+            }
+            this.total = res.total;
+            this.loading = false;
+          }
+        })
+      },
+      drop() {
+        this.expanded = !this.expanded
+      },
+    }
+  };
+
+</script>
+
+<style lang="scss" scoped>
+  #deliveryAddressList {
+    height: calc(100vh - 84px);
+    padding: 12px;
+    box-sizing: border-box;
+    overflow-y: scroll;
+  }
+
+  .btn_grooup {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .lines {
+    margin-top: 0;
+  }
+
+  .el-pagination {
+    margin-top: 10px;
+    text-align: right;
+  }
+
+</style>

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

@@ -1,366 +1,317 @@
 <template>
-  <div id="deliveryAddressList">
-    <div v-if="isList">
-      <el-card>
-        <el-form class="search_area" label-width="120px">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-form-item label="单据状态" prop="status">
-                <el-select size="mini" v-model="queryParams.status" clearable>
-                  <el-option v-for="dict in dict.type.sys_status" :key="dict.value" :label="dict.label"
-                    :value="dict.value"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="单据编号">
-                <el-input v-model="queryParams.code" size="mini" clearable style="width: 200px" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="目标名称">
-                <el-input v-model="queryParams.name" size="mini" clearable style="width: 200px" />
-              </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="模板" prop="template">
-                <dr-popover-select size="mini" v-model="queryParams.templateName" title="模板"
-                  type="MK_TARGET_TEMPLATE_PARAM" :dataMapping="{
-                    template: 'id',
-                    templateName: 'name',
-                  }" :source.sync="queryParams">
-                </dr-popover-select>
-              </el-form-item>
-            </el-col>
-            <!-- <el-col :span="1.5">
-              <el-form-item label="模板">
-                <el-input
-                  v-model="queryParams.template"
-                  size="mini"
-                  clearable
-                  style="width: 200px"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="年度">
-                <el-input
-                  v-model="queryParams.year"
-                  size="mini"
-                  clearable
-                  style="width: 200px"
-                />
-              </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>
-          <CollapseTransition>
-            <div v-show="expanded">
+  <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>
 
-            </div>
-          </CollapseTransition>
-        </el-form>
-        <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'"
-            @click="drop"></i></el-divider>
+    <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>
 
-        <div class="btn_grooup">
-          <el-button type="primary" size="mini" @click="useAdd">新增</el-button>
-          <!-- <TemplateDownload/>
-          <el-button type="primary" size="mini" @click="useUpload">导入</el-button> -->
+    <el-super-ux-table
+      v-model="tableList"
+      :size="size"
+      :dict="dict"
+      :page="page"
+      :columns="TableColumns"
+      index
+      pagination
+      convenitentOperation
+      highlight-current-row
+      storage-key="targetSuperTable"
+      @row-dblclick="useDoubleClick"
+      @pagination="getList({ ...page, ...params })"
+      style="margin: 16px 0 0"
+    >
+      <!-- 年度 -->
+      <template slot="year" slot-scope="scope">
+        {{ scope.row.templateData.year }}
+      </template>
+      <!-- 模板 -->
+      <template slot="name" slot-scope="scope">
+        {{ scope.row.templateData.name }}
+      </template>
+      <!-- 开始日期 -->
+      <template slot="startTime" slot-scope="scope">
+        {{ scope.row.templateData.startTime }}
+      </template>
+      <!-- 结束日期 -->
+      <template slot="deadlineTime" slot-scope="scope">
+        {{ scope.row.templateData.deadlineTime }}
+      </template>
+      <!-- 周期 -->
+      <template slot="cycle" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          :size="size"
+          :value="scope.row.templateData.cycle"
+          :options="dict.type[scope.attr.dictName]"
+        ></component>
+      </template>
+      <!-- 维度 -->
+      <template slot="dimensionalitys" slot-scope="scope">
+        <div style="display: flex">
+          <div v-for="o in scope.row.templateData.dimensionalitys">
+            <component
+              v-bind="scope.attr"
+              :size="size"
+              :value="o.dimensionality"
+              :options="dict.type[scope.attr.dictName]"
+            ></component>
+          </div>
         </div>
+      </template>
+      <!-- 指标 -->
+      <template slot="indexs" slot-scope="scope">
+        <div style="display: flex">
+          <div v-for="o in scope.row.templateData.indexs">
+            <component
+              v-bind="scope.attr"
+              :size="size"
+              :value="o.target"
+              :options="dict.type[scope.attr.dictName]"
+            ></component>
+          </div>
+        </div>
+      </template>
+      <ux-table-column fixed="right" title="操作" align="center" width="180">
+        <template slot-scope="scope">
+          <el-button :size="size" type="text" @click="useDoubleClick(scope.row)"
+            >查看
+          </el-button>
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            type="text"
+            :size="size"
+            @click="useSubmit(scope.row)"
+            >提交</el-button
+          >
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            type="text"
+            :size="size"
+            @click="useEdit(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            type="text"
+            :size="size"
+            @click="useDel(scope.row)"
+            >删除</el-button
+          >
+          <el-button
+            v-if="scope.row.status == '1'"
+            type="text"
+            :size="size"
+            @click="useRevocation(scope.row)"
+            >收回
+          </el-button>
+        </template>
+      </ux-table-column>
+    </el-super-ux-table>
 
-        <el-table v-loading="loading" :data="tableList" @selection-change="useSelectionRow"
-          @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="code" />
-          <el-table-column show-overflow-tooltip label="单据日期" align="center" width="200" prop="date" />
-          <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="status">
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.sys_status" :value="scope.row.status" />
-            </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip label="年度" align="center" width="200" prop="templateData.year" />
-          <el-table-column show-overflow-tooltip label="模板" align="center" width="200" prop="templateData.name" />
-          <el-table-column show-overflow-tooltip label="开始日期" align="center" width="200"
-            prop="templateData.startTime" />
-          <el-table-column show-overflow-tooltip label="结束日期" align="center" width="200"
-            prop="templateData.deadlineTime" />
-          <el-table-column show-overflow-tooltip label="周期" align="center" width="200" prop="templateData.cycle">
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_periodic_unit" :value="scope.row.templateData.cycle" />
-            </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip label="维度" align="center" min-width="200"
-            prop="templateData.dimensionalitys">
-            <template slot-scope="scope">
-              <div style="display:flex;">
-                <span v-for="o in scope.row.templateData.dimensionalitys">
-                  <dict-tag :options="dict.type.mk_dimensionality" :value="o.dimensionality" />
-                </span>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column show-overflow-tooltip label="指标" align="center" min-width="200" prop="templateData.indexs">
-            <template slot-scope="scope">
-              <div style="display:flex;">
-                <span v-for="o in scope.row.templateData.indexs">
-                  <dict-tag :options="dict.type.mk_index_type" :value="o.target" />
-                </span>
-              </div>
-            </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 size="mini" type="text" @click="useDoubleClick(scope.row)">查看
-              </el-button>
-              <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" type="text" size="mini"
-                @click="useSubmit(scope.row)">提交</el-button>
-              <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" type="text" size="mini"
-                @click="useEdit(scope.row)">编辑</el-button>
-              <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" type="text" size="mini"
-                @click="useDel(scope.row)">删除</el-button>
-              <el-button v-if="scope.row.status == '1'" type="text" size="mini" @click="useRevocation(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>
-    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="useSearch" />
-  </div>
+    <target-details
+      ref="targetDetails"
+      :size="size"
+      :dict="dict"
+      :row="rowDetail"
+      :addType="pageStu"
+      @refresh="useReset"
+    ></target-details>
+  </el-card>
 </template>
 
 <script>
-  import Add from './add.vue'
-  import TemplateDownload from './templateDownload.vue'
-  import CollapseTransition from '@/components/MyCollapse/collapse.vue'
-  import {
-    listTarget,
-    delTarget,
-    submitTarget
-  } from "@/api/business/spd/starget/target";
-  import {
-    rebacktWork
-  } from '@/api/purchase/workSpace.js'
-  export default {
-    name: 'target',
-    dicts: [
-      "sys_status", "mk_periodic_unit", "mk_dimensionality", "mk_index_type", 'oa_templete_id'
-    ],
-    components: {
-      Add,
-      TemplateDownload,
-      CollapseTransition
-    },
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        expanded: false,
-        // 页面配置
-        isList: true,
-        // 页面状态
-        page: '',
-        // 搜索框参数
-        queryParams: {
-          status: '',
-          code: '',
-          name: '',
-          template: '',
-          templateName: '',
-          year: '',
-          pageNum: 1,
-          pageSize: 10
-        },
-        // 查询日期范围
-        dateRange: [],
-        //总条数
-        total: 0,
-        //列表数据
-        tableList: [],
-        disable: false,
-        rowDetail: {},
-        openTemplateDownload: false,
-      }
-    },
-    created() {
-      this.getList(this.queryParams)
+import {
+  listTarget,
+  delTarget,
+  submitTarget,
+} from "@/api/business/spd/starget/target";
+import { rebacktWork } from "@/api/purchase/workSpace.js";
+import useColumns from "./columns";
+import { dicts } from "./dicts";
+export default {
+  name: "target",
+  dicts: [...dicts, "oa_templete_id"],
+  components: {
+    targetDetails: () => import("./add/index.vue"),
+    TemplateDownload: () => import("./templateDownload.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    CollapseTransition: () => import("@/components/MyCollapse/collapse.vue"),
+    ElDictTag: () => import("@/components/DictTag/index.vue"),
+  },
+  data() {
+    const { SearchColumns, TableColumns } = useColumns();
+    const params = this.$init.params(SearchColumns);
+    const page = this.$init.page();
+    return {
+      page,
+      params,
+      size: "mini",
+      SearchColumns,
+      TableColumns,
+      // 遮罩层
+      loading: true,
+      // 页面状态
+      pageStu: "",
+      //列表数据
+      tableList: [],
+      rowDetail: {},
+      openTemplateDownload: false,
+    };
+  },
+  created() {
+    this.getList(this.params, this.page);
+  },
+  methods: {
+    //新增
+    useAdd() {
+      this.pageStu = "add";
+      const { setVisible } = this.$refs.targetDetails;
+      setVisible(true);
     },
-    methods: {
-      //新增
-      useAdd() {
-        this.isList = false
-        this.page = 'add'
-        this.disable = false
-      },
-      //提交
-      async useSubmit(row) {
-        this.$modal.loading("提交中...");
-        try {
-          const {
-            msg,
-            code
-          } = await submitTarget(row.id);
-          if (code === 200) {
-            this.$modal.notifySuccess("提交成功");
-            this.$modal.closeLoading();
-            row.status = '1'
-          }
-        } catch (err) {
-          console.error(err);
+    //提交
+    async useSubmit(row) {
+      this.$modal.loading("提交中...");
+      try {
+        const { msg, code } = await submitTarget(row.id);
+        if (code === 200) {
+          this.$modal.notifySuccess("提交成功");
           this.$modal.closeLoading();
+          row.status = "1";
         }
-      },
-      //撤回
-      useRevocation(row) {
-        this.$modal.loading("收回中...");
-        let params = {
-          billCode: row.code,
-          fdId: row.flowId,
-          fdTemplateId: this.dict.type.oa_templete_id.find(item => {
-            return item.label == "营销目标"
-          }).value,
-          billMaker: row.createBy
-        }
-        rebacktWork(params).then(res => {
+      } catch (err) {
+        console.error(err);
+        this.$modal.closeLoading();
+      }
+    },
+    //撤回
+    useRevocation(row) {
+      this.$modal.loading("收回中...");
+      let params = {
+        billCode: row.code,
+        fdId: row.flowId,
+        fdTemplateId: this.dict.type.oa_templete_id.find((item) => {
+          return item.label == "营销目标";
+        }).value,
+        billMaker: row.createBy,
+      };
+      rebacktWork(params)
+        .then((res) => {
           if (res.code === 200) {
             this.$modal.notifySuccess("收回成功");
             this.$modal.closeLoading();
             row.status = '0';
           }
-        }).catch(err => {
+        })
+        .catch((err) => {
           this.$message.error(err);
           this.$modal.closeLoading();
-        })
-      },
-      //修改
-      useEdit(row) {
-        this.isList = false
-        this.page = 'edit'
-        this.rowDetail = row
-        this.disable = false
-      },
-      //删除
-      useDel(row) {
-        this.$modal.confirm('确认删除选择数据').then(() => {
-          delTarget(row.id).then(res => {
+        });
+    },
+    //修改
+    useEdit(row) {
+      this.pageStu = "edit";
+      this.rowDetail = row;
+      const { setVisible } = this.$refs.targetDetails;
+      setVisible(true);
+    },
+    //删除
+    useDel(row) {
+      this.$modal
+        .confirm("确认删除选择数据")
+        .then(() => {
+          delTarget(row.id).then((res) => {
             if (res.code === 200) {
               this.$modal.msgSuccess("删除成功");
-              this.getList(this.queryParams)
+              this.getList(this.params, this.page);
             }
-          })
-        }).catch(() => {})
-      },
-      //查看
-      useSee() {
-
-      },
-      //选择列
-      useSelectionRow() {
+          });
+        })
+        .catch(() => {});
+    },
+    //双击
+    useDoubleClick(row) {
+      this.pageStu = "see";
+      this.rowDetail = row;
+      const { setVisible } = this.$refs.targetDetails;
+      setVisible(true);
+    },
 
-      },
-      //双击
-      useDoubleClick(row) {
-        this.isList = false
-        this.page = 'see'
-        this.rowDetail = row
-        this.disable = false
-      },
-      //改变一页显示条数
-      useChangePageSize(val) {
-        this.queryParams.pageSize = val
-        this.getList(this.queryParams)
-      },
-      //翻页
-      useCurrentChange(val) {
-        this.queryParams.pageNum = val
-        this.getList(this.queryParams)
-      },
-      //搜索
-      useSearch() {
-        this.getList(this.queryParams)
-      },
-      //重置
-      useReset() {
-        this.dateRange = [];
-        this.queryParams = {
-          code: '',
-          name: '',
-          template: '',
-          templateName: '',
-          year: '',
-          pageNum: 1,
-          pageSize: 10
-        }
-        this.getList(this.queryParams)
-      },
-      //查询列表
-      getList(params) {
+    //重置
+    useReset() {
+      this.params = this.$init.params(this.SearchColumns);
+      this.page = this.$init.page();
+      this.getList(this.params, this.page);
+    },
+    //查询列表
+    async getList(prop, page) {
+      try {
         this.loading = true;
-        if (this.dateRange[1] != null) {
-          this.dateRange[1] = this.dateRange[1] + ' 23:59:59'
-        }
-        listTarget(this.addDateRange(params, this.dateRange)).then(res => {
-          if (res.code === 200) {
-            this.tableList = res.rows;
-            for (const item of this.tableList) {
-              item.templateData.year = item.templateData.year.substr(0, 4);
-            }
-            this.total = res.total;
-            this.loading = false;
+        let params = {
+          ...prop,
+          ...page,
+          params: {
+            beginTime: prop["dateRange"] ? prop["dateRange"][0] : "",
+            endTime: prop["dateRange"]
+              ? prop["dateRange"][1] + " 23:59:59"
+              : "",
+          },
+        };
+        delete params.dateRange;
+        let { code, rows, total } = await listTarget(params);
+        if (code === 200) {
+          this.tableList = rows;
+          this.page.total = total;
+          for (const item of this.tableList) {
+            item.templateData.year = item.templateData.year.substr(0, 4);
           }
-        })
-      },
-      drop() {
-        this.expanded = !this.expanded
-      },
-    }
-  };
-
+          this.total = total;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
 </script>
 
-<style lang="scss" scoped>
-  #deliveryAddressList {
-    height: calc(100vh - 84px);
-    padding: 12px;
-    box-sizing: border-box;
-    overflow-y: scroll;
-  }
-
-  .btn_grooup {
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .lines {
-    margin-top: 0;
-  }
-
-  .el-pagination {
-    margin-top: 10px;
-    text-align: right;
-  }
+<style scoped lang="scss">
+.el-card {
+  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 8px;
+}
 </style>

src/views/business/spd/target/targetMk/item.vue

@@ -111,7 +111,7 @@ export default {
     this.processHeadersData(this.template.unfold,this.columns);
     this.itemTemplate = this.formatItem(this.columns);
     if(this.pageStu == 'edit' || this.pageStu == 'see'){
-      if(!this.latestTemplate){
+      if(this.latestTemplate){
         await this.fetchTargetItem(this.form.id);
       }
     }