UPDATE

src/components/computed-input/index.vue

@@ -12,11 +12,9 @@ export default {
       require: true,
     },
     // v-model
-    computed: {
+    formatter: {
       type: Function,
-      default: () => {
-        return () => {};
-      },
+      default: () => {},
       require: true,
     },
     // 源数据
@@ -24,20 +22,6 @@ export default {
       type: Object,
       require: true,
     },
-    // 组件大小
-    size: {
-      type: String,
-      dafault: () => {
-        return "mini";
-      },
-    },
-    // 提示
-    placeholder: {
-      type: String,
-      dafault: () => {
-        return "";
-      },
-    },
   },
   data() {
     return {};
@@ -50,8 +34,9 @@ export default {
   watch: {
     newSource: {
       handler: function (newProp) {
-        const { computed } = this.$props;
-        this.$emit("input", computed(newProp));
+        const { formatter } = this.$props;
+        console.log("formatter", formatter);
+        this.$emit("input", formatter(newProp));
       },
       deep: true,
       immediate: true,

src/components/popover-select-v2/index.vue

@@ -262,7 +262,7 @@ export default {
                 v-if="column.type === 'ComputedInput'"
                 v-model="scope.row[column.key]"
                 :source="scope.row"
-                :computed="column.computed"
+                :formatter="column.formatter"
                 :placeholder="column.placeholder"
                 style="width: 100%"
               ></dr-computed-input>

src/components/popover-select-v2/multiple.vue

@@ -169,7 +169,7 @@ export default {
 </script>
 <template>
   <div class="popover-select-v2 popover-select-v2--multiple">
-    <el-input v-bind="$attrs" style="width: 100%" @focus="open">
+    <el-input v-bind="$attrs" @focus="open">
       <i class="el-icon-search" slot="suffix" @click="open"> </i>
     </el-input>
     <el-dialog
@@ -265,10 +265,11 @@ export default {
       </el-form>
     </el-dialog>
     <el-scrollbar
+      v-if="lastSelectData.length"
       :viewStyle="{
         display: 'flex',
         alignItems: 'center',
-        paddingBottom: '10px',
+        padding: '5px 0 0 5px',
       }"
       class="popover-select-v2_tags"
     >
@@ -294,10 +295,11 @@ export default {
 }
 .popover-select-v2 .popover-select-v2_tags {
   position: absolute;
-  left: 5px;
+  left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: calc(100% - 40px);
+  height: 100%;
 }
 ::v-deep .el-table--mini .el-table__cell {
   height: 50px;

src/components/popover-select/components/MATERIAL_PARAM.js

@@ -33,7 +33,7 @@ export default [
     key: "registrationNo",
     title: "注册证号",
     type: "ComputedInput",
-    computed: (prop) => {
+    formatter: (prop) => {
       return prop.materialMedcine.registrationNo;
     },
   },
@@ -41,8 +41,8 @@ export default [
     key: "isDrug",
     title: "物料药品属性",
     type: "ComputedInput",
-    computed: (prop) => {
-      return prop.materialMedcine.isDrug == '0' ? 'Y' : 'N';
+    formatter: (prop) => {
+      return prop.materialMedcine.isDrug == "0" ? "Y" : "N";
     },
   },
 ];

src/components/popover-select/components/TAX_RATE_PARAM.js

@@ -1,10 +1,4 @@
 export default [
-  // {
-  //   key: "id",
-  //   title: "ID",
-  //   type: "Input",
-  //   search: true,
-  // },
   {
     key: "code",
     title: "编码",
@@ -21,9 +15,10 @@ export default [
     key: "ntaxrate",
     title: "税率",
     type: "ComputedInput",
-    computed: (prop) => {
+    formatter: (prop) => {
       const { ntaxrate } = prop;
-      return ntaxrate === "0E-8" ? "0.00000000" : ntaxrate;
+      // console.log(ntaxrate, ntaxrate.toFixed(6));
+      return ntaxrate === "0E-8" ? "0.000000" : (ntaxrate * 1).toFixed(6);
     },
   },
 ];

src/layout/components/Sidebar/SidebarItem.vue

@@ -37,8 +37,8 @@
         />
       </template>
       <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
+        v-for="(child, index) in item.children"
+        :key="`${index}_${child.path}`"
         :is-nest="true"
         :item="child"
         :title="child.meta.title"

src/utils/init.js

@@ -0,0 +1,50 @@
+/**
+ * @param {any} prop - description
+ * @param {string} key - description
+ * @param {string} value - description
+ */
+export const initParams = (prop, key = "key", value = "value") => {
+  // get params
+  const object1 = Object.fromEntries(
+    prop.map(({ item, attr }) => [item[key], attr[value]])
+  );
+  // get mapping params
+  const object2 = {};
+  prop
+    .filter((item) => item.attr.dataMapping)
+    .map(({ attr: { dataMapping } }) => {
+      for (let key in dataMapping) {
+        object2[key] = null;
+      }
+    });
+  return { ...object1, ...object2 };
+};
+
+/**
+ * @param {any} prop - description
+ */
+export const initRules = (prop) => {
+  const rules = {};
+  prop
+    .filter(({ item }) => item.require)
+    .forEach(({ item }) => {
+      const message = `${item.title}不能为空`;
+      rules[item.key] = [
+        { required: true, message: message, trigger: "change" },
+      ];
+    });
+  return rules;
+};
+
+/**
+ * @param {any} prop - description
+ */
+export const initDicts = (prop) => {
+  return Array.from(
+    new Set(
+      prop
+        .filter((item) => item.attr.dictName)
+        .map((item) => item.attr.dictName)
+    )
+  );
+};

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

@@ -1,176 +1,109 @@
 export const TableColumns = [
   {
-    key: "priceName",
-    title: "价格名称",
-    inputType: "Input",
-    value: "价格申报单",
+    item: { key: "priceName", title: "价格名称" },
+    attr: { component: "el-input", value: "价格申报单" },
   },
   {
-    key: "priceCode",
-    title: "价格编码",
-    inputType: "Input",
-    disabled: true,
-    readonly: true,
+    item: { key: "priceCode", title: "价格编码" },
+    attr: { component: "el-input", disabled: true, readonly: true },
   },
   {
-    key: "supplierName",
-    title: "供应商",
-    inputType: "PopoverSelect",
-    referName: "SUPPLIER_PARAM",
-    valueKey: "name",
-    dataMapping: {
-      supplier: "id",
-      supplierCode: "code",
-      supplierName: "name",
+    item: { key: "supplierName", title: "供应商", require: true },
+    attr: {
+      component: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "SUPPLIER_PARAM",
+      dataMapping: {
+        supplier: "id",
+        supplierCode: "code",
+        supplierName: "name",
+      },
     },
-    require: true,
   },
-  // {
-  //   key: "supplier",
-  //   title: "供应商编码",
-  //   inputType: "Input",
-  //   disabled: true,
-  //   readonly: true,
-  // },
   {
-    key: "puOrgName",
-    title: "采购组织",
-    inputType: "PopoverSelect",
-    referName: "ORG_PARAM",
-    valueKey: "name",
-    dataMapping: {
-      puOrg: "id",
-      puOrgCode: "code",
-      puOrgName: "name",
+    item: { key: "puOrgName", title: "采购组织", require: true },
+    attr: {
+      component: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "ORG_PARAM",
+      dataMapping: { puOrg: "id", puOrgCode: "code", puOrgName: "name" },
     },
-    require: true,
   },
-  // {
-  //   key: "puOrg",
-  //   title: "采购组织编码",
-  //   inputType: "Input",
-  //   disabled: true,
-  //   readonly: true,
-  // },
   {
-    key: "currencyName",
-    title: "币种",
-    inputType: "PopoverSelect",
-    referName: "CURRENCY_PARAM",
-    dataMapping: {
-      currency: "id",
-      currencyCode: "code",
-      currencyName: "name",
+    item: { key: "currencyName", title: "币种", require: true },
+    attr: {
+      component: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "CURRENCY_PARAM",
+      dataMapping: {
+        currency: "id",
+        currencyCode: "code",
+        currencyName: "name",
+      },
     },
-    require: true,
   },
-  // {
-  //   key: "currency",
-  //   title: "币种编码",
-  //   inputType: "Input",
-  //   disabled: true,
-  //   readonly: true,
-  // },
   {
-    key: "explainStr",
-    title: "价格合理性说明",
-    inputType: "Input",
-    require: true,
+    item: { key: "explainStr", title: "价格合理性说明", require: true },
+    attr: { component: "el-input" },
   },
   {
-    key: "buyerName",
-    title: "采购员",
-    inputType: "PopoverSelect",
-    referName: "CONTACTS_PARAM",
-    dataMapping: {
-      buyer: "code",
-      buyerName: "name",
+    item: { key: "buyerName", title: "采购员", require: true },
+    attr: {
+      component: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "CONTACTS_PARAM",
+      dataMapping: { buyer: "code", buyerName: "name" },
     },
-    require: true,
   },
-  // {
-  //   key: "buyer",
-  //   title: "采购员编码",
-  //   inputType: "Input",
-  //   disabled: true,
-  //   readonly: true,
-  // },
   {
-    key: "puDeptName",
-    title: "采购部门",
-    inputType: "PopoverSelect",
-    referName: "DEPT_PARAM",
-    dataMapping: {
-      puDept: "id",
-      puDeptCode: "code",
-      puDeptName: "name",
+    item: { key: "puDeptName", title: "采购部门", require: true },
+    attr: {
+      component: "el-popover-select-v2",
+      valueKey: "name",
+      referName: "DEPT_PARAM",
+      dataMapping: { puDept: "id", puDeptCode: "code", puDeptName: "name" },
     },
-    require: true,
   },
-  // {
-  //   key: "puDept",
-  //   title: "采购部门编码",
-  //   inputType: "Input",
-  //   disabled: true,
-  //   readonly: true,
-  // },
   {
-    key: "createByName",
-    title: "创建人",
-    inputType: "Input",
-    disabled: true,
-    readonly: true,
+    item: { key: "createByName", title: "创建人" },
+    attr: { component: "el-input", disabled: true, readonly: true },
   },
   {
-    key: "source",
-    title: "来源单据号",
-    inputType: "Input",
-    disabled: true,
-    readonly: true,
+    item: { key: "source", title: "来源单据号" },
+    attr: { component: "el-input", disabled: true, readonly: true },
   },
   {
-    key: "id",
-    title: "来源单据id",
-    inputType: "Input",
-    disabled: true,
-    readonly: true,
+    item: { key: "id", title: "来源单据id" },
+    attr: { component: "el-input", disabled: true, readonly: true },
   },
   {
-    key: "isEffective",
-    title: "是否已推价格",
-    inputType: "Select",
-    referName: "is_effective",
+    item: { key: "isEffective", title: "是否已推价格" },
+    attr: {
+      component: "el-select",
+      dictName: "is_effective",
+    },
   },
   {
-    key: "effectiveDate",
-    title: "生效日期",
-    inputType: "Input",
-    disabled: true,
-    readonly: true,
+    item: { key: "effectiveDate", title: "生效日期" },
+    attr: { component: "el-input", disabled: true, readonly: true },
   },
   {
-    key: "file",
-    title: "附件",
-    inputType: "Upload",
-    span: 24,
-    require: true,
-    value: [],
+    item: { key: "file", title: "附件", require: true, span: 24 },
+    attr: { component: "file-upload" },
   },
   {
-    key: "sourceType",
-    title: "来源单据类型",
-    inputType: "Input",
-    disabled: true,
-    readonly: true,
+    item: { key: "sourceType", title: "来源单据类型" },
+    attr: { component: "el-input", disabled: true, readonly: true },
   },
   {
-    key: "status",
-    title: "单据状态",
-    inputType: "Select",
-    referName: "sys_status",
-    disabled: true,
-    readonly: true,
-    value: "0",
+    item: { key: "status", title: "单据状态" },
+    attr: {
+      component: "el-select",
+      dictName: "sys_status",
+      disabled: true,
+      readonly: true,
+      value: "0",
+    },
   },
 ];
 
@@ -180,223 +113,163 @@ export const TabColumns = [
     key: "priceApplyItems",
     tableColumns: [
       {
-        title: "物料名称",
-        key: "materialName",
-        inputType: "PopoverSelect",
-        width: 300,
-        referName: "MATERIAL_PARAM",
-        dataMapping: {
-          model: "model",
-          material: "id",
-          materialCode: "code",
-          materialName: "name",
-          unitName: "unitIdName",
-          puUnitName: "unitIdName",
-          specification: "specification",
-          manufacturer: "manufacturerId",
-          manufacturerName: "manufacturerIdName",
+        item: { key: "materialName", title: "物料名称", require: true },
+        attr: {
+          component: "el-popover-select-v2",
+          valueKey: "name",
+          referName: "MATERIAL_PARAM",
+          dataMapping: {
+            model: "model",
+            material: "id",
+            materialCode: "code",
+            materialName: "name",
+            unitName: "unitIdName",
+            puUnitName: "unitIdName",
+            specification: "specification",
+            manufacturer: "manufacturerId",
+            manufacturerName: "manufacturerIdName",
+          },
         },
-        require: true,
-      },
-      { title: "物料编码", key: "materialCode" },
-      // { title: "物料ID", key: "material" },
-      {
-        title: "生产厂家",
-        key: "manufacturerName",
       },
-      // {
-      //   title: "生产厂家编码",
-      //   key: "manufacturer",
-      // },
+      { item: { key: "materialCode", title: "物料编码" }, attr: {} },
+      { item: { key: "manufacturerName", title: "生产厂家" }, attr: {} },
+      { item: { key: "specification", title: "规格" }, attr: {} },
+      { item: { key: "model", title: "型号" }, attr: {} },
       {
-        title: "规格",
-        key: "specification",
-      },
-      {
-        title: "型号",
-        key: "model",
-      },
-      {
-        title: "单位",
-        key: "unitName",
-        inputType: "PopoverSelect",
-        width: 300,
-        referName: "UNIT_PARAM",
-        dataMapping: {
-          unit: "id",
-          unitCode: "code",
-          unitName: "name",
+        item: { key: "unitName", title: "单位" },
+        attr: {
+          component: "el-popover-select-v2",
+          valueKey: "name",
+          referName: "UNIT_PARAM",
+          dataMapping: { unit: "id", unitCode: "code", unitName: "name" },
         },
       },
-      // {
-      //   title: "单位编码",
-      //   key: "unitCode",
-      // },
-      // {
-      //   title: "单位ID",
-      //   key: "unit",
-      // },
       {
-        title: "采购单位",
-        key: "puUnitName",
-        inputType: "PopoverSelect",
-        width: 300,
-        referName: "UNIT_PARAM",
-        dataMapping: {
-          puUnit: "id",
-          puUnitCode: "code",
-          puUnitName: "name",
+        item: { key: "puUnitName", title: "采购单位" },
+        attr: {
+          component: "el-popover-select-v2",
+          valueKey: "name",
+          referName: "UNIT_PARAM",
+          dataMapping: { puUnit: "id", puUnitCode: "code", puUnitName: "name" },
         },
       },
-      // {
-      //   title: "采购单位编码",
-      //   key: "puUnitCode",
-      // },
-      // {
-      //   title: "采购单位ID",
-      //   key: "puUnit",
-      // },
       {
-        title: "采购换算率",
-        key: "conversionRate",
-        inputType: "InputNumber",
-        width: 300,
-        require: true,
-        formatter: (prop) => (prop ? (prop * 1).toFixed(6) : null),
-      },
-      {
-        title: "税率%",
-        key: "tax",
-        inputType: "PopoverSelect",
-        referName: "TAX_RATE_PARAM",
-        dataMapping: {
-          tax: "ntaxrate",
+        item: { key: "conversionRate", title: "采购换算率", require: true },
+        attr: {
+          component: "el-input-number",
+          precision: 6,
+          formatter: (prop) => (prop ? (prop * 1).toFixed(6) : null),
         },
-        width: 300,
-        require: true,
-        formatter: (prop) => (prop ? (prop * 1).toFixed(6) : null),
-      },
-      {
-        title: "含税单价",
-        key: "taxPrice",
-        inputType: "InputNumber",
-        width: 300,
-        require: true,
-        formatter: (prop) => (prop ? (prop * 1).toFixed(6) : null),
       },
       {
-        title: "无税单价",
-        key: "price",
-        inputType: "ComputedInput",
-        width: 300,
-        computed: (prop) => {
-          const { tax, taxPrice } = prop;
-          const newTax = Number(tax) / 100;
-          const price = (taxPrice / (1 + newTax)).toFixed(6);
-          return price === "NaN" ? null : price;
+        item: { key: "tax", title: "税率%", require: true },
+        attr: {
+          component: "el-popover-select-v2",
+          valueKey: "ntaxrate",
+          referName: "TAX_RATE_PARAM",
+          dataMapping: { tax: "ntaxrate" },
+          formatter: (prop) => (prop ? (prop * 1).toFixed(6) : null),
         },
-        require: true,
       },
       {
-        key: "currencyName",
-        title: "币种",
-        inputType: "PopoverSelect",
-        referName: "CURRENCY_PARAM",
-        dataMapping: {
-          currency: "id",
-          currencyCode: "code",
-          currencyName: "name",
+        item: { key: "taxPrice", title: "含税单价", require: true },
+        attr: {
+          component: "el-input-number",
+          precision: 6,
+          formatter: (prop) => (prop ? (prop * 1).toFixed(6) : null),
         },
       },
-      // {
-      //   title: "币种编码",
-      //   key: "currencyCode",
-      // },
-      // {
-      //   title: "币种ID",
-      //   key: "currency",
-      // },
       {
-        key: "periodBegin",
-        title: "价格有效期（起）",
-        inputType: "DatePicker",
-        valueFormat: "yyyy-MM-dd",
-        value: new Date(),
-        require: true,
-      },
-      {
-        key: "periodEnd",
-        title: "价格有效期（止）",
-        inputType: "DatePicker",
-        valueFormat: "yyyy-MM-dd",
-        pickerOptions: {
-          disabledDate(time) {
-            return time.getTime() < Date.now() + 3600 * 1000 * 24 * 365;
+        item: { key: "price", title: "无税单价", require: true },
+        attr: {
+          component: "el-computed-input",
+          formatter: (prop) => {
+            const { tax, taxPrice } = prop;
+            const newTax = Number(tax) / 100;
+            const price = (taxPrice / (1 + newTax)).toFixed(6);
+            return price === "NaN" ? null : price;
           },
         },
-        value: new Date(new Date().getTime() + 3600 * 1000 * 24 * 366),
-        require: true,
       },
       {
-        title: "客户",
-        key: "customerName",
-        inputType: "PopoverSelect",
-        width: 300,
-        referName: "CUSTOMER_PARAM",
-        dataMapping: {
-          customer: "id",
-          customerCode: "code",
-          customerName: "name",
+        item: { key: "currencyName", title: "币种" },
+        attr: {
+          component: "el-popover-select-v2",
+          valueKey: "name",
+          referName: "CURRENCY_PARAM",
+          dataMapping: {
+            currency: "id",
+            currencyCode: "code",
+            currencyName: "name",
+          },
         },
       },
-      // {
-      //   title: "客户编码",
-      //   key: "customerCode",
-      // },
-      // {
-      //   title: "客户ID",
-      //   key: "customer",
-      // },
       {
-        title: "最近价格",
-        key: "recentlyPrice",
+        item: { key: "periodBegin", title: "价格有效期（起）", require: true },
+        attr: {
+          component: "el-date-picker",
+          valueFormat: "yyyy-MM-dd",
+          value: new Date(),
+        },
       },
       {
-        title: "首次报批",
-        key: "isApprovalFirst",
-        width: 300,
-        inputType: "Select",
-        referName: "is_effective",
+        item: { key: "periodEnd", title: "价格有效期（止）", require: true },
+        attr: {
+          component: "el-date-picker",
+          valueFormat: "yyyy-MM-dd",
+          pickerOptions: {
+            disabledDate(time) {
+              return time.getTime() < Date.now() + 3600 * 1000 * 24 * 365;
+            },
+          },
+
+          value: new Date(new Date().getTime() + 3600 * 1000 * 24 * 366),
+        },
       },
       {
-        title: "价格调整",
-        key: "isPriceAdjustment",
-        width: 300,
-        inputType: "Select",
-        referName: "is_effective",
+        item: { key: "customerName", title: "客户" },
+        attr: {
+          component: "el-popover-select-v2",
+          valueKey: "name",
+          referName: "CUSTOMER_PARAM",
+          dataMapping: {
+            customer: "id",
+            customerCode: "code",
+            customerName: "name",
+          },
+        },
       },
+      { item: { key: "recentlyPrice", title: "最近价格" }, attr: {} },
       {
-        key: "priceType",
-        title: "价格类型",
-        inputType: "Select",
-        referName: "sys_price_type",
+        item: { key: "isApprovalFirst", title: "首次报批" },
+        attr: {
+          component: "el-select",
+          dictName: "is_effective",
+        },
       },
       {
-        title: "配送价",
-        key: "isDistributionPrice",
-        width: 300,
-        inputType: "Select",
-        referName: "is_effective",
-        require: true,
+        item: { key: "isPriceAdjustment", title: "价格调整" },
+        attr: {
+          component: "el-select",
+          dictName: "is_effective",
+        },
       },
       {
-        title: "创建人名称",
-        key: "createByName",
+        item: { key: "priceType", title: "价格类型" },
+        attr: {
+          component: "el-select",
+          dictName: "sys_price_type",
+        },
       },
       {
-        title: "更新人名称",
-        key: "updateByName",
+        item: { key: "isDistributionPrice", title: "配送价", require: true },
+        attr: {
+          component: "el-select",
+          dictName: "is_effective",
+        },
       },
+      { item: { key: "createByName", title: "创建人名称" }, attr: {} },
+      { item: { key: "updateByName", title: "更新人名称" }, attr: {} },
     ],
   },
   {
@@ -404,31 +277,50 @@ export const TabColumns = [
     key: "priceApplyOrgs",
     tableColumns: [
       {
-        title: "组织",
-        key: "orgName",
-        inputType: "PopoverSelect",
-        referName: "ORG_PARAM",
-        dataMapping: {
-          org: "id",
-          orgCode: "code",
-          orgName: "name",
+        item: { key: "orgName", title: "组织", require: true, width: "auto" },
+        attr: {
+          component: "el-popover-select-v2",
+          valueKey: "name",
+          referName: "ORG_PARAM",
+          dataMapping: {
+            org: "id",
+            orgCode: "code",
+            orgName: "name",
+          },
         },
-        width: "auto",
       },
-      // { title: "组织编码", key: "org" },
-      // { title: "组织ID", key: "org" },
       {
-        title: "创建人名称",
-        key: "createByName",
-        width: "auto",
+        item: { key: "createByName", title: "创建人名称", width: "auto" },
+        attr: {},
       },
       {
-        title: "更新人名称",
-        key: "updateByName",
-        width: "auto",
+        item: { key: "updateByName", title: "更新人名称", width: "auto" },
+        attr: {},
       },
     ],
   },
 ];
 
+// console.log(
+//   JSON.stringify(
+//     TabColumns[0].tableColumns.map((item) => ({
+//       item: { key: item.key, title: item.title, require: item.require },
+//       attr: {
+//         component: item.inputType,
+//         dictName: item.referName,
+//         referName: item.referName,
+//         clearable: item.clearable,
+//         dataMapping: item.dataMapping,
+//         disabled: item.disabled,
+//         readonly: item.readonly,
+//         formatter: item.formatter,
+//         valueFormat: item.valueFormat,
+//         pickerOptions: item.pickerOptions,
+//         computed: item.computed,
+//         value: item.value,
+//       },
+//     }))
+//   )
+// );
+
 export default { TableColumns, TabColumns };

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

@@ -1,24 +1,32 @@
 <script>
 import Column from "./column";
 import useData from "../hooks/data";
-import useDicts from "../hooks/dicts";
 import useWatch from "../hooks/watch";
 import useMethods from "../hooks/function";
-import { initParams } from "@/utils/init";
+import { initParams } from "@/utils/init.js";
 import { ITEM, SAVE } from "@/api/business/purchase/apply";
+
 const { watchPuOrgName } = useWatch();
 
 export default {
   name: "AddDrawer",
-  dicts: useDicts(Column),
-  components: {},
+  components: {
+    ElComputedInput: () => import("@/components/computed-input/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+  },
   data() {
     return {
       title: "新 增",
       ...useData(Column),
     };
   },
-  computed: {},
+  computed: {
+    $dicts: {
+      get: function () {
+        return this.$parent.$parent.$dicts;
+      },
+    },
+  },
   watch: {
     "params.puOrgName": watchPuOrgName(),
   },
@@ -205,55 +213,32 @@ export default {
     >
       <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
         <el-col
-          v-for="(column, index) in tableColumns"
-          :key="index"
-          :span="column.span || 8"
+          v-for="column in tableColumns"
+          :key="column.item.title"
+          :span="column.item.span || 8"
         >
-          <el-form-item :prop="column.key" :label="column.title">
-            <el-input
-              v-if="column.inputType === 'Input'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :readonly="column.readonly"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              style="width: 100%"
-            ></el-input>
-            <dr-popover-select
-              v-if="column.inputType === 'PopoverSelect'"
-              v-model="params[column.key]"
+          <el-form-item
+            :prop="column.item.key"
+            :label="column.item.title"
+            :require="column.item.require"
+          >
+            <component
+              v-bind="column.attr"
+              v-model="params[column.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"
+              :is="column.attr.component"
               style="width: 100%"
             >
-            </dr-popover-select>
-            <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>
-            <file-upload
-              v-if="column.inputType === 'Upload'"
-              v-model="params[column.key]"
-              :file-type="column.fileType"
-            ></file-upload>
+              <template v-if="column.attr.dictName">
+                <el-option
+                  v-for="item in $dicts[column.attr.dictName]"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </template>
+            </component>
           </el-form-item>
         </el-col>
         <el-col :span="24">
@@ -275,83 +260,32 @@ export default {
                   <el-table-column
                     v-for="(cColumn, cIndex) in column.tableColumns"
                     :key="cIndex"
-                    :prop="cColumn.key"
-                    :label="cColumn.title"
-                    :width="cColumn.width || 200"
+                    :prop="cColumn.item.key"
+                    :label="cColumn.item.title"
+                    :width="cColumn.item.width || 250"
                     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"
+                      <component
+                        v-if="cColumn.attr.component"
+                        v-bind="cColumn.attr"
+                        v-model="scope.row[cColumn.item.key]"
                         :source.sync="scope.row"
-                        :type="cColumn.referName"
-                        :disabled="cColumn.disabled"
-                        :readonly="cColumn.readonly"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        :data-mapping="cColumn.dataMapping"
+                        :is="cColumn.attr.component"
                         @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>
-                      <el-date-picker
-                        v-else-if="cColumn.inputType === 'DatePicker'"
-                        v-model="scope.row[cColumn.key]"
-                        :type="cColumn.type"
-                        :disabled="cColumn.disabled"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        :value-format="cColumn.valueFormat"
-                        :picker-options="cColumn.pickerOptions"
                         style="width: 100%"
                       >
-                      </el-date-picker>
-                      <span v-else> {{ scope.row[cColumn.key] }}</span>
+                        <template v-if="cColumn.attr.dictName">
+                          <el-option
+                            v-for="item in $dicts[cColumn.attr.dictName]"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          >
+                          </el-option>
+                        </template>
+                      </component>
+                      <span v-else> {{ scope.row[cColumn.item.key] }}</span>
                     </template>
                   </el-table-column>
                   <el-table-column fixed="right" label="操作" width="100">

src/views/purchase/apply/column.js

@@ -24,17 +24,7 @@ export const TableColumns = [
   { item: { key: "effectiveDate", title: "生效日期" }, attr: {} },
   { item: { key: "sourceType", title: "来源单据类型" }, attr: {} },
 ];
-console.log(
-  JSON.stringify(
-    TableColumns.map((item) => ({
-      item: { key: item.key, title: item.title },
-      attr: {
-        component: item.inputType,
-        dictName: item.referName,
-      },
-    }))
-  )
-);
+
 export const SearchColumns = [
   {
     item: { key: "supplierName", title: "供应商" },
@@ -97,19 +87,4 @@ export const SearchColumns = [
       clearable: true,
     },
   },
-];
-
-console.log(
-  JSON.stringify(
-    SearchColumns.map((item) => ({
-      item: { key: item.key, title: item.title },
-      attr: {
-        component: item.inputType,
-        dictName: item.referName,
-        referName: item.referName,
-        clearable: item.clearable,
-        dataMapping: item.dataMapping,
-      },
-    }))
-  )
-);
+];

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

@@ -1,18 +1,20 @@
 <script>
 import Column from "../add/column";
 import useData from "../hooks/data";
-import useDicts from "../hooks/dicts";
 import useWatch from "../hooks/watch";
 import useMethods from "../hooks/function";
-import { initParams } from "@/utils/init";
+import { initParams } from "@/utils/init.js";
 import { ITEM, SAVE } from "@/api/business/purchase/apply";
+
 const { watchPuOrgName, watchPriceApplyOrgs, watchPriceApplyItems } =
   useWatch();
 
 export default {
   name: "EditDrawer",
-  dicts: useDicts(Column),
-  components: {},
+  components: {
+    ElComputedInput: () => import("@/components/computed-input/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+  },
   data() {
     return {
       title: "更 新",
@@ -27,6 +29,11 @@ export default {
     root: function () {
       return this.$parent.$parent;
     },
+    $dicts: {
+      get: function () {
+        return this.$parent.$parent.$dicts;
+      },
+    },
   },
   watch: {
     "params.puOrgName": watchPuOrgName(),
@@ -192,58 +199,34 @@ export default {
     >
       <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
         <el-col
-          v-for="(column, index) in tableColumns"
-          :key="index"
-          :span="column.span || 8"
+          v-for="column in tableColumns"
+          :key="column.item.title"
+          :span="column.item.span || 8"
         >
-          <el-form-item :prop="column.key" :label="column.title">
-            <el-input
-              v-if="column.inputType === 'Input'"
-              v-model="params[column.key]"
-              :disabled="column.disabled"
-              :readonly="column.readonly"
-              :clearable="column.clearable"
-              :placeholder="column.placeholder"
-              style="width: 100%"
-            ></el-input>
-            <dr-popover-select
-              v-if="column.inputType === 'PopoverSelect'"
-              v-model="params[column.key]"
+          <el-form-item
+            :prop="column.item.key"
+            :label="column.item.title"
+            :require="column.item.require"
+          >
+            <component
+              v-bind="column.attr"
+              v-model="params[column.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"
+              :is="column.attr.component"
               style="width: 100%"
             >
-            </dr-popover-select>
-            <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>
-            <file-upload
-              v-if="column.inputType === 'Upload'"
-              v-model="params[column.key]"
-              :file-type="column.fileType"
-            ></file-upload>
+              <template v-if="column.attr.dictName">
+                <el-option
+                  v-for="item in $dicts[column.attr.dictName]"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </template>
+            </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">
@@ -263,83 +246,32 @@ export default {
                   <el-table-column
                     v-for="(cColumn, cIndex) in column.tableColumns"
                     :key="cIndex"
-                    :prop="cColumn.key"
-                    :label="cColumn.title"
-                    :width="cColumn.width || 200"
+                    :prop="cColumn.item.key"
+                    :label="cColumn.item.title"
+                    :width="cColumn.item.width || 250"
                     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"
+                      <component
+                        v-if="cColumn.attr.component"
+                        v-bind="cColumn.attr"
+                        v-model="scope.row[cColumn.item.key]"
                         :source.sync="scope.row"
-                        :type="cColumn.referName"
-                        :disabled="cColumn.disabled"
-                        :readonly="cColumn.readonly"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        :data-mapping="cColumn.dataMapping"
+                        :is="cColumn.attr.component"
                         @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>
-                      <el-date-picker
-                        v-else-if="cColumn.inputType === 'DatePicker'"
-                        v-model="scope.row[cColumn.key]"
-                        :type="cColumn.type"
-                        :disabled="cColumn.disabled"
-                        :clearable="cColumn.clearable"
-                        :placeholder="cColumn.placeholder"
-                        :value-format="cColumn.valueFormat"
-                        :picker-options="cColumn.pickerOptions"
                         style="width: 100%"
                       >
-                      </el-date-picker>
-                      <span v-else> {{ scope.row[cColumn.key] }}</span>
+                        <template v-if="cColumn.attr.dictName">
+                          <el-option
+                            v-for="item in $dicts[cColumn.attr.dictName]"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          >
+                          </el-option>
+                        </template>
+                      </component>
+                      <span v-else> {{ scope.row[cColumn.item.key] }}</span>
                     </template>
                   </el-table-column>
                   <el-table-column fixed="right" label="操作" width="100">

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

@@ -1,4 +1,4 @@
-import { initRules, initParams } from "@/utils/init";
+import { initRules, initParams } from "@/utils/init.js";
 
 export default function useData(prop) {
   const { TableColumns, TabColumns } = prop;

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

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

src/views/purchase/apply/index.vue

@@ -1,37 +1,11 @@
 <script>
 import { LIST } from "@/api/business/purchase/apply";
 import { TableColumns, SearchColumns } from "./column";
-const initParams = (prop, key = "key", value = "value") => {
-  // get params
-  const object1 = Object.fromEntries(
-    prop.map(({ item, attr }) => [item[key], attr[value]])
-  );
-  // get mapping params
-  const object2 = {};
-  prop
-    .filter((item) => item.attr.dataMapping)
-    .map(({ attr: { dataMapping } }) => {
-      for (let key in dataMapping) {
-        object2[key] = null;
-      }
-    });
-  return { ...object1, ...object2 };
-};
-
-// 初始化字典
-const initDicts = (prop) => {
-  return Array.from(
-    new Set(
-      prop
-        .filter((item) => item.attr.dictName)
-        .map((item) => item.attr.dictName)
-    )
-  );
-};
+import { initDicts, initParams } from "@/utils/init.js";
 
 export default {
   name: "PuchaseApply",
-  dicts: [...initDicts([...TableColumns, ...SearchColumns])],
+  dicts: [...initDicts([...TableColumns, ...SearchColumns]), "sys_price_type"],
   components: {
     AddModel: () => import("./add/index.vue"),
     SeeModel: () => import("./see/index.vue"),
@@ -52,7 +26,13 @@ export default {
       page: { pageNum: 1, pageSize: 10, total: 0 },
     };
   },
-  computed: {},
+  computed: {
+    $dicts: {
+      get: function () {
+        return this.dict.type;
+      },
+    },
+  },
   created() {
     this.params.status = "0";
     this.useQuery(this.params, this.page);
@@ -60,7 +40,7 @@ export default {
   provide() {
     return {
       initParams,
-      $dicts: () => this.dict.type,
+      $dicts: this.$dicts,
     };
   },
   methods: {
@@ -215,38 +195,24 @@ export default {
         >
           <el-form-item :prop="column.item.key" :label="column.item.title">
             <component
-              v-if="column.attr.referName"
               v-bind="column.attr"
               v-model="params[column.item.key]"
               :source.sync="params"
               :is="column.attr.component"
               @change="useQuery(params, page)"
               @keyup.enter.native="useQuery(params, page)"
-            ></component>
-            <component
-              v-else-if="column.attr.dictName"
-              v-bind="column.attr"
-              v-model="params[column.item.key]"
-              :is="column.attr.component"
-              @change="useQuery(params, page)"
               style="width: 100%"
             >
-              <el-option
-                v-for="item in dict.type[column.attr.dictName]"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option
-            ></component>
-            <component
-              v-else
-              v-bind="column.attr"
-              v-model="params[column.item.key]"
-              :is="column.attr.component"
-              @change="useQuery(params, page)"
-              @keyup.enter.native="useQuery(params, page)"
-            ></component>
+              <template v-if="column.attr.dictName">
+                <el-option
+                  v-for="item in dict.type[column.attr.dictName]"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </template>
+            </component>
           </el-form-item>
         </el-col>
       </el-row>
@@ -279,7 +245,6 @@ export default {
       @row-dblclick="useSee"
       @selection-change="useSelect"
       @row-click="useSelect([$event])"
-      style="width: 100%; margin: 20px 0 0 0"
     >
       <el-table-column
         fixed

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

@@ -1,12 +1,10 @@
 <script>
 import Column from "../add/column";
 import useData from "../hooks/data";
-import useDicts from "../hooks/dicts";
 import { ITEM } from "@/api/business/purchase/apply";
 
 export default {
   name: "SeeDrawer",
-  dicts: useDicts(Column),
   data() {
     return {
       column: 3,
@@ -19,6 +17,11 @@ export default {
     root: function () {
       return this.$parent.$parent;
     },
+    $dicts: {
+      get: function () {
+        return this.$parent.$parent.$dicts;
+      },
+    },
   },
   watch: {},
   methods: {
@@ -136,8 +139,8 @@ export default {
             @click="root.useCopy([params])"
           ></el-button>
         </el-tooltip>
+        <!-- v-if="root.hasPowerEdit([params])" -->
         <el-tooltip
-          v-if="root.hasPowerEdit([params])"
           effect="dark"
           content="编 辑"
           placement="bottom-end"
@@ -173,21 +176,22 @@ export default {
     </template>
     <el-descriptions :size="size" :column="column" border style="margin: 10px">
       <el-descriptions-item
-        v-if="params[column.key]"
+        v-if="params[column.item.key]"
         v-for="(column, index) in tableColumns"
         :key="index"
-        :label="column.title"
+        :label="column.item.title"
       >
         <dict-tag
-          v-if="column.inputType === 'Select'"
+          v-if="column.attr.component === 'el-select'"
           :size="size"
-          :value="params[column.key]"
-          :options="dict.type[column.referName]"
+          :value="params[column.item.key]"
+          :options="$dicts[column.attr.dictName]"
         />
-        <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>
+        <dr-file-preview
+          v-else-if="column.attr.component === 'file-upload'"
+          v-model="params[column.item.key]"
+        ></dr-file-preview>
+        <span v-else>{{ params[column.item.key] }}</span>
       </el-descriptions-item>
     </el-descriptions>
     <el-tabs v-model="tabName" :size="size" style="margin: 10px">
@@ -202,22 +206,22 @@ export default {
           <el-table-column
             v-for="(cColumn, cIndex) in column.tableColumns"
             :key="cIndex"
-            :prop="cColumn.key"
-            :label="cColumn.title"
-            :width="cColumn.width || 200"
+            :prop="cColumn.item.key"
+            :label="cColumn.item.title"
+            :width="cColumn.item.width || 250"
             show-overflow-tooltip
           >
             <template slot-scope="scope">
               <dict-tag
-                v-if="cColumn.inputType === 'Select'"
+                v-if="cColumn.attr.component === 'el-select'"
                 :size="size"
-                :value="scope.row[cColumn.key]"
-                :options="dict.type[cColumn.referName]"
+                :value="scope.row[cColumn.item.key]"
+                :options="$dicts[cColumn.attr.dictName]"
               />
               <span v-else>{{
-                cColumn.formatter
-                  ? cColumn.formatter(scope.row[cColumn.key])
-                  : scope.row[cColumn.key]
+                cColumn.attr.formatter
+                  ? cColumn.attr.formatter(scope.row[cColumn.item.key])
+                  : scope.row[cColumn.item.key]
               }}</span>
             </template>
           </el-table-column>

src/views/purchase/task/index.vue

@@ -212,37 +212,24 @@ export default {
         >
           <el-form-item :prop="column.item.key" :label="column.item.title">
             <component
-              v-if="column.attr.referName"
               v-bind="column.attr"
               v-model="params[column.item.key]"
               :source.sync="params"
               :is="column.attr.component"
               @change="useQuery(params, page)"
-            ></component>
-            <component
-              v-else-if="column.attr.dictName"
-              v-bind="column.attr"
-              v-model="params[column.item.key]"
-              :is="column.attr.component"
-              @change="useQuery(params, page)"
+              @keyup.enter.native="useQuery(params, page)"
               style="width: 100%"
             >
-              <el-option
-                v-for="item in dict.type[column.attr.dictName]"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option
-            ></component>
-            <component
-              v-else
-              v-bind="column.attr"
-              v-model="params[column.item.key]"
-              :is="column.attr.component"
-              @change="useQuery(params, page)"
-              @keyup.enter.native="useQuery(params, page)"
-            ></component>
+              <template v-if="column.attr.dictName">
+                <el-option
+                  v-for="item in dict.type[column.attr.dictName]"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </template>
+            </component>
           </el-form-item>
         </el-col>
       </el-row>