完善 《采购合同》

src/components/computed-input-v2/index.vue

@@ -30,9 +30,7 @@ export default {
   },
   watch: {},
   methods: {},
-  created() {
-    console.log("formatter", this, (this.$parent.row.customerName = "D"));
-  },
+  created() {},
   mounted() {},
   destroyed() {},
 };

src/components/file-preview/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="file-preview">
+  <div v-if="fileList.length" class="file-preview">
     <el-button
       :size="size"
       type="text"
@@ -41,6 +41,7 @@
       </div>
     </el-dialog>
   </div>
+  <span v-else>--</span>
 </template>
 
 <script>

src/views/purchase/apply/index.vue

@@ -2,7 +2,6 @@
 import { LIST } from "@/api/business/purchase/apply";
 import { TableColumns, SearchColumns } from "./column";
 import { initDicts, initParams } from "@/utils/init.js";
-
 export default {
   name: "PuchaseApply",
   dicts: [...initDicts([...TableColumns, ...SearchColumns]), "sys_price_type"],
@@ -36,7 +35,6 @@ export default {
     $power: {
       get() {
         const {
-          batching,
           selectData,
           selectData: [{ status } = {}],
         } = this;
@@ -90,9 +88,6 @@ export default {
             $index: (pageNum - 1) * pageSize + index + 1,
           }));
           this.page.total = total;
-          this.page.pageNum = pageNum;
-          this.page.pageSize = pageSize;
-          return this.tableData;
         }
       } catch (err) {
         // catch

src/views/purchase/contract/add/column.js

@@ -1,528 +1,604 @@
-export const FormColumns = [
-  {
-    key: "puOrgName",
-    title: "采购组织",
-    inputType: "PopoverSelect",
-    referName: "ORG_PARAM",
-    dataMapping: {
-      puOrg: "code",
-      puOrgName: "name",
-    },
-    require: true,
-  },
-  { key: "code", title: "合同编码", inputType: "Input" },
-  {
-    key: "lastPuMoney",
-    title: "上年度采购额",
-    inputType: "Input",
-    require: true,
-  },
-  {
-    key: "buyerName",
-    title: "采购员",
-    inputType: "PopoverSelect",
-    referName: "CONTACTS_PARAM",
-    dataMapping: {
-      buyer: "code",
-      buyerName: "name",
-      puDept: "deptId",
-      puDeptName: "deptName",
-    },
-    require: true,
-  },
-  {
-    key: "supplierName",
-    title: "供应商",
-    inputType: "PopoverSelect",
-    referName: "SUPPLIER_PARAM",
-    dataMapping: {
-      supplier: "code",
-      supplierName: "name",
-    },
-    require: true,
-  },
-  {
-    key: "contractType",
-    title: "合同类型",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_contract_type",
-  },
-  {
-    key: "puMoneyYear",
-    title: "本年度采购额",
-    inputType: "InputNumber",
-    require: true,
-  },
-  {
-    key: "puDeptName",
-    title: "采购部门",
-    inputType: "PopoverSelect",
-    referName: "DEPT_PARAM",
-    dataMapping: {
-      puDept: "code",
-      puDeptName: "name",
-    },
-    require: true,
-  },
-  {
-    key: "supplierTier",
-    title: "供应商层级",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_supplier_tier",
-  },
-  { key: "contractName", title: "合同名称", inputType: "Input", require: true },
-  {
-    key: "grossRateAverage",
-    title: "平均毛利率",
-    inputType: "InputNumber",
-    require: true,
-  },
-  {
-    key: "approveFlow",
-    title: "审批流程",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_approve_flow",
-  },
-  {
-    key: "consumableClass",
-    title: "耗材类别",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_consumable_class",
-  },
-  {
-    key: "effectiveDate",
-    title: "合同生效日期",
-    inputType: "DatePicker",
-    require: true,
-    valueFormat: "yyyy-MM-dd",
-  },
-  {
-    key: "brandGrossRate",
-    title: "同类品牌及毛利率",
-    inputType: "InputNumber",
-    require: true,
-  },
-  {
-    key: "contractFormat",
-    title: "合同格式",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_contract_format",
-  },
-  {
-    key: "productName",
-    title: "产品类别&名称",
-    inputType: "Input",
-    require: true,
-  },
-  {
-    key: "endDate",
-    title: "合同终止日期",
-    inputType: "DatePicker",
-    require: true,
-    valueFormat: "yyyy-MM-dd",
-  },
-  {
-    key: "invoiceTax",
-    title: "发票税率",
-    inputType: "PopoverSelect",
-    referName: "TAX_RATE_PARAM",
-    dataMapping: {
-      invoiceTax: "ntaxrate",
-    },
-    require: true,
-  },
-  {
-    key: "emergencyDegree",
-    title: "紧急程度",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_emergency_degree",
-  },
-  { key: "project", title: "项目医院", inputType: "Input", require: true },
-  {
-    key: "signDate",
-    title: "合同签订日期",
-    inputType: "DatePicker",
-    require: true,
-    valueFormat: "yyyy-MM-dd",
-  },
-  {
-    key: "deliveryType",
-    title: "交货方式",
-    inputType: "Select",
-    referName: "puarchase_contract_delivery_type",
-  },
-  {
-    key: "source",
-    title: "合同来源",
-    inputType: "Input",
-    value: "自制",
-    disabled: true,
-  },
-  {
-    key: "contractPartycName",
-    title: "合同丙方",
-    inputType: "PopoverSelect",
-    referName: "SUPPLIER_PARAM",
-    dataMapping: {
-      contractPartyc: "code",
-      contractPartycName: "name",
-    },
-  },
-  {
-    key: "guaranteePeriodEnd",
-    title: "质保期限",
-    inputType: "Input",
-    require: true,
-  },
-  {
-    key: "freightMethods",
-    title: "运费承担方式",
-    inputType: "Select",
-    referName: "puarchase_contract_freight_methods",
-  },
-  {
-    key: "signDate",
-    title: "合同创建时间",
-    inputType: "DatePicker",
-    disabled: true,
-  },
-  {
-    key: "isTarget",
-    title: "是否有指标",
-    inputType: "Select",
-    require: true,
-    referName: "sys_yes_no",
-  },
-  {
-    key: "contractTarget",
-    title: "合同指标",
-    inputType: "Input",
-    require: true,
-    placeholder: '当【是否有指标】="有"时，必填',
-  },
-  {
-    key: "exemptionPostageCondtion",
-    title: "包邮条件",
-    inputType: "Input",
-    placeholder:
-      "当运费承担方式为供应商有条件承担时，该字段必填，填写要求，写明什么条件下供应商承担全部，什么条件下我方承担，什么条件下分别承担",
-    span: 12,
-  },
-  {
-    key: "isRebate",
-    title: "是否有返利",
-    inputType: "Select",
-    require: true,
-    referName: "sys_yes_no",
-  },
-  {
-    key: "rebatePolicy",
-    title: "返利政策",
-    inputType: "Input",
-    placeholder: '当【是否有返利】="有"时，必填',
-    span: 18,
-  },
-  { key: "externalContract", title: "外部合同号", inputType: "Input" },
-  {
-    key: "rollbackPolicy",
-    title: "退换货政策",
-    inputType: "Input",
-    require: true,
-  },
-  { key: "enquiryCode", title: "询价单号", inputType: "Input" },
-  {
-    key: "contractContent",
-    title: "合同主要内容",
-    inputType: "Textarea",
-    require: true,
-    span: 24,
-  },
-  { key: "refusalReasons", title: "拒绝理由", inputType: "Input", span: 24 },
+import CONFIG from "@/config";
 
-  {
-    key: "externalFile",
-    title: "对外附件",
-    inputType: "Upload",
-    span: 24,
-    fileType: ["pdf"],
-  },
-  {
-    key: "puFile",
-    title: "采购商盖章合同附件",
-    inputType: "Upload",
-    span: 24,
-    fileType: ["pdf"],
-  },
-  {
-    key: "supplierFile",
-    title: "供应商盖章合同附件",
-    inputType: "Upload",
-    span: 24,
-    fileType: ["pdf"],
-  },
-  { key: "projectCode", title: "项目编号", inputType: "Input" },
-  { key: "projectName", title: "项目名称", inputType: "Input" },
-  { key: "area", title: "区域", inputType: "Input" },
-  { key: "consigneePhone", title: "收货人联系方式", inputType: "Input" },
-  {
-    key: "paymentAgreement",
-    title: "付款协议",
-    inputType: "PopoverSelect",
-    referName: "PAYAGREEMENT_PARAM",
-    dataMapping: {
-      paymentAgreement: "code",
-      paymentAgreementName: "name",
-    },
-    require: true,
-  },
-  {
-    key: "taxPrice",
-    title: "价税合计",
-    inputType: "InputNumber",
-  },
-  {
-    key: "currencyName",
-    title: "币种",
-    inputType: "PopoverSelect",
-    referName: "CURRENCY_PARAM",
-    dataMapping: {
-      currency: "code",
-      currencyName: "name",
-    },
-    require: true,
-  },
-  { key: "guaranteePeriod", title: "质保期", inputType: "Input" },
-];
-
-export const TabColumns = [
-  {
-    title: "物料基本信息",
-    key: "contractItemList",
-    tableColumns: [
-      {
-        title: "物料名称",
-        key: "materialName",
-        inputType: "PopoverSelect",
-        width: 200,
-        referName: "MATERIAL_PARAM",
+export default function useColumns() {
+  const FormColumns = [
+    {
+      item: { key: "puOrgName", title: "采购组织", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "ORG_PARAM",
         dataMapping: {
-          material: "code",
-          materialName: "name",
-          puUnit: "unitIdName",
-          registration: "registrationNo",
-          specification: "specification",
-          manufacturer: "manufacturerIdName",
+          puOrg: "code",
+          puOrgName: "name",
         },
       },
-      { title: "物料编码", key: "material", width: 200 },
-      {
-        title: "规格",
-        key: "specification",
-        width: 200,
+    },
+    { item: { key: "code", title: "合同编码" }, attr: { is: "el-input" } },
+    {
+      item: { key: "status", title: "状态" },
+      attr: {
+        is: "el-select",
+        dictName: "documents_status",
+        disabled: true,
+        value: "0",
       },
-      // {
-      //   title: "品牌",
-      //   key: "brand",
-      //   inputType: "PopoverSelect",
-      //   width: 200,
-      //   referName: "MATERIAL_PARAM",
-      //   dataMapping: {
-      //     material: "code",
-      //     materialName: "name",
-      //   },
-      // },
-      {
-        title: "生产厂家",
-        key: "manufacturer",
-        inputType: "Input",
-        width: 200,
+    },
+    {
+      item: { key: "lastPuMoney", title: "上年度采购额" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
       },
-      {
-        title: "采购单位",
-        key: "puUnit",
-        inputType: "PopoverSelect",
-        width: 200,
-        referName: "UNIT_PARAM",
+    },
+    {
+      item: { key: "buyerName", title: "采购员", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
         dataMapping: {
-          puUnit: "name",
+          buyer: "code",
+          buyerName: "name",
+          puDept: "deptId",
+          puDeptName: "deptName",
         },
       },
-      {
-        title: "税率%",
-        key: "tax",
-        inputType: "PopoverSelect",
-        referName: "TAX_RATE_PARAM",
+    },
+    {
+      item: { key: "supplierName", title: "供应商", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "SUPPLIER_PARAM",
         dataMapping: {
-          tax: "ntaxrate",
+          supplier: "code",
+          supplierName: "name",
         },
-        width: 200,
       },
-      {
-        title: "采购数量",
-        key: "qty",
-        inputType: "InputNumber",
-        width: 200,
-      },
-      {
-        title: "含税单价",
-        key: "taxPrice",
-        inputType: "InputNumber",
-        width: 200,
+    },
+    {
+      item: { key: "contractType", title: "合同类型" },
+      attr: { is: "el-select", dictName: "puarchase_contract_contract_type" },
+    },
+    {
+      item: { key: "puMoneyYear", title: "本年度采购额" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
       },
-      {
-        title: "含税金额合计",
-        key: "taxMoney",
-        inputType: "ComputedInput",
-        width: 200,
-        computed: (prop) => {
-          const { qty, taxPrice } = prop;
-          const taxMoney = (qty * taxPrice).toFixed(6);
-          return taxMoney === "NaN" ? null : taxMoney;
+    },
+    {
+      item: { key: "puDeptName", title: "采购部门", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "DEPT_PARAM",
+        dataMapping: {
+          puDept: "code",
+          puDeptName: "name",
         },
       },
-      {
-        title: "无税单价",
-        key: "taxFreePrice",
-        inputType: "ComputedInput",
-        width: 200,
-        computed: (prop) => {
-          const { tax, taxPrice } = prop;
-          const newTax = Number(tax) / 100;
-          const taxFreePrice = (taxPrice / (1 + newTax)).toFixed(6);
-          return taxFreePrice === "NaN" ? null : taxFreePrice;
-        },
+    },
+    {
+      item: { key: "supplierTier", title: "供应商层级", require: true },
+      attr: { is: "el-select", dictName: "puarchase_contract_supplier_tier" },
+    },
+    {
+      item: { key: "contractName", title: "合同名称", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "grossRateAverage", title: "平均毛利率 (%)", require: true },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
       },
-      {
-        title: "无税金额合计",
-        key: "taxFreeMoney",
-        inputType: "ComputedInput",
-        width: 200,
-        computed: (prop) => {
-          const { qty, taxFreePrice } = prop;
-          const taxFreeMoney = (qty * taxFreePrice).toFixed(6);
-          return taxFreeMoney === "NaN" ? null : taxFreeMoney;
-        },
+    },
+    {
+      item: { key: "approveFlow", title: "审批流程", require: true },
+      attr: { is: "el-select", dictName: "puarchase_contract_approve_flow" },
+    },
+    {
+      item: { key: "consumableClass", title: "耗材类别", require: true },
+      attr: {
+        is: "el-select",
+        dictName: "puarchase_contract_consumable_class",
       },
-      {
-        title: "注册证号及备案凭证号",
-        key: "registration",
-        inputType: "Input",
-        width: 200,
+    },
+    {
+      item: { key: "effectiveDate", title: "合同生效日期", require: true },
+      attr: {
+        is: "el-date-picker",
+        valueFormat: "yyyy-MM-dd",
+      },
+    },
+    {
+      item: {
+        key: "brandGrossRate",
+        title: "同类品牌及毛利率 (%)",
+        require: true,
+      },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+    {
+      item: { key: "contractFormat", title: "合同格式", require: true },
+      attr: {
+        is: "el-select",
+        dictName: "puarchase_contract_contract_format",
       },
-      {
-        title: "收货客户",
-        key: "customerName",
-        inputType: "PopoverSelect",
-        width: 200,
-        referName: "CUSTOMER_PARAM",
+    },
+    {
+      item: { key: "productName", title: "产品类别&名称", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "endDate", title: "合同终止日期", require: true },
+      attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd" },
+    },
+    {
+      item: { key: "invoiceTax", title: "发票税率 (%)", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "ntaxrate",
+        referName: "TAX_RATE_PARAM",
         dataMapping: {
-          customer: "code",
-          customerName: "name",
+          invoiceTax: "ntaxrate",
         },
       },
-    ],
-  },
-  {
-    title: "合同条款",
-    key: "contractClauseList",
-    tableColumns: [
-      { title: "条款编码", key: "code", inputType: "Input" },
-      { title: "条款名称", key: "name", inputType: "Input" },
-      { title: "条款内容", key: "content", inputType: "Input" },
-      { title: "变量序号", key: "variableRowno" },
-      { title: "变量内容", key: "variableContent", inputType: "Input" },
-    ],
-  },
-  {
-    title: "合同费用",
-    key: "contractExpenseList",
-    tableColumns: [
-      { title: "费用编码", key: "code", inputType: "Input" },
-      { title: "费用名称", key: "name", inputType: "Input" },
-      {
-        title: "费用金额",
-        key: "money",
-        inputType: "InputNumber",
-        width: 200,
+    },
+    {
+      item: { key: "emergencyDegree", title: "紧急程度", require: true },
+      attr: {
+        is: "el-select",
+        dictName: "puarchase_contract_emergency_degree",
       },
-    ],
-  },
-  {
-    title: "付款协议信息",
-    key: "contractAgreementList",
-    tableColumns: [
-      {
-        title: "付款阶段",
-        key: "satge",
-        inputType: "InputNumber",
-        width: 200,
+    },
+    {
+      item: { key: "project", title: "项目医院", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "deliveryType", title: "交货方式", require: true },
+      attr: { is: "el-select", dictName: "puarchase_contract_delivery_type" },
+    },
+    {
+      item: { key: "source", title: "合同来源" },
+      attr: { is: "el-input", value: "自制", disabled: true },
+    },
+    {
+      item: { key: "contractPartycName", title: "合同丙方" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "SUPPLIER_PARAM",
+        dataMapping: {
+          contractPartyc: "code",
+          contractPartycName: "name",
+        },
       },
-      {
-        title: "付款起点",
-        key: "origin",
-        width: 200,
-        inputType: "Select",
-        referName: "puarchase_contract_origin",
+    },
+    {
+      item: { key: "guaranteePeriodEnd", title: "质保期限", require: true },
+      attr: { is: "el-input-number", precision: CONFIG.precision },
+    },
+    {
+      item: { key: "freightMethods", title: "运费承担方式" },
+      attr: {
+        is: "el-select",
+        dictName: "puarchase_contract_freight_methods",
       },
-      { title: "账期天数", key: "paymetDays", inputType: "Input", width: 200 },
-      { title: "付款比例%", key: "ratio", inputType: "Input", width: 200 },
-      { title: "付款金额", key: "money", inputType: "Input", width: 200 },
-      {
-        title: "是否预付款",
-        key: "isAdvance",
-        width: 200,
-        inputType: "Select",
-        referName: "sys_yes_no",
+    },
+    {
+      item: { key: "signDate", title: "合同创建时间" },
+      attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd", disabled: true },
+    },
+    {
+      item: { key: "isTarget", title: "是否有指标", require: true },
+      attr: { is: "el-select", dictName: "sys_yes_no" },
+    },
+    {
+      item: { key: "contractTarget", title: "合同指标", require: true },
+      attr: { is: "el-input", placeholder: '当【是否有指标】="有"时，必填' },
+    },
+    {
+      item: { key: "exemptionPostageCondtion", title: "包邮条件", span: 12 },
+      attr: {
+        is: "el-input",
+        placeholder:
+          "当运费承担方式为供应商有条件承担时，该字段必填，填写要求，写明什么条件下供应商承担全部，什么条件下我方承担，什么条件下分别承担",
+      },
+    },
+    {
+      item: { key: "isRebate", title: "是否有返利", require: true },
+      attr: { is: "el-select", dictName: "sys_yes_no" },
+    },
+    {
+      item: { key: "rebatePolicy", title: "返利政策", span: 18 },
+      attr: {
+        is: "el-input",
+        placeholder: '当【是否有返利】="有"时，必填',
       },
-      {
-        title: "是否质保金",
-        key: "isQuality",
-        width: 200,
-        inputType: "Select",
-        referName: "sys_yes_no",
+    },
+    {
+      item: { key: "externalContract", title: "外部合同号" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "rollbackPolicy", title: "退换货政策", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "enquiryCode", title: "询价单号" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: {
+        key: "contractContent",
+        title: "合同主要内容",
+        require: true,
+        span: 24,
       },
-      {
-        title: "结算方式",
-        key: "paymentMeans",
-        inputType: "PopoverSelect",
-        width: 200,
-        referName: "BALATYPE_PARAM",
+      attr: { is: "el-input", type: "textarea" },
+    },
+    {
+      item: { key: "refusalReasons", title: "拒绝理由", span: 24 },
+      attr: { is: "el-input" },
+    },
+    // {
+    //   item: { key: "pigeonhole", title: "是否归档" },
+    //   attr: { is: "el-select", dictName: "sys_yes_no", disabled: true },
+    // },
+    // {
+    //   item: { key: "pigeonholeFile", title: "归档附件", span: 24 },
+    //   attr: { is: "el-file-upload", fileType: ["pdf"], disabled: true },
+    // },
+    {
+      item: { key: "externalFile", title: "对外附件", span: 24 },
+      attr: { is: "el-file-upload", fileType: ["pdf"] },
+    },
+    {
+      item: { key: "puFile", title: "采购商盖章合同附件", span: 24 },
+      attr: { is: "el-file-upload", fileType: ["pdf"] },
+    },
+    {
+      item: { key: "supplierFile", title: "供应商盖章合同附件", span: 24 },
+      attr: { is: "el-file-upload", fileType: ["pdf"] },
+    },
+    {
+      item: { key: "projectCode", title: "项目编号" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "projectName", title: "项目名称" },
+      attr: { is: "el-input" },
+    },
+    { item: { key: "area", title: "区域" }, attr: { is: "el-input" } },
+    {
+      item: { key: "consigneePhone", title: "收货人联系方式" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "paymentAgreement", title: "付款协议", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "PAYAGREEMENT_PARAM",
         dataMapping: {
-          paymentMeans: "name",
+          paymentAgreement: "code",
+          paymentAgreementName: "name",
         },
       },
-      {
-        title: "需进度确认",
-        key: "schedule",
-        inputType: "Select",
-        referName: "sys_yes_no",
-        width: 200,
+    },
+    {
+      item: { key: "taxPrice", title: "价税合计" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
       },
-    ],
-  },
-  {
-    title: "合同执行组织范围",
-    key: "contractApplyOrgList",
-    tableColumns: [
-      {
-        title: "组织名称",
-        key: "orgName",
-        inputType: "PopoverSelect",
-        referName: "ORG_PARAM",
+    },
+    {
+      item: { key: "currencyName", title: "币种", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CURRENCY_PARAM",
         dataMapping: {
-          org: "code",
-          orgName: "name",
+          currency: "code",
+          currencyName: "name",
         },
       },
-      { title: "组织编码", key: "org" },
-    ],
-  },
-];
-
-export default { FormColumns, TabColumns };
+    },
+    {
+      item: { key: "guaranteePeriod", title: "质保期" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+  ];
+  const TabColumns = [
+    {
+      item: { title: "物料基本信息", key: "contractItemList" },
+      attr: { value: [] },
+      TableColumns: [
+        {
+          item: {
+            title: "物料名称",
+            key: "materialName",
+          },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "MATERIAL_PARAM",
+            dataMapping: {
+              material: "code",
+              materialName: "name",
+              puUnit: "unitIdName",
+              registration: "registrationNo",
+              specification: "specification",
+              manufacturer: "manufacturerIdName",
+            },
+          },
+        },
+        {
+          item: {
+            title: "物料编码",
+            key: "material",
+          },
+          attr: {},
+        },
+        {
+          item: {
+            title: "规格",
+            key: "specification",
+          },
+          attr: {},
+        },
+        {
+          item: {
+            title: "生产厂家",
+            key: "manufacturer",
+          },
+          attr: {
+            is: "el-input",
+          },
+        },
+        {
+          item: { title: "采购单位", key: "puUnit" },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "UNIT_PARAM",
+            dataMapping: {
+              puUnit: "name",
+            },
+          },
+        },
+        {
+          item: { title: "税率%", key: "tax" },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "TAX_RATE_PARAM",
+            dataMapping: {
+              tax: "ntaxrate",
+            },
+          },
+        },
+        {
+          item: { title: "采购数量", key: "qty" },
+          attr: {
+            is: "el-input-number",
+          },
+        },
+        {
+          item: { title: "含税单价", key: "taxPrice" },
+          attr: {
+            is: "el-input-number",
+            precision: CONFIG.precision,
+          },
+        },
+        {
+          item: { title: "含税金额合计", key: "taxMoney" },
+          attr: {
+            is: "el-computed-input-v2",
+            computed: (prop) => {
+              const { qty = 0, taxPrice = 0 } = prop;
+              return (qty * taxPrice * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "无税单价", key: "taxFreePrice" },
+          attr: {
+            is: "el-computed-input-v2",
+            computed: (prop) => {
+              const { tax = 0, taxPrice = 0 } = prop;
+              return ((taxPrice / (tax / 100 + 1)) * 1).toFixed(
+                CONFIG.precision
+              );
+            },
+          },
+        },
+        {
+          item: { title: "无税金额合计", key: "taxFreeMoney" },
+          attr: {
+            is: "el-computed-input-v2",
+            computed: (prop) => {
+              const { qty = 0, taxFreePrice = 0 } = prop;
+              return (qty * taxFreePrice * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "注册证号及备案凭证号", key: "registration" },
+          attr: {
+            is: "el-input",
+          },
+        },
+        {
+          item: { title: "收货客户", key: "customerName" },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "CUSTOMER_PARAM",
+            dataMapping: {
+              customer: "code",
+              customerName: "name",
+            },
+          },
+        },
+      ],
+    },
+    {
+      item: { title: "合同条款", key: "contractClauseList" },
+      attr: {
+        value: [],
+      },
+      TableColumns: [
+        { item: { title: "条款编码", key: "code" }, attr: { is: "el-input" } },
+        { item: { title: "条款名称", key: "name" }, attr: { is: "el-input" } },
+        {
+          item: { title: "条款内容", key: "content" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "变量序号", key: "variableRowno" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "变量内容", key: "variableContent" },
+          attr: { is: "el-input" },
+        },
+      ],
+    },
+    {
+      item: { title: "合同费用", key: "contractExpenseList" },
+      attr: {
+        value: [],
+      },
+      TableColumns: [
+        { item: { title: "费用编码", key: "code" }, attr: { is: "el-input" } },
+        { item: { title: "费用名称", key: "name" }, attr: { is: "el-input" } },
+        {
+          item: { title: "费用金额", key: "money" },
+          attr: { is: "el-input-number", precision: CONFIG.precision },
+        },
+      ],
+    },
+    {
+      item: { title: "付款协议信息", key: "contractAgreementList" },
+      attr: {
+        value: [],
+      },
+      TableColumns: [
+        {
+          item: { title: "付款阶段", key: "satge" },
+          attr: { is: "el-input-number" },
+        },
+        {
+          item: {
+            title: "付款起点",
+            key: "origin",
+          },
+          attr: {
+            is: "el-select",
+            dictName: "puarchase_contract_origin",
+          },
+        },
+        {
+          item: { title: "账期天数", key: "paymetDays" },
+          attr: {
+            is: "el-input-number",
+            precision: CONFIG.precision,
+          },
+        },
+        {
+          item: { title: "付款比例%", key: "ratio" },
+          attr: {
+            is: "el-input-number",
+            precision: CONFIG.precision,
+          },
+        },
+        {
+          item: { title: "付款金额", key: "money" },
+          attr: {
+            is: "el-input-number",
+            precision: CONFIG.precision,
+          },
+        },
+        {
+          item: {
+            title: "是否预付款",
+            key: "isAdvance",
+          },
+          attr: {
+            is: "el-select",
+            dictName: "sys_yes_no",
+          },
+        },
+        {
+          item: {
+            title: "是否质保金",
+            key: "isQuality",
+          },
+          attr: {
+            is: "el-select",
+            dictName: "sys_yes_no",
+          },
+        },
+        {
+          item: {
+            title: "结算方式",
+            key: "paymentMeans",
+          },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "BALATYPE_PARAM",
+            dataMapping: {
+              paymentMeans: "name",
+            },
+          },
+        },
+        {
+          item: {
+            title: "需进度确认",
+            key: "schedule",
+          },
+          attr: {
+            is: "el-select",
+            dictName: "sys_yes_no",
+          },
+        },
+      ],
+    },
+    {
+      item: { title: "合同执行组织范围", key: "contractApplyOrgList" },
+      attr: { value: [] },
+      TableColumns: [
+        {
+          item: {
+            title: "组织名称",
+            key: "orgName",
+          },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "ORG_PARAM",
+            dataMapping: {
+              org: "code",
+              orgName: "name",
+            },
+          },
+        },
+        { item: { title: "组织编码", key: "org" }, attr: {} },
+      ],
+    },
+  ];
+  return { FormColumns, TabColumns };
+}

src/views/purchase/contract/add/index.vue

@@ -1,27 +1,49 @@
 <script>
-import Column from "./column";
-import useData from "../hooks/data";
-import useDicts from "../hooks/dicts";
-
-import { initParams } from "@/utils/init";
+import useColumns from "./column";
+import { initParams, initRules } from "@/utils/init.js";
 import { REFER } from "@/components/popover-select/api";
 import { ADD, CODE } from "@/api/business/purchase/contract";
 
-
 export default {
   name: "AddDrawer",
-  dicts: useDicts(Column),
-  components: {},
+  components: {
+    ElFileUpload: () => import("@/components/FileUpload/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
+  },
   data() {
+    const {
+      TabColumns,
+      FormColumns,
+      TabColumns: [
+        {
+          item: { key: tabName },
+        },
+      ],
+    } = useColumns();
+    const params = initParams([...TabColumns, ...FormColumns]);
+    const rules = initRules(FormColumns);
     return {
       title: "新 增",
-      ...useData(Column),
+      size: "mini",
+      width: "100%",
+      visible: false,
+      loading: false,
+      rules: rules,
+      params: params,
+      tabName: tabName,
+      TabColumns,
+      FormColumns,
     };
   },
-  computed: {},
-  watch: {
-    
+  computed: {
+    $dicts: {
+      get() {
+        return this.$parent.$parent.$dicts;
+      },
+    },
   },
+  watch: {},
   methods: {
     async fetchCode() {
       try {
@@ -42,9 +64,10 @@ export default {
         this.loading = false;
       }
     },
-    async fetchRefer(prop, type, source) {
-      const { rateCode } = prop;
-      if (type === "MATERIAL_PARAM") {
+    async fetchRefer(row, prop) {
+      const { rateCode } = row;
+      const { source, referName } = prop;
+      if (referName === "MATERIAL_PARAM") {
         try {
           // try
           this.loading = true;
@@ -66,7 +89,7 @@ export default {
       }
     },
     //
-    async open() {
+    async open(prop) {
       const {
         user: {
           deptId: puDept,
@@ -83,20 +106,31 @@ export default {
       this.params.buyerName = buyerName;
       this.params.puDept = puDept;
       this.params.puDeptName = puDeptName;
+      this.params.source = prop === "add" ? "自制" : "期初补录";
+      this.title = prop === "add" ? "新 增" : "期初补录";
       this.visible = await this.fetchCode();
     },
     //
     async hide() {
+      const {
+        TabColumns,
+        FormColumns,
+        TabColumns: [
+          {
+            item: { key: tabName },
+          },
+        ],
+      } = useColumns();
       this.visible = false;
-      this.params = resetParams();
-      this.tabName = this.tabColumns[0].key;
+      this.tabName = tabName;
+      this.params = initParams([...TabColumns, ...FormColumns]);
     },
     //
     async useRowAdd(prop) {
-      const { tableColumns } = this.tabColumns.find(
-        (item) => item.key === prop
+      const { TableColumns } = this.TabColumns.find(
+        ({ item: { key } }) => key === prop
       );
-      this.params[prop].push(initParams(tableColumns));
+      this.params[prop].push(initParams(TableColumns));
     },
     //
     async useRowRemove(prop, scope) {
@@ -173,170 +207,132 @@ export default {
     >
       <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
         <el-col
-          v-for="(column, index) in formColumns"
-          :key="index"
-          :span="column.span || 6"
+          v-for="{ item, attr } in FormColumns"
+          :key="item.key"
+          :span="item.span || 6"
         >
-          <el-form-item :prop="column.key" :label="column.title">
-            <el-input
-              v-if="column.inputType === 'Input'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
+          <el-form-item :prop="item.key" :label="item.title">
+            <component
+              v-if="attr.is === 'el-input'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
-            ></el-input>
-            <dr-popover-select
-              v-if="column.inputType === 'PopoverSelect'"
-              v-model="params[column.key]"
+            ></component>
+            <component
+              v-if="attr.is === 'el-popover-select-v2'"
+              v-bind="attr"
+              v-model="params[item.key]"
               :source.sync="params"
-              :title="column.title"
-              :type="column.referName"
-              :disabled="column.disabled"
-              :readonly="column.readonly"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :data-mapping="column.dataMapping"
-            >
-            </dr-popover-select>
-            <el-input
-              v-if="column.inputType === 'Textarea'"
-              v-model="params[column.key]"
-              type="textarea"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
               style="width: 100%"
-            ></el-input>
-            <el-input-number
-              v-if="column.inputType === 'InputNumber'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :controls-position="column.controlsPosition"
+            >
+            </component>
+            <component
+              v-if="attr.is === 'el-input-number'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
-            ></el-input-number>
-            <el-select
-              v-if="column.inputType === 'Select'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
+            ></component>
+            <component
+              v-if="attr.is === 'el-select'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
             >
               <el-option
-                v-for="item in dict.type[column.referName]"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="dict in $dicts[attr.dictName]"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
               >
               </el-option>
-            </el-select>
-            <el-date-picker
-              v-if="column.inputType === 'DatePicker'"
-              v-model="params[column.key]"
-              :type="column.type"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :value-format="column.valueFormat"
-              :picker-options="column.pickerOptions"
+            </component>
+            <component
+              v-if="attr.is === 'el-date-picker'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
             >
-            </el-date-picker>
-            <file-upload
-              v-if="column.inputType === 'Upload'"
-              v-model="params[column.key]"
-              :file-type="column.fileType"
-            ></file-upload>
+            </component>
+            <component
+              v-if="attr.is === 'el-file-upload'"
+              v-bind="attr"
+              v-model="params[item.key]"
+            ></component>
           </el-form-item>
         </el-col>
-        <el-divider></el-divider>
         <el-col :span="24">
           <el-form-item label-width="0">
             <el-tabs v-model="tabName">
               <el-tab-pane
-                v-for="(column, index) in tabColumns"
-                :key="index"
-                :label="column.title"
-                :name="column.key"
+                v-for="{ item, attr, TableColumns } in TabColumns"
+                :key="item.key"
+                :label="item.title"
+                :name="item.key"
                 lazy
               >
-                <el-table :size="size" :data="params[column.key]">
+                <el-table :size="size" :data="params[item.key]">
                   <el-table-column label="序号">
                     <template slot-scope="scope">
                       {{ scope.$index + 1 }}
                     </template>
                   </el-table-column>
                   <el-table-column
-                    v-for="(cColumn, cIndex) in column.tableColumns"
-                    :key="cIndex"
-                    :prop="cColumn.key"
-                    :label="cColumn.title"
-                    :width="cColumn.width"
+                    v-for="{ item: cItem, attr: cAttr } in TableColumns"
+                    :key="cItem.key"
+                    :prop="cItem.key"
+                    :label="cItem.title"
+                    :width="cItem.width || 300"
                     show-overflow-tooltip
                   >
                     <template slot-scope="scope">
-                      <el-input
-                        v-if="cColumn.inputType === 'Input'"
-                        v-model="scope.row[cColumn.key]"
-                        :size="size"
-                        :disabled="cColumn.disabled"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        style="width: 100%"
-                      ></el-input>
-                      <dr-computed-input
-                        v-else-if="cColumn.inputType === 'ComputedInput'"
-                        v-model="scope.row[cColumn.key]"
-                        :source="scope.row"
-                        :computed="cColumn.computed"
-                        :placeholder="cColumn.placeholder"
+                      <component
+                        v-if="cAttr.is === 'el-input'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
                         style="width: 100%"
-                      ></dr-computed-input>
-                      <dr-popover-select
-                        v-else-if="cColumn.inputType === 'PopoverSelect'"
-                        v-model="scope.row[cColumn.key]"
-                        :size="size"
-                        :title="cColumn.title"
+                      ></component>
+                      <component
+                        v-else-if="cAttr.is === 'el-popover-select-v2'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
                         :source.sync="scope.row"
-                        :type="cColumn.referName"
-                        :disabled="cColumn.disabled"
-                        :readonly="cColumn.readonly"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        :data-mapping="cColumn.dataMapping"
-                        @change="fetchRefer"
+                        style="width: 100%"
                       >
-                      </dr-popover-select>
-                      <el-input-number
-                        v-else-if="cColumn.inputType === 'InputNumber'"
-                        v-model="scope.row[cColumn.key]"
-                        :size="size"
-                        :disabled="cColumn.disabled"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        :controls-position="cColumn.controlsPosition"
+                      </component>
+                      <component
+                        v-else-if="cAttr.is === 'el-input-number'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
                         style="width: 100%"
-                      ></el-input-number>
-                      <el-select
-                        v-else-if="cColumn.inputType === 'Select'"
-                        v-model="scope.row[cColumn.key]"
-                        :disabled="cColumn.disabled"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
+                      ></component>
+                      <component
+                        v-else-if="cAttr.is === 'el-select'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
                         style="width: 100%"
                       >
                         <el-option
-                          v-for="item in dict.type[cColumn.referName]"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
+                          v-for="dict in $dicts[cAttr.dictName]"
+                          :key="dict.value"
+                          :label="dict.label"
+                          :value="dict.value"
                         >
                         </el-option>
-                      </el-select>
-                      <span v-else> {{ scope.row[cColumn.key] }}</span>
+                      </component>
+                      <component
+                        v-else-if="cAttr.is === 'el-date-picker'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
+                        style="width: 100%"
+                      >
+                      </component>
+                      <component
+                        v-else-if="cAttr.is === 'el-computed-input-v2'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
+                        :source.sync="scope.row"
+                      ></component>
+                      <span v-else> {{ scope.row[cItem.key] }}</span>
                     </template>
                   </el-table-column>
                   <el-table-column fixed="right" label="操作" width="100">

src/views/purchase/contract/alteration/index.vue

@@ -1,46 +0,0 @@
-<script>
-import { ALTERATION } from "@/api/business/purchase/contract";
-
-export default {
-  name: "DeleteDialog",
-  data() {
-    return {};
-  },
-  computed: {},
-  watch: {},
-  methods: {
-    //
-    open(prop) {
-      return new Promise((resolve, reject) => {
-        this.$confirm("是否变更数据项?", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "info",
-        })
-          .then(async () => {
-            try {
-              // try
-              const { msg, code } = await ALTERATION(prop);
-              if (code === 200) {
-                resolve(true);
-                this.$emit("success");
-                this.$notify.success(msg);
-              }
-            } catch (err) {
-              // catch
-              reject(false);
-              console.error(err);
-            } finally {
-              // finally
-            }
-          })
-          .catch(() => reject(false));
-      });
-    },
-  },
-  created() {},
-  mounted() {},
-  destroyed() {},
-};
-</script>
-<template></template>

src/views/purchase/contract/column.js

@@ -1,215 +1,185 @@
-export const FormColumns = [
-  {
-    key: "puOrgName",
-    title: "采购组织",
-  },
-  { key: "code", title: "合同编码" },
-  {
-    key: "status",
-    title: "状态",
-    inputType: "Select",
-    referName: "documents_status",
-  },
-  {
-    key: "lastPuMoney",
-    title: "上年度采购额",
-  },
-  {
-    key: "buyerName",
-    title: "采购员",
-  },
-  {
-    key: "supplierName",
-    title: "供应商",
-  },
-  {
-    key: "contractType",
-    title: "合同类型",
-    inputType: "Select",
-    referName: "puarchase_contract_contract_type",
-  },
-  {
-    key: "puMoneyYear",
-    title: "本年度采购额",
-  },
-  {
-    key: "puDeptName",
-    title: "采购部门",
-  },
-  {
-    key: "supplierTier",
-    title: "供应商层级",
-    inputType: "Select",
-    referName: "puarchase_contract_supplier_tier",
-  },
-  { key: "contractName", title: "合同名称" },
-  {
-    key: "grossRateAverage",
-    title: "平均毛利率",
-  },
-  {
-    key: "approveFlow",
-    title: "审批流程",
-    inputType: "Select",
-    referName: "puarchase_contract_approve_flow",
-  },
-  {
-    key: "consumableClass",
-    title: "耗材类别",
-    inputType: "Select",
-    referName: "puarchase_contract_consumable_class",
-  },
-  {
-    key: "effectiveDate",
-    title: "合同生效日期",
-  },
-  {
-    key: "brandGrossRate",
-    title: "同类品牌及毛利率",
-  },
-  {
-    key: "contractFormat",
-    title: "合同格式",
-    inputType: "Select",
-    referName: "puarchase_contract_contract_format",
-  },
-  {
-    key: "productName",
-    title: "产品类别&名称",
-  },
-  {
-    key: "endDate",
-    title: "合同终止日期",
-  },
-  {
-    key: "invoiceTax",
-    title: "发票税率",
-  },
-  {
-    key: "emergencyDegree",
-    title: "紧急程度",
-    inputType: "Select",
-    referName: "puarchase_contract_emergency_degree",
-  },
-  { key: "project", title: "项目医院" },
+import CONFIG from "@/config";
+
+export const TableColumns = [
+  { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
+  { item: { key: "code", title: "合同编码" }, attr: {} },
   {
-    key: "signDate",
-    title: "合同签订日期",
+    item: { key: "status", title: "状态" },
+    attr: { is: "el-dict-tag", dictName: "documents_status" },
   },
   {
-    key: "deliveryType",
-    title: "交货方式",
-    inputType: "Select",
-    referName: "puarchase_contract_delivery_type",
+    item: { key: "lastPuMoney", title: "上年度采购额" },
+    attr: {
+      is: "el-computed-input-v2",
+      formatter: (prop) => {
+        return (prop * 1).toFixed(CONFIG.precision);
+      },
+    },
   },
+  { item: { key: "buyerName", title: "采购员" }, attr: {} },
+  { item: { key: "supplierName", title: "供应商" }, attr: {} },
   {
-    key: "source",
-    title: "合同来源",
+    item: { key: "contractType", title: "合同类型" },
+    attr: { is: "el-dict-tag", dictName: "puarchase_contract_contract_type" },
   },
   {
-    key: "contractPartycName",
-    title: "合同丙方",
+    item: { key: "puMoneyYear", title: "本年度采购额" },
+    attr: {
+      is: "el-computed-input-v2",
+      formatter: (prop) => {
+        return (prop * 1).toFixed(CONFIG.precision);
+      },
+    },
   },
+  { item: { key: "puDeptName", title: "采购部门" }, attr: {} },
   {
-    key: "guaranteePeriodEnd",
-    title: "质保期限",
+    item: { key: "supplierTier", title: "供应商层级" },
+    attr: { is: "el-dict-tag", dictName: "puarchase_contract_supplier_tier" },
   },
+  { item: { key: "contractName", title: "合同名称" }, attr: {} },
   {
-    key: "freightMethods",
-    title: "运费承担方式",
-    inputType: "Select",
-    referName: "puarchase_contract_freight_methods",
+    item: { key: "grossRateAverage", title: "平均毛利率 (%)" },
+    attr: {
+      is: "el-computed-input-v2",
+      formatter: (prop) => {
+        return (prop * 1).toFixed(CONFIG.precision);
+      },
+    },
   },
   {
-    key: "signDate",
-    title: "合同创建时间",
+    item: { key: "approveFlow", title: "审批流程" },
+    attr: { is: "el-dict-tag", dictName: "puarchase_contract_approve_flow" },
   },
   {
-    key: "isTarget",
-    title: "是否有指标",
-    inputType: "Select",
-    referName: "sys_yes_no",
+    item: { key: "consumableClass", title: "耗材类别" },
+    attr: {
+      is: "el-dict-tag",
+      dictName: "puarchase_contract_consumable_class",
+    },
   },
+  { item: { key: "effectiveDate", title: "合同生效日期" }, attr: {} },
   {
-    key: "contractTarget",
-    title: "合同指标",
+    item: { key: "brandGrossRate", title: "同类品牌及毛利率 (%)" },
+    attr: {
+      is: "el-computed-input-v2",
+      formatter: (prop) => {
+        return (prop * 1).toFixed(CONFIG.precision);
+      },
+    },
   },
   {
-    key: "exemptionPostageCondtion",
-    title: "包邮条件",
+    item: { key: "contractFormat", title: "合同格式" },
+    attr: { is: "el-dict-tag", dictName: "puarchase_contract_contract_format" },
   },
+  { item: { key: "productName", title: "产品类别&名称" }, attr: {} },
+  { item: { key: "endDate", title: "合同终止日期" }, attr: {} },
   {
-    key: "isRebate",
-    title: "是否有返利",
-    inputType: "Select",
-    referName: "sys_yes_no",
+    item: { key: "invoiceTax", title: "发票税率 (%)" },
+    attr: {
+      is: "el-computed-input-v2",
+      formatter: (prop) => {
+        return (prop * 1).toFixed(CONFIG.precision);
+      },
+    },
   },
   {
-    key: "rebatePolicy",
-    title: "返利政策",
+    item: { key: "emergencyDegree", title: "紧急程度" },
+    attr: {
+      is: "el-dict-tag",
+      dictName: "puarchase_contract_emergency_degree",
+    },
   },
-  { key: "externalContract", title: "外部合同号" },
+  { item: { key: "project", title: "项目医院" }, attr: {} },
   {
-    key: "rollbackPolicy",
-    title: "退换货政策",
+    item: { key: "deliveryType", title: "交货方式" },
+    attr: { is: "el-dict-tag", dictName: "puarchase_contract_delivery_type" },
   },
-  { key: "enquiryCode", title: "询价单号" },
+  { item: { key: "source", title: "合同来源" }, attr: {} },
+  { item: { key: "contractPartycName", title: "合同丙方" }, attr: {} },
+  { item: { key: "guaranteePeriodEnd", title: "质保期限" }, attr: {} },
   {
-    key: "contractContent",
-    title: "合同主要内容",
+    item: { key: "freightMethods", title: "运费承担方式" },
+    attr: { is: "el-dict-tag", dictName: "puarchase_contract_freight_methods" },
   },
-  { key: "refusalReasons", title: "拒绝理由" },
+  { item: { key: "signDate", title: "合同创建时间" }, attr: {} },
   {
-    key: "pigeonhole",
-    title: "是否归档",
-    inputType: "Select",
-    referName: "sys_yes_no",
+    item: { key: "isTarget", title: "是否有指标" },
+    attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
   },
+  { item: { key: "contractTarget", title: "合同指标" }, attr: {} },
+  { item: { key: "exemptionPostageCondtion", title: "包邮条件" }, attr: {} },
   {
-    key: "pigeonholeFile",
-    title: "归档附件",
-    inputType: "Upload",
+    item: { key: "isRebate", title: "是否有返利" },
+    attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
   },
+  { item: { key: "rebatePolicy", title: "返利政策" }, attr: {} },
+  { item: { key: "externalContract", title: "外部合同号" }, attr: {} },
+  { item: { key: "rollbackPolicy", title: "退换货政策" }, attr: {} },
+  { item: { key: "enquiryCode", title: "询价单号" }, attr: {} },
+  { item: { key: "contractContent", title: "合同主要内容" }, attr: {} },
+  { item: { key: "refusalReasons", title: "拒绝理由" }, attr: {} },
   {
-    key: "externalFile",
-    title: "对外附件",
-    inputType: "Upload",
+    item: { key: "pigeonhole", title: "是否归档" },
+    attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
   },
   {
-    key: "puFile",
-    title: "采购商盖章合同附件",
-    inputType: "Upload",
+    item: { key: "pigeonholeFile", title: "归档附件" },
+    attr: { is: "el-file-preview" },
   },
   {
-    key: "supplierFile",
-    title: "供应商盖章合同附件",
-    inputType: "Upload",
+    item: { key: "externalFile", title: "对外附件" },
+    attr: { is: "el-file-preview" },
   },
-  { key: "projectCode", title: "项目编号" },
-  { key: "projectName", title: "项目名称" },
-  { key: "area", title: "区域" },
-  { key: "consigneePhone", title: "收货人联系方式" },
   {
-    key: "paymentAgreement",
-    title: "付款协议",
+    item: { key: "puFile", title: "采购商盖章合同附件" },
+    attr: { is: "el-file-preview" },
   },
   {
-    key: "taxPrice",
-    title: "价税合计",
+    item: { key: "supplierFile", title: "供应商盖章合同附件" },
+    attr: { is: "el-file-preview" },
   },
+  { item: { key: "projectCode", title: "项目编号" }, attr: {} },
+  { item: { key: "projectName", title: "项目名称" }, attr: {} },
+  { item: { key: "area", title: "区域" }, attr: {} },
+  { item: { key: "consigneePhone", title: "收货人联系方式" }, attr: {} },
+  { item: { key: "paymentAgreement", title: "付款协议" }, attr: {} },
   {
-    key: "currencyName",
-    title: "币种",
+    item: { key: "taxPrice", title: "价税合计" },
+    attr: {
+      is: "el-computed-input-v2",
+      formatter: (prop) => {
+        return prop ? (prop * 1).toFixed(CONFIG.precision) : "0.000000";
+      },
+    },
   },
-  { key: "guaranteePeriod", title: "质保期" },
+  { item: { key: "currencyName", title: "币种" }, attr: {} },
+  { item: { key: "guaranteePeriod", title: "质保期" }, attr: {} },
 ];
-
-export const SearchColumns = [
-  { key: "contractName", title: "合同名称", inputType: "Input" },
+export const FormColumns = [
   {
-    key: "pigeonhole",
-    title: "是否归档",
-    inputType: "Select",
-    referName: "sys_yes_no",
+    item: {
+      key: "contractName",
+      title: "合同名称",
+    },
+    attr: {
+      is: "el-input",
+    },
+  },
+  {
+    item: { key: "status", title: "状态" },
+    attr: {
+      is: "el-select",
+      dictName: "documents_status",
+    },
+  },
+  {
+    item: {
+      key: "pigeonhole",
+      title: "是否归档",
+    },
+    attr: {
+      is: "el-select",
+      dictName: "sys_yes_no",
+    },
   },
 ];

src/views/purchase/contract/edit/column.js

@@ -0,0 +1,604 @@
+import CONFIG from "@/config";
+
+export default function useColumns() {
+  const FormColumns = [
+    {
+      item: { key: "puOrgName", title: "采购组织", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "ORG_PARAM",
+        dataMapping: {
+          puOrg: "code",
+          puOrgName: "name",
+        },
+      },
+    },
+    { item: { key: "code", title: "合同编码" }, attr: { is: "el-input" } },
+    {
+      item: { key: "status", title: "状态" },
+      attr: {
+        is: "el-select",
+        dictName: "documents_status",
+        disabled: true,
+        value: "0",
+      },
+    },
+    {
+      item: { key: "lastPuMoney", title: "上年度采购额" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+    {
+      item: { key: "buyerName", title: "采购员", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CONTACTS_PARAM",
+        dataMapping: {
+          buyer: "code",
+          buyerName: "name",
+          puDept: "deptId",
+          puDeptName: "deptName",
+        },
+      },
+    },
+    {
+      item: { key: "supplierName", title: "供应商", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "SUPPLIER_PARAM",
+        dataMapping: {
+          supplier: "code",
+          supplierName: "name",
+        },
+      },
+    },
+    {
+      item: { key: "contractType", title: "合同类型" },
+      attr: { is: "el-select", dictName: "puarchase_contract_contract_type" },
+    },
+    {
+      item: { key: "puMoneyYear", title: "本年度采购额" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+    {
+      item: { key: "puDeptName", title: "采购部门", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "DEPT_PARAM",
+        dataMapping: {
+          puDept: "code",
+          puDeptName: "name",
+        },
+      },
+    },
+    {
+      item: { key: "supplierTier", title: "供应商层级", require: true },
+      attr: { is: "el-select", dictName: "puarchase_contract_supplier_tier" },
+    },
+    {
+      item: { key: "contractName", title: "合同名称", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "grossRateAverage", title: "平均毛利率 (%)", require: true },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+    {
+      item: { key: "approveFlow", title: "审批流程", require: true },
+      attr: { is: "el-select", dictName: "puarchase_contract_approve_flow" },
+    },
+    {
+      item: { key: "consumableClass", title: "耗材类别", require: true },
+      attr: {
+        is: "el-select",
+        dictName: "puarchase_contract_consumable_class",
+      },
+    },
+    {
+      item: { key: "effectiveDate", title: "合同生效日期", require: true },
+      attr: {
+        is: "el-date-picker",
+        valueFormat: "yyyy-MM-dd",
+      },
+    },
+    {
+      item: {
+        key: "brandGrossRate",
+        title: "同类品牌及毛利率 (%)",
+        require: true,
+      },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+    {
+      item: { key: "contractFormat", title: "合同格式", require: true },
+      attr: {
+        is: "el-select",
+        dictName: "puarchase_contract_contract_format",
+      },
+    },
+    {
+      item: { key: "productName", title: "产品类别&名称", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "endDate", title: "合同终止日期", require: true },
+      attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd" },
+    },
+    {
+      item: { key: "invoiceTax", title: "发票税率 (%)", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "ntaxrate",
+        referName: "TAX_RATE_PARAM",
+        dataMapping: {
+          invoiceTax: "ntaxrate",
+        },
+      },
+    },
+    {
+      item: { key: "emergencyDegree", title: "紧急程度", require: true },
+      attr: {
+        is: "el-select",
+        dictName: "puarchase_contract_emergency_degree",
+      },
+    },
+    {
+      item: { key: "project", title: "项目医院", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "deliveryType", title: "交货方式", require: true },
+      attr: { is: "el-select", dictName: "puarchase_contract_delivery_type" },
+    },
+    {
+      item: { key: "source", title: "合同来源" },
+      attr: { is: "el-input", value: "自制", disabled: true },
+    },
+    {
+      item: { key: "contractPartycName", title: "合同丙方" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "SUPPLIER_PARAM",
+        dataMapping: {
+          contractPartyc: "code",
+          contractPartycName: "name",
+        },
+      },
+    },
+    {
+      item: { key: "guaranteePeriodEnd", title: "质保期限", require: true },
+      attr: { is: "el-input-number", precision: CONFIG.precision },
+    },
+    {
+      item: { key: "freightMethods", title: "运费承担方式" },
+      attr: {
+        is: "el-select",
+        dictName: "puarchase_contract_freight_methods",
+      },
+    },
+    {
+      item: { key: "signDate", title: "合同创建时间" },
+      attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd", disabled: true },
+    },
+    {
+      item: { key: "isTarget", title: "是否有指标", require: true },
+      attr: { is: "el-select", dictName: "sys_yes_no" },
+    },
+    {
+      item: { key: "contractTarget", title: "合同指标", require: true },
+      attr: { is: "el-input", placeholder: '当【是否有指标】="有"时，必填' },
+    },
+    {
+      item: { key: "exemptionPostageCondtion", title: "包邮条件", span: 12 },
+      attr: {
+        is: "el-input",
+        placeholder:
+          "当运费承担方式为供应商有条件承担时，该字段必填，填写要求，写明什么条件下供应商承担全部，什么条件下我方承担，什么条件下分别承担",
+      },
+    },
+    {
+      item: { key: "isRebate", title: "是否有返利", require: true },
+      attr: { is: "el-select", dictName: "sys_yes_no" },
+    },
+    {
+      item: { key: "rebatePolicy", title: "返利政策", span: 18 },
+      attr: {
+        is: "el-input",
+        placeholder: '当【是否有返利】="有"时，必填',
+      },
+    },
+    {
+      item: { key: "externalContract", title: "外部合同号" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "rollbackPolicy", title: "退换货政策", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "enquiryCode", title: "询价单号" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: {
+        key: "contractContent",
+        title: "合同主要内容",
+        require: true,
+        span: 24,
+      },
+      attr: { is: "el-input", type: "textarea" },
+    },
+    {
+      item: { key: "refusalReasons", title: "拒绝理由", span: 24 },
+      attr: { is: "el-input" },
+    },
+    // {
+    //   item: { key: "pigeonhole", title: "是否归档" },
+    //   attr: { is: "el-select", dictName: "sys_yes_no", disabled: true },
+    // },
+    // {
+    //   item: { key: "pigeonholeFile", title: "归档附件", span: 24 },
+    //   attr: { is: "el-file-upload", fileType: ["pdf"], disabled: true },
+    // },
+    {
+      item: { key: "externalFile", title: "对外附件", span: 24 },
+      attr: { is: "el-file-upload", fileType: ["pdf"] },
+    },
+    {
+      item: { key: "puFile", title: "采购商盖章合同附件", span: 24 },
+      attr: { is: "el-file-upload", fileType: ["pdf"] },
+    },
+    {
+      item: { key: "supplierFile", title: "供应商盖章合同附件", span: 24 },
+      attr: { is: "el-file-upload", fileType: ["pdf"] },
+    },
+    {
+      item: { key: "projectCode", title: "项目编号" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "projectName", title: "项目名称" },
+      attr: { is: "el-input" },
+    },
+    { item: { key: "area", title: "区域" }, attr: { is: "el-input" } },
+    {
+      item: { key: "consigneePhone", title: "收货人联系方式" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "paymentAgreement", title: "付款协议", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "PAYAGREEMENT_PARAM",
+        dataMapping: {
+          paymentAgreement: "code",
+          paymentAgreementName: "name",
+        },
+      },
+    },
+    {
+      item: { key: "taxPrice", title: "价税合计" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+    {
+      item: { key: "currencyName", title: "币种", require: true },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "name",
+        referName: "CURRENCY_PARAM",
+        dataMapping: {
+          currency: "code",
+          currencyName: "name",
+        },
+      },
+    },
+    {
+      item: { key: "guaranteePeriod", title: "质保期" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+  ];
+  const TabColumns = [
+    {
+      item: { title: "物料基本信息", key: "contractItemList" },
+      attr: { value: [] },
+      TableColumns: [
+        {
+          item: {
+            title: "物料名称",
+            key: "materialName",
+          },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "MATERIAL_PARAM",
+            dataMapping: {
+              material: "code",
+              materialName: "name",
+              puUnit: "unitIdName",
+              registration: "registrationNo",
+              specification: "specification",
+              manufacturer: "manufacturerIdName",
+            },
+          },
+        },
+        {
+          item: {
+            title: "物料编码",
+            key: "material",
+          },
+          attr: {},
+        },
+        {
+          item: {
+            title: "规格",
+            key: "specification",
+          },
+          attr: {},
+        },
+        {
+          item: {
+            title: "生产厂家",
+            key: "manufacturer",
+          },
+          attr: {
+            is: "el-input",
+          },
+        },
+        {
+          item: { title: "采购单位", key: "puUnit" },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "UNIT_PARAM",
+            dataMapping: {
+              puUnit: "name",
+            },
+          },
+        },
+        {
+          item: { title: "税率%", key: "tax" },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "TAX_RATE_PARAM",
+            dataMapping: {
+              tax: "ntaxrate",
+            },
+          },
+        },
+        {
+          item: { title: "采购数量", key: "qty" },
+          attr: {
+            is: "el-input-number",
+          },
+        },
+        {
+          item: { title: "含税单价", key: "taxPrice" },
+          attr: {
+            is: "el-input-number",
+            precision: CONFIG.precision,
+          },
+        },
+        {
+          item: { title: "含税金额合计", key: "taxMoney" },
+          attr: {
+            is: "el-computed-input-v2",
+            computed: (prop) => {
+              const { qty = 0, taxPrice = 0 } = prop;
+              return (qty * taxPrice * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "无税单价", key: "taxFreePrice" },
+          attr: {
+            is: "el-computed-input-v2",
+            computed: (prop) => {
+              const { tax = 0, taxPrice = 0 } = prop;
+              return ((taxPrice / (tax / 100 + 1)) * 1).toFixed(
+                CONFIG.precision
+              );
+            },
+          },
+        },
+        {
+          item: { title: "无税金额合计", key: "taxFreeMoney" },
+          attr: {
+            is: "el-computed-input-v2",
+            computed: (prop) => {
+              const { qty = 0, taxFreePrice = 0 } = prop;
+              return (qty * taxFreePrice * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "注册证号及备案凭证号", key: "registration" },
+          attr: {
+            is: "el-input",
+          },
+        },
+        {
+          item: { title: "收货客户", key: "customerName" },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "CUSTOMER_PARAM",
+            dataMapping: {
+              customer: "code",
+              customerName: "name",
+            },
+          },
+        },
+      ],
+    },
+    {
+      item: { title: "合同条款", key: "contractClauseList" },
+      attr: {
+        value: [],
+      },
+      TableColumns: [
+        { item: { title: "条款编码", key: "code" }, attr: { is: "el-input" } },
+        { item: { title: "条款名称", key: "name" }, attr: { is: "el-input" } },
+        {
+          item: { title: "条款内容", key: "content" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "变量序号", key: "variableRowno" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "变量内容", key: "variableContent" },
+          attr: { is: "el-input" },
+        },
+      ],
+    },
+    {
+      item: { title: "合同费用", key: "contractExpenseList" },
+      attr: {
+        value: [],
+      },
+      TableColumns: [
+        { item: { title: "费用编码", key: "code" }, attr: { is: "el-input" } },
+        { item: { title: "费用名称", key: "name" }, attr: { is: "el-input" } },
+        {
+          item: { title: "费用金额", key: "money" },
+          attr: { is: "el-input-number", precision: CONFIG.precision },
+        },
+      ],
+    },
+    {
+      item: { title: "付款协议信息", key: "contractAgreementList" },
+      attr: {
+        value: [],
+      },
+      TableColumns: [
+        {
+          item: { title: "付款阶段", key: "satge" },
+          attr: { is: "el-input-number" },
+        },
+        {
+          item: {
+            title: "付款起点",
+            key: "origin",
+          },
+          attr: {
+            is: "el-select",
+            dictName: "puarchase_contract_origin",
+          },
+        },
+        {
+          item: { title: "账期天数", key: "paymetDays" },
+          attr: {
+            is: "el-input-number",
+            precision: CONFIG.precision,
+          },
+        },
+        {
+          item: { title: "付款比例%", key: "ratio" },
+          attr: {
+            is: "el-input-number",
+            precision: CONFIG.precision,
+          },
+        },
+        {
+          item: { title: "付款金额", key: "money" },
+          attr: {
+            is: "el-input-number",
+            precision: CONFIG.precision,
+          },
+        },
+        {
+          item: {
+            title: "是否预付款",
+            key: "isAdvance",
+          },
+          attr: {
+            is: "el-select",
+            dictName: "sys_yes_no",
+          },
+        },
+        {
+          item: {
+            title: "是否质保金",
+            key: "isQuality",
+          },
+          attr: {
+            is: "el-select",
+            dictName: "sys_yes_no",
+          },
+        },
+        {
+          item: {
+            title: "结算方式",
+            key: "paymentMeans",
+          },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "BALATYPE_PARAM",
+            dataMapping: {
+              paymentMeans: "name",
+            },
+          },
+        },
+        {
+          item: {
+            title: "需进度确认",
+            key: "schedule",
+          },
+          attr: {
+            is: "el-select",
+            dictName: "sys_yes_no",
+          },
+        },
+      ],
+    },
+    {
+      item: { title: "合同执行组织范围", key: "contractApplyOrgList" },
+      attr: { value: [] },
+      TableColumns: [
+        {
+          item: {
+            title: "组织名称",
+            key: "orgName",
+          },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "ORG_PARAM",
+            dataMapping: {
+              org: "code",
+              orgName: "name",
+            },
+          },
+        },
+        { item: { title: "组织编码", key: "org" }, attr: {} },
+      ],
+    },
+  ];
+  return { FormColumns, TabColumns };
+}

src/views/purchase/contract/edit/index.vue

@@ -1,31 +1,64 @@
 <script>
-import Column from "../add/column";
-import useData from "../hooks/data";
-import useDicts from "../hooks/dicts";
-
-import { initParams } from "@/utils/init";
+import useColumns from "./column";
+import { initParams, initRules } from "@/utils/init.js";
 import { REFER } from "@/components/popover-select/api";
-import { EDIT, ITEM, TABLE } from "@/api/business/purchase/contract";
+import {
+  EDIT,
+  ITEM,
+  TABLE,
+  ALTERATION,
+} from "@/api/business/purchase/contract";
 
 export default {
   name: "EditDrawer",
-  dicts: useDicts(Column),
+  components: {
+    ElFileUpload: () => import("@/components/FileUpload/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
+  },
   data() {
+    const {
+      TabColumns,
+      FormColumns,
+      TabColumns: [
+        {
+          item: { key: tabName },
+        },
+      ],
+    } = useColumns();
+    const params = initParams([...TabColumns, ...FormColumns]);
+    const rules = initRules(FormColumns);
     return {
       title: "更 新",
-      ...useData(Column),
+      size: "mini",
+      width: "100%",
+      visible: false,
+      loading: false,
+      rules: rules,
+      params: params,
+      tabName: tabName,
+      TabColumns,
+      FormColumns,
     };
   },
   computed: {
-    root: function () {
-      return this.$parent.$parent;
+    root: {
+      get() {
+        return this.$parent.$parent;
+      },
+    },
+    $dicts: {
+      get() {
+        return this.$parent.$parent.$dicts;
+      },
     },
   },
   watch: {},
   methods: {
-    async fetchRefer(prop, type, source) {
-      const { rateCode } = prop;
-      if (type === "MATERIAL_PARAM") {
+    async fetchRefer(row, prop) {
+      const { rateCode } = row;
+      const { source, referName } = prop;
+      if (referName === "MATERIAL_PARAM") {
         try {
           // try
           this.loading = true;
@@ -71,35 +104,51 @@ export default {
     },
     //
     async hide() {
+      const {
+        TabColumns,
+        FormColumns,
+        TabColumns: [
+          {
+            item: { key: tabName },
+          },
+        ],
+      } = useColumns();
       this.visible = false;
-      this.tabName = this.tabColumns[0].key;
+      this.tabName = tabName;
+      this.params = initParams([...TabColumns, ...FormColumns]);
     },
     //
     async useRowAdd(prop) {
-      const { tableColumns } = this.tabColumns.find(
-        (item) => item.key === prop
+      const { TableColumns } = this.TabColumns.find(
+        ({ item: { key } }) => key === prop
       );
-      this.params[prop].push(initParams(tableColumns));
+      this.params[prop].push(initParams(TableColumns));
+      console.log(this.params[prop]);
     },
     //
     async useRowRemove(prop, scope) {
       const { REMOVE } = TABLE;
       const {
+        $index,
         row: { id, contractId },
       } = scope;
-      try {
-        // try
-        this.loading = true;
-        const { code } = REMOVE(id, prop);
-        if (code === 200) {
-          this.fetchItem(contractId);
+      if (id) {
+        try {
+          // try
+          this.loading = true;
+          const { code } = REMOVE(id, prop);
+          if (code === 200) {
+            this.fetchItem(contractId);
+          }
+        } catch (err) {
+          // catch
+          console.error(err);
+        } finally {
+          // finally
+          this.loading = false;
         }
-      } catch (err) {
-        // catch
-        console.error(err);
-      } finally {
-        // finally
-        this.loading = false;
+      } else {
+        this.params[prop].splice($index, 1);
       }
     },
     //
@@ -134,8 +183,12 @@ export default {
           try {
             // try
             this.loading = true;
-            const params = { ...this.params };
-            const { msg, code } = await EDIT(params);
+            const {
+              params,
+              params: { status },
+            } = this;
+            const TASK = status === "2" ? EDIT : ALTERATION;
+            const { msg, code } = await TASK(params);
             if (code === 200) {
               const { id } = this.params;
               const { fetchItem } = this.root.$refs.SeeModel;
@@ -185,24 +238,14 @@ export default {
       <span>{{ title }}</span>
       <span>
         <el-tooltip
-          v-if="root.hasPowerAlteration([params])"
           effect="dark"
-          content="变 更"
+          :content="params.status === '2' ? '变 更' : '更 新'"
           placement="bottom-end"
         >
           <el-button
             :size="size"
             circle
             icon="el-icon-check"
-            @click="useAlteration([params])"
-          >
-          </el-button>
-        </el-tooltip>
-        <el-tooltip v-else effect="dark" content="更 新" placement="bottom-end">
-          <el-button
-            :size="size"
-            circle
-            icon="el-icon-check"
             @click="useSubmit('ruleForm')"
           >
           </el-button>
@@ -228,169 +271,132 @@ export default {
     >
       <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
         <el-col
-          v-for="(column, index) in formColumns"
-          :key="index"
-          :span="column.span || 6"
+          v-for="{ item, attr } in FormColumns"
+          :key="item.key"
+          :span="item.span || 6"
         >
-          <el-form-item :prop="column.key" :label="column.title">
-            <el-input
-              v-if="column.inputType === 'Input'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
+          <el-form-item :prop="item.key" :label="item.title">
+            <component
+              v-if="attr.is === 'el-input'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
-            ></el-input>
-            <dr-popover-select
-              v-if="column.inputType === 'PopoverSelect'"
-              v-model="params[column.key]"
+            ></component>
+            <component
+              v-if="attr.is === 'el-popover-select-v2'"
+              v-bind="attr"
+              v-model="params[item.key]"
               :source.sync="params"
-              :title="column.title"
-              :type="column.referName"
-              :disabled="column.disabled"
-              :readonly="column.readonly"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :data-mapping="column.dataMapping"
-            >
-            </dr-popover-select>
-            <el-input
-              v-if="column.inputType === 'Textarea'"
-              v-model="params[column.key]"
-              type="textarea"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
               style="width: 100%"
-            ></el-input>
-            <el-input-number
-              v-if="column.inputType === 'InputNumber'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :controls-position="column.controlsPosition"
+            >
+            </component>
+            <component
+              v-if="attr.is === 'el-input-number'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
-            ></el-input-number>
-            <el-select
-              v-if="column.inputType === 'Select'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
+            ></component>
+            <component
+              v-if="attr.is === 'el-select'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
             >
               <el-option
-                v-for="item in dict.type[column.referName]"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="dict in $dicts[attr.dictName]"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
               >
               </el-option>
-            </el-select>
-            <el-date-picker
-              v-if="column.inputType === 'DatePicker'"
-              v-model="params[column.key]"
-              :type="column.type"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :value-format="column.valueFormat"
-              :picker-options="column.pickerOptions"
+            </component>
+            <component
+              v-if="attr.is === 'el-date-picker'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
             >
-            </el-date-picker>
-            <file-upload
-              v-if="column.inputType === 'Upload'"
-              v-model="params[column.key]"
-              :file-type="column.fileType"
-            ></file-upload>
+            </component>
+            <component
+              v-if="attr.is === 'el-file-upload'"
+              v-bind="attr"
+              v-model="params[item.key]"
+            ></component>
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label-width="0">
             <el-tabs v-model="tabName">
               <el-tab-pane
-                v-for="(column, index) in tabColumns"
-                :key="index"
-                :label="column.title"
-                :name="column.key"
+                v-for="{ item, attr, TableColumns } in TabColumns"
+                :key="item.key"
+                :label="item.title"
+                :name="item.key"
                 lazy
               >
-                <el-table :size="size" :data="params[column.key]">
+                <el-table :size="size" :data="params[item.key]">
                   <el-table-column label="序号">
                     <template slot-scope="scope">
                       {{ scope.$index + 1 }}
                     </template>
                   </el-table-column>
                   <el-table-column
-                    v-for="(cColumn, cIndex) in column.tableColumns"
-                    :key="cIndex"
-                    :prop="cColumn.key"
-                    :label="cColumn.title"
-                    :width="cColumn.width"
+                    v-for="{ item: cItem, attr: cAttr } in TableColumns"
+                    :key="cItem.key"
+                    :prop="cItem.key"
+                    :label="cItem.title"
+                    :width="cItem.width || 300"
                     show-overflow-tooltip
                   >
                     <template slot-scope="scope">
-                      <el-input
-                        v-if="cColumn.inputType === 'Input'"
-                        v-model="scope.row[cColumn.key]"
-                        :size="size"
-                        :disabled="cColumn.disabled"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
+                      <component
+                        v-if="cAttr.is === 'el-input'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
                         style="width: 100%"
-                      ></el-input>
-                      <dr-computed-input
-                        v-else-if="cColumn.inputType === 'ComputedInput'"
-                        v-model="scope.row[cColumn.key]"
-                        :source="scope.row"
-                        :computed="cColumn.computed"
-                        :placeholder="cColumn.placeholder"
-                        style="width: 100%"
-                      ></dr-computed-input>
-                      <dr-popover-select
-                        v-else-if="cColumn.inputType === 'PopoverSelect'"
-                        v-model="scope.row[cColumn.key]"
-                        :size="size"
-                        :title="cColumn.title"
+                      ></component>
+                      <component
+                        v-else-if="cAttr.is === 'el-popover-select-v2'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
                         :source.sync="scope.row"
-                        :type="cColumn.referName"
-                        :disabled="cColumn.disabled"
-                        :readonly="cColumn.readonly"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        :data-mapping="cColumn.dataMapping"
-                        @change="fetchRefer"
+                        style="width: 100%"
                       >
-                      </dr-popover-select>
-                      <el-input-number
-                        v-else-if="cColumn.inputType === 'InputNumber'"
-                        v-model="scope.row[cColumn.key]"
-                        :size="size"
-                        :disabled="cColumn.disabled"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        :controls-position="cColumn.controlsPosition"
+                      </component>
+                      <component
+                        v-else-if="cAttr.is === 'el-input-number'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
                         style="width: 100%"
-                      ></el-input-number>
-                      <el-select
-                        v-else-if="cColumn.inputType === 'Select'"
-                        v-model="scope.row[cColumn.key]"
-                        :disabled="cColumn.disabled"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
+                      ></component>
+                      <component
+                        v-else-if="cAttr.is === 'el-select'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
                         style="width: 100%"
                       >
                         <el-option
-                          v-for="item in dict.type[cColumn.referName]"
-                          :key="item.value"
-                          :label="item.label"
-                          :value="item.value"
+                          v-for="dict in $dicts[cAttr.dictName]"
+                          :key="dict.value"
+                          :label="dict.label"
+                          :value="dict.value"
                         >
                         </el-option>
-                      </el-select>
-                      <span v-else> {{ scope.row[cColumn.key] }}</span>
+                      </component>
+                      <component
+                        v-else-if="cAttr.is === 'el-date-picker'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
+                        style="width: 100%"
+                      >
+                      </component>
+                      <component
+                        v-else-if="cAttr.is === 'el-computed-input-v2'"
+                        v-bind="cAttr"
+                        v-model="scope.row[cItem.key]"
+                        :source.sync="scope.row"
+                      ></component>
+                      <span v-else> {{ scope.row[cItem.key] }}</span>
                     </template>
                   </el-table-column>
                   <el-table-column fixed="right" label="操作" width="100">

src/views/purchase/contract/hooks/data.js

@@ -1,41 +0,0 @@
-import { initRules, initParams } from "@/utils/init/index.js";
-
-export default function useData(prop) {
-  const { FormColumns, TabColumns } = prop;
-  const size = "mini";
-  const width = "100%";
-  const visible = false;
-  const loading = false;
-  const formColumns = FormColumns;
-  const rules = initRules(FormColumns);
-  const params = {
-    ...initParams(FormColumns),
-    contractItemList: [],
-    contractClauseList: [],
-    contractExpenseList: [],
-    contractAgreementList: [],
-    contractApplyOrgList: [],
-  };
-  const tabColumns = TabColumns;
-  const tabName = "contractItemList";
-  const resetParams = () => ({
-    contractItemList: [],
-    contractClauseList: [],
-    contractExpenseList: [],
-    contractApplyOrgList: [],
-    contractAgreementList: [],
-    ...initParams(FormColumns),
-  });
-  return {
-    size,
-    width,
-    visible,
-    loading,
-    formColumns,
-    rules,
-    params,
-    tabColumns,
-    tabName,
-    resetParams,
-  };
-}

src/views/purchase/contract/hooks/dicts.js

@@ -1,16 +0,0 @@
-import { initDicts } from "@/utils/init/index.js";
-
-export default function useDicts(prop) {
-  const { FormColumns = [], TabColumns = [] } = prop;
-  const dicts = Array.from(
-    new Set([
-      ...initDicts(FormColumns),
-      ...initDicts(
-        TabColumns.map((item) => item.tableColumns)
-          .flat()
-          .filter((item) => item.inputType === "Select")
-      ),
-    ])
-  );
-  return dicts;
-}

src/views/purchase/contract/hooks/watch.js

@@ -1,20 +0,0 @@
-import Column from "../add/column";
-
-export default function useWatch() {
-  const { TabColumns } = Column;
-  const watchContractType = () => ({
-    handler: function (newProp) {
-      if (newProp === "1") {
-        this.params.contractItemList = [];
-        this.tabColumns = TabColumns.filter(
-          (element) => element.key !== "contractItemList"
-        );
-      } else {
-        this.tabColumns = TabColumns;
-      }
-      this.tabName = this.tabColumns[0].key;
-    },
-    immediate: true,
-  });
-  return { watchContractType };
-}

src/views/purchase/contract/index.vue

@@ -1,36 +1,69 @@
 <script>
-import { FormColumns, SearchColumns } from "./column";
+import { TableColumns, FormColumns } from "./column";
 import { LIST } from "@/api/business/purchase/contract";
-import { initPage, initDicts, initParams } from "@/utils/init/index.js";
+import { initDicts, initParams } from "@/utils/init.js";
 export default {
   name: "PuchaseContract",
-  dicts: [...initDicts(SearchColumns), ...initDicts(FormColumns)],
+  dicts: [...initDicts(FormColumns), ...initDicts(TableColumns)],
   components: {
     AddModel: () => import("./add/index.vue"),
     SeeModel: () => import("./see/index.vue"),
     EditModel: () => import("./edit/index.vue"),
     ExportModel: () => import("./export/index.vue"),
-    ImportModel: () => import("./import/index.vue"),
-    RecordModel: () => import("./record/index.vue"),
+    // ImportModel: () => import("./import/index.vue"),
     DeleteModel: () => import("./delete/index.vue"),
     TerminationModel: () => import("./termination/index.vue"),
     PigeonholeModel: () => import("./pigeonhole/index.vue"),
-    AlterationModel: () => import("./alteration/index.vue"),
     SubmitModel: () => import("./submit/index.vue"),
+    ElDictTag: () => import("@/components/DictTag/index.vue"),
+    ElFilePreview: () => import("@/components/file-preview/index.vue"),
+    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
   },
   data() {
     return {
       size: "mini",
       loading: false,
-      searchColumns: SearchColumns,
-      params: initParams(SearchColumns),
+      batching: false,
+      FormColumns: FormColumns,
+      params: initParams(FormColumns),
       tableData: [],
       selectData: [],
-      tableColumns: FormColumns,
+      TableColumns: TableColumns,
       page: { pageNum: 1, pageSize: 10, total: 0 },
     };
   },
-  computed: {},
+  computed: {
+    $dicts: {
+      get: function () {
+        return this.dict.type;
+      },
+    },
+    $power: {
+      get() {
+        const {
+          selectData,
+          selectData: [{ status, pigeonhole } = {}],
+        } = this;
+        const rule1 = selectData.length === 1;
+        const rule2 = selectData.length > 1;
+        const rule3 = status === "0" || status === "3";
+        const rule4 = status === "2";
+        const rule5 = pigeonhole === "Y";
+        return {
+          // 修 改
+          edit: rule1 && !rule4,
+          // 删 除
+          delt: rule1 && rule3,
+          // 终 止
+          term: rule1 && rule4,
+          // 归 档
+          pige: rule1 && !rule5,
+          // 提 交
+          subm: rule1,
+        };
+      },
+    },
+  },
   created() {
     this.useQuery(this.params, this.page);
   },
@@ -47,7 +80,10 @@ export default {
           ...prop,
         });
         if (code === 200) {
-          this.tableData = rows;
+          this.tableData = rows.map((item, index) => ({
+            ...item,
+            $index: (pageNum - 1) * pageSize + index + 1,
+          }));
           this.page.total = total;
         }
       } catch (err) {
@@ -65,18 +101,28 @@ export default {
     },
     // 重 置
     useReset() {
-      this.page = initPage();
-      this.params = initParams(SearchColumns);
+      this.page.pageNum = 1;
+      this.page.pageSize = 10;
+      this.params = initParams(FormColumns);
       this.useQuery(this.params, this.page);
     },
     // 选 择
+    useRowClick(prop) {
+      if (!this.batching) this.selectData = prop;
+    },
+    // 选 择
     useSelect(prop) {
-      this.selectData = prop;
+      if (this.batching) this.selectData = prop;
+    },
+    // 批 量
+    useBatch() {
+      this.selectData = [];
+      this.batching = !this.batching;
     },
     // 新 增
-    async useAdd() {
+    async useAdd(prop) {
       const { open } = this.$refs.AddModel;
-      await open();
+      await open(prop);
     },
     // 删 除
     async useDelete(prop) {
@@ -84,29 +130,12 @@ export default {
       const { open } = this.$refs.DeleteModel;
       await open(id);
     },
-    hasPowerDelete(prop) {
-      if (prop.length === 1) {
-        return true;
-        const [{ status }] = prop;
-        if (status === "0") return true;
-        else if (status === "3") return true;
-        else if (!status) return true;
-        else return false;
-      }
-    },
     // 编 辑
     async useEdit(prop) {
       const [{ id }] = prop;
       const { open } = this.$refs.EditModel;
       await open(id);
     },
-    hasPowerEdit(prop) {
-      if (prop.length === 1) {
-        const [{ status }] = prop;
-        if (status !== "2") return true;
-        else return false;
-      }
-    },
     // 明 细
     async useSee(prop) {
       const { id } = prop;
@@ -119,38 +148,12 @@ export default {
       const { open } = this.$refs.TerminationModel;
       await open(id);
     },
-    hasPowerTermination(prop) {
-      if (prop.length === 1) {
-        const [{ status }] = prop;
-        if (status === "2") return true;
-        else return false;
-      }
-    },
     // 归 档
     async usePigeonhole(prop) {
       const [{ id }] = prop;
       const { open } = this.$refs.PigeonholeModel;
       await open(id);
     },
-    hasPowerPigeonhole(prop) {
-      if (prop.length === 1) {
-        const [{ pigeonhole }] = prop;
-        if (pigeonhole !== "Y") return true;
-        else return false;
-      }
-    },
-    // 变 更
-    async useAlteration(prop) {
-      const { open } = this.$refs.AlterationModel;
-      await open(prop[0]);
-    },
-    hasPowerAlteration(prop) {
-      if (prop.length === 1) {
-        const [{ status }] = prop;
-        if (status === "2") return true;
-        else return false;
-      }
-    },
     // 导 出
     async useExport(prop, page) {
       const { pageNum, pageSize } = page;
@@ -158,49 +161,27 @@ export default {
       await open({ ...prop, pageNum, pageSize });
     },
     // 导 入
-    async useImport() {
-      const { open } = this.$refs.ImportModel;
-      await open();
-    },
-    // 期初补录
-    async useRecord() {
-      const { open } = this.$refs.RecordModel;
-      await open();
-    },
+    // async useImport() {
+    //   const { open } = this.$refs.ImportModel;
+    //   await open();
+    // },
     // 提交OA
     async useSubmit(prop) {
       const [{ id }] = prop;
       const { open } = this.$refs.SubmitModel;
       await open(id);
     },
-    hasPowerSubmit(prop) {
-      if (prop.length === 1) {
-        return true;
-      } else {
-        return false;
-      }
-    },
   },
 };
 </script>
 
 <template>
-  <el-card
-    v-loading="loading"
-    style="
-      width: calc(100% - 20px);
-      height: 100%;
-      margin: 10px;
-      padding: 0 20px 20px 0;
-    "
-    :body-style="{ padding: 0 }"
-  >
+  <el-card v-loading="loading" :body-style="{ padding: 0 }">
     <see-model ref="SeeModel"></see-model>
     <add-model ref="AddModel" @success="useReset"></add-model>
-    <record-model ref="RecordModel" @success="useReset"></record-model>
     <edit-model ref="EditModel" @success="useQuery(params, page)"></edit-model>
     <export-model ref="ExportModel"></export-model>
-    <import-model ref="ImportModel"></import-model>
+    <!-- <import-model ref="ImportModel"></import-model> -->
     <submit-model
       ref="SubmitModel"
       @success="useQuery(params, page)"
@@ -217,127 +198,163 @@ export default {
       ref="PigeonholeModel"
       @success="useQuery(params, page)"
     ></pigeonhole-model>
-    <alteration-model
-      ref="AlterationModel"
-      @success="useQuery(params, page)"
-    ></alteration-model>
+
     <el-form
       :size="size"
       :model="params"
       label-width="auto"
       label-position="right"
-      style="padding: 20px 20px 0"
       @submit.native.prevent
     >
       <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
         <el-col
-          v-for="column in searchColumns"
-          :key="column.title"
-          :span="column.span || 6"
+          v-for="{ item, attr } in FormColumns"
+          :key="item.key"
+          :span="item.span || 6"
         >
-          <el-form-item :prop="column.key" :label="column.title">
-            <el-input
-              v-if="column.inputType === 'Input'"
-              v-model="params[column.key]"
-              :placeholder="column.placeholder"
+          <el-form-item :prop="item.key" :label="item.title">
+            <component
+              v-if="attr.is === 'el-input'"
+              v-bind="attr"
+              v-model="params[item.key]"
               @keyup.enter.native="useQuery(params, page)"
-            ></el-input>
-            <el-select
-              v-if="column.inputType === 'Select'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
+            ></component>
+            <component
+              v-if="attr.is === 'el-select'"
+              v-bind="attr"
+              v-model="params[item.key]"
               style="width: 100%"
               @change="useQuery(params, page)"
               @keyup.enter.native="useQuery(params, page)"
             >
               <el-option
-                v-for="item in dict.type[column.referName]"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="option in $dicts[attr.dictName]"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
               >
               </el-option>
-            </el-select>
+            </component>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
-    <el-row style="padding: 0 20px">
-      <el-button :size="size" @click="useQuery(params, page)">
-        查 询
-      </el-button>
-      <el-button :size="size" @click="useReset"> 重 置 </el-button>
-      <el-button :size="size" @click="useAdd"> 新 增 </el-button>
-      <el-button :size="size" @click="useRecord"> 期初补录 </el-button>
-      <el-button :size="size" @click="useExport(params, page)">
-        导 出
-      </el-button>
-      <el-button
-        :size="size"
-        v-show="hasPowerSubmit(selectData)"
-        @click="useSubmit(selectData)"
-      >
-        提交OA
-      </el-button>
-      <el-button
-        v-show="hasPowerDelete(selectData)"
-        :size="size"
-        @click="useDelete(selectData)"
-      >
-        删 除
-      </el-button>
-      <el-button
-        v-show="hasPowerTermination(selectData)"
-        :size="size"
-        @click="useTermination(selectData)"
-      >
-        终 止
-      </el-button>
-      <el-button
-        v-show="hasPowerPigeonhole(selectData)"
-        :size="size"
-        @click="usePigeonhole(selectData)"
-      >
-        归 档
-      </el-button>
+    <div style="padding: 0 20px; display: flex; justify-content: space-between">
+      <div>
+        <el-button :size="size" @click="useQuery(params, page)">
+          查 询
+        </el-button>
+        <el-button :size="size" @click="useReset"> 重 置 </el-button>
+        <el-button :size="size" @click="useAdd('add')"> 新 增 </el-button>
+        <el-button :size="size" @click="useAdd('record')"> 期初补录 </el-button>
+        <el-button :size="size" @click="useExport(params, page)">
+          导 出
+        </el-button>
+        <el-button
+          v-show="$power.edit"
+          :size="size"
+          @click="useEdit(selectData)"
+        >
+          编 辑
+        </el-button>
+        <el-button
+          :size="size"
+          v-show="$power.subm"
+          @click="useSubmit(selectData)"
+        >
+          提交OA
+        </el-button>
+        <el-button
+          v-show="$power.delt"
+          :size="size"
+          @click="useDelete(selectData)"
+        >
+          删 除
+        </el-button>
+        <el-button
+          v-show="$power.term"
+          :size="size"
+          @click="useTermination(selectData)"
+        >
+          终 止
+        </el-button>
+        <el-button
+          v-show="$power.pige"
+          :size="size"
+          @click="usePigeonhole(selectData)"
+        >
+          归 档
+        </el-button>
+      </div>
       <!-- <el-button :size="size" @click="useImport"> 导 入 </el-button> -->
-    </el-row>
+      <div>
+        <el-button
+          :size="size"
+          :icon="batching ? 'el-icon-close' : 'el-icon-check'"
+          @click="useBatch"
+        >
+          批 量
+        </el-button>
+      </div>
+    </div>
     <el-table
+      v-if="tableData.length"
       :size="size"
       :data="tableData"
+      border
+      stripe
       highlight-current-row
       @row-dblclick="useSee"
       @selection-change="useSelect"
-      @row-click="useSelect([$event])"
-      style="width: 100%; margin: 20px 0 0 0"
+      @row-click="useRowClick([$event])"
     >
-      <el-table-column fixed width="55" align="center" type="selection">
+      <el-table-column
+        v-if="batching"
+        fixed
+        width="55"
+        align="center"
+        type="selection"
+        :selectable="setSelectable"
+      >
+      </el-table-column>
+      <el-table-column width="55" align="center" type="index">
+        <template slot-scope="scope">
+          {{ scope.row.$index }}
+        </template>
       </el-table-column>
       <el-table-column
-        v-for="(column, index) in tableColumns"
-        :key="index"
-        :prop="column.key"
-        :label="column.title"
-        :width="column.width || 200"
+        v-for="{ item, attr } in TableColumns"
+        :key="item.key"
+        :prop="item.key"
+        :label="item.title"
+        :width="item.width || 200"
         show-overflow-tooltip
       >
         <template slot-scope="scope">
-          <dict-tag
-            v-if="column.inputType === 'Select'"
+          <component
+            v-if="attr.is === 'el-dict-tag'"
+            v-bind="attr"
+            v-model="scope.row[item.key]"
             :size="size"
-            :value="scope.row[column.key]"
-            :options="dict.type[column.referName]"
-          />
-          <dr-file-preview
-            v-else-if="column.inputType === 'Upload' && scope.row[column.key]"
-            v-model="scope.row[column.key]"
-          ></dr-file-preview>
-          <span v-else>{{ scope.row[column.key] }}</span>
+            :options="dict.type[attr.dictName]"
+          ></component>
+          <component
+            v-else-if="attr.is === 'el-file-preview'"
+            v-bind="attr"
+            v-model="scope.row[item.key]"
+          ></component>
+          <component
+            v-else-if="attr.is === 'el-computed-input-v2'"
+            v-bind="attr"
+            v-model="scope.row[item.key]"
+          ></component>
+          <component is="span" v-else>{{
+            scope.row[item.key] || "--"
+          }}</component>
         </template>
       </el-table-column>
     </el-table>
+    <el-empty v-else :image-size="200"></el-empty>
     <pagination
       :total="page.total"
       :page.sync="page.pageNum"
@@ -346,3 +363,30 @@ export default {
     />
   </el-card>
 </template>
+<style scoped lang="scss">
+.el-card {
+  width: calc(100% - 20px);
+  height: 100%;
+  margin: 10px;
+  padding: 0 0 20px 0;
+  .el-form {
+    padding: 20px 0 0;
+  }
+  .el-row {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 20px;
+  }
+  ::v-deep .el-table--mini {
+    width: 100%;
+    margin: 20px 0 0 0;
+    .el-table__cell {
+      height: 50px;
+    }
+    td.el-table__cell {
+      border-right: 0;
+      // border-bottom: 0;
+    }
+  }
+}
+</style>

src/views/purchase/contract/record/index.vue

@@ -1,367 +0,0 @@
-<script>
-import Column from "../add/column";
-import useData from "../hooks/data";
-import useDicts from "../hooks/dicts";
-
-import { initParams } from "@/utils/init";
-import { REFER } from "@/components/popover-select/api";
-import { ADD, CODE } from "@/api/business/purchase/contract";
-
-
-export default {
-  name: "RecordDrawer",
-  dicts: useDicts(Column),
-  components: {},
-  data() {
-    return {
-      title: "期 初 补 录",
-      ...useData(Column),
-    };
-  },
-  computed: {},
-  watch: {
-    
-  },
-  methods: {
-    async fetchCode() {
-      try {
-        // try
-        this.loading = true;
-        const data = await CODE();
-        if (data) {
-          this.params.code = data;
-          return true;
-        } else {
-          return false;
-        }
-      } catch (err) {
-        // catch
-        console.error(err);
-      } finally {
-        // finally
-        this.loading = false;
-      }
-    },
-    async fetchRefer(prop, type, source) {
-      const { rateCode } = prop;
-      if (type === "MATERIAL_PARAM") {
-        try {
-          // try
-          this.loading = true;
-          const { code, rows } = await REFER({
-            search: rateCode,
-            type: "TAX_RATE_PARAM",
-          });
-          if (code === 200) {
-            const [{ ntaxrate }] = rows;
-            source.tax = ntaxrate === "0E-8" ? "0.00000000" : ntaxrate;
-          }
-        } catch (err) {
-          // catch
-          console.error(err);
-        } finally {
-          // finally
-          this.loading = false;
-        }
-      }
-    },
-    //
-    async open() {
-      const {
-        user: {
-          deptId: puDept,
-          deptName: puDeptName,
-          name: buyer,
-          nickName: buyerName,
-          orgId: puOrg,
-          orgName: puOrgName,
-        },
-      } = this.$store.state;
-      this.params.puOrg = puOrg;
-      this.params.puOrgName = puOrgName;
-      this.params.buyer = buyer;
-      this.params.buyerName = buyerName;
-      this.params.puDept = puDept;
-      this.params.puDeptName = puDeptName;
-      this.params.source = "期初补录";
-      this.visible = await this.fetchCode();
-    },
-    //
-    async hide() {
-      this.visible = false;
-      this.params = resetParams();
-      this.tabName = this.tabColumns[0].key;
-    },
-    //
-    async useRowAdd(prop) {
-      const { tableColumns } = this.tabColumns.find(
-        (item) => item.key === prop
-      );
-      this.params[prop].push(initParams(tableColumns));
-    },
-    //
-    async useRowRemove(prop, scope) {
-      const { $index } = scope;
-      this.params[prop].splice($index, 1);
-    },
-    //
-    async useSubmit(prop) {
-      this.$refs[prop].validate(async (valid) => {
-        if (valid) {
-          try {
-            // try
-            this.loading = true;
-            const params = { ...this.params };
-            const { msg, code } = await ADD(params);
-            if (code === 200) {
-              this.hide();
-              this.$emit("success");
-              this.$notify.success(msg);
-            }
-          } catch (err) {
-            // catch
-            console.error(err);
-          } finally {
-            // finally
-            this.loading = false;
-          }
-        } else {
-          return false;
-        }
-      });
-    },
-  },
-  created() {},
-  mounted() {},
-  destroyed() {},
-};
-</script>
-<template>
-  <el-drawer
-    :size="width"
-    :title="title"
-    :show-close="false"
-    :visible.sync="visible"
-  >
-    <template slot="title">
-      <span>{{ title }}</span>
-      <span>
-        <el-button
-          :size="size"
-          circle
-          icon="el-icon-check"
-          @click="useSubmit('ruleForm')"
-        >
-        </el-button>
-        <el-button
-          :size="size"
-          circle
-          type="danger"
-          icon="el-icon-close"
-          @click="hide"
-        ></el-button>
-      </span>
-    </template>
-    <el-form
-      ref="ruleForm"
-      v-loading="loading"
-      :size="size"
-      :rules="rules"
-      :model="params"
-      label-width="auto"
-      label-position="right"
-      style="padding: 10px"
-    >
-      <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
-        <el-col
-          v-for="(column, index) in formColumns"
-          :key="index"
-          :span="column.span || 6"
-        >
-          <el-form-item :prop="column.key" :label="column.title">
-            <el-input
-              v-if="column.inputType === 'Input'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              style="width: 100%"
-            ></el-input>
-            <dr-popover-select
-              v-if="column.inputType === 'PopoverSelect'"
-              v-model="params[column.key]"
-              :source.sync="params"
-              :title="column.title"
-              :type="column.referName"
-              :disabled="column.disabled"
-              :readonly="column.readonly"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :data-mapping="column.dataMapping"
-            >
-            </dr-popover-select>
-            <el-input
-              v-if="column.inputType === 'Textarea'"
-              v-model="params[column.key]"
-              type="textarea"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              style="width: 100%"
-            ></el-input>
-            <el-input-number
-              v-if="column.inputType === 'InputNumber'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :controls-position="column.controlsPosition"
-              style="width: 100%"
-            ></el-input-number>
-            <el-select
-              v-if="column.inputType === 'Select'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="item in dict.type[column.referName]"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-            <el-date-picker
-              v-if="column.inputType === 'DatePicker'"
-              v-model="params[column.key]"
-              :type="column.type"
-              :disabled="column.disabled"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              :value-format="column.valueFormat"
-              :picker-options="column.pickerOptions"
-              style="width: 100%"
-            >
-            </el-date-picker>
-            <file-upload
-              v-if="column.inputType === 'Upload'"
-              v-model="params[column.key]"
-              :file-type="column.fileType"
-            ></file-upload>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label-width="0">
-        <el-tabs v-model="tabName">
-          <el-tab-pane
-            v-for="(column, index) in tabColumns"
-            :key="index"
-            :label="column.title"
-            :name="column.key"
-          >
-            <el-table :data="params[column.key]">
-              <el-table-column label="序号">
-                <template slot-scope="scope">
-                  {{ scope.$index + 1 }}
-                </template>
-              </el-table-column>
-              <el-table-column
-                v-for="(cColumn, cIndex) in column.tableColumns"
-                :key="cIndex"
-                :prop="cColumn.key"
-                :label="cColumn.title"
-                :width="cColumn.width"
-                show-overflow-tooltip
-              >
-                <template slot-scope="scope">
-                  <el-input
-                    v-if="cColumn.inputType === 'Input'"
-                    v-model="scope.row[cColumn.key]"
-                    :size="size"
-                    :disabled="cColumn.disabled"
-                    :clearable="cColumn.clearable"
-                    :placeholder="cColumn.placeholder"
-                    style="width: 100%"
-                  ></el-input>
-                  <dr-computed-input
-                    v-else-if="cColumn.inputType === 'ComputedInput'"
-                    v-model="scope.row[cColumn.key]"
-                    :source="scope.row"
-                    :computed="cColumn.computed"
-                    :placeholder="cColumn.placeholder"
-                    style="width: 100%"
-                  ></dr-computed-input>
-                  <dr-popover-select
-                    v-else-if="cColumn.inputType === 'PopoverSelect'"
-                    v-model="scope.row[cColumn.key]"
-                    :size="size"
-                    :title="cColumn.title"
-                    :source.sync="scope.row"
-                    :type="cColumn.referName"
-                    :disabled="cColumn.disabled"
-                    :readonly="cColumn.readonly"
-                    :clearable="cColumn.clearable"
-                    :placeholder="cColumn.placeholder"
-                    :data-mapping="cColumn.dataMapping"
-                    @change="fetchRefer"
-                  >
-                  </dr-popover-select>
-                  <el-input-number
-                    v-else-if="cColumn.inputType === 'InputNumber'"
-                    v-model="scope.row[cColumn.key]"
-                    :size="size"
-                    :disabled="cColumn.disabled"
-                    :clearable="cColumn.clearable"
-                    :placeholder="cColumn.placeholder"
-                    :controls-position="cColumn.controlsPosition"
-                    style="width: 100%"
-                  ></el-input-number>
-                  <el-select
-                    v-else-if="cColumn.inputType === 'Select'"
-                    v-model="scope.row[cColumn.key]"
-                    :disabled="cColumn.disabled"
-                    :clearable="cColumn.clearable"
-                    :placeholder="cColumn.placeholder"
-                    style="width: 100%"
-                  >
-                    <el-option
-                      v-for="item in dict.type[cColumn.referName]"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    >
-                    </el-option>
-                  </el-select>
-                  <span v-else> {{ scope.row[cColumn.key] }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column fixed="right" label="操作" width="100">
-                <template slot="header" slot-scope="scope">
-                  <el-button
-                    circle
-                    icon="el-icon-plus"
-                    :size="size"
-                    @click="useRowAdd(tabName)"
-                  >
-                  </el-button>
-                </template>
-                <template slot-scope="scope">
-                  <el-button
-                    circle
-                    icon="el-icon-minus"
-                    :size="size"
-                    @click.native.prevent="useRowRemove(tabName, scope)"
-                  >
-                  </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-tab-pane>
-        </el-tabs>
-      </el-form-item>
-    </el-form>
-  </el-drawer>
-</template>

src/views/purchase/contract/see/column.js

@@ -1,540 +1,406 @@
-export const FormColumns = [
-  {
-    key: "puOrgName",
-    title: "采购组织",
-    inputType: "PopoverSelect",
-    referName: "ORG_PARAM",
-    dataMapping: {
-      puOrg: "code",
-      puOrgName: "name",
+import CONFIG from "@/config";
+
+export default function useColumns() {
+  const FormColumns = [
+    { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
+    { item: { key: "code", title: "合同编码" }, attr: {} },
+    {
+      item: { key: "status", title: "状态" },
+      attr: { is: "el-dict-tag", dictName: "documents_status" },
     },
-    require: true,
-  },
-  { key: "code", title: "合同编码", inputType: "Input" },
-  {
-    key: "lastPuMoney",
-    title: "上年度采购额",
-    inputType: "Input",
-    require: true,
-  },
-  {
-    key: "buyerName",
-    title: "采购员",
-    inputType: "PopoverSelect",
-    referName: "CONTACTS_PARAM",
-    dataMapping: {
-      buyer: "code",
-      buyerName: "name",
-      puDept: "deptId",
-      puDeptName: "deptName",
+    {
+      item: { key: "lastPuMoney", title: "上年度采购额" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
+      },
     },
-    require: true,
-  },
-  {
-    key: "supplierName",
-    title: "供应商",
-    inputType: "PopoverSelect",
-    referName: "SUPPLIER_PARAM",
-    dataMapping: {
-      supplier: "code",
-      supplierName: "name",
+    { item: { key: "buyerName", title: "采购员" }, attr: {} },
+    { item: { key: "supplierName", title: "供应商" }, attr: {} },
+    {
+      item: { key: "contractType", title: "合同类型" },
+      attr: { is: "el-dict-tag", dictName: "puarchase_contract_contract_type" },
     },
-    require: true,
-  },
-  {
-    key: "contractType",
-    title: "合同类型",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_contract_type",
-  },
-  {
-    key: "puMoneyYear",
-    title: "本年度采购额",
-    inputType: "InputNumber",
-    require: true,
-  },
-  {
-    key: "puDeptName",
-    title: "采购部门",
-    inputType: "PopoverSelect",
-    referName: "DEPT_PARAM",
-    dataMapping: {
-      puDept: "code",
-      puDeptName: "name",
+    {
+      item: { key: "puMoneyYear", title: "本年度采购额" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
+      },
     },
-    require: true,
-  },
-  {
-    key: "supplierTier",
-    title: "供应商层级",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_supplier_tier",
-  },
-  { key: "contractName", title: "合同名称", inputType: "Input", require: true },
-  {
-    key: "grossRateAverage",
-    title: "平均毛利率",
-    inputType: "Input",
-    require: true,
-  },
-  {
-    key: "approveFlow",
-    title: "审批流程",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_approve_flow",
-  },
-  {
-    key: "consumableClass",
-    title: "耗材类别",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_consumable_class",
-  },
-  {
-    key: "effectiveDate",
-    title: "合同生效日期",
-    inputType: "DatePicker",
-    require: true,
-    valueFormat: "yyyy-MM-dd",
-  },
-  {
-    key: "brandGrossRate",
-    title: "同类品牌及毛利率",
-    inputType: "Input",
-    require: true,
-  },
-  {
-    key: "contractFormat",
-    title: "合同格式",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_contract_format",
-  },
-  {
-    key: "productName",
-    title: "产品类别&名称",
-    inputType: "Input",
-    require: true,
-  },
-  {
-    key: "endDate",
-    title: "合同终止日期",
-    inputType: "DatePicker",
-    require: true,
-    valueFormat: "yyyy-MM-dd",
-  },
-  {
-    key: "invoiceTax",
-    title: "发票税率",
-    inputType: "PopoverSelect",
-    referName: "TAX_RATE_PARAM",
-    dataMapping: {
-      invoiceTax: "ntaxrate",
+    { item: { key: "puDeptName", title: "采购部门" }, attr: {} },
+    {
+      item: { key: "supplierTier", title: "供应商层级" },
+      attr: { is: "el-dict-tag", dictName: "puarchase_contract_supplier_tier" },
     },
-    require: true,
-  },
-  {
-    key: "emergencyDegree",
-    title: "紧急程度",
-    inputType: "Select",
-    require: true,
-    referName: "puarchase_contract_emergency_degree",
-  },
-  { key: "project", title: "项目医院", inputType: "Input", require: true },
-  {
-    key: "signDate",
-    title: "合同签订日期",
-    inputType: "DatePicker",
-    require: true,
-    valueFormat: "yyyy-MM-dd",
-  },
-  {
-    key: "deliveryType",
-    title: "交货方式",
-    inputType: "Select",
-    referName: "puarchase_contract_delivery_type",
-  },
-  {
-    key: "source",
-    title: "合同来源",
-    inputType: "Input",
-    value: "自制",
-    disabled: true,
-  },
-  {
-    key: "contractPartycName",
-    title: "合同丙方",
-    inputType: "PopoverSelect",
-    referName: "SUPPLIER_PARAM",
-    dataMapping: {
-      contractPartyc: "code",
-      contractPartycName: "name",
+    { item: { key: "contractName", title: "合同名称" }, attr: {} },
+    {
+      item: { key: "grossRateAverage", title: "平均毛利率 (%)" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
+      },
     },
-  },
-  {
-    key: "guaranteePeriodEnd",
-    title: "质保期限",
-    inputType: "Input",
-    require: true,
-  },
-  {
-    key: "freightMethods",
-    title: "运费承担方式",
-    inputType: "Select",
-    referName: "puarchase_contract_freight_methods",
-  },
-  {
-    key: "signDate",
-    title: "合同创建时间",
-    inputType: "DatePicker",
-    disabled: true,
-  },
-  {
-    key: "isTarget",
-    title: "是否有指标",
-    inputType: "Select",
-    require: true,
-    referName: "sys_yes_no",
-  },
-  {
-    key: "contractTarget",
-    title: "合同指标",
-    inputType: "Input",
-    require: true,
-    placeholder: '当【是否有指标】="有"时，必填',
-  },
-  {
-    key: "exemptionPostageCondtion",
-    title: "包邮条件",
-    inputType: "Input",
-    placeholder:
-      "当运费承担方式为供应商有条件承担时，该字段必填，填写要求，写明什么条件下供应商承担全部，什么条件下我方承担，什么条件下分别承担",
-    span: 12,
-  },
-  {
-    key: "isRebate",
-    title: "是否有返利",
-    inputType: "Select",
-    require: true,
-    referName: "sys_yes_no",
-  },
-  {
-    key: "rebatePolicy",
-    title: "返利政策",
-    inputType: "Input",
-    placeholder: '当【是否有返利】="有"时，必填',
-    span: 18,
-  },
-  { key: "externalContract", title: "外部合同号", inputType: "Input" },
-  {
-    key: "rollbackPolicy",
-    title: "退换货政策",
-    inputType: "Input",
-    require: true,
-  },
-  { key: "enquiryCode", title: "询价单号", inputType: "Input" },
-  {
-    key: "contractContent",
-    title: "合同主要内容",
-    inputType: "Textarea",
-    require: true,
-    span: 24,
-  },
-  { key: "refusalReasons", title: "拒绝理由", inputType: "Input", span: 24 },
-  {
-    key: "pigeonhole",
-    title: "是否归档",
-    inputType: "Select",
-    referName: "sys_yes_no",
-    disabled: true,
-  },
-  {
-    key: "pigeonholeFile",
-    title: "归档附件",
-    inputType: "Upload",
-    disabled: true,
-  },
-  {
-    key: "externalFile",
-    title: "对外附件",
-    inputType: "Upload",
-    span: 24,
-    fileType: ["pdf"],
-  },
-  {
-    key: "puFile",
-    title: "采购商盖章合同附件",
-    inputType: "Upload",
-    span: 24,
-    fileType: ["pdf"],
-  },
-  {
-    key: "supplierFile",
-    title: "供应商盖章合同附件",
-    inputType: "Upload",
-    span: 24,
-    fileType: ["pdf"],
-  },
-  { key: "projectCode", title: "项目编号", inputType: "Input" },
-  { key: "projectName", title: "项目名称", inputType: "Input" },
-  { key: "area", title: "区域", inputType: "Input" },
-  { key: "consigneePhone", title: "收货人联系方式", inputType: "Input" },
-  {
-    key: "paymentAgreement",
-    title: "付款协议",
-    inputType: "PopoverSelect",
-    referName: "PAYAGREEMENT_PARAM",
-    dataMapping: {
-      paymentAgreement: "code",
-      paymentAgreementName: "name",
+    {
+      item: { key: "approveFlow", title: "审批流程" },
+      attr: { is: "el-dict-tag", dictName: "puarchase_contract_approve_flow" },
     },
-    require: true,
-  },
-  {
-    key: "taxPrice",
-    title: "价税合计",
-    inputType: "InputNumber",
-  },
-  {
-    key: "currencyName",
-    title: "币种",
-    inputType: "PopoverSelect",
-    referName: "CURRENCY_PARAM",
-    dataMapping: {
-      currency: "code",
-      currencyName: "name",
+    {
+      item: { key: "consumableClass", title: "耗材类别" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_consumable_class",
+      },
     },
-    require: true,
-  },
-  { key: "guaranteePeriod", title: "质保期", inputType: "Input" },
-];
-
-export const TabColumns = [
-  {
-    title: "物料基本信息",
-    key: "contractItemList",
-    tableColumns: [
-      {
-        title: "物料名称",
-        key: "materialName",
-        inputType: "PopoverSelect",
-        width: 200,
-        referName: "MATERIAL_PARAM",
-        dataMapping: {
-          material: "code",
-          materialName: "name",
-          puUnit: "unitIdName",
-          registration: "registrationNo",
-          specification: "specification",
-          manufacturer: "manufacturerIdName",
+    { item: { key: "effectiveDate", title: "合同生效日期" }, attr: {} },
+    {
+      item: { key: "brandGrossRate", title: "同类品牌及毛利率 (%)" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
         },
       },
-      { title: "物料编码", key: "material", width: 200 },
-      {
-        title: "规格",
-        key: "specification",
-        width: 200,
-      },
-      // {
-      //   title: "品牌",
-      //   key: "brand",
-      //   inputType: "PopoverSelect",
-      //   width: 200,
-      //   referName: "MATERIAL_PARAM",
-      //   dataMapping: {
-      //     material: "code",
-      //     materialName: "name",
-      //   },
-      // },
-      {
-        title: "生产厂家",
-        key: "manufacturer",
-        inputType: "Input",
-        width: 200,
+    },
+    {
+      item: { key: "contractFormat", title: "合同格式" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_contract_format",
       },
-      {
-        title: "采购单位",
-        key: "puUnit",
-        inputType: "PopoverSelect",
-        width: 200,
-        referName: "UNIT_PARAM",
-        dataMapping: {
-          puUnit: "name",
+    },
+    { item: { key: "productName", title: "产品类别&名称" }, attr: {} },
+    { item: { key: "endDate", title: "合同终止日期" }, attr: {} },
+    {
+      item: { key: "invoiceTax", title: "发票税率 (%)" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
         },
       },
-      {
-        title: "税率%",
-        key: "tax",
-        inputType: "PopoverSelect",
-        referName: "TAX_RATE_PARAM",
-        dataMapping: {
-          tax: "ntaxrate",
-        },
-        width: 200,
-      },
-      {
-        title: "采购数量",
-        key: "qty",
-        inputType: "InputNumber",
-        width: 200,
+    },
+    {
+      item: { key: "emergencyDegree", title: "紧急程度" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_emergency_degree",
       },
-      {
-        title: "含税单价",
-        key: "taxPrice",
-        inputType: "InputNumber",
-        width: 200,
+    },
+    { item: { key: "project", title: "项目医院" }, attr: {} },
+    {
+      item: { key: "deliveryType", title: "交货方式" },
+      attr: { is: "el-dict-tag", dictName: "puarchase_contract_delivery_type" },
+    },
+    { item: { key: "source", title: "合同来源" }, attr: {} },
+    { item: { key: "contractPartycName", title: "合同丙方" }, attr: {} },
+    { item: { key: "guaranteePeriodEnd", title: "质保期限" }, attr: {} },
+    {
+      item: { key: "freightMethods", title: "运费承担方式" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_freight_methods",
       },
-      {
-        title: "含税金额合计",
-        key: "taxMoney",
-        inputType: "ComputedInput",
-        width: 200,
-        computed: (prop) => {
-          const { qty, taxPrice } = prop;
-          const taxMoney = (qty * taxPrice).toFixed(6);
-          return taxMoney === "NaN" ? null : taxMoney;
+    },
+    { item: { key: "signDate", title: "合同创建时间" }, attr: {} },
+    {
+      item: { key: "isTarget", title: "是否有指标" },
+      attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
+    },
+    { item: { key: "contractTarget", title: "合同指标" }, attr: {} },
+    { item: { key: "exemptionPostageCondtion", title: "包邮条件" }, attr: {} },
+    {
+      item: { key: "isRebate", title: "是否有返利" },
+      attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
+    },
+    { item: { key: "rebatePolicy", title: "返利政策" }, attr: {} },
+    { item: { key: "externalContract", title: "外部合同号" }, attr: {} },
+    { item: { key: "rollbackPolicy", title: "退换货政策" }, attr: {} },
+    { item: { key: "enquiryCode", title: "询价单号" }, attr: {} },
+    { item: { key: "contractContent", title: "合同主要内容" }, attr: {} },
+    { item: { key: "refusalReasons", title: "拒绝理由" }, attr: {} },
+    {
+      item: { key: "pigeonhole", title: "是否归档" },
+      attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
+    },
+    {
+      item: { key: "pigeonholeFile", title: "归档附件" },
+      attr: { is: "el-file-preview" },
+    },
+    {
+      item: { key: "externalFile", title: "对外附件" },
+      attr: { is: "el-file-preview" },
+    },
+    {
+      item: { key: "puFile", title: "采购商盖章合同附件" },
+      attr: { is: "el-file-preview" },
+    },
+    {
+      item: { key: "supplierFile", title: "供应商盖章合同附件" },
+      attr: { is: "el-file-preview" },
+    },
+    { item: { key: "projectCode", title: "项目编号" }, attr: {} },
+    { item: { key: "projectName", title: "项目名称" }, attr: {} },
+    { item: { key: "area", title: "区域" }, attr: {} },
+    { item: { key: "consigneePhone", title: "收货人联系方式" }, attr: {} },
+    { item: { key: "paymentAgreement", title: "付款协议" }, attr: {} },
+    {
+      item: { key: "taxPrice", title: "价税合计" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return prop ? (prop * 1).toFixed(CONFIG.precision) : "0.000000";
         },
       },
-      {
-        title: "无税单价",
-        key: "taxFreePrice",
-        inputType: "ComputedInput",
-        width: 200,
-        computed: (prop) => {
-          const { tax, taxPrice } = prop;
-          const newTax = Number(tax) / 100;
-          const taxFreePrice = (taxPrice / (1 + newTax)).toFixed(6);
-          return taxFreePrice === "NaN" ? null : taxFreePrice;
+    },
+    { item: { key: "currencyName", title: "币种" }, attr: {} },
+    { item: { key: "guaranteePeriod", title: "质保期" }, attr: {} },
+  ];
+  const TabColumns = [
+    {
+      item: { title: "物料基本信息", key: "contractItemList" },
+      attr: { value: [] },
+      TableColumns: [
+        {
+          item: {
+            title: "物料名称",
+            key: "materialName",
+          },
+          attr: {},
         },
-      },
-      {
-        title: "无税金额合计",
-        key: "taxFreeMoney",
-        inputType: "ComputedInput",
-        width: 200,
-        computed: (prop) => {
-          const { qty, taxFreePrice } = prop;
-          const taxFreeMoney = (qty * taxFreePrice).toFixed(6);
-          return taxFreeMoney === "NaN" ? null : taxFreeMoney;
+        {
+          item: {
+            title: "物料编码",
+            key: "material",
+          },
+          attr: {},
         },
-      },
-      {
-        title: "注册证号及备案凭证号",
-        key: "registration",
-        inputType: "Input",
-        width: 200,
-      },
-      {
-        title: "收货客户",
-        key: "customerName",
-        inputType: "PopoverSelect",
-        width: 200,
-        referName: "CUSTOMER_PARAM",
-        dataMapping: {
-          customer: "code",
-          customerName: "name",
+        {
+          item: {
+            title: "规格",
+            key: "specification",
+          },
+          attr: {},
         },
-      },
-    ],
-  },
-  {
-    title: "合同条款",
-    key: "contractClauseList",
-    tableColumns: [
-      { title: "条款编码", key: "code", inputType: "Input" },
-      { title: "条款名称", key: "name", inputType: "Input" },
-      { title: "条款内容", key: "content", inputType: "Input" },
-      { title: "变量序号", key: "variableRowno" },
-      { title: "变量内容", key: "variableContent", inputType: "Input" },
-    ],
-  },
-  {
-    title: "合同费用",
-    key: "contractExpenseList",
-    tableColumns: [
-      { title: "费用编码", key: "code", inputType: "Input" },
-      { title: "费用名称", key: "name", inputType: "Input" },
-      {
-        title: "费用金额",
-        key: "money",
-        inputType: "InputNumber",
-        width: 200,
-      },
-    ],
-  },
-  {
-    title: "付款协议信息",
-    key: "contractAgreementList",
-    tableColumns: [
-      {
-        title: "付款阶段",
-        key: "satge",
-        inputType: "InputNumber",
-        width: 200,
-      },
-      {
-        title: "付款起点",
-        key: "origin",
-        width: 200,
-        inputType: "Select",
-        referName: "puarchase_contract_origin",
-      },
-      { title: "账期天数", key: "paymetDays", inputType: "Input", width: 200 },
-      { title: "付款比例%", key: "ratio", inputType: "Input", width: 200 },
-      { title: "付款金额", key: "money", inputType: "Input", width: 200 },
-      {
-        title: "是否预付款",
-        key: "isAdvance",
-        width: 200,
-        inputType: "Select",
-        referName: "sys_yes_no",
-      },
-      {
-        title: "是否质保金",
-        key: "isQuality",
-        width: 200,
-        inputType: "Select",
-        referName: "sys_yes_no",
-      },
-      {
-        title: "结算方式",
-        key: "paymentMeans",
-        inputType: "PopoverSelect",
-        width: 200,
-        referName: "BALATYPE_PARAM",
-        dataMapping: {
-          paymentMeans: "name",
+        {
+          item: {
+            title: "生产厂家",
+            key: "manufacturer",
+          },
+          attr: {
+            is: "el-input",
+          },
+        },
+        {
+          item: { title: "采购单位", key: "puUnit" },
+          attr: {},
+        },
+        {
+          item: { title: "税率%", key: "tax" },
+          attr: {},
+        },
+        {
+          item: { title: "采购数量", key: "qty" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "含税单价", key: "taxPrice" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "含税金额合计", key: "taxMoney" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
         },
+        {
+          item: { title: "无税单价", key: "taxFreePrice" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "无税金额合计", key: "taxFreeMoney" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "注册证号及备案凭证号", key: "registration" },
+          attr: {},
+        },
+        {
+          item: { title: "收货客户", key: "customerName" },
+          attr: {},
+        },
+      ],
+    },
+    {
+      item: { title: "合同条款", key: "contractClauseList" },
+      attr: {
+        value: [],
       },
-      {
-        title: "需进度确认",
-        key: "schedule",
-        inputType: "Select",
-        referName: "sys_yes_no",
-        width: 200,
+      TableColumns: [
+        { item: { title: "条款编码", key: "code" }, attr: {} },
+        { item: { title: "条款名称", key: "name" }, attr: {} },
+        {
+          item: { title: "条款内容", key: "content" },
+          attr: {},
+        },
+        {
+          item: { title: "变量序号", key: "variableRowno" },
+          attr: {},
+        },
+        {
+          item: { title: "变量内容", key: "variableContent" },
+          attr: {},
+        },
+      ],
+    },
+    {
+      item: { title: "合同费用", key: "contractExpenseList" },
+      attr: {
+        value: [],
       },
-    ],
-  },
-  {
-    title: "合同执行组织范围",
-    key: "contractApplyOrgList",
-    tableColumns: [
-      {
-        title: "组织名称",
-        key: "orgName",
-        inputType: "PopoverSelect",
-        referName: "ORG_PARAM",
-        dataMapping: {
-          org: "code",
-          orgName: "name",
+      TableColumns: [
+        { item: { title: "费用编码", key: "code" }, attr: {} },
+        { item: { title: "费用名称", key: "name" }, attr: {} },
+        {
+          item: { title: "费用金额", key: "money" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
         },
+      ],
+    },
+    {
+      item: { title: "付款协议信息", key: "contractAgreementList" },
+      attr: {
+        value: [],
       },
-      { title: "组织编码", key: "org" },
-    ],
-  },
-];
-
-export default { FormColumns, TabColumns };
+      TableColumns: [
+        {
+          item: { title: "付款阶段", key: "satge" },
+          attr: {},
+        },
+        {
+          item: {
+            title: "付款起点",
+            key: "origin",
+          },
+          attr: {
+            is: "el-dict-tag",
+            dictName: "puarchase_contract_origin",
+          },
+        },
+        {
+          item: { title: "账期天数", key: "paymetDays" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "付款比例%", key: "ratio" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: { title: "付款金额", key: "money" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
+          },
+        },
+        {
+          item: {
+            title: "是否预付款",
+            key: "isAdvance",
+          },
+          attr: {
+            is: "el-dict-tag",
+            dictName: "sys_yes_no",
+          },
+        },
+        {
+          item: {
+            title: "是否质保金",
+            key: "isQuality",
+          },
+          attr: {
+            is: "el-dict-tag",
+            dictName: "sys_yes_no",
+          },
+        },
+        {
+          item: {
+            title: "结算方式",
+            key: "paymentMeans",
+          },
+          attr: {},
+        },
+        {
+          item: {
+            title: "需进度确认",
+            key: "schedule",
+          },
+          attr: {
+            is: "el-dict-tag",
+            dictName: "sys_yes_no",
+          },
+        },
+      ],
+    },
+    {
+      item: { title: "合同执行组织范围", key: "contractApplyOrgList" },
+      attr: { value: [] },
+      TableColumns: [
+        {
+          item: {
+            title: "组织名称",
+            key: "orgName",
+          },
+          attr: {},
+        },
+        { item: { title: "组织编码", key: "org" }, attr: {} },
+      ],
+    },
+  ];
+  return { FormColumns, TabColumns };
+}

src/views/purchase/contract/see/index.vue

@@ -1,23 +1,44 @@
 <script>
-import Column from "./column";
-import useData from "../hooks/data";
-import useDicts from "../hooks/dicts";
+import useColumns from "./column";
+import { initParams } from "@/utils/init.js";
 import { ITEM } from "@/api/business/purchase/contract";
 
 export default {
   name: "SeeDrawer",
-  dicts: useDicts(Column),
-  components: {},
+  components: {
+    ElDictTag: () => import("@/components/DictTag/index.vue"),
+    ElFilePreview: () => import("@/components/file-preview/index.vue"),
+    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
+  },
   data() {
+    const {
+      TabColumns,
+      FormColumns,
+      TabColumns: [
+        {
+          item: { key: tabName },
+        },
+      ],
+    } = useColumns();
+    const params = initParams([...TabColumns, ...FormColumns]);
     return {
       column: 3,
+      size: "mini",
+      width: "100%",
       title: "明 细",
-      ...useData(Column),
+      visible: false,
+      loading: false,
+      params: params,
+      tabName: tabName,
+      TabColumns,
+      FormColumns,
     };
   },
   computed: {
-    root: function () {
-      return this.$parent.$parent;
+    $dicts: {
+      get() {
+        return this.$parent.$parent.$dicts;
+      },
     },
   },
   watch: {},
@@ -29,7 +50,6 @@ export default {
         const { code, data } = await ITEM(prop);
         if (code === 200) {
           this.params = data;
-          this.tabName = this.tabColumns[0].key;
           return true;
         } else {
           return false;
@@ -48,28 +68,41 @@ export default {
     },
     //
     async hide() {
+      const {
+        TabColumns,
+        FormColumns,
+        TabColumns: [
+          {
+            item: { key: tabName },
+          },
+        ],
+      } = useColumns();
       this.visible = false;
+      this.tabName = tabName;
+      this.params = initParams([...TabColumns, ...FormColumns]);
     },
-    //
-    async useDelete(prop) {
-      await this.root
-        .useDelete(prop)
-        .then(() => {
-          this.hide();
-        })
-        .catch(() => {});
-    },
-    //
-    async useTermination(prop) {
-      await this.root
-        .useTermination(prop)
-        .then(() => {
-          this.fetchItem(this.params.id);
-        })
-        .catch(() => {});
-    },
+    // //
+    // async useDelete(prop) {
+    //   await this.root
+    //     .useDelete(prop)
+    //     .then(() => {
+    //       this.hide();
+    //     })
+    //     .catch(() => {});
+    // },
+    // //
+    // async useTermination(prop) {
+    //   await this.root
+    //     .useTermination(prop)
+    //     .then(() => {
+    //       this.fetchItem(this.params.id);
+    //     })
+    //     .catch(() => {});
+    // },
+  },
+  created() {
+    console.log(this);
   },
-  created() {},
   mounted() {},
   destroyed() {},
 };
@@ -84,7 +117,7 @@ export default {
     <template slot="title">
       <span>{{ title }}</span>
       <span>
-        <el-tooltip
+        <!-- <el-tooltip
           v-if="root.hasPowerDelete([params])"
           effect="dark"
           content="删 除"
@@ -161,7 +194,7 @@ export default {
             icon="el-icon-heavy-rain"
             @click="root.useSubmit([params])"
           ></el-button>
-        </el-tooltip>
+        </el-tooltip> -->
         <el-button
           :size="size"
           circle
@@ -173,49 +206,71 @@ export default {
     </template>
     <el-descriptions :size="size" :column="column" border style="margin: 10px">
       <el-descriptions-item
-        v-if="params[column.key]"
-        v-for="(column, index) in formColumns"
-        :key="index"
-        :label="column.title"
+        v-if="params[item.key]"
+        v-for="{ item, attr } in FormColumns"
+        :key="item.key"
+        :label="item.title"
         :labelStyle="{ width: '150px' }"
         :contentStyle="{ width: 'auto' }"
       >
-        <dict-tag
-          v-if="column.inputType === 'Select'"
+        <component
+          v-if="attr.is === 'el-dict-tag'"
+          v-bind="attr"
+          v-model="params[item.key]"
           :size="size"
-          :value="params[column.key]"
-          :options="dict.type[column.referName]"
-        />
-        <span v-else-if="column.inputType === 'Upload'">
-          <dr-file-preview v-model="params[column.key]"></dr-file-preview>
-        </span>
-        <span v-else>{{ params[column.key] }}</span>
+          :options="$dicts[attr.dictName]"
+        ></component>
+        <component
+          v-else-if="attr.is === 'el-file-preview'"
+          v-bind="attr"
+          v-model="params[item.key]"
+        ></component>
+        <component
+          v-else-if="attr.is === 'el-computed-input-v2'"
+          v-bind="attr"
+          v-model="params[item.key]"
+        ></component>
+        <component is="span" v-else>{{ params[item.key] || "--" }}</component>
       </el-descriptions-item>
     </el-descriptions>
     <el-tabs v-model="tabName" :size="size" style="margin: 10px">
       <el-tab-pane
-        v-for="(column, index) in tabColumns"
-        :key="index"
-        :name="column.key"
-        :label="column.title"
+        v-for="{ item, TableColumns } in TabColumns"
+        :key="item.key"
+        :name="item.key"
+        :label="item.title"
         lazy
       >
-        <el-table :size="size" :data="params[column.key]">
+        <el-table :size="size" :data="params[item.key]">
           <el-table-column
-            v-for="(cColumn, cIndex) in column.tableColumns"
-            :key="cIndex"
-            :prop="cColumn.key"
-            :label="cColumn.title"
-            :width="cColumn.width"
+            v-for="{ item: cItem, attr: cAttr } in TableColumns"
+            :key="cItem.key"
+            :prop="cItem.key"
+            :label="cItem.title"
+            :width="cItem.width || 300"
+            show-overflow-tooltip
           >
             <template slot-scope="scope">
-              <dict-tag
-                v-if="cColumn.inputType === 'Select'"
+              <component
+                v-if="cAttr.is === 'el-dict-tag'"
+                v-bind="cAttr"
+                v-model="scope.row[cItem.key]"
                 :size="size"
-                :value="scope.row[cColumn.key]"
-                :options="dict.type[cColumn.referName]"
-              />
-              <span v-else>{{ scope.row[cColumn.key] }}</span>
+                :options="$dicts[cAttr.dictName]"
+              ></component>
+              <component
+                v-else-if="cAttr.is === 'el-file-preview'"
+                v-bind="cAttr"
+                v-model="scope.row[cItem.key]"
+              ></component>
+              <component
+                v-else-if="cAttr.is === 'el-computed-input-v2'"
+                v-bind="cAttr"
+                v-model="scope.row[cItem.key]"
+              ></component>
+              <component is="span" v-else>{{
+                scope.row[cItem.key] || "--"
+              }}</component>
             </template>
           </el-table-column>
         </el-table>