Merge remote-tracking branch 'origin/dev' into dev

src/api/purchase/supAtttachment.js

@@ -14,6 +14,6 @@ export function download(data) {
   return request({
     url: `/download`,
     method: 'post',
-    data: data,
+    data,
   })
 }

src/components/super-search/index.vue

@@ -105,87 +105,97 @@ export default {
           :span="item.span"
         >
           <el-form-item :prop="item.key" :label="item.title">
-            <component
-              v-if="attr.is === 'el-input'"
-              v-bind="attr"
-              v-model="innerValue[item.key]"
-              @keyup.enter.native="$emit('submit')"
-              style="width: 100%"
-            >
-            </component>
-            <component
-              v-if="attr.is === 'el-select'"
-              v-bind="attr"
-              v-model="innerValue[item.key]"
-              @change="attr.multiple ? '' : $emit('submit')"
-              style="width: 100%"
-            >
-              <template>
-                <el-option
-                  v-for="item in dict.type[attr.dictName]"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+            <template #default="form">
+              <slot
+                :name="item.key"
+                :row="innerValue"
+                :item="item"
+                :attr="attr"
+              >
+                <component
+                  v-if="attr.is === 'el-input'"
+                  v-bind="attr"
+                  v-model="innerValue[item.key]"
+                  @keyup.enter.native="$emit('submit')"
+                  style="width: 100%"
                 >
-                </el-option>
-              </template>
-            </component>
-            <component
-              v-if="attr.is === 'el-date-picker'"
-              v-bind="attr"
-              v-model="innerValue[item.key]"
-              @change="$emit('submit')"
-              style="width: 100%"
-            >
-            </component>
-            <component
-              v-if="attr.is === 'el-popover-select-v2'"
-              v-bind="attr"
-              v-model="innerValue[item.key]"
-              :title="item.title"
-              :source.sync="innerValue"
-              @change="$emit('submit')"
-              style="width: 100%"
-            >
-            </component>
-            <component
-              v-if="attr.is === 'el-popover-multiple-select-v2'"
-              v-bind="attr"
-              :title="item.title"
-              v-model="innerValue[item.key]"
-              :source.sync="innerValue"
-              @change="$emit('submit')"
-              style="width: 100%"
-            >
-            </component>
-            <component
-              v-if="attr.is === 'el-popover-tree-select'"
-              v-bind="attr"
-              v-model="innerValue[item.key]"
-              :source.sync="innerValue"
-              @change="$emit('submit')"
-              style="width: 100%"
-            >
-            </component>
-            <component
-              v-if="attr.is === 'el-popover-multiple-tree-select'"
-              v-bind="attr"
-              v-model="innerValue[item.key]"
-              :source.sync="innerValue"
-              @change="$emit('submit')"
-              style="width: 100%"
-            >
-            </component>
+                </component>
+                <component
+                  v-if="attr.is === 'el-select'"
+                  v-bind="attr"
+                  v-model="innerValue[item.key]"
+                  @change="attr.multiple ? '' : $emit('submit')"
+                  @clear="$emit('clear')"
+                  style="width: 100%"
+                >
+                  <template>
+                    <el-option
+                      v-for="item in dict.type[attr.dictName]"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </template>
+                </component>
+                <component
+                  v-if="attr.is === 'el-date-picker'"
+                  v-bind="attr"
+                  v-model="innerValue[item.key]"
+                  @change="$emit('submit')"
+                  style="width: 100%"
+                >
+                </component>
+                <component
+                  v-if="attr.is === 'el-popover-select-v2'"
+                  v-bind="attr"
+                  v-model="innerValue[item.key]"
+                  :title="item.title"
+                  :source.sync="innerValue"
+                  @change="$emit('submit')"
+                  style="width: 100%"
+                >
+                </component>
+                <component
+                  v-if="attr.is === 'el-popover-multiple-select-v2'"
+                  v-bind="attr"
+                  :title="item.title"
+                  v-model="innerValue[item.key]"
+                  :source.sync="innerValue"
+                  @change="$emit('submit')"
+                  style="width: 100%"
+                >
+                </component>
+                <component
+                  v-if="attr.is === 'el-popover-tree-select'"
+                  v-bind="attr"
+                  v-model="innerValue[item.key]"
+                  :source.sync="innerValue"
+                  @change="$emit('submit')"
+                  style="width: 100%"
+                >
+                </component>
+                <component
+                  v-if="attr.is === 'el-popover-multiple-tree-select'"
+                  v-bind="attr"
+                  v-model="innerValue[item.key]"
+                  :source.sync="innerValue"
+                  @change="$emit('submit')"
+                  style="width: 100%"
+                >
+                </component>
 
-            <component
-              v-if="attr.is === 'el-date-wrapper'"
-              v-bind="attr"
-              v-model="innerValue[item.key]"
-              :source.sync="innerValue"
-              @change="$emit('submit')"
-              style="width: 100%"
-            >
-            </component>
+                <component
+                  v-if="attr.is === 'el-date-wrapper'"
+                  v-bind="attr"
+                  v-model="innerValue[item.key]"
+                  :source.sync="innerValue"
+                  @change="$emit('submit')"
+                  style="width: 100%"
+                >
+                </component>
+              </slot>
+            </template>
           </el-form-item>
         </el-col>
       </el-row>

src/utils/init.js

@@ -27,11 +27,14 @@ export const initRules = (prop) => {
   const rules = {};
   prop
     .filter(({ item }) => item.required)
-    .forEach(({ item }) => {
+    .forEach(({ item, attr }) => {
       const message = `${item.title}不能为空`;
-      rules[item.key] = [
-        { required: true, message: message, trigger: "change" },
-      ];
+      rules[item.key] = attr.rules ?
+        [
+          { required: true, message: message, trigger: "change" },
+          ...attr.rules
+        ]
+        : [{ required: true, message: message, trigger: "change" },];
     });
   return rules;
 };

src/views/business/spd/cm/customers/columns.js

@@ -0,0 +1,283 @@
+export default function useColumns() {
+  const SearchColumns = [
+    {
+      item: { key: "orgName", title: "销售组织" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "ORG_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          org: 'id', orgName: 'name'
+        },
+        placeholder: "请输入销售组织",
+      },
+    },
+    {
+      item: { key: "code", title: "客户编码" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入客户编码",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "name", title: "客户名称" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入客户名称",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "classification", title: "客户分类" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_cm_classification",
+      },
+    },
+    {
+      item: { key: "enterpriseType", title: "企业类型" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_cm_enterprise_type",
+      },
+    },
+    {
+      item: { key: "responsiblePersonName", title: "负责人" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          responsiblePerson: 'id',
+          responsiblePersonName: 'name'
+        },
+      },
+    },
+
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "orgName", title: "销售组织" },
+      attr: {},
+    },
+    {
+      item: { key: "code", title: "客户编码" },
+      attr: {},
+    },
+    {
+      item: { key: "name", title: "客户名称" },
+      attr: {},
+    },
+    {
+      item: { key: "classification", title: "客户分类" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_classification",
+      },
+    },
+    {
+      item: { key: "industry", title: "客户行业" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_industry",
+      },
+    },
+    {
+      item: { key: "type", title: "客户类型" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_type",
+      },
+    },
+    {
+      item: { key: "category", title: "客户类别" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_category",
+      },
+    },
+    {
+      item: { key: "firstBattalion", title: "客户首营" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_yes_no",
+      },
+    },
+    {
+      item: { key: "channel", title: "销售渠道" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_channel",
+      },
+    },
+    {
+      item: { key: "businessType", title: "业务类型" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_business_type",
+      },
+    },
+    {
+      item: { key: "taxType", title: "纳税类别" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_tax_type",
+      },
+    },
+    {
+      item: { key: "potential", title: "是否潜客" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_yes_no",
+      },
+    },
+    {
+      item: { key: "responsiblePersonName", title: "负责人" },
+      attr: {},
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      sortabled: true,
+      fixedabled: true,
+      filterabled: true,
+      hiddenabled: true,
+    },
+  }));
+
+  // 联系人信息
+  const ContactColumns = [
+    {
+      item: { key: "code", title: "编号", width: 300 },
+      attr: {},
+    },
+    {
+      item: { key: "name", title: "姓名" },
+      attr: {},
+    },
+    {
+      item: { key: "gander", title: "性别" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "sys_user_sex",
+      },
+    },
+    {
+      item: { key: "telephone", title: "联系电话" },
+      attr: {},
+    },
+    {
+      item: { key: "customerName", title: "所属客户" },
+      attr: {},
+    },
+    {
+      item: { key: "departmentName", title: "部门名称", width: 200 },
+      attr: {},
+    },
+    {
+      item: { key: "position", title: "职务" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_bo_position",
+      },
+    },
+    {
+      item: { key: "power", title: "决策力" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_bo_power",
+      },
+    },
+    {
+      item: { key: "hobby", title: "兴趣爱好" },
+      attr: {},
+    },
+    {
+      item: { key: "address", title: "家庭地址", width: 200 },
+      attr: {},
+    },
+    {
+      item: { key: "state", title: "状态" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_bo_contact_state",
+      },
+    },
+
+  ];
+
+  // 负责人信息
+  const PrincipalColumns = [
+    {
+      item: { key: "personName", title: "人员姓名" },
+      attr: {},
+    },
+    {
+      item: { key: "customersName", title: "客户名称" },
+      attr: {},
+    },
+    {
+      item: { key: "relationshipType", title: "关系类型" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_relationship_type",
+      },
+    },
+    {
+      item: { key: "productionLine", title: "产线" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_cm_production_line",
+      },
+    },
+    {
+      item: { key: "startDate", title: "开始日期" },
+      attr: {},
+    },
+    {
+      item: { key: "endDate", title: "结束日期" },
+      attr: {},
+    },
+  ];
+
+
+  // 科室信息
+  const DepartmentInfoColumns = [
+    {
+      item: { key: "name", title: "科室名称" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_bo_section",
+      },
+    },
+    {
+      item: { key: "customersName", title: "客户名称" },
+      attr: {},
+    },
+    {
+      item: { key: "responsiblePersonName", title: "负责人姓名" },
+      attr: {},
+    },
+    {
+      item: { key: "phone", title: "联系人手机" },
+      attr: {},
+    },
+    {
+      item: { key: "address", title: "科室位置" },
+      attr: {},
+    },
+    {
+      item: { key: "conventionalTherapy", title: "常规治疗" },
+      attr: {},
+    },
+    {
+      item: { key: "characteristic", title: "科室特色" },
+      attr: {},
+    },
+  ];
+  return { SearchColumns, TableColumns, ContactColumns, PrincipalColumns, DepartmentInfoColumns }
+}

src/views/business/spd/cm/customers/index copy.vue

@@ -0,0 +1,1137 @@
+<template>
+  <div id="Customers" class="app-container">
+    <div v-if="!isAdd0 && !isAdd1 && !isAdd2">
+      <div v-if="isList">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-row :gutter="10" justify="space-between">
+            <el-col :span="5">
+              <el-form-item label="销售组织" prop="orgName">
+                <el-popover-select-v2 v-model="queryParams.orgName" title="销售组织" valueKey="name" referName="ORG_PARAM"
+                  :dataMapping="{ org: 'id', orgName: 'name'}" :source.sync="queryParams" placeholder="请输入销售组织" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="客户编码" prop="code">
+                <el-input v-model="queryParams.code" placeholder="请输入客户编码" clearable
+                  @keyup.enter.native="handleQuery" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="客户名称" prop="name">
+                <el-input v-model="queryParams.name" placeholder="请输入客户名称" clearable
+                  @keyup.enter.native="handleQuery" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="客户分类" prop="classification">
+                <el-select clearable v-model="queryParams.classification">
+                  <el-option v-for="dict in dict.type.mk_cm_classification" :key="dict.value" :label="dict.label"
+                    :value="dict.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-col>
+          </el-row>
+
+          <!-- 下拉盒子 -->
+          <CollapseTransition>
+            <div v-show="expanded">
+              <el-row :gutter="20" justify="space-between">
+                <el-col :span="5">
+                  <el-form-item label="企业类型" prop="enterpriseType">
+                    <el-select clearable v-model="queryParams.enterpriseType">
+                      <el-option v-for="dict in dict.type.mk_cm_enterprise_type" :key="dict.value" :label="dict.label"
+                        :value="dict.value" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="负责人" prop="responsiblePersonName">
+                    <el-popover-select-v2 v-model="queryParams.responsiblePersonName" title="负责人" valueKey="name"
+                      referName="CONTACTS_PARAM"
+                      :dataMapping="{ responsiblePerson: 'id', responsiblePersonName: 'name'}"
+                      :source.sync="queryParams" placeholder="请输入负责人" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </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="mb8">
+          <el-col :span="6" :offset="20">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
+              删除
+            </el-button>
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+          </el-col>
+        </el-row>
+
+        <el-table v-loading="loading" :data="customersList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="index" label="序号" min-width="50" align="center" />
+          <el-table-column label="销售组织" align="center" prop="orgName" min-width="300" />
+          <el-table-column label="客户编码" align="center" prop="code" min-width="100" />
+          <el-table-column label="客户名称" align="center" prop="name" min-width="200" />
+          <el-table-column label="客户分类" align="center" prop="classification" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_classification" :value="scope.row.classification" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户行业" align="center" prop="industry" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_industry" :value="scope.row.industry" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户类型" align="center" prop="type" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_type" :value="scope.row.type" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户类别" align="center" prop="category" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_category" :value="scope.row.category" />
+            </template>
+          </el-table-column>
+          <el-table-column label="客户首营" align="center" prop="firstBattalion" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_yes_no" :value="scope.row.firstBattalion" />
+            </template>
+          </el-table-column>
+          <el-table-column label="销售渠道" align="center" prop="channel" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_channel" :value="scope.row.channel" />
+            </template>
+          </el-table-column>
+          <el-table-column label="业务类型" align="center" prop="businessType" min-width="100" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_business_type" :value="scope.row.businessType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="纳税类别" align="center" prop="taxType" min-width="100" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_tax_type" :value="scope.row.taxType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="是否潜客" align="center" prop="potential" min-width="80" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.mk_cm_yes_no" :value="scope.row.potential" />
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="销售区域" align="center" prop="marketingAreaName" min-width="80" /> -->
+          <el-table-column label="负责人" align="center" prop="responsiblePersonName" min-width="80" />
+          <!-- <el-table-column label="负责部门" align="center" prop="responsibleDeptName" min-width="80" /> -->
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px" fixed="right">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheck(scope.row.id)">查看</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
+      </div>
+      <!-- 添加或修改客户对话框 -->
+      <div v-if="!isList">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <div>
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="基本信息" name="first">
+                <el-divider content-position="left">基本信息</el-divider>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="销售组织" prop="orgName">
+                      <el-popover-select-v2 v-model="form.orgName" title="销售组织" valueKey="name" referName="ORG_PARAM"
+                        :dataMapping="{ org: 'id', orgName: 'name'}" :source.sync="form" placeholder="请输入销售组织"
+                        :disabled="openState == 'check'">
+                      </el-popover-select-v2>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户编码" prop="code">
+                      <el-input v-model="form.code" placeholder="编码系统自动生成" disabled />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户名称" prop="name">
+                      <el-input v-model="form.name" placeholder="请输入客户名称" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户简称" prop="abbreviation">
+                      <el-input v-model="form.abbreviation" placeholder="请输入客户简称" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="客户分类" prop="classification">
+                      <el-select clearable v-model="form.classification" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_classification" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户类型" prop="type">
+                      <el-select clearable v-model="form.type" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_type" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户类别" prop="category">
+                      <el-select clearable v-model="form.category" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_category" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户首营" prop="firstBattalion">
+                      <el-select clearable v-model="form.firstBattalion" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_yes_no" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="销售渠道" prop="channel">
+                      <el-select clearable v-model="form.channel" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_channel" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="业务类型" prop="businessType">
+                      <el-select clearable v-model="form.businessType" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_business_type" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="客户行业" prop="industry">
+                      <el-select clearable v-model="form.industry" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_industry" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="纳税类别" prop="taxType">
+                      <el-select clearable v-model="form.taxType" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_tax_type" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="是否潜客" prop="potential">
+                      <el-select clearable v-model="form.potential" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_yes_no" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="地区分类" prop="areaClassification">
+                      <el-input v-model="form.areaClassification" placeholder="请输入地区分类"
+                        :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="证照号码" prop="licenseNumber">
+                      <el-input v-model="form.licenseNumber" placeholder="请输入证照号码" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <!-- <el-divider content-position="left">销售区域</el-divider>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="销售区域" prop="marketingAreaName">
+                    <el-popover-select-v2 v-model="form.marketingAreaName" title="销售区域" valueKey="name"
+                      referName="MK_SALESAREA_PARAM" :dataMapping="{ marketingArea: 'id', marketingAreaName: 'name'}"
+                      :source.sync="form" placeholder="请输入销售区域" :disabled="openState == 'check'">
+                    </el-popover-select-v2>
+                  </el-form-item>
+                </el-col>
+              </el-row> -->
+                <el-divider content-position="left">负责人</el-divider>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="负责人" prop="responsiblePersonName">
+                      <el-popover-select-v2 v-model="form.responsiblePersonName" title="负责人" valueKey="name"
+                        referName="CONTACTS_PARAM"
+                        :dataMapping="{ responsiblePerson: 'id', responsiblePersonName: 'name'}" :source.sync="form"
+                        placeholder="请输入负责人" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <!-- <el-col :span="6">
+                  <el-form-item label="负责部门" prop="responsibleDeptName">
+                    <el-popover-select-v2 v-model="form.responsibleDeptName" title="负责部门" valueKey="name"
+                      referName="DEPT_PARAM" :dataMapping="{ responsibleDept: 'id', responsibleDeptName: 'name'}"
+                      :source.sync="form" placeholder="请输入负责部门" :disabled="openState == 'check'" />
+                  </el-form-item>
+                </el-col> -->
+                </el-row>
+                <!-- <el-divider content-position="left">开票客户</el-divider>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="开票客户" prop="billingCustomerName">
+                    <el-popover-select-v2 v-model="form.billingCustomerName" title="开票客户" valueKey="name"
+                      referName="CUSTOMER_PARAM_ZT" :dataMapping="{ billingCustomer: 'id', billingCustomerName: 'name'}"
+                      :source.sync="form" placeholder="请输入开票客户" :disabled="openState == 'check'" />
+                  </el-form-item>
+                </el-col>
+              </el-row> -->
+                <el-divider content-position="left">其他信息</el-divider>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="创建人" prop="createBy">
+                      <el-input v-model="form.createByName" :disabled="true" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="创建时间" prop="createTime">
+                      <el-input v-model="form.createTime" :disabled="true" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="修改人" prop="updateBy">
+                      <el-input v-model="form.updateByName" :disabled="true" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="修改时间" prop="updateTime">
+                      <el-input v-model="form.updateTime" :disabled="true" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="资质信息" name="second">
+                <el-divider content-position="left">资质信息</el-divider>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="企业类型" prop="enterpriseType">
+                      <el-select clearable v-model="form.enterpriseType" :disabled="openState == 'check'">
+                        <el-option v-for="dict in dict.type.mk_cm_enterprise_type" :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="企业名称" prop="enterpriseName">
+                      <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <!-- <el-col :span="6">
+                  <el-form-item label="注册地区" prop="registrationArea">
+                    <el-input v-model="form.registrationArea" placeholder="请输入注册地区" :disabled="openState == 'check'" />
+                  </el-form-item>
+                </el-col> -->
+                  <el-col :span="6">
+                    <el-form-item label="经度" prop="longitude">
+                      <el-input v-model="form.longitude" placeholder="请输入经度" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="纬度" prop="latitude">
+                      <el-input v-model="form.latitude" placeholder="请输入纬度" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6">
+                    <el-form-item label="详细地址" prop="detailedAddress">
+                      <el-input v-model="form.detailedAddress" placeholder="请输入详细地址" :disabled="openState == 'check'" />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-tab-pane>
+
+              <el-tab-pane label="联系人信息" name="third" v-if="openState == 'check'">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="6" :offset="21">
+                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMkCmCustomersContact">添加
+                    </el-button>
+                    <el-button type="danger" icon="el-icon-delete" size="mini"
+                      @click="handleDeleteTab('0')">
+                      删除
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table :data="mkCmCustomersContactList" :row-class-name="rowMkCmCustomersContactIndex"
+                  @selection-change="handleMkCmCustomersContactSelectionChange" ref="mkCmCustomersContact">
+                  <el-table-column type="selection" width="55" align="center" />
+                  <el-table-column type="index" label="序号" min-width="50" align="center" />
+                  <el-table-column width="300" label="编号" align="center" prop="code" />
+                  <el-table-column label="姓名" align="center" prop="name" min-width="150" />
+                  <el-table-column label="性别" align="center" prop="gander" >
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.gander"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="联系电话" align="center" prop="telephone" min-width="150" />
+                  <el-table-column label="所属客户" align="center" prop="customerName" min-width="150" />
+                  <el-table-column width="200" show-overflow-tooltip label="部门名称" align="center" prop="departmentName" />
+                  <el-table-column label="职务" align="center" prop="position" >
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_bo_position" :value="scope.row.position"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="决策力" align="center" prop="power" >
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_bo_power" :value="scope.row.power"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="200" show-overflow-tooltip label="兴趣爱好" align="center" prop="hobby" />
+                  <el-table-column width="200" show-overflow-tooltip label="家庭地址" align="center" prop="address" />
+                  <el-table-column label="状态" align="center" prop="state" >
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_bo_contact_state" :value="scope.row.state"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
+                    fixed="right">
+                    <template slot-scope="scope">
+                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '0')">
+                        查看
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '0')">修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '0')">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+
+              <el-tab-pane label="负责人信息" name="fourth" v-if="openState == 'check'">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="6" :offset="21">
+                    <el-button type="primary" icon="el-icon-plus" size="mini"
+                      @click="handleAddMkCmCustomersResponsiblePerson">添加
+                    </el-button>
+                    <el-button type="danger" icon="el-icon-delete" size="mini"
+                      @click="handleDeleteTab('1')">
+                      删除
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table :data="mkCmCustomersResponsiblePersonList"
+                  :row-class-name="rowMkCmCustomersResponsiblePersonIndex"
+                  @selection-change="handleMkCmCustomersResponsiblePersonSelectionChange"
+                  ref="mkCmCustomersResponsiblePerson">
+                  <el-table-column type="selection" width="55" align="center" />
+                  <el-table-column type="index" label="序号" min-width="50" align="center" />
+                  <el-table-column label="人员姓名" align="center" prop="personName" min-width="150" />
+                  <el-table-column label="客户名称" align="center" prop="customersName" min-width="150" />
+                  <el-table-column label="关系类型" align="center" prop="relationshipType" min-width="150"
+                    show-overflow-tooltip>
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_cm_relationship_type" :value="scope.row.relationshipType"
+                        show-overflow-tooltip />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="产线" align="center" prop="productionLine" min-width="150">
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_cm_production_line" :value="scope.row.productionLine"
+                        show-overflow-tooltip />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="开始日期" align="center" prop="startDate" min-width="150" />
+                  <el-table-column label="结束日期" align="center" prop="endDate" min-width="150" />
+                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
+                    fixed="right">
+                    <template slot-scope="scope">
+                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '1')">
+                        查看
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '1')">修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '1')">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+
+              <el-tab-pane label="科室信息" name="fifth" v-if="openState == 'check'">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="6" :offset="21">
+                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMkCmCustomersDepartment">
+                      添加
+                    </el-button>
+                    <el-button type="danger" icon="el-icon-delete" size="mini"
+                      @click="handleDeleteTab('2')">
+                      删除
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table :data="mkCmCustomersDepartmentList" :row-class-name="rowMkCmCustomersDepartmentIndex"
+                  @selection-change="handleMkCmCustomersDepartmentSelectionChange" ref="mkCmCustomersDepartment">
+                  <el-table-column type="selection" width="55" align="center" />
+                  <el-table-column type="index" label="序号" min-width="50" align="center" />
+                  <el-table-column label="科室名称" align="center" prop="name" min-width="150">
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.mk_bo_section" :value="scope.row.name"
+                        show-overflow-tooltip />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="客户名称" align="center" prop="customersName" min-width="150" />
+                  <el-table-column label="负责人姓名" align="center" prop="responsiblePersonName" min-width="150" />
+                  <el-table-column label="联系人手机" align="center" prop="phone" min-width="150" />
+                  <el-table-column label="科室位置" align="center" prop="address" min-width="150" />
+                  <el-table-column label="常规治疗" align="center" prop="conventionalTherapy" min-width="150" />
+                  <el-table-column label="科室特色" align="center" prop="characteristic" min-width="150" />
+                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
+                    fixed="right">
+                    <template slot-scope="scope">
+                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '2')">
+                        查看
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '2')">修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '2')">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+            </el-tabs>
+
+            <div slot="footer" style="margin-left: 88%; margin-top: 1%">
+              <el-button type="primary" @click="submitForm" :disabled="openState == 'check'">确 定</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <AddContact v-model="isAdd0" v-if="isAdd0" :operatingState="operatingSta" :state="state" :row="rowDetail" :customersId="form.id"
+      :customersName="form.name" :customersCode="form.code" />
+
+    <AddPerson v-model="isAdd1" v-if="isAdd1" :pageStu="page" :disable="disable" :row="rowDetail" :customersId="form.id"
+      :customersName="form.name" />
+
+    <AddDepartment v-model="isAdd2" v-if="isAdd2" :pageStu="page" :disable="disable" :row="rowDetail"
+      :customersId="form.id" :customersName="form.name" />
+  </div>
+</template>
+
+<script>
+  // 客户接口
+  import {
+    listCustomers,
+    getCustomers,
+    delCustomers,
+    addCustomers,
+    updateCustomers,
+    getContactInfo,
+    delContact,
+  } from "@/api/business/spd/cm/customers";
+  // 客户负责人接口
+  import {
+    delCustomersResponsiblePerson,
+  } from "@/api/business/spd/cm/customersResponsiblePerson";
+  // 客户科室接口
+  import {
+    delCustomersDepartment,
+  } from "@/api/business/spd/cm/customersDepartment";
+  import CollapseTransition from '@/components/MyCollapse/collapse.vue';
+  // 参照弹出框
+  import ElPopoverSelectV2 from "@/components/popover-select-v2";
+  // 新建客户联系人信息页面
+  import AddContact from "@/views/business/spd/cm/customersContact/index.vue";
+  // 新建客户负责人信息页面
+  import AddPerson from "@/views/business/spd/cm/customersResponsiblePerson/index.vue";
+  // 新建客户科室信息页面
+  import AddDepartment from "@/views/business/spd/cm/customersDepartment/index.vue";
+
+  export default {
+    name: "Customers",
+    components: {
+      CollapseTransition,
+      ElPopoverSelectV2,
+      AddContact,
+      AddPerson,
+      AddDepartment,
+    },
+    dicts: ['mk_cm_yes_no', 'mk_cm_classification', 'mk_cm_type', 'mk_cm_category', 'mk_cm_channel',
+      'mk_cm_business_type', 'mk_cm_industry', 'mk_cm_tax_type', 'mk_cm_enterprise_type', 'mk_cm_relationship_type',
+      'mk_cm_production_line', 'mk_bo_section', 'sys_user_sex', 'mk_bo_position', 'mk_bo_power', 'mk_bo_contact_state'
+    ],
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 选中数组中的客户编码
+        codes: [],
+        // 子表选中数据
+        checkedMkCmCustomersContact: [],
+        checkedMkCmCustomersResponsiblePerson: [],
+        checkedMkCmCustomersDepartment: [],
+        // 子表选中主键
+        checkedMkCmCustomersContactIds: [],
+        checkedMkCmCustomersResponsiblePersonIds: [],
+        checkedMkCmCustomersDepartmentIds: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 客户表格数据
+        customersList: [],
+        // 客户联系人表格数据
+        mkCmCustomersContactList: [],
+        // 客户负责人表格数据
+        mkCmCustomersResponsiblePersonList: [],
+        // 客户科室表格数据
+        mkCmCustomersDepartmentList: [],
+        // 首次进入标签页的显示
+        activeName: 'first',
+        // 下拉收起配置
+        expanded: false,
+        // 页面打开状态
+        openState: null,
+        // 列表页面
+        isList: true,
+        // 添加页面
+        isAdd0: false,
+        operatingSta: null,
+        state: null,
+        isAdd1: false,
+        isAdd2: false,
+        rowDetail: {},
+        disable: false,
+        // 页面状态
+        page: null,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          org: null,
+          orgName: null,
+          code: null,
+          name: null,
+          abbreviation: null,
+          classification: null,
+          type: null,
+          category: null,
+          firstBattalion: null,
+          channel: null,
+          businessType: null,
+          industry: null,
+          taxType: null,
+          potential: null,
+          areaClassification: null,
+          licenseNumber: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          responsibleDept: null,
+          responsibleDeptName: null,
+          billingCustomer: null,
+          billingCustomerName: null,
+          enterpriseType: null,
+          enterpriseName: null,
+          registrationArea: null,
+          longitude: null,
+          latitude: null,
+          detailedAddress: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+          orgName: [{
+            required: true,
+            message: '销售组织不能为空',
+            trigger: 'blur'
+          }],
+          name: [{
+            required: true,
+            message: '客户名称不能为空',
+            trigger: 'blur'
+          }],
+          classification: [{
+            required: true,
+            message: '客户分类不能为空',
+            trigger: 'blur'
+          }],
+          taxType: [{
+            required: true,
+            message: '纳税类别不能为空',
+            trigger: 'blur'
+          }],
+          licenseNumber: [{
+            required: true,
+            message: '证照号码不能为空',
+            trigger: 'blur'
+          }],
+          enterpriseType: [{
+            required: true,
+            message: '企业类型不能为空',
+            trigger: 'blur'
+          }],
+          enterpriseName: [{
+            required: true,
+            message: '企业名称不能为空',
+            trigger: 'blur'
+          }],
+        },
+      };
+    },
+    created() {
+      this.reset();
+      this.getList();
+    },
+    methods: {
+      /** 查询客户列表 */
+      getList() {
+        this.loading = true;
+        listCustomers(this.queryParams).then(response => {
+          this.customersList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.isList = true;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          org: null,
+          orgName: null,
+          code: null,
+          name: null,
+          abbreviation: null,
+          classification: null,
+          type: null,
+          category: null,
+          firstBattalion: null,
+          channel: null,
+          businessType: null,
+          industry: null,
+          taxType: null,
+          potential: null,
+          areaClassification: null,
+          licenseNumber: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          responsibleDept: null,
+          responsibleDeptName: null,
+          billingCustomer: null,
+          billingCustomerName: null,
+          enterpriseType: null,
+          enterpriseName: null,
+          registrationArea: null,
+          longitude: null,
+          latitude: null,
+          detailedAddress: null,
+          createBy: null,
+          createTime: null,
+          createByName: null,
+          updateBy: null,
+          updateTime: null,
+          updateByName: null,
+          delFlag: null
+        };
+        this.activeName = 'first';
+        this.mkCmCustomersContactList = [];
+        this.mkCmCustomersResponsiblePersonList = [];
+        this.mkCmCustomersDepartmentList = [];
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetQueryParams();
+        this.handleQuery();
+      },
+      /** 查询参数重置 */
+      resetQueryParams() {
+        this.queryParams = {
+          abbreviation: null,
+          areaClassification: null,
+          billingCustomer: null,
+          billingCustomerName: null,
+          businessType: null,
+          category: null,
+          channel: null,
+          classification: null,
+          code: null,
+          detailedAddress: null,
+          enterpriseName: null,
+          enterpriseType: null,
+          firstBattalion: null,
+          industry: null,
+          latitude: null,
+          licenseNumber: null,
+          longitude: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          name: null,
+          org: null,
+          orgName: null,
+          pageNum: 1,
+          pageSize: 10,
+          potential: null,
+          registrationArea: null,
+          responsibleDept: null,
+          responsibleDeptName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          taxType: null,
+          type: null
+        };
+        this.resetForm("queryForm");
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.codes = selection.map(item => item.code)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.isList = false;
+        this.openState = 'add';
+      },
+      /** 查看按钮操作 */
+      handleCheck(id) {
+        this.isList = false;
+        const id1 = id || this.ids
+        getCustomers(id1).then(response => {
+          this.form = response.data;
+          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
+          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
+          this.openState = 'check';
+        });
+        getContactInfo(id1).then(response => {
+          this.mkCmCustomersContactList = response.data;
+        });
+      },
+      /** Add查看按钮操作 */
+      handleCheckAdd(row, type) {
+        if (type == '0') {
+          this.isAdd0 = true;
+          this.operatingSta = 'Browse';
+          this.rowDetail = row;
+          this.disable = true;
+        } else if (type == '1') {
+          this.isAdd1 = true;
+          this.page = 'check';
+          this.rowDetail = row;
+          this.disable = true;
+        } else if (type == '2') {
+          this.isAdd2 = true;
+          this.page = 'check';
+          this.rowDetail = row;
+          this.disable = true;
+        }
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.isList = false;
+        this.reset();
+        const id = row.id || this.ids
+        getCustomers(id).then(response => {
+          this.form = response.data;
+          this.form.oldName = response.data.name;
+          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
+          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
+          this.openState = 'update';
+        });
+      },
+      /** Add修改按钮操作 */
+      handleUpdateAdd(row, type) {
+        if (type == '0') {
+          this.isAdd0 = true;
+          this.operatingSta = 'Update';
+          this.rowDetail = row;
+          this.disable = false;
+        } else if (type == '1') {
+          this.isAdd1 = true;
+          this.page = 'update';
+          this.rowDetail = row;
+          this.disable = false;
+        } else if (type == '2') {
+          this.isAdd2 = true;
+          this.page = 'update';
+          this.rowDetail = row;
+          this.disable = false;
+        }
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateCustomers(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.reset();
+                this.getList();
+                this.isList = true;
+              });
+            } else {
+              addCustomers(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.reset();
+                this.getList();
+                this.isList = true;
+              });
+            }
+          } else {
+            this.checkout();
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const codes = row.code || this.codes;
+        let ids = [];
+        if (row.isTrusted != null && row.isTrusted != '' && row.isTrusted != undefined) {
+          ids = this.ids;
+        } else {
+          ids[0] = row.id;
+        }
+        this.$modal.confirm('是否确认删除客户编码为"' + codes + '"的数据项？').then(function () {
+          return delCustomers(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      },
+      /** Add删除按钮操作 */
+      handleDeleteAdd(row, type) {
+        let ids = [];
+        ids[0] = row.id;
+        if (type == '0') {
+          console.log(row, 'row')
+          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+            return delContact(ids);
+          }).then(() => {
+            getContactInfo(this.form.id).then(res => {
+              this.mkCmCustomersContactList = res.data;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        } else if (type == '1') {
+          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+            return delCustomersResponsiblePerson(ids);
+          }).then(() => {
+            getCustomers(row.customersId).then(res => {
+              this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        } else if (type == '2') {
+          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+            return delCustomersDepartment(ids);
+          }).then(() => {
+            getCustomers(row.customersId).then(res => {
+              this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
+            })
+            this.$modal.msgSuccess("删除成功");
+          }).catch(() => {});
+        }
+      },
+      /** 客户联系人序号 */
+      rowMkCmCustomersContactIndex({
+        row,
+        rowIndex
+      }) {
+        row.index = rowIndex + 1;
+      },
+      /** 客户负责人序号 */
+      rowMkCmCustomersResponsiblePersonIndex({
+        row,
+        rowIndex
+      }) {
+        row.index = rowIndex + 1;
+      },
+      /** 客户科室序号 */
+      rowMkCmCustomersDepartmentIndex({
+        row,
+        rowIndex
+      }) {
+        row.index = rowIndex + 1;
+      },
+      /** 客户联系人添加按钮操作 */
+      handleAddMkCmCustomersContact() {
+        this.isList = false;
+        this.isAdd0 = true;
+        this.operatingSta = 'Insert';
+        this.disable = false;
+        this.state = '1';
+      },
+      /** 客户负责人添加按钮操作 */
+      handleAddMkCmCustomersResponsiblePerson() {
+        this.isList = false;
+        this.isAdd1 = true;
+        this.page = 'add';
+        this.disable = false;
+      },
+      /** 客户科室添加按钮操作 */
+      handleAddMkCmCustomersDepartment() {
+        this.isList = false;
+        this.isAdd2 = true;
+        this.page = 'add';
+        this.disable = false;
+      },
+      /** 客户页签删除按钮操作 */
+      handleDeleteTab(type) {
+        let that = this;
+        if (type == '0') {
+          if (that.checkedMkCmCustomersContact.length == 0) {
+            that.$modal.msgError("请先选择要删除的客户联系人数据");
+          } else {
+            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersContact + '"的数据项？').then(function () {
+              return delContact(that.checkedMkCmCustomersContactIds);
+            }).then(() => {
+              getContactInfo(that.form.id).then(res => {
+                that.mkCmCustomersContactList = res.data;
+              })
+              that.$modal.msgSuccess("删除成功");
+            }).catch((e) => {
+              console.log(e, 'e');
+            });
+          }
+        } else if (type == '1') {
+          if (that.checkedMkCmCustomersResponsiblePerson.length == 0) {
+            that.$modal.msgError("请先选择要删除的客户负责人数据");
+          } else {
+            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersResponsiblePerson + '"的数据项？').then(function () {
+              return delCustomersResponsiblePerson(that.checkedMkCmCustomersResponsiblePersonIds);
+            }).then(() => {
+              getCustomers(that.form.id).then(res => {
+                that.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
+              })
+              that.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+          }
+        } else if (type == '2') {
+          if (that.checkedMkCmCustomersDepartment.length == 0) {
+            that.$modal.msgError("请先选择要删除的客户科室数据");
+          } else {
+            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersDepartment + '"的数据项？').then(function () {
+              return delCustomersDepartment(that.checkedMkCmCustomersDepartmentIds);
+            }).then(() => {
+              getCustomers(that.form.id).then(res => {
+                that.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
+              })
+              that.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+          }
+        }
+      },
+      /** 复选框选中数据 */
+      handleMkCmCustomersContactSelectionChange(selection) {
+        this.checkedMkCmCustomersContact = selection.map(item => item.index)
+        this.checkedMkCmCustomersContactIds = selection.map(item => item.id)
+      },
+      /** 复选框选中数据 */
+      handleMkCmCustomersResponsiblePersonSelectionChange(selection) {
+        this.checkedMkCmCustomersResponsiblePerson = selection.map(item => item.index)
+        this.checkedMkCmCustomersResponsiblePersonIds = selection.map(item => item.id)
+      },
+      /** 复选框选中数据 */
+      handleMkCmCustomersDepartmentSelectionChange(selection) {
+        this.checkedMkCmCustomersDepartment = selection.map(item => item.index)
+        this.checkedMkCmCustomersDepartmentIds = selection.map(item => item.id)
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download('cm/customers/export', {
+          ...this.queryParams
+        }, `customers_${new Date().getTime()}.xlsx`)
+      },
+      /** 标签页切换 */
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
+      /** 搜索条件下拉 */
+      drop() {
+        this.expanded = !this.expanded
+      },
+      /** 弹出框关闭确认 */
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      /** 必填项校验 */
+      checkout() {
+        if (!(this.form.orgName != null && this.form.orgName != '' && this.form.orgName != undefined &&
+            this.form.name != null && this.form.name != '' && this.form.name != undefined &&
+            this.form.classification != null && this.form.classification != '' && this.form.classification !=
+            undefined &&
+            this.form.taxType != null && this.form.taxType != '' && this.form.taxType != undefined &&
+            this.form.licenseNumber != null && this.form.licenseNumber != '' && this.form.licenseNumber != undefined)) {
+          return this.$modal.msgError("基本信息中存在必填项未填！");
+        }
+        if (!(this.form.enterpriseType != null && this.form.enterpriseType != '' && this.form.enterpriseType !=
+            undefined &&
+            this.form.enterpriseName != null && this.form.enterpriseName != '' && this.form.enterpriseName != undefined
+          )) {
+          return this.$modal.msgError("资质信息中存在必填项未填！");
+        }
+      },
+    }
+  };
+
+</script>
+
+<style>
+  .btn_group {
+    width: 100%;
+    margin: 20px -10px;
+    display: flex;
+    justify-content: right;
+  }
+
+  .lines {
+    margin-top: 0;
+  }
+
+</style>

src/views/business/spd/cm/customers/index.vue

@@ -1,268 +1,323 @@
 <template>
-  <div id="Customers" class="app-container">
+  <div id="Customers">
     <div v-if="!isAdd0 && !isAdd1 && !isAdd2">
-      <div v-if="isList">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
-          label-width="68px">
-          <el-row :gutter="10" justify="space-between">
-            <el-col :span="5">
-              <el-form-item label="销售组织" prop="orgName">
-                <el-popover-select-v2 v-model="queryParams.orgName" title="销售组织" valueKey="name" referName="ORG_PARAM"
-                  :dataMapping="{ org: 'id', orgName: 'name'}" :source.sync="queryParams" placeholder="请输入销售组织" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="客户编码" prop="code">
-                <el-input v-model="queryParams.code" placeholder="请输入客户编码" clearable
-                  @keyup.enter.native="handleQuery" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="客户名称" prop="name">
-                <el-input v-model="queryParams.name" placeholder="请输入客户名称" clearable
-                  @keyup.enter.native="handleQuery" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="客户分类" prop="classification">
-                <el-select clearable v-model="queryParams.classification">
-                  <el-option v-for="dict in dict.type.mk_cm_classification" :key="dict.value" :label="dict.label"
-                    :value="dict.value" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            </el-col>
-          </el-row>
+      <el-card
+        v-if="isList"
+        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="resetQuery"
+          @submit="getList(params, page)"
+        ></el-super-search>
 
-          <!-- 下拉盒子 -->
-          <CollapseTransition>
-            <div v-show="expanded">
-              <el-row :gutter="20" justify="space-between">
-                <el-col :span="5">
-                  <el-form-item label="企业类型" prop="enterpriseType">
-                    <el-select clearable v-model="queryParams.enterpriseType">
-                      <el-option v-for="dict in dict.type.mk_cm_enterprise_type" :key="dict.value" :label="dict.label"
-                        :value="dict.value" />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="5">
-                  <el-form-item label="负责人" prop="responsiblePersonName">
-                    <el-popover-select-v2 v-model="queryParams.responsiblePersonName" title="负责人" valueKey="name"
-                      referName="CONTACTS_PARAM"
-                      :dataMapping="{ responsiblePerson: 'id', responsiblePersonName: 'name'}"
-                      :source.sync="queryParams" placeholder="请输入负责人" />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </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="mb8">
-          <el-col :span="6" :offset="20">
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
+        <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="handleAdd"
+              >新增</el-button
+            >
+            <el-button :size="size" :disabled="multiple" @click="handleDelete">
               删除
             </el-button>
-            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+            <el-button :size="size" @click="handleExport">导出</el-button>
           </el-col>
         </el-row>
 
-        <el-table v-loading="loading" :data="customersList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55" align="center" />
-          <el-table-column type="index" label="序号" min-width="50" align="center" />
-          <el-table-column label="销售组织" align="center" prop="orgName" min-width="300" />
-          <el-table-column label="客户编码" align="center" prop="code" min-width="100" />
-          <el-table-column label="客户名称" align="center" prop="name" min-width="200" />
-          <el-table-column label="客户分类" align="center" prop="classification" min-width="80" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_classification" :value="scope.row.classification" />
-            </template>
-          </el-table-column>
-          <el-table-column label="客户行业" align="center" prop="industry" min-width="80" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_industry" :value="scope.row.industry" />
-            </template>
-          </el-table-column>
-          <el-table-column label="客户类型" align="center" prop="type" min-width="80" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_type" :value="scope.row.type" />
-            </template>
-          </el-table-column>
-          <el-table-column label="客户类别" align="center" prop="category" min-width="80" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_category" :value="scope.row.category" />
-            </template>
-          </el-table-column>
-          <el-table-column label="客户首营" align="center" prop="firstBattalion" min-width="80" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_yes_no" :value="scope.row.firstBattalion" />
-            </template>
-          </el-table-column>
-          <el-table-column label="销售渠道" align="center" prop="channel" min-width="80" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_channel" :value="scope.row.channel" />
-            </template>
-          </el-table-column>
-          <el-table-column label="业务类型" align="center" prop="businessType" min-width="100" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_business_type" :value="scope.row.businessType" />
-            </template>
-          </el-table-column>
-          <el-table-column label="纳税类别" align="center" prop="taxType" min-width="100" show-overflow-tooltip>
+        <el-super-ux-table
+          v-model="customersList"
+          :size="size"
+          :dict="dict"
+          :page="page"
+          :columns="TableColumns"
+          index
+          checkbox
+          pagination
+          convenitentOperation
+          highlight-current-row
+          storage-key="CustomersSuperTable"
+          @selection-change="handleSelectionChange"
+          @pagination="getList({ ...page, ...params })"
+          style="margin: 16px 0 0"
+        >
+          <ux-table-column
+            fixed="right"
+            title="操作"
+            align="center"
+            width="120"
+          >
             <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_tax_type" :value="scope.row.taxType" />
+              <el-button
+                :size="size"
+                type="text"
+                @click="handleCheck(scope.row.id)"
+                >查看</el-button
+              >
+              <el-button
+                :size="size"
+                type="text"
+                @click="handleUpdate(scope.row)"
+                >修改</el-button
+              >
+              <el-button
+                :size="size"
+                type="text"
+                @click="handleDelete(scope.row)"
+                >删除</el-button
+              >
             </template>
-          </el-table-column>
-          <el-table-column label="是否潜客" align="center" prop="potential" min-width="80" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.mk_cm_yes_no" :value="scope.row.potential" />
-            </template>
-          </el-table-column>
-          <!-- <el-table-column label="销售区域" align="center" prop="marketingAreaName" min-width="80" /> -->
-          <el-table-column label="负责人" align="center" prop="responsiblePersonName" min-width="80" />
-          <!-- <el-table-column label="负责部门" align="center" prop="responsibleDeptName" min-width="80" /> -->
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px" fixed="right">
-            <template slot-scope="scope">
-              <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheck(scope.row.id)">查看</el-button>
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-          @pagination="getList" />
-      </div>
+          </ux-table-column>
+        </el-super-ux-table>
+      </el-card>
       <!-- 添加或修改客户对话框 -->
-      <div v-if="!isList">
-        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-          <div>
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-              <el-tab-pane label="基本信息" name="first">
-                <el-divider content-position="left">基本信息</el-divider>
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="销售组织" prop="orgName">
-                      <el-popover-select-v2 v-model="form.orgName" title="销售组织" valueKey="name" referName="ORG_PARAM"
-                        :dataMapping="{ org: 'id', orgName: 'name'}" :source.sync="form" placeholder="请输入销售组织"
-                        :disabled="openState == 'check'">
-                      </el-popover-select-v2>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="客户编码" prop="code">
-                      <el-input v-model="form.code" placeholder="编码系统自动生成" disabled />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="客户名称" prop="name">
-                      <el-input v-model="form.name" placeholder="请输入客户名称" :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="客户简称" prop="abbreviation">
-                      <el-input v-model="form.abbreviation" placeholder="请输入客户简称" :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="客户分类" prop="classification">
-                      <el-select clearable v-model="form.classification" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_classification" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="客户类型" prop="type">
-                      <el-select clearable v-model="form.type" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_type" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="客户类别" prop="category">
-                      <el-select clearable v-model="form.category" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_category" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="客户首营" prop="firstBattalion">
-                      <el-select clearable v-model="form.firstBattalion" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_yes_no" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="销售渠道" prop="channel">
-                      <el-select clearable v-model="form.channel" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_channel" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="业务类型" prop="businessType">
-                      <el-select clearable v-model="form.businessType" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_business_type" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="客户行业" prop="industry">
-                      <el-select clearable v-model="form.industry" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_industry" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="纳税类别" prop="taxType">
-                      <el-select clearable v-model="form.taxType" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_tax_type" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="是否潜客" prop="potential">
-                      <el-select clearable v-model="form.potential" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_yes_no" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="地区分类" prop="areaClassification">
-                      <el-input v-model="form.areaClassification" placeholder="请输入地区分类"
-                        :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="证照号码" prop="licenseNumber">
-                      <el-input v-model="form.licenseNumber" placeholder="请输入证照号码" :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <!-- <el-divider content-position="left">销售区域</el-divider>
+      <div v-if="!isList" style="padding: 16px">
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="80px"
+          :size="size"
+        >
+          <div style="text-align: right">
+            <el-button
+              type="primary"
+              :size="size"
+              @click="submitForm"
+              :disabled="openState == 'check'"
+              >确 定</el-button
+            >
+            <el-button :size="size" @click="cancel">取 消</el-button>
+          </div>
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="基本信息" name="first">
+              <el-divider content-position="left">基本信息</el-divider>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="销售组织" prop="orgName">
+                    <el-popover-select-v2
+                      v-model="form.orgName"
+                      title="销售组织"
+                      valueKey="name"
+                      referName="ORG_PARAM"
+                      :dataMapping="{ org: 'id', orgName: 'name' }"
+                      :source.sync="form"
+                      placeholder="请输入销售组织"
+                      :disabled="openState == 'check'"
+                    >
+                    </el-popover-select-v2>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户编码" prop="code">
+                    <el-input
+                      v-model="form.code"
+                      placeholder="编码系统自动生成"
+                      disabled
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户名称" prop="name">
+                    <el-input
+                      v-model="form.name"
+                      placeholder="请输入客户名称"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户简称" prop="abbreviation">
+                    <el-input
+                      v-model="form.abbreviation"
+                      placeholder="请输入客户简称"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="客户分类" prop="classification">
+                    <el-select
+                      clearable
+                      v-model="form.classification"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_classification"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户类型" prop="type">
+                    <el-select
+                      clearable
+                      v-model="form.type"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_type"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户类别" prop="category">
+                    <el-select
+                      clearable
+                      v-model="form.category"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_category"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户首营" prop="firstBattalion">
+                    <el-select
+                      clearable
+                      v-model="form.firstBattalion"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_yes_no"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="销售渠道" prop="channel">
+                    <el-select
+                      clearable
+                      v-model="form.channel"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_channel"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="业务类型" prop="businessType">
+                    <el-select
+                      clearable
+                      v-model="form.businessType"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_business_type"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户行业" prop="industry">
+                    <el-select
+                      clearable
+                      v-model="form.industry"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_industry"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="纳税类别" prop="taxType">
+                    <el-select
+                      clearable
+                      v-model="form.taxType"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_tax_type"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="是否潜客" prop="potential">
+                    <el-select
+                      clearable
+                      v-model="form.potential"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_yes_no"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="地区分类" prop="areaClassification">
+                    <el-input
+                      v-model="form.areaClassification"
+                      placeholder="请输入地区分类"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="证照号码" prop="licenseNumber">
+                    <el-input
+                      v-model="form.licenseNumber"
+                      placeholder="请输入证照号码"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <!-- <el-divider content-position="left">销售区域</el-divider>
               <el-row :gutter="20">
                 <el-col :span="6">
                   <el-form-item label="销售区域" prop="marketingAreaName">
@@ -273,25 +328,34 @@
                   </el-form-item>
                 </el-col>
               </el-row> -->
-                <el-divider content-position="left">负责人</el-divider>
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="负责人" prop="responsiblePersonName">
-                      <el-popover-select-v2 v-model="form.responsiblePersonName" title="负责人" valueKey="name"
-                        referName="CONTACTS_PARAM"
-                        :dataMapping="{ responsiblePerson: 'id', responsiblePersonName: 'name'}" :source.sync="form"
-                        placeholder="请输入负责人" :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                  <!-- <el-col :span="6">
+              <el-divider content-position="left">负责人</el-divider>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="负责人" prop="responsiblePersonName">
+                    <el-popover-select-v2
+                      v-model="form.responsiblePersonName"
+                      title="负责人"
+                      valueKey="name"
+                      referName="CONTACTS_PARAM"
+                      :dataMapping="{
+                        responsiblePerson: 'id',
+                        responsiblePersonName: 'name',
+                      }"
+                      :source.sync="form"
+                      placeholder="请输入负责人"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+                <!-- <el-col :span="6">
                   <el-form-item label="负责部门" prop="responsibleDeptName">
                     <el-popover-select-v2 v-model="form.responsibleDeptName" title="负责部门" valueKey="name"
                       referName="DEPT_PARAM" :dataMapping="{ responsibleDept: 'id', responsibleDeptName: 'name'}"
                       :source.sync="form" placeholder="请输入负责部门" :disabled="openState == 'check'" />
                   </el-form-item>
                 </el-col> -->
-                </el-row>
-                <!-- <el-divider content-position="left">开票客户</el-divider>
+              </el-row>
+              <!-- <el-divider content-position="left">开票客户</el-divider>
               <el-row :gutter="20">
                 <el-col :span="6">
                   <el-form-item label="开票客户" prop="billingCustomerName">
@@ -301,832 +365,951 @@
                   </el-form-item>
                 </el-col>
               </el-row> -->
-                <el-divider content-position="left">其他信息</el-divider>
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="创建人" prop="createBy">
-                      <el-input v-model="form.createByName" :disabled="true" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="创建时间" prop="createTime">
-                      <el-input v-model="form.createTime" :disabled="true" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="修改人" prop="updateBy">
-                      <el-input v-model="form.updateByName" :disabled="true" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="修改时间" prop="updateTime">
-                      <el-input v-model="form.updateTime" :disabled="true" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
-              <el-tab-pane label="资质信息" name="second">
-                <el-divider content-position="left">资质信息</el-divider>
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="企业类型" prop="enterpriseType">
-                      <el-select clearable v-model="form.enterpriseType" :disabled="openState == 'check'">
-                        <el-option v-for="dict in dict.type.mk_cm_enterprise_type" :key="dict.value" :label="dict.label"
-                          :value="dict.value" />
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="企业名称" prop="enterpriseName">
-                      <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                  <!-- <el-col :span="6">
+              <el-divider content-position="left">其他信息</el-divider>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="创建人" prop="createBy">
+                    <el-input v-model="form.createByName" :disabled="true" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="创建时间" prop="createTime">
+                    <el-input v-model="form.createTime" :disabled="true" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="修改人" prop="updateBy">
+                    <el-input v-model="form.updateByName" :disabled="true" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="修改时间" prop="updateTime">
+                    <el-input v-model="form.updateTime" :disabled="true" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="资质信息" name="second">
+              <el-divider content-position="left">资质信息</el-divider>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="企业类型" prop="enterpriseType">
+                    <el-select
+                      clearable
+                      v-model="form.enterpriseType"
+                      :disabled="openState == 'check'"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.mk_cm_enterprise_type"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="企业名称" prop="enterpriseName">
+                    <el-input
+                      v-model="form.enterpriseName"
+                      placeholder="请输入企业名称"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+                <!-- <el-col :span="6">
                   <el-form-item label="注册地区" prop="registrationArea">
                     <el-input v-model="form.registrationArea" placeholder="请输入注册地区" :disabled="openState == 'check'" />
                   </el-form-item>
                 </el-col> -->
-                  <el-col :span="6">
-                    <el-form-item label="经度" prop="longitude">
-                      <el-input v-model="form.longitude" placeholder="请输入经度" :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="纬度" prop="latitude">
-                      <el-input v-model="form.latitude" placeholder="请输入纬度" :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="详细地址" prop="detailedAddress">
-                      <el-input v-model="form.detailedAddress" placeholder="请输入详细地址" :disabled="openState == 'check'" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-              </el-tab-pane>
+                <el-col :span="6">
+                  <el-form-item label="经度" prop="longitude">
+                    <el-input
+                      v-model="form.longitude"
+                      placeholder="请输入经度"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="纬度" prop="latitude">
+                    <el-input
+                      v-model="form.latitude"
+                      placeholder="请输入纬度"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="详细地址" prop="detailedAddress">
+                    <el-input
+                      v-model="form.detailedAddress"
+                      placeholder="请输入详细地址"
+                      :disabled="openState == 'check'"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
 
-              <el-tab-pane label="联系人信息" name="third" v-if="openState == 'check'">
-                <el-row :gutter="10" class="mb8">
-                  <el-col :span="6" :offset="21">
-                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMkCmCustomersContact">添加
+            <el-tab-pane
+              label="联系人信息"
+              name="third"
+              v-if="openState == 'check'"
+            >
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="6" :offset="21">
+                  <el-button
+                    type="primary"
+                    :size="size"
+                    @click="handleAddMkCmCustomersContact"
+                    >添加
+                  </el-button>
+                  <el-button
+                    type="danger"
+                    :size="size"
+                    @click="handleDeleteTab('0')"
+                  >
+                    删除
+                  </el-button>
+                </el-col>
+              </el-row>
+
+              <el-super-ux-table
+                v-model="mkCmCustomersContactList"
+                :size="size"
+                :dict="dict"
+                :columns="ContactColumns"
+                :height="height"
+                index
+                checkbox
+                highlight-current-row
+                ref="mkCmCustomersContact"
+                :row-class-name="rowMkCmCustomersContactIndex"
+                @selection-change="handleMkCmCustomersContactSelectionChange"
+                style="margin: 16px 0 0"
+              >
+                <ux-table-column
+                  fixed="right"
+                  title="操作"
+                  align="center"
+                  width="120"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      icon="el-icon-search"
+                      @click="handleCheckAdd(scope.row, '0')"
+                    >
+                      查看
+                    </el-button>
+                    <el-button
+                      :size="size"
+                      type="text"
+                      icon="el-icon-edit"
+                      @click="handleUpdateAdd(scope.row, '0')"
+                      >修改
                     </el-button>
-                    <el-button type="danger" icon="el-icon-delete" size="mini"
-                      @click="handleDeleteTab('0')">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      icon="el-icon-delete"
+                      @click="handleDeleteAdd(scope.row, '0')"
+                    >
                       删除
                     </el-button>
-                  </el-col>
-                </el-row>
-                <el-table :data="mkCmCustomersContactList" :row-class-name="rowMkCmCustomersContactIndex"
-                  @selection-change="handleMkCmCustomersContactSelectionChange" ref="mkCmCustomersContact">
-                  <el-table-column type="selection" width="55" align="center" />
-                  <el-table-column type="index" label="序号" min-width="50" align="center" />
-                  <el-table-column width="300" label="编号" align="center" prop="code" />
-                  <el-table-column label="姓名" align="center" prop="name" min-width="150" />
-                  <el-table-column label="性别" align="center" prop="gander" >
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.gander"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="联系电话" align="center" prop="telephone" min-width="150" />
-                  <el-table-column label="所属客户" align="center" prop="customerName" min-width="150" />
-                  <el-table-column width="200" show-overflow-tooltip label="部门名称" align="center" prop="departmentName" />
-                  <el-table-column label="职务" align="center" prop="position" >
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_bo_position" :value="scope.row.position"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="决策力" align="center" prop="power" >
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_bo_power" :value="scope.row.power"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column width="200" show-overflow-tooltip label="兴趣爱好" align="center" prop="hobby" />
-                  <el-table-column width="200" show-overflow-tooltip label="家庭地址" align="center" prop="address" />
-                  <el-table-column label="状态" align="center" prop="state" >
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_bo_contact_state" :value="scope.row.state"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
-                    fixed="right">
-                    <template slot-scope="scope">
-                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '0')">
-                        查看
-                      </el-button>
-                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '0')">修改
-                      </el-button>
-                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '0')">
-                        删除
-                      </el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
+                  </template>
+                </ux-table-column>
+              </el-super-ux-table>
+            </el-tab-pane>
 
-              <el-tab-pane label="负责人信息" name="fourth" v-if="openState == 'check'">
-                <el-row :gutter="10" class="mb8">
-                  <el-col :span="6" :offset="21">
-                    <el-button type="primary" icon="el-icon-plus" size="mini"
-                      @click="handleAddMkCmCustomersResponsiblePerson">添加
+            <el-tab-pane
+              label="负责人信息"
+              name="fourth"
+              v-if="openState == 'check'"
+            >
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="6" :offset="21">
+                  <el-button
+                    type="primary"
+                    :size="size"
+                    @click="handleAddMkCmCustomersResponsiblePerson"
+                    >添加
+                  </el-button>
+                  <el-button
+                    type="danger"
+                    :size="size"
+                    @click="handleDeleteTab('1')"
+                  >
+                    删除
+                  </el-button>
+                </el-col>
+              </el-row>
+              <el-super-ux-table
+                v-model="mkCmCustomersResponsiblePersonList"
+                :size="size"
+                :dict="dict"
+                :columns="PrincipalColumns"
+                :height="height"
+                index
+                checkbox
+                highlight-current-row
+                ref="mkCmCustomersResponsiblePerson"
+                :row-class-name="rowMkCmCustomersResponsiblePersonIndex"
+                @selection-change="
+                  handleMkCmCustomersResponsiblePersonSelectionChange
+                "
+                style="margin: 16px 0 0"
+              >
+                <ux-table-column
+                  fixed="right"
+                  title="操作"
+                  align="center"
+                  width="120"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleCheckAdd(scope.row, '1')"
+                    >
+                      查看
                     </el-button>
-                    <el-button type="danger" icon="el-icon-delete" size="mini"
-                      @click="handleDeleteTab('1')">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleUpdateAdd(scope.row, '1')"
+                      >修改
+                    </el-button>
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleDeleteAdd(scope.row, '1')"
+                    >
                       删除
                     </el-button>
-                  </el-col>
-                </el-row>
-                <el-table :data="mkCmCustomersResponsiblePersonList"
-                  :row-class-name="rowMkCmCustomersResponsiblePersonIndex"
-                  @selection-change="handleMkCmCustomersResponsiblePersonSelectionChange"
-                  ref="mkCmCustomersResponsiblePerson">
-                  <el-table-column type="selection" width="55" align="center" />
-                  <el-table-column type="index" label="序号" min-width="50" align="center" />
-                  <el-table-column label="人员姓名" align="center" prop="personName" min-width="150" />
-                  <el-table-column label="客户名称" align="center" prop="customersName" min-width="150" />
-                  <el-table-column label="关系类型" align="center" prop="relationshipType" min-width="150"
-                    show-overflow-tooltip>
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_cm_relationship_type" :value="scope.row.relationshipType"
-                        show-overflow-tooltip />
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="产线" align="center" prop="productionLine" min-width="150">
-                    <template slot-scope="scope">
-                      <dict-tag :options="dict.type.mk_cm_production_line" :value="scope.row.productionLine"
-                        show-overflow-tooltip />
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="开始日期" align="center" prop="startDate" min-width="150" />
-                  <el-table-column label="结束日期" align="center" prop="endDate" min-width="150" />
-                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
-                    fixed="right">
-                    <template slot-scope="scope">
-                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '1')">
-                        查看
-                      </el-button>
-                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '1')">修改
-                      </el-button>
-                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '1')">
-                        删除
-                      </el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
+                  </template>
+                </ux-table-column>
+              </el-super-ux-table>
+            </el-tab-pane>
+
+            <el-tab-pane
+              label="科室信息"
+              name="fifth"
+              v-if="openState == 'check'"
+            >
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="6" :offset="21">
+                  <el-button
+                    type="primary"
+                    :size="size"
+                    @click="handleAddMkCmCustomersDepartment"
+                  >
+                    添加
+                  </el-button>
+                  <el-button
+                    :size="size"
+                    type="danger"
+                    @click="handleDeleteTab('2')"
+                  >
+                    删除
+                  </el-button>
+                </el-col>
+              </el-row>
 
-              <el-tab-pane label="科室信息" name="fifth" v-if="openState == 'check'">
-                <el-row :gutter="10" class="mb8">
-                  <el-col :span="6" :offset="21">
-                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMkCmCustomersDepartment">
-                      添加
+              <el-super-ux-table
+                v-model="mkCmCustomersDepartmentList"
+                :size="size"
+                :dict="dict"
+                :height="height"
+                :columns="DepartmentInfoColumns"
+                index
+                checkbox
+                highlight-current-row
+                ref="mkCmCustomersDepartment"
+                :row-class-name="rowMkCmCustomersDepartmentIndex"
+                @selection-change="handleMkCmCustomersDepartmentSelectionChange"
+                style="margin: 16px 0 0"
+              >
+                <ux-table-column
+                  fixed="right"
+                  title="操作"
+                  align="center"
+                  width="120"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleCheckAdd(scope.row, '1')"
+                    >
+                      查看
                     </el-button>
-                    <el-button type="danger" icon="el-icon-delete" size="mini"
-                      @click="handleDeleteTab('2')">
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleUpdateAdd(scope.row, '1')"
+                      >修改
+                    </el-button>
+                    <el-button
+                      :size="size"
+                      type="text"
+                      @click="handleDeleteAdd(scope.row, '1')"
+                    >
                       删除
                     </el-button>
-                  </el-col>
-                </el-row>
-                <el-table :data="mkCmCustomersDepartmentList" :row-class-name="rowMkCmCustomersDepartmentIndex"
-                  @selection-change="handleMkCmCustomersDepartmentSelectionChange" ref="mkCmCustomersDepartment">
-                  <el-table-column type="selection" width="55" align="center" />
-                  <el-table-column type="index" label="序号" min-width="50" align="center" />
-                  <el-table-column label="科室" align="center" prop="name" min-width="150" />
-                  <el-table-column label="客户名称" align="center" prop="customersName" min-width="150" />
-                  <el-table-column label="负责人姓名" align="center" prop="responsiblePersonName" min-width="150" />
-                  <el-table-column label="联系人手机" align="center" prop="phone" min-width="150" />
-                  <el-table-column label="科室位置" align="center" prop="address" min-width="150" />
-                  <el-table-column label="常规治疗" align="center" prop="conventionalTherapy" min-width="150" />
-                  <el-table-column label="科室特色" align="center" prop="characteristic" min-width="150" />
-                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"
-                    fixed="right">
-                    <template slot-scope="scope">
-                      <el-button size="mini" type="text" icon="el-icon-search" @click="handleCheckAdd(scope.row, '2')">
-                        查看
-                      </el-button>
-                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateAdd(scope.row, '2')">修改
-                      </el-button>
-                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteAdd(scope.row, '2')">
-                        删除
-                      </el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-            </el-tabs>
-
-            <div slot="footer" style="margin-left: 88%; margin-top: 1%">
-              <el-button type="primary" @click="submitForm" :disabled="openState == 'check'">确 定</el-button>
-              <el-button @click="cancel">取 消</el-button>
-            </div>
-          </div>
+                  </template>
+                </ux-table-column>
+              </el-super-ux-table>
+            </el-tab-pane>
+          </el-tabs>
         </el-form>
       </div>
     </div>
-    <AddContact v-model="isAdd0" v-if="isAdd0" :operatingState="operatingSta" :state="state" :row="rowDetail" :customersId="form.id"
-      :customersName="form.name" :customersCode="form.code" />
 
-    <AddPerson v-model="isAdd1" v-if="isAdd1" :pageStu="page" :disable="disable" :row="rowDetail" :customersId="form.id"
-      :customersName="form.name" />
+    <AddContact
+      v-model="isAdd0"
+      v-if="isAdd0"
+      :operatingState="operatingSta"
+      :state="state"
+      :row="rowDetail"
+      :customersId="form.id"
+      :customersName="form.name"
+      :customersCode="form.code"
+    />
+
+    <AddPerson
+      v-model="isAdd1"
+      v-if="isAdd1"
+      :pageStu="pageStu"
+      :disable="disable"
+      :row="rowDetail"
+      :customersId="form.id"
+      :customersName="form.name"
+    />
 
-    <AddDepartment v-model="isAdd2" v-if="isAdd2" :pageStu="page" :disable="disable" :row="rowDetail"
-      :customersId="form.id" :customersName="form.name" />
+    <AddDepartment
+      v-model="isAdd2"
+      v-if="isAdd2"
+      :pageStu="pageStu"
+      :disable="disable"
+      :row="rowDetail"
+      :customersId="form.id"
+      :customersName="form.name"
+    />
   </div>
 </template>
 
 <script>
-  // 客户接口
-  import {
-    listCustomers,
-    getCustomers,
-    delCustomers,
-    addCustomers,
-    updateCustomers,
-    getContactInfo,
-    delContact,
-  } from "@/api/business/spd/cm/customers";
-  // 客户负责人接口
-  import {
-    delCustomersResponsiblePerson,
-  } from "@/api/business/spd/cm/customersResponsiblePerson";
-  // 客户科室接口
-  import {
-    delCustomersDepartment,
-  } from "@/api/business/spd/cm/customersDepartment";
-  import CollapseTransition from '@/components/MyCollapse/collapse.vue';
-  // 参照弹出框
-  import ElPopoverSelectV2 from "@/components/popover-select-v2";
-  // 新建客户联系人信息页面
-  import AddContact from "@/views/business/spd/cm/customersContact/index.vue";
-  // 新建客户负责人信息页面
-  import AddPerson from "@/views/business/spd/cm/customersResponsiblePerson/index.vue";
-  // 新建客户科室信息页面
-  import AddDepartment from "@/views/business/spd/cm/customersDepartment/index.vue";
-
-  export default {
-    name: "Customers",
-    components: {
-      CollapseTransition,
-      ElPopoverSelectV2,
-      AddContact,
-      AddPerson,
-      AddDepartment,
-    },
-    dicts: ['mk_cm_yes_no', 'mk_cm_classification', 'mk_cm_type', 'mk_cm_category', 'mk_cm_channel',
-      'mk_cm_business_type', 'mk_cm_industry', 'mk_cm_tax_type', 'mk_cm_enterprise_type', 'mk_cm_relationship_type',
-      'mk_cm_production_line', 'mk_bo_section', 'sys_user_sex', 'mk_bo_position', 'mk_bo_power', 'mk_bo_contact_state'
-    ],
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 选中数组中的客户编码
-        codes: [],
-        // 子表选中数据
-        checkedMkCmCustomersContact: [],
-        checkedMkCmCustomersResponsiblePerson: [],
-        checkedMkCmCustomersDepartment: [],
-        // 子表选中主键
-        checkedMkCmCustomersContactIds: [],
-        checkedMkCmCustomersResponsiblePersonIds: [],
-        checkedMkCmCustomersDepartmentIds: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 客户表格数据
-        customersList: [],
-        // 客户联系人表格数据
-        mkCmCustomersContactList: [],
-        // 客户负责人表格数据
-        mkCmCustomersResponsiblePersonList: [],
-        // 客户科室表格数据
-        mkCmCustomersDepartmentList: [],
-        // 首次进入标签页的显示
-        activeName: 'first',
-        // 下拉收起配置
-        expanded: false,
-        // 页面打开状态
-        openState: null,
-        // 列表页面
-        isList: true,
-        // 添加页面
-        isAdd0: false,
-        operatingSta: null,
-        state: null,
-        isAdd1: false,
-        isAdd2: false,
-        rowDetail: {},
-        disable: false,
-        // 页面状态
-        page: null,
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          org: null,
-          orgName: null,
-          code: null,
-          name: null,
-          abbreviation: null,
-          classification: null,
-          type: null,
-          category: null,
-          firstBattalion: null,
-          channel: null,
-          businessType: null,
-          industry: null,
-          taxType: null,
-          potential: null,
-          areaClassification: null,
-          licenseNumber: null,
-          marketingArea: null,
-          marketingAreaName: null,
-          responsiblePerson: null,
-          responsiblePersonName: null,
-          responsibleDept: null,
-          responsibleDeptName: null,
-          billingCustomer: null,
-          billingCustomerName: null,
-          enterpriseType: null,
-          enterpriseName: null,
-          registrationArea: null,
-          longitude: null,
-          latitude: null,
-          detailedAddress: null,
-        },
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {
-          orgName: [{
+// 客户接口
+import {
+  listCustomers,
+  getCustomers,
+  delCustomers,
+  addCustomers,
+  updateCustomers,
+  getContactInfo,
+  delContact,
+} from "@/api/business/spd/cm/customers";
+// 客户负责人接口
+import { delCustomersResponsiblePerson } from "@/api/business/spd/cm/customersResponsiblePerson";
+// 客户科室接口
+import { delCustomersDepartment } from "@/api/business/spd/cm/customersDepartment";
+import useColumns from "./columns";
+import { dicts } from "../dicts";
+export default {
+  name: "Customers",
+  components: {
+    CollapseTransition: () => import("@/components/MyCollapse/collapse.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2"),
+    // 新建客户联系人信息页面
+    AddContact: () =>
+      import("@/views/business/spd/cm/customersContact/index.vue"),
+    // 新建客户负责人信息页面
+    AddPerson: () =>
+      import("@/views/business/spd/cm/customersResponsiblePerson/index.vue"),
+    // 新建客户科室信息页面
+    AddDepartment: () =>
+      import("@/views/business/spd/cm/customersDepartment/index.vue"),
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+  },
+  dicts: [...dicts],
+  data() {
+    const {
+      SearchColumns,
+      TableColumns,
+      ContactColumns,
+      PrincipalColumns,
+      DepartmentInfoColumns,
+    } = useColumns();
+    const params = this.$init.params(SearchColumns);
+    const page = this.$init.page();
+    return {
+      page,
+      params,
+      size: "mini",
+      SearchColumns,
+      TableColumns,
+      ContactColumns,
+      PrincipalColumns,
+      DepartmentInfoColumns,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 选中数组中的客户编码
+      codes: [],
+      // 子表选中数据
+      checkedMkCmCustomersContact: [],
+      checkedMkCmCustomersResponsiblePerson: [],
+      checkedMkCmCustomersDepartment: [],
+      // 子表选中主键
+      checkedMkCmCustomersContactIds: [],
+      checkedMkCmCustomersResponsiblePersonIds: [],
+      checkedMkCmCustomersDepartmentIds: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      // showSearch: true,
+      // 总条数
+      total: 0,
+      // 客户表格数据
+      customersList: [],
+      // 客户联系人表格数据
+      mkCmCustomersContactList: [],
+      // 客户负责人表格数据
+      mkCmCustomersResponsiblePersonList: [],
+      // 客户科室表格数据
+      mkCmCustomersDepartmentList: [],
+      // 首次进入标签页的显示
+      activeName: "first",
+      // 下拉收起配置
+      expanded: false,
+      // 页面打开状态
+      openState: null,
+      // 列表页面
+      isList: true,
+      // 添加页面
+      isAdd0: false,
+      operatingSta: null,
+      state: null,
+      isAdd1: false,
+      isAdd2: false,
+      rowDetail: {},
+      disable: false,
+      // 页面状态
+      pageStu: null,
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        orgName: [
+          {
             required: true,
-            message: '销售组织不能为空',
-            trigger: 'blur'
-          }],
-          name: [{
+            message: "销售组织不能为空",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
             required: true,
-            message: '客户名称不能为空',
-            trigger: 'blur'
-          }],
-          classification: [{
+            message: "客户名称不能为空",
+            trigger: "blur",
+          },
+        ],
+        classification: [
+          {
             required: true,
-            message: '客户分类不能为空',
-            trigger: 'blur'
-          }],
-          taxType: [{
+            message: "客户分类不能为空",
+            trigger: "blur",
+          },
+        ],
+        taxType: [
+          {
             required: true,
-            message: '纳税类别不能为空',
-            trigger: 'blur'
-          }],
-          licenseNumber: [{
+            message: "纳税类别不能为空",
+            trigger: "blur",
+          },
+        ],
+        licenseNumber: [
+          {
             required: true,
-            message: '证照号码不能为空',
-            trigger: 'blur'
-          }],
-          enterpriseType: [{
+            message: "证照号码不能为空",
+            trigger: "blur",
+          },
+        ],
+        enterpriseType: [
+          {
             required: true,
-            message: '企业类型不能为空',
-            trigger: 'blur'
-          }],
-          enterpriseName: [{
+            message: "企业类型不能为空",
+            trigger: "blur",
+          },
+        ],
+        enterpriseName: [
+          {
             required: true,
-            message: '企业名称不能为空',
-            trigger: 'blur'
-          }],
-        },
+            message: "企业名称不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    height: {
+      get() {
+        return window.innerHeight - 220;
+      },
+      set() {},
+    },
+  },
+  created() {
+    this.reset();
+    this.getList(this.params, this.page);
+  },
+  methods: {
+    /** 查询客户列表 */
+    getList(params, page) {
+      this.loading = true;
+      listCustomers({ ...params, ...page }).then((response) => {
+        this.customersList = response.rows;
+        this.page.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.isList = true;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        org: null,
+        orgName: null,
+        code: null,
+        name: null,
+        abbreviation: null,
+        classification: null,
+        type: null,
+        category: null,
+        firstBattalion: null,
+        channel: null,
+        businessType: null,
+        industry: null,
+        taxType: null,
+        potential: null,
+        areaClassification: null,
+        licenseNumber: null,
+        marketingArea: null,
+        marketingAreaName: null,
+        responsiblePerson: null,
+        responsiblePersonName: null,
+        responsibleDept: null,
+        responsibleDeptName: null,
+        billingCustomer: null,
+        billingCustomerName: null,
+        enterpriseType: null,
+        enterpriseName: null,
+        registrationArea: null,
+        longitude: null,
+        latitude: null,
+        detailedAddress: null,
+        createBy: null,
+        createTime: null,
+        createByName: null,
+        updateBy: null,
+        updateTime: null,
+        updateByName: null,
+        delFlag: null,
       };
+      this.activeName = "first";
+      this.mkCmCustomersContactList = [];
+      this.mkCmCustomersResponsiblePersonList = [];
+      this.mkCmCustomersDepartmentList = [];
+      this.resetForm("form");
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.params = this.$init.params(this.SearchColumns);
+      this.page = this.$init.page();
+      this.getList(this.params, this.page);
+      this.resetForm("queryForm");
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.codes = selection.map((item) => item.code);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.isList = false;
+      this.openState = "add";
+    },
+    /** 查看按钮操作 */
+    handleCheck(id) {
+      this.isList = false;
+      const id1 = id || this.ids;
+      getCustomers(id1).then((response) => {
+        this.form = response.data;
+        this.mkCmCustomersResponsiblePersonList =
+          response.data.mkCmCustomersResponsiblePersonList;
+        this.mkCmCustomersDepartmentList =
+          response.data.mkCmCustomersDepartmentList;
+        this.openState = "check";
+      });
+      getContactInfo(id1).then((response) => {
+        this.mkCmCustomersContactList = response.data;
+      });
+    },
+    /** Add查看按钮操作 */
+    handleCheckAdd(row, type) {
+      if (type == "0") {
+        this.isAdd0 = true;
+        this.operatingSta = "Browse";
+        this.rowDetail = row;
+        this.disable = true;
+      } else if (type == "1") {
+        this.isAdd1 = true;
+        this.pageStu = "check";
+        this.rowDetail = row;
+        this.disable = true;
+      } else if (type == "2") {
+        this.isAdd2 = true;
+        this.pageStu = "check";
+        this.rowDetail = row;
+        this.disable = true;
+      }
     },
-    created() {
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.isList = false;
       this.reset();
-      this.getList();
+      const id = row.id || this.ids;
+      getCustomers(id).then((response) => {
+        this.form = response.data;
+        this.form.oldName = response.data.name;
+        this.mkCmCustomersResponsiblePersonList =
+          response.data.mkCmCustomersResponsiblePersonList;
+        this.mkCmCustomersDepartmentList =
+          response.data.mkCmCustomersDepartmentList;
+        this.openState = "update";
+      });
     },
-    methods: {
-      /** 查询客户列表 */
-      getList() {
-        this.loading = true;
-        listCustomers(this.queryParams).then(response => {
-          this.customersList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        });
-      },
-      // 取消按钮
-      cancel() {
-        this.isList = true;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.form = {
-          id: null,
-          org: null,
-          orgName: null,
-          code: null,
-          name: null,
-          abbreviation: null,
-          classification: null,
-          type: null,
-          category: null,
-          firstBattalion: null,
-          channel: null,
-          businessType: null,
-          industry: null,
-          taxType: null,
-          potential: null,
-          areaClassification: null,
-          licenseNumber: null,
-          marketingArea: null,
-          marketingAreaName: null,
-          responsiblePerson: null,
-          responsiblePersonName: null,
-          responsibleDept: null,
-          responsibleDeptName: null,
-          billingCustomer: null,
-          billingCustomerName: null,
-          enterpriseType: null,
-          enterpriseName: null,
-          registrationArea: null,
-          longitude: null,
-          latitude: null,
-          detailedAddress: null,
-          createBy: null,
-          createTime: null,
-          createByName: null,
-          updateBy: null,
-          updateTime: null,
-          updateByName: null,
-          delFlag: null
-        };
-        this.activeName = 'first';
-        this.mkCmCustomersContactList = [];
-        this.mkCmCustomersResponsiblePersonList = [];
-        this.mkCmCustomersDepartmentList = [];
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.resetQueryParams();
-        this.handleQuery();
-      },
-      /** 查询参数重置 */
-      resetQueryParams() {
-        this.queryParams = {
-          abbreviation: null,
-          areaClassification: null,
-          billingCustomer: null,
-          billingCustomerName: null,
-          businessType: null,
-          category: null,
-          channel: null,
-          classification: null,
-          code: null,
-          detailedAddress: null,
-          enterpriseName: null,
-          enterpriseType: null,
-          firstBattalion: null,
-          industry: null,
-          latitude: null,
-          licenseNumber: null,
-          longitude: null,
-          marketingArea: null,
-          marketingAreaName: null,
-          name: null,
-          org: null,
-          orgName: null,
-          pageNum: 1,
-          pageSize: 10,
-          potential: null,
-          registrationArea: null,
-          responsibleDept: null,
-          responsibleDeptName: null,
-          responsiblePerson: null,
-          responsiblePersonName: null,
-          taxType: null,
-          type: null
-        };
-        this.resetForm("queryForm");
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map(item => item.id)
-        this.codes = selection.map(item => item.code)
-        this.single = selection.length !== 1
-        this.multiple = !selection.length
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.isList = false;
-        this.openState = 'add';
-      },
-      /** 查看按钮操作 */
-      handleCheck(id) {
-        this.isList = false;
-        const id1 = id || this.ids
-        getCustomers(id1).then(response => {
-          this.form = response.data;
-          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
-          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
-          this.openState = 'check';
-        });
-        getContactInfo(id1).then(response => {
-          this.mkCmCustomersContactList = response.data;
-        });
-      },
-      /** Add查看按钮操作 */
-      handleCheckAdd(row, type) {
-        if (type == '0') {
-          this.isAdd0 = true;
-          this.operatingSta = 'Browse';
-          this.rowDetail = row;
-          this.disable = true;
-        } else if (type == '1') {
-          this.isAdd1 = true;
-          this.page = 'check';
-          this.rowDetail = row;
-          this.disable = true;
-        } else if (type == '2') {
-          this.isAdd2 = true;
-          this.page = 'check';
-          this.rowDetail = row;
-          this.disable = true;
-        }
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.isList = false;
-        this.reset();
-        const id = row.id || this.ids
-        getCustomers(id).then(response => {
-          this.form = response.data;
-          this.form.oldName = response.data.name;
-          this.mkCmCustomersResponsiblePersonList = response.data.mkCmCustomersResponsiblePersonList;
-          this.mkCmCustomersDepartmentList = response.data.mkCmCustomersDepartmentList;
-          this.openState = 'update';
-        });
-      },
-      /** Add修改按钮操作 */
-      handleUpdateAdd(row, type) {
-        if (type == '0') {
-          this.isAdd0 = true;
-          this.operatingSta = 'Update';
-          this.rowDetail = row;
-          this.disable = false;
-        } else if (type == '1') {
-          this.isAdd1 = true;
-          this.page = 'update';
-          this.rowDetail = row;
-          this.disable = false;
-        } else if (type == '2') {
-          this.isAdd2 = true;
-          this.page = 'update';
-          this.rowDetail = row;
-          this.disable = false;
-        }
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id != null) {
-              updateCustomers(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.reset();
-                this.getList();
-                this.isList = true;
-              });
-            } else {
-              addCustomers(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.reset();
-                this.getList();
-                this.isList = true;
-              });
+    /** Add修改按钮操作 */
+    handleUpdateAdd(row, type) {
+      if (type == "0") {
+        this.isAdd0 = true;
+        this.operatingSta = "Update";
+        this.rowDetail = row;
+        this.disable = false;
+      } else if (type == "1") {
+        this.isAdd1 = true;
+        this.pageStu = "update";
+        this.rowDetail = row;
+        this.disable = false;
+      } else if (type == "2") {
+        this.isAdd2 = true;
+        this.pageStu = "update";
+        this.rowDetail = row;
+        this.disable = false;
+      }
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(async (valid, obj) => {
+        if (valid) {
+          try {
+            let { code, msg } =
+              this.form.id != null
+                ? await updateCustomers(this.form)
+                : await addCustomers(this.form);
+
+            if (code == 200) {
+              this.$notify.success(msg);
+              this.reset();
+              this.getList(this.params, this.page);
+              this.isList = true;
             }
-          } else {
-            this.checkout();
-          }
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const codes = row.code || this.codes;
-        let ids = [];
-        if (row.isTrusted != null && row.isTrusted != '' && row.isTrusted != undefined) {
-          ids = this.ids;
+          } catch (error) {}
         } else {
-          ids[0] = row.id;
+          this.checkout();
         }
-        this.$modal.confirm('是否确认删除客户编码为"' + codes + '"的数据项？').then(function () {
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const codes = row.code || this.codes;
+      let ids = [];
+      if (
+        row.isTrusted != null &&
+        row.isTrusted != "" &&
+        row.isTrusted != undefined
+      ) {
+        ids = this.ids;
+      } else {
+        ids[0] = row.id;
+      }
+      this.$modal
+        .confirm('是否确认删除客户编码为"' + codes + '"的数据项？')
+        .then(function () {
           return delCustomers(ids);
-        }).then(() => {
-          this.getList();
+        })
+        .then(() => {
+          this.getList(this.params, this.page);
           this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-      },
-      /** Add删除按钮操作 */
-      handleDeleteAdd(row, type) {
-        let ids = [];
-        ids[0] = row.id;
-        if (type == '0') {
-          console.log(row, 'row')
-          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+        })
+        .catch(() => {});
+    },
+    /** Add删除按钮操作 */
+    handleDeleteAdd(row, type) {
+      let ids = [];
+      ids[0] = row.id;
+      if (type == "0") {
+        console.log(row, "row");
+        this.$modal
+          .confirm('是否确认删除序号为"' + row.index + '"的数据项？')
+          .then(function () {
             return delContact(ids);
-          }).then(() => {
-            getContactInfo(this.form.id).then(res => {
+          })
+          .then(() => {
+            getContactInfo(this.form.id).then((res) => {
               this.mkCmCustomersContactList = res.data;
-            })
+            });
             this.$modal.msgSuccess("删除成功");
-          }).catch(() => {});
-        } else if (type == '1') {
-          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+          })
+          .catch(() => {});
+      } else if (type == "1") {
+        this.$modal
+          .confirm('是否确认删除序号为"' + row.index + '"的数据项？')
+          .then(function () {
             return delCustomersResponsiblePerson(ids);
-          }).then(() => {
-            getCustomers(row.customersId).then(res => {
-              this.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
-            })
+          })
+          .then(() => {
+            getCustomers(row.customersId).then((res) => {
+              this.mkCmCustomersResponsiblePersonList =
+                res.data.mkCmCustomersResponsiblePersonList;
+            });
             this.$modal.msgSuccess("删除成功");
-          }).catch(() => {});
-        } else if (type == '2') {
-          this.$modal.confirm('是否确认删除序号为"' + row.index + '"的数据项？').then(function () {
+          })
+          .catch(() => {});
+      } else if (type == "2") {
+        this.$modal
+          .confirm('是否确认删除序号为"' + row.index + '"的数据项？')
+          .then(function () {
             return delCustomersDepartment(ids);
-          }).then(() => {
-            getCustomers(row.customersId).then(res => {
-              this.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
-            })
+          })
+          .then(() => {
+            getCustomers(row.customersId).then((res) => {
+              this.mkCmCustomersDepartmentList =
+                res.data.mkCmCustomersDepartmentList;
+            });
             this.$modal.msgSuccess("删除成功");
-          }).catch(() => {});
-        }
-      },
-      /** 客户联系人序号 */
-      rowMkCmCustomersContactIndex({
-        row,
-        rowIndex
-      }) {
-        row.index = rowIndex + 1;
-      },
-      /** 客户负责人序号 */
-      rowMkCmCustomersResponsiblePersonIndex({
-        row,
-        rowIndex
-      }) {
-        row.index = rowIndex + 1;
-      },
-      /** 客户科室序号 */
-      rowMkCmCustomersDepartmentIndex({
-        row,
-        rowIndex
-      }) {
-        row.index = rowIndex + 1;
-      },
-      /** 客户联系人添加按钮操作 */
-      handleAddMkCmCustomersContact() {
-        this.isList = false;
-        this.isAdd0 = true;
-        this.operatingSta = 'Insert';
-        this.disable = false;
-        this.state = '1';
-      },
-      /** 客户负责人添加按钮操作 */
-      handleAddMkCmCustomersResponsiblePerson() {
-        this.isList = false;
-        this.isAdd1 = true;
-        this.page = 'add';
-        this.disable = false;
-      },
-      /** 客户科室添加按钮操作 */
-      handleAddMkCmCustomersDepartment() {
-        this.isList = false;
-        this.isAdd2 = true;
-        this.page = 'add';
-        this.disable = false;
-      },
-      /** 客户页签删除按钮操作 */
-      handleDeleteTab(type) {
-        let that = this;
-        if (type == '0') {
-          if (that.checkedMkCmCustomersContact.length == 0) {
-            that.$modal.msgError("请先选择要删除的客户联系人数据");
-          } else {
-            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersContact + '"的数据项？').then(function () {
+          })
+          .catch(() => {});
+      }
+    },
+    /** 客户联系人序号 */
+    rowMkCmCustomersContactIndex({ row, rowIndex }) {
+      row.index = rowIndex + 1;
+    },
+    /** 客户负责人序号 */
+    rowMkCmCustomersResponsiblePersonIndex({ row, rowIndex }) {
+      row.index = rowIndex + 1;
+    },
+    /** 客户科室序号 */
+    rowMkCmCustomersDepartmentIndex({ row, rowIndex }) {
+      row.index = rowIndex + 1;
+    },
+    /** 客户联系人添加按钮操作 */
+    handleAddMkCmCustomersContact() {
+      this.isList = false;
+      this.isAdd0 = true;
+      this.operatingSta = "Insert";
+      this.disable = false;
+      this.state = "1";
+    },
+    /** 客户负责人添加按钮操作 */
+    handleAddMkCmCustomersResponsiblePerson() {
+      this.isList = false;
+      this.isAdd1 = true;
+      this.pageStu = "add";
+      this.disable = false;
+    },
+    /** 客户科室添加按钮操作 */
+    handleAddMkCmCustomersDepartment() {
+      this.isList = false;
+      this.isAdd2 = true;
+      this.pageStu = "add";
+      this.disable = false;
+    },
+    /** 客户页签删除按钮操作 */
+    handleDeleteTab(type) {
+      let that = this;
+      if (type == "0") {
+        if (that.checkedMkCmCustomersContact.length == 0) {
+          that.$modal.msgError("请先选择要删除的客户联系人数据");
+        } else {
+          that.$modal
+            .confirm(
+              '是否确认删除序号为"' +
+                that.checkedMkCmCustomersContact +
+                '"的数据项？'
+            )
+            .then(function () {
               return delContact(that.checkedMkCmCustomersContactIds);
-            }).then(() => {
-              getContactInfo(that.form.id).then(res => {
+            })
+            .then(() => {
+              getContactInfo(that.form.id).then((res) => {
                 that.mkCmCustomersContactList = res.data;
-              })
+              });
               that.$modal.msgSuccess("删除成功");
-            }).catch((e) => {
-              console.log(e, 'e');
+            })
+            .catch((e) => {
+              console.log(e, "e");
             });
-          }
-        } else if (type == '1') {
-          if (that.checkedMkCmCustomersResponsiblePerson.length == 0) {
-            that.$modal.msgError("请先选择要删除的客户负责人数据");
-          } else {
-            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersResponsiblePerson + '"的数据项？').then(function () {
-              return delCustomersResponsiblePerson(that.checkedMkCmCustomersResponsiblePersonIds);
-            }).then(() => {
-              getCustomers(that.form.id).then(res => {
-                that.mkCmCustomersResponsiblePersonList = res.data.mkCmCustomersResponsiblePersonList;
-              })
-              that.$modal.msgSuccess("删除成功");
-            }).catch(() => {});
-          }
-        } else if (type == '2') {
-          if (that.checkedMkCmCustomersDepartment.length == 0) {
-            that.$modal.msgError("请先选择要删除的客户科室数据");
-          } else {
-            that.$modal.confirm('是否确认删除序号为"' + that.checkedMkCmCustomersDepartment + '"的数据项？').then(function () {
-              return delCustomersDepartment(that.checkedMkCmCustomersDepartmentIds);
-            }).then(() => {
-              getCustomers(that.form.id).then(res => {
-                that.mkCmCustomersDepartmentList = res.data.mkCmCustomersDepartmentList;
-              })
-              that.$modal.msgSuccess("删除成功");
-            }).catch(() => {});
-          }
         }
-      },
-      /** 复选框选中数据 */
-      handleMkCmCustomersContactSelectionChange(selection) {
-        this.checkedMkCmCustomersContact = selection.map(item => item.index)
-        this.checkedMkCmCustomersContactIds = selection.map(item => item.id)
-      },
-      /** 复选框选中数据 */
-      handleMkCmCustomersResponsiblePersonSelectionChange(selection) {
-        this.checkedMkCmCustomersResponsiblePerson = selection.map(item => item.index)
-        this.checkedMkCmCustomersResponsiblePersonIds = selection.map(item => item.id)
-      },
-      /** 复选框选中数据 */
-      handleMkCmCustomersDepartmentSelectionChange(selection) {
-        this.checkedMkCmCustomersDepartment = selection.map(item => item.index)
-        this.checkedMkCmCustomersDepartmentIds = selection.map(item => item.id)
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        this.download('cm/customers/export', {
-          ...this.queryParams
-        }, `customers_${new Date().getTime()}.xlsx`)
-      },
-      /** 标签页切换 */
-      handleClick(tab, event) {
-        console.log(tab, event);
-      },
-      /** 搜索条件下拉 */
-      drop() {
-        this.expanded = !this.expanded
-      },
-      /** 弹出框关闭确认 */
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      },
-      /** 必填项校验 */
-      checkout() {
-        if (!(this.form.orgName != null && this.form.orgName != '' && this.form.orgName != undefined &&
-            this.form.name != null && this.form.name != '' && this.form.name != undefined &&
-            this.form.classification != null && this.form.classification != '' && this.form.classification !=
-            undefined &&
-            this.form.taxType != null && this.form.taxType != '' && this.form.taxType != undefined &&
-            this.form.licenseNumber != null && this.form.licenseNumber != '' && this.form.licenseNumber != undefined)) {
-          return this.$modal.msgError("基本信息中存在必填项未填！");
+      } else if (type == "1") {
+        if (that.checkedMkCmCustomersResponsiblePerson.length == 0) {
+          that.$modal.msgError("请先选择要删除的客户负责人数据");
+        } else {
+          that.$modal
+            .confirm(
+              '是否确认删除序号为"' +
+                that.checkedMkCmCustomersResponsiblePerson +
+                '"的数据项？'
+            )
+            .then(function () {
+              return delCustomersResponsiblePerson(
+                that.checkedMkCmCustomersResponsiblePersonIds
+              );
+            })
+            .then(() => {
+              getCustomers(that.form.id).then((res) => {
+                that.mkCmCustomersResponsiblePersonList =
+                  res.data.mkCmCustomersResponsiblePersonList;
+              });
+              that.$modal.msgSuccess("删除成功");
+            })
+            .catch(() => {});
         }
-        if (!(this.form.enterpriseType != null && this.form.enterpriseType != '' && this.form.enterpriseType !=
-            undefined &&
-            this.form.enterpriseName != null && this.form.enterpriseName != '' && this.form.enterpriseName != undefined
-          )) {
-          return this.$modal.msgError("资质信息中存在必填项未填！");
+      } else if (type == "2") {
+        if (that.checkedMkCmCustomersDepartment.length == 0) {
+          that.$modal.msgError("请先选择要删除的客户科室数据");
+        } else {
+          that.$modal
+            .confirm(
+              '是否确认删除序号为"' +
+                that.checkedMkCmCustomersDepartment +
+                '"的数据项？'
+            )
+            .then(function () {
+              return delCustomersDepartment(
+                that.checkedMkCmCustomersDepartmentIds
+              );
+            })
+            .then(() => {
+              getCustomers(that.form.id).then((res) => {
+                that.mkCmCustomersDepartmentList =
+                  res.data.mkCmCustomersDepartmentList;
+              });
+              that.$modal.msgSuccess("删除成功");
+            })
+            .catch(() => {});
         }
-      },
-    }
-  };
-
+      }
+    },
+    /** 复选框选中数据 */
+    handleMkCmCustomersContactSelectionChange(selection) {
+      this.checkedMkCmCustomersContact = selection.map((item) => item.index);
+      this.checkedMkCmCustomersContactIds = selection.map((item) => item.id);
+    },
+    /** 复选框选中数据 */
+    handleMkCmCustomersResponsiblePersonSelectionChange(selection) {
+      this.checkedMkCmCustomersResponsiblePerson = selection.map(
+        (item) => item.index
+      );
+      this.checkedMkCmCustomersResponsiblePersonIds = selection.map(
+        (item) => item.id
+      );
+    },
+    /** 复选框选中数据 */
+    handleMkCmCustomersDepartmentSelectionChange(selection) {
+      this.checkedMkCmCustomersDepartment = selection.map((item) => item.index);
+      this.checkedMkCmCustomersDepartmentIds = selection.map((item) => item.id);
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "cm/customers/export",
+        {
+          ...this.params,
+          ...this.page,
+        },
+        `customers_${new Date().getTime()}.xlsx`
+      );
+    },
+    /** 标签页切换 */
+    handleClick(tab, event) {
+      // console.log(tab, event);
+    },
+    /** 必填项校验 */
+    checkout() {
+      if (
+        !(
+          this.form.orgName != null &&
+          this.form.orgName != "" &&
+          this.form.orgName != undefined &&
+          this.form.name != null &&
+          this.form.name != "" &&
+          this.form.name != undefined &&
+          this.form.classification != null &&
+          this.form.classification != "" &&
+          this.form.classification != undefined &&
+          this.form.taxType != null &&
+          this.form.taxType != "" &&
+          this.form.taxType != undefined &&
+          this.form.licenseNumber != null &&
+          this.form.licenseNumber != "" &&
+          this.form.licenseNumber != undefined
+        )
+      ) {
+        return this.$modal.msgError("基本信息中存在必填项未填！");
+      }
+      if (
+        !(
+          this.form.enterpriseType != null &&
+          this.form.enterpriseType != "" &&
+          this.form.enterpriseType != undefined &&
+          this.form.enterpriseName != null &&
+          this.form.enterpriseName != "" &&
+          this.form.enterpriseName != undefined
+        )
+      ) {
+        return this.$modal.msgError("资质信息中存在必填项未填！");
+      }
+    },
+  },
+};
 </script>
 
-<style>
-  .btn_group {
-    width: 100%;
-    margin: 20px -10px;
-    display: flex;
-    justify-content: right;
-  }
-
-  .lines {
-    margin-top: 0;
-  }
-
+<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;
+}
 </style>

src/views/business/spd/cm/customersContact/columns.js

@@ -0,0 +1,231 @@
+export default function useColumns() {
+  // 基本信息
+  const BasicColumns = [
+    {
+      item: { key: "code", title: "编码" },
+      attr: {
+        is: "el-input",
+        placeholder: "系统自动生成编码",
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "name", title: "姓名" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "gander", title: "性别" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_user_sex",
+      },
+    },
+    {
+      item: { key: "customerName", title: "所属客户" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CUSTOMER_PARAM_ZT",
+        valueKey: "name",
+        dataMapping: {
+          customer: 'id',
+        },
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "contactClassification", title: "联系人分类" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_contact_type",
+      },
+    },
+    {
+      item: { key: "birthday", title: "生日" },
+      attr: {
+        is: "el-date-picker",
+        clearable: true,
+        type: "date",
+        valueFormat: "yyyy-MM-dd",
+      },
+    },
+    {
+      item: { key: "birthplace", title: "籍贯" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "hobby", title: "兴趣爱好" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "state", title: "状态" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_contact_state",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    },
+  }));
+
+  // 工作信息
+  const WorkColumns = [
+    {
+      item: { key: "superiorContactName", title: "上级联系人" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "LINKMAN_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          superiorContact: 'id',
+        },
+        queryParams: (params) => ({
+          parame: {
+            customer: params.customer ? params.customer : 'xxx'
+          }
+        }),
+      },
+    },
+    {
+      item: { key: "section", title: "任职科室" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_section",
+        filterable: true,
+      },
+    },
+    {
+      item: { key: "position", title: "职务" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_position",
+      },
+    },
+    {
+      item: { key: "jobTitle", title: "职称" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_job_title",
+      },
+    },
+    {
+      item: { key: "power", title: "决策力" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_power",
+      },
+    },
+    {
+      item: { key: "support", title: "支持度" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_support",
+      },
+    },
+    {
+      item: { key: "fieldExpertise", title: "擅长领域" },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_field_expertise",
+      },
+    },
+    {
+      item: { key: "decisionMaker", title: "关键决策人" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_yes_no",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    },
+  }));
+
+  // 联系信息
+  const CancatColumns = [
+    {
+      item: { key: "telephone", title: "联系电话" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "mail", title: "微信" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "address", title: "家庭地址" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "visitTime", title: "最佳拜访时间" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "visitPlace", title: "最佳拜访地点" },
+      attr: {
+        is: "el-input",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    },
+  }));
+
+  // 其他信息
+  const OtherColumns = [
+    {
+      item: { key: "createByName", title: "创建人" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "createTime", title: "创建时间" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "updateByName", title: "修改人" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "updateTime", title: "修改时间" },
+      attr: {
+        is: "el-input",
+        readonly: true,
+      },
+    },
+  ]
+  return { BasicColumns, WorkColumns, CancatColumns, OtherColumns };
+}

src/views/business/spd/cm/customersContact/index.vue

@@ -1,15 +1,25 @@
 <template>
   <!-- <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body> -->
   <div id="CustomersContact" class="app-container">
-    <el-form ref="form" :model="form" :rules="rules" label-width="auto"
-      :disabled="this.operatingState == 'Browse'">
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="auto"
+      :size="size"
+      :disabled="this.operatingState == 'Browse'"
+    >
       <el-divider content-position="left">
         <dev style="width: 50px; height: 40px; font-size: 18px">基本信息</dev>
       </el-divider>
       <el-row>
         <el-col :span="8">
           <el-form-item label="编码" prop="code">
-            <el-input v-model="form.code" placeholder="系统自动生成编码" readonly />
+            <el-input
+              v-model="form.code"
+              placeholder="系统自动生成编码"
+              readonly
+            />
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -20,8 +30,12 @@
         <el-col :span="8">
           <el-form-item label="性别" prop="gander">
             <el-select v-model="form.gander" placeholder="">
-              <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.sys_user_sex"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -29,24 +43,40 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="所属客户" prop="customerName">
-            <dr-popover-select v-model="form.customerName" title="客户" type="MkCustomerRule" :dataMapping="{
-                  customer: 'id',
-                  customerName: 'name',
-                }" :source.sync="form" :disabled="true">
+            <dr-popover-select
+              v-model="form.customerName"
+              title="客户"
+              type="CUSTOMER_PARAM_ZT"
+              :dataMapping="{
+                customer: 'id',
+                customerName: 'name',
+              }"
+              :source.sync="form"
+              :disabled="true"
+            >
             </dr-popover-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="联系人分类" prop="contactClassification">
             <el-select v-model="form.contactClassification" placeholder="">
-              <el-option v-for="dict in dict.type.mk_bo_contact_type" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.mk_bo_contact_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="生日" prop="birthday">
-            <el-date-picker clearable v-model="form.birthday" type="date" value-format="yyyy-MM-dd">
+            <el-date-picker
+              clearable
+              v-model="form.birthday"
+              type="date"
+              value-format="yyyy-MM-dd"
+            >
             </el-date-picker>
           </el-form-item>
         </el-col>
@@ -65,8 +95,12 @@
         <el-col :span="8">
           <el-form-item label="状态" prop="state">
             <el-select v-model="form.state" placeholder="">
-              <el-option v-for="dict in dict.type.mk_bo_contact_state" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.mk_bo_contact_state"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -77,26 +111,41 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="上级联系人" prop="superiorContactName">
-            <dr-popover-select v-model="form.superiorContactName" title="上级联系人" type="LINKMAN_PARAM" :dataMapping="{
-                  superiorContact: 'id',
-                  superiorContactName: 'name',
-                }" :source.sync="form" :queryParams="additionalCondition">
+            <dr-popover-select
+              v-model="form.superiorContactName"
+              title="上级联系人"
+              type="LINKMAN_PARAM"
+              :dataMapping="{
+                superiorContact: 'id',
+                superiorContactName: 'name',
+              }"
+              :source.sync="form"
+              :queryParams="additionalCondition"
+            >
             </dr-popover-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="任职科室" prop="section">
             <el-select v-model.trim="form.section" placeholder="" filterable>
-              <el-option v-for="dict in dict.type.mk_bo_section" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.mk_bo_section"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="职务" prop="position">
             <el-select v-model="form.position" placeholder="">
-              <el-option v-for="dict in dict.type.mk_bo_position" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.mk_bo_position"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -105,24 +154,36 @@
         <el-col :span="8">
           <el-form-item label="职称" prop="jobTitle">
             <el-select v-model="form.jobTitle" placeholder="">
-              <el-option v-for="dict in dict.type.mk_bo_job_title" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.mk_bo_job_title"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="决策力" prop="power">
             <el-select v-model="form.power" placeholder="">
-              <el-option v-for="dict in dict.type.mk_bo_power" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.mk_bo_power"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="支持度" prop="support">
             <el-select v-model="form.support" placeholder="">
-              <el-option v-for="dict in dict.type.mk_bo_support" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.mk_bo_support"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -131,21 +192,29 @@
         <el-col :span="8">
           <el-form-item label="擅长领域" prop="fieldExpertise">
             <el-select v-model="form.fieldExpertise" placeholder="">
-              <el-option v-for="dict in dict.type.mk_bo_field_expertise" :key="dict.value" :label="dict.label"
-                :value="dict.value"></el-option>
+              <el-option
+                v-for="dict in dict.type.mk_bo_field_expertise"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="关键决策人" prop="decisionMaker">
             <el-select v-model="form.decisionMaker" placeholder="">
-              <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value">
+              <el-option
+                v-for="dict in dict.type.sys_yes_no"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              >
               </el-option>
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-        </el-col>
+        <el-col :span="8"> </el-col>
       </el-row>
       <el-divider content-position="left">
         <dev style="width: 50px; height: 40px; font-size: 18px">联系信息</dev>
@@ -178,8 +247,7 @@
             <el-input v-model="form.visitPlace" />
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-        </el-col>
+        <el-col :span="8"> </el-col>
       </el-row>
       <el-tabs v-model="activeName" v-if="this.operatingState != 'Insert'">
         <el-tab-pane label="学历信息" name="first">
@@ -217,247 +285,288 @@
         </el-row>
       </div>
     </el-form>
-    <div slot="footer" style="margin-left: 88%; margin-top: 1%">
-      <el-button type="primary" @click="submitForm" v-if="this.operatingState != 'Browse'"
-        :disabled="submitButtonEditStatus">确 定</el-button>
-      <el-button @click="cancel">取 消</el-button>
+    <div slot="footer" class="dialog-footer">
+      <el-button
+        :size="size"
+        type="primary"
+        @click="submitForm"
+        v-if="this.operatingState != 'Browse'"
+        :disabled="submitButtonEditStatus"
+        >确 定</el-button
+      >
+      <el-button :size="size" @click="cancel">取 消</el-button>
     </div>
   </div>
   <!-- </el-dialog> -->
 </template>
 
 <script>
-  import {
-    listContact,
-    getContact,
-    delContact,
-    addContact,
-    updateContact
-  } from "@/api/business/spd/bo/contact";
-  // import EducationList from '../education/educationList.vue';
-  // import RelationshipList from '../relationship/relationshipList.vue';
+import {
+  listContact,
+  getContact,
+  delContact,
+  addContact,
+  updateContact,
+} from "@/api/business/spd/bo/contact";
+// import EducationList from '../education/educationList.vue';
+// import RelationshipList from '../relationship/relationshipList.vue';
 
-  export default {
-    name: "CustomersContact",
-    props: ['operatingState', 'row', 'disable', 'state', 'customersId', 'customersName', 'customersCode'],
-    model: {
-      prop: 'isAdd0',
-      event: 'jugislist'
-    },
-    dicts: ['sys_user_sex', 'mk_bo_contact_state', 'mk_bo_section', 'mk_bo_position', 'mk_bo_job_title', 'mk_bo_power',
-      'mk_bo_support', 'mk_bo_field_expertise', 'sys_yes_no', 'mk_bo_contact_type'
-    ],
-    components: {
-      EducationList: () => import('../education/educationList.vue'),
-      RelationshipList: () => import('../relationship/relationshipList.vue')
-    },
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 联系人管理表格数据
-        contactList: [],
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          name: null,
-          telephone: null,
-          customerName: null,
-        },
-        // 表单参数
-        form: {
-          id: null,
-          code: null,
-          name: null,
-          gander: null,
-          customer: null,
-          customer_name: null,
-          customer_code: null,
-          contact_classification: null,
-          birthday: null,
-          birthplace: null,
-          hobby: null,
-          state: null,
-          superior_contact_name: null,
-          superior_contact: null,
-          section: null,
-          position: null,
-          job_title: null,
-          power: null,
-          support: null,
-          field_expertise: null,
-          decision_maker: null,
-          telephone: null,
-          mail: null,
-          address: null,
-          visit_time: null,
-          visit_place: null,
-          organization: null,
-          organization_name: null,
-          area: null,
-          department: null,
-          department_name: null,
-          department_code: null,
-          create_by: null,
-          create_time: null,
-          update_by: null,
-          update_time: null,
-          del_flag: null,
-          bo_id: null,
-          zt_id: null
-        },
-        // 表单校验
-        rules: {
-          name: [{
+export default {
+  name: "CustomersContact",
+  props: [
+    "operatingState",
+    "row",
+    "disable",
+    "state",
+    "customersId",
+    "customersName",
+    "customersCode",
+  ],
+  model: {
+    prop: "isAdd0",
+    event: "jugislist",
+  },
+  dicts: [
+    "sys_user_sex",
+    "mk_bo_contact_state",
+    "mk_bo_section",
+    "mk_bo_position",
+    "mk_bo_job_title",
+    "mk_bo_power",
+    "mk_bo_support",
+    "mk_bo_field_expertise",
+    "sys_yes_no",
+    "mk_bo_contact_type",
+  ],
+  components: {
+    EducationList: () => import("../education/educationList.vue"),
+    RelationshipList: () => import("../relationship/relationshipList.vue"),
+  },
+  data() {
+    return {
+      size: "mini",
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 联系人管理表格数据
+      contactList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        telephone: null,
+        customerName: null,
+      },
+      // 表单参数
+      form: {
+        id: null,
+        code: null,
+        name: null,
+        gander: null,
+        customer: null,
+        customer_name: null,
+        customer_code: null,
+        contact_classification: null,
+        birthday: null,
+        birthplace: null,
+        hobby: null,
+        state: null,
+        superior_contact_name: null,
+        superior_contact: null,
+        section: null,
+        position: null,
+        job_title: null,
+        power: null,
+        support: null,
+        field_expertise: null,
+        decision_maker: null,
+        telephone: null,
+        mail: null,
+        address: null,
+        visit_time: null,
+        visit_place: null,
+        organization: null,
+        organization_name: null,
+        area: null,
+        department: null,
+        department_name: null,
+        department_code: null,
+        create_by: null,
+        create_time: null,
+        update_by: null,
+        update_time: null,
+        del_flag: null,
+        bo_id: null,
+        zt_id: null,
+      },
+      // 表单校验
+      rules: {
+        name: [
+          {
             required: true,
             message: "姓名不能为空",
-            trigger: "blur"
-          }],
-          gander: [{
+            trigger: "blur",
+          },
+        ],
+        gander: [
+          {
             required: true,
             message: "性别不能为空",
-            trigger: "blur"
-          }],
-          customerName: [{
+            trigger: "blur",
+          },
+        ],
+        customerName: [
+          {
             required: true,
             message: "所属客户名称不能为空",
-            trigger: "blur"
-          }],
-          state: [{
+            trigger: "blur",
+          },
+        ],
+        state: [
+          {
             required: true,
             message: "状态不能为空",
-            trigger: "blur"
-          }],
-          section: [{
+            trigger: "blur",
+          },
+        ],
+        section: [
+          {
             required: true,
             message: "任职科室不能为空",
-            trigger: "blur"
-          }],
-          position: [{
+            trigger: "blur",
+          },
+        ],
+        position: [
+          {
             required: true,
             message: "职务不能为空",
-            trigger: "blur"
-          }],
-          jobTitle: [{
+            trigger: "blur",
+          },
+        ],
+        jobTitle: [
+          {
             required: true,
             message: "职称不能为空",
-            trigger: "blur"
-          }],
-          power: [{
+            trigger: "blur",
+          },
+        ],
+        power: [
+          {
             required: true,
             message: "决策力不能为空",
-            trigger: "blur"
-          }],
-          decisionMaker: [{
+            trigger: "blur",
+          },
+        ],
+        decisionMaker: [
+          {
             required: true,
             message: "关键决策人不能为空",
-            trigger: "blur"
-          }],
-          telephone: [{
-              required: true,
-              message: "联系电话不能为空",
-              trigger: "blur"
+            trigger: "blur",
+          },
+        ],
+        telephone: [
+          {
+            required: true,
+            message: "联系电话不能为空",
+            trigger: "blur",
+          },
+          {
+            validator: function (rule, value, callback) {
+              if (/^1[34578]\d{9}$/.test(value) == false) {
+                callback(new Error("手机号格式错误"));
+              } else {
+                callback();
+              }
             },
-            {
-              validator: function (rule, value, callback) {
-                if (/^1[34578]\d{9}$/.test(value) == false) {
-                  callback(new Error("手机号格式错误"));
-                } else {
-                  callback();
-                }
-              },
-              trigger: "blur"
-            }
-          ],
-        },
-        //重新加载子组件参数
-        timer: '',
-        activeName: 'first',
-        //确定按钮是否可点
-        submitButtonEditStatus: false,
-      };
+            trigger: "blur",
+          },
+        ],
+      },
+      //重新加载子组件参数
+      timer: "",
+      activeName: "first",
+      //确定按钮是否可点
+      submitButtonEditStatus: false,
+    };
+  },
+  created() {
+    this.initialization();
+  },
+  methods: {
+    // 初始化
+    initialization() {
+      // 客户数据赋值
+      this.form.customer = this.customersId;
+      this.form.customerCode = this.customersCode;
+      this.form.customerName = this.customersName;
+      if (this.operatingState == "Browse") {
+        this.handleBrowse(this.row);
+      } else if (this.operatingState == "Update") {
+        this.handleUpdate(this.row);
+      }
     },
-    created() {
-      this.initialization();
+    // 取消按钮
+    cancel() {
+      this.$emit("jugislist", false);
     },
-    methods: {
-      // 初始化
-      initialization() {
-        // 客户数据赋值
-        this.form.customer = this.customersId;
-        this.form.customerCode = this.customersCode;
-        this.form.customerName = this.customersName;
-        if (this.operatingState == 'Browse') {
-          this.handleBrowse(this.row);
-        } else if (this.operatingState == 'Update') {
-          this.handleUpdate(this.row);
-        }
-      },
-      // 取消按钮
-      cancel() {
-        this.$emit('jugislist', false);
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.operatingState = "Update";
-        const id = row.id || this.ids
-        getContact(id).then(response => {
-          this.form = response.data;
-          this.timer = new Date().getTime();
-        });
-      },
-      /** 查看按钮操作 */
-      handleBrowse(row) {
-        const id = row.id || this.ids
-        getContact(id).then(response => {
-          this.form = response.data;
-          this.operatingState = "Browse";
-        });
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.submitButtonEditStatus = true;
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id != null) {
-              updateContact(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.submitButtonEditStatus = false;
-                this.cancel();
-                this.$parent.handleCheck(this.customersId);
-              });
-            } else {
-              addContact(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.submitButtonEditStatus = false;
-                this.cancel();
-                this.$parent.handleCheck(this.customersId);
-              });
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.operatingState = "Update";
+      const id = row.id || this.ids;
+      getContact(id).then((response) => {
+        this.form = response.data;
+        this.timer = new Date().getTime();
+      });
+    },
+    /** 查看按钮操作 */
+    handleBrowse(row) {
+      const id = row.id || this.ids;
+      getContact(id).then((response) => {
+        this.form = response.data;
+        this.operatingState = "Browse";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.submitButtonEditStatus = true;
+      this.$refs["form"].validate(async (valid) => {
+        if (valid) {
+          try {
+            let { code, msg } =
+              this.form.id != null
+                ? await updateContact(this.form)
+                : await addContact(this.form);
+            if (code == 200) {
+              this.$notify.success(msg);
+              this.cancel();
+              this.$parent.handleCheck(this.customersId);
             }
-          } else {
+          } catch (error) {
+          } finally {
             this.submitButtonEditStatus = false;
           }
-        });
-      },
-      additionalCondition() {
-        return {
-          parame: {
-            customer: this.form.customer ? this.form.customer : 'xxx'
-          }
+        } else {
+          this.submitButtonEditStatus = false;
         }
-      },
-    }
-  };
-
+      });
+    },
+    additionalCondition() {
+      return {
+        parame: {
+          customer: this.form.customer ? this.form.customer : "xxx",
+        },
+      };
+    },
+  },
+};
 </script>

src/views/business/spd/cm/customersDepartment/columns.js

@@ -0,0 +1,99 @@
+export default function useColumns() {
+
+  // 科室信息
+  const FormColumns = [
+    {
+      item: { key: "name", title: "科室名称", required: true, },
+      attr: {
+        is: "el-select",
+        dictName: "mk_bo_section",
+        placeholder: "请输入科室名称",
+        clearable: true,
+        filterable: true,
+      },
+    },
+    {
+      item: { key: "customersName", title: "客户名称" },
+      attr: {
+        is: "el-input",
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "responsiblePersonName", title: "负责人姓名" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "MKCMCONTACTS_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          responsiblePerson: 'id',
+          responsiblePersonName: 'name',
+          phone: 'cell'
+        },
+        placeholder: "请选择负责人",
+      },
+    },
+    {
+      item: { key: "phone", title: "联系人手机", required: true, },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        placeholder: "请输入联系人手机",
+        rules: [
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur",
+          },
+        ]
+      },
+    },
+    {
+      item: { key: "address", title: "科室位置" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        placeholder: "请输入科室位置",
+      },
+    },
+    {
+      item: { key: "conventionalTherapy", title: "常规治疗" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        placeholder: "请输入常规治疗",
+      },
+    },
+    {
+      item: { key: "characteristic", title: "科室特色" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        placeholder: "请输入科室特色",
+      },
+    },
+    {
+      item: { key: "createByName", title: "业务员名称" },
+      attr: {
+        is: "el-input",
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "memo", title: "备注" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        placeholder: "请输入备注",
+      },
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    }
+  }));
+
+  return { FormColumns }
+}

src/views/business/spd/cm/customersDepartment/index copy.vue

@@ -0,0 +1,212 @@
+<template>
+  <div id="CustomersDepartment" class="app-container">
+    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
+      <el-divider content-position="left">科室信息</el-divider>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="科室名称" prop="name">
+            <el-select v-model.trim="form.name" placeholder="请输入科室名称" :disabled="disable" clearable filterable>
+              <el-option v-for="dict in dict.type.mk_bo_section" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="客户名称" prop="customersName">
+            <el-input v-model="form.customersName" :disabled="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="负责人姓名" prop="responsiblePersonName">
+            <el-popover-select-v2 v-model="form.responsiblePersonName" title="负责人" valueKey="name"
+              referName="MKCMCONTACTS_PARAM" :dataMapping="{responsiblePerson: 'id', responsiblePersonName: 'name', phone: 'cell'}"
+              :source.sync="form" :queryParams="referQuery" placeholder="请选择负责人" :disabled="disable" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="联系人手机" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入联系人手机" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="科室位置" prop="address">
+            <el-input v-model="form.address" placeholder="请输入科室位置" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="常规治疗" prop="conventionalTherapy">
+            <el-input v-model="form.conventionalTherapy" placeholder="请输入常规治疗" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="科室特色" prop="characteristic">
+            <el-input v-model="form.characteristic" placeholder="请输入科室特色" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="业务员名称" prop="createByName">
+            <el-input v-model="form.createByName" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="备注" prop="memo">
+            <el-input v-model="form.memo" placeholder="请输入备注" :disabled="disable" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" style="margin-left: 88%; margin-top: 1%">
+      <el-button type="primary" @click="submitForm" :disabled="disable">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    listCustomersDepartment,
+    getCustomersDepartment,
+    delCustomersDepartment,
+    addCustomersDepartment,
+    updateCustomersDepartment
+  } from "@/api/business/spd/cm/customersDepartment";
+  // 参照弹出框
+  import ElPopoverSelectV2 from "@/components/popover-select-v2";
+
+  export default {
+    name: "CustomersDepartment",
+    props: ['pageStu', 'row', 'disable', 'customersId', 'customersName'],
+    dicts: ['mk_bo_section'],
+    model: {
+      prop: 'isAdd2',
+      event: 'jugislist'
+    },
+    components: {
+      ElPopoverSelectV2,
+    },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 客户科室表格数据
+        customersDepartmentList: [],
+        // 当前操作人
+        operator: null,
+        // 表单参数
+        form: {
+          id: null,
+          name: null,
+          customersName: null,
+          responsiblePerson: null,
+          responsiblePersonName: null,
+          phone: null,
+          address: null,
+          conventionalTherapy: null,
+          characteristic: null,
+          marketingArea: null,
+          marketingAreaName: null,
+          memo: null,
+          state: null,
+          customersId: null,
+          tenantId: null,
+          revision: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          delFlag: null
+        },
+        // 表单校验
+        rules: {
+          name: [{
+            required: true,
+            message: '科室名称不能为空',
+            trigger: 'blur'
+          }],
+          phone: [{
+            required: true,
+            message: "手机号不能为空",
+            trigger: "blur"
+          }, {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }],
+        },
+      };
+    },
+    created() {
+      this.initialization();
+    },
+    methods: {
+      // 初始化
+      initialization() {
+        // 客户数据赋值
+        this.form.customersId = this.customersId;
+        this.form.customersName = this.customersName;
+        if (this.pageStu == 'check' || this.pageStu == 'update') {
+          this.getDetails(this.row);
+        }
+        // 获取当前登录用户的编码
+        this.operator = this.$store.state.user.name;
+      },
+      // 取消按钮
+      cancel() {
+        this.$emit('jugislist', false);
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateCustomersDepartment(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.cancel();
+                this.$parent.handleCheck(this.form.customersId);
+              });
+            } else {
+              addCustomersDepartment(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.cancel();
+                this.$parent.handleCheck(this.form.customersId);
+              });
+            }
+          }
+        });
+      },
+      /** 获取详情 */
+      getDetails(row) {
+        getCustomersDepartment(row.id).then(res => {
+          if (res.code == 200) {
+            this.form = res.data;
+          }
+        })
+      },
+      // 参照查询条件
+      referQuery() {
+        const parameter = {
+          parame: {
+            customersName: this.form.customersName,
+            operator: this.operator
+          }
+        };
+        return parameter;
+      }
+    }
+  };
+
+</script>

src/views/business/spd/cm/customersDepartment/index.vue

@@ -1,208 +1,151 @@
 <template>
   <div id="CustomersDepartment" class="app-container">
-    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
-      <el-divider content-position="left">科室信息</el-divider>
-      <el-row type="flex" class="row-bg" justify="space-around">
-        <el-col :span="6">
-          <el-form-item label="科室名称" prop="name" label-width="110px">
-            <el-input v-model="form.name" placeholder="请输入科室名称" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="客户名称" prop="customersName">
-            <el-input v-model="form.customersName" :disabled="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="负责人姓名" prop="responsiblePersonName">
-            <el-popover-select-v2 v-model="form.responsiblePersonName" title="负责人" valueKey="name"
-              referName="MKCMCONTACTS_PARAM" :dataMapping="{responsiblePerson: 'id', responsiblePersonName: 'name', phone: 'cell'}"
-              :source.sync="form" :queryParams="referQuery" placeholder="请选择负责人" :disabled="disable" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row type="flex" class="row-bg" justify="space-around">
-        <el-col :span="6">
-          <el-form-item label="联系人手机" prop="phone">
-            <el-input v-model="form.phone" placeholder="请输入联系人手机" :disabled="disable" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="科室位置" prop="address">
-            <el-input v-model="form.address" placeholder="请输入科室位置" :disabled="disable" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="常规治疗" prop="conventionalTherapy">
-            <el-input v-model="form.conventionalTherapy" placeholder="请输入常规治疗" :disabled="disable" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row type="flex" class="row-bg" justify="space-around">
-        <el-col :span="6">
-          <el-form-item label="科室特色" prop="characteristic">
-            <el-input v-model="form.characteristic" placeholder="请输入科室特色" :disabled="disable" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="业务员名称" prop="createByName">
-            <el-input v-model="form.createByName" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="备注" prop="memo">
-            <el-input v-model="form.memo" placeholder="请输入备注" :disabled="disable" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <div slot="footer" style="margin-left: 88%; margin-top: 1%">
-      <el-button type="primary" @click="submitForm" :disabled="disable">确 定</el-button>
-      <el-button @click="cancel">取 消</el-button>
+    <el-divider content-position="left">科室信息</el-divider>
+    <el-super-form
+      v-model="params"
+      :dict="dict"
+      :rules="rules"
+      :size="size"
+      :columns="FormColumns"
+      ref="superForm"
+      label-width="auto"
+      label-position="right"
+      style="padding: 20px"
+      :disabled="disable"
+    >
+      <template slot="responsiblePersonName" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          :queryParams="
+            () => ({
+              parame: {
+                customersName: params.customersName,
+                operator: operator,
+              },
+            })
+          "
+          :disabled="disable"
+        >
+        </component
+      ></template>
+    </el-super-form>
+    <div slot="footer" style="text-align: right">
+      <el-button
+        type="primary"
+        :size="size"
+        @click="submitForm('superForm')"
+        :disabled="disable"
+        >确 定</el-button
+      >
+      <el-button :size="size" @click="cancel">取 消</el-button>
     </div>
   </div>
 </template>
 
 <script>
-  import {
-    listCustomersDepartment,
-    getCustomersDepartment,
-    delCustomersDepartment,
-    addCustomersDepartment,
-    updateCustomersDepartment
-  } from "@/api/business/spd/cm/customersDepartment";
-  // 参照弹出框
-  import ElPopoverSelectV2 from "@/components/popover-select-v2";
-
-  export default {
-    name: "CustomersDepartment",
-    props: ['pageStu', 'row', 'disable', 'customersId', 'customersName'],
-    model: {
-      prop: 'isAdd2',
-      event: 'jugislist'
-    },
-    components: {
-      ElPopoverSelectV2,
+import { dicts } from "../dicts";
+import useColumns from "./columns";
+import {
+  listCustomersDepartment,
+  getCustomersDepartment,
+  delCustomersDepartment,
+  addCustomersDepartment,
+  updateCustomersDepartment,
+} from "@/api/business/spd/cm/customersDepartment";
+export default {
+  name: "CustomersDepartment",
+  props: ["pageStu", "row", "disable", "customersId", "customersName"],
+  dicts: [...dicts],
+  model: {
+    prop: "isAdd2",
+    event: "jugislist",
+  },
+  components: {
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2"),
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+  },
+  data() {
+    const { FormColumns } = useColumns();
+    const params = this.$init.params(FormColumns);
+    const rules = this.$init.rules(FormColumns);
+    return {
+      rules,
+      params: {
+        ...params,
+        id: null,
+        responsiblePerson: null,
+        marketingArea: null,
+        marketingAreaName: null,
+        state: null,
+        customersId: null,
+        tenantId: null,
+        revision: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        delFlag: null,
+      },
+      FormColumns,
+      size: "mini",
+      // 遮罩层
+      loading: true,
+      // 客户科室表格数据
+      customersDepartmentList: [],
+      // 当前操作人
+      operator: null,
+    };
+  },
+  created() {
+    this.initialization();
+  },
+  methods: {
+    // 初始化
+    initialization() {
+      // 客户数据赋值
+      this.params.customersId = this.customersId;
+      this.params.customersName = this.customersName;
+      if (this.pageStu == "check" || this.pageStu == "update") {
+        this.getDetails(this.row);
+      }
+      // 获取当前登录用户的编码
+      this.operator = this.$store.state.user.name;
     },
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 客户科室表格数据
-        customersDepartmentList: [],
-        // 当前操作人
-        operator: null,
-        // 表单参数
-        form: {
-          id: null,
-          name: null,
-          customersName: null,
-          responsiblePerson: null,
-          responsiblePersonName: null,
-          phone: null,
-          address: null,
-          conventionalTherapy: null,
-          characteristic: null,
-          marketingArea: null,
-          marketingAreaName: null,
-          memo: null,
-          state: null,
-          customersId: null,
-          tenantId: null,
-          revision: null,
-          createBy: null,
-          createTime: null,
-          updateBy: null,
-          updateTime: null,
-          delFlag: null
-        },
-        // 表单校验
-        rules: {
-          name: [{
-            required: true,
-            message: '科室名称不能为空',
-            trigger: 'blur'
-          }],
-          phone: [{
-            required: true,
-            message: "手机号不能为空",
-            trigger: "blur"
-          }, {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }],
-        },
-      };
+    // 取消按钮
+    cancel() {
+      this.$emit("jugislist", false);
     },
-    created() {
-      this.initialization();
+    /** 提交按钮 */
+    submitForm(prop) {
+      this.$refs[prop].validate(async (valid) => {
+        if (valid) {
+          try {
+            let { params } = this;
+            let { code, msg } =
+              params.id != null
+                ? await updateCustomersDepartment(params)
+                : await addCustomersDepartment(params);
+
+            if (code == 200) {
+              this.$notify.success(msg);
+              this.cancel();
+              this.$parent.handleCheck(params.customersId);
+            }
+          } catch (error) {}
+        }
+      });
     },
-    methods: {
-      // 初始化
-      initialization() {
-        // 客户数据赋值
-        this.form.customersId = this.customersId;
-        this.form.customersName = this.customersName;
-        if (this.pageStu == 'check' || this.pageStu == 'update') {
-          this.getDetails(this.row);
+    /** 获取详情 */
+    getDetails(row) {
+      getCustomersDepartment(row.id).then((res) => {
+        if (res.code == 200) {
+          this.params = res.data;
         }
-        // 获取当前登录用户的编码
-        this.operator = this.$store.state.user.name;
-      },
-      // 取消按钮
-      cancel() {
-        this.$emit('jugislist', false);
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id != null) {
-              updateCustomersDepartment(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.cancel();
-                this.$parent.handleCheck(this.form.customersId);
-              });
-            } else {
-              addCustomersDepartment(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.cancel();
-                this.$parent.handleCheck(this.form.customersId);
-              });
-            }
-          }
-        });
-      },
-      /** 获取详情 */
-      getDetails(row) {
-        getCustomersDepartment(row.id).then(res => {
-          if (res.code == 200) {
-            this.form = res.data;
-          }
-        })
-      },
-      // 参照查询条件
-      referQuery() {
-        const parameter = {
-          parame: {
-            customersName: this.form.customersName,
-            operator: this.operator
-          }
-        };
-        return parameter;
-      }
-    }
-  };
-
+      });
+    },
+  },
+};
 </script>

src/views/business/spd/cm/customersResponsiblePerson/columns.js

@@ -0,0 +1,62 @@
+export default function useColumns() {
+  // 负责人信息
+  const PrincipalCloumns = [
+    {
+      item: { key: "personName", title: "人员姓名", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        placeholder: "请选择负责人",
+        dataMapping: {
+          person: 'id',
+        },
+      },
+    },
+    {
+      item: { key: "customersName", title: "客户名称" },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: { key: "relationshipType", title: "关系类型", required: true, },
+      attr: {
+        is: "el-select",
+        dictName: "mk_cm_relationship_type",
+      },
+    },
+    {
+      item: { key: "productionLine", title: "产线", required: true, },
+      attr: {
+        is: "el-select",
+        dictName: "mk_cm_production_line",
+      },
+    },
+    {
+      item: { key: "startDate", title: "开始日期", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        placeholder: "请选择开始日期",
+      },
+    },
+    {
+      item: { key: "endDate", title: "结束日期" },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        placeholder: "请选择结束日期",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    }
+  }))
+
+  return { PrincipalCloumns }
+}

src/views/business/spd/cm/customersResponsiblePerson/index copy.vue

@@ -0,0 +1,187 @@
+<template>
+  <div id="CustomersResponsiblePerson" class="app-container">
+    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
+      <el-divider content-position="left">负责人信息</el-divider>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="人员姓名" prop="personName">
+            <el-popover-select-v2 v-model="form.personName" title="负责人" valueKey="name" referName="CONTACTS_PARAM"
+              :dataMapping="{person: 'id', personName: 'name'}" :source.sync="form" placeholder="请选择负责人"
+              :disabled="disable" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="客户名称" prop="customersName">
+            <el-input v-model="form.customersName" :disabled="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="关系类型" prop="relationshipType">
+            <el-select clearable v-model="form.relationshipType" :disabled="disable">
+              <el-option v-for="dict in dict.type.mk_cm_relationship_type" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" justify="space-around">
+        <el-col :span="6">
+          <el-form-item label="产线" prop="productionLine">
+            <el-select clearable v-model="form.productionLine" :disabled="disable">
+              <el-option v-for="dict in dict.type.mk_cm_production_line" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="开始日期" prop="startDate">
+            <el-date-picker v-model="form.startDate" align="right" type="date" placeholder="请选择开始日期"
+              :disabled="disable" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期" prop="endDate">
+            <el-date-picker v-model="form.endDate" align="right" type="date" placeholder="请选择结束日期"
+              :disabled="disable" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" style="margin-left: 88%; margin-top: 1%">
+      <el-button type="primary" @click="submitForm" :disabled="disable">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    listCustomersResponsiblePerson,
+    getCustomersResponsiblePerson,
+    delCustomersResponsiblePerson,
+    addCustomersResponsiblePerson,
+    updateCustomersResponsiblePerson
+  } from "@/api/business/spd/cm/customersResponsiblePerson";
+  // 参照弹出框
+  import ElPopoverSelectV2 from "@/components/popover-select-v2";
+
+  export default {
+    name: "CustomersResponsiblePerson",
+    props: ['pageStu', 'row', 'disable', 'customersId', 'customersName'],
+    model: {
+      prop: 'isAdd1',
+      event: 'jugislist'
+    },
+    dicts: ['mk_cm_relationship_type', 'mk_cm_production_line'],
+    components: {
+      ElPopoverSelectV2,
+    },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 客户负责人表格数据
+        customersResponsiblePersonList: [],
+        // 表单参数
+        form: {
+          id: null,
+          person: null,
+          personName: null,
+          customersName: null,
+          relationshipType: null,
+          productionLine: null,
+          startDate: null,
+          endDate: null,
+          customersId: null,
+          tenantId: null,
+          revision: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          delFlag: null
+        },
+        // 表单校验
+        rules: {
+          personName: [{
+            required: true,
+            message: '人员名称不能为空',
+            trigger: 'blur'
+          }],
+          relationshipType: [{
+            required: true,
+            message: '关系类型不能为空',
+            trigger: 'blur'
+          }],
+          startDate: [{
+            required: true,
+            message: '开始日期不能为空',
+            trigger: 'blur'
+          }],
+          productionLine: [{
+            required: true,
+            message: '产线不能为空',
+            trigger: 'blur'
+          }],
+        },
+      };
+    },
+    created() {
+      this.initialization();
+    },
+    methods: {
+      // 初始化
+      initialization() {
+        // 客户主键赋值
+        this.form.customersId = this.customersId;
+        this.form.customersName = this.customersName;
+        if (this.pageStu == 'check' || this.pageStu == 'update') {
+          this.getDetails(this.row);
+        }
+      },
+      // 取消按钮
+      cancel() {
+        this.$emit('jugislist', false);
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              updateCustomersResponsiblePerson(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.cancel();
+                this.$parent.handleCheck(this.form.customersId);
+              });
+            } else {
+              addCustomersResponsiblePerson(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.cancel();
+                this.$parent.handleCheck(this.form.customersId);
+              });
+            }
+          }
+        });
+      },
+      /** 获取详情 */
+      getDetails(row) {
+        getCustomersResponsiblePerson(row.id).then(res => {
+          if (res.code == 200) {
+            this.form = res.data;
+          }
+        })
+      },
+    }
+  }
+
+</script>

src/views/business/spd/cm/customersResponsiblePerson/index.vue

@@ -1,187 +1,138 @@
 <template>
   <div id="CustomersResponsiblePerson" class="app-container">
-    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
-      <el-divider content-position="left">负责人信息</el-divider>
-      <el-row type="flex" class="row-bg" justify="space-around">
-        <el-col :span="6">
-          <el-form-item label="人员姓名" prop="personName">
-            <el-popover-select-v2 v-model="form.personName" title="负责人" valueKey="name" referName="CONTACTS_PARAM"
-              :dataMapping="{person: 'id', personName: 'name'}" :source.sync="form" placeholder="请选择负责人"
-              :disabled="disable" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="客户名称" prop="customersName">
-            <el-input v-model="form.customersName" :disabled="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="关系类型" prop="relationshipType">
-            <el-select clearable v-model="form.relationshipType" :disabled="disable">
-              <el-option v-for="dict in dict.type.mk_cm_relationship_type" :key="dict.value" :label="dict.label"
-                :value="dict.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row type="flex" class="row-bg" justify="space-around">
-        <el-col :span="6">
-          <el-form-item label="产线" prop="productionLine">
-            <el-select clearable v-model="form.productionLine" :disabled="disable">
-              <el-option v-for="dict in dict.type.mk_cm_production_line" :key="dict.value" :label="dict.label"
-                :value="dict.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="开始日期" prop="startDate">
-            <el-date-picker v-model="form.startDate" align="right" type="date" placeholder="请选择开始日期"
-              :disabled="disable" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="结束日期" prop="endDate">
-            <el-date-picker v-model="form.endDate" align="right" type="date" placeholder="请选择结束日期"
-              :disabled="disable" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <div slot="footer" style="margin-left: 88%; margin-top: 1%">
-      <el-button type="primary" @click="submitForm" :disabled="disable">确 定</el-button>
-      <el-button @click="cancel">取 消</el-button>
+    <el-divider content-position="left">负责人信息</el-divider>
+    <el-super-form
+      v-model="params"
+      :dict="dict"
+      :rules="rules"
+      :size="size"
+      :columns="PrincipalCloumns"
+      ref="superForm"
+      label-width="auto"
+      label-position="right"
+      style="padding: 20px"
+      :disabled="disable"
+    >
+    </el-super-form>
+    <div slot="footer" style="text-align: right">
+      <el-button
+        type="primary"
+        :size="size"
+        @click="submitForm('superForm')"
+        :disabled="disable"
+        >确 定</el-button
+      >
+      <el-button :size="size" @click="cancel">取 消</el-button>
     </div>
   </div>
 </template>
 
 <script>
-  import {
-    listCustomersResponsiblePerson,
-    getCustomersResponsiblePerson,
-    delCustomersResponsiblePerson,
-    addCustomersResponsiblePerson,
-    updateCustomersResponsiblePerson
-  } from "@/api/business/spd/cm/customersResponsiblePerson";
-  // 参照弹出框
-  import ElPopoverSelectV2 from "@/components/popover-select-v2";
+import { dicts } from "../dicts";
+import useColumns from "./columns";
+import {
+  listCustomersResponsiblePerson,
+  getCustomersResponsiblePerson,
+  delCustomersResponsiblePerson,
+  addCustomersResponsiblePerson,
+  updateCustomersResponsiblePerson,
+} from "@/api/business/spd/cm/customersResponsiblePerson";
+// // 参照弹出框
+import ElPopoverSelectV2 from "@/components/popover-select-v2";
 
-  export default {
-    name: "CustomersResponsiblePerson",
-    props: ['pageStu', 'row', 'disable', 'customersId', 'customersName'],
-    model: {
-      prop: 'isAdd1',
-      event: 'jugislist'
-    },
-    dicts: ['mk_cm_relationship_type', 'mk_cm_production_line'],
-    components: {
-      ElPopoverSelectV2,
+export default {
+  name: "CustomersResponsiblePerson",
+  props: ["pageStu", "row", "disable", "customersId", "customersName"],
+  model: {
+    prop: "isAdd1",
+    event: "jugislist",
+  },
+  dicts: [...dicts],
+  components: {
+    ElPopoverSelectV2,
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+  },
+  data() {
+    const { PrincipalCloumns } = useColumns();
+    const params = this.$init.params(PrincipalCloumns);
+    const rules = this.$init.rules(PrincipalCloumns);
+    return {
+      rules,
+      PrincipalCloumns,
+      size: "mini",
+      params: {
+        ...params,
+        id: null,
+        person: null,
+        customersId: null,
+        tenantId: null,
+        revision: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        delFlag: null,
+      },
+      // 遮罩层
+      loading: true,
+      // // 选中数组
+      // ids: [],
+      // // 非单个禁用
+      // single: true,
+      // // 非多个禁用
+      // multiple: true,
+      // // 显示搜索条件
+      // showSearch: true,
+      // // 总条数
+      // total: 0,
+      // 客户负责人表格数据
+      customersResponsiblePersonList: [],
+    };
+  },
+  created() {
+    this.initialization();
+  },
+  methods: {
+    // 初始化
+    initialization() {
+      // 客户主键赋值
+      this.params.customersId = this.customersId;
+      this.params.customersName = this.customersName;
+      if (this.pageStu == "check" || this.pageStu == "update") {
+        this.getDetails(this.row);
+      }
     },
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 客户负责人表格数据
-        customersResponsiblePersonList: [],
-        // 表单参数
-        form: {
-          id: null,
-          person: null,
-          personName: null,
-          customersName: null,
-          relationshipType: null,
-          productionLine: null,
-          startDate: null,
-          endDate: null,
-          customersId: null,
-          tenantId: null,
-          revision: null,
-          createBy: null,
-          createTime: null,
-          updateBy: null,
-          updateTime: null,
-          delFlag: null
-        },
-        // 表单校验
-        rules: {
-          personName: [{
-            required: true,
-            message: '人员名称不能为空',
-            trigger: 'blur'
-          }],
-          relationshipType: [{
-            required: true,
-            message: '关系类型不能为空',
-            trigger: 'blur'
-          }],
-          startDate: [{
-            required: true,
-            message: '开始日期不能为空',
-            trigger: 'blur'
-          }],
-          productionLine: [{
-            required: true,
-            message: '产线不能为空',
-            trigger: 'blur'
-          }],
-        },
-      };
+    // 取消按钮
+    cancel() {
+      this.$emit("jugislist", false);
     },
-    created() {
-      this.initialization();
+    /** 提交按钮 */
+    submitForm(prop) {
+      this.$refs[prop].validate(async (valid) => {
+        if (valid) {
+          try {
+            let { params } = this;
+            let { code, msg } =
+              params.id != null
+                ? await updateCustomersResponsiblePerson(params)
+                : await addCustomersResponsiblePerson(params);
+            if (code == 200) {
+              this.$notify.success(msg);
+              this.cancel();
+              this.$parent.handleCheck(params.customersId);
+            }
+          } catch (error) {}
+        }
+      });
     },
-    methods: {
-      // 初始化
-      initialization() {
-        // 客户主键赋值
-        this.form.customersId = this.customersId;
-        this.form.customersName = this.customersName;
-        if (this.pageStu == 'check' || this.pageStu == 'update') {
-          this.getDetails(this.row);
+    /** 获取详情 */
+    getDetails(row) {
+      getCustomersResponsiblePerson(row.id).then((res) => {
+        if (res.code == 200) {
+          this.params = res.data;
         }
-      },
-      // 取消按钮
-      cancel() {
-        this.$emit('jugislist', false);
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id != null) {
-              updateCustomersResponsiblePerson(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.cancel();
-                this.$parent.handleCheck(this.form.customersId);
-              });
-            } else {
-              addCustomersResponsiblePerson(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.cancel();
-                this.$parent.handleCheck(this.form.customersId);
-              });
-            }
-          }
-        });
-      },
-      /** 获取详情 */
-      getDetails(row) {
-        getCustomersResponsiblePerson(row.id).then(res => {
-          if (res.code == 200) {
-            this.form = res.data;
-          }
-        })
-      },
-    }
-  }
-
+      });
+    },
+  },
+};
 </script>

src/views/business/spd/cm/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/AnnualSaleGoal copy.vue

@@ -0,0 +1,1234 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="6">``
+          <el-form-item label="编码" prop="code">
+            <el-input v-model="queryParams.code" placeholder="请输入编码" clearable @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="目标名称" prop="goalName">
+            <el-input v-model="queryParams.goalName" placeholder="请输入年度销售目标名称" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="单据日期" prop="documentDate">
+            <el-date-picker v-model="queryParams.documentDateRange" type="daterange" value-format="yyyy-MM-dd"
+              align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择单据日期"
+              :picker-options="pickerOptions">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-tooltip class="item" effect="dark" :content="showSearch?'隐藏搜索':'显示搜索'" placement="top">
+              <el-button type="warning" :icon="showSearch?'el-icon-caret-top':'el-icon-caret-bottom'" circle
+                @click="showSearch = !showSearch"></el-button>
+            </el-tooltip>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+    </el-form>
+    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="年度" prop="annual">
+            <el-date-picker v-model="queryParams.annual" type="year" value-format="yyyy" placeholder="选择年度" clearable
+              @keyup.enter.native="handleQuery">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="客户" prop="custom">
+            <el-popover-select-v2 v-model="queryParams.custom" title="客户" valueKey="name" referName="CUSTOMER_PARAM"
+              :dataMapping="{ customCode: 'code', custom: 'name'}" :source.sync="queryParams" placeholder="请输入客户"
+              @keyup.enter.native="handleQuery">
+            </el-popover-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="销售区域" prop="saleZone">
+            <el-popover-select-v2 v-model="queryParams.saleZone" title="销售区域" valueKey="name"
+              referName="MK_SALESAREA_PARAM" :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+              :source.sync="queryParams" placeholder="请输入销售区域" @keyup.enter.native="handleQuery">
+            </el-popover-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="制单人" prop="creator">
+            <el-popover-select-v2 v-model="queryParams.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
+              :dataMapping="{ creatorCode: 'code', creator: 'name'}" :source.sync="queryParams" placeholder="请输入制单人"
+              @keyup.enter.native="handleQuery">
+            </el-popover-select-v2>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="部门" prop="dept">
+            <el-popover-select-v2 v-model="queryParams.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
+              :dataMapping="{ deptId: 'id', dept: 'name'}" :source.sync="queryParams" placeholder="请输入部门"
+              @keyup.enter.native="handleQuery">
+            </el-popover-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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-row>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8" style="float: right">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-dropdown @command="handleCommand">
+          <el-button type="warning" plain icon="el-icon-download" size="mini">
+            导出<i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="export">导出</el-dropdown-item>
+            <el-dropdown-item command="exportDetails">导出明细</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="annualSaleGoalList" @selection-change="handleSelectionChange"
+      @row-dblclick="useDoubleClick" v-horizontal-scroll max-height="560">
+      <el-table-column label="编码" align="center" prop="code" width="180" />
+      <el-table-column label="目标名称" align="center" prop="goalName" width="240" />
+      <el-table-column label="单据日期" align="center" prop="documentDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.documentDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="年度" align="center" prop="annual" width="100" />
+      <el-table-column label="客户" align="center" prop="custom" width="180" />
+      <el-table-column label="销售区域" align="center" prop="saleZone" width="180" />
+      <el-table-column label="制单人" align="center" prop="creator" width="180" />
+      <el-table-column label="部门" align="center" prop="dept" width="180" />
+      <el-table-column label="目标合计（元）" align="center" prop="goalTotal" width="180" />
+      <el-table-column label="备注" align="center" prop="notes" width="180" />
+      <el-table-column show-overflow-tooltip label="状态" align="center" width="100" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_status" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding" width="180" fixed="right">
+        <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'" size="mini" type="text"
+            @click="handleUpdate(scope.row)">修改
+          </el-button>
+          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
+            @click="handleDelete(scope.row)">删除
+          </el-button>
+          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
+            @click="handleSubmit(scope.row)">提交
+          </el-button>
+          <el-button v-if="scope.row.status == '1'" size="mini" type="text" @click="handleReback(scope.row)">收回
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      :page-sizes="[10, 20, 50, 100]" @pagination="getList" />
+
+    <el-drawer :title="title" :visible.sync="open" direction="rtl" :before-close="handleClose" size="100%"
+      v-horizontal-scroll disabled>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="openStatus == 'see'" size="mini">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="编码" prop="code">
+              <el-input v-model="form.code" placeholder="编码后端自动生成" clearable disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="目标名称" prop="goalName">
+              <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" clearable disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据日期" prop="documentDate">
+              <el-date-picker v-model="form.documentDate" type="date" format="yyyy-MM-dd" placeholder="选择日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="年度" prop="annual">
+              <el-date-picker v-model="form.annual" type="year" format="yyyy" placeholder="选择年度"></el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="客户" prop="custom">
+              <el-popover-select-v2 v-model="form.custom" title="客户" valueKey="name" referName="CUSTOMER_PARAM"
+                :dataMapping="{ customCode: 'code', custom: 'name'}" :source.sync="form" placeholder="请输入客户">
+              </el-popover-select-v2>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="销售区域" prop="saleZone">
+              <el-popover-select-v2 v-model="form.saleZone" title="销售区域" valueKey="name" referName="MK_SALESAREA_PARAM"
+                :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}" :source.sync="form" placeholder="请输入销售区域">
+              </el-popover-select-v2>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="制单人" prop="creator">
+              <el-popover-select-v2 v-model="form.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
+                :dataMapping="{ creatorCode: 'code', creator: 'name'}" :source.sync="form" placeholder="请输入制单人">
+              </el-popover-select-v2>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="部门" prop="dept">
+              <el-popover-select-v2 v-model="form.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
+                :dataMapping="{ deptId: 'id', dept: 'name'}" :source.sync="form" placeholder="请输入部门">
+              </el-popover-select-v2>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="目标合计（元）" prop="goalTotal" label-width="120px">
+              <el-input v-model="form.goalTotal" placeholder="目标合计自动计算" clearable disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="备注" prop="notes">
+              <el-input v-model="form.notes" placeholder="请输入备注" clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据状态" prop="type">
+              <el-select v-model="form.status" placeholder="" disabled>
+                <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-row>
+
+        <div id="addDetails">
+          <el-row :gutter="10" class="mb8" style="margin-left: 75%">
+            <el-col :span="1.5">
+              <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleTemplateDownload">模板下载
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-upload ref="upload" action="" :http-request="handleImport">
+                <el-button size="mini" type="primary">导入明细</el-button>
+              </el-upload>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddDetails">增行</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button type="primary" plain icon="el-icon-edit-outline" size="mini"
+                @click="dialogUpdateMore.dialogFormVisible = true">批量修改</el-button>
+            </el-col>
+          </el-row>
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="年销售目标填报明细" name="annualSaleGoalDetails">
+
+              <el-table max-height="560" show-summary :summary-method="getSummaries" v-loading="loading" size="mini"
+                :data="annualSaleGoalDetailsList" @selection-change="handleSelectionChange" v-horizontal-scroll>
+                <el-table-column label="序号" type="index" width="70" align="center" fixed />
+                <!-- <el-table-column label="销售组织" align="center" width="180"
+                  :render-header="(h, obj) => addRedStar(h, obj, '0')">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].saleOrg" title="销售组织"
+                      valueKey="name" referName="ORG_PARAM" :dataMapping="{ saleOrgCode: 'code', saleOrg: 'name'}"
+                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入销售组织">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="销售区域" align="center" width="180"
+                  :render-header="(h, obj) => addRedStar(h, obj, '0')">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].saleZone" title="销售区域"
+                      valueKey="name" referName="MK_SALESAREA_PARAM"
+                      :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入销售区域">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="客户" align="center" width="180"
+                  :render-header="(h, obj) => addRedStar(h, obj, '0')">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].custom" title="客户"
+                      valueKey="name" referName="CUSTOMER_PARAM" :dataMapping="{ customCode: 'code', custom: 'name'}"
+                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入客户">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="负责人" align="center" width="180"
+                  :render-header="(h, obj) => addRedStar(h, obj, '0')">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].creator" title="负责人"
+                      valueKey="name" referName="CONTACTS_PARAM" :dataMapping="{ creatorCode: 'code', creator: 'name'}"
+                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入负责人">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column> -->
+                <el-table-column label="一级分类" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-input v-model="annualSaleGoalDetailsList[scope.$index].oneLevelClassify" placeholder="请输入一级分类"
+                      disabled></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="二级分类" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-input v-model="annualSaleGoalDetailsList[scope.$index].twoLevelClassify" placeholder="请输入二级分类"
+                      disabled></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="物料" align="center" width="220">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].material" title="物料"
+                      valueKey="name" referName="MATERIAL_PARAM"
+                      @change="setClassify(scope.row.oneLevelClassify, scope.row.twoLevelClassify, annualSaleGoalDetailsList[scope.$index])"
+                      :dataMapping="{ materialCode: 'code', material: 'name', oneLevelClassify: 'oneClass', twoLevelClassify: 'twoClass'}"
+                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入物料">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="合计（元）" align="center" prop="totalGoal" width="180">
+                  <template slot-scope="scope">
+                    <el-input v-model="annualSaleGoalDetailsList[scope.$index].totalGoal" disabled></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="一月（元）" align="center" prop="januaryGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].januaryGoal" :precision="2" :step="0.1" :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="二月（元）" align="center" prop="februaryGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].februaryGoal" :precision="2" :step="0.1"
+                      :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="三月（元）" align="center" prop="marchGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].marchGoal" :precision="2" :step="0.1" :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="四月（元）" align="center" prop="aprilGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].aprilGoal" :precision="2" :step="0.1" :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="五月（元）" align="center" prop="mayGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].mayGoal" :precision="2" :step="0.1" :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="六月（元）" align="center" prop="juneGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].juneGoal" :precision="2" :step="0.1" :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="七月（元）" align="center" prop="julyGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].julyGoal" :precision="2" :step="0.1" :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="八月（元）" align="center" prop="augustGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].augustGoal" :precision="2" :step="0.1" :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="九月（元）" align="center" prop="septemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].septemberGoal" :precision="2" :step="0.1"
+                      :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十月（元）" align="center" prop="octoberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].octoberGoal" :precision="2" :step="0.1" :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十一月（元）" align="center" prop="novemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].novemberGoal" :precision="2" :step="0.1"
+                      :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十二月（元）" align="center" prop="decemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
+                      v-model="annualSaleGoalDetailsList[scope.$index].decemberGoal" :precision="2" :step="0.1"
+                      :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px"
+                  fixed="right">
+                  <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-delete"
+                      @click="handleDeleteDetails(scope.$index, scope.row)">删除</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCopyDetails(scope.row)">复制
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+
+            </el-tab-pane>
+          </el-tabs>
+          <div slot="footer" class="dialog-footer" style="margin-left: 88%; margin-top: 1%">
+            <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
+            <el-button @click="cancel" size="medium">返 回</el-button>
+          </div>
+        </div>
+      </el-form>
+    </el-drawer>
+    <!-- 批量修改对话框-->
+    <el-dialog title="批量修改" width="30%" :visible.sync="dialogUpdateMore.dialogFormVisible" append-to-body
+      @closed="resetDialogUpdateMore">
+      <el-form>
+        <el-form-item label="修改项" label-width="100px">
+          <el-select @change="changeDialogData" v-model="dialogUpdateMore.updateName" placeholder="请选择需要批量修改的字段">
+            <el-option v-for="item in dialogUpdateMore.optionList" :key="item.value" :label="item.label"
+              :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="修改值" label-width="100px">
+          <el-popover-select-v2 v-if="dialogUpdateMore.updateName === 1" v-model="dialogUpdateMore.updateData"
+            title="销售组织" valueKey="name" referName="ORG_PARAM" :dataMapping="{updateData: 'name'}"
+            :source.sync="dialogUpdateMore" placeholder="请输入销售组织">
+          </el-popover-select-v2>
+          <el-popover-select-v2 v-else-if="dialogUpdateMore.updateName === 2" v-model="dialogUpdateMore.updateData"
+            title="销售区域" valueKey="name" referName="MK_SALESAREA_PARAM" :dataMapping="{updateData: 'name'}"
+            :source.sync="dialogUpdateMore" placeholder="请输入销售区域">
+          </el-popover-select-v2>
+          <el-popover-select-v2 v-else-if="dialogUpdateMore.updateName === 3" v-model="dialogUpdateMore.updateData"
+            title="客户" valueKey="name" referName="CUSTOMER_PARAM" :dataMapping="{updateData: 'name'}"
+            :source.sync="dialogUpdateMore" placeholder="请输入客户">
+          </el-popover-select-v2>
+          <el-popover-select-v2 v-else-if="dialogUpdateMore.updateName === 4" v-model="dialogUpdateMore.updateData"
+            title="制单人" valueKey="name" referName="CONTACTS_PARAM" :dataMapping="{updateData: 'name'}"
+            :source.sync="dialogUpdateMore" placeholder="请输入制单人">
+          </el-popover-select-v2>
+          <el-input v-else placeholder="请输入修改项" disabled></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogUpdateMoreSave">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    listAnnualSaleGoal,
+    getAnnualSaleGoal,
+    delAnnualSaleGoal,
+    addAnnualSaleGoal,
+    updateAnnualSaleGoal,
+    submit,
+    resubmit,
+  } from "@/api/business/spd/goal_management/annualSaleGoal";
+  import {
+    delAnnualSaleGoalDetails,
+    getAnnualSaleGoalDetails,
+    importData
+  } from "@/api/business/spd/goal_management/annualSaleGoalDetails"
+  import {
+    getToken
+  } from "@/utils/auth";
+  import {
+    getSummary
+  } from "@/api/business/spd/goal_management/commonWays";
+  import {
+    rollBack
+  } from "@/api/business/spd/goal_management/publicInterface";
+
+  // 树形参照
+  import TreeRefers from '@/components/Refers/treeRefer.vue'
+  import ElPopoverSelectV2 from "@/components/popover-select-v2"
+
+  export default {
+    name: "AnnualSaleGoal",
+    dicts: ["sys_status", "oa_templete_id"],
+    components: {
+      TreeRefers,
+      ElPopoverSelectV2
+    },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: false,
+        // 总条数
+        total: 0,
+        // 年度销售目标表格数据
+        annualSaleGoalList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          code: null,
+          goalName: null,
+          documentDate: null,
+          annual: null,
+          customCode: null,
+          custom: null,
+          saleZoneCode: null,
+          saleZone: null,
+          creatorCode: null,
+          creator: null,
+          deptId: null,
+          dept: null,
+          goalTotal: null,
+          notes: null,
+          status: null,
+          delFlag: null,
+          documentDateRange: null
+        },
+        pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        // 表单参数
+        form: {
+          id: null,
+          code: null,
+          goalName: null,
+          documentDate: null,
+          annual: null,
+          customCode: null,
+          custom: null,
+          saleZoneCode: null,
+          saleZone: null,
+          creatorCode: null,
+          creator: null,
+          deptId: null,
+          dept: null,
+          goalTotal: null,
+          notes: null,
+          status: '开立态',
+          deleteStatus: 0,
+          annualGoalMergeDetails: []
+        },
+        formDetails: {
+          id: null,
+          code: null,
+          saleOrg: null,
+          saleZone: null,
+          custom: null,
+          creator: null,
+          oneLevelClassifyCode: null,
+          oneLevelClassify: null,
+          twoLevelClassifyCode: null,
+          twoLevelClassify: null,
+          materialCode: null,
+          material: null,
+          totalGoal: null,
+          januaryGoal: null,
+          februaryGoal: null,
+          marchGoal: null,
+          aprilGoal: null,
+          mayGoal: null,
+          juneGoal: null,
+          julyGoal: null,
+          augustGoal: null,
+          septemberGoal: null,
+          octoberGoal: null,
+          novemberGoal: null,
+          decemberGoal: null
+        },
+        // 表单校验
+        rules: {
+          documentDate: [{
+            required: true,
+            message: '单据日期不能为空',
+            trigger: 'blur'
+          }],
+          annual: [{
+            required: true,
+            message: '年度不能为空',
+            trigger: 'blur'
+          }],
+          custom: [{
+            required: true,
+            message: '客户不能为空',
+            trigger: 'blur'
+          }],
+          saleZone: [{
+            required: true,
+            message: '销售区域不能为空',
+            trigger: 'blur'
+          }],
+          creator: [{
+            required: true,
+            message: '制单人不能为空',
+            trigger: 'blur'
+          }],
+          dept: [{
+            required: true,
+            message: '部门不能为空',
+            trigger: 'blur'
+          }]
+        },
+        // 子表数组
+        annualSaleGoalDetailsList: [],
+        // 用户导入参数
+        upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: {
+            Authorization: "Bearer " + getToken()
+          },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/goal_management/annualSaleGoal/importData"
+        },
+        activeName: 'annualSaleGoalDetails',
+        dialogUpdateMore: {
+          updateName: null,
+          dialogFormVisible: false,
+          updateData: null,
+          optionList: [{
+            value: 1,
+            label: '销售组织'
+          }, {
+            value: 2,
+            label: '销售区域'
+          }, {
+            value: 3,
+            label: '客户'
+          }, {
+            value: 4,
+            label: '制单人'
+          }, ]
+        },
+        //打开状态
+        openStatus: null,
+      };
+    },
+    created() {
+      console.log(this.$store.state.user, 'this.$store.state.user')
+      this.getList();
+    },
+    methods: {
+      /** 查询年度销售目标列表 */
+      getList() {
+        this.loading = true;
+        listAnnualSaleGoal(this.queryParams).then(response => {
+          this.annualSaleGoalList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+          this.annualSaleGoalList.forEach(item => {
+            item.goalTotal = item.goalTotal.toFixed(2);
+          })
+          console.log(this.annualSaleGoalList);
+        });
+      },
+      getListDetails() {
+        this.loading = true
+        getAnnualSaleGoalDetails(this.form.id).then(response => {
+          this.annualSaleGoalDetailsList = response.data
+          this.computeTotal()
+          this.form.annualGoalMergeDetails = this.annualSaleGoalDetailsList
+          updateAnnualSaleGoal(this.form).then(response => {})
+          this.loading = false
+        })
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          code: null,
+          goalName: null,
+          documentDate: null,
+          annual: null,
+          customCode: null,
+          custom: null,
+          saleZoneCode: null,
+          saleZone: null,
+          creatorCode: null,
+          creator: null,
+          deptId: null,
+          dept: null,
+          goalTotal: null,
+          notes: null,
+          status: null,
+          deleteStatus: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 10,
+          code: null,
+          goalName: null,
+          documentDate: null,
+          annual: null,
+          customCode: null,
+          custom: null,
+          saleZoneCode: null,
+          saleZone: null,
+          creatorCode: null,
+          creator: null,
+          deptId: null,
+          dept: null,
+          goalTotal: null,
+          notes: null,
+          status: null,
+          delFlag: null,
+          documentDateRange: null
+        }
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.openStatus = 'edit';
+        this.reset();
+        this.title = "添加--年度销售目标";
+        this.annualSaleGoalDetailsList = []
+        this.open = true;
+        this.form.documentDate = new Date().getFullYear().toString() + '-' + (new Date().getMonth() + 1).toString()
+          .padStart(2, '0') + '-' + new Date().getDate().toString().padStart(2, '0')
+        this.form.annual = new Date().getFullYear().toString()
+        this.form.creatorCode = this.$store.state.user.name
+        this.form.creator = this.$store.state.user.nickName
+        this.form.deptId = this.$store.state.user.deptId
+        this.form.dept = this.$store.state.user.deptName
+      },
+      handleAddDetails() {
+        let list = {
+          id: null,
+          code: null,
+          saleOrg: this.$store.state.user.orgName,
+          saleZone: this.form.saleZone,
+          custom: this.form.custom,
+          creator: this.form.creator,
+          oneLevelClassifyCode: null,
+          oneLevelClassify: null,
+          twoLevelClassifyCode: null,
+          twoLevelClassify: null,
+          materialCode: null,
+          material: null,
+          totalGoal: '0.00',
+          januaryGoal: null,
+          februaryGoal: null,
+          marchGoal: null,
+          aprilGoal: null,
+          mayGoal: null,
+          juneGoal: null,
+          julyGoal: null,
+          augustGoal: null,
+          septemberGoal: null,
+          octoberGoal: null,
+          novemberGoal: null,
+          decemberGoal: null
+        }
+        this.annualSaleGoalDetailsList.push(list)
+        this.computeTotal()
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.openStatus = 'edit';
+        this.reset();
+        const id = row.id || this.ids
+        getAnnualSaleGoal(id).then(response => {
+          this.form = response.data;
+          this.saveFormTwoPoint(this.form)
+          this.annualSaleGoalDetailsList = this.form.annualGoalMergeDetails
+          this.open = true;
+          this.title = "修改--年销售目标填报";
+        });
+      },
+      // 复制按钮
+      handleCopy(id) {
+        this.openStatus = 'edit';
+        this.reset();
+        getAnnualSaleGoal(id).then(response => {
+          console.log(response);
+          this.form = response.data;
+          this.form.id = null
+          this.form.code = null
+          this.form.documentDate = new Date().getFullYear().toString() + '-' + (new Date().getMonth() + 1)
+            .toString().padStart(2, '0') + '-' + new Date().getDate().toString().padStart(2, '0')
+          this.form.annual = new Date().getFullYear().toString()
+          this.saveFormTwoPoint(this.form)
+          this.annualSaleGoalDetailsList = JSON.parse(JSON.stringify(this.form.annualGoalMergeDetails))
+          for (const element of this.annualSaleGoalDetailsList) {
+            element.id = null
+            element.code = null
+          }
+          this.open = true;
+          this.title = "新增--年度销售目标";
+          console.log(this.form);
+        })
+      },
+      // 进入修改复制界面保留两位小数
+      saveFormTwoPoint(form) {
+        form.goalTotal = form.goalTotal.toFixed(2)
+        for (const element of form.annualGoalMergeDetails) {
+          element.totalGoal = element.totalGoal.toFixed(2)
+        }
+      },
+      /** 提交按钮 */
+      submitForm() {
+        // 明细行赋值
+        for (let i = 0; i < this.annualSaleGoalDetailsList.length; i++) {
+          this.annualSaleGoalDetailsList[i].saleOrg = this.$store.state.user.orgName;
+          this.annualSaleGoalDetailsList[i].saleZone = this.form.saleZone;
+          this.annualSaleGoalDetailsList[i].custom = this.form.custom;
+          this.annualSaleGoalDetailsList[i].creator = this.form.creator;
+        }
+        if (this.justiceDetailsList()) {
+          return this.$message.error('子表有必填字段未填，或者目标值为0')
+        }
+        for (let i = 0; i < this.annualSaleGoalDetailsList.length; i++) {
+          for (let j = i + 1; j < this.annualSaleGoalDetailsList.length; j++) {
+            if (this.annualSaleGoalDetailsList[i].materialCode == this.annualSaleGoalDetailsList[j].materialCode &&
+              this.annualSaleGoalDetailsList[i].materialCode != null &&
+              this.annualSaleGoalDetailsList[j].materialCode != null &&
+              this.annualSaleGoalDetailsList[i].materialCode != "" &&
+              this.annualSaleGoalDetailsList[j].materialCode != "") {
+              return this.$message.error('子表存在重复物料');
+            }
+          }
+        }
+        this.annualSaleGoalDetailsList.forEach(item => {
+          if (item.oneLevelClassify == null || item.oneLevelClassify == "") {
+            item.oneLevelClassifyCode = null;
+          }
+          if (item.twoLevelClassify == null || item.twoLevelClassify == "") {
+            item.twoLevelClassifyCode = null;
+          }
+        })
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              this.form.annualGoalMergeDetails = JSON.parse(JSON.stringify(this.annualSaleGoalDetailsList))
+              updateAnnualSaleGoal(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              this.form.status = '0'
+              this.form.annualGoalMergeDetails = JSON.parse(JSON.stringify(this.annualSaleGoalDetailsList))
+              console.log(this.form);
+              addAnnualSaleGoal(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$modal.confirm('是否确认删除年销售目标填报单据编号为"' + row.code + '"的数据项？').then(function () {
+          return delAnnualSaleGoal(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      },
+      handleDeleteDetails(index, row) {
+        if (this.form.id === null) {
+          this.annualSaleGoalDetailsList.splice(index, 1)
+          this.computeTotal()
+        } else {
+          if (row.id !== null) {
+            this.$modal.confirm('是否确认删除年度销售目标明细序号为"' + (index + 1) + '"的数据项？').then(function () {
+              return delAnnualSaleGoalDetails(row.id)
+            }).then(() => {
+              this.getListDetails()
+              this.$modal.msgSuccess('删除成功')
+            }).catch(() => {})
+          } else {
+            this.annualSaleGoalDetailsList.splice(index, 1)
+            this.$message.success('删除成功')
+            this.computeTotal()
+          }
+        }
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download('goal_management/annualSaleGoal/export', {
+          ...this.queryParams
+        }, `annualSaleGoal_${new Date().getTime()}.xlsx`)
+      },
+      handleExportDetails() {
+        this.download('goal_management/annualSaleGoalDetails/export', {
+          ...this.queryParams
+        }, `annualSaleGoalMerge_${new Date().getTime()}.xlsx`)
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+            this.reset()
+          })
+          .catch(_ => {});
+      },
+      // 复制明细
+      handleCopyDetails(row) {
+        let list = {
+          id: null,
+          code: row.code,
+          saleOrg: row.saleOrg,
+          saleZone: row.saleZone,
+          custom: row.custom,
+          creator: row.creator,
+          oneLevelClassifyCode: row.oneLevelClassifyCode,
+          oneLevelClassify: row.oneLevelClassify,
+          twoLevelClassifyCode: row.oneLevelClassifyCode,
+          twoLevelClassify: row.twoLevelClassify,
+          materialCode: row.materialCode,
+          material: row.material,
+          totalGoal: row.totalGoal,
+          januaryGoal: row.januaryGoal,
+          februaryGoal: row.februaryGoal,
+          marchGoal: row.marchGoal,
+          aprilGoal: row.aprilGoal,
+          mayGoal: row.mayGoal,
+          juneGoal: row.juneGoal,
+          julyGoal: row.julyGoal,
+          augustGoal: row.augustGoal,
+          septemberGoal: row.septemberGoal,
+          octoberGoal: row.octoberGoal,
+          novemberGoal: row.novemberGoal,
+          decemberGoal: row.decemberGoal
+        }
+        this.annualSaleGoalDetailsList.push(list)
+        this.computeTotal()
+      },
+      // 计算子表合计
+      computeTotalDetails(index, row) {
+        let array = [row.januaryGoal, row.februaryGoal, row.marchGoal, row.aprilGoal, row.mayGoal, row.juneGoal, row
+          .julyGoal, row.augustGoal, row.septemberGoal, row.octoberGoal, row.novemberGoal, row.decemberGoal
+        ]
+        let sum = 0
+        for (const element of array) {
+          sum = (sum * 1000000 + element * 1000000) / 1000000
+        }
+        this.annualSaleGoalDetailsList[index].totalGoal = sum.toFixed(2)
+        this.computeTotal()
+      },
+      // 计算主表合计
+      computeTotal() {
+        let list = this.annualSaleGoalDetailsList
+        let sum = 0
+        for (const listElement of list) {
+          sum = (sum * 1000000 + listElement.totalGoal * 1000000) / 1000000
+        }
+        this.form.goalTotal = sum.toFixed(2)
+      },
+      getSummaries(param) {
+        return getSummary(param)
+      },
+      // 给table添加必填项
+      addRedStar(h, {
+        column
+      }, required) {
+        if (required === '0') {
+          return [
+            h('span', {
+              style: 'color: #F56C6C'
+            }, '*'),
+            h('span', '' + column.label)
+          ]
+        } else {
+          return [
+            // h('span', { style: 'color: #F56C6C' }, '*'),
+            h('span', '' + column.label)
+          ]
+        }
+      },
+      // 判断子表的字段是否都填了
+      justiceDetailsList() {
+        let isFlag = [];
+        const arr = JSON.parse(JSON.stringify(this.annualSaleGoalDetailsList))
+        for (const element of arr) {
+          const flag1 = (element.saleZone !== null) && (element.saleOrg !== null) && (element.custom !== null) && (
+            element.creator !== null) && (element.goalValue !== 0)
+          const flag2 = (element.saleOrg !== undefined) && (element.saleZone !== undefined) && (element.custom !==
+            undefined) && (element.creator !== undefined)
+          if (flag1 && flag2) {
+            isFlag.push(true);
+          } else {
+            isFlag.push(false);
+          }
+        }
+        for (const flag of isFlag) {
+          if (!flag) {
+            return true;
+          }
+        }
+      },
+      handleCommand(command) {
+        // 执行对应的功能
+        if (command === 'export') {
+          console.log('导出主表');
+          this.handleExport()
+        } else if (command === 'exportDetails') {
+          console.log('导出明细');
+          this.handleExportDetails()
+        }
+      },
+      // 选择物料后，给一级分类和二级分类复赋值
+      setClassify(one, two, obj) {
+        const oneArray = one.split("&")
+        const twoArray = two.split("&")
+        obj.oneLevelClassifyCode = oneArray[1]
+        obj.oneLevelClassify = oneArray[0]
+        obj.twoLevelClassifyCode = twoArray[1]
+        obj.twoLevelClassify = twoArray[0]
+        console.log(obj, 'obj');
+      },
+      // 批量修改对话框的方法
+      dialogUpdateMoreSave() {
+        console.log(this.dialogUpdateMore);
+        if (this.dialogUpdateMore.updateData === null) {
+          return this.$message.error('请输入修改值')
+        }
+        const array = JSON.parse(JSON.stringify(this.annualSaleGoalDetailsList))
+        if (array.length !== 0) {
+          let condition = this.dialogUpdateMore.updateName
+          for (const element of array) {
+            if (condition === 1) {
+              element.saleOrg = JSON.parse(JSON.stringify(this.dialogUpdateMore.updateData))
+            } else if (condition === 2) {
+              element.saleZone = JSON.parse(JSON.stringify(this.dialogUpdateMore.updateData))
+            } else if (condition === 3) {
+              element.custom = JSON.parse(JSON.stringify(this.dialogUpdateMore.updateData))
+            } else if (condition === 4) {
+              element.creator = JSON.parse(JSON.stringify(this.dialogUpdateMore.updateData))
+            }
+          }
+        }
+        this.annualSaleGoalDetailsList = array
+        this.dialogUpdateMore.dialogFormVisible = !this.dialogUpdateMore.dialogFormVisible
+        this.dialogUpdateMore.updateData = null
+        this.dialogUpdateMore.updateName = null
+      },
+      changeDialogData() {
+        this.dialogUpdateMore.updateData = null
+      },
+      resetDialogUpdateMore() {
+        this.dialogUpdateMore.updateName = null
+        this.dialogUpdateMore.updateData = null
+      },
+      //提交
+      async handleSubmit(row) {
+        this.$modal.loading("提交中...");
+        try {
+          const {
+            msg,
+            code
+          } = await submit(row.id);
+          if (code === 200) {
+            this.$modal.notifySuccess("提交成功");
+            this.$modal.closeLoading();
+            row.status = '1';
+          }
+        } catch (err) {
+          console.error(err);
+          this.$modal.closeLoading();
+        }
+      },
+      //重新提交
+      async handleResubmit(row) {
+        this.$modal.loading("提交中...");
+        try {
+          const {
+            msg,
+            code
+          } = await resubmit(row.id);
+          if (code === 200) {
+            this.$modal.notifySuccess("提交成功");
+            this.$modal.closeLoading();
+          }
+        } catch (err) {
+          console.error(err);
+          this.$modal.closeLoading();
+        }
+      },
+      //收回
+      handleReback(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,
+          type: "1"
+        }
+        rollBack(params).then(res => {
+          if (res.code === 200) {
+            this.$modal.notifySuccess("收回成功");
+            this.$modal.closeLoading();
+            this.getList(this.queryParams)
+          }
+        }).catch(err => {
+          this.$message.error(err);
+          this.$modal.closeLoading();
+        })
+      },
+      //模板下载
+      handleTemplateDownload() {
+        this.download('/goal_management/annualSaleGoalDetails/importTemplate', {},
+          `年销售目标填报明细导入模板_${new Date().getTime()}.xlsx`)
+      },
+      //导入
+      handleImport(file) {
+        this.loading = true;
+        let formData = new FormData()
+        formData.append('file', file.file)
+        importData(formData).then((res) => {
+          console.log('res', res);
+          if (res.code == '200') {
+            this.annualSaleGoalDetailsList.push.apply(this.annualSaleGoalDetailsList, res.data);
+            this.$message.success(res.msg);
+          } else {
+            this.$message.success(res.msg);
+          }
+          this.loading = false;
+        }).catch((e) => {
+          this.$message.error(e.message)
+        }).finally((e) => {
+          this.$refs['upload'].clearFiles();
+          this.loading = false;
+        })
+      },
+      //双击行
+      useDoubleClick(row) {
+        this.openStatus = 'see';
+        this.reset();
+        const id = row.id || this.ids
+        getAnnualSaleGoal(id).then(response => {
+          this.form = response.data;
+          this.saveFormTwoPoint(this.form)
+          this.annualSaleGoalDetailsList = this.form.annualGoalMergeDetails
+          this.open = true;
+          this.title = "查看--年度销售目标";
+        });
+      },
+    },
+  }
+
+</script>

src/views/business/spd/target/AnnualSaleGoal.vue

@@ -1,1266 +1,292 @@
+<!-- 年度销售目标填报 -->
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="100px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="编码" prop="code">
-            <el-input v-model="queryParams.code" placeholder="请输入编码" clearable @keyup.enter.native="handleQuery" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="目标名称" prop="goalName">
-            <el-input v-model="queryParams.goalName" placeholder="请输入年度销售目标名称" clearable
-              @keyup.enter.native="handleQuery" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="单据日期" prop="documentDate">
-            <el-date-picker v-model="queryParams.documentDateRange" type="daterange" value-format="yyyy-MM-dd"
-              align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择单据日期"
-              :picker-options="pickerOptions">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            <el-tooltip class="item" effect="dark" :content="showSearch?'隐藏搜索':'显示搜索'" placement="top">
-              <el-button type="warning" :icon="showSearch?'el-icon-caret-top':'el-icon-caret-bottom'" circle
-                @click="showSearch = !showSearch"></el-button>
-            </el-tooltip>
-          </el-form-item>
-        </el-col>
-      </el-row>
+  <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-form>
-    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="100px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="年度" prop="annual">
-            <el-date-picker v-model="queryParams.annual" type="year" value-format="yyyy" placeholder="选择年度" clearable
-              @keyup.enter.native="handleQuery">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="客户" prop="custom" v-if="isDept">
-            <el-popover-tree-select v-model="queryParams.custom" valueKey='name' title="客户" referName="PROFITCENTER"
-              :dataMapping="{ customCode: 'code', custom: 'name'}" :source.sync="queryParams" placeholder="请输入客户"
-              @keyup.enter.native="handleQuery">
-            </el-popover-tree-select>
-          </el-form-item>
-          <el-form-item label="客户" prop="custom" v-if="!isDept">
-            <el-popover-select-v2 v-model="queryParams.custom" title="客户" valueKey="name" referName="CUSTOMER_PARAM"
-              :dataMapping="{ customCode: 'code', custom: 'name'}" :source.sync="queryParams" placeholder="请输入客户"
-              @keyup.enter.native="handleQuery">
-            </el-popover-select-v2>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="销售区域" prop="saleZone">
-            <el-popover-select-v2 v-model="queryParams.saleZone" title="销售区域" valueKey="name"
-              referName="MK_SALESAREA_PARAM" :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
-              :source.sync="queryParams" placeholder="请输入销售区域" @keyup.enter.native="handleQuery">
-            </el-popover-select-v2>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="制单人" prop="creator">
-            <el-popover-select-v2 v-model="queryParams.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
-              :dataMapping="{ creatorCode: 'code', creator: 'name'}" :source.sync="queryParams" placeholder="请输入制单人"
-              @keyup.enter.native="handleQuery">
-            </el-popover-select-v2>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="部门" prop="dept">
-            <el-popover-select-v2 v-model="queryParams.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
-              :dataMapping="{ deptId: 'id', dept: 'name'}" :source.sync="queryParams" placeholder="请输入部门"
-              @keyup.enter.native="handleQuery">
-            </el-popover-select-v2>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <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-row>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8" style="float: right">
+    <el-row
+      :gutter="10"
+      class="mb10"
+      type="flex"
+      justify="end"
+      style="margin-top: 20px"
+    >
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
+        <el-button type="primary" :size="size" @click="handleAdd"
+          >新 增
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-dropdown @command="handleCommand">
-          <el-button type="warning" plain icon="el-icon-download" size="mini">
-            导出<i class="el-icon-arrow-down el-icon--right"></i>
+          <el-button :size="size">
+            导 出<i class="el-icon-arrow-down el-icon--right"></i>
           </el-button>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="export">导出</el-dropdown-item>
-            <el-dropdown-item command="exportDetails">导出明细</el-dropdown-item>
+            <el-dropdown-item command="exportDetails"
+              >导出明细</el-dropdown-item
+            >
           </el-dropdown-menu>
         </el-dropdown>
       </el-col>
     </el-row>
 
-    <el-table v-loading="loading" :data="annualSaleGoalList" @selection-change="handleSelectionChange"
-      @row-dblclick="useDoubleClick" v-horizontal-scroll max-height="560">
-      <el-table-column label="编码" align="center" prop="code" width="180" />
-      <el-table-column label="目标名称" align="center" prop="goalName" width="240" />
-      <el-table-column label="单据日期" align="center" prop="documentDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.documentDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="年度" align="center" prop="annual" width="100" />
-      <el-table-column label="客户" align="center" prop="custom" width="180" />
-      <el-table-column label="销售区域" align="center" prop="saleZone" width="180" />
-      <el-table-column label="制单人" align="center" prop="creator" width="180" />
-      <el-table-column label="部门" align="center" prop="dept" width="180" />
-      <el-table-column label="目标合计（元）" align="center" prop="goalTotal" width="180" />
-      <el-table-column label="备注" align="center" prop="notes" width="180" />
-      <el-table-column show-overflow-tooltip label="状态" align="center" width="100" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_status" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding" width="180" fixed="right">
+    <el-super-ux-table
+      v-model="tableData"
+      :size="size"
+      :dict="dict"
+      :page="page"
+      :columns="TableColumns"
+      index
+      pagination
+      convenitentOperation
+      highlight-current-row
+      storage-key="AnnualSaleGoalSuperTable"
+      @row-dblclick="useSee"
+      @pagination="getList(params, page)"
+      style="margin: 16px 0 0"
+    >
+      <ux-table-column fixed="right" title="操作" align="center" width="160">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="useDoubleClick(scope.row)">查看
+          <el-button :size="size" type="text" @click="useSee(scope.row)"
+            >查看
           </el-button>
-          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
-            @click="handleUpdate(scope.row)">修改
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            :size="size"
+            type="text"
+            @click="useEdit(scope.row)"
+            >修改
           </el-button>
-          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
-            @click="handleDelete(scope.row)">删除
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            :size="size"
+            type="text"
+            @click="useDelete(scope.row)"
+            >删除
           </el-button>
-          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
-            @click="handleSubmit(scope.row)">提交
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            :size="size"
+            type="text"
+            @click="useSubmit(scope.row)"
+            >提交
           </el-button>
-          <el-button v-if="scope.row.status == '1'" size="mini" type="text" @click="handleReback(scope.row)">收回
+          <el-button
+            v-if="scope.row.status == '1'"
+            :size="size"
+            type="text"
+            @click="useReback(scope.row)"
+            >收回
           </el-button>
         </template>
-      </el-table-column>
-    </el-table>
+      </ux-table-column>
+    </el-super-ux-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      :page-sizes="[10, 20, 50, 100]" @pagination="getList" />
-
-    <el-drawer :title="title" :visible.sync="open" direction="rtl" :before-close="handleClose" size="100%"
-      v-horizontal-scroll disabled>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="openStatus == 'see'" size="mini">
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-form-item label="编码" prop="code">
-              <el-input v-model="form.code" placeholder="编码后端自动生成" clearable disabled />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="目标名称" prop="goalName">
-              <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" clearable disabled />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="单据日期" prop="documentDate">
-              <el-date-picker v-model="form.documentDate" type="date" format="yyyy-MM-dd" placeholder="选择日期">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="年度" prop="annual">
-              <el-date-picker v-model="form.annual" type="year" value-format="yyyy" placeholder="选择年度"></el-date-picker>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-form-item label="客户" prop="custom" v-if="isDept">
-              <el-popover-tree-select v-model="form.custom" valueKey='name' title="客户" referName="PROFITCENTER"
-                :dataMapping="{ customCode: 'code', custom: 'name'}" :source.sync="form" placeholder="请输入客户">
-              </el-popover-tree-select>
-            </el-form-item>
-            <el-form-item label="客户" prop="custom" v-if="!isDept">
-              <el-popover-select-v2 v-model="form.custom" title="客户" valueKey="name" referName="CUSTOMER_PARAM"
-                :dataMapping="{ customCode: 'code', custom: 'name'}" :source.sync="form" placeholder="请输入客户">
-              </el-popover-select-v2>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="销售区域" prop="saleZone">
-              <el-popover-select-v2 v-model="form.saleZone" title="销售区域" valueKey="name" referName="MK_SALESAREA_PARAM"
-                :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}" :source.sync="form" placeholder="请输入销售区域">
-              </el-popover-select-v2>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="制单人" prop="creator">
-              <el-popover-select-v2 v-model="form.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
-                :dataMapping="{ creatorCode: 'code', creator: 'name'}" :source.sync="form" placeholder="请输入制单人">
-              </el-popover-select-v2>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="部门" prop="dept">
-              <el-popover-select-v2 v-model="form.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
-                :dataMapping="{ deptId: 'id', dept: 'name'}" :source.sync="form" placeholder="请输入部门">
-              </el-popover-select-v2>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-form-item label="目标合计（元）" prop="goalTotal" label-width="120px">
-              <el-input v-model="form.goalTotal" placeholder="目标合计自动计算" clearable disabled />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="备注" prop="notes">
-              <el-input v-model="form.notes" placeholder="请输入备注" clearable />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="单据状态" prop="type">
-              <el-select v-model="form.status" placeholder="" disabled>
-                <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-row>
-
-        <div id="addDetails">
-          <el-row :gutter="10" class="mb8" style="margin-left: 75%">
-            <el-col :span="1.5">
-              <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleTemplateDownload">模板下载
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-upload ref="upload" action="" :http-request="handleImport">
-                <el-button size="mini" type="primary">导入明细</el-button>
-              </el-upload>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddDetails">增行</el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button type="primary" plain icon="el-icon-edit-outline" size="mini"
-                @click="dialogUpdateMore.dialogFormVisible = true">批量修改</el-button>
-            </el-col>
-          </el-row>
-          <el-tabs v-model="activeName">
-            <el-tab-pane label="年销售目标填报明细" name="annualSaleGoalDetails">
-
-              <el-table max-height="560" show-summary :summary-method="getSummaries" v-loading="loading" size="mini"
-                :data="annualSaleGoalDetailsList" @selection-change="handleSelectionChange" v-horizontal-scroll>
-                <el-table-column label="序号" type="index" width="70" align="center" fixed />
-                <!-- <el-table-column label="销售组织" align="center" width="180"
-                  :render-header="(h, obj) => addRedStar(h, obj, '0')">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].saleOrg" title="销售组织"
-                      valueKey="name" referName="ORG_PARAM" :dataMapping="{ saleOrgCode: 'code', saleOrg: 'name'}"
-                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入销售组织">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="销售区域" align="center" width="180"
-                  :render-header="(h, obj) => addRedStar(h, obj, '0')">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].saleZone" title="销售区域"
-                      valueKey="name" referName="MK_SALESAREA_PARAM"
-                      :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
-                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入销售区域">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="客户" align="center" width="180"
-                  :render-header="(h, obj) => addRedStar(h, obj, '0')">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].custom" title="客户"
-                      valueKey="name" referName="CUSTOMER_PARAM" :dataMapping="{ customCode: 'code', custom: 'name'}"
-                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入客户">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="负责人" align="center" width="180"
-                  :render-header="(h, obj) => addRedStar(h, obj, '0')">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].creator" title="负责人"
-                      valueKey="name" referName="CONTACTS_PARAM" :dataMapping="{ creatorCode: 'code', creator: 'name'}"
-                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入负责人">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column> -->
-                <el-table-column label="一级分类" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-input v-model="annualSaleGoalDetailsList[scope.$index].oneLevelClassify" placeholder="请输入一级分类"
-                      disabled></el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column label="二级分类" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-input v-model="annualSaleGoalDetailsList[scope.$index].twoLevelClassify" placeholder="请输入二级分类"
-                      disabled></el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column label="物料" align="center" width="220">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalDetailsList[scope.$index].material" title="物料"
-                      valueKey="name" referName="MATERIAL_PARAM"
-                      @change="setClassify(scope.row.oneLevelClassify, scope.row.twoLevelClassify, annualSaleGoalDetailsList[scope.$index])"
-                      :dataMapping="{ materialCode: 'code', material: 'name', oneLevelClassify: 'oneClass', twoLevelClassify: 'twoClass'}"
-                      :source.sync="annualSaleGoalDetailsList[scope.$index]" placeholder="请输入物料">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="合计（元）" align="center" prop="totalGoal" width="180">
-                  <template slot-scope="scope">
-                    <el-input v-model="annualSaleGoalDetailsList[scope.$index].totalGoal" disabled></el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column label="一月（元）" align="center" prop="januaryGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].januaryGoal" :precision="2" :step="0.1" :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="二月（元）" align="center" prop="februaryGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].februaryGoal" :precision="2" :step="0.1"
-                      :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="三月（元）" align="center" prop="marchGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].marchGoal" :precision="2" :step="0.1" :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="四月（元）" align="center" prop="aprilGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].aprilGoal" :precision="2" :step="0.1" :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="五月（元）" align="center" prop="mayGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].mayGoal" :precision="2" :step="0.1" :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="六月（元）" align="center" prop="juneGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].juneGoal" :precision="2" :step="0.1" :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="七月（元）" align="center" prop="julyGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].julyGoal" :precision="2" :step="0.1" :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="八月（元）" align="center" prop="augustGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].augustGoal" :precision="2" :step="0.1" :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="九月（元）" align="center" prop="septemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].septemberGoal" :precision="2" :step="0.1"
-                      :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十月（元）" align="center" prop="octoberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].octoberGoal" :precision="2" :step="0.1" :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十一月（元）" align="center" prop="novemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].novemberGoal" :precision="2" :step="0.1"
-                      :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十二月（元）" align="center" prop="decemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalDetailsList[scope.$index])"
-                      v-model="annualSaleGoalDetailsList[scope.$index].decemberGoal" :precision="2" :step="0.1"
-                      :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px"
-                  fixed="right">
-                  <template slot-scope="scope">
-                    <el-button size="mini" type="text" icon="el-icon-delete"
-                      @click="handleDeleteDetails(scope.$index, scope.row)">删除</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCopyDetails(scope.row)">复制
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-
-            </el-tab-pane>
-          </el-tabs>
-          <div slot="footer" class="dialog-footer" style="margin-left: 88%; margin-top: 1%">
-            <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
-            <el-button @click="cancel" size="medium">返 回</el-button>
-          </div>
-        </div>
-      </el-form>
-    </el-drawer>
-    <!-- 批量修改对话框-->
-    <el-dialog title="批量修改" width="30%" :visible.sync="dialogUpdateMore.dialogFormVisible" append-to-body
-      @closed="resetDialogUpdateMore">
-      <el-form>
-        <el-form-item label="修改项" label-width="100px">
-          <el-select @change="changeDialogData" v-model="dialogUpdateMore.updateName" placeholder="请选择需要批量修改的字段">
-            <el-option v-for="item in dialogUpdateMore.optionList" :key="item.value" :label="item.label"
-              :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="修改值" label-width="100px">
-          <el-popover-select-v2 v-if="dialogUpdateMore.updateName === 1" v-model="dialogUpdateMore.updateData"
-            title="销售组织" valueKey="name" referName="ORG_PARAM" :dataMapping="{updateData: 'name'}"
-            :source.sync="dialogUpdateMore" placeholder="请输入销售组织">
-          </el-popover-select-v2>
-          <el-popover-select-v2 v-else-if="dialogUpdateMore.updateName === 2" v-model="dialogUpdateMore.updateData"
-            title="销售区域" valueKey="name" referName="MK_SALESAREA_PARAM" :dataMapping="{updateData: 'name'}"
-            :source.sync="dialogUpdateMore" placeholder="请输入销售区域">
-          </el-popover-select-v2>
-          <el-popover-select-v2 v-else-if="dialogUpdateMore.updateName === 3" v-model="dialogUpdateMore.updateData"
-            title="客户" valueKey="name" referName="CUSTOMER_PARAM" :dataMapping="{updateData: 'name'}"
-            :source.sync="dialogUpdateMore" placeholder="请输入客户">
-          </el-popover-select-v2>
-          <el-popover-select-v2 v-else-if="dialogUpdateMore.updateName === 4" v-model="dialogUpdateMore.updateData"
-            title="制单人" valueKey="name" referName="CONTACTS_PARAM" :dataMapping="{updateData: 'name'}"
-            :source.sync="dialogUpdateMore" placeholder="请输入制单人">
-          </el-popover-select-v2>
-          <el-input v-else placeholder="请输入修改项" disabled></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogUpdateMoreSave">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
+    <annualSaleGoal-details
+      ref="AnnualSaleGoalDetails"
+      :dict="dict"
+      :size="size"
+      :addType="addType"
+      :data="rowDetails"
+      @refresh="getList(params, page)"
+    ></annualSaleGoal-details>
+  </el-card>
 </template>
 
 <script>
-  import {
-    listAnnualSaleGoal,
-    getAnnualSaleGoal,
-    delAnnualSaleGoal,
-    addAnnualSaleGoal,
-    updateAnnualSaleGoal,
-    submit,
-    resubmit,
-  } from "@/api/business/spd/goal_management/annualSaleGoal";
-  import {
-    delAnnualSaleGoalDetails,
-    getAnnualSaleGoalDetails,
-    importData
-  } from "@/api/business/spd/goal_management/annualSaleGoalDetails"
-  import {
-    getToken
-  } from "@/utils/auth";
-  import {
-    getSummary
-  } from "@/api/business/spd/goal_management/commonWays";
-  import {
-    rollBack
-  } from "@/api/business/spd/goal_management/publicInterface";
+import { dicts } from "./common/dicts";
+import useColumns from "./common/AnnualSaleGoal/columns";
+import {
+  listAnnualSaleGoal,
+  delAnnualSaleGoal,
+  submit,
+} from "@/api/business/spd/goal_management/annualSaleGoal";
 
-  // 树形参照
-  import TreeRefers from '@/components/Refers/treeRefer.vue'
-  import ElPopoverSelectV2 from "@/components/popover-select-v2"
-  import {
-    getDeptIds
-  } from "@/api/business/spd/goal_management/monthSaleGoalDetails"
+import { rollBack } from "@/api/business/spd/goal_management/publicInterface";
 
-  export default {
-    name: "AnnualSaleGoal",
-    dicts: ["sys_status", "oa_templete_id"],
-    components: {
-      TreeRefers,
-      ElPopoverSelectV2,
-      ElPopoverTreeSelect: () =>
-        import("@/components/popover-tree-select/index.vue"),
-    },
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: false,
-        // 总条数
-        total: 0,
-        // 年度销售目标表格数据
-        annualSaleGoalList: [],
-        // 弹出层标题
-        title: "",
-        // 是否显示弹出层
-        open: false,
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          code: null,
-          goalName: null,
-          documentDate: null,
-          annual: null,
-          customCode: null,
-          custom: null,
-          saleZoneCode: null,
-          saleZone: null,
-          creatorCode: null,
-          creator: null,
-          deptId: null,
-          dept: null,
-          goalTotal: null,
-          notes: null,
-          status: null,
-          delFlag: null,
-          documentDateRange: null
-        },
-        pickerOptions: {
-          shortcuts: [{
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        // 表单参数
-        form: {
-          id: null,
-          code: null,
-          goalName: null,
-          documentDate: null,
-          annual: null,
-          customCode: null,
-          custom: null,
-          saleZoneCode: null,
-          saleZone: null,
-          creatorCode: null,
-          creator: null,
-          deptId: null,
-          dept: null,
-          goalTotal: null,
-          notes: null,
-          status: '开立态',
-          deleteStatus: 0,
-          annualGoalMergeDetails: []
-        },
-        formDetails: {
-          id: null,
-          code: null,
-          saleOrg: null,
-          saleZone: null,
-          custom: null,
-          creator: null,
-          oneLevelClassifyCode: null,
-          oneLevelClassify: null,
-          twoLevelClassifyCode: null,
-          twoLevelClassify: null,
-          materialCode: null,
-          material: null,
-          totalGoal: null,
-          januaryGoal: null,
-          februaryGoal: null,
-          marchGoal: null,
-          aprilGoal: null,
-          mayGoal: null,
-          juneGoal: null,
-          julyGoal: null,
-          augustGoal: null,
-          septemberGoal: null,
-          octoberGoal: null,
-          novemberGoal: null,
-          decemberGoal: null
-        },
-        // 表单校验
-        rules: {
-          documentDate: [{
-            required: true,
-            message: '单据日期不能为空',
-            trigger: 'blur'
-          }],
-          annual: [{
-            required: true,
-            message: '年度不能为空',
-            trigger: 'blur'
-          }],
-          custom: [{
-            required: true,
-            message: '客户不能为空',
-            trigger: 'blur'
-          }],
-          saleZone: [{
-            required: true,
-            message: '销售区域不能为空',
-            trigger: 'blur'
-          }],
-          creator: [{
-            required: true,
-            message: '制单人不能为空',
-            trigger: 'blur'
-          }],
-          dept: [{
-            required: true,
-            message: '部门不能为空',
-            trigger: 'blur'
-          }]
-        },
-        // 子表数组
-        annualSaleGoalDetailsList: [],
-        // 用户导入参数
-        upload: {
-          // 是否显示弹出层（用户导入）
-          open: false,
-          // 弹出层标题（用户导入）
-          title: "",
-          // 是否禁用上传
-          isUploading: false,
-          // 是否更新已经存在的用户数据
-          updateSupport: 0,
-          // 设置上传的请求头部
-          headers: {
-            Authorization: "Bearer " + getToken()
-          },
-          // 上传的地址
-          url: process.env.VUE_APP_BASE_API + "/goal_management/annualSaleGoal/importData"
-        },
-        activeName: 'annualSaleGoalDetails',
-        dialogUpdateMore: {
-          updateName: null,
-          dialogFormVisible: false,
-          updateData: null,
-          optionList: [{
-            value: 1,
-            label: '销售组织'
-          }, {
-            value: 2,
-            label: '销售区域'
-          }, {
-            value: 3,
-            label: '客户'
-          }, {
-            value: 4,
-            label: '制单人'
-          }, ]
-        },
-        //打开状态
-        openStatus: null,
-        // 判断操作用户是否属于特殊部门的标志
-        isDept: false,
-      };
-    },
-    created() {
-      this.getList();
-      this.judge();
-    },
-    methods: {
-      /** 查询年度销售目标列表 */
-      getList() {
+export default {
+  name: "AnnualSaleGoal",
+  dicts: [...dicts, "oa_templete_id"],
+  components: {
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    AnnualSaleGoalDetails: () =>
+      import("./common/AnnualSaleGoal/details/index.vue"),
+  },
+  data() {
+    const { SearchColumns, TableColumns } = useColumns();
+    const params = this.$init.params(SearchColumns);
+    const page = this.$init.page();
+    return {
+      page,
+      params,
+      TableColumns,
+      SearchColumns,
+      size: "mini",
+      // 遮罩层
+      loading: false,
+      tableData: [],
+      rowDetails: {},
+      addType: "add",
+    };
+  },
+  created() {
+    this.getList(this.params, this.page);
+  },
+  methods: {
+    /** 查询年度销售目标列表 */
+    async getList(params, page) {
+      try {
         this.loading = true;
-        listAnnualSaleGoal(this.queryParams).then(response => {
-          this.annualSaleGoalList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-          this.annualSaleGoalList.forEach(item => {
-            item.goalTotal = item.goalTotal.toFixed(2);
-          })
-          console.log(this.annualSaleGoalList);
+        let { code, rows, total } = await listAnnualSaleGoal({
+          ...params,
+          ...page,
         });
-      },
-      getListDetails() {
-        this.loading = true
-        getAnnualSaleGoalDetails(this.form.id).then(response => {
-          this.annualSaleGoalDetailsList = response.data
-          this.computeTotal()
-          this.form.annualGoalMergeDetails = this.annualSaleGoalDetailsList
-          updateAnnualSaleGoal(this.form).then(response => {})
-          this.loading = false
-        })
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.form = {
-          id: null,
-          code: null,
-          goalName: null,
-          documentDate: null,
-          annual: null,
-          customCode: null,
-          custom: null,
-          saleZoneCode: null,
-          saleZone: null,
-          creatorCode: null,
-          creator: null,
-          deptId: null,
-          dept: null,
-          goalTotal: null,
-          notes: null,
-          status: null,
-          deleteStatus: null
-        };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.queryParams = {
-          pageNum: 1,
-          pageSize: 10,
-          code: null,
-          goalName: null,
-          documentDate: null,
-          annual: null,
-          customCode: null,
-          custom: null,
-          saleZoneCode: null,
-          saleZone: null,
-          creatorCode: null,
-          creator: null,
-          deptId: null,
-          dept: null,
-          goalTotal: null,
-          notes: null,
-          status: null,
-          delFlag: null,
-          documentDateRange: null
-        }
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map(item => item.id)
-        this.single = selection.length !== 1
-        this.multiple = !selection.length
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.openStatus = 'edit';
-        this.reset();
-        this.title = "添加--年度销售目标";
-        this.annualSaleGoalDetailsList = []
-        this.open = true;
-        this.form.documentDate = new Date().getFullYear().toString() + '-' + (new Date().getMonth() + 1).toString()
-          .padStart(2, '0') + '-' + new Date().getDate().toString().padStart(2, '0')
-        this.form.annual = new Date().getFullYear().toString()
-        this.form.creatorCode = this.$store.state.user.name
-        this.form.creator = this.$store.state.user.nickName
-        this.form.deptId = this.$store.state.user.deptId
-        this.form.dept = this.$store.state.user.deptName
-      },
-      handleAddDetails() {
-        let list = {
-          id: null,
-          code: null,
-          saleOrg: this.$store.state.user.orgName,
-          saleZone: this.form.saleZone,
-          custom: this.form.custom,
-          creator: this.form.creator,
-          oneLevelClassifyCode: null,
-          oneLevelClassify: null,
-          twoLevelClassifyCode: null,
-          twoLevelClassify: null,
-          materialCode: null,
-          material: null,
-          totalGoal: '0.00',
-          januaryGoal: null,
-          februaryGoal: null,
-          marchGoal: null,
-          aprilGoal: null,
-          mayGoal: null,
-          juneGoal: null,
-          julyGoal: null,
-          augustGoal: null,
-          septemberGoal: null,
-          octoberGoal: null,
-          novemberGoal: null,
-          decemberGoal: null
+        if (code == 200) {
+          this.tableData = rows;
+          this.page.total = total;
         }
-        this.annualSaleGoalDetailsList.push(list)
-        this.computeTotal()
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.openStatus = 'edit';
-        this.reset();
-        const id = row.id || this.ids
-        getAnnualSaleGoal(id).then(response => {
-          this.form = response.data;
-          this.saveFormTwoPoint(this.form)
-          this.annualSaleGoalDetailsList = this.form.annualGoalMergeDetails
-          this.open = true;
-          this.title = "修改--年销售目标填报";
-        });
-      },
-      // 复制按钮
-      handleCopy(id) {
-        this.openStatus = 'edit';
-        this.reset();
-        getAnnualSaleGoal(id).then(response => {
-          console.log(response);
-          this.form = response.data;
-          this.form.id = null
-          this.form.code = null
-          this.form.documentDate = new Date().getFullYear().toString() + '-' + (new Date().getMonth() + 1)
-            .toString().padStart(2, '0') + '-' + new Date().getDate().toString().padStart(2, '0')
-          this.form.annual = new Date().getFullYear().toString()
-          this.saveFormTwoPoint(this.form)
-          this.annualSaleGoalDetailsList = JSON.parse(JSON.stringify(this.form.annualGoalMergeDetails))
-          for (const element of this.annualSaleGoalDetailsList) {
-            element.id = null
-            element.code = null
-          }
-          this.open = true;
-          this.title = "新增--年度销售目标";
-          console.log(this.form);
-        })
-      },
-      // 进入修改复制界面保留两位小数
-      saveFormTwoPoint(form) {
-        form.goalTotal = form.goalTotal.toFixed(2)
-        for (const element of form.annualGoalMergeDetails) {
-          element.totalGoal = element.totalGoal.toFixed(2)
-        }
-      },
-      /** 提交按钮 */
-      submitForm() {
-        // 明细行赋值
-        for (let i = 0; i < this.annualSaleGoalDetailsList.length; i++) {
-          this.annualSaleGoalDetailsList[i].saleOrg = this.$store.state.user.orgName;
-          this.annualSaleGoalDetailsList[i].saleZone = this.form.saleZone;
-          this.annualSaleGoalDetailsList[i].custom = this.form.custom;
-          this.annualSaleGoalDetailsList[i].creator = this.form.creator;
-        }
-        if (this.justiceDetailsList()) {
-          return this.$message.error('子表有必填字段未填，或者目标值为0')
-        }
-        for (let i = 0; i < this.annualSaleGoalDetailsList.length; i++) {
-          for (let j = i + 1; j < this.annualSaleGoalDetailsList.length; j++) {
-            if (this.annualSaleGoalDetailsList[i].materialCode == this.annualSaleGoalDetailsList[j].materialCode &&
-              this.annualSaleGoalDetailsList[i].materialCode != null &&
-              this.annualSaleGoalDetailsList[j].materialCode != null &&
-              this.annualSaleGoalDetailsList[i].materialCode != "" &&
-              this.annualSaleGoalDetailsList[j].materialCode != "") {
-              return this.$message.error('子表存在重复物料');
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+    //
+    useReset() {
+      this.params = this.$init.params(this.SearchColumns);
+      this.page = this.$init.page();
+      this.getList(this.params, this.page);
+    },
+    //
+    useSee(row) {
+      this.addType = "see";
+      this.rowDetails = row;
+      const { setVisible } = this.$refs.AnnualSaleGoalDetails;
+      setVisible(true);
+    },
+    // 新增
+    handleAdd() {
+      this.addType = "add";
+      this.rowDetails = {};
+      const { setVisible } = this.$refs.AnnualSaleGoalDetails;
+      setVisible(true);
+    },
+    // 编辑
+    useEdit(row) {
+      this.addType = "edit";
+      this.rowDetails = row;
+      const { setVisible } = this.$refs.AnnualSaleGoalDetails;
+      setVisible(true);
+    },
+    // 删除
+    useDelete(row) {
+      const { id, code } = row;
+      this.$modal
+        .confirm('是否确认删除年销售目标填报单据编号为"' + code + '"的数据项？')
+        .then(async () => {
+          try {
+            let { code, msg } = await delAnnualSaleGoal(id);
+            if (code == 200) {
+              this.$notify.success(msg);
+              this.getList(this.params, this.page);
             }
-          }
-        }
-        this.annualSaleGoalDetailsList.forEach(item => {
-          if (item.oneLevelClassify == null || item.oneLevelClassify == "") {
-            item.oneLevelClassifyCode = null;
-          }
-          if (item.twoLevelClassify == null || item.twoLevelClassify == "") {
-            item.twoLevelClassifyCode = null;
-          }
+          } catch (error) {}
         })
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id != null) {
-              this.form.annualGoalMergeDetails = JSON.parse(JSON.stringify(this.annualSaleGoalDetailsList))
-              updateAnnualSaleGoal(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
-            } else {
-              this.form.status = '0'
-              this.form.annualGoalMergeDetails = JSON.parse(JSON.stringify(this.annualSaleGoalDetailsList))
-              console.log(this.form);
-              addAnnualSaleGoal(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
-            }
-          }
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除年销售目标填报单据编号为"' + row.code + '"的数据项？').then(function () {
-          return delAnnualSaleGoal(ids);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-      },
-      handleDeleteDetails(index, row) {
-        if (this.form.id === null) {
-          this.annualSaleGoalDetailsList.splice(index, 1)
-          this.computeTotal()
-        } else {
-          if (row.id !== null) {
-            this.$modal.confirm('是否确认删除年度销售目标明细序号为"' + (index + 1) + '"的数据项？').then(function () {
-              return delAnnualSaleGoalDetails(row.id)
-            }).then(() => {
-              this.getListDetails()
-              this.$modal.msgSuccess('删除成功')
-            }).catch(() => {})
-          } else {
-            this.annualSaleGoalDetailsList.splice(index, 1)
-            this.$message.success('删除成功')
-            this.computeTotal()
-          }
-        }
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        this.download('goal_management/annualSaleGoal/export', {
-          ...this.queryParams
-        }, `annualSaleGoal_${new Date().getTime()}.xlsx`)
-      },
-      handleExportDetails() {
-        this.download('goal_management/annualSaleGoalDetails/export', {
-          ...this.queryParams
-        }, `annualSaleGoalMerge_${new Date().getTime()}.xlsx`)
-      },
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-            this.reset()
-          })
-          .catch(_ => {});
-      },
-      // 复制明细
-      handleCopyDetails(row) {
-        let list = {
-          id: null,
-          code: row.code,
-          saleOrg: row.saleOrg,
-          saleZone: row.saleZone,
-          custom: row.custom,
-          creator: row.creator,
-          oneLevelClassifyCode: row.oneLevelClassifyCode,
-          oneLevelClassify: row.oneLevelClassify,
-          twoLevelClassifyCode: row.oneLevelClassifyCode,
-          twoLevelClassify: row.twoLevelClassify,
-          materialCode: row.materialCode,
-          material: row.material,
-          totalGoal: row.totalGoal,
-          januaryGoal: row.januaryGoal,
-          februaryGoal: row.februaryGoal,
-          marchGoal: row.marchGoal,
-          aprilGoal: row.aprilGoal,
-          mayGoal: row.mayGoal,
-          juneGoal: row.juneGoal,
-          julyGoal: row.julyGoal,
-          augustGoal: row.augustGoal,
-          septemberGoal: row.septemberGoal,
-          octoberGoal: row.octoberGoal,
-          novemberGoal: row.novemberGoal,
-          decemberGoal: row.decemberGoal
-        }
-        this.annualSaleGoalDetailsList.push(list)
-        this.computeTotal()
-      },
-      // 计算子表合计
-      computeTotalDetails(index, row) {
-        let array = [row.januaryGoal, row.februaryGoal, row.marchGoal, row.aprilGoal, row.mayGoal, row.juneGoal, row
-          .julyGoal, row.augustGoal, row.septemberGoal, row.octoberGoal, row.novemberGoal, row.decemberGoal
-        ]
-        let sum = 0
-        for (const element of array) {
-          sum = (sum * 1000000 + element * 1000000) / 1000000
-        }
-        this.annualSaleGoalDetailsList[index].totalGoal = sum.toFixed(2)
-        this.computeTotal()
-      },
-      // 计算主表合计
-      computeTotal() {
-        let list = this.annualSaleGoalDetailsList
-        let sum = 0
-        for (const listElement of list) {
-          sum = (sum * 1000000 + listElement.totalGoal * 1000000) / 1000000
-        }
-        this.form.goalTotal = sum.toFixed(2)
-      },
-      getSummaries(param) {
-        return getSummary(param)
-      },
-      // 给table添加必填项
-      addRedStar(h, {
-        column
-      }, required) {
-        if (required === '0') {
-          return [
-            h('span', {
-              style: 'color: #F56C6C'
-            }, '*'),
-            h('span', '' + column.label)
-          ]
-        } else {
-          return [
-            // h('span', { style: 'color: #F56C6C' }, '*'),
-            h('span', '' + column.label)
-          ]
-        }
-      },
-      // 判断子表的字段是否都填了
-      justiceDetailsList() {
-        let isFlag = [];
-        const arr = JSON.parse(JSON.stringify(this.annualSaleGoalDetailsList))
-        for (const element of arr) {
-          const flag1 = (element.saleZone !== null) && (element.saleOrg !== null) && (element.custom !== null) && (
-            element.creator !== null) && (element.goalValue !== 0)
-          const flag2 = (element.saleOrg !== undefined) && (element.saleZone !== undefined) && (element.custom !==
-            undefined) && (element.creator !== undefined)
-          if (flag1 && flag2) {
-            isFlag.push(true);
-          } else {
-            isFlag.push(false);
-          }
-        }
-        for (const flag of isFlag) {
-          if (!flag) {
-            return true;
-          }
-        }
-      },
-      handleCommand(command) {
-        // 执行对应的功能
-        if (command === 'export') {
-          console.log('导出主表');
-          this.handleExport()
-        } else if (command === 'exportDetails') {
-          console.log('导出明细');
-          this.handleExportDetails()
-        }
-      },
-      // 选择物料后，给一级分类和二级分类复赋值
-      setClassify(one, two, obj) {
-        const oneArray = one.split("&")
-        const twoArray = two.split("&")
-        obj.oneLevelClassifyCode = oneArray[1]
-        obj.oneLevelClassify = oneArray[0]
-        obj.twoLevelClassifyCode = twoArray[1]
-        obj.twoLevelClassify = twoArray[0]
-        console.log(obj, 'obj');
-      },
-      // 批量修改对话框的方法
-      dialogUpdateMoreSave() {
-        console.log(this.dialogUpdateMore);
-        if (this.dialogUpdateMore.updateData === null) {
-          return this.$message.error('请输入修改值')
-        }
-        const array = JSON.parse(JSON.stringify(this.annualSaleGoalDetailsList))
-        if (array.length !== 0) {
-          let condition = this.dialogUpdateMore.updateName
-          for (const element of array) {
-            if (condition === 1) {
-              element.saleOrg = JSON.parse(JSON.stringify(this.dialogUpdateMore.updateData))
-            } else if (condition === 2) {
-              element.saleZone = JSON.parse(JSON.stringify(this.dialogUpdateMore.updateData))
-            } else if (condition === 3) {
-              element.custom = JSON.parse(JSON.stringify(this.dialogUpdateMore.updateData))
-            } else if (condition === 4) {
-              element.creator = JSON.parse(JSON.stringify(this.dialogUpdateMore.updateData))
+        .catch(() => {});
+    },
+    // 提交
+    async useSubmit(row) {
+      this.$modal
+        .confirm("是否确认提交？")
+        .then(async () => {
+          try {
+            this.$modal.loading("处理中，请稍后...");
+            const { msg, code } = await submit(row.id);
+            if (code === 200) {
+              this.$modal.notifySuccess(msg);
+              row.status = "1";
             }
-          }
-        }
-        this.annualSaleGoalDetailsList = array
-        this.dialogUpdateMore.dialogFormVisible = !this.dialogUpdateMore.dialogFormVisible
-        this.dialogUpdateMore.updateData = null
-        this.dialogUpdateMore.updateName = null
-      },
-      changeDialogData() {
-        this.dialogUpdateMore.updateData = null
-      },
-      resetDialogUpdateMore() {
-        this.dialogUpdateMore.updateName = null
-        this.dialogUpdateMore.updateData = null
-      },
-      //提交
-      async handleSubmit(row) {
-        this.$modal.loading("提交中...");
-        try {
-          const {
-            msg,
-            code
-          } = await submit(row.id);
-          if (code === 200) {
-            this.$modal.notifySuccess("提交成功");
+          } catch (err) {
+            console.error(err);
+          } finally {
             this.$modal.closeLoading();
-            row.status = '1';
           }
-        } catch (err) {
-          console.error(err);
-          this.$modal.closeLoading();
-        }
-      },
-      //重新提交
-      async handleResubmit(row) {
-        this.$modal.loading("提交中...");
-        try {
-          const {
-            msg,
-            code
-          } = await resubmit(row.id);
-          if (code === 200) {
-            this.$modal.notifySuccess("提交成功");
-            this.$modal.closeLoading();
-            row.status = '1';
-          }
-        } catch (err) {
-          console.error(err);
-          this.$modal.closeLoading();
-        }
-      },
-      //收回
-      handleReback(row) {
-        this.$modal.loading("收回中...");
+        })
+        .catch(() => {});
+    },
+    // 收回
+    async useReback(row) {
+      try {
+        this.$modal.loading("处理中，请稍后...");
         let params = {
           billCode: row.code,
           fdId: row.flowId,
-          fdTemplateId: this.dict.type.oa_templete_id.find(item => {
-            return item.label == "销售目标"
+          fdTemplateId: this.dict.type.oa_templete_id.find((item) => {
+            return item.label == "销售目标";
           }).value,
           billMaker: row.createBy,
-          type: "1"
+          type: "1",
+        };
+        let { code, msg } = await rollBack(params);
+        if (code == 200) {
+          this.$modal.notifySuccess(msg);
+          this.getList(this.params, this.page);
         }
-        rollBack(params).then(res => {
-          if (res.code === 200) {
-            this.$modal.notifySuccess("收回成功");
-            this.$modal.closeLoading();
-            row.status = '0';
-          }
-        }).catch(err => {
-          this.$message.error(err);
-          this.$modal.closeLoading();
-        })
-      },
-      //模板下载
-      handleTemplateDownload() {
-        this.download('/goal_management/annualSaleGoalDetails/importTemplate', {},
-          `年销售目标填报明细导入模板_${new Date().getTime()}.xlsx`)
-      },
-      //导入
-      handleImport(file) {
-        this.loading = true;
-        let formData = new FormData()
-        formData.append('file', file.file)
-        importData(formData).then((res) => {
-          console.log('res', res);
-          if (res.code == '200') {
-            this.annualSaleGoalDetailsList.push.apply(this.annualSaleGoalDetailsList, res.data);
-            this.$message.success(res.msg);
-          } else {
-            this.$message.success(res.msg);
-          }
-          this.loading = false;
-        }).catch((e) => {
-          this.$message.error(e.message)
-        }).finally((e) => {
-          this.$refs['upload'].clearFiles();
-          this.loading = false;
-        })
-      },
-      //双击行
-      useDoubleClick(row) {
-        this.openStatus = 'see';
-        this.reset();
-        const id = row.id || this.ids
-        getAnnualSaleGoal(id).then(response => {
-          this.form = response.data;
-          this.saveFormTwoPoint(this.form)
-          this.annualSaleGoalDetailsList = this.form.annualGoalMergeDetails
-          this.open = true;
-          this.title = "查看--年度销售目标";
-        });
-      },
-      // 判断操作人部门是否属于湖南公司、湖南公司本部、基卫销售部
-      judge() {
-        let that = this;
-        that.isDept = false;
-        let data = '湖南公司';
-        getDeptIds(data).then(hunan => {
-          for (const h of hunan) {
-            if (that.$store.state.user.deptId === h) {
-              that.isDept = true;
-            }
-          }
-        })
-      },
+      } catch (error) {
+      } finally {
+        this.$modal.closeLoading();
+      }
     },
-  }
-
+    // 导出
+    handleCommand(command) {
+      if (command === "export") {
+        // 导出主表
+        this.download(
+          "goal_management/annualSaleGoal/export",
+          {
+            ...this.params,
+          },
+          `年度销售目标填报_${new Date().getTime()}.xlsx`
+        );
+      }
+      if (command === "exportDetails") {
+        // 导出明细
+        this.download(
+          "goal_management/annualSaleGoalDetails/export",
+          {
+            ...this.params,
+          },
+          `年度销售目标填报明细_${new Date().getTime()}.xlsx`
+        );
+      }
+    },
+  },
+};
 </script>
+
+<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;
+}
+</style>

src/views/business/spd/target/AnnualSaleGoalMerge copy.vue

@@ -0,0 +1,1600 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="编码" prop="code">
+            <el-input v-model="queryParams.code" placeholder="请输入编码" clearable @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="目标名称" prop="goalName">
+            <el-input v-model="queryParams.goalName" placeholder="请输入目标名称" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="单据日期" prop="documentDate">
+            <el-date-picker v-model="documentDateRange" type="daterange" value-format="yyyy-MM-dd"
+              @change="setBeginAndEnd" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+              placeholder="请选择单据日期" :picker-options="pickerOptions">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-tooltip class="item" effect="dark" :content="showSearch?'隐藏搜索':'显示搜索'" placement="top">
+              <el-button type="warning" :icon="showSearch?'el-icon-caret-top':'el-icon-caret-bottom'" circle
+                @click="showSearch = !showSearch"></el-button>
+            </el-tooltip>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="年度" prop="annual">
+            <el-date-picker v-model="queryParams.annual" type="year" value-format="yyyy" placeholder="选择年度" clearable
+              @keyup.enter.native="handleQuery">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="单据状态" prop="status">
+            <el-select 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="6">
+          <el-form-item label="制单人" prop="creator">
+            <el-popover-select-v2 v-model="queryParams.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
+              :dataMapping="{ creatorCode: 'code', creator: 'name'}" :source.sync="queryParams" placeholder="请输入负责人">
+            </el-popover-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="部门" prop="dept">
+            <el-popover-select-v2 v-model="queryParams.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
+              :dataMapping="{ deptId: 'id', dept: 'name'}" :source.sync="queryParams" placeholder="请输入部门"
+              @keyup.enter.native="handleQuery">
+            </el-popover-select-v2>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="目标类型" prop="goalCategory">
+            <el-select v-model="queryParams.goalCategory" placeholder="请输入目标类型">
+              <el-option
+                v-for="item in [{ value: '销售区域', label: '销售区域' }, { value: '一级分类', label: '一级分类' }, { value: '二级分类', label: '二级分类' }]"
+                :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item v-if="queryParams.goalCategory === '销售区域'" label="销售区域" prop="saleZone">
+            <el-popover-select-v2 v-model="queryParams.saleZoneCode" title="销售区域" valueKey="name"
+              referName="MK_SALESAREA_PARAM" :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
+              :source.sync="queryParams" placeholder="请输入销售区域">
+            </el-popover-select-v2>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item v-if="queryParams.goalCategory === '一级分类'" label="一级分类" prop="oneLevelClassify">
+            <el-select v-model="queryParams.oneLevelClassify" size="mini" clearable placeholder="请输入一级分类"
+              @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '一级物料分类')" style="width: 200px">
+              <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item v-if="queryParams.goalCategory === '二级分类'" label="二级分类" prop="twoLevelClassify">
+            <el-select v-model="queryParams.twoLevelClassify" size="mini" clearable placeholder="请输入二级分类"
+              @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '二级物料分类')" style="width: 200px">
+              <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8" style="float: right">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-dropdown @command="handleCommand">
+          <el-button type="warning" plain icon="el-icon-download" size="mini">
+            导出<i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="export">导出</el-dropdown-item>
+            <el-dropdown-item command="exportDetails">导出明细</el-dropdown-item>
+            <el-dropdown-item command="exportZoneSum">导出区域目标汇总</el-dropdown-item>
+            <el-dropdown-item command="exportCustomSum">导出客户目标汇总</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="annualSaleGoalMergeList" @selection-change="handleSelectionChange"
+      @row-dblclick="useDoubleClick" v-horizontal-scroll max-height="560">
+      <el-table-column label="编码" align="center" prop="code" width="180" />
+      <el-table-column label="目标名称" align="center" prop="goalName" width="240" />
+      <el-table-column label="单据日期" align="center" prop="documentDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.documentDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="年度" align="center" prop="annual" width="100" />
+      <el-table-column show-overflow-tooltip label="状态" align="center" width="100" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_status" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="制单人" align="center" prop="creator" width="180" />
+      <el-table-column label="部门" align="center" prop="dept" width="180" />
+      <el-table-column label="目标类型" align="center" prop="goalCategory" width="180" />
+      <el-table-column label="目标值汇总（元）" align="center" prop="goalTotal" width="180" />
+      <el-table-column label="销售区域" align="center" prop="saleZone" width="220" />
+      <el-table-column label="一级分类" align="center" prop="oneLevelClassify" width="180" />
+      <el-table-column label="二级分类" align="center" prop="twoLevelClassify" width="180" />
+      <el-table-column label="备注" align="center" prop="notes" width="180" />
+      <el-table-column label="操作" align="center" class-name="small-padding" width="180" fixed="right">
+        <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'" size="mini" type="text"
+            @click="handleUpdate(scope.row)">修改
+          </el-button>
+          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
+            @click="handleDelete(scope.row)">删除
+          </el-button>
+          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
+            @click="handleSubmit(scope.row)">提交</el-button>
+          <el-button v-if="scope.row.status == '1'" size="mini" type="text" @click="handleReback(scope.row)">收回
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      :page-sizes="[10, 20, 50, 100]" @pagination="getList" />
+
+    <!-- 添加或修改年度销售目标明细对话框 -->
+    <el-drawer :title="title" :visible.sync="open" direction="rtl" :before-close="handleClose" size="100%"
+      v-horizontal-scroll>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="openStatus == 'see'" size="mini">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="编码" prop="code">
+              <el-input v-model="form.code" placeholder="编码后端自动生成" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="目标名称" prop="goalName">
+              <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据日期" prop="documentDate">
+              <el-date-picker v-model="form.documentDate" type="date" placeholder="选择单据日期" value-format="yyyy-MM-dd">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="年度" prop="annual">
+              <el-date-picker v-model="form.annual" type="year" placeholder="选择年度" value-format="yyyy">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="制单人" prop="creator">
+              <el-popover-select-v2 v-model="form.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
+                :dataMapping="{ creatorCode: 'code', creator: 'name'}" :source.sync="form" placeholder="请输入制单人">
+              </el-popover-select-v2>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="部门" prop="dept">
+              <el-popover-select-v2 v-model="form.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
+                :dataMapping="{ deptId: 'id', dept: 'name'}" :source.sync="form" placeholder="请输入部门">
+              </el-popover-select-v2>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="目标分类" prop="goalCategory">
+              <el-select :disabled="this.openStatus == 'edit'" v-model="form.goalCategory" placeholder="请选择" @change="changeGoalCategoryForm">
+                <el-option v-for="item in goalCategoryList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="目标合计（元）" prop="goalTotal" label-width="120px">
+              <el-input v-model="form.goalTotal" placeholder="目标值汇总自动计算" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="备注" prop="notes">
+              <el-input v-model="form.notes" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item v-if="form.goalCategory === '销售区域'" label="销售区域" prop="saleZone">
+              <el-popover-select-v2 v-model="form.saleZone" title="销售区域" valueKey="name" referName="MK_SALESAREA_PARAM"
+                :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}" :source.sync="form" placeholder="请输入销售区域">
+              </el-popover-select-v2>
+            </el-form-item>
+            <el-form-item v-if="form.goalCategory === '一级分类'" label="一级分类" prop="oneLevelClassify">
+              <el-select v-model="form.oneLevelClassify" clearable
+                @focus="chooseTreeReferForMain('MATERIALCLASSIFY_PARAM', false, '一级物料分类')" style="width: 200px">
+                <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="form.goalCategory === '二级分类'" label="二级分类" prop="twoLevelClassify">
+              <el-select v-model="form.twoLevelClassify" clearable
+                @focus="chooseTreeReferForMain('MATERIALCLASSIFY_PARAM', false, '二级物料分类')" style="width: 200px">
+                <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据状态" prop="type">
+              <el-select v-model="form.status" placeholder="" disabled>
+                <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-row>
+        <div>
+          <el-row :gutter="10" class="mb8" style="margin-left: 94%">
+            <el-col :span="1.5">
+              <el-button type="primary" plain icon="el-icon-folder-opened" size="mini" @click="clickMerge">合 并
+              </el-button>
+            </el-col>
+          </el-row>
+          <el-tabs v-model="activeName" @tab-click="getNewTwoArray">
+            <el-tab-pane label="年销售目标合并明细" name="annualSaleGoalMergeDetails">
+              <el-table max-height="560" show-summary :summary-method="getSummaries" v-loading="loading" size="mini"
+                :data="annualSaleGoalMergeDetailsList" v-horizontal-scroll>
+                <el-table-column label="序号" type="index" width="70" align="center" fixed />
+                <el-table-column label="销售组织" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalMergeDetailsList[scope.$index].saleOrg" title="销售组织"
+                      valueKey="name" referName="ORG_PARAM" disabled :dataMapping="{saleOrg: 'name'}"
+                      :source.sync="annualSaleGoalMergeDetailsList[scope.$index]" placeholder="请输入销售组织">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="销售区域" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalMergeDetailsList[scope.$index].saleZone" title="销售区域"
+                      valueKey="name" referName="MK_SALESAREA_PARAM" disabled :dataMapping="{saleZone: 'name'}"
+                      :source.sync="annualSaleGoalMergeDetailsList[scope.$index]" placeholder="请输入销售区域">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="客户" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalMergeDetailsList[scope.$index].custom" title="客户"
+                      valueKey="name" referName="CUSTOMER_PARAM" disabled :dataMapping="{custom: 'name'}"
+                      :source.sync="annualSaleGoalMergeDetailsList[scope.$index]" placeholder="请输入客户">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="负责人" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="annualSaleGoalMergeDetailsList[scope.$index].creator" title="负责人"
+                      valueKey="name" referName="CONTACTS_PARAM" disabled :dataMapping="{creator: 'name'}"
+                      :source.sync="annualSaleGoalMergeDetailsList[scope.$index]" placeholder="请输入负责人">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="一级分类" align="center" width="220">
+                  <template slot-scope="scope">
+                    <el-select v-model="annualSaleGoalMergeDetailsList[scope.$index].oneLevelClassify" size="mini"
+                      clearable
+                      @focus="chooseTreeReferForDetails('MATERIALCLASSIFY_PARAM', false, '一级物料分类', scope.$index)"
+                      style="width: 200px" disabled>
+                      <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column label="二级分类" align="center" width="220">
+                  <template slot-scope="scope">
+                    <el-select v-model="annualSaleGoalMergeDetailsList[scope.$index].twoLevelClassify" size="mini"
+                      clearable
+                      @focus="chooseTreeReferForDetails('MATERIALCLASSIFY_PARAM', false, '二级物料分类', scope.$index)"
+                      style="width: 200px" disabled>
+                      <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column label="合计（元）" align="center" prop="totalGoal" width="180">
+                  <template slot-scope="scope">
+                    <el-input v-model="annualSaleGoalMergeDetailsList[scope.$index].totalGoal" disabled></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="一月（元）" align="center" prop="januaryGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].januaryGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="二月（元）" align="center" prop="februaryGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].februaryGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="三月（元）" align="center" prop="marchGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].marchGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="四月（元）" align="center" prop="aprilGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].aprilGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="五月（元）" align="center" prop="mayGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].mayGoal" :precision="2" :step="0.1"
+                      :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="六月（元）" align="center" prop="juneGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].juneGoal" :precision="2" :step="0.1"
+                      :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="七月（元）" align="center" prop="julyGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].julyGoal" :precision="2" :step="0.1"
+                      :min="0">
+                    </el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="八月（元）" align="center" prop="augustGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].augustGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="九月（元）" align="center" prop="septemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].septemberGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十月（元）" align="center" prop="octoberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].octoberGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十一月（元）" align="center" prop="novemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].novemberGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十二月（元）" align="center" prop="decemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
+                      v-model="annualSaleGoalMergeDetailsList[scope.$index].decemberGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="区域目标汇总(年)" name="zoneGoalSum(year)">
+              <el-table max-height="300" show-summary :summary-method="getSummaries" v-loading="loading"
+                :data="areaDetailList" v-horizontal-scroll>
+                <el-table-column label="序号" type="index" width="70" align="center" fixed />
+                <el-table-column label="销售组织" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="areaDetailList[scope.$index].saleOrg" title="销售组织" valueKey="name"
+                      referName="CUSTOMER_PARAM" disabled :dataMapping="{saleOrg: 'name'}"
+                      :source.sync="areaDetailList[scope.$index]" placeholder="请输入销售组织">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="销售区域" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="areaDetailList[scope.$index].saleZone" title="销售区域" valueKey="name"
+                      referName="CUSTOMER_PARAM" disabled :dataMapping="{saleZone: 'name'}"
+                      :source.sync="areaDetailList[scope.$index]" placeholder="请输入销售区域">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="负责人" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="areaDetailList[scope.$index].creator" title="负责人" valueKey="name"
+                      referName="CONTACTS_PARAM" disabled :dataMapping="{creator: 'name'}"
+                      :source.sync="areaDetailList[scope.$index]" placeholder="请输入负责人">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="合计（元）" align="center" prop="totalGoal" width="180">
+                  <template slot-scope="scope">
+                    <el-input v-model="areaDetailList[scope.$index].totalGoal" disabled></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="一月（元）" align="center" prop="januaryGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].januaryGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="二月（元）" align="center" prop="februaryGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].februaryGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="三月（元）" align="center" prop="marchGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].marchGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="四月（元）" align="center" prop="aprilGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].aprilGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="五月（元）" align="center" prop="mayGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].mayGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="六月（元）" align="center" prop="juneGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].juneGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="七月（元）" align="center" prop="julyGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].julyGoal" :precision="2" :step="0.1"
+                      :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="八月（元）" align="center" prop="augustGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].augustGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="九月（元）" align="center" prop="septemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].septemberGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十月（元）" align="center" prop="octoberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].octoberGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十一月（元）" align="center" prop="novemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].novemberGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十二月（元）" align="center" prop="decemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="areaDetailList[scope.$index].decemberGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="客户目标汇总(年)" name="customerGoalSum(year)">
+              <el-table max-height="300" show-summary :summary-method="getSummaries" v-loading="loading"
+                :data="customerDetailList" v-horizontal-scroll>
+                <el-table-column label="序号" type="index" width="70" align="center" fixed />
+                <el-table-column label="销售组织" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="customerDetailList[scope.$index].saleOrg" title="销售组织"
+                      valueKey="name" referName="CUSTOMER_PARAM" disabled :dataMapping="{saleOrg: 'name'}"
+                      :source.sync="customerDetailList[scope.$index]" placeholder="请输入销售组织">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="销售区域" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="customerDetailList[scope.$index].saleZone" title="销售区域"
+                      valueKey="name" referName="CUSTOMER_PARAM" disabled :dataMapping="{saleZone: 'name'}"
+                      :source.sync="customerDetailList[scope.$index]" placeholder="请输入销售区域">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="客户" align="center" width="180">
+                  <template slot-scope="scope">
+                    <el-popover-select-v2 v-model="customerDetailList[scope.$index].custom" title="客户" valueKey="name"
+                      referName="CUSTOMER_PARAM" disabled :dataMapping="{custom: 'name'}"
+                      :source.sync="customerDetailList[scope.$index]" placeholder="请输入客户">
+                    </el-popover-select-v2>
+                  </template>
+                </el-table-column>
+                <el-table-column label="合计（元）" align="center" prop="totalGoal" width="180">
+                  <template slot-scope="scope">
+                    <el-input v-model="customerDetailList[scope.$index].totalGoal" disabled></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="一月（元）" align="center" prop="januaryGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].januaryGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="二月（元）" align="center" prop="februaryGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].februaryGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="三月（元）" align="center" prop="marchGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].marchGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="四月（元）" align="center" prop="aprilGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].aprilGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="五月（元）" align="center" prop="mayGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].mayGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="六月（元）" align="center" prop="juneGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].juneGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="七月（元）" align="center" prop="julyGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].julyGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="八月（元）" align="center" prop="augustGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].augustGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="九月（元）" align="center" prop="septemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].septemberGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十月（元）" align="center" prop="octoberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].octoberGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十一月（元）" align="center" prop="novemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].novemberGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+                <el-table-column label="十二月（元）" align="center" prop="decemberGoal" width="220">
+                  <template slot-scope="scope">
+                    <el-input-number disabled v-model="customerDetailList[scope.$index].decemberGoal" :precision="2"
+                      :step="0.1" :min="0"></el-input-number>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+          <div slot="footer" class="dialog-footer" style="margin-left: 88%; margin-top: 1%">
+            <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
+            <el-button @click="cancel" size="medium">返 回</el-button>
+          </div>
+        </div>
+      </el-form>
+    </el-drawer>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <div class="el-upload__tip" slot="tip">
+            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+          </div>
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
+            @click="importTemplate">下载模板</el-link>
+        </div>
+      </el-upload>
+      <div slot="footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <TreeRefers ref="treeQuery" @doSubmit="selectionsToInputForQuery" :single="true" />
+    <TreeRefers ref="treeMain" @doSubmit="selectionsToInputForMain" :single="true" />
+    <TreeRefers ref="treeDetails" @doSubmit="selectionsToInputForDetails" :single="true" />
+  </div>
+</template>
+
+<script>
+  import {
+    addAnnualSaleGoalMerge,
+    delAnnualSaleGoalMerge,
+    getAnnualSaleGoalMerge,
+    listAnnualSaleGoalMerge,
+    updateAnnualSaleGoalMerge,
+    submit
+  } from "@/api/business/spd/goal_management/annualSaleGoalMerge";
+  import {
+    mergeAnnualSaleMergeDetails,
+    delAnnualSaleMergeDetails,
+    getAnnualSaleMergeDetails
+  } from "@/api/business/spd/goal_management/annualSaleMergeDetails"
+  import {
+    getToken
+  } from "@/utils/auth";
+  import {
+    getSummary
+  } from "@/api/business/spd/goal_management/commonWays";
+  import {
+    rollBack
+  } from "@/api/business/spd/goal_management/publicInterface";
+
+  // 树形参照
+  import TreeRefers from '@/components/Refers/treeRefer.vue'
+  import ElPopoverSelectV2 from "@/components/popover-select-v2"
+  import log from "../../../monitor/job/log";
+
+  export default {
+    name: "AnnualSaleGoalMerge",
+    components: {
+      TreeRefers,
+      ElPopoverSelectV2
+    },
+    dicts: ["sys_status", "oa_templete_id"],
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: false,
+        // 总条数
+        total: 0,
+        // 年度销售目标明细表格数据
+        annualSaleGoalMergeList: null,
+        annualSaleGoalMergeDetailsList: null,
+        areaDetailList: null,
+        customerDetailList: null,
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          code: null,
+          goalName: null,
+          documentDate: null,
+          annual: null,
+          creatorCode: null,
+          creator: null,
+          deptId: null,
+          dept: null,
+          goalCategory: null,
+          goalTotal: null,
+          notes: null,
+          status: null,
+          delFlag: null,
+          saleZoneCode: null,
+          saleZone: null,
+          oneLevelClassifyCode: null,
+          oneLevelClassify: null,
+          twoLevelClassifyCode: null,
+          twoLevelClassify: null,
+          params: {
+            beginTime: null,
+            endTime: null
+          }
+        },
+        documentDateRange: null,
+        pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        // 表单参数
+        form: {
+          id: null,
+          code: null,
+          goalName: null,
+          documentDate: null,
+          annual: null,
+          creatorCode: null,
+          creator: null,
+          deptId: null,
+          dept: null,
+          goalCategory: null,
+          goalTotal: null,
+          notes: null,
+          status: null,
+          delFlag: null,
+          saleZoneCode: null,
+          saleZone: null,
+          oneLevelClassifyCode: null,
+          oneLevelClassify: null,
+          twoLevelClassifyCode: null,
+          twoLevelClassify: null,
+          annualGoalMergeDetailsList: null,
+          oldAnnualGoalMergeDetailsList: null
+        },
+        formDetails: {
+          id: null,
+          mergeCode: null,
+          saleOrg: null,
+          saleZone: null,
+          custom: null,
+          creator: null,
+          oneLevelClassifyCode: null,
+          oneLevelClassify: null,
+          twoLevelClassifyCode: null,
+          twoLevelClassify: null,
+          goalSum: null,
+          januaryGoal: null,
+          februaryGoal: null,
+          marchGoal: null,
+          aprilGoal: null,
+          mayGoal: null,
+          juneGoal: null,
+          julyGoal: null,
+          augustGoal: null,
+          septemberGoal: null,
+          octoberGoal: null,
+          novemberGoal: null,
+          decemberGoal: null,
+          delFlag: null
+        },
+        // 表单校验
+        rules: {
+          documentDate: [{
+            required: true,
+            message: '单据日期不能为空',
+            trigger: 'blur'
+          }],
+          annual: [{
+            required: true,
+            message: '年度不能为空',
+            trigger: 'blur'
+          }],
+          creator: [{
+            required: true,
+            message: '制单人不能为空',
+            trigger: 'blur'
+          }],
+          dept: [{
+            required: true,
+            message: '部门不能为空',
+            trigger: 'blur'
+          }],
+          goalCategory: [{
+            required: true,
+            message: '目标类型不能为空',
+            trigger: 'blur'
+          }],
+          saleZone: [],
+          oneLevelClassify: [],
+          twoLevelClassify: []
+        },
+        // 树形参照
+        referCondition: {
+          type: '',
+          isPage: true,
+          title: '',
+          index: null
+        },
+        classOptions: [],
+        // 目标分类
+        goalCategoryList: [{
+          label: '销售区域',
+          value: '销售区域'
+        }, {
+          label: '一级分类',
+          value: '一级分类'
+        }, {
+          label: '二级分类',
+          value: '二级分类'
+        }],
+        activeName: 'annualSaleGoalMergeDetails',
+        // 用户导入参数
+        upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: {
+            Authorization: "Bearer " + getToken()
+          },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/goal_management/annualSaleGoalMerge/importData"
+        },
+        //打开状态
+        openStatus: null,
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询年度销售目标明细列表 */
+      getList() {
+        this.loading = true;
+        listAnnualSaleGoalMerge(this.queryParams).then(response => {
+          this.annualSaleGoalMergeList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+          this.annualSaleGoalMergeList.forEach(item => {
+            item.goalTotal = item.goalTotal.toFixed(2);
+          })
+        });
+      },
+      getListDetails() {
+        this.loading = true;
+        getAnnualSaleMergeDetails(this.form.id).then(response => {
+          console.log(response);
+          this.annualSaleGoalMergeDetailsList = response.data;
+          this.computeTotal()
+          this.form.annualGoalMergeDetailsList = this.annualSaleGoalMergeDetailsList
+          updateAnnualSaleGoalMerge(this.form).then(response => {
+            this.$modal.msgSuccess("目标值汇总修改成功");
+          });
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          id: null,
+          code: null,
+          goalName: null,
+          documentDate: null,
+          annual: null,
+          creatorCode: null,
+          creator: null,
+          deptId: null,
+          dept: null,
+          goalCategory: null,
+          goalTotal: null,
+          notes: null,
+          status: null,
+          delFlag: null,
+          saleZoneCode: null,
+          saleZone: null,
+          oneLevelClassifyCode: null,
+          oneLevelClassify: null,
+          twoLevelClassifyCode: null,
+          twoLevelClassify: null,
+          annualGoalMergeDetailsList: null,
+          oldAnnualGoalMergeDetailsList: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 10,
+          code: null,
+          goalName: null,
+          documentDate: null,
+          annual: null,
+          creatorCode: null,
+          creator: null,
+          deptId: null,
+          dept: null,
+          goalCategory: null,
+          goalTotal: null,
+          notes: null,
+          status: null,
+          delFlag: null,
+          saleZoneCode: null,
+          saleZone: null,
+          oneLevelClassifyCode: null,
+          oneLevelClassify: null,
+          twoLevelClassifyCode: null,
+          twoLevelClassify: null,
+          params: {
+            beginTime: null,
+            endTime: null
+          }
+        }
+        this.documentDateRange = null
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.openStatus = 'add';
+        this.reset();
+        this.annualSaleGoalMergeDetailsList = []
+        this.areaDetailList = []
+        this.customerDetailList = []
+        this.activeName = 'annualSaleGoalMergeDetails'
+        this.open = true;
+        this.title = "添加--年度销售目标合并明细";
+        this.form.documentDate = new Date().getFullYear().toString() + '-' + (new Date().getMonth() + 1).toString()
+          .padStart(2, '0') + '-' + new Date().getDate().toString().padStart(2, '0')
+        this.form.annual = new Date().getFullYear().toString()
+        this.form.creatorCode = this.$store.state.user.name
+        this.form.creator = this.$store.state.user.nickName
+        this.form.deptId = this.$store.state.user.deptId
+        this.form.dept = this.$store.state.user.deptName
+      },
+      handleAddDetails() {
+        if (this.activeName !== 'annualSaleGoalMergeDetails') {
+          return this.$message.error('当前标签不是‘年度销售目标合并明细’')
+        }
+        let list = {
+          id: null,
+          mergeCode: null,
+          saleOrg: null,
+          saleZone: null,
+          custom: null,
+          creator: null,
+          oneLevelClassifyCode: null,
+          oneLevelClassify: null,
+          twoLevelClassifyCode: null,
+          twoLevelClassify: null,
+          goalSum: null,
+          januaryGoal: null,
+          februaryGoal: null,
+          marchGoal: null,
+          aprilGoal: null,
+          mayGoal: null,
+          juneGoal: null,
+          julyGoal: null,
+          augustGoal: null,
+          septemberGoal: null,
+          octoberGoal: null,
+          novemberGoal: null,
+          decemberGoal: null,
+          delFlag: null
+        }
+        this.annualSaleGoalMergeDetailsList.push(list)
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.openStatus = 'edit';
+        this.reset();
+        const id = row.id || this.ids
+        this.activeName = 'annualSaleGoalMergeDetails'
+        this.areaDetailList = []
+        this.customerDetailList = []
+        getAnnualSaleGoalMerge(id).then(response => {
+          console.log(response);
+          this.form = response.data;
+          this.form.goalTotal = this.form.goalTotal.toFixed(2)
+          for (const element of this.form.annualGoalMergeDetailsList) {
+            element.totalGoal = element.totalGoal.toFixed(2)
+          }
+          this.annualSaleGoalMergeDetailsList = JSON.parse(JSON.stringify(this.form.annualGoalMergeDetailsList))
+          this.open = true;
+          this.title = "修改--年度销售目标合并明细";
+        });
+      },
+      //双击行
+      useDoubleClick(row) {
+        this.openStatus = 'see';
+        this.reset();
+        const id = row.id || this.ids
+        this.activeName = 'annualSaleGoalMergeDetails'
+        this.areaDetailList = []
+        this.customerDetailList = []
+        getAnnualSaleGoalMerge(id).then(response => {
+          console.log(response);
+          this.form = response.data;
+          this.form.goalTotal = this.form.goalTotal.toFixed(2)
+          for (const element of this.form.annualGoalMergeDetailsList) {
+            element.totalGoal = element.totalGoal.toFixed(2)
+          }
+          this.annualSaleGoalMergeDetailsList = JSON.parse(JSON.stringify(this.form.annualGoalMergeDetailsList))
+          this.open = true;
+          this.title = "查看--年度销售目标合并明细";
+        });
+      },
+      // 复制按钮操作
+      handleCopy(id) {
+        this.openStatus = 'edit';
+        this.reset()
+        this.annualSaleGoalMergeDetailsList = []
+        this.areaDetailList = []
+        this.customerDetailList = []
+        this.activeName = 'annualSaleGoalMergeDetails'
+        getAnnualSaleGoalMerge(id).then(response => {
+          this.form = response.data
+          this.form.id = null
+          this.form.code = null
+          this.title = "添加--年度销售目标合并明细";
+          this.form.documentDate = new Date().getFullYear().toString() + '-' + (new Date().getMonth() + 1)
+            .toString().padStart(2, '0') + '-' + new Date().getDate().toString().padStart(2, '0')
+          this.form.annual = new Date().getFullYear().toString()
+          this.form.goalTotal = 0
+          this.form.goalTotal = this.form.goalTotal.toFixed(2)
+          this.open = true
+        })
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              this.form.annualGoalMergeDetailsList = JSON.parse(JSON.stringify(this.annualSaleGoalMergeDetailsList))
+              console.log(this.form);
+              updateAnnualSaleGoalMerge(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              this.form.annualGoalMergeDetailsList = this.annualSaleGoalMergeDetailsList
+              this.form.status = '0'
+              console.log(this.form);
+              addAnnualSaleGoalMerge(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$modal.confirm('是否确认删除年度销售目标单据编号为"' + row.code + '"的数据项？').then(function () {
+          return delAnnualSaleGoalMerge(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      },
+      handleDeleteDetails(index, row) {
+        if (this.form.id === null) { // 新增
+          this.annualSaleGoalMergeDetailsList.splice(index, 1)
+          this.computeTotal()
+        } else { // 修改
+          if (row.id !== null) {
+            this.$modal.confirm('是否确认删除年度销售目标明细序号为"' + (index + 1) + '"的数据项？').then(function () {
+              return delAnnualSaleMergeDetails(row.id);
+            }).then(() => {
+              this.getListDetails();
+              this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+          } else {
+            this.annualSaleGoalMergeDetailsList.splice(index, 1)
+            this.$message.success('删除成功')
+            this.computeTotal()
+          }
+        }
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download('goal_management/annualSaleGoalMerge/export', {
+          ...this.queryParams
+        }, `annualSaleGoalMerge_${new Date().getTime()}.xlsx`)
+      },
+      handleExportDetails() {
+        this.download('goal_management/annualSaleMergeDetails/export', {
+          ...this.queryParams
+        }, `annualSaleMergeDetails_${new Date().getTime()}.xlsx`)
+      },
+      // 导出区域目标汇总
+      handleExportZoneSum() {
+        this.download('goal_management/annualSaleMergeDetails/exportZoneSum', {
+          ...this.queryParams
+        }, `zoneSum_${new Date().getTime()}.xlsx`)
+      },
+      // 导出客户目标汇总
+      handleExportCustomSum() {
+        this.download('goal_management/annualSaleMergeDetails/exportCustomSum', {
+          ...this.queryParams
+        }, `customSum_${new Date().getTime()}.xlsx`)
+      },
+      // 树形参照
+      chooseTreeReferForQuery(type, isPage, title) {
+        this.referCondition.type = type
+        this.referCondition.isPage = isPage
+        this.referCondition.title = title
+        this.$refs.treeQuery.init(this.referCondition)
+      },
+      selectionsToInputForQuery(selection) {
+        this.classOptions = selection;
+        if (this.referCondition.title === '一级物料分类') {
+          if (this.classOptions[0].code.length > 2) {
+            return this.$message.info('请在一级分类下选择');
+          }
+          this.queryParams.oneLevelClassifyCode = selection[0].code
+          this.queryParams.oneLevelClassify = selection[0].name
+        } else if (this.referCondition.title === '二级物料分类') {
+          if (this.classOptions[0].code.lastIndexOf("-") == 3 || this.classOptions[0].code.indexOf("90") == 0) {
+            this.queryParams.twoLevelClassifyCode = selection[0].code
+            this.queryParams.twoLevelClassify = selection[0].name
+          } else {
+            return this.$message.info('请在二级分类下选择')
+          }
+        }
+      },
+      chooseTreeReferForMain(type, isPage, title) {
+        this.referCondition.type = type
+        this.referCondition.isPage = isPage
+        this.referCondition.title = title
+        this.$refs.treeMain.init(this.referCondition)
+      },
+      selectionsToInputForMain(selection) {
+        this.classOptions = selection;
+        if (this.referCondition.title === '一级物料分类') {
+          if (this.classOptions[0].code.length > 2) {
+            return this.$message.info('请在一级分类下选择');
+          }
+          this.form.oneLevelClassifyCode = selection[0].code
+          this.form.oneLevelClassify = selection[0].name
+        } else if (this.referCondition.title === '二级物料分类') {
+          if (this.classOptions[0].code.lastIndexOf("-") == 3 || this.classOptions[0].code.indexOf("90") == 0) {
+            this.form.twoLevelClassifyCode = selection[0].code
+            this.form.twoLevelClassify = selection[0].name
+          } else {
+            return this.$message.info('请在二级分类下选择')
+          }
+        }
+      },
+      chooseTreeReferForDetails(type, isPage, title, index) {
+        this.referCondition.type = type
+        this.referCondition.isPage = isPage
+        this.referCondition.title = title
+        this.referCondition.index = index
+        this.$refs.treeDetails.init(this.referCondition)
+      },
+      selectionsToInputForDetails(selection) {
+        this.classOptions = selection;
+        if (this.referCondition.title === '一级物料分类') {
+          if (this.classOptions[0].code.length > 2) {
+            return this.$message.info('请在一级分类中选择')
+          }
+          if (selection.code !== this.annualSaleGoalMergeDetailsList[this.referCondition.index].oneLevelClassifyCode) {
+            this.annualSaleGoalMergeDetailsList[this.referCondition.index].twoLevelClassifyCode = null
+            this.annualSaleGoalMergeDetailsList[this.referCondition.index].twoLevelClassify = null
+          }
+          this.annualSaleGoalMergeDetailsList[this.referCondition.index].oneLevelClassifyCode = selection.code
+          this.annualSaleGoalMergeDetailsList[this.referCondition.index].oneLevelClassify = selection.name
+        } else if (this.referCondition.title === '二级物料分类') {
+          if (this.classOptions[0].code.lastIndexOf("-") == 3 || this.classOptions[0].code.indexOf("90") == 0) {
+            return this.$message.info('请在二级分类中选择')
+          } else if (selection.code[0] !== this.annualSaleGoalMergeDetailsList[this.referCondition.index]
+            .oneLevelClassifyCode) {
+            return this.$message.error('所选择的二级物料分类不属于一级分类')
+          }
+          this.annualSaleGoalMergeDetailsList[this.referCondition.index].twoLevelClassifyCode = selection.code
+          this.annualSaleGoalMergeDetailsList[this.referCondition.index].twoLevelClassify = selection.name
+        }
+      },
+      changeGoalCategoryForm() {
+        let condition = this.form.goalCategory
+        if (condition === '销售区域') {
+          this.form.oneLevelClassifyCode = null
+          this.form.oneLevelClassify = null
+          this.form.twoLevelClassifyCode = null
+          this.form.twoLevelClassify = null
+          this.rules.saleZone = [{
+            required: true,
+            message: '销售区域不能为空',
+            trigger: 'blur'
+          }]
+          this.rules.oneLevelClassify = []
+          this.rules.twoLevelClassify = []
+        } else if (condition === '一级分类') {
+          this.form.saleZoneCode = null
+          this.form.saleZone = null
+          this.form.twoLevelClassifyCode = null
+          this.form.twoLevelClassify = null
+          this.rules.saleZone = []
+          this.rules.oneLevelClassify = [{
+            required: true,
+            message: '一级分类不能为空',
+            trigger: 'blur'
+          }]
+          this.rules.twoLevelClassify = []
+        } else if (condition === '二级分类') {
+          this.form.saleZoneCode = null
+          this.form.saleZone = null
+          this.form.oneLevelClassifyCode = null
+          this.form.oneLevelClassify = null
+          this.rules.saleZone = []
+          this.rules.oneLevelClassify = []
+          this.rules.twoLevelClassify = [{
+            required: true,
+            message: '二级分类不能为空',
+            trigger: 'blur'
+          }]
+        } else {
+          this.form.saleZoneCode = null
+          this.form.saleZone = null
+          this.form.oneLevelClassifyCode = null
+          this.form.oneLevelClassify = null
+          this.form.twoLevelClassifyCode = null
+          this.form.twoLevelClassify = null
+          this.rules.saleZone = []
+          this.rules.oneLevelClassify = []
+          this.rules.twoLevelClassify = []
+        }
+      },
+      // 关闭抽屉
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      // 复制明细
+      handleCopyDetails(row) {
+        let list = {
+          id: null,
+          mergeCode: row.mergeCode,
+          saleOrg: row.saleOrg,
+          saleZone: row.saleZone,
+          custom: row.custom,
+          creator: row.creator,
+          oneLevelClassifyCode: row.oneLevelClassifyCode,
+          oneLevelClassify: row.oneLevelClassify,
+          twoLevelClassifyCode: row.twoLevelClassifyCode,
+          twoLevelClassify: row.twoLevelClassify,
+          totalGoal: row.totalGoal,
+          januaryGoal: row.januaryGoal,
+          februaryGoal: row.februaryGoal,
+          marchGoal: row.marchGoal,
+          aprilGoal: row.aprilGoal,
+          mayGoal: row.mayGoal,
+          juneGoal: row.juneGoal,
+          julyGoal: row.julyGoal,
+          augustGoal: row.augustGoal,
+          septemberGoal: row.septemberGoal,
+          octoberGoal: row.octoberGoal,
+          novemberGoal: row.novemberGoal,
+          decemberGoal: row.decemberGoal,
+          delFlag: row.delFlag
+        }
+        this.annualSaleGoalMergeDetailsList.push(list)
+        this.computeTotal()
+      },
+      // 计算子表合计
+      computeTotalDetails(index, row) {
+        let array = [row.januaryGoal, row.februaryGoal, row.marchGoal, row.aprilGoal, row.mayGoal, row.juneGoal, row
+          .julyGoal, row.augustGoal, row.septemberGoal, row.octoberGoal, row.novemberGoal, row.decemberGoal
+        ]
+        let sum = 0
+        for (const element of array) {
+          sum = (sum * 1000000 + element * 1000000) / 1000000
+        }
+        this.annualSaleGoalMergeDetailsList[index].totalGoal = sum
+        this.computeTotal()
+      },
+      // 计算主表合计
+      computeTotal() {
+        let list = this.annualSaleGoalMergeDetailsList
+        let sum = 0
+        for (const listElement of list) {
+          if (listElement.totalGoal === null) {
+            listElement.totalGoal = 0
+          }
+          sum = (sum * 1000000 + listElement.totalGoal * 1000000) / 1000000
+        }
+        this.form.goalTotal = sum.toFixed(2)
+      },
+      getSummaries(param) {
+        return getSummary(param)
+      },
+      // 合并数据
+      clickMerge() {
+        if (this.form.id !== null) {
+          this.form.oldAnnualGoalMergeDetailsList = JSON.parse(JSON.stringify(this.form.annualGoalMergeDetailsList))
+        }
+        if (this.activeName !== 'annualSaleGoalMergeDetails') {
+          return this.$message.error('当前标签不是年销售目标合并明细')
+        }
+        let query = JSON.parse(JSON.stringify(this.form))
+        query.annualGoalMergeDetailsList = []
+        console.log(query);
+        if (query.goalCategory === null || query.goalCategory === '') {
+          return this.$message.error('请输入目标分类')
+        } else if (query.goalCategory === '销售区域') {
+          if (query.saleZone === null) {
+            return this.$message.error('请输入销售区域')
+          }
+        } else if (query.goalCategory === '一级分类') {
+          if (query.oneLevelClassify === null) {
+            return this.$message.error('请输入一级分类')
+          }
+        } else if (query.goalCategory === '二级分类') {
+          if (query.twoLevelClassify === null) {
+            return this.$message.error('请输入二级分类')
+          }
+        }
+        console.log(query, 'query')
+        mergeAnnualSaleMergeDetails(query).then(response => {
+          console.log(response, 'response');
+          if (response.data.consolidatedDetail.length > 0) {
+            // for (const consolidatedDetail of response.data.consolidatedDetail) {
+            //   consolidatedDetail.totalGoal = consolidatedDetail.totalGoal.toFixed(2)
+            // }
+            this.annualSaleGoalMergeDetailsList = response.data.consolidatedDetail
+            this.computeTotal()
+          } else {
+            return this.$message.warning('未查到相关数据')
+          }
+        })
+      },
+      // 获得区域目标汇总or客户目标汇总
+      getNewTwoArray() {
+        let arr = JSON.parse(JSON.stringify(this.annualSaleGoalMergeDetailsList))
+        // 如果子表标签是annualSaleGoalMergeDetails 或者 主表的目标分类是“销售区域”
+        if (this.activeName === 'annualSaleGoalMergeDetails') {
+          this.areaDetailList = null
+          this.customerDetailList = null
+          return
+        }
+        // 根据某三个属性进行合并并相加totalGoal的函数
+        const mergeAndSumTotalGoal = (array) => {
+          return Array.from(array.reduce((map, obj) => {
+            let key = null
+            if (this.activeName === 'zoneGoalSum(year)') {
+              key = `${obj.saleOrg}-${obj.saleZone}-${obj.creator}`
+            } else if (this.activeName === 'customerGoalSum(year)') {
+              key = `${obj.saleOrg}-${obj.saleZone}-${obj.custom}`
+            }
+            console.log(key);
+            if (map.has(key)) {
+              const existingObj = map.get(key)
+              existingObj.totalGoal = parseFloat(existingObj.totalGoal)
+              existingObj.totalGoal += parseFloat(obj.totalGoal)
+              existingObj.totalGoal = existingObj.totalGoal.toFixed(2)
+              existingObj.januaryGoal += obj.januaryGoal
+              existingObj.februaryGoal += obj.februaryGoal
+              existingObj.marchGoal += obj.marchGoal
+              existingObj.aprilGoal += obj.aprilGoal
+              existingObj.mayGoal += obj.mayGoal
+              existingObj.juneGoal += obj.juneGoal
+              existingObj.julyGoal += obj.julyGoal
+              existingObj.augustGoal += obj.augustGoal
+              existingObj.septemberGoal += obj.septemberGoal
+              existingObj.octoberGoal += obj.octoberGoal
+              existingObj.novemberGoal += obj.novemberGoal
+              existingObj.decemberGoal += obj.decemberGoal
+            } else {
+              map.set(key, {
+                ...obj
+              })
+            }
+            return map
+          }, new Map()).values())
+        }
+        // 调用合并函数
+        const mergedArray = mergeAndSumTotalGoal(arr)
+        if (this.activeName === 'zoneGoalSum(year)') {
+          this.areaDetailList = mergedArray
+        } else if (this.activeName === 'customerGoalSum(year)') {
+          this.customerDetailList = mergedArray
+        }
+      },
+      setBeginAndEnd() {
+        let array = this.documentDateRange
+        if (array !== null) {
+          this.queryParams.params.beginTime = array[0]
+          this.queryParams.params.endTime = array[1]
+        } else {
+          this.queryParams.params.beginTime = null
+          this.queryParams.params.endTime = null
+        }
+      },
+      handleCommand(command) {
+        // 执行对应的功能
+        if (command === 'export') {
+          console.log('导出主表');
+          this.handleExport()
+        } else if (command === 'exportDetails') {
+          console.log('导出明细');
+          this.handleExportDetails()
+        } else if (command === 'exportZoneSum') {
+          console.log('导出区域目标汇总')
+          this.handleExportZoneSum()
+        } else if (command === 'exportCustomSum') {
+          console.log('导出客户目标汇总')
+          this.handleExportCustomSum()
+        }
+      },
+      /** 导入按钮操作 */
+      handleImport() {
+        this.upload.open = true;
+        this.upload.title = "年销售目标合并导入";
+        this.upload.url = process.env.VUE_APP_BASE_API + "goal_management/annualSaleGoalMerge/importData"
+      },
+      /** 下载模板操作 */
+      importTemplate() {
+        this.download('goal_management/annualSaleGoalMerge/importTemplate', {},
+          `annualSaleGoalMerge_${new Date().getTime()}.xlsx`)
+      },
+      // 文件上传中处理
+      handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true;
+      },
+      // 文件上传成功处理
+      handleFileSuccess(response, file, fileList) {
+        console.log(response);
+        this.upload.open = false;
+        this.upload.isUploading = false;
+        this.$refs.upload.clearFiles();
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response
+          .msg + "</div>", "导入结果", {
+            dangerouslyUseHTMLString: true
+          });
+        this.getList();
+      },
+      // 提交上传文件
+      submitFileForm() {
+        this.$refs.upload.submit();
+      },
+      //提交
+      async handleSubmit(row) {
+        this.$modal.loading("提交中...");
+        try {
+          const {
+            msg,
+            code
+          } = await submit(row.id);
+          if (code === 200) {
+            this.$modal.notifySuccess("提交成功");
+            this.$modal.closeLoading();
+            row.status = '1';
+          }
+        } catch (err) {
+          console.error(err);
+          this.$modal.closeLoading();
+        }
+      },
+      //收回
+      handleReback(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,
+          type: "2"
+        }
+        rollBack(params).then(res => {
+          if (res.code === 200) {
+            this.$modal.notifySuccess("收回成功");
+            this.$modal.closeLoading();
+          }
+        }).catch(err => {
+          this.$message.error(err);
+          this.$modal.closeLoading();
+        })
+      },
+    }
+  };
+
+</script>

src/views/business/spd/target/AnnualSaleGoalMerge.vue

@@ -1,1601 +1,411 @@
+<!-- 年销售目标合并 -->
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="100px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="编码" prop="code">
-            <el-input v-model="queryParams.code" placeholder="请输入编码" clearable @keyup.enter.native="handleQuery" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="目标名称" prop="goalName">
-            <el-input v-model="queryParams.goalName" placeholder="请输入目标名称" clearable
-              @keyup.enter.native="handleQuery" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="单据日期" prop="documentDate">
-            <el-date-picker v-model="documentDateRange" type="daterange" value-format="yyyy-MM-dd"
-              @change="setBeginAndEnd" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-              placeholder="请选择单据日期" :picker-options="pickerOptions">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            <el-tooltip class="item" effect="dark" :content="showSearch?'隐藏搜索':'显示搜索'" placement="top">
-              <el-button type="warning" :icon="showSearch?'el-icon-caret-top':'el-icon-caret-bottom'" circle
-                @click="showSearch = !showSearch"></el-button>
-            </el-tooltip>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="100px">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="年度" prop="annual">
-            <el-date-picker v-model="queryParams.annual" type="year" value-format="yyyy" placeholder="选择年度" clearable
-              @keyup.enter.native="handleQuery">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="单据状态" prop="status">
-            <el-select 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="6">
-          <el-form-item label="制单人" prop="creator">
-            <el-popover-select-v2 v-model="queryParams.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
-              :dataMapping="{ creatorCode: 'code', creator: 'name'}" :source.sync="queryParams" placeholder="请输入负责人">
-            </el-popover-select-v2>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="部门" prop="dept">
-            <el-popover-select-v2 v-model="queryParams.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
-              :dataMapping="{ deptId: 'id', dept: 'name'}" :source.sync="queryParams" placeholder="请输入部门"
-              @keyup.enter.native="handleQuery">
-            </el-popover-select-v2>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="目标类型" prop="goalCategory">
-            <el-select v-model="queryParams.goalCategory" placeholder="请输入目标类型">
-              <el-option
-                v-for="item in [{ value: '销售区域', label: '销售区域' }, { value: '一级分类', label: '一级分类' }, { value: '二级分类', label: '二级分类' }]"
-                :key="item.value" :label="item.label" :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="queryParams.goalCategory === '销售区域'" label="销售区域" prop="saleZone">
-            <el-popover-select-v2 v-model="queryParams.saleZoneCode" title="销售区域" valueKey="name"
-              referName="MK_SALESAREA_PARAM" :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
-              :source.sync="queryParams" placeholder="请输入销售区域">
-            </el-popover-select-v2>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="queryParams.goalCategory === '一级分类'" label="一级分类" prop="oneLevelClassify">
-            <el-select v-model="queryParams.oneLevelClassify" size="mini" clearable placeholder="请输入一级分类"
-              @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '一级物料分类')" style="width: 200px">
-              <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item v-if="queryParams.goalCategory === '二级分类'" label="二级分类" prop="twoLevelClassify">
-            <el-select v-model="queryParams.twoLevelClassify" size="mini" clearable placeholder="请输入二级分类"
-              @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '二级物料分类')" style="width: 200px">
-              <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+  <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)"
+    >
+      <template slot="goalCategory" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          @clear="goalCategoryClear(scope.row)"
+        >
+          <el-option
+            v-for="item in dict.type[scope.attr.dictName]"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </component>
+      </template>
+      <template slot="saleZone" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          :disabled="params.goalCategory !== '销售区域'"
+        >
+        </component>
+      </template>
+      <template slot="oneLevelClassify" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          :disabled="params.goalCategory !== '一级分类'"
+          @change="
+            (prop, columns) => changeOneLevel(scope.row, { prop, columns })
+          "
+        >
+        </component>
+      </template>
+      <template slot="twoLevelClassify" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          :disabled="params.goalCategory !== '二级分类'"
+          @change="
+            (prop, columns) => changeTwoLevel(scope.row, { prop, columns })
+          "
+        >
+        </component>
+      </template>
+    </el-super-search>
 
-    <el-row :gutter="10" class="mb8" style="float: right">
+    <el-row
+      :gutter="10"
+      class="mb10"
+      type="flex"
+      justify="end"
+      style="margin-top: 20px"
+    >
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
+        <el-button type="primary" :size="size" @click="handleAdd"
+          >新 增
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-dropdown @command="handleCommand">
-          <el-button type="warning" plain icon="el-icon-download" size="mini">
+          <el-button :size="size">
             导出<i class="el-icon-arrow-down el-icon--right"></i>
           </el-button>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="export">导出</el-dropdown-item>
-            <el-dropdown-item command="exportDetails">导出明细</el-dropdown-item>
-            <el-dropdown-item command="exportZoneSum">导出区域目标汇总</el-dropdown-item>
-            <el-dropdown-item command="exportCustomSum">导出客户目标汇总</el-dropdown-item>
+            <el-dropdown-item command="exportDetails"
+              >导出明细</el-dropdown-item
+            >
+            <el-dropdown-item command="exportZoneSum"
+              >导出区域目标汇总</el-dropdown-item
+            >
+            <el-dropdown-item command="exportCustomSum"
+              >导出客户目标汇总</el-dropdown-item
+            >
           </el-dropdown-menu>
         </el-dropdown>
       </el-col>
     </el-row>
 
-    <el-table v-loading="loading" :data="annualSaleGoalMergeList" @selection-change="handleSelectionChange"
-      @row-dblclick="useDoubleClick" v-horizontal-scroll max-height="560">
-      <el-table-column label="编码" align="center" prop="code" width="180" />
-      <el-table-column label="目标名称" align="center" prop="goalName" width="240" />
-      <el-table-column label="单据日期" align="center" prop="documentDate" width="180">
+    <el-super-ux-table
+      v-model="tableData"
+      :size="size"
+      :dict="dict"
+      :page="page"
+      :columns="TableColumns"
+      index
+      pagination
+      convenitentOperation
+      highlight-current-row
+      storage-key="AnnualSaleGoalMergeSuperTable"
+      @row-dblclick="useSee"
+      @pagination="getList(params, page)"
+      style="margin: 16px 0 0"
+    >
+      <ux-table-column fixed="right" title="操作" align="center" width="160">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.documentDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="年度" align="center" prop="annual" width="100" />
-      <el-table-column show-overflow-tooltip label="状态" align="center" width="100" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_status" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="制单人" align="center" prop="creator" width="180" />
-      <el-table-column label="部门" align="center" prop="dept" width="180" />
-      <el-table-column label="目标类型" align="center" prop="goalCategory" width="180" />
-      <el-table-column label="目标值汇总（元）" align="center" prop="goalTotal" width="180" />
-      <el-table-column label="销售区域" align="center" prop="saleZone" width="220" />
-      <el-table-column label="一级分类" align="center" prop="oneLevelClassify" width="180" />
-      <el-table-column label="二级分类" align="center" prop="twoLevelClassify" width="180" />
-      <el-table-column label="备注" align="center" prop="notes" width="180" />
-      <el-table-column label="操作" align="center" class-name="small-padding" width="180" fixed="right">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="useDoubleClick(scope.row)">查看
+          <el-button :size="size" type="text" @click="useSee(scope.row)"
+            >查看
           </el-button>
-          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
-            @click="handleUpdate(scope.row)">修改
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            :size="size"
+            type="text"
+            @click="handleUpdate(scope.row)"
+            >修改
           </el-button>
-          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
-            @click="handleDelete(scope.row)">删除
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            :size="size"
+            type="text"
+            @click="handleDelete(scope.row)"
+            >删除
           </el-button>
-          <el-button v-if="scope.row.status == '0' || scope.row.status == '3'" size="mini" type="text"
-            @click="handleSubmit(scope.row)">提交</el-button>
-          <el-button v-if="scope.row.status == '1'" size="mini" type="text" @click="handleReback(scope.row)">收回
+          <el-button
+            v-if="scope.row.status == '0' || scope.row.status == '3'"
+            :size="size"
+            type="text"
+            @click="handleSubmit(scope.row)"
+            >提交</el-button
+          >
+          <el-button
+            v-if="scope.row.status == '1' && scope.row.flowId"
+            :size="size"
+            type="text"
+            @click="handleReback(scope.row)"
+            >收回
           </el-button>
         </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      :page-sizes="[10, 20, 50, 100]" @pagination="getList" />
-
-    <!-- 添加或修改年度销售目标明细对话框 -->
-    <el-drawer :title="title" :visible.sync="open" direction="rtl" :before-close="handleClose" size="100%"
-      v-horizontal-scroll>
-      <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="openStatus == 'see'" size="mini">
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-form-item label="编码" prop="code">
-              <el-input v-model="form.code" placeholder="编码后端自动生成" disabled />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="目标名称" prop="goalName">
-              <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" disabled />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="单据日期" prop="documentDate">
-              <el-date-picker v-model="form.documentDate" type="date" placeholder="选择单据日期" value-format="yyyy-MM-dd">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="年度" prop="annual">
-              <el-date-picker v-model="form.annual" type="year" placeholder="选择年度" value-format="yyyy">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-form-item label="制单人" prop="creator">
-              <el-popover-select-v2 v-model="form.creator" title="制单人" valueKey="name" referName="CONTACTS_PARAM"
-                :dataMapping="{ creatorCode: 'code', creator: 'name'}" :source.sync="form" placeholder="请输入制单人">
-              </el-popover-select-v2>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="部门" prop="dept">
-              <el-popover-select-v2 v-model="form.dept" title="部门" valueKey="name" referName="DEPT_PARAM"
-                :dataMapping="{ deptId: 'id', dept: 'name'}" :source.sync="form" placeholder="请输入部门">
-              </el-popover-select-v2>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="目标分类" prop="goalCategory">
-              <el-select :disabled="this.openStatus == 'edit'" v-model="form.goalCategory" placeholder="请选择" @change="changeGoalCategoryForm">
-                <el-option v-for="item in goalCategoryList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="目标合计（元）" prop="goalTotal" label-width="120px">
-              <el-input v-model="form.goalTotal" placeholder="目标值汇总自动计算" disabled />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <el-form-item label="备注" prop="notes">
-              <el-input v-model="form.notes" placeholder="请输入备注" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item v-if="form.goalCategory === '销售区域'" label="销售区域" prop="saleZone">
-              <el-popover-select-v2 v-model="form.saleZone" title="销售区域" valueKey="name" referName="MK_SALESAREA_PARAM"
-                :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}" :source.sync="form" placeholder="请输入销售区域">
-              </el-popover-select-v2>
-            </el-form-item>
-            <el-form-item v-if="form.goalCategory === '一级分类'" label="一级分类" prop="oneLevelClassify">
-              <el-select v-model="form.oneLevelClassify" clearable
-                @focus="chooseTreeReferForMain('MATERIALCLASSIFY_PARAM', false, '一级物料分类')" style="width: 200px">
-                <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
-              </el-select>
-            </el-form-item>
-            <el-form-item v-if="form.goalCategory === '二级分类'" label="二级分类" prop="twoLevelClassify">
-              <el-select v-model="form.twoLevelClassify" clearable
-                @focus="chooseTreeReferForMain('MATERIALCLASSIFY_PARAM', false, '二级物料分类')" style="width: 200px">
-                <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="单据状态" prop="type">
-              <el-select v-model="form.status" placeholder="" disabled>
-                <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-row>
-        <div>
-          <el-row :gutter="10" class="mb8" style="margin-left: 94%">
-            <el-col :span="1.5">
-              <el-button type="primary" plain icon="el-icon-folder-opened" size="mini" @click="clickMerge">合 并
-              </el-button>
-            </el-col>
-          </el-row>
-          <el-tabs v-model="activeName" @tab-click="getNewTwoArray">
-            <el-tab-pane label="年销售目标合并明细" name="annualSaleGoalMergeDetails">
-              <el-table max-height="560" show-summary :summary-method="getSummaries" v-loading="loading" size="mini"
-                :data="annualSaleGoalMergeDetailsList" v-horizontal-scroll>
-                <el-table-column label="序号" type="index" width="70" align="center" fixed />
-                <el-table-column label="销售组织" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalMergeDetailsList[scope.$index].saleOrg" title="销售组织"
-                      valueKey="name" referName="ORG_PARAM" disabled :dataMapping="{saleOrg: 'name'}"
-                      :source.sync="annualSaleGoalMergeDetailsList[scope.$index]" placeholder="请输入销售组织">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="销售区域" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalMergeDetailsList[scope.$index].saleZone" title="销售区域"
-                      valueKey="name" referName="MK_SALESAREA_PARAM" disabled :dataMapping="{saleZone: 'name'}"
-                      :source.sync="annualSaleGoalMergeDetailsList[scope.$index]" placeholder="请输入销售区域">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="客户" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalMergeDetailsList[scope.$index].custom" title="客户"
-                      valueKey="name" referName="CUSTOMER_PARAM" disabled :dataMapping="{custom: 'name'}"
-                      :source.sync="annualSaleGoalMergeDetailsList[scope.$index]" placeholder="请输入客户">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="负责人" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="annualSaleGoalMergeDetailsList[scope.$index].creator" title="负责人"
-                      valueKey="name" referName="CONTACTS_PARAM" disabled :dataMapping="{creator: 'name'}"
-                      :source.sync="annualSaleGoalMergeDetailsList[scope.$index]" placeholder="请输入负责人">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="一级分类" align="center" width="220">
-                  <template slot-scope="scope">
-                    <el-select v-model="annualSaleGoalMergeDetailsList[scope.$index].oneLevelClassify" size="mini"
-                      clearable
-                      @focus="chooseTreeReferForDetails('MATERIALCLASSIFY_PARAM', false, '一级物料分类', scope.$index)"
-                      style="width: 200px" disabled>
-                      <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column label="二级分类" align="center" width="220">
-                  <template slot-scope="scope">
-                    <el-select v-model="annualSaleGoalMergeDetailsList[scope.$index].twoLevelClassify" size="mini"
-                      clearable
-                      @focus="chooseTreeReferForDetails('MATERIALCLASSIFY_PARAM', false, '二级物料分类', scope.$index)"
-                      style="width: 200px" disabled>
-                      <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column label="合计（元）" align="center" prop="totalGoal" width="180">
-                  <template slot-scope="scope">
-                    <el-input v-model="annualSaleGoalMergeDetailsList[scope.$index].totalGoal" disabled></el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column label="一月（元）" align="center" prop="januaryGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].januaryGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="二月（元）" align="center" prop="februaryGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].februaryGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="三月（元）" align="center" prop="marchGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].marchGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="四月（元）" align="center" prop="aprilGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].aprilGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="五月（元）" align="center" prop="mayGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].mayGoal" :precision="2" :step="0.1"
-                      :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="六月（元）" align="center" prop="juneGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].juneGoal" :precision="2" :step="0.1"
-                      :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="七月（元）" align="center" prop="julyGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].julyGoal" :precision="2" :step="0.1"
-                      :min="0">
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="八月（元）" align="center" prop="augustGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].augustGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="九月（元）" align="center" prop="septemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].septemberGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十月（元）" align="center" prop="octoberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].octoberGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十一月（元）" align="center" prop="novemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].novemberGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十二月（元）" align="center" prop="decemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number
-                      @change="computeTotalDetails(scope.$index, annualSaleGoalMergeDetailsList[scope.$index])"
-                      v-model="annualSaleGoalMergeDetailsList[scope.$index].decemberGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <el-tab-pane label="区域目标汇总(年)" name="zoneGoalSum(year)">
-              <el-table max-height="300" show-summary :summary-method="getSummaries" v-loading="loading"
-                :data="areaDetailList" v-horizontal-scroll>
-                <el-table-column label="序号" type="index" width="70" align="center" fixed />
-                <el-table-column label="销售组织" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="areaDetailList[scope.$index].saleOrg" title="销售组织" valueKey="name"
-                      referName="CUSTOMER_PARAM" disabled :dataMapping="{saleOrg: 'name'}"
-                      :source.sync="areaDetailList[scope.$index]" placeholder="请输入销售组织">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="销售区域" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="areaDetailList[scope.$index].saleZone" title="销售区域" valueKey="name"
-                      referName="CUSTOMER_PARAM" disabled :dataMapping="{saleZone: 'name'}"
-                      :source.sync="areaDetailList[scope.$index]" placeholder="请输入销售区域">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="负责人" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="areaDetailList[scope.$index].creator" title="负责人" valueKey="name"
-                      referName="CONTACTS_PARAM" disabled :dataMapping="{creator: 'name'}"
-                      :source.sync="areaDetailList[scope.$index]" placeholder="请输入负责人">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="合计（元）" align="center" prop="totalGoal" width="180">
-                  <template slot-scope="scope">
-                    <el-input v-model="areaDetailList[scope.$index].totalGoal" disabled></el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column label="一月（元）" align="center" prop="januaryGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].januaryGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="二月（元）" align="center" prop="februaryGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].februaryGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="三月（元）" align="center" prop="marchGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].marchGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="四月（元）" align="center" prop="aprilGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].aprilGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="五月（元）" align="center" prop="mayGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].mayGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="六月（元）" align="center" prop="juneGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].juneGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="七月（元）" align="center" prop="julyGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].julyGoal" :precision="2" :step="0.1"
-                      :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="八月（元）" align="center" prop="augustGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].augustGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="九月（元）" align="center" prop="septemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].septemberGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十月（元）" align="center" prop="octoberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].octoberGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十一月（元）" align="center" prop="novemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].novemberGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十二月（元）" align="center" prop="decemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="areaDetailList[scope.$index].decemberGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <el-tab-pane label="客户目标汇总(年)" name="customerGoalSum(year)">
-              <el-table max-height="300" show-summary :summary-method="getSummaries" v-loading="loading"
-                :data="customerDetailList" v-horizontal-scroll>
-                <el-table-column label="序号" type="index" width="70" align="center" fixed />
-                <el-table-column label="销售组织" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="customerDetailList[scope.$index].saleOrg" title="销售组织"
-                      valueKey="name" referName="CUSTOMER_PARAM" disabled :dataMapping="{saleOrg: 'name'}"
-                      :source.sync="customerDetailList[scope.$index]" placeholder="请输入销售组织">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="销售区域" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="customerDetailList[scope.$index].saleZone" title="销售区域"
-                      valueKey="name" referName="CUSTOMER_PARAM" disabled :dataMapping="{saleZone: 'name'}"
-                      :source.sync="customerDetailList[scope.$index]" placeholder="请输入销售区域">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="客户" align="center" width="180">
-                  <template slot-scope="scope">
-                    <el-popover-select-v2 v-model="customerDetailList[scope.$index].custom" title="客户" valueKey="name"
-                      referName="CUSTOMER_PARAM" disabled :dataMapping="{custom: 'name'}"
-                      :source.sync="customerDetailList[scope.$index]" placeholder="请输入客户">
-                    </el-popover-select-v2>
-                  </template>
-                </el-table-column>
-                <el-table-column label="合计（元）" align="center" prop="totalGoal" width="180">
-                  <template slot-scope="scope">
-                    <el-input v-model="customerDetailList[scope.$index].totalGoal" disabled></el-input>
-                  </template>
-                </el-table-column>
-                <el-table-column label="一月（元）" align="center" prop="januaryGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].januaryGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="二月（元）" align="center" prop="februaryGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].februaryGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="三月（元）" align="center" prop="marchGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].marchGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="四月（元）" align="center" prop="aprilGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].aprilGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="五月（元）" align="center" prop="mayGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].mayGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="六月（元）" align="center" prop="juneGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].juneGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="七月（元）" align="center" prop="julyGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].julyGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="八月（元）" align="center" prop="augustGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].augustGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="九月（元）" align="center" prop="septemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].septemberGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十月（元）" align="center" prop="octoberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].octoberGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十一月（元）" align="center" prop="novemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].novemberGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column label="十二月（元）" align="center" prop="decemberGoal" width="220">
-                  <template slot-scope="scope">
-                    <el-input-number disabled v-model="customerDetailList[scope.$index].decemberGoal" :precision="2"
-                      :step="0.1" :min="0"></el-input-number>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-          </el-tabs>
-          <div slot="footer" class="dialog-footer" style="margin-left: 88%; margin-top: 1%">
-            <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
-            <el-button @click="cancel" size="medium">返 回</el-button>
-          </div>
-        </div>
-      </el-form>
-    </el-drawer>
+      </ux-table-column>
+    </el-super-ux-table>
 
-    <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
-          </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
-            @click="importTemplate">下载模板</el-link>
-        </div>
-      </el-upload>
-      <div slot="footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <TreeRefers ref="treeQuery" @doSubmit="selectionsToInputForQuery" :single="true" />
-    <TreeRefers ref="treeMain" @doSubmit="selectionsToInputForMain" :single="true" />
-    <TreeRefers ref="treeDetails" @doSubmit="selectionsToInputForDetails" :single="true" />
-  </div>
+    <asgm-details
+      ref="AnnualSaleGoalMergeDetails"
+      :dict="dict"
+      :size="size"
+      :data="rowDetails"
+      :addType="addType"
+      @refresh="getList(params, page)"
+    ></asgm-details>
+  </el-card>
 </template>
 
 <script>
-  import {
-    addAnnualSaleGoalMerge,
-    delAnnualSaleGoalMerge,
-    getAnnualSaleGoalMerge,
-    listAnnualSaleGoalMerge,
-    updateAnnualSaleGoalMerge,
-    submit
-  } from "@/api/business/spd/goal_management/annualSaleGoalMerge";
-  import {
-    mergeAnnualSaleMergeDetails,
-    delAnnualSaleMergeDetails,
-    getAnnualSaleMergeDetails
-  } from "@/api/business/spd/goal_management/annualSaleMergeDetails"
-  import {
-    getToken
-  } from "@/utils/auth";
-  import {
-    getSummary
-  } from "@/api/business/spd/goal_management/commonWays";
-  import {
-    rollBack
-  } from "@/api/business/spd/goal_management/publicInterface";
-
-  // 树形参照
-  import TreeRefers from '@/components/Refers/treeRefer.vue'
-  import ElPopoverSelectV2 from "@/components/popover-select-v2"
-  import log from "../../../monitor/job/log";
-
-  export default {
-    name: "AnnualSaleGoalMerge",
-    components: {
-      TreeRefers,
-      ElPopoverSelectV2
-    },
-    dicts: ["sys_status", "oa_templete_id"],
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: false,
-        // 总条数
-        total: 0,
-        // 年度销售目标明细表格数据
-        annualSaleGoalMergeList: null,
-        annualSaleGoalMergeDetailsList: null,
-        areaDetailList: null,
-        customerDetailList: null,
-        // 弹出层标题
-        title: "",
-        // 是否显示弹出层
-        open: false,
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          code: null,
-          goalName: null,
-          documentDate: null,
-          annual: null,
-          creatorCode: null,
-          creator: null,
-          deptId: null,
-          dept: null,
-          goalCategory: null,
-          goalTotal: null,
-          notes: null,
-          status: null,
-          delFlag: null,
-          saleZoneCode: null,
-          saleZone: null,
-          oneLevelClassifyCode: null,
-          oneLevelClassify: null,
-          twoLevelClassifyCode: null,
-          twoLevelClassify: null,
+import { dicts } from "./common/dicts";
+import useColumns from "./common/AnnualSaleGoalMerge/columns";
+import { rollBack } from "@/api/business/spd/goal_management/publicInterface";
+import {
+  submit,
+  delAnnualSaleGoalMerge,
+  listAnnualSaleGoalMerge,
+} from "@/api/business/spd/goal_management/annualSaleGoalMerge";
+export default {
+  name: "AnnualSaleGoalMerge",
+  components: {
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    AsgmDetails: () => import("./common/AnnualSaleGoalMerge/details/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+    ElPopoverTreeSelect: () =>
+      import("@/components/popover-tree-select/index.vue"),
+  },
+  dicts: [...dicts, "oa_templete_id"],
+  data() {
+    const { SearchColumns, TableColumns } = useColumns();
+    const params = this.$init.params(SearchColumns);
+    const page = this.$init.page();
+    return {
+      page,
+      params,
+      TableColumns,
+      SearchColumns,
+      size: "mini",
+      loading: false,
+      tableData: [],
+      addType: "add",
+      rowDetails: {},
+    };
+  },
+  created() {
+    this.getList(this.params, this.page);
+  },
+  methods: {
+    async getList(params, page) {
+      try {
+        this.loading = true;
+        let queryParams = {
+          ...params,
+          ...page,
           params: {
-            beginTime: null,
-            endTime: null
-          }
-        },
-        documentDateRange: null,
-        pickerOptions: {
-          shortcuts: [{
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        // 表单参数
-        form: {
-          id: null,
-          code: null,
-          goalName: null,
-          documentDate: null,
-          annual: null,
-          creatorCode: null,
-          creator: null,
-          deptId: null,
-          dept: null,
-          goalCategory: null,
-          goalTotal: null,
-          notes: null,
-          status: null,
-          delFlag: null,
-          saleZoneCode: null,
-          saleZone: null,
-          oneLevelClassifyCode: null,
-          oneLevelClassify: null,
-          twoLevelClassifyCode: null,
-          twoLevelClassify: null,
-          annualGoalMergeDetailsList: null,
-          oldAnnualGoalMergeDetailsList: null
-        },
-        formDetails: {
-          id: null,
-          mergeCode: null,
-          saleOrg: null,
-          saleZone: null,
-          custom: null,
-          creator: null,
-          oneLevelClassifyCode: null,
-          oneLevelClassify: null,
-          twoLevelClassifyCode: null,
-          twoLevelClassify: null,
-          goalSum: null,
-          januaryGoal: null,
-          februaryGoal: null,
-          marchGoal: null,
-          aprilGoal: null,
-          mayGoal: null,
-          juneGoal: null,
-          julyGoal: null,
-          augustGoal: null,
-          septemberGoal: null,
-          octoberGoal: null,
-          novemberGoal: null,
-          decemberGoal: null,
-          delFlag: null
-        },
-        // 表单校验
-        rules: {
-          documentDate: [{
-            required: true,
-            message: '单据日期不能为空',
-            trigger: 'blur'
-          }],
-          annual: [{
-            required: true,
-            message: '年度不能为空',
-            trigger: 'blur'
-          }],
-          creator: [{
-            required: true,
-            message: '制单人不能为空',
-            trigger: 'blur'
-          }],
-          dept: [{
-            required: true,
-            message: '部门不能为空',
-            trigger: 'blur'
-          }],
-          goalCategory: [{
-            required: true,
-            message: '目标类型不能为空',
-            trigger: 'blur'
-          }],
-          saleZone: [],
-          oneLevelClassify: [],
-          twoLevelClassify: []
-        },
-        // 树形参照
-        referCondition: {
-          type: '',
-          isPage: true,
-          title: '',
-          index: null
-        },
-        classOptions: [],
-        // 目标分类
-        goalCategoryList: [{
-          label: '销售区域',
-          value: '销售区域'
-        }, {
-          label: '一级分类',
-          value: '一级分类'
-        }, {
-          label: '二级分类',
-          value: '二级分类'
-        }],
-        activeName: 'annualSaleGoalMergeDetails',
-        // 用户导入参数
-        upload: {
-          // 是否显示弹出层（用户导入）
-          open: false,
-          // 弹出层标题（用户导入）
-          title: "",
-          // 是否禁用上传
-          isUploading: false,
-          // 是否更新已经存在的用户数据
-          updateSupport: 0,
-          // 设置上传的请求头部
-          headers: {
-            Authorization: "Bearer " + getToken()
+            beginTime: params.documentDateRange
+              ? params.documentDateRange[0]
+              : null,
+            endTime: params.documentDateRange
+              ? params.documentDateRange[1]
+              : null,
           },
-          // 上传的地址
-          url: process.env.VUE_APP_BASE_API + "/goal_management/annualSaleGoalMerge/importData"
+        };
+        delete queryParams.documentDateRange;
+        let { code, rows, total } = await listAnnualSaleGoalMerge({
+          ...queryParams,
+        });
+        if (code == 200) {
+          this.tableData = rows;
+          this.page.total = total;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 重置
+    useReset() {
+      this.params = this.$init.params(this.SearchColumns);
+      this.page = this.$init.page();
+      this.getList(this.params, this.page);
+    },
+    // 新增
+    handleAdd() {
+      this.addType = "add";
+      const { setVisible } = this.$refs.AnnualSaleGoalMergeDetails;
+      setVisible(true);
+    },
+    // 导出
+    handleCommand(command) {
+      let url = "";
+      let fileName = "";
+      switch (command) {
+        case "export":
+          url = "goal_management/annualSaleGoalMerge/export";
+          fileName = "annualSaleGoalMerge";
+          break;
+        case "exportDetails":
+          url = "goal_management/annualSaleMergeDetails/export";
+          fileName = "annualSaleMergeDetails";
+          break;
+        case "exportZoneSum":
+          url = "goal_management/annualSaleMergeDetails/exportZoneSum";
+          fileName = "zoneSum";
+          break;
+        case "exportCustomSum":
+          url = "goal_management/annualSaleMergeDetails/exportCustomSum";
+          fileName = "customSum";
+          break;
+        default:
+          break;
+      }
+      this.download(
+        url,
+        {
+          ...this.params,
+          ...this.page,
         },
-        //打开状态
-        openStatus: null,
-      };
+        `${fileName}_${new Date().getTime()}.xlsx`
+      );
     },
-    created() {
-      this.getList();
+    // 查看
+    useSee(row) {
+      this.addType = "see";
+      this.rowDetails = row;
+      const { setVisible } = this.$refs.AnnualSaleGoalMergeDetails;
+      setVisible(true);
     },
-    methods: {
-      /** 查询年度销售目标明细列表 */
-      getList() {
-        this.loading = true;
-        listAnnualSaleGoalMerge(this.queryParams).then(response => {
-          this.annualSaleGoalMergeList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-          this.annualSaleGoalMergeList.forEach(item => {
-            item.goalTotal = item.goalTotal.toFixed(2);
-          })
-        });
-      },
-      getListDetails() {
-        this.loading = true;
-        getAnnualSaleMergeDetails(this.form.id).then(response => {
-          console.log(response);
-          this.annualSaleGoalMergeDetailsList = response.data;
-          this.computeTotal()
-          this.form.annualGoalMergeDetailsList = this.annualSaleGoalMergeDetailsList
-          updateAnnualSaleGoalMerge(this.form).then(response => {
-            this.$modal.msgSuccess("目标值汇总修改成功");
-          });
-          this.loading = false;
-        });
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.form = {
-          id: null,
-          code: null,
-          goalName: null,
-          documentDate: null,
-          annual: null,
-          creatorCode: null,
-          creator: null,
-          deptId: null,
-          dept: null,
-          goalCategory: null,
-          goalTotal: null,
-          notes: null,
-          status: null,
-          delFlag: null,
-          saleZoneCode: null,
-          saleZone: null,
-          oneLevelClassifyCode: null,
-          oneLevelClassify: null,
-          twoLevelClassifyCode: null,
-          twoLevelClassify: null,
-          annualGoalMergeDetailsList: null,
-          oldAnnualGoalMergeDetailsList: null
-        };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.queryParams = {
-          pageNum: 1,
-          pageSize: 10,
-          code: null,
-          goalName: null,
-          documentDate: null,
-          annual: null,
-          creatorCode: null,
-          creator: null,
-          deptId: null,
-          dept: null,
-          goalCategory: null,
-          goalTotal: null,
-          notes: null,
-          status: null,
-          delFlag: null,
-          saleZoneCode: null,
-          saleZone: null,
-          oneLevelClassifyCode: null,
-          oneLevelClassify: null,
-          twoLevelClassifyCode: null,
-          twoLevelClassify: null,
-          params: {
-            beginTime: null,
-            endTime: null
-          }
-        }
-        this.documentDateRange = null
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map(item => item.id)
-        this.single = selection.length !== 1
-        this.multiple = !selection.length
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.openStatus = 'add';
-        this.reset();
-        this.annualSaleGoalMergeDetailsList = []
-        this.areaDetailList = []
-        this.customerDetailList = []
-        this.activeName = 'annualSaleGoalMergeDetails'
-        this.open = true;
-        this.title = "添加--年度销售目标合并明细";
-        this.form.documentDate = new Date().getFullYear().toString() + '-' + (new Date().getMonth() + 1).toString()
-          .padStart(2, '0') + '-' + new Date().getDate().toString().padStart(2, '0')
-        this.form.annual = new Date().getFullYear().toString()
-        this.form.creatorCode = this.$store.state.user.name
-        this.form.creator = this.$store.state.user.nickName
-        this.form.deptId = this.$store.state.user.deptId
-        this.form.dept = this.$store.state.user.deptName
-      },
-      handleAddDetails() {
-        if (this.activeName !== 'annualSaleGoalMergeDetails') {
-          return this.$message.error('当前标签不是‘年度销售目标合并明细’')
-        }
-        let list = {
-          id: null,
-          mergeCode: null,
-          saleOrg: null,
-          saleZone: null,
-          custom: null,
-          creator: null,
-          oneLevelClassifyCode: null,
-          oneLevelClassify: null,
-          twoLevelClassifyCode: null,
-          twoLevelClassify: null,
-          goalSum: null,
-          januaryGoal: null,
-          februaryGoal: null,
-          marchGoal: null,
-          aprilGoal: null,
-          mayGoal: null,
-          juneGoal: null,
-          julyGoal: null,
-          augustGoal: null,
-          septemberGoal: null,
-          octoberGoal: null,
-          novemberGoal: null,
-          decemberGoal: null,
-          delFlag: null
-        }
-        this.annualSaleGoalMergeDetailsList.push(list)
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.openStatus = 'edit';
-        this.reset();
-        const id = row.id || this.ids
-        this.activeName = 'annualSaleGoalMergeDetails'
-        this.areaDetailList = []
-        this.customerDetailList = []
-        getAnnualSaleGoalMerge(id).then(response => {
-          console.log(response);
-          this.form = response.data;
-          this.form.goalTotal = this.form.goalTotal.toFixed(2)
-          for (const element of this.form.annualGoalMergeDetailsList) {
-            element.totalGoal = element.totalGoal.toFixed(2)
-          }
-          this.annualSaleGoalMergeDetailsList = JSON.parse(JSON.stringify(this.form.annualGoalMergeDetailsList))
-          this.open = true;
-          this.title = "修改--年度销售目标合并明细";
-        });
-      },
-      //双击行
-      useDoubleClick(row) {
-        this.openStatus = 'see';
-        this.reset();
-        const id = row.id || this.ids
-        this.activeName = 'annualSaleGoalMergeDetails'
-        this.areaDetailList = []
-        this.customerDetailList = []
-        getAnnualSaleGoalMerge(id).then(response => {
-          console.log(response);
-          this.form = response.data;
-          this.form.goalTotal = this.form.goalTotal.toFixed(2)
-          for (const element of this.form.annualGoalMergeDetailsList) {
-            element.totalGoal = element.totalGoal.toFixed(2)
-          }
-          this.annualSaleGoalMergeDetailsList = JSON.parse(JSON.stringify(this.form.annualGoalMergeDetailsList))
-          this.open = true;
-          this.title = "查看--年度销售目标合并明细";
-        });
-      },
-      // 复制按钮操作
-      handleCopy(id) {
-        this.openStatus = 'edit';
-        this.reset()
-        this.annualSaleGoalMergeDetailsList = []
-        this.areaDetailList = []
-        this.customerDetailList = []
-        this.activeName = 'annualSaleGoalMergeDetails'
-        getAnnualSaleGoalMerge(id).then(response => {
-          this.form = response.data
-          this.form.id = null
-          this.form.code = null
-          this.title = "添加--年度销售目标合并明细";
-          this.form.documentDate = new Date().getFullYear().toString() + '-' + (new Date().getMonth() + 1)
-            .toString().padStart(2, '0') + '-' + new Date().getDate().toString().padStart(2, '0')
-          this.form.annual = new Date().getFullYear().toString()
-          this.form.goalTotal = 0
-          this.form.goalTotal = this.form.goalTotal.toFixed(2)
-          this.open = true
-        })
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id != null) {
-              this.form.annualGoalMergeDetailsList = JSON.parse(JSON.stringify(this.annualSaleGoalMergeDetailsList))
-              console.log(this.form);
-              updateAnnualSaleGoalMerge(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
-            } else {
-              this.form.annualGoalMergeDetailsList = this.annualSaleGoalMergeDetailsList
-              this.form.status = '0'
-              console.log(this.form);
-              addAnnualSaleGoalMerge(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
+    // 修改
+    handleUpdate(row) {
+      this.addType = "edit";
+      this.rowDetails = row;
+      const { setVisible } = this.$refs.AnnualSaleGoalMergeDetails;
+      setVisible(true);
+    },
+    // 删除
+    handleDelete(row) {
+      this.$modal
+        .confirm("是否确认删除？")
+        .then(async () => {
+          try {
+            this.$modal.loading("处理中，请稍后...");
+            console.log(row.id, "id");
+            const { code, msg } = await delAnnualSaleGoalMerge(row.id);
+            if (code == 200) {
+              this.$modal.notifySuccess(msg);
+              this.getList(this.params, this.page);
             }
-          }
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const ids = row.id || this.ids;
-        this.$modal.confirm('是否确认删除年度销售目标单据编号为"' + row.code + '"的数据项？').then(function () {
-          return delAnnualSaleGoalMerge(ids);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-      },
-      handleDeleteDetails(index, row) {
-        if (this.form.id === null) { // 新增
-          this.annualSaleGoalMergeDetailsList.splice(index, 1)
-          this.computeTotal()
-        } else { // 修改
-          if (row.id !== null) {
-            this.$modal.confirm('是否确认删除年度销售目标明细序号为"' + (index + 1) + '"的数据项？').then(function () {
-              return delAnnualSaleMergeDetails(row.id);
-            }).then(() => {
-              this.getListDetails();
-              this.$modal.msgSuccess("删除成功");
-            }).catch(() => {});
-          } else {
-            this.annualSaleGoalMergeDetailsList.splice(index, 1)
-            this.$message.success('删除成功')
-            this.computeTotal()
-          }
-        }
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        this.download('goal_management/annualSaleGoalMerge/export', {
-          ...this.queryParams
-        }, `annualSaleGoalMerge_${new Date().getTime()}.xlsx`)
-      },
-      handleExportDetails() {
-        this.download('goal_management/annualSaleMergeDetails/export', {
-          ...this.queryParams
-        }, `annualSaleMergeDetails_${new Date().getTime()}.xlsx`)
-      },
-      // 导出区域目标汇总
-      handleExportZoneSum() {
-        this.download('goal_management/annualSaleMergeDetails/exportZoneSum', {
-          ...this.queryParams
-        }, `zoneSum_${new Date().getTime()}.xlsx`)
-      },
-      // 导出客户目标汇总
-      handleExportCustomSum() {
-        this.download('goal_management/annualSaleMergeDetails/exportCustomSum', {
-          ...this.queryParams
-        }, `customSum_${new Date().getTime()}.xlsx`)
-      },
-      // 树形参照
-      chooseTreeReferForQuery(type, isPage, title) {
-        this.referCondition.type = type
-        this.referCondition.isPage = isPage
-        this.referCondition.title = title
-        this.$refs.treeQuery.init(this.referCondition)
-      },
-      selectionsToInputForQuery(selection) {
-        this.classOptions = selection;
-        if (this.referCondition.title === '一级物料分类') {
-          if (this.classOptions[0].code.length > 2) {
-            return this.$message.info('请在一级分类下选择');
-          }
-          this.queryParams.oneLevelClassifyCode = selection[0].code
-          this.queryParams.oneLevelClassify = selection[0].name
-        } else if (this.referCondition.title === '二级物料分类') {
-          if (this.classOptions[0].code.lastIndexOf("-") == 3 || this.classOptions[0].code.indexOf("90") == 0) {
-            this.queryParams.twoLevelClassifyCode = selection[0].code
-            this.queryParams.twoLevelClassify = selection[0].name
-          } else {
-            return this.$message.info('请在二级分类下选择')
-          }
-        }
-      },
-      chooseTreeReferForMain(type, isPage, title) {
-        this.referCondition.type = type
-        this.referCondition.isPage = isPage
-        this.referCondition.title = title
-        this.$refs.treeMain.init(this.referCondition)
-      },
-      selectionsToInputForMain(selection) {
-        this.classOptions = selection;
-        if (this.referCondition.title === '一级物料分类') {
-          if (this.classOptions[0].code.length > 2) {
-            return this.$message.info('请在一级分类下选择');
-          }
-          this.form.oneLevelClassifyCode = selection[0].code
-          this.form.oneLevelClassify = selection[0].name
-        } else if (this.referCondition.title === '二级物料分类') {
-          if (this.classOptions[0].code.lastIndexOf("-") == 3 || this.classOptions[0].code.indexOf("90") == 0) {
-            this.form.twoLevelClassifyCode = selection[0].code
-            this.form.twoLevelClassify = selection[0].name
-          } else {
-            return this.$message.info('请在二级分类下选择')
-          }
-        }
-      },
-      chooseTreeReferForDetails(type, isPage, title, index) {
-        this.referCondition.type = type
-        this.referCondition.isPage = isPage
-        this.referCondition.title = title
-        this.referCondition.index = index
-        this.$refs.treeDetails.init(this.referCondition)
-      },
-      selectionsToInputForDetails(selection) {
-        this.classOptions = selection;
-        if (this.referCondition.title === '一级物料分类') {
-          if (this.classOptions[0].code.length > 2) {
-            return this.$message.info('请在一级分类中选择')
-          }
-          if (selection.code !== this.annualSaleGoalMergeDetailsList[this.referCondition.index].oneLevelClassifyCode) {
-            this.annualSaleGoalMergeDetailsList[this.referCondition.index].twoLevelClassifyCode = null
-            this.annualSaleGoalMergeDetailsList[this.referCondition.index].twoLevelClassify = null
-          }
-          this.annualSaleGoalMergeDetailsList[this.referCondition.index].oneLevelClassifyCode = selection.code
-          this.annualSaleGoalMergeDetailsList[this.referCondition.index].oneLevelClassify = selection.name
-        } else if (this.referCondition.title === '二级物料分类') {
-          if (this.classOptions[0].code.lastIndexOf("-") == 3 || this.classOptions[0].code.indexOf("90") == 0) {
-            return this.$message.info('请在二级分类中选择')
-          } else if (selection.code[0] !== this.annualSaleGoalMergeDetailsList[this.referCondition.index]
-            .oneLevelClassifyCode) {
-            return this.$message.error('所选择的二级物料分类不属于一级分类')
-          }
-          this.annualSaleGoalMergeDetailsList[this.referCondition.index].twoLevelClassifyCode = selection.code
-          this.annualSaleGoalMergeDetailsList[this.referCondition.index].twoLevelClassify = selection.name
-        }
-      },
-      changeGoalCategoryForm() {
-        let condition = this.form.goalCategory
-        if (condition === '销售区域') {
-          this.form.oneLevelClassifyCode = null
-          this.form.oneLevelClassify = null
-          this.form.twoLevelClassifyCode = null
-          this.form.twoLevelClassify = null
-          this.rules.saleZone = [{
-            required: true,
-            message: '销售区域不能为空',
-            trigger: 'blur'
-          }]
-          this.rules.oneLevelClassify = []
-          this.rules.twoLevelClassify = []
-        } else if (condition === '一级分类') {
-          this.form.saleZoneCode = null
-          this.form.saleZone = null
-          this.form.twoLevelClassifyCode = null
-          this.form.twoLevelClassify = null
-          this.rules.saleZone = []
-          this.rules.oneLevelClassify = [{
-            required: true,
-            message: '一级分类不能为空',
-            trigger: 'blur'
-          }]
-          this.rules.twoLevelClassify = []
-        } else if (condition === '二级分类') {
-          this.form.saleZoneCode = null
-          this.form.saleZone = null
-          this.form.oneLevelClassifyCode = null
-          this.form.oneLevelClassify = null
-          this.rules.saleZone = []
-          this.rules.oneLevelClassify = []
-          this.rules.twoLevelClassify = [{
-            required: true,
-            message: '二级分类不能为空',
-            trigger: 'blur'
-          }]
-        } else {
-          this.form.saleZoneCode = null
-          this.form.saleZone = null
-          this.form.oneLevelClassifyCode = null
-          this.form.oneLevelClassify = null
-          this.form.twoLevelClassifyCode = null
-          this.form.twoLevelClassify = null
-          this.rules.saleZone = []
-          this.rules.oneLevelClassify = []
-          this.rules.twoLevelClassify = []
-        }
-      },
-      // 关闭抽屉
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      },
-      // 复制明细
-      handleCopyDetails(row) {
-        let list = {
-          id: null,
-          mergeCode: row.mergeCode,
-          saleOrg: row.saleOrg,
-          saleZone: row.saleZone,
-          custom: row.custom,
-          creator: row.creator,
-          oneLevelClassifyCode: row.oneLevelClassifyCode,
-          oneLevelClassify: row.oneLevelClassify,
-          twoLevelClassifyCode: row.twoLevelClassifyCode,
-          twoLevelClassify: row.twoLevelClassify,
-          totalGoal: row.totalGoal,
-          januaryGoal: row.januaryGoal,
-          februaryGoal: row.februaryGoal,
-          marchGoal: row.marchGoal,
-          aprilGoal: row.aprilGoal,
-          mayGoal: row.mayGoal,
-          juneGoal: row.juneGoal,
-          julyGoal: row.julyGoal,
-          augustGoal: row.augustGoal,
-          septemberGoal: row.septemberGoal,
-          octoberGoal: row.octoberGoal,
-          novemberGoal: row.novemberGoal,
-          decemberGoal: row.decemberGoal,
-          delFlag: row.delFlag
-        }
-        this.annualSaleGoalMergeDetailsList.push(list)
-        this.computeTotal()
-      },
-      // 计算子表合计
-      computeTotalDetails(index, row) {
-        let array = [row.januaryGoal, row.februaryGoal, row.marchGoal, row.aprilGoal, row.mayGoal, row.juneGoal, row
-          .julyGoal, row.augustGoal, row.septemberGoal, row.octoberGoal, row.novemberGoal, row.decemberGoal
-        ]
-        let sum = 0
-        for (const element of array) {
-          sum = (sum * 1000000 + element * 1000000) / 1000000
-        }
-        this.annualSaleGoalMergeDetailsList[index].totalGoal = sum
-        this.computeTotal()
-      },
-      // 计算主表合计
-      computeTotal() {
-        let list = this.annualSaleGoalMergeDetailsList
-        let sum = 0
-        for (const listElement of list) {
-          if (listElement.totalGoal === null) {
-            listElement.totalGoal = 0
-          }
-          sum = (sum * 1000000 + listElement.totalGoal * 1000000) / 1000000
-        }
-        this.form.goalTotal = sum.toFixed(2)
-      },
-      getSummaries(param) {
-        return getSummary(param)
-      },
-      // 合并数据
-      clickMerge() {
-        if (this.form.id !== null) {
-          this.form.oldAnnualGoalMergeDetailsList = JSON.parse(JSON.stringify(this.form.annualGoalMergeDetailsList))
-        }
-        if (this.activeName !== 'annualSaleGoalMergeDetails') {
-          return this.$message.error('当前标签不是年销售目标合并明细')
-        }
-        let query = JSON.parse(JSON.stringify(this.form))
-        query.annualGoalMergeDetailsList = []
-        console.log(query);
-        if (query.goalCategory === null || query.goalCategory === '') {
-          return this.$message.error('请输入目标分类')
-        } else if (query.goalCategory === '销售区域') {
-          if (query.saleZone === null) {
-            return this.$message.error('请输入销售区域')
-          }
-        } else if (query.goalCategory === '一级分类') {
-          if (query.oneLevelClassify === null) {
-            return this.$message.error('请输入一级分类')
-          }
-        } else if (query.goalCategory === '二级分类') {
-          if (query.twoLevelClassify === null) {
-            return this.$message.error('请输入二级分类')
-          }
-        }
-        console.log(query, 'query')
-        mergeAnnualSaleMergeDetails(query).then(response => {
-          console.log(response, 'response');
-          if (response.data.consolidatedDetail.length > 0) {
-            // for (const consolidatedDetail of response.data.consolidatedDetail) {
-            //   consolidatedDetail.totalGoal = consolidatedDetail.totalGoal.toFixed(2)
-            // }
-            this.annualSaleGoalMergeDetailsList = response.data.consolidatedDetail
-            this.computeTotal()
-          } else {
-            return this.$message.warning('未查到相关数据')
+          } catch (error) {
+          } finally {
+            this.$modal.closeLoading();
           }
         })
-      },
-      // 获得区域目标汇总or客户目标汇总
-      getNewTwoArray() {
-        let arr = JSON.parse(JSON.stringify(this.annualSaleGoalMergeDetailsList))
-        // 如果子表标签是annualSaleGoalMergeDetails 或者 主表的目标分类是“销售区域”
-        if (this.activeName === 'annualSaleGoalMergeDetails') {
-          this.areaDetailList = null
-          this.customerDetailList = null
-          return
-        }
-        // 根据某三个属性进行合并并相加totalGoal的函数
-        const mergeAndSumTotalGoal = (array) => {
-          return Array.from(array.reduce((map, obj) => {
-            let key = null
-            if (this.activeName === 'zoneGoalSum(year)') {
-              key = `${obj.saleOrg}-${obj.saleZone}-${obj.creator}`
-            } else if (this.activeName === 'customerGoalSum(year)') {
-              key = `${obj.saleOrg}-${obj.saleZone}-${obj.custom}`
-            }
-            console.log(key);
-            if (map.has(key)) {
-              const existingObj = map.get(key)
-              existingObj.totalGoal = parseFloat(existingObj.totalGoal)
-              existingObj.totalGoal += parseFloat(obj.totalGoal)
-              existingObj.totalGoal = existingObj.totalGoal.toFixed(2)
-              existingObj.januaryGoal += obj.januaryGoal
-              existingObj.februaryGoal += obj.februaryGoal
-              existingObj.marchGoal += obj.marchGoal
-              existingObj.aprilGoal += obj.aprilGoal
-              existingObj.mayGoal += obj.mayGoal
-              existingObj.juneGoal += obj.juneGoal
-              existingObj.julyGoal += obj.julyGoal
-              existingObj.augustGoal += obj.augustGoal
-              existingObj.septemberGoal += obj.septemberGoal
-              existingObj.octoberGoal += obj.octoberGoal
-              existingObj.novemberGoal += obj.novemberGoal
-              existingObj.decemberGoal += obj.decemberGoal
-            } else {
-              map.set(key, {
-                ...obj
-              })
+        .catch(() => {});
+    },
+    // 收回
+    async handleReback(row) {
+      this.$modal
+        .confirm("是否确认收回？")
+        .then(async () => {
+          try {
+            this.$modal.loading("处理中，请稍后...");
+            const { code: billCode, flowId: fdId, createBy: billMaker } = row;
+            let params = {
+              fdId,
+              billCode,
+              billMaker,
+              type: "2",
+              fdTemplateId: this.dict.type.oa_templete_id.find((item) => {
+                return item.label == "销售目标";
+              }).value,
+            };
+
+            const { code, msg } = await rollBack(params);
+            if (code == 200) {
+              this.$modal.notifySuccess(msg);
+              this.getList(this.params, this.page);
             }
-            return map
-          }, new Map()).values())
-        }
-        // 调用合并函数
-        const mergedArray = mergeAndSumTotalGoal(arr)
-        if (this.activeName === 'zoneGoalSum(year)') {
-          this.areaDetailList = mergedArray
-        } else if (this.activeName === 'customerGoalSum(year)') {
-          this.customerDetailList = mergedArray
-        }
-      },
-      setBeginAndEnd() {
-        let array = this.documentDateRange
-        if (array !== null) {
-          this.queryParams.params.beginTime = array[0]
-          this.queryParams.params.endTime = array[1]
-        } else {
-          this.queryParams.params.beginTime = null
-          this.queryParams.params.endTime = null
-        }
-      },
-      handleCommand(command) {
-        // 执行对应的功能
-        if (command === 'export') {
-          console.log('导出主表');
-          this.handleExport()
-        } else if (command === 'exportDetails') {
-          console.log('导出明细');
-          this.handleExportDetails()
-        } else if (command === 'exportZoneSum') {
-          console.log('导出区域目标汇总')
-          this.handleExportZoneSum()
-        } else if (command === 'exportCustomSum') {
-          console.log('导出客户目标汇总')
-          this.handleExportCustomSum()
-        }
-      },
-      /** 导入按钮操作 */
-      handleImport() {
-        this.upload.open = true;
-        this.upload.title = "年销售目标合并导入";
-        this.upload.url = process.env.VUE_APP_BASE_API + "goal_management/annualSaleGoalMerge/importData"
-      },
-      /** 下载模板操作 */
-      importTemplate() {
-        this.download('goal_management/annualSaleGoalMerge/importTemplate', {},
-          `annualSaleGoalMerge_${new Date().getTime()}.xlsx`)
-      },
-      // 文件上传中处理
-      handleFileUploadProgress(event, file, fileList) {
-        this.upload.isUploading = true;
-      },
-      // 文件上传成功处理
-      handleFileSuccess(response, file, fileList) {
-        console.log(response);
-        this.upload.open = false;
-        this.upload.isUploading = false;
-        this.$refs.upload.clearFiles();
-        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response
-          .msg + "</div>", "导入结果", {
-            dangerouslyUseHTMLString: true
-          });
-        this.getList();
-      },
-      // 提交上传文件
-      submitFileForm() {
-        this.$refs.upload.submit();
-      },
-      //提交
-      async handleSubmit(row) {
-        this.$modal.loading("提交中...");
-        try {
-          const {
-            msg,
-            code
-          } = await submit(row.id);
-          if (code === 200) {
-            this.$modal.notifySuccess("提交成功");
+          } catch (error) {
+          } finally {
             this.$modal.closeLoading();
-            row.status = '1';
           }
-        } catch (err) {
-          console.error(err);
-          this.$modal.closeLoading();
-        }
-      },
-      //收回
-      handleReback(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,
-          type: "2"
-        }
-        rollBack(params).then(res => {
-          if (res.code === 200) {
-            this.$modal.notifySuccess("收回成功");
+        })
+        .catch(() => {});
+    },
+    // 提交
+    handleSubmit(row) {
+      this.$modal
+        .confirm("是否确认提交？")
+        .then(async () => {
+          try {
+            this.$modal.loading("处理中，请稍后...");
+            const { code, msg } = await submit(row.id);
+            if (code == 200) {
+              this.$modal.notifySuccess(msg);
+              this.getList(this.params, this.page);
+            }
+          } catch (error) {
+          } finally {
             this.$modal.closeLoading();
             row.status = '0';
           }
-        }).catch(err => {
-          this.$message.error(err);
-          this.$modal.closeLoading();
         })
-      },
-    }
-  };
-
+        .catch(() => {});
+    },
+    // 目标类型
+    goalCategoryClear(prop) {
+      prop.oneLevelClassify = null;
+      prop.oneLevelClassifyCode = null;
+      prop.twoLevelClassify = null;
+      prop.twoLevelClassifyCode = null;
+      prop.saleZone = null;
+      prop.saleZoneCode = null;
+    },
+    // 一级分类
+    changeOneLevel(row, { prop, columns }) {
+      const select = prop[0];
+      if (select.code.length > 2) {
+        row.oneLevelClassify = null;
+        row.oneLevelClassifyCode = null;
+        return this.$message.warning("请选择一级分类");
+      }
+    },
+    // 二级分类
+    changeTwoLevel(row, { prop, columns }) {
+      const select = prop[0];
+      if (
+        !(select.code.lastIndexOf("-") == 3 || select.code.indexOf("90") == 0)
+      ) {
+        row.twoLevelClassify = null;
+        row.twoLevelClassifyCode = null;
+        return this.$message.warning("请选择二级分类");
+      }
+    },
+  },
+};
 </script>
+
+<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;
+}
+</style>

src/views/business/spd/target/common/AnnualSaleGoal/batchUpdate/column.js

@@ -0,0 +1,42 @@
+export const Columns = [
+  {
+    item: { key: "saleOrg", title: "销售组织" },
+    attr: {
+      is: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "ORG_PARAM",
+      // dataMapping: { updateData: 'name' },
+      placeholder: "请输入销售组织",
+    },
+  },
+  {
+    item: { key: "saleZone", title: "销售区域" },
+    attr: {
+      is: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "MK_SALESAREA_PARAM",
+      // dataMapping: { updateData: 'name' },
+      placeholder: "请输入销售区域",
+    },
+  },
+  {
+    item: { key: "custom", title: "客户" },
+    attr: {
+      is: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "CUSTOMER_PARAM",
+      // dataMapping: { updateData: 'name' },
+      placeholder: "请输入客户",
+    },
+  },
+  {
+    item: { key: "creator", title: "制单人" },
+    attr: {
+      is: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "CONTACTS_PARAM",
+      // dataMapping: { updateData: 'name' },
+      placeholder: "请输入制单人",
+    },
+  },
+];

src/views/business/spd/target/common/AnnualSaleGoal/batchUpdate/index.vue

@@ -0,0 +1,115 @@
+<script>
+import { Columns } from "./column";
+export default {
+  name: "BatchUpdate",
+  props: {},
+  components: {
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+  },
+  data() {
+    return {
+      title: "批量修改",
+      visible: false,
+      params: {
+        key: null,
+        value: null,
+      },
+      Columns,
+      rules: {
+        key: [{ required: true, message: "修改项不能为空", trigger: "blur" }],
+        value: [{ required: true, message: "修改值不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  computed: {
+    innerValue: {
+      get() {
+        const { Columns, params } = this;
+        return Columns.filter(({ item, attr }) => item.key === params.key)[0];
+      },
+      set() {},
+    },
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    useConfirm(prop) {
+      this.$refs[prop].validate((valid, obj) => {
+        if (valid) {
+          const { params } = this;
+          if (params.key && params.key != "") {
+            this.$emit("confirm", this.params);
+            this.hide();
+          }
+        } else {
+        }
+      });
+    },
+    hide() {
+      this.params = {
+        key: null,
+        value: null,
+      };
+      this.visible = false;
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-button v-on="$listeners" v-bind="$attrs" @click="open">
+    {{ title }}
+    <el-dialog
+      :title="title"
+      :show-close="false"
+      :visible.sync="visible"
+      width="50%"
+      append-to-body
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form
+        inline
+        ref="form"
+        :rules="rules"
+        :model="params"
+        label-width="80px"
+        :size="$attrs.size"
+      >
+        <el-form-item label="修改项" prop="key">
+          <el-select
+            v-model="params.key"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="({ item, attr }, index) in Columns"
+              :label="item.title"
+              :value="item.key"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="修改值" prop="value">
+          <component
+            v-if="innerValue"
+            v-bind="innerValue.attr"
+            v-model="params.value"
+            :size="$attrs.size"
+          >
+          </component>
+          <el-input v-else placeholder="请输入修改项" disabled></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          :size="$attrs.size"
+          @click="useConfirm('form')"
+          >确 定</el-button
+        >
+        <el-button :size="$attrs.size" @click="hide">取 消</el-button>
+      </div>
+    </el-dialog>
+  </el-button>
+</template>

src/views/business/spd/target/common/AnnualSaleGoal/columns.js

@@ -0,0 +1,198 @@
+// 年度销售目标填报
+export default function useColumns() {
+  const SearchColumns = [
+    {
+      item: { key: "code", title: "编码" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入编码",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "goalName", title: "目标名称" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入年度销售目标名称",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "documentDateRange", title: "单据日期" },
+      attr: {
+        is: "el-date-picker",
+        type: "daterange",
+        valueFormat: "yyyy-MM-dd",
+        align: "right",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        placeholder: "请选择单据日期",
+        pickerOptions: pickerOptions,
+      }
+    },
+    {
+      item: { key: "annual", title: "年度" },
+      attr: {
+        is: "el-date-picker",
+        type: "year",
+        valueFormat: "yyyy",
+        placeholder: "选择年度",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "custom", title: "客户" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CUSTOMER_PARAM",
+        dataMapping: {
+          customCode: 'code',
+        },
+        placeholder: "请输入客户",
+      }
+    },
+    {
+      item: { key: "saleZone", title: "销售区域" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "MK_SALESAREA_PARAM",
+        dataMapping: {
+          saleZoneCode: 'code',
+        },
+        placeholder: "请输入销售区域",
+      }
+    },
+    {
+      item: { key: "creator", title: "制单人" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: {
+          creatorCode: 'code',
+        },
+        placeholder: "请输入制单人",
+      }
+    },
+    {
+      item: { key: "dept", title: "部门" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "DEPT_PARAM",
+        dataMapping: {
+          deptId: 'id',
+        },
+        placeholder: "请输入部门",
+      }
+    },
+    {
+      item: { key: "status", title: "单据状态" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_status",
+        clearable: true,
+      }
+    },
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "status", title: "状态", width: 100, },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "sys_status",
+      }
+    },
+    {
+      item: { key: "code", title: "编码", },
+      attr: {}
+    },
+    {
+      item: { key: "goalName", title: "目标名称", },
+      attr: {}
+    },
+    {
+      item: { key: "documentDate", title: "单据日期", width: 100, },
+      attr: {}
+    },
+    {
+      item: { key: "annual", title: "年度", width: 100, },
+      attr: {}
+    },
+    {
+      item: { key: "custom", title: "客户", },
+      attr: {}
+    },
+    {
+      item: { key: "saleZone", title: "销售区域", },
+      attr: {}
+    },
+    {
+      item: { key: "creator", title: "制单人", width: 100, },
+      attr: {}
+    },
+    {
+      item: { key: "dept", title: "部门", },
+      attr: {}
+    },
+    {
+      item: { key: "goalTotal", title: "目标合计（元）", },
+      attr: {
+        formatter: (prop) => {
+          return prop.goalTotal ? (prop.goalTotal * 1).toFixed(2) : prop.goalTotal;
+        },
+      }
+    },
+    {
+      item: { key: "notes", title: "备注", },
+      attr: {}
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      sortabled: true,
+      fixedabled: true,
+      filterabled: true,
+      hiddenabled: true,
+    },
+  }));
+
+  const pickerOptions = {
+    shortcuts: [
+      {
+        text: "最近一周",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+      {
+        text: "最近一个月",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+      {
+        text: "最近三个月",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+    ],
+  }
+  return { SearchColumns, TableColumns }
+}

src/views/business/spd/target/common/AnnualSaleGoal/details/columns.js

@@ -0,0 +1,306 @@
+export default function useColumns() {
+  const FormColumns = [
+    {
+      item: { key: "code", title: "编码", },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+        placeholder: "编码后端自动生成",
+      },
+    },
+    {
+      item: { key: "goalName", title: "目标名称", },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+        placeholder: "目标名称后端自动生成",
+      },
+    },
+    {
+      item: { key: "documentDate", title: "单据日期", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        format: "yyyy-MM-dd",
+        placeholder: "选择日期",
+      },
+    },
+    {
+      item: { key: "annual", title: "年度", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "year",
+        format: "yyyy",
+        placeholder: "选择年度",
+      },
+    },
+    {
+      item: { key: "custom", title: "客户", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CUSTOMER_PARAM",
+        dataMapping: {
+          customCode: 'code',
+        },
+        placeholder: "请输入客户",
+      },
+    },
+    {
+      item: { key: "saleZone", title: "销售区域", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "MK_SALESAREA_PARAM",
+        dataMapping: {
+          saleZoneCode: 'code',
+        },
+        placeholder: "请输入销售区域",
+      },
+    },
+    {
+      item: { key: "creator", title: "制单人", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: {
+          creatorCode: 'code',
+        },
+        placeholder: "请输入制单人",
+      },
+    },
+    {
+      item: { key: "dept", title: "部门", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "DEPT_PARAM",
+        dataMapping: {
+          deptId: 'id',
+        },
+        placeholder: "请输入部门",
+      },
+    },
+    {
+      item: { key: "goalTotal", title: "目标合计（元）", },
+      attr: {
+        is: "el-input-number",
+        placeholder: "目标合计自动计算",
+        disabled: true,
+        precision: 2,
+        controlsPosition: "right",
+      },
+    },
+    {
+      item: { key: "notes", title: "备注", },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入备注",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "status", title: "单据状态", },
+      attr: {
+        is: "el-select",
+        dictName: "sys_status",
+        disabled: true,
+      },
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6
+    },
+  }));
+
+  const TabColumns = [
+    {
+      item: { key: "annualGoalMergeDetails", title: "年销售目标填报明细", },
+      attr: { value: [] },
+      TableColumns: [
+        {
+          item: { key: "oneLevelClassify", title: "一级分类", },
+          attr: {},
+        },
+        {
+          item: { key: "twoLevelClassify", title: "二级分类", },
+          attr: {},
+        },
+        {
+          item: { key: "material", title: "物料", },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "MATERIAL_PARAM",
+            dataMapping: {
+              materialCode: 'code',
+              oneLevelClassify: 'oneClass',
+              // oneLevelClassifyCode: 'oneClass',
+              twoLevelClassify: 'twoClass',
+              // twoLevelClassifyCode: 'twoClass',
+            },
+            placeholder: "请输入物料",
+          },
+        },
+        {
+          item: { key: "totalGoal", title: "合计（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            disabled: true,
+            isSummary: true,
+            // formatter: (prop) => {
+            //   const month = ['januaryGoal', 'februaryGoal', 'marchGoal', 'aprilGoal', 'mayGoal', 'juneGoal',
+            //     'julyGoal', 'augustGoal', 'septemberGoal', 'octoberGoal', 'novemberGoal', 'decemberGoal'];
+
+            //   return month.reduce((sum, item) => {
+            //     return sum += (prop[item] ? prop[item] : 0) * 1
+            //   }, 0).toFixed(2);
+            // },
+          },
+        },
+        {
+          item: { key: "januaryGoal", title: "一月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "februaryGoal", title: "二月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "marchGoal", title: "三月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "aprilGoal", title: "四月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "mayGoal", title: "五月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "juneGoal", title: "六月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "julyGoal", title: "七月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "augustGoal", title: "八月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "septemberGoal", title: "九月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "octoberGoal", title: "十月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "novemberGoal", title: "十一月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "decemberGoal", title: "十二月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+
+      ],
+    },
+  ];
+  return { FormColumns, TabColumns }
+}

src/views/business/spd/target/common/AnnualSaleGoal/details/index.vue

@@ -0,0 +1,546 @@
+<!-- 年度销售目标填报-详情 -->
+<script>
+import useColumns from "./columns";
+import { importData } from "@/api/business/spd/goal_management/annualSaleGoalDetails";
+import {
+  getAnnualSaleGoal,
+  addAnnualSaleGoal,
+  updateAnnualSaleGoal,
+} from "@/api/business/spd/goal_management/annualSaleGoal";
+
+export default {
+  name: "annualSaleGoalDetails",
+  props: {
+    dict: {
+      type: Object,
+    },
+    data: {
+      type: Object,
+    },
+    addType: {
+      type: String,
+      default: "add",
+    },
+  },
+  components: {
+    BatchUpdate: () => import("../batchUpdate/index.vue"),
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+    BatchImport: () => import("@/components/BatchImport/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+  },
+  data() {
+    const {
+      FormColumns,
+      TabColumns,
+      TabColumns: [
+        {
+          item: { key: tabName },
+        },
+      ],
+    } = useColumns();
+    const params = this.$init.params(FormColumns);
+    const rules = this.$init.rules(FormColumns);
+    return {
+      width: "100%",
+      visible: false,
+      loading: false,
+      params: {
+        ...params,
+        annualGoalMergeDetails: [],
+      },
+      rules,
+      tabName,
+      TabColumns,
+      FormColumns,
+    };
+  },
+  computed: {
+    title: {
+      get() {
+        const { addType } = this.$props;
+        if (addType === "see") {
+          return "查 看";
+        } else if (addType === "edit") {
+          return "编 辑";
+        } else {
+          return "新 增";
+        }
+      },
+      sest() {},
+    },
+    tableHeight: {
+      get() {
+        return window.innerHeight - 320;
+      },
+      set() {},
+    },
+  },
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    // 关闭
+    hide() {
+      this.visible = false;
+      const {
+        FormColumns,
+        TabColumns: [
+          {
+            item: { key: tabName },
+          },
+        ],
+      } = useColumns();
+      this.params = {
+        ...this.$init.params(FormColumns),
+        annualGoalMergeDetails: [],
+      };
+      this.tabName = tabName;
+      this.$emit("refresh");
+    },
+    //
+    beforeOpen() {
+      const { addType, data } = this.$props;
+      const { name, nickName, deptId, deptName } = this.$store.state.user;
+      if (addType === "add") {
+        this.params = {
+          ...this.params,
+          creator: nickName,
+          creatorCode: name,
+          dept: deptName,
+          deptId,
+          annual: new Date().Format("yyyy"),
+          documentDate: new Date().Format("yyyy-MM-dd"),
+          goalTotal: 0,
+        };
+        this.addRow(this.tabName);
+      } else {
+        this.fetchItem(data);
+      }
+    },
+    //
+    async fetchItem(prop) {
+      try {
+        this.loading = true;
+        const { id } = prop;
+        let { code, data } = await getAnnualSaleGoal(id);
+        if (code == 200) {
+          this.params = data;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 保存
+    useSave(prop) {
+      console.log(this.params, "params");
+      this.$refs[prop].validate(async (valid, obj) => {
+        if (valid) {
+          try {
+            const {
+              params,
+              params: { saleZone, custom, creator },
+              $props: { addType },
+            } = this;
+            const { orgName: saleOrg } = this.$store.state.user;
+            const data = {
+              ...params,
+              annualGoalMergeDetails: params.annualGoalMergeDetails.map(
+                (item) => ({
+                  ...item,
+                  saleOrg: item.saleOrg ? item.saleOrg : orgName,
+                  saleZone: item.saleZone ? item.saleZone : saleZone,
+                  custom: item.custom ? item.custom : custom,
+                  creator: item.creator ? item.creator : creator,
+                })
+              ),
+            };
+            let { code, msg } =
+              addType === "add"
+                ? await addAnnualSaleGoal(data)
+                : await updateAnnualSaleGoal(data);
+            if (code == 200) {
+              this.$notify.success(msg);
+              this.hide();
+            }
+          } catch (error) {}
+        } else {
+          var fail = [];
+          for (let key in obj) {
+            fail.push(obj[key][0].message);
+          }
+          this.$notify({
+            title: "警告",
+            message: fail[0],
+            type: "warning",
+          });
+          return false;
+        }
+      });
+    },
+    // 增行
+    addRow(tabName) {
+      const { orgName } = this.$store.state.user;
+      const { saleZone, custom, creator } = this.params;
+      const { TableColumns } = this.TabColumns.find(
+        ({ item: { key } }) => key === tabName
+      );
+      this.params[tabName].push({
+        ...this.$init.params(TableColumns),
+        delFlag: "0",
+        saleOrg: orgName,
+        saleZone,
+        custom,
+        creator,
+      });
+    },
+    // 删行
+    delRow(prop, tabName) {
+      const { row, $rowIndex } = prop;
+      this.params[tabName] = this.params[tabName].filter(
+        (item, index) => index !== $rowIndex
+      );
+    },
+    changeMaterial({ row, selectData: { oneClass, twoClass } }) {
+      row.oneLevelClassifyCode = oneClass && oneClass.split("&")[1];
+      row.twoLevelClassifyCode = twoClass && twoClass.split("&")[1];
+    },
+    // 改变一至十二月份（元）
+    changeMonth(prop) {
+      const month = [
+        "januaryGoal",
+        "februaryGoal",
+        "marchGoal",
+        "aprilGoal",
+        "mayGoal",
+        "juneGoal",
+        "julyGoal",
+        "augustGoal",
+        "septemberGoal",
+        "octoberGoal",
+        "novemberGoal",
+        "decemberGoal",
+      ];
+      this.params.goalTotal = this.params["annualGoalMergeDetails"].reduce(
+        (sum, item) => {
+          const rowSum = month.reduce((sum, m) => {
+            return (sum += (item[m] ? item[m] : 0) * 1);
+          }, 0);
+          return (sum += rowSum);
+        },
+        0
+      );
+      if (prop) {
+        let { row } = prop;
+        row["totalGoal"] = month.reduce((sum, item) => {
+          return (sum += (row[item] ? row[item] : 0) * 1);
+        }, 0);
+      }
+      // 实时统计
+      this.$refs.annualGoalMergeDetails[0].updateFooter();
+    },
+    // 导入
+    async handelImport(fileList) {
+      try {
+        this.$modal.loading("正在上传文件，请稍候...");
+
+        let formData = new FormData();
+        formData.append("file", fileList[0].raw);
+        let { code, msg, data } = await importData(formData);
+        if (code == 200) {
+          this.params["annualGoalMergeDetails"] = [
+            ...this.params["annualGoalMergeDetails"],
+            ...data,
+          ];
+
+          let { setVisible } = this.$refs.batchImport;
+          setVisible(false);
+          this.changeMonth();
+          this.$notify.success(msg);
+        }
+      } catch (error) {
+      } finally {
+        this.$modal.closeLoading();
+      }
+    },
+    // 模板下载
+    handleTemDownload() {
+      this.download(
+        "/goal_management/annualSaleGoalDetails/importTemplate",
+        {},
+        `年销售目标填报明细导入模板_${new Date().getTime()}.xlsx`
+      );
+    },
+    // 批量更新
+    useUpdate(prop) {
+      const { key, value } = prop;
+      this.params["annualGoalMergeDetails"].forEach((item) => {
+        item[key] = value;
+      });
+    },
+  },
+  created() {},
+};
+</script>
+<template>
+  <el-drawer
+    v-bind="$attrs"
+    v-on="$listeners"
+    v-loading="loading"
+    :size="width"
+    :visible.sync="visible"
+    destroy-on-close
+    :show-close="false"
+    @close="hide"
+    @open="beforeOpen"
+  >
+    <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="params"
+      :dict="dict"
+      :rules="rules"
+      :size="$attrs.size"
+      :columns="FormColumns"
+      ref="superForm"
+      label-width="auto"
+      label-position="right"
+      style="padding: 20px"
+      :disabled="addType == 'see'"
+    >
+    </el-super-form>
+
+    <el-row
+      type="flex"
+      justify="end"
+      style="margin: 0 20px"
+      v-show="addType !== 'see'"
+    >
+      <batch-import
+        ref="batchImport"
+        :fileSize="2"
+        :size="$attrs.size"
+        @import="handelImport"
+        @temDownload="handleTemDownload"
+      ></batch-import>
+      <batch-update
+        :size="$attrs.size"
+        type="primary"
+        @confirm="useUpdate"
+      ></batch-update>
+    </el-row>
+
+    <el-tabs v-model="tabName" style="margin: 0 20px">
+      <el-tab-pane
+        v-for="({ item, TableColumns: columns }, index) in TabColumns"
+        :key="index"
+        :label="item.title"
+        :name="item.key"
+      >
+        <el-super-ux-table
+          v-model="params[item.key]"
+          :dict="dict"
+          index
+          showSummary
+          :ref="tabName"
+          :columns="columns"
+          :size="$attrs.size"
+          :height="tableHeight"
+        >
+          <!-- 物料 -->
+          <template slot="material" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMaterial({ ...scope, selectData: $event })"
+            >
+            </component>
+          </template>
+          <!-- 一至十二月 -->
+          <template slot="januaryGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="februaryGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="marchGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="aprilGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="mayGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="juneGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="julyGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="augustGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="septemberGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="octoberGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="novemberGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="decemberGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <ux-table-column
+            v-if="addType !== 'see'"
+            fixed="right"
+            title="操作"
+            width="120"
+            align="center"
+          >
+            <template slot="header" slot-scope="scope">
+              <el-button
+                type="text"
+                :size="$attrs.size"
+                @click="addRow(tabName)"
+                >增 行</el-button
+              >
+            </template>
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                :size="$attrs.size"
+                @click.native.prevent="delRow(scope, tabName)"
+                >删 行</el-button
+              >
+            </template>
+          </ux-table-column>
+        </el-super-ux-table>
+      </el-tab-pane>
+    </el-tabs>
+  </el-drawer>
+</template>
+
+<style scoped>
+>>> .el-drawer__header {
+  margin-bottom: 0;
+  padding: 5px 20px;
+}
+</style>

src/views/business/spd/target/common/AnnualSaleGoalMerge/columns.js

@@ -0,0 +1,231 @@
+export default function useColumns() {
+  const SearchColumns = [
+    {
+      item: { key: "code", title: "编码" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入编码",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "goalName", title: "目标名称" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入目标名称",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "documentDateRange", title: "单据日期" },
+      attr: {
+        is: "el-date-picker",
+        type: "daterange",
+        valueFormat: "yyyy-MM-dd",
+        align: "right",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        placeholder: "请选择单据日期",
+        pickerOptions: pickerOptions,
+      }
+    },
+    {
+      item: { key: "annual", title: "年度" },
+      attr: {
+        is: "el-date-picker",
+        type: "year",
+        valueFormat: "yyyy",
+        placeholder: "选择年度",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "status", title: "单据状态" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_status",
+        placeholder: "选择单据状态",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "creator", title: "制单人" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: {
+          creatorCode: 'code',
+        },
+        placeholder: "请输入制单人",
+      }
+    },
+    {
+      item: { key: "dept", title: "部门" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "DEPT_PARAM",
+        dataMapping: {
+          deptId: 'id',
+        },
+        placeholder: "请输入部门",
+      }
+    },
+    {
+      item: { key: "goalCategory", title: "目标类型" },
+      attr: {
+        is: "el-select",
+        dictName: "annualSale_type",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "saleZone", title: "销售区域" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "MK_SALESAREA_PARAM",
+        dataMapping: {
+          saleZoneCode: 'code',
+        },
+        placeholder: "请输入销售区域",
+      }
+    },
+    {
+      item: { key: "oneLevelClassify", title: "一级分类" },
+      attr: {
+        is: "el-popover-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        placeholder: "请输入一级分类",
+        valueKey: "name",
+        onlyFinal: false,
+        defaultProps: {
+          label: function (data, node) {
+            return data.code + "-" + data.name;
+          },
+          children: "children",
+        },
+        dataMapping: {
+          oneLevelClassifyCode: "code",
+        },
+      }
+    },
+    {
+      item: { key: "twoLevelClassify", title: "二级分类" },
+      attr: {
+        is: "el-popover-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        placeholder: "请输入二级分类",
+        valueKey: "name",
+        onlyFinal: false,
+        defaultProps: {
+          label: function (data, node) {
+            return data.code + "-" + data.name;
+          },
+          children: "children",
+        },
+        dataMapping: {
+          twoLevelClassifyCode: "code",
+        },
+      }
+    },
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "status", title: "状态", width: 100, },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "sys_status",
+      },
+    },
+    {
+      item: { key: "code", title: "编码", },
+      attr: {},
+    },
+    {
+      item: { key: "goalName", title: "目标名称", },
+      attr: {},
+    },
+    {
+      item: { key: "documentDate", title: "单据日期", width: 120, },
+      attr: {},
+    },
+    {
+      item: { key: "annual", title: "年度", width: 100, },
+      attr: {},
+    },
+    {
+      item: { key: "creator", title: "制单人", width: 100, },
+      attr: {},
+    },
+    {
+      item: { key: "dept", title: "部门", },
+      attr: {},
+    },
+    {
+      item: { key: "goalCategory", title: "目标类型", },
+      attr: {},
+    },
+    {
+      item: { key: "goalTotal", title: "目标值汇总（元）", },
+      attr: {},
+    },
+    {
+      item: { key: "saleZone", title: "销售区域", },
+      attr: {},
+    },
+    {
+      item: { key: "oneLevelClassify", title: "一级分类", },
+      attr: {},
+    },
+    {
+      item: { key: "twoLevelClassify", title: "二级分类", },
+      attr: {},
+    },
+    {
+      item: { key: "notes", title: "备注", },
+      attr: {},
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      sortabled: true,
+      fixedabled: true,
+      filterabled: true,
+      hiddenabled: true,
+    },
+  }));
+
+  const pickerOptions = {
+    shortcuts: [{
+      text: '最近一周',
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        picker.$emit('pick', [start, end]);
+      }
+    }, {
+      text: '最近一个月',
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        picker.$emit('pick', [start, end]);
+      }
+    }, {
+      text: '最近三个月',
+      onClick(picker) {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+        picker.$emit('pick', [start, end]);
+      }
+    }]
+  }
+  return { SearchColumns, TableColumns }
+}

src/views/business/spd/target/common/AnnualSaleGoalMerge/details/columns.js

@@ -0,0 +1,473 @@
+export default function useColumns() {
+  const FormColumns = [
+    {
+      item: { key: "code", title: "编码" },
+      attr: {
+        is: "el-input",
+        placeholder: "编码后端自动生成",
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "goalName", title: "目标名称" },
+      attr: {
+        is: "el-input",
+        placeholder: "目标名称后端自动生成",
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "documentDate", title: "单据日期", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        placeholder: "选择单据日期",
+        valueFormat: "yyyy-MM-dd",
+      },
+    },
+    {
+      item: { key: "annual", title: "年度", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "year",
+        placeholder: "选择年度",
+        valueFormat: "yyyy",
+      },
+    },
+    {
+      item: { key: "creator", title: "制单人", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: {
+          creatorCode: 'code',
+        },
+        placeholder: "请输入制单人",
+      },
+    },
+    {
+      item: { key: "dept", title: "部门", required: true, },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "DEPT_PARAM",
+        dataMapping: {
+          deptId: 'id',
+        },
+        placeholder: "请输入部门",
+      },
+    },
+    {
+      item: { key: "status", title: "单据状态" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_status",
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "goalTotal", title: "目标合计（元）" },
+      attr: {
+        is: "el-input-number",
+        min: 0,
+        step: 0.1,
+        precision: 2,
+        disabled: true,
+        placeholder: "目标值汇总自动计算",
+      },
+    },
+    {
+      item: { key: "goalCategory", title: "目标类型", required: true, },
+      attr: {
+        is: "el-select",
+        dictName: "annualSale_type",
+        placeholder: "请选择",
+      },
+    },
+    {
+      item: { key: "saleZone", title: "销售区域" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "MK_SALESAREA_PARAM",
+        dataMapping: {
+          saleZoneCode: 'code',
+        },
+        placeholder: "请输入销售区域",
+      }
+    },
+    {
+      item: { key: "oneLevelClassify", title: "一级分类" },
+      attr: {
+        is: "el-popover-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        placeholder: "请输入一级分类",
+        valueKey: "name",
+        onlyFinal: false,
+        defaultProps: {
+          label: function (data, node) {
+            return data.code + "-" + data.name;
+          },
+          children: "children",
+        },
+        dataMapping: {
+          oneLevelClassifyCode: "code",
+        },
+      }
+    },
+    {
+      item: { key: "twoLevelClassify", title: "二级分类" },
+      attr: {
+        is: "el-popover-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        placeholder: "请输入二级分类",
+        valueKey: "name",
+        onlyFinal: false,
+        defaultProps: {
+          label: function (data, node) {
+            return data.code + "-" + data.name;
+          },
+          children: "children",
+        },
+        dataMapping: {
+          twoLevelClassifyCode: "code",
+        },
+      }
+    },
+    {
+      item: { key: "notes", title: "备注" },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入备注",
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      span: item.span || 6,
+    }
+  }));
+
+  const TabColumns = [
+    // 年销售目标合并明细
+    {
+      item: { key: "annualGoalMergeDetailsList", title: "年销售目标合并明细" },
+      attr: { value: [], },
+      TableColumns: [
+        {
+          item: { key: "saleOrg", title: "销售组织" },
+          attr: {},
+        },
+        {
+          item: { key: "saleZone", title: "销售区域" },
+          attr: {},
+        },
+        {
+          item: { key: "custom", title: "客户" },
+          attr: {},
+        },
+        {
+          item: { key: "creator", title: "负责人" },
+          attr: {},
+        },
+        {
+          item: { key: "oneLevelClassify", title: "一级分类" },
+          attr: {},
+        },
+        {
+          item: { key: "twoLevelClassify", title: "二级分类" },
+          attr: {},
+        },
+        {
+          item: { key: "totalGoal", title: "合计（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            disabled: true,
+            isSummary: true,
+          },
+        },
+        {
+          item: { key: "januaryGoal", title: "一月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "februaryGoal", title: "二月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "marchGoal", title: "三月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "aprilGoal", title: "四月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "mayGoal", title: "五月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "juneGoal", title: "六月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "julyGoal", title: "七月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "augustGoal", title: "八月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "septemberGoal", title: "九月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "octoberGoal", title: "十月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "novemberGoal", title: "十一月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+        {
+          item: { key: "decemberGoal", title: "十二月（元）", },
+          attr: {
+            is: "el-input-number",
+            min: 0,
+            step: 0.1,
+            precision: 2,
+            isSummary: true,
+            controlsPosition: "right",
+          },
+        },
+      ],
+    },
+    // 区域目标汇总（年）
+    {
+      item: { key: "areaDetailList", title: "区域目标汇总(年)" },
+      attr: { value: [], },
+      TableColumns: [
+        {
+          item: { key: "saleOrg", title: "销售组织" },
+          attr: {},
+        },
+        {
+          item: { key: "saleZone", title: "销售区域" },
+          attr: {},
+        },
+        {
+          item: { key: "creator", title: "负责人" },
+          attr: {},
+        },
+        {
+          item: { key: "totalGoal", title: "合计（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "januaryGoal", title: "一月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "februaryGoal", title: "二月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "marchGoal", title: "三月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "aprilGoal", title: "四月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "mayGoal", title: "五月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "juneGoal", title: "六月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "julyGoal", title: "七月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "augustGoal", title: "八月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "septemberGoal", title: "九月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "octoberGoal", title: "十月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "novemberGoal", title: "十一月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "decemberGoal", title: "十二月（元）" },
+          attr: {},
+        },
+      ],
+    },
+    // 客户目标汇总（年）
+    {
+      item: { key: "customerDetailList", title: "客户目标汇总(年)" },
+      attr: { value: [], },
+      TableColumns: [
+        {
+          item: { key: "saleOrg", title: "销售组织" },
+          attr: {},
+        },
+        {
+          item: { key: "saleZone", title: "销售区域" },
+          attr: {},
+        },
+        {
+          item: { key: "custom", title: "客户" },
+          attr: {},
+        },
+        {
+          item: { key: "totalGoal", title: "合计（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "januaryGoal", title: "一月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "februaryGoal", title: "二月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "marchGoal", title: "三月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "aprilGoal", title: "四月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "mayGoal", title: "五月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "juneGoal", title: "六月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "julyGoal", title: "七月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "augustGoal", title: "八月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "septemberGoal", title: "九月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "octoberGoal", title: "十月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "novemberGoal", title: "十一月（元）" },
+          attr: {},
+        },
+        {
+          item: { key: "decemberGoal", title: "十二月（元）" },
+          attr: {},
+        },
+      ],
+    },
+  ];
+  return { FormColumns, TabColumns }
+}

src/views/business/spd/target/common/AnnualSaleGoalMerge/details/index.vue

@@ -0,0 +1,630 @@
+<!-- 年销售目标合并-详情 -->
+<script>
+import useColumns from "./columns";
+import { mergeAnnualSaleMergeDetails } from "@/api/business/spd/goal_management/annualSaleMergeDetails";
+import {
+  addAnnualSaleGoalMerge,
+  getAnnualSaleGoalMerge,
+  updateAnnualSaleGoalMerge,
+} from "@/api/business/spd/goal_management/annualSaleGoalMerge";
+export default {
+  name: "AnnualSaleGoalMergeDetails",
+  props: {
+    dict: {
+      type: Object,
+    },
+    addType: {
+      type: String,
+      default: "add",
+    },
+    data: {
+      type: Object,
+    },
+  },
+  components: {
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+    ElPopoverTreeSelect: () =>
+      import("@/components/popover-tree-select/index.vue"),
+  },
+  data() {
+    const {
+      FormColumns,
+      TabColumns,
+      TabColumns: [
+        {
+          item: { key: tabName },
+        },
+      ],
+    } = useColumns();
+    const params = this.$init.params(FormColumns);
+    const rules = this.$init.rules(FormColumns);
+    return {
+      rules,
+      params: {
+        ...params,
+        annualGoalMergeDetailsList: [],
+        areaDetailList: [],
+        customerDetailList: [],
+      },
+      tabName,
+      TabColumns,
+      FormColumns,
+      visible: false,
+      loading: false,
+      width: "100%",
+      count: 1,
+    };
+  },
+  computed: {
+    title: {
+      get() {
+        const { addType } = this.$props;
+        if (addType === "see") {
+          return "查 看";
+        } else if (addType === "edit") {
+          return "编 辑";
+        } else {
+          return "新 增";
+        }
+      },
+      set() {},
+    },
+    tableHeight: {
+      get() {
+        return window.innerHeight - 320;
+      },
+      set() {},
+    },
+  },
+  watch: {
+    "params.goalCategory": {
+      handler: function (nVal, oVal) {
+        const goal = [
+          { title: "销售区域", key: "saleZone" },
+          { title: "一级分类", key: "oneLevelClassify" },
+          { title: "二级分类", key: "twoLevelClassify" },
+        ];
+
+        goal.forEach(({ title, key }) => {
+          if (title !== nVal) {
+            this.params[key] = null;
+            this.params[`${key}Code`] = null;
+            this.rules[key] = null;
+          } else {
+            this.rules[key] = [
+              {
+                required: true,
+                message: `${title}不能为空`,
+                trigger: "change",
+              },
+            ];
+          }
+        });
+        this.count++;
+      },
+    },
+  },
+  methods: {
+    setVisible(prop) {
+      this.visible = prop;
+    },
+    beforeOpen() {
+      const { addType, params, data } = this;
+      const { name, nickName, deptName, deptId } = this.$store.state.user;
+      if (addType === "add") {
+        this.params = {
+          ...params,
+          deptId,
+          dept: deptName,
+          creator: nickName,
+          creatorCode: name,
+          documentDate: new Date().Format("yyyy-MM-dd"),
+          annual: new Date().Format("yyyy"),
+        };
+      } else {
+        this.fetchItem(data);
+      }
+    },
+    async fetchItem(prop) {
+      try {
+        this.$modal.loading("处理中，请稍后...");
+        const { id } = prop;
+        let { code, mag, data } = await getAnnualSaleGoalMerge(id);
+        if (code == 200) {
+          this.params = {
+            ...data,
+            areaDetailList: data.areaDetailList || [],
+            customerDetailList: data.customerDetailList || [],
+          };
+        }
+      } catch (error) {
+      } finally {
+        this.$modal.closeLoading();
+      }
+    },
+    hide() {
+      this.visible = false;
+      const {
+        FormColumns,
+        TabColumns: [
+          {
+            item: { key: tabName },
+          },
+        ],
+      } = useColumns();
+      this.params = {
+        ...this.$init.params(FormColumns),
+        annualGoalMergeDetailsList: [],
+        areaDetailList: [],
+        customerDetailList: [],
+      };
+      this.tabName = tabName;
+      this.$emit("refresh");
+    },
+    // 合并
+    useMerge(prop) {
+      this.$refs[prop].validate(async (valid, obj) => {
+        if (valid) {
+          const {
+            params: { id, annualGoalMergeDetailsList },
+            tabName,
+          } = this;
+          if (id) {
+            this.params.oldAnnualGoalMergeDetailsList = _.cloneDeep(
+              annualGoalMergeDetailsList
+            );
+          }
+          try {
+            let {
+              code,
+              msg,
+              data: { consolidatedDetail },
+            } = await mergeAnnualSaleMergeDetails({
+              ...this.params,
+              annualGoalMergeDetailsList: [],
+            });
+            if (code == 200) {
+              this.params.annualGoalMergeDetailsList = consolidatedDetail;
+              this.$notify.success(
+                consolidatedDetail.length ? msg : "未查到相关数据"
+              );
+            }
+          } catch (error) {
+          } finally {
+          }
+        } else {
+        }
+      });
+    },
+    // 保存
+    useSave(prop) {
+      console.log(this.params, "this.params");
+      this.$refs[prop].validate(async (valid, obj) => {
+        if (valid) {
+          try {
+            const { addType, params } = this;
+            let { code, msg } =
+              addType == "edit"
+                ? await updateAnnualSaleGoalMerge(params)
+                : await addAnnualSaleGoalMerge({
+                    ...params,
+                    status: "0",
+                  });
+            if (code == 200) {
+              this.$notify.success(msg);
+              this.hide();
+            }
+          } catch (error) {
+          } finally {
+          }
+        } else {
+          var fail = [];
+          for (let key in obj) {
+            fail.push(obj[key][0].message);
+          }
+          this.$notify({
+            title: "警告",
+            message: fail[0],
+            type: "warning",
+          });
+          return false;
+        }
+      });
+    },
+    // 一级分类
+    changeOneLevel(row, { prop, columns }) {
+      const select = prop[0];
+      if (select.code.length > 2) {
+        row.oneLevelClassify = null;
+        row.oneLevelClassifyCode = null;
+        return this.$message.warning("请选择一级分类");
+      }
+    },
+    // 二级分类
+    changeTwoLevel(row, { prop, columns }) {
+      const select = prop[0];
+      if (
+        !(select.code.lastIndexOf("-") == 3 || select.code.indexOf("90") == 0)
+      ) {
+        row.oneLevelClassify = null;
+        row.twoLevelClassifyCode = null;
+        return this.$message.warning("请选择二级分类");
+      }
+    },
+    // 改变一至十二月份（元）
+    changeMonth(prop) {
+      const month = [
+        "januaryGoal",
+        "februaryGoal",
+        "marchGoal",
+        "aprilGoal",
+        "mayGoal",
+        "juneGoal",
+        "julyGoal",
+        "augustGoal",
+        "septemberGoal",
+        "octoberGoal",
+        "novemberGoal",
+        "decemberGoal",
+      ];
+      this.params.goalTotal = this.params["annualGoalMergeDetailsList"].reduce(
+        (sum, item) => {
+          const rowSum = month.reduce((sum, m) => {
+            return (sum += (item[m] ? item[m] : 0) * 1);
+          }, 0);
+          return (sum += rowSum);
+        },
+        0
+      );
+      if (prop) {
+        let { row } = prop;
+        row["totalGoal"] = month.reduce((sum, item) => {
+          return (sum += (row[item] ? row[item] : 0) * 1);
+        }, 0);
+      }
+      // 实时统计
+      this.$refs.annualGoalMergeDetailsList[0].updateFooter();
+    },
+    tabClick({ name }) {
+      const { annualGoalMergeDetailsList, areaDetailList, customerDetailList } =
+        this.params;
+      let arr = _.cloneDeep(annualGoalMergeDetailsList);
+
+      if (name === "annualGoalMergeDetailsList") {
+        this.params.areaDetailList = [];
+        this.params.customerDetailList = [];
+        return;
+      }
+      // 根据某三个属性进行合并并相加totalGoal的函数
+      const mergeAndSumTotalGoal = (array) => {
+        return Array.from(
+          array
+            .reduce((map, obj) => {
+              let key = `${obj.saleOrg}-${obj.saleZone}-${
+                name === "areaDetailList" ? obj.creator : obj.custom
+              }`;
+
+              console.log(key, "key---------------");
+              if (map.has(key)) {
+                const existingObj = map.get(key);
+                existingObj.totalGoal = parseFloat(existingObj.totalGoal);
+                existingObj.totalGoal += parseFloat(obj.totalGoal);
+                existingObj.totalGoal = existingObj.totalGoal.toFixed(2);
+                existingObj.januaryGoal += obj.januaryGoal;
+                existingObj.februaryGoal += obj.februaryGoal;
+                existingObj.marchGoal += obj.marchGoal;
+                existingObj.aprilGoal += obj.aprilGoal;
+                existingObj.mayGoal += obj.mayGoal;
+                existingObj.juneGoal += obj.juneGoal;
+                existingObj.julyGoal += obj.julyGoal;
+                existingObj.augustGoal += obj.augustGoal;
+                existingObj.septemberGoal += obj.septemberGoal;
+                existingObj.octoberGoal += obj.octoberGoal;
+                existingObj.novemberGoal += obj.novemberGoal;
+                existingObj.decemberGoal += obj.decemberGoal;
+              } else {
+                map.set(key, {
+                  ...obj,
+                });
+              }
+              return map;
+            }, new Map())
+            .values()
+        );
+      };
+
+      // 调用合并函数
+      const mergedArray = mergeAndSumTotalGoal(arr);
+      console.log(name, "name", mergedArray, " mergedArray");
+
+      this.params = {
+        ...this.params,
+        areaDetailList:
+          name === "areaDetailList" ? mergedArray : areaDetailList,
+        customerDetailList:
+          name === "customerDetailList" ? mergedArray : customerDetailList,
+      };
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-drawer
+    v-bind="$attrs"
+    v-on="$listeners"
+    v-loading="loading"
+    :size="width"
+    :visible.sync="visible"
+    destroy-on-close
+    :show-close="false"
+    @close="hide"
+    @open="beforeOpen"
+  >
+    <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="params"
+      :dict="dict"
+      :rules="rules"
+      :size="$attrs.size"
+      :columns="FormColumns"
+      :key="count"
+      ref="superForm"
+      label-width="auto"
+      label-position="right"
+      style="padding: 20px"
+      :disabled="addType == 'see'"
+    >
+      <template slot="goalCategory" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+        >
+          <el-option
+            v-for="item in dict.type[scope.attr.dictName]"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </component>
+      </template>
+      <template slot="saleZone" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          :disabled="params.goalCategory !== '销售区域'"
+        >
+        </component>
+      </template>
+      <template slot="oneLevelClassify" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          :disabled="params.goalCategory !== '一级分类'"
+          @change="
+            (prop, columns) => changeOneLevel(scope.row, { prop, columns })
+          "
+        >
+        </component>
+      </template>
+      <template slot="twoLevelClassify" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          :disabled="params.goalCategory !== '二级分类'"
+          @change="
+            (prop, columns) => changeTwoLevel(scope.row, { prop, columns })
+          "
+        >
+        </component>
+      </template>
+    </el-super-form>
+
+    <el-row
+      type="flex"
+      justify="end"
+      style="margin: 0 20px; position: absolute; right: 0; z-index: 10"
+      v-show="addType !== 'see'"
+    >
+      <el-button
+        type="primary"
+        :size="$attrs.size"
+        @click.native.stop="useMerge('superForm')"
+        :disabled="tabName !== 'annualGoalMergeDetailsList'"
+        >合 并</el-button
+      >
+    </el-row>
+
+    <el-tabs
+      v-model="tabName"
+      @tab-click="tabClick"
+      style="margin: 0 20px; position: relative"
+    >
+      <el-tab-pane
+        v-for="({ item, TableColumns: columns }, index) in TabColumns"
+        :key="index"
+        :label="item.title"
+        :name="item.key"
+      >
+        <el-super-ux-table
+          v-model="params[item.key]"
+          :dict="dict"
+          index
+          :ref="tabName"
+          :columns="columns"
+          :size="$attrs.size"
+          :height="tableHeight"
+        >
+          <!-- 一至十二月 -->
+          <template slot="januaryGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="februaryGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="marchGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="aprilGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="mayGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="juneGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="julyGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="augustGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="septemberGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="octoberGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="novemberGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+          <template slot="decemberGoal" slot-scope="scope">
+            <component
+              v-bind="scope.attr"
+              v-model="scope.row[scope.item.key]"
+              :size="$attrs.size"
+              :source.sync="scope.row"
+              :disabled="addType == 'see'"
+              @change="changeMonth(scope)"
+            >
+            </component>
+          </template>
+        </el-super-ux-table>
+      </el-tab-pane>
+    </el-tabs>
+  </el-drawer>
+</template>
+
+<style scoped>
+>>> .el-drawer__header {
+  margin-bottom: 0;
+  padding: 5px 20px;
+}
+</style>

src/views/business/spd/target/common/MonthGoalMerge/columns.js

@@ -0,0 +1,3 @@
+export default function useColumns() {
+  return {}
+}

src/views/business/spd/target/common/MonthReturnGoal/columns.js

@@ -0,0 +1,3 @@
+export default function useColumns() {
+  return {}
+}

src/views/business/spd/target/common/MonthReturnMerge/columns.js

@@ -0,0 +1,3 @@
+export default function useColumns() {
+  return {}
+}

src/views/business/spd/target/common/MonthSaleGoal/columns.js

@@ -0,0 +1,3 @@
+export default function useColumns() {
+  return {}
+}

src/views/business/spd/target/common/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/targetTemplate/columns.js

@@ -0,0 +1,91 @@
+export default function useColumns() {
+  const SearchColumns = [
+    {
+      item: { key: "year", title: "年度" },
+      attr: {
+        is: "el-date-picker",
+        type: "year",
+        valueFormat: "yyyy-MM-dd",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "name", title: "模板名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      }
+    },
+    {
+      item: { key: "dateRange", title: "开始日期" },
+      attr: {
+        is: "el-date-picker",
+        type: "daterange",
+        rangeSeparator: "-",
+        endPlaceholder: "结束",
+        startPlaceholder: "开始",
+        valueFormat: "yyyy-MM-dd",
+      }
+    },
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "year", title: "年度", width: 100, },
+      attr: {}
+    },
+    {
+      item: { key: "name", title: "模板名称" },
+      attr: {}
+    },
+    {
+      item: { key: "startTime", title: "开始日期", },
+      attr: {}
+    },
+    {
+      item: { key: "deadlineTime", title: "结束日期", },
+      attr: {}
+    },
+    {
+      item: { key: "cycle", title: "周期", width: 100, },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_periodic_unit",
+      }
+    },
+    {
+      item: { key: "unfold", title: "按列展开" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "mk_expansion_mode",
+      }
+    },
+    {
+      item: { key: "createByName", title: "创建人", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "createTime", title: "创建时间" },
+      attr: {}
+    },
+    {
+      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 { FormColumns, TabColumns } = useColumns();
+      const params = this.$init.params(FormColumns);
+      this.form = {
+        ...params,
+        indexs: [],
+        dimensionalitys: [],
+        cycles: [],
+      };
+      this.visible = false;
+      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

@@ -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/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>

src/views/login.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
       <h3 class="title">德荣资源平台</h3>
       <el-form-item prop="username">
         <el-input
@@ -9,7 +14,11 @@
           auto-complete="off"
           placeholder="账号"
         >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -20,7 +29,11 @@
           placeholder="密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <!-- <el-form-item prop="code" v-if="captchaEnabled">
@@ -37,26 +50,37 @@
           <img :src="codeUrl" @click="getCode" class="login-code-img"/>
         </div>
       </el-form-item> -->
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width: 100%"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        <div style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
+      <span
+        >Copyright © 2023-{{
+          new Date().getFullYear()
+        }}
+        德荣医疗科技股份有限公司</span
+      >
     </div>
   </div>
 </template>
@@ -64,7 +88,7 @@
 <script>
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
@@ -76,32 +100,32 @@ export default {
         password: "",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
       captchaEnabled: false,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
     };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
@@ -109,8 +133,9 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -120,38 +145,46 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

src/views/purchase/PurchaseDemandList/add.vue

@@ -1668,66 +1668,8 @@ export default {
           this.basicForm.demandDate = new Date(data).Format("yyyy-MM-dd");
         }
       } catch (error) {}
-
-      // // 获取当前时间
-      // let today = new Date().Format("yyyy-MM-dd");
-      // // //获取当前时间的年份转为字符串
-      // // let year = date.getFullYear().toString();
-      // // //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
-      // // let month =
-      // //   date.getMonth() + 1 < 10
-      // //     ? "0" + (date.getMonth() + 1).toString()
-      // //     : (date.getMonth() + 1).toString(); //'04'
-      // // //获取天，判断是否小于10，如果是在字符串前面拼接'0'
-      // // let da =
-      // //   date.getDate() < 10
-      // //     ? "0" + date.getDate().toString()
-      // //     : date.getDate().toString(); //'12'
-      // // let today = year + "-" + month + "-" + da;
-      // // console.log("今天日期", today);
-      // let weekDay = new Date(today).getDay();
-      // // 改变需求计划的判断写这里面了
-      // if (this.basicForm.planType == "JJXQ") {
-      //   this.basicForm.demandDate = today;
-      // } else {
-      //   if (weekDay == 0) {
-      //     this.basicForm.demandDate = this.getNextDate(today, 2);
-      //   } else if (weekDay == 1) {
-      //     this.basicForm.demandDate = this.getNextDate(today, 1);
-      //   } else if (weekDay == 2) {
-      //     this.basicForm.demandDate = today;
-      //   } else if (weekDay == 3) {
-      //     this.basicForm.demandDate = this.getNextDate(today, 6);
-      //   } else if (weekDay == 4) {
-      //     this.basicForm.demandDate = this.getNextDate(today, 5);
-      //   } else if (weekDay == 5) {
-      //     this.basicForm.demandDate = this.getNextDate(today, 4);
-      //   } else if (weekDay == 6) {
-      //     this.basicForm.demandDate = this.getNextDate(today, 3);
-      //   }
-      //   // console.log(this.getNextDate(today, 2))
-      // }
     },
-    // 获取某天日期的下一天，默认为第二天 默认输出格式为yyyy-mm-dd
-    // getNextDate(date, day = 1, format = "{y}-{m}-{d}") {
-    //   if (date) {
-    //     date = date.match(/\d+/g).join("-"); // 格式为2022年09月19日处理
-    //     const nDate = new Date(date);
-    //     nDate.setDate(nDate.getDate() + day);
-
-    //     const formatObj = {
-    //       y: nDate.getFullYear(),
-    //       m: nDate.getMonth() + 1,
-    //       d: nDate.getDate(),
-    //     };
-    //     return format.replace(/{([ymd])+}/g, (result, key) => {
-    //       const value = formatObj[key];
-    //       return value.toString().padStart(2, "0");
-    //     });
-    //   } else {
-    //     console.log("date格式不正确");
-    //   }
-    // },
+   
     // 改变需求计划改变需求日期
     changeplanType(val) {
       this.dafaultDate();

src/views/purchase/PurchaseDemandList/index copy.vue

@@ -1,969 +0,0 @@
-<template>
-  <div id="PurchaseDemandList">
-    <div v-if="isList">
-      <el-card style="position: relative;">
-        <el-form class="search_area" label-width="100px">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-form-item label="需求单号">
-                <el-input
-                  v-model.trim="queryParams.code"
-                  size="mini"
-                  clearable
-                  style="width: 200px"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="需求客户">
-                <el-select clearable size="mini" v-model="queryParams.customer" @focus="chooseOrg('CUSTOMER_PARAM', true, '需求客户')" style="width: 200px">
-                  <el-option v-for="item in customerOptions" :key="item.id" :label="item.name" :value="item.id" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="是否客户指定">
-                <el-select clearable v-model="queryParams.isCustomerSpecified" size="mini" style="width: 200px" placeholder="请选择">
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="需求人员">
-                <el-select clearable size="mini" v-model="queryParams.demandPersonal" @focus="chooseOrg('CONTACTS_PARAM', true, '需求人员')" style="width: 200px">
-                  <el-option v-for="item in personOptions" :key="item.id" :label="item.name" :value="item.code" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <!-- <el-col :span="1.5"> -->
-              <!-- <el-form-item label="" label-width="20px"> -->
-                <div style="position: absolute;top: 3px;right: 10px;">
-                  <el-button type="primary" size="mini" @click="searchList">搜索</el-button>
-                  <el-button size="mini" plain @click="resetList">重置</el-button>
-                </div>
-              <!-- </el-form-item> -->
-            <!-- </el-col> -->
-          </el-row>
-        <CollapseTransition>
-          <div v-show="expanded">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-form-item label="单据来源">
-                <el-select clearable v-model="queryParams.source" size="mini" style="width: 200px">
-                  <el-option v-for="dict in dict.type.sys_bill_source" :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-select clearable v-model="queryParams.billType" size="mini" style="width: 200px">
-                  <el-option v-for=" dict in dict.type.sys_business" :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-select clearable v-model="queryParams.demandDept" size="mini" @focus="chooseOrg('DEPT_PARAM', true, '需求部门')" style="width: 200px">
-                  <el-option
-                    v-for="item in deptOptions"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="需求日期">
-                <el-date-picker
-                  v-model="queryParams.demandDate"
-                  type="date"
-                  clearable
-                  value-format="yyyy-MM-dd"
-                  size="mini"
-                  style="width: 200px"
-                >
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-form-item label="物料编码">
-                <el-input
-                  v-model.trim="queryParams.materialCode"
-                  size="mini"
-                  clearable
-                  style="width: 200px"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="单据状态">
-                <el-select clearable v-model="queryParams.status" size="mini" style="width: 200px">
-                  <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-select clearable v-model="queryParams.planType" size="mini" style="width: 200px">
-                  <el-option v-for="dict in dict.type.sys_plan_type" :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-date-picker
-                  v-model="queryParams.createTimeString"
-                  type="date"
-                  clearable
-                  value-format="yyyy-MM-dd"
-                  size="mini"
-                  style="width: 200px"
-                >
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="1.5">
-              <el-form-item label="补单供应商">
-                <el-select clearable size="mini" v-model="queryParams.additionalSupplier" @focus="chooseOrg('SUPPLIER_PARAM', true, '供应商')" style="width: 200px">
-                  <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          </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="demandWindow">需求窗口期</el-button>
-          <el-button type="primary" size="mini" @click="addDivision">新增</el-button>
-
-          <el-dropdown size="mini" @command="handleCommand">
-            <el-button size="mini" type="primary" style="margin-left: 10px;">
-              导入<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
-              <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <el-dropdown size="mini" @command="handleExport">
-            <el-button size="mini" type="primary" style="margin: 0 10px;">
-              导出<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="选中导出">选中导出</el-dropdown-item>
-              <el-dropdown-item command="全部导出">全部导出</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <el-button type="primary" size="mini" @click="delItems">删除</el-button>
-          <!-- <el-button type="primary" size="mini">打印</el-button> -->
-        </div>
-        
-        <el-super-ux-table
-          v-loading="loading"
-          v-model="tableList"
-          :columns="TableColumns"
-          size="mini"
-          :dict="dict"
-          index
-          checkbox
-          class="exporttable"
-          :height=410
-          border
-          highlight-current-row
-          convenitentOperation
-          storage-key="PurchaseDemandList"
-          style="font-size: 12px;"
-          @selection-change="handleSelectionChange"
-          @row-click="rowSelect"
-          @row-dblclick="doubleClick"
-          ref="tables"
-        >
-          <!-- <ux-table-column show-overflow-tooltip type="selection" width="55" fixed="left"/>
-          <ux-table-column show-overflow-tooltip title="序号" type="index" align="center" width="50px" fixed="left"/>
-          <ux-table-column show-overflow-tooltip title="需求单号" align="center" width="170" field="code"/>
-          <ux-table-column show-overflow-tooltip title="需求日期" align="center" width="100" field="demandDate"/>
-          <ux-table-column show-overflow-tooltip title="制单日期" align="center" width="100" field="createTime"/>
-          <ux-table-column show-overflow-tooltip title="需求计划" align="center" width="120" field="planType" :formatter="formatterPlanType"/>
-          <ux-table-column show-overflow-tooltip title="审批结束日期" align="center" width="120" field="approverFinishTime"/>
-          <ux-table-column show-overflow-tooltip title="单据状态" align="center" field="status" :formatter="formatterStatus"/>
-          <ux-table-column show-overflow-tooltip title="业务类型" align="center" width="120" field="billType" :formatter="formatterBillType"/>
-          <ux-table-column show-overflow-tooltip title="需求人员" align="center" field="demandPersonalName" />
-          <ux-table-column show-overflow-tooltip title="需求客户" align="center" field="customerName" width="150"/>
-          <ux-table-column show-overflow-tooltip title="需求部门" align="center" field="demandDeptName" width="150"/>
-          <ux-table-column show-overflow-tooltip title="单据来源" align="center" field="source" width="120" :formatter="formatterSource"/>
-          <ux-table-column show-overflow-tooltip title="当前审批人" align="center" width="120" field="approveUser" />
-          <ux-table-column show-overflow-tooltip title="备注" align="center" width="150" field="remark" /> -->
-          <ux-table-column
-          fixed="right"
-          title="操作"
-          align="center"
-          width="180"
-          >
-          <template slot-scope="scope">
-            <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
-            <el-button type="text" size="mini" v-if="scope.row.status == '0' || scope.row.status == '3' || scope.row.status == '9'" @click="edit(scope.row)">编辑</el-button>
-            <el-button type="text" size="mini" v-if="scope.row.status == '0' || scope.row.status == '3' || scope.row.status == '9'" @click="commit(scope.row)">提交</el-button>
-            <el-button type="text" size="mini" v-if="scope.row.status == '1' && scope.row.flowId" @click="reback(scope.row)">收回</el-button>
-            <el-button type="text" size="mini" v-if="scope.row.status == '0' || scope.row.status == '3' || scope.row.status == '9'" @click="deleteids(scope.row)">删除</el-button>
-          </template>
-        </ux-table-column>
-        </el-super-ux-table>
-
-        <el-pagination
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="queryParams.pageNum"
-          :page-sizes="[10, 20, 50, 100, 200, 500]"
-          :page-size="50"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total=total>
-        </el-pagination>
-      </el-card>
-    </div>
-
-    <!-- 用户导入对话框 -->
-    <el-dialog title="数据导入" :visible.sync="upload.open" width="400px">
-      <el-upload
-      ref="upload"
-      :limit="1"
-      accept=".xlsx, .xls"
-      :headers="upload.headers"
-      :action="upload.url + '?updateSupport=' + upload.updateSupport"
-      :disabled="upload.isUploading"
-      :on-progress="handleFileUploadProgress"
-      :on-success="handleFileSuccess"
-      :on-error="errorFile"
-      :auto-upload="false"
-      drag
-      >
-      <i class="el-icon-upload"></i>
-      <div class="el-upload__text">
-        将文件拖到此处，或
-        <em>点击上传</em>
-      </div>
-      <!-- <div class="el-upload__tip" slot="tip">
-        <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-      </div> -->
-      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
-      </el-upload>
-      <div slot="footer">
-      <el-button size="mini" type="primary" @click="submitFileForm">确 定</el-button>
-      <el-button size="mini" @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 模板下载新增参数 -->
-    <el-dialog title="需求模板下载" :visible.sync="download.open" @close="clearDownload" width="400px">
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">需求计划</span>
-        <el-select size="mini" v-model="download.planType">
-          <el-option v-for="dict in dict.type.sys_plan_type" :key="dict.value" :label="dict.label" :value="dict.value">
-          </el-option>
-        </el-select>
-      </el-row>
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">需求客户</span>
-        <el-select clearable size="mini" v-model="download.customer" @clear="download.customer = ''" @focus="chooseOrg('CUSTOMER_PARAM', true, '选择客户')">
-          <el-option v-for="item in mBcustomer" :key="item.id" :label="item.name" :value="item.code" />
-        </el-select>
-      </el-row>
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">供应仓库</span>
-        <el-select clearable size="mini" v-model="download.warehouse" @clear="cleanMb" @focus="chooseOrg('WAREHOUSE_PARAM', true, '选择仓库')">
-          <el-option v-for="item in mBwarehouse" :key="item.id" :label="item.name" :value="item.code" />
-        </el-select>
-      </el-row>
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">供应货位</span>
-        <el-select clearable size="mini" v-model="download.cargoSpace" @clear="download.cargoSpace = ''" @focus="mbHuowei('ALLOCATION_PARAM', true, '选择货位', download.warehouseId)">
-          <el-option v-for="item in mBcargoSpace" :key="item.id" :label="item.name" :value="item.code" />
-        </el-select>
-      </el-row>
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">品类选择</span>
-        <el-select
-        v-model="download.category"
-        size="mini"
-        clearable
-        @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '选择品类')"
-        >
-          <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
-        </el-select>
-      </el-row>
-      <div slot="footer">
-      <el-button size="mini" type="primary" @click="mbDownload">模板下载</el-button>
-      <el-button size="mini" @click="download.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 需求窗口期 -->
-    <el-dialog title="需求窗口期" :visible.sync="setDemand.open" @close="closeDemand" width="800px">
-      <div slot="footer">
-        <el-button size="mini" @click="setDemand.open = false">取 消</el-button>
-        <el-button type="primary" size="mini" @click="saveDemand">保 存</el-button>
-      </div>
-      <el-table
-        :data="setDemand.gridData"
-      >
-        <el-table-column property="ways" label="方案">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.ways" size="mini" disabled>
-              <el-option v-for="dict in dict.type.sys_plan_type" :key="dict.value" :label="dict.label" :value="dict.value">
-              </el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column property="category" label="类型">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.category" size="mini" disabled>
-              <el-option v-for="dict in dict.type.sys_plan_type" :key="dict.value" :label="dict.label" :value="dict.value">
-              </el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column property="deadline" label="截止星期">
-          <template slot-scope="scope">
-            <el-input-number size="mini" :min=1 :max="scope.row.ways == 'ZJH' ? 7 : 12 " v-model="scope.row.deadline" clearable @input=changeDeadline(scope.row)></el-input-number>
-          </template>
-        </el-table-column>
-        <el-table-column property="remark" label="备注">
-          <template slot-scope="scope">
-            <el-input size="mini" v-model="scope.row.remark" clearable></el-input>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- <span style="color: red">注:周计划星期填写范围1-7，月计划填写范围1-12</span> -->
-    </el-dialog>
-
-    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="searchList"/>
-  
-    <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>
-
-    <TreeRefers ref="tree" @doSubmit="selectionsToInput2" :single="true"/>
-  </div>
-</template>
-
-<script>
-// 导入的token
-import { getToken } from "@/utils/auth";
-import Add from './add.vue'
-import Refers from '@/components/Refers/refers.vue'
-import TreeRefers from '@/components/Refers/sigleTreeRefer.vue'
-import CollapseTransition from '@/components/MyCollapse/collapse.vue'
-// 流程收回
-import { rebacktWork } from '@/api/purchase/workSpace.js'
-import {getDemandList, delDemand, downLoadDemand, exportDemand, submitDemand, confirmSubmit, getDemandWindowList, saveDemandWindow } from '@/api/purchase/purchaseDemand.js'
-export default {
-  name: 'PurchaseDemandList',
-  components: {
-    Add,
-    CollapseTransition,
-    Refers,
-    TreeRefers,
-    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
-  },
-  dicts: ['sys_processing_mode', 'sys_status', 'sys_bill_source', 'sys_business', 'sys_reserve_ratio', 'sys_period_unit', 'sys_price_type', 'sys_plan_type', 'oa_templete_id'],
-  data() {
-    return {
-      loading: true,
-      // 导入参数
-      upload: {
-        // 是否显示弹出层（导入）
-        open: false,
-        // 弹出层标题（导入）
-        title: "数据导入",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 1,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/pu/demand/import"
-      },
-      // 模板下载参数
-      download: {
-        open: false,
-        planType: 'ZJH',
-        customer: '',
-        warehouse: '',
-        warehouseId: '',
-        cargoSpace: '',
-        category: ''
-      },
-      mBcustomer: [],
-      mBwarehouse: [],
-      mBcargoSpace: [],
-      classOptions: [],
-      // 下拉收起配置
-      expanded: false,
-      // 页面配置
-      isList: true,
-      // 页面状态
-      page: '',
-      queryParams: {
-        code: this.$route.query.billCode,
-        customer: '',
-        isCustomerSpecified: '',
-        demandPersonal: '',
-        source: '',
-        planType: '',
-        billType: '',
-        demandDept: '',
-        demandDate: '',
-        remark: '',
-        createTimeString: '',
-        materialCode: '',
-        status: '',
-        additionalSupplier: '',
-        pageNum: 1,
-        pageSize: 50
-      },
-      referCondition: {
-        type: '',
-        isPage: true,
-        title: ''
-      },
-      options: [{
-        value: 'Y', label: '是',
-      }, {
-        value: 'N', label: '否'
-      }],
-      customerOptions: [],
-      personOptions: [],
-      deptOptions: [],
-      supplierOptions: [],
-      tableList: [],
-      total: 0,
-      rowDetail: {},
-      disable: false,
-      ids: [],
-      TableColumns: [
-        { item: { key: "code", title: "需求单号", width: 150 }, attr: {} },
-        { item: { key: "demandDate", title: "需求日期", width: 150 }, attr: {} },
-        { item: { key: "createTime", title: "制单日期", width: 150 }, attr: {} },
-        { item: { key: "planType", title: "需求计划", width: 150 }, attr: { is: "el-dict-tag", dictName: "sys_plan_type" } },
-        { item: { key: "approverFinishTime", title: "审批结束日期", width: 150 }, attr: {} },
-        { item: { key: "status", title: "单据状态", width: 150 }, attr: { is: "el-dict-tag", dictName: "sys_status" } },
-        { item: { key: "billType", title: "业务类型", width: 150 }, attr: { is: "el-dict-tag", dictName: "sys_business" } },
-        { item: { key: "demandPersonalName", title: "需求人员", width: 150 }, attr: {} },
-        { item: { key: "customerName", title: "需求客户", width: 150 }, attr: {} },
-        { item: { key: "demandDeptName", title: "需求部门", width: 150 }, attr: {} },
-        { item: { key: "source", title: "单据来源", width: 150 }, attr: { is: "el-dict-tag", dictName: "sys_bill_source" } },
-        { item: { key: "approveUser", title: "当前审批人", width: 150 }, attr: {} },
-        { item: { key: "remark", title: "备注", width: 150 }, attr: {} },
-      ].map(({ item, attr }) => ({
-    attr,
-    item: {
-      ...item,
-      sortabled: true,
-      fixedabled: true,
-      filterabled: true,
-      hiddenabled: true,
-    },
-  })),
-    setDemand: {
-      open: false,
-      gridData: []
-    }
-    }
-  },
-  created() {
-    this.getList(this.queryParams)
-  },
-  methods: {
-    // 格式化表格内容
-    formatterPlanType(row) {
-      switch(row.planType){
-        case 'ZJH':
-          return '周计划'
-        case 'YJH':
-          return '月计划'
-        case 'JJXQ':
-          return '紧急计划'
-      }
-    },
-    formatterStatus(row) {
-      switch(row.status){
-        case '0':
-          return '未提交'
-        case '1':
-          return '审批中'
-        case '2':
-          return '已完成'
-        case '3':
-          return '已驳回'
-        case '9':
-          return '已回退'
-      }
-    },
-    formatterBillType(row) {
-      switch (row.billType) {
-        case 'ZQBH':
-          return '周期备货'
-        case 'FXXQ':
-          return '分销需求'
-        case 'TSXQ':
-          return '特殊采购需求'
-        case 'BDXQ':
-          return '补单需求'
-        case 'JJXQ':
-          return '紧急需求单'
-        case 'XPXQ':
-          return '新品需求'
-        case 'HZBM':
-          return '合作部门需求'
-        case 'DZBH':
-          return '大宗备货'
-        case 'XZCG':
-          return '行政类采购'
-      }
-    },
-    formatterSource(row) {
-      switch (row.source) {
-        case '1':
-          return '手工导入'
-        case '2':
-          return '按客户计算'
-        case '3':
-          return '按仓库计算'
-        case '4':
-          return '手工新增'
-      }
-    },
-    searchList() {
-      this.getList(this.queryParams)
-    },
-    resetList() {
-      this.queryParams = {
-        code: '',
-        customer: '',
-        isCustomerSpecified: '',
-        demandPersonal: '',
-        source: '',
-        planType: '',
-        billType: '',
-        demandDept: '',
-        demandDate: '',
-        remark: '',
-        createTimeString: '',
-        materialCode: '',
-        status: '',
-        additionalSupplier: '',
-        pageNum: 1,
-        pageSize: 50
-      }
-      this.getList(this.queryParams)
-    },
-    getList(params){
-      getDemandList(params).then(res => {
-        if (res.code === 200) {
-          this.tableList = res.rows
-          this.total = res.total
-        }
-      }).then(() => {
-        this.loading = false
-      }).catch(err => {
-        this.loading = false
-      })
-    },
-    handleSelectionChange(selection) {
-      console.log('选中', selection)
-      this.ids = selection.map(item => item.id)
-      console.log('选中数组', this.ids.join())
-    },
-    mbDownload() {
-      this.$modal.loading("正在下载模板，请稍后...");
-      downLoadDemand(this.download).then(res => {
-        this.$modal.closeLoading();
-        const blob = new Blob([res], {
-          type: "application/vnd.ms-excel;charset=UTF-8",
-        });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
-        const downloadElement = document.createElement("a"); //创建a标签
-        const href = window.URL.createObjectURL(blob); // 创建下载的链接
-        // var temp = res.headers["content-disposition"]; 
-        // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
-        // var name = fileName.split(";")[0]; //切割成文件名
-        downloadElement.href = href;  //下载地址
-        downloadElement.download = '采购需求单模板'+ this.parseTime(new Date().getTime()) + ".xlsx"; // 下载后文件名
-        document.body.appendChild(downloadElement);
-        downloadElement.click(); // 点击下载
-        document.body.removeChild(downloadElement); // 下载完成移除元素
-        window.URL.revokeObjectURL(href); // 释放blob对象
-        this.download.open = false
-      }).catch(err => {
-        this.$modal.closeLoading();
-      })
-    },
-    // 关闭模板下载弹窗清空参数
-    clearDownload() {
-      // 模板下载参数
-      this.download =  {
-        open: false,
-        planType: 'ZJH',
-        customer: '',
-        warehouse: '',
-        warehouseId: '',
-        cargoSpace: '',
-        category: ''
-      }
-    },
-    handleCommand(command) {
-      // alert(command)
-      if(command == '模板下载') {
-        this.download.open = true
-      }
-      if (command == '数据导入') {
-        this.upload.title = "用户导入"
-        this.upload.open = true
-      }
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-      this.$modal.loading("正在导入数据，请稍后...");
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.$modal.closeLoading();
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-      this.getList(this.queryParams);
-    },
-    errorFile(err) {
-      this.$modal.closeLoading();
-      this.$modal.notifyError("文件已变动，请重新上传");
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit();
-    },
-    handleExport(command) {
-      if(command == '选中导出') {
-        if (this.ids.length == 0) {
-          this.$modal.notifyWarning("请选中至少一条数据");
-        } else {
-          this.$modal.loading("正在导出数据，请稍后...");
-          let param = {all: false, ids: this.ids}
-          exportDemand(param).then(res => {
-            this.$modal.closeLoading();
-            const blob = new Blob([res], {
-              type: "application/vnd.ms-excel;charset=UTF-8",
-            });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
-            const downloadElement = document.createElement("a"); //创建a标签
-            const href = window.URL.createObjectURL(blob); // 创建下载的链接
-            // var temp = res.headers["content-disposition"]; 
-            // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
-            // var name = fileName.split(";")[0]; //切割成文件名
-            downloadElement.href = href;  //下载地址
-            downloadElement.download = '采购需求单选中导出' + this.parseTime(new Date().getTime()) + ".xlsx"; // 下载后文件名
-            document.body.appendChild(downloadElement);
-            downloadElement.click(); // 点击下载
-            document.body.removeChild(downloadElement); // 下载完成移除元素
-            window.URL.revokeObjectURL(href); // 释放blob对象
-          }).catch(err => {
-            this.$modal.closeLoading();
-          })
-        }
-      } else {
-        this.$modal.loading("正在导出数据，请稍后...");
-        let param2 = {all: true}
-        exportDemand(param2).then(res => {
-          this.$modal.closeLoading();
-          const blob = new Blob([res], {
-            type: "application/vnd.ms-excel;charset=UTF-8",
-          });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
-          const downloadElement = document.createElement("a"); //创建a标签
-          const href = window.URL.createObjectURL(blob); // 创建下载的链接
-          // var temp = res.headers["content-disposition"]; 
-          // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
-          // var name = fileName.split(";")[0]; //切割成文件名
-          downloadElement.href = href;  //下载地址
-          downloadElement.download = '采购需求单全部导出' + this.parseTime(new Date().getTime()) + ".xlsx"; 
-          document.body.appendChild(downloadElement);
-          downloadElement.click(); // 点击下载
-          document.body.removeChild(downloadElement); // 下载完成移除元素
-          window.URL.revokeObjectURL(href); // 释放blob对象
-        }).catch(err => {
-          this.$modal.closeLoading();
-        })
-      }
-    },
-    addDivision() {
-      this.isList = false
-      this.page = 'add'
-      this.disable = false
-    },
-    check(row) {
-      this.isList = false
-      this.page = 'check'
-      this.rowDetail = row
-      this.disable = true
-    },
-    doubleClick(row) {
-      this.isList = false
-      this.page = 'check'
-      this.rowDetail = row
-      this.disable = true
-    },
-    // 表格选中数据
-    rowSelect(row) {
-
-      this.$refs.tables.toggleRowSelection([{row: row}]);
-    },
-    edit(row) {
-      this.isList = false
-      this.page = 'edit'
-      this.rowDetail = row
-      this.disable = false
-    },
-    commit(row) {
-      console.log('row', row)
-      this.$modal.loading("提交中...");
-      submitDemand(row).then(res => {
-        if (res.code === 200) {
-          this.$modal.notifySuccess("提交成功");
-          this.$modal.closeLoading();
-          this.getList(this.queryParams)
-        }
-        if (res.code === 233) {
-          this.$modal.confirm(res.msg).then(function() {
-            // 确认
-          }).then(() => {
-            confirmSubmit(row).then(res => {
-              if (res.code === 200) {
-                this.$modal.notifySuccess("提交成功");
-                this.$modal.closeLoading();
-                this.getList(this.queryParams)
-              }
-            }).catch(err => {
-              this.$modal.closeLoading();
-            })
-            // 取消
-          }).catch(() => {
-            this.$modal.closeLoading();
-          })
-          this.$modal.closeLoading();
-        }
-      }).catch(err => {
-        this.$modal.closeLoading();
-      })
-    },
-    // 流程收回
-    reback(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();
-          this.getList(this.queryParams)
-        }
-      }).catch(err => {
-        this.$modal.closeLoading();
-      })
-    },
-    // 行内删除
-    deleteids(row) {
-      console.log('row', row)
-      this.$modal.confirm('确定删除选择数据?').then(() => {
-        delDemand(row.id).then(res => {
-          if (res.code === 200) {
-            this.$modal.notifySuccess("删除成功");
-            this.getList(this.queryParams)
-          }
-        })
-        }).catch(() => {})
-    },
-    // 批量删除按钮
-    delItems() {
-      if(this.ids.length == 0) {
-        this.$modal.notifyWarning("请选中至少一条数据");
-      } else {
-        let param = this.ids.join()
-        this.$modal.confirm('确认删除选中数据?').then(() => {
-        delDemand(param).then(res => {
-          if (res.code === 200) {
-            this.$modal.notifySuccess("删除成功");
-            this.getList(this.queryParams)
-          }
-        })
-        }).catch(() => {})
-      }
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-      this.queryParams.pageSize = val
-      this.getList(this.queryParams)
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-      this.queryParams.pageNum = val
-      this.getList(this.queryParams)
-    },
-    drop() {
-      this.expanded = !this.expanded
-    },
-    // 搜索区参照选择
-    chooseOrg(type, isPage, title, stordocId) {
-      this.referCondition.type = type
-      this.referCondition.isPage = isPage
-      this.referCondition.title = title
-      this.referCondition.stordocId = stordocId
-      this.$refs.refer.init(this.referCondition)
-    },
-    selectionsToInput(selection) {
-      // 搜索区选择客户
-      if (this.referCondition.type == 'CUSTOMER_PARAM' && this.referCondition.title == '需求客户') {
-        this.customerOptions = selection
-        this.queryParams.customer = selection[0].id
-      }
-      // 模板内选择客户
-      if (this.referCondition.type == 'CUSTOMER_PARAM' && this.referCondition.title == '选择客户') {
-        this.mBcustomer = selection
-        this.download.customer = selection[0].code
-      }
-      // 模板内选择仓库
-      if (this.referCondition.type == 'WAREHOUSE_PARAM' && this.referCondition.title == '选择仓库') {
-        this.mBwarehouse = selection
-        this.download.warehouse = selection[0].code
-        this.download.warehouseId = selection[0].id
-      }
-      // 模板内选择货位
-      if (this.referCondition.type == 'ALLOCATION_PARAM' && this.referCondition.title == '选择货位') {
-        this.mBcargoSpace = selection
-        this.download.cargoSpace = selection[0].code
-      }
-      if (this.referCondition.type == 'CONTACTS_PARAM') {
-        this.personOptions = selection
-        this.queryParams.demandPersonal = selection[0].code
-      }
-      if (this.referCondition.type == 'DEPT_PARAM') {
-        this.deptOptions = selection
-        this.queryParams.demandDept = selection[0].id
-      }
-      if (this.referCondition.type == 'SUPPLIER_PARAM') {
-        this.supplierOptions = selection
-        this.queryParams.additionalSupplier = selection[0].id
-      }
-    },
-    mbHuowei(type, isPage, title, stordocId) {
-      this.referCondition.type = type
-      this.referCondition.isPage = isPage
-      this.referCondition.title = title
-      if(stordocId) {
-        this.referCondition.stordocId = stordocId
-        this.$refs.refer.init(this.referCondition)
-      } else {
-        this.$modal.notifyWarning("请先选择仓库")
-      }
-    },
-    cleanMb() {
-      this.download.warehouse = ''
-      this.download.warehouseId = ''
-    },
-    // 搜索区树形选择
-    chooseTreeRefer(type, isPage, title) {
-      this.referCondition.type = type
-      this.referCondition.isPage = isPage
-      this.referCondition.title = title
-      this.$refs.tree.init(this.referCondition)
-    },
-    selectionsToInput2(selection) {
-      this.classOptions.push(selection)
-      this.download.category = selection.code
-    },
-    // 需求窗口期配置
-    demandWindow() {
-      this.setDemand.open = true
-      this.$nextTick(() => {
-        getDemandWindowList().then(res => {
-          if (res.code === 200) {
-            this.setDemand.gridData = res.rows
-          }
-        })
-      })
-    },
-    saveDemand() {
-      let params = this.setDemand.gridData
-      saveDemandWindow(params).then(res => {
-        if (res.code === 200) {
-          this.$modal.notifySuccess("保存成功");
-          this.setDemand.open = false
-        }
-      })
-    },
-    changeDeadline(row) {
-      row.delFlag = '2'
-    },
-    closeDemand() {}
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-#PurchaseDemandList {
-  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;
-}
-::v-deep .el-table__row > td {
-  border-right: none;
-}
- ::v-deep .el-card .el-form-item {
-  margin-bottom: 10px;
-}
-</style>
-<style>
-.exporttable {
-  border: solid 1px #c0c0c0;
-}
-.el-table .el-table__header-wrapper th {
-  font-size: 14px;
-}
-</style>

src/views/purchase/PurchaseDemandList/index-bak.vue

@@ -1,874 +0,0 @@
-<template>
-  <div id="PurchaseDemandList">
-    <div v-if="isList">
-      <el-card style="position: relative;">
-        <el-form class="search_area" label-width="100px">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-form-item label="需求单号">
-                <el-input
-                  v-model.trim="queryParams.code"
-                  size="mini"
-                  clearable
-                  style="width: 200px"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="需求客户">
-                <el-select clearable size="mini" v-model="queryParams.customer" @focus="chooseOrg('CUSTOMER_PARAM', true, '需求客户')" style="width: 200px">
-                  <el-option v-for="item in customerOptions" :key="item.id" :label="item.name" :value="item.id" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="是否客户指定">
-                <el-select clearable v-model="queryParams.isCustomerSpecified" size="mini" style="width: 200px" placeholder="请选择">
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="需求人员">
-                <el-select clearable size="mini" v-model="queryParams.demandPersonal" @focus="chooseOrg('CONTACTS_PARAM', true, '需求人员')" style="width: 200px">
-                  <el-option v-for="item in personOptions" :key="item.id" :label="item.name" :value="item.code" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <!-- <el-col :span="1.5"> -->
-              <!-- <el-form-item label="" label-width="20px"> -->
-                <div style="position: absolute;top: 3px;right: 10px;">
-                  <el-button type="primary" size="mini" @click="searchList">搜索</el-button>
-                  <el-button size="mini" plain @click="resetList">重置</el-button>
-                </div>
-              <!-- </el-form-item> -->
-            <!-- </el-col> -->
-          </el-row>
-        <CollapseTransition>
-          <div v-show="expanded">
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-form-item label="单据来源">
-                <el-select clearable v-model="queryParams.source" size="mini" style="width: 200px">
-                  <el-option v-for="dict in dict.type.sys_bill_source" :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-select clearable v-model="queryParams.billType" size="mini" style="width: 200px">
-                  <el-option v-for=" dict in dict.type.sys_business" :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-select clearable v-model="queryParams.demandDept" size="mini" @focus="chooseOrg('DEPT_PARAM', true, '需求部门')" style="width: 200px">
-                  <el-option
-                    v-for="item in deptOptions"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="需求日期">
-                <el-date-picker
-                  v-model="queryParams.demandDate"
-                  type="date"
-                  clearable
-                  value-format="yyyy-MM-dd"
-                  size="mini"
-                  style="width: 200px"
-                >
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          
-          <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-form-item label="物料编码">
-                <el-input
-                  v-model.trim="queryParams.materialCode"
-                  size="mini"
-                  clearable
-                  style="width: 200px"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="1.5">
-              <el-form-item label="单据状态">
-                <el-select clearable v-model="queryParams.status" size="mini" style="width: 200px">
-                  <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-select clearable v-model="queryParams.planType" size="mini" style="width: 200px">
-                  <el-option v-for="dict in dict.type.sys_plan_type" :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-date-picker
-                  v-model="queryParams.createTimeString"
-                  type="date"
-                  clearable
-                  value-format="yyyy-MM-dd"
-                  size="mini"
-                  style="width: 200px"
-                >
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row>
-            <el-col :span="1.5">
-              <el-form-item label="补单供应商">
-                <el-select clearable size="mini" v-model="queryParams.additionalSupplier" @focus="chooseOrg('SUPPLIER_PARAM', true, '供应商')" style="width: 200px">
-                  <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          </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="addDivision">新增</el-button>
-
-          <el-dropdown size="mini" @command="handleCommand">
-            <el-button size="mini" type="primary" style="margin-left: 10px;">
-              导入<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
-              <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <el-dropdown size="mini" @command="handleExport">
-            <el-button size="mini" type="primary" style="margin: 0 10px;">
-              导出<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="选中导出">选中导出</el-dropdown-item>
-              <el-dropdown-item command="全部导出">全部导出</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <el-button type="primary" size="mini" @click="delItems">删除</el-button>
-          <!-- <el-button type="primary" size="mini">打印</el-button> -->
-        </div>
-        
-        <el-table
-          v-loading="loading"
-          :data="tableList" 
-          fit
-          :cell-style="{ borderColor: '#c0c0c0' }"
-          :header-cell-style="{ borderColor: '#c0c0c0' }"
-          class="exporttable"
-          max-height="410"
-          border
-          highlight-current-row
-          style="font-size: 12px;"
-          @selection-change="handleSelectionChange"
-          @row-click="rowSelect"
-          @row-dblclick="doubleClick"
-          ref="tables"
-        >
-          <el-table-column show-overflow-tooltip type="selection" width="55" fixed="left"/>
-          <el-table-column show-overflow-tooltip label="序号" type="index" align="center" width="50px" fixed="left"/>
-          <el-table-column show-overflow-tooltip label="需求单号" align="center" width="170" prop="code"/>
-          <el-table-column show-overflow-tooltip label="需求日期" align="center" width="100" prop="demandDate"/>
-          <el-table-column show-overflow-tooltip label="制单日期" align="center" width="100" prop="createTime"/>
-          <el-table-column show-overflow-tooltip label="需求计划" align="center" width="120" prop="planType" :formatter="formatterPlanType"/>
-          <el-table-column show-overflow-tooltip label="审批结束日期" align="center" width="120" prop="approverFinishTime"/>
-          <el-table-column show-overflow-tooltip label="单据状态" align="center" prop="satus" :formatter="formatterStatus"/>
-          <el-table-column show-overflow-tooltip label="业务类型" align="center" width="120" prop="billType" :formatter="formatterBillType"/>
-          <!-- <el-table-column show-overflow-tooltip label="是否特殊需求" align="center" width="150" prop="isSpeical" /> -->
-          <el-table-column show-overflow-tooltip label="需求人员" align="center" prop="demandPersonalName" />
-          <el-table-column show-overflow-tooltip label="需求客户" align="center" prop="customerName" width="150"/>
-          <el-table-column show-overflow-tooltip label="需求部门" align="center" prop="demandDeptName" width="150"/>
-          <!-- <el-table-column show-overflow-tooltip label="供应仓库" align="center" width="120" prop="warehouseName" /> -->
-          <!-- <el-table-column show-overflow-tooltip label="供应货位" align="center" width="150" prop="goodsAllocationName" /> -->
-          <el-table-column show-overflow-tooltip label="单据来源" align="center" prop="source" width="120" :formatter="formatterSource"/>
-          <el-table-column show-overflow-tooltip label="当前审批人" align="center" width="120" prop="approveUser" />
-          <el-table-column show-overflow-tooltip label="备注" align="center" width="150" prop="remark" />
-          <el-table-column
-          fixed="right"
-          label="操作"
-          align="center"
-          width="180"
-          >
-          <template slot-scope="scope">
-            <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
-            <el-button type="text" size="mini" v-if="scope.row.status == '0' || scope.row.status == '3' || scope.row.status == '9'" @click="edit(scope.row)">编辑</el-button>
-            <el-button type="text" size="mini" v-if="scope.row.status == '0' || scope.row.status == '3' || scope.row.status == '9'" @click="commit(scope.row)">提交</el-button>
-            <el-button type="text" size="mini" v-if="scope.row.status == '1' && scope.row.flowId" @click="reback(scope.row)">收回</el-button>
-            <el-button type="text" size="mini" v-if="scope.row.status == '0' || scope.row.status == '3' || scope.row.status == '9'" @click="deleteids(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-        </el-table>
-
-        <el-pagination
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="queryParams.pageNum"
-          :page-sizes="[10, 20, 50, 100, 200, 500]"
-          :page-size="50"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total=total>
-        </el-pagination>
-      </el-card>
-    </div>
-
-    <!-- 用户导入对话框 -->
-    <el-dialog title="数据导入" :visible.sync="upload.open" width="400px">
-      <el-upload
-      ref="upload"
-      :limit="1"
-      accept=".xlsx, .xls"
-      :headers="upload.headers"
-      :action="upload.url + '?updateSupport=' + upload.updateSupport"
-      :disabled="upload.isUploading"
-      :on-progress="handleFileUploadProgress"
-      :on-success="handleFileSuccess"
-      :on-error="errorFile"
-      :auto-upload="false"
-      drag
-      >
-      <i class="el-icon-upload"></i>
-      <div class="el-upload__text">
-        将文件拖到此处，或
-        <em>点击上传</em>
-      </div>
-      <!-- <div class="el-upload__tip" slot="tip">
-        <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-      </div> -->
-      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
-      </el-upload>
-      <div slot="footer">
-      <el-button size="mini" type="primary" @click="submitFileForm">确 定</el-button>
-      <el-button size="mini" @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 模板下载新增参数 -->
-    <el-dialog title="需求模板下载" :visible.sync="download.open" @close="clearDownload" width="400px">
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">需求计划</span>
-        <el-select size="mini" v-model="download.planType">
-          <el-option v-for="dict in dict.type.sys_plan_type" :key="dict.value" :label="dict.label" :value="dict.value">
-          </el-option>
-        </el-select>
-      </el-row>
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">需求客户</span>
-        <el-select clearable size="mini" v-model="download.customer" @clear="download.customer = ''" @focus="chooseOrg('CUSTOMER_PARAM', true, '选择客户')">
-          <el-option v-for="item in mBcustomer" :key="item.id" :label="item.name" :value="item.code" />
-        </el-select>
-      </el-row>
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">供应仓库</span>
-        <el-select clearable size="mini" v-model="download.warehouse" @clear="cleanMb" @focus="chooseOrg('WAREHOUSE_PARAM', true, '选择仓库')">
-          <el-option v-for="item in mBwarehouse" :key="item.id" :label="item.name" :value="item.code" />
-        </el-select>
-      </el-row>
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">供应货位</span>
-        <el-select clearable size="mini" v-model="download.cargoSpace" @clear="download.cargoSpace = ''" @focus="mbHuowei('ALLOCATION_PARAM', true, '选择货位', download.warehouseId)">
-          <el-option v-for="item in mBcargoSpace" :key="item.id" :label="item.name" :value="item.code" />
-        </el-select>
-      </el-row>
-      <el-row style="margin-bottom: 20px;">
-        <span style="margin-right: 10px;">品类选择</span>
-        <el-select
-        v-model="download.category"
-        size="mini"
-        clearable
-        @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '选择品类')"
-        >
-          <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.code" />
-        </el-select>
-      </el-row>
-      <div slot="footer">
-      <el-button size="mini" type="primary" @click="mbDownload">模板下载</el-button>
-      <el-button size="mini" @click="download.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="searchList"/>
-  
-    <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>
-
-    <TreeRefers ref="tree" @doSubmit="selectionsToInput2" :single="true"/>
-  </div>
-</template>
-
-<script>
-// 导入的token
-import { getToken } from "@/utils/auth";
-import Add from './add.vue'
-import Refers from '@/components/Refers/refers.vue'
-import TreeRefers from '@/components/Refers/sigleTreeRefer.vue'
-import CollapseTransition from '@/components/MyCollapse/collapse.vue'
-// 流程收回
-import { rebacktWork } from '@/api/purchase/workSpace.js'
-import {getDemandList, delDemand, downLoadDemand, exportDemand, submitDemand, confirmSubmit } from '@/api/purchase/purchaseDemand.js'
-export default {
-  name: 'PurchaseDemandList',
-  components: {
-    Add,
-    CollapseTransition,
-    Refers,
-    TreeRefers
-  },
-  dicts: ['sys_processing_mode', 'sys_status', 'sys_bill_source', 'sys_business', 'sys_reserve_ratio', 'sys_period_unit', 'sys_price_type', 'sys_plan_type', 'oa_templete_id'],
-  data() {
-    return {
-      loading: true,
-      // 导入参数
-      upload: {
-        // 是否显示弹出层（导入）
-        open: false,
-        // 弹出层标题（导入）
-        title: "数据导入",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 1,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/pu/demand/import"
-      },
-      // 模板下载参数
-      download: {
-        open: false,
-        planType: 'ZJH',
-        customer: '',
-        warehouse: '',
-        warehouseId: '',
-        cargoSpace: '',
-        category: ''
-      },
-      mBcustomer: [],
-      mBwarehouse: [],
-      mBcargoSpace: [],
-      classOptions: [],
-      // 下拉收起配置
-      expanded: false,
-      // 页面配置
-      isList: true,
-      // 页面状态
-      page: '',
-      queryParams: {
-        code: this.$route.query.billCode,
-        customer: '',
-        isCustomerSpecified: '',
-        demandPersonal: '',
-        source: '',
-        planType: '',
-        billType: '',
-        demandDept: '',
-        demandDate: '',
-        remark: '',
-        createTimeString: '',
-        materialCode: '',
-        status: '',
-        additionalSupplier: '',
-        pageNum: 1,
-        pageSize: 50
-      },
-      referCondition: {
-        type: '',
-        isPage: true,
-        title: ''
-      },
-      options: [{
-        value: 'Y', label: '是',
-      }, {
-        value: 'N', label: '否'
-      }],
-      customerOptions: [],
-      personOptions: [],
-      deptOptions: [],
-      supplierOptions: [],
-      tableList: [],
-      total: 0,
-      rowDetail: {},
-      disable: false,
-      ids: []
-    }
-  },
-  created() {
-    this.getList(this.queryParams)
-  },
-  methods: {
-    // 格式化表格内容
-    formatterPlanType(row) {
-      switch(row.planType){
-        case 'ZJH':
-          return '周计划'
-        case 'YJH':
-          return '月计划'
-        case 'JJXQ':
-          return '紧急计划'
-      }
-    },
-    formatterStatus(row) {
-      switch(row.status){
-        case '0':
-          return '未提交'
-        case '1':
-          return '审批中'
-        case '2':
-          return '已完成'
-        case '3':
-          return '已驳回'
-        case '9':
-          return '已回退'
-      }
-    },
-    formatterBillType(row) {
-      switch (row.billType) {
-        case 'ZQBH':
-          return '周期备货'
-        case 'FXXQ':
-          return '分销需求'
-        case 'TSXQ':
-          return '特殊采购需求'
-        case 'BDXQ':
-          return '补单需求'
-        case 'JJXQ':
-          return '紧急需求单'
-        case 'XPXQ':
-          return '新品需求'
-        case 'HZBM':
-          return '合作部门需求'
-        case 'DZBH':
-          return '大宗备货'
-        case 'XZCG':
-          return '行政类采购'
-      }
-    },
-    formatterSource(row) {
-      switch (row.source) {
-        case '1':
-          return '手工导入'
-        case '2':
-          return '按客户计算'
-        case '3':
-          return '按仓库计算'
-        case '4':
-          return '手工新增'
-      }
-    },
-    searchList() {
-      this.getList(this.queryParams)
-    },
-    resetList() {
-      this.queryParams = {
-        code: '',
-        customer: '',
-        isCustomerSpecified: '',
-        demandPersonal: '',
-        source: '',
-        planType: '',
-        billType: '',
-        demandDept: '',
-        demandDate: '',
-        remark: '',
-        createTimeString: '',
-        materialCode: '',
-        status: '',
-        additionalSupplier: '',
-        pageNum: 1,
-        pageSize: 50
-      }
-      this.getList(this.queryParams)
-    },
-    getList(params){
-      getDemandList(params).then(res => {
-        if (res.code === 200) {
-          this.tableList = res.rows
-          this.total = res.total
-        }
-      }).then(() => {
-        this.loading = false
-      }).catch(err => {
-        this.loading = false
-      })
-    },
-    handleSelectionChange(selection) {
-      console.log('选中', selection)
-      this.ids = selection.map(item => item.id)
-      console.log('选中数组', this.ids.join())
-    },
-    mbDownload() {
-      this.$modal.loading("正在下载模板，请稍后...");
-      downLoadDemand(this.download).then(res => {
-        this.$modal.closeLoading();
-        const blob = new Blob([res], {
-          type: "application/vnd.ms-excel;charset=UTF-8",
-        });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
-        const downloadElement = document.createElement("a"); //创建a标签
-        const href = window.URL.createObjectURL(blob); // 创建下载的链接
-        // var temp = res.headers["content-disposition"]; 
-        // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
-        // var name = fileName.split(";")[0]; //切割成文件名
-        downloadElement.href = href;  //下载地址
-        downloadElement.download = '采购需求单模板'+ this.parseTime(new Date().getTime()) + ".xlsx"; // 下载后文件名
-        document.body.appendChild(downloadElement);
-        downloadElement.click(); // 点击下载
-        document.body.removeChild(downloadElement); // 下载完成移除元素
-        window.URL.revokeObjectURL(href); // 释放blob对象
-        this.download.open = false
-      }).catch(err => {
-        this.$modal.closeLoading();
-      })
-    },
-    // 关闭模板下载弹窗清空参数
-    clearDownload() {
-      // 模板下载参数
-      this.download =  {
-        open: false,
-        planType: 'ZJH',
-        customer: '',
-        warehouse: '',
-        warehouseId: '',
-        cargoSpace: '',
-        category: ''
-      }
-    },
-    handleCommand(command) {
-      // alert(command)
-      if(command == '模板下载') {
-        this.download.open = true
-      }
-      if (command == '数据导入') {
-        this.upload.title = "用户导入"
-        this.upload.open = true
-      }
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-      this.$modal.loading("正在导入数据，请稍后...");
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.$modal.closeLoading();
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-      this.getList(this.queryParams);
-    },
-    errorFile(err) {
-      this.$modal.closeLoading();
-      this.$modal.notifyError("文件已变动，请重新上传");
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit();
-    },
-    handleExport(command) {
-      if(command == '选中导出') {
-        if (this.ids.length == 0) {
-          this.$modal.notifyWarning("请选中至少一条数据");
-        } else {
-          this.$modal.loading("正在导出数据，请稍后...");
-          let param = {all: false, ids: this.ids}
-          exportDemand(param).then(res => {
-            this.$modal.closeLoading();
-            const blob = new Blob([res], {
-              type: "application/vnd.ms-excel;charset=UTF-8",
-            });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
-            const downloadElement = document.createElement("a"); //创建a标签
-            const href = window.URL.createObjectURL(blob); // 创建下载的链接
-            // var temp = res.headers["content-disposition"]; 
-            // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
-            // var name = fileName.split(";")[0]; //切割成文件名
-            downloadElement.href = href;  //下载地址
-            downloadElement.download = '采购需求单选中导出' + this.parseTime(new Date().getTime()) + ".xlsx"; // 下载后文件名
-            document.body.appendChild(downloadElement);
-            downloadElement.click(); // 点击下载
-            document.body.removeChild(downloadElement); // 下载完成移除元素
-            window.URL.revokeObjectURL(href); // 释放blob对象
-          }).catch(err => {
-            this.$modal.closeLoading();
-          })
-        }
-      } else {
-        this.$modal.loading("正在导出数据，请稍后...");
-        let param2 = {all: true}
-        exportDemand(param2).then(res => {
-          this.$modal.closeLoading();
-          const blob = new Blob([res], {
-            type: "application/vnd.ms-excel;charset=UTF-8",
-          });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
-          const downloadElement = document.createElement("a"); //创建a标签
-          const href = window.URL.createObjectURL(blob); // 创建下载的链接
-          // var temp = res.headers["content-disposition"]; 
-          // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
-          // var name = fileName.split(";")[0]; //切割成文件名
-          downloadElement.href = href;  //下载地址
-          downloadElement.download = '采购需求单全部导出' + this.parseTime(new Date().getTime()) + ".xlsx"; 
-          document.body.appendChild(downloadElement);
-          downloadElement.click(); // 点击下载
-          document.body.removeChild(downloadElement); // 下载完成移除元素
-          window.URL.revokeObjectURL(href); // 释放blob对象
-        }).catch(err => {
-          this.$modal.closeLoading();
-        })
-      }
-    },
-    addDivision() {
-      this.isList = false
-      this.page = 'add'
-      this.disable = false
-    },
-    check(row) {
-      this.isList = false
-      this.page = 'check'
-      this.rowDetail = row
-      this.disable = true
-    },
-    doubleClick(row) {
-      this.isList = false
-      this.page = 'check'
-      this.rowDetail = row
-      this.disable = true
-    },
-    // 表格选中数据
-    rowSelect(row) {
-      this.$refs.tables.toggleRowSelection(row);
-    },
-    edit(row) {
-      this.isList = false
-      this.page = 'edit'
-      this.rowDetail = row
-      this.disable = false
-    },
-    commit(row) {
-      console.log('row', row)
-      this.$modal.loading("提交中...");
-      submitDemand(row).then(res => {
-        if (res.code === 200) {
-          this.$modal.notifySuccess("提交成功");
-          this.$modal.closeLoading();
-          this.getList(this.queryParams)
-        }
-        if (res.code === 233) {
-          this.$modal.confirm(res.msg).then(function() {
-            // 确认
-          }).then(() => {
-            confirmSubmit(row).then(res => {
-              if (res.code === 200) {
-                this.$modal.notifySuccess("提交成功");
-                this.$modal.closeLoading();
-                this.getList(this.queryParams)
-              }
-            }).catch(err => {
-              this.$modal.closeLoading();
-            })
-            // 取消
-          }).catch(() => {
-            this.$modal.closeLoading();
-          })
-          this.$modal.closeLoading();
-        }
-      }).catch(err => {
-        this.$modal.closeLoading();
-      })
-    },
-    // 流程收回
-    reback(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();
-          this.getList(this.queryParams)
-        }
-      }).catch(err => {
-        this.$modal.closeLoading();
-      })
-    },
-    // 行内删除
-    deleteids(row) {
-      console.log('row', row)
-      this.$modal.confirm('确定删除选择数据?').then(() => {
-        delDemand(row.id).then(res => {
-          if (res.code === 200) {
-            this.$modal.notifySuccess("删除成功");
-            this.getList(this.queryParams)
-          }
-        })
-        }).catch(() => {})
-    },
-    // 批量删除按钮
-    delItems() {
-      if(this.ids.length == 0) {
-        this.$modal.notifyWarning("请选中至少一条数据");
-      } else {
-        let param = this.ids.join()
-        this.$modal.confirm('确认删除选中数据?').then(() => {
-        delDemand(param).then(res => {
-          if (res.code === 200) {
-            this.$modal.notifySuccess("删除成功");
-            this.getList(this.queryParams)
-          }
-        })
-        }).catch(() => {})
-      }
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-      this.queryParams.pageSize = val
-      this.getList(this.queryParams)
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-      this.queryParams.pageNum = val
-      this.getList(this.queryParams)
-    },
-    drop() {
-      this.expanded = !this.expanded
-    },
-    // 搜索区参照选择
-    chooseOrg(type, isPage, title, stordocId) {
-      this.referCondition.type = type
-      this.referCondition.isPage = isPage
-      this.referCondition.title = title
-      this.referCondition.stordocId = stordocId
-      this.$refs.refer.init(this.referCondition)
-    },
-    selectionsToInput(selection) {
-      // 搜索区选择客户
-      if (this.referCondition.type == 'CUSTOMER_PARAM' && this.referCondition.title == '需求客户') {
-        this.customerOptions = selection
-        this.queryParams.customer = selection[0].id
-      }
-      // 模板内选择客户
-      if (this.referCondition.type == 'CUSTOMER_PARAM' && this.referCondition.title == '选择客户') {
-        this.mBcustomer = selection
-        this.download.customer = selection[0].code
-      }
-      // 模板内选择仓库
-      if (this.referCondition.type == 'WAREHOUSE_PARAM' && this.referCondition.title == '选择仓库') {
-        this.mBwarehouse = selection
-        this.download.warehouse = selection[0].code
-        this.download.warehouseId = selection[0].id
-      }
-      // 模板内选择货位
-      if (this.referCondition.type == 'ALLOCATION_PARAM' && this.referCondition.title == '选择货位') {
-        this.mBcargoSpace = selection
-        this.download.cargoSpace = selection[0].code
-      }
-      if (this.referCondition.type == 'CONTACTS_PARAM') {
-        this.personOptions = selection
-        this.queryParams.demandPersonal = selection[0].code
-      }
-      if (this.referCondition.type == 'DEPT_PARAM') {
-        this.deptOptions = selection
-        this.queryParams.demandDept = selection[0].id
-      }
-      if (this.referCondition.type == 'SUPPLIER_PARAM') {
-        this.supplierOptions = selection
-        this.queryParams.additionalSupplier = selection[0].id
-      }
-    },
-    mbHuowei(type, isPage, title, stordocId) {
-      this.referCondition.type = type
-      this.referCondition.isPage = isPage
-      this.referCondition.title = title
-      if(stordocId) {
-        this.referCondition.stordocId = stordocId
-        this.$refs.refer.init(this.referCondition)
-      } else {
-        this.$modal.notifyWarning("请先选择仓库")
-      }
-    },
-    cleanMb() {
-      this.download.warehouse = ''
-      this.download.warehouseId = ''
-    },
-    // 搜索区树形选择
-    chooseTreeRefer(type, isPage, title) {
-      this.referCondition.type = type
-      this.referCondition.isPage = isPage
-      this.referCondition.title = title
-      this.$refs.tree.init(this.referCondition)
-    },
-    selectionsToInput2(selection) {
-      this.classOptions.push(selection)
-      this.download.category = selection.code
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-#PurchaseDemandList {
-  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;
-}
-::v-deep .el-table__row > td {
-  border-right: none;
-}
- ::v-deep .el-card .el-form-item {
-  margin-bottom: 10px;
-}
-</style>
-<style>
-.exporttable {
-  border: solid 1px #c0c0c0;
-}
-.el-table .el-table__header-wrapper th {
-  font-size: 14px;
-}
-</style>

src/views/purchase/PurchaseDemandList/index.vue

@@ -12,9 +12,6 @@
         ></el-super-search>
 
         <div class="btn_grooup">
-          <!-- <el-button type="primary" :size="size" @click="demandWindow"
-            >需求窗口期</el-button
-          > -->
           <DemandButton :size="size" :dict="dict"></DemandButton>
           <el-button type="primary" :size="size" @click="addDivision"
             >新增</el-button
@@ -54,7 +51,6 @@
           index
           checkbox
           pagination
-          class="exporttable"
           :height="540"
           highlight-current-row
           convenitentOperation
@@ -250,67 +246,6 @@
       </div>
     </el-dialog>
 
-    <!-- 需求窗口期 -->
-    <!-- <el-dialog title="需求窗口期" :visible.sync="setDemand.open" width="800px">
-      <div slot="footer">
-        <el-button :size="size" @click="setDemand.open = false"
-          >取 消</el-button
-        >
-        <el-button type="primary" :size="size" @click="saveDemand"
-          >保 存</el-button
-        >
-      </div>
-      <el-table :data="setDemand.gridData">
-        <el-table-column property="ways" label="方案">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.ways" :size="size" disabled>
-              <el-option
-                v-for="dict in dict.type.sys_plan_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              >
-              </el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column property="category" label="类型">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.category" :size="size" disabled>
-              <el-option
-                v-for="dict in dict.type.sys_plan_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              >
-              </el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column property="deadline" label="截止星期">
-          <template slot-scope="scope">
-            <el-input-number
-              :size="size"
-              :min="1"
-              :max="scope.row.ways == 'ZJH' ? 7 : 12"
-              v-model="scope.row.deadline"
-              clearable
-              @input="changeDeadline(scope.row)"
-            ></el-input-number>
-          </template>
-        </el-table-column>
-        <el-table-column property="remark" label="备注">
-          <template slot-scope="scope">
-            <el-input
-              :size="size"
-              v-model="scope.row.remark"
-              clearable
-            ></el-input>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog> -->
-
     <Add
       v-model="isList"
       v-if="!isList"
@@ -340,8 +275,6 @@ import {
   exportDemand,
   submitDemand,
   confirmSubmit,
-  // getDemandWindowList,
-  // saveDemandWindow,
 } from "@/api/purchase/purchaseDemand.js";
 export default {
   name: "PurchaseDemandList",
@@ -350,7 +283,6 @@ export default {
     Refers: () => import("@/components/Refers/refers.vue"),
     TreeRefers: () => import("@/components/Refers/sigleTreeRefer.vue"),
     ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
-    BatchImport: () => import("@/components/BatchImport/index.vue"),
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
     DemandButton: () => import("./demand/index.vue"),
   },
@@ -425,10 +357,6 @@ export default {
       rowDetail: {},
       disable: false,
       ids: [],
-      // setDemand: {
-      //   open: false,
-      //   gridData: [],
-      // },
     };
   },
   created() {
@@ -797,29 +725,7 @@ export default {
       this.classOptions.push(selection);
       this.download.category = selection.code;
     },
-    // 需求窗口期配置
-    // demandWindow() {
-    //   this.setDemand.open = true;
-    //   this.$nextTick(() => {
-    //     getDemandWindowList().then((res) => {
-    //       if (res.code === 200) {
-    //         this.setDemand.gridData = res.rows;
-    //       }
-    //     });
-    //   });
-    // },
-    // saveDemand() {
-    //   let params = this.setDemand.gridData;
-    //   saveDemandWindow(params).then((res) => {
-    //     if (res.code === 200) {
-    //       this.$modal.notifySuccess("保存成功");
-    //       this.setDemand.open = false;
-    //     }
-    //   });
-    // },
-    // changeDeadline(row) {
-    //   row.delFlag = "2";
-    // },
+   
   },
 };
 </script>

src/views/register.vue

@@ -1,10 +1,24 @@
 <template>
   <div class="register">
-    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
+    <el-form
+      ref="registerForm"
+      :model="registerForm"
+      :rules="registerRules"
+      class="register-form"
+    >
       <h3 class="title">德荣资源平台</h3>
       <el-form-item prop="username">
-        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+        <el-input
+          v-model="registerForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -15,7 +29,11 @@
           placeholder="密码"
           @keyup.enter.native="handleRegister"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="confirmPassword">
@@ -26,7 +44,11 @@
           placeholder="确认密码"
           @keyup.enter.native="handleRegister"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
@@ -37,31 +59,42 @@
           style="width: 63%"
           @keyup.enter.native="handleRegister"
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
         </el-input>
         <div class="register-code">
-          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
+          <img :src="codeUrl" @click="getCode" class="register-code-img" />
         </div>
       </el-form-item>
-      <el-form-item style="width:100%;">
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width: 100%"
           @click.native.prevent="handleRegister"
         >
           <span v-if="!loading">注 册</span>
           <span v-else>注 册 中...</span>
         </el-button>
-        <div style="float: right;">
-          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
+        <div style="float: right">
+          <router-link class="link-type" :to="'/login'"
+            >使用已有账户登录</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
     <!--  底部  -->
     <div class="el-register-footer">
-      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
+      <span
+        >Copyright © 2023-{{
+          new Date().getFullYear()
+        }}
+        德荣医疗科技股份有限公司</span
+      >
     </div>
   </div>
 </template>
@@ -86,25 +119,35 @@ export default {
         password: "",
         confirmPassword: "",
         code: "",
-        uuid: ""
+        uuid: "",
       },
       registerRules: {
         username: [
           { required: true, trigger: "blur", message: "请输入您的账号" },
-          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
+          {
+            min: 2,
+            max: 20,
+            message: "用户账号长度必须介于 2 和 20 之间",
+            trigger: "blur",
+          },
         ],
         password: [
           { required: true, trigger: "blur", message: "请输入您的密码" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
+          {
+            min: 5,
+            max: 20,
+            message: "用户密码长度必须介于 5 和 20 之间",
+            trigger: "blur",
+          },
         ],
         confirmPassword: [
           { required: true, trigger: "blur", message: "请再次输入您的密码" },
-          { required: true, validator: equalToPassword, trigger: "blur" }
+          { required: true, validator: equalToPassword, trigger: "blur" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
-      captchaEnabled: true
+      captchaEnabled: true,
     };
   },
   created() {
@@ -112,8 +155,9 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.registerForm.uuid = res.uuid;
@@ -121,27 +165,37 @@ export default {
       });
     },
     handleRegister() {
-      this.$refs.registerForm.validate(valid => {
+      this.$refs.registerForm.validate((valid) => {
         if (valid) {
           this.loading = true;
-          register(this.registerForm).then(res => {
-            const username = this.registerForm.username;
-            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
-              dangerouslyUseHTMLString: true,
-              type: 'success'
-            }).then(() => {
-              this.$router.push("/login");
-            }).catch(() => {});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          })
+          register(this.registerForm)
+            .then((res) => {
+              const username = this.registerForm.username;
+              this.$alert(
+                "<font color='red'>恭喜你，您的账号 " +
+                  username +
+                  " 注册成功！</font>",
+                "系统提示",
+                {
+                  dangerouslyUseHTMLString: true,
+                  type: "success",
+                }
+              )
+                .then(() => {
+                  this.$router.push("/login");
+                })
+                .catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

vue.config.js

@@ -36,8 +36,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://172.16.100.107:8080/drp-admin`, //测试
-        target: `http://dev-sy.derom.com/drp-admin`, //dev开发
+        target: ` http://dev-sy.derom.com/drp-admin`, //开发
+        // target: `http://test-sy.derom.com/drp-admin`, //测试
         // target: `http://release-sy.derom.com/drp-admin`, //预发
         // target: `http://sy.derom.com/drp-admin`, //生产
         // target: `http://172.16.63.202:8000/drp-admin`, // D本地
@@ -150,10 +150,10 @@ module.exports = {
         },
       });
       config.optimization.runtimeChunk("single"),
-        {
-          from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
-          to: "./", //到根目录下
-        };
+      {
+        from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
+        to: "./", //到根目录下
+      };
     });
   },
 };