update

src/components/FileUpload/index.vue

@@ -235,6 +235,11 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+.el-form-item.is-error .el-upload-dragger {
+  border: 1px dashed #ff4949;
+}
+</style>
 
 <style scoped lang="scss">
 .upload-file-uploader {

src/components/super-search/index.vue

@@ -79,7 +79,6 @@ export default {
     label-width="auto"
     label-position="right"
     @submit.native.prevent
-    style="padding: 20px 20px 0"
   >
     <el-row :gutter="20">
       <el-col :span="20">
@@ -164,64 +163,72 @@ export default {
         </el-row>
       </el-col>
       <el-col :span="4" style="text-align: right">
-        <el-button :size="$attrs.size" type="primary" @click="$emit('submit')">
+        <el-button
+          :size="$attrs.size"
+          type="primary"
+          icon="el-icon-search"
+          @click="$emit('submit')"
+        >
           查 询
         </el-button>
-        <el-button :size="$attrs.size" @click="$emit('reset')">
+        <el-button
+          :size="$attrs.size"
+          icon="el-icon-refresh"
+          @click="$emit('reset')"
+        >
           重 置
         </el-button>
-        <el-button :size="$attrs.size" @click="drawer = true"
-          >设 置
-          <el-drawer
-            size="25%"
-            title="操作列"
-            append-to-body
-            :visible.sync="drawer"
-          >
-            <el-row :gutter="20" style="margin: 0">
-              <el-draggable
-                v-model="innerColumns"
-                :group="{ item: 'key' }"
-                @change="changeColumns"
-              >
-                <el-col
-                  v-for="({ item }, index) in innerColumns"
-                  :key="index"
-                  :span="24"
-                  style="
-                    display: flex;
-                    justify-content: space-between;
-                    padding: 15px 20px;
-                  "
-                >
-                  <span style="cursor: move">
-                    <i class="el-icon-rank"></i>
-                    {{ item.title }}
-                  </span>
-                  <div>
-                    <el-radio-group
-                      v-model="item.hidden"
-                      :size="$attrs.size"
-                      @change="changeColumns"
-                    >
-                      <el-radio-button :label="true">显</el-radio-button>
-                      <el-radio-button :label="false">隐</el-radio-button>
-                    </el-radio-group>
-                  </div>
-                </el-col>
-              </el-draggable>
-            </el-row>
-          </el-drawer>
-        </el-button>
+        <!-- <el-button
+          :size="$attrs.size"
+          icon="el-icon-setting"
+          @click="drawer = true"
+        >
+        </el-button> -->
       </el-col>
     </el-row>
     <el-divider>
       <i
+        v-if="innerColumns.length > 4"
         :class="visible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
         style="cursor: pointer"
         @click="visible = !visible"
       ></i>
     </el-divider>
+    <!-- <el-drawer size="25%" title="操作列" append-to-body :visible.sync="drawer">
+      <el-row :gutter="20" style="margin: 0">
+        <el-draggable
+          v-model="innerColumns"
+          :group="{ item: 'key' }"
+          @change="changeColumns"
+        >
+          <el-col
+            v-for="({ item }, index) in innerColumns"
+            :key="index"
+            :span="24"
+            style="
+              display: flex;
+              justify-content: space-between;
+              padding: 15px 20px;
+            "
+          >
+            <span style="cursor: move">
+              <i class="el-icon-rank"></i>
+              {{ item.title }}
+            </span>
+            <div>
+              <el-radio-group
+                v-model="item.hidden"
+                :size="$attrs.size"
+                @change="changeColumns"
+              >
+                <el-radio-button :label="true">显</el-radio-button>
+                <el-radio-button :label="false">隐</el-radio-button>
+              </el-radio-group>
+            </div>
+          </el-col>
+        </el-draggable>
+      </el-row>
+    </el-drawer> -->
   </el-form>
 </template>
 

src/components/super-table/index.vue

@@ -45,6 +45,7 @@ export default {
       left: 0,
       stroageKey: stroageKey,
       innerColumns: innerColumns,
+      currentData: {},
     };
   },
   computed: {
@@ -77,13 +78,27 @@ export default {
     },
   },
   methods: {
-    changeColumns() {
+    setColumns() {
       const { stroageKey, innerColumns } = this;
-      this.$refs.superTable.doLayout();
-      localStorage.setItem(stroageKey, JSON.stringify(innerColumns));
+      this.$nextTick(() => {
+        this.$refs.superTable.doLayout();
+        localStorage.setItem(stroageKey, JSON.stringify(innerColumns));
+      });
+    },
+    resetColumns() {
+      const { stroageKey, innerColumns } = this;
+      this.innerColumns = innerColumns.map(({ item, attr }) => ({
+        attr,
+        item: { ...item, hidden: true, fixed: false },
+      }));
+      this.$nextTick(() => {
+        this.$refs.superTable.doLayout();
+        localStorage.removeItem(stroageKey);
+      });
     },
     openContextmenu(row, column, event) {
       this.visible = true;
+      this.currentData = { row, column };
       this.$nextTick(() => {
         // 鼠标坐标
         const { x, y } = event;
@@ -196,36 +211,13 @@ export default {
           </slot>
         </template>
       </el-table-column>
-      <el-table-column
-        v-if="hideOperationColumns"
-        width="50"
-        fixed="right"
-        align="center"
-      >
-        <template slot="header" slot-scope="scope">
-          <i
-            class="el-icon-setting"
-            style="cursor: pointer"
-            @click="drawer = true"
-          ></i>
-        </template>
-
-        <template slot-scope="scope">
-          <slot name="operation" v-bind="scope">
-            <el-tag :size="$attrs.size" type="info">
-              {{ scope.row.$index || scope.$index + 1 }}
-            </el-tag>
-          </slot>
-        </template>
-      </el-table-column>
-      <slot v-else name="operation"> </slot>
     </el-table>
     <el-drawer :visible.sync="drawer" size="25%" title="操作列" append-to-body>
       <el-row :gutter="20" style="margin: 0">
         <el-draggable
           v-model="innerColumns"
           :group="{ item: 'key' }"
-          @change="changeColumns"
+          @change="setColumns"
         >
           <el-col
             v-for="({ item }, index) in innerColumns"
@@ -246,7 +238,7 @@ export default {
                 v-model="item.hidden"
                 :size="$attrs.size"
                 style="margin: 0 15px 0 0"
-                @change="changeColumns"
+                @change="setColumns"
               >
                 <el-radio-button :label="true">显</el-radio-button>
                 <el-radio-button :label="false">隐</el-radio-button>
@@ -254,7 +246,7 @@ export default {
               <el-radio-group
                 v-model="item.fixed"
                 :size="$attrs.size"
-                @change="changeColumns"
+                @change="setColumns"
               >
                 <el-radio-button :label="false">不</el-radio-button>
                 <el-radio-button label="left">左</el-radio-button>
@@ -271,18 +263,25 @@ export default {
         :style="{ left: left + 'px', top: top + 'px' }"
         class="el-super-table_contextmenu"
       >
-        <li><i class="el-icon-refresh-right"></i> 刷新页面</li>
-        <li><i class="el-icon-close"></i> 关闭当前</li>
-        <li><i class="el-icon-circle-close"></i> 关闭其他</li>
-        <li><i class="el-icon-back"></i> 关闭左侧</li>
-        <li><i class="el-icon-right"></i> 关闭右侧</li>
-        <li><i class="el-icon-circle-close"></i> 全部关闭</li>
+        <li v-if="hideOperationColumns" @click="drawer = true">
+          <i class="el-icon-setting"></i>
+          <span>设置布局</span>
+        </li>
+        <li v-if="hideOperationColumns" @click="resetColumns">
+          <i class="el-icon-refresh"></i>
+          <span>重置布局</span>
+        </li>
+        <slot name="contextmenu" v-bind="currentData"> </slot>
       </ul>
     </transition>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.el-super-table .el-table {
+  overflow: hidden;
+  border-radius: 5px;
+}
 .el-super-table_contextmenu {
   margin: 0;
   background: #fff;
@@ -294,13 +293,16 @@ export default {
   font-size: 12px;
   font-weight: 400;
   color: #333;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   li {
     margin: 0;
     padding: 7px 16px;
     cursor: pointer;
     &:hover {
-      background: #eee;
+      background: #ddd;
+    }
+    span {
+      margin: 0 0 0 5px;
     }
   }
 }

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

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

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

@@ -1,5 +1,5 @@
 <script>
-import { TabColumns, TableColumns } from "./columns";
+import useColumns from "./columns";
 import { REFER } from "@/components/popover-select/api";
 import { EXIST } from "@/api/business/purchase/catalogue";
 import { ITEM, SAVE } from "@/api/business/purchase/apply";
@@ -71,15 +71,18 @@ export default {
   components: {
     ElSuperForm: () => import("@/components/super-form/index.vue"),
     ElSuperTable: () => import("@/components/super-table/index.vue"),
-    ElComputedInput: () => import("@/components/computed-input/index.vue"),
     ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
   },
   data() {
-    const [
-      {
-        item: { key: tabName },
-      },
-    ] = TabColumns;
+    const {
+      TabColumns,
+      TableColumns,
+      TabColumns: [
+        {
+          item: { key: tabName },
+        },
+      ],
+    } = useColumns();
     const rules = this.$init.rules([...TabColumns, ...TableColumns]);
     const params = this.$init.params([...TabColumns, ...TableColumns]);
     return {
@@ -144,12 +147,12 @@ export default {
           params: { priceApplyOrgs, priceApplyItems },
         } = this;
         return {
-          priceApplyOrgs: priceApplyOrgs.filter(
-            ({ delFlag }) => delFlag !== "2"
-          ),
-          priceApplyItems: priceApplyItems.filter(
-            ({ delFlag }) => delFlag !== "2"
-          ),
+          priceApplyOrgs: priceApplyOrgs
+            .map((item, index) => ({ ...item, $index, index }))
+            .filter(({ delFlag }) => delFlag !== "2"),
+          priceApplyItems: priceApplyItems
+            .map((item, index) => ({ ...item, $index, index }))
+            .filter(({ delFlag }) => delFlag !== "2"),
         };
       },
       set() {},
@@ -158,17 +161,6 @@ export default {
   watch: {},
   methods: {
     //
-    rowClassName(prop) {
-      const {
-        row: { delFlag },
-      } = prop;
-      if (delFlag === "2") {
-        return "is-hidden";
-      } else {
-        return "";
-      }
-    },
-    //
     changePuOrgName(prop) {
       const {
         select: { id: org, code: orgCode, name: orgName },
@@ -270,27 +262,29 @@ export default {
         const [{ id }] = selectData;
         this.visible = await this.fetchItem(id);
         this.params.priceApplyItems = this.params.priceApplyItems.map(
-          (item, index) => ({
-            ...item,
-            $index: index,
-          })
-        );
-        this.params.priceApplyOrgs = this.params.priceApplyOrgs.map(
-          (item, index) => ({
+          (item) => ({
             ...item,
-            $index: index,
           })
         );
+        this.params.priceApplyOrgs = this.params.priceApplyOrgs.map((item) => ({
+          ...item,
+        }));
       }
     },
     //
     async hide() {
-      const { TabColumns, TableColumns } = this;
+      const {
+        TabColumns,
+        TableColumns,
+        TabColumns: [
+          {
+            item: { key: tabName },
+          },
+        ],
+      } = useColumns();
       this.visible = false;
-      this.tabName = TabColumns[0].item.key;
+      this.tabName = tabName;
       this.params = this.$init.params([...TabColumns, ...TableColumns]);
-      this.params.priceApplyOrgs = [];
-      this.params.priceApplyItems = [];
     },
     //
     async useRowAdd(prop) {
@@ -427,7 +421,6 @@ export default {
             :ref="tabName"
             :columns="columns"
             :size="$attrs.size"
-            :row-class-name="rowClassName"
           >
             <template slot="materialName" slot-scope="scope">
               <component
@@ -439,12 +432,7 @@ export default {
               >
               </component>
             </template>
-            <el-table-column
-              slot="operation"
-              fixed="right"
-              label="操作"
-              width="100"
-            >
+            <el-table-column fixed="right" label="操作" width="75">
               <template slot="header" slot-scope="scope">
                 <el-button
                   circle

src/views/purchase/apply/columns.js

@@ -1,106 +1,109 @@
-export const TableColumns = [
-  { item: { key: "priceName", title: "价格名称" }, attr: {} },
-  { item: { key: "priceCode", title: "价格编码" }, attr: {} },
-  {
-    item: { key: "status", title: "状态" },
-    attr: { is: "el-dict-tag", dictName: "sys_status" },
-  },
-  { item: { key: "supplierName", title: "供应商" }, attr: {} },
-  { item: { key: "currencyName", title: "币种" }, attr: {} },
-  {
-    item: { key: "explainStr", title: "价格合理性说明" },
-    attr: {},
-  },
-  { item: { key: "buyerName", title: "采购员" }, attr: {} },
-  { item: { key: "puDeptName", title: "采购部门" }, attr: {} },
-  {
-    item: { key: "file", title: "附件" },
-    attr: { is: "el-file-preview" },
-  },
-  { item: { key: "createByName", title: "创建人" }, attr: {} },
-  {
-    item: { key: "isEffective", title: "是否已推价格" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "effectiveDate", title: "生效日期" },
-    attr: {},
-  },
-  { item: { key: "source", title: "来源单据号" }, attr: {} },
-  {
-    item: { key: "sourceType", title: "来源单据类型" },
-    attr: {},
-  },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, fixed: false },
-}));
+import CONFIG from "@/config";
 
-export const SearchColumns = [
-  {
-    item: { key: "supplierName", title: "供应商" },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "SUPPLIER_PARAM",
-      valueKey: "name",
-      dataMapping: { supplier: "id", supplierName: "name" },
+export default function useColumns() {
+  const TableColumns = [
+    { item: { key: "priceName", title: "价格名称" }, attr: {} },
+    { item: { key: "priceCode", title: "价格编码" }, attr: {} },
+    {
+      item: { key: "status", title: "状态" },
+      attr: { is: "el-dict-tag", dictName: "sys_status" },
     },
-  },
-  {
-    item: { key: "puOrgName", title: "采购组织" },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "ORG_PARAM",
-      valueKey: "name",
-      dataMapping: { puOrg: "id", puOrgName: "name" },
+    { item: { key: "supplierName", title: "供应商" }, attr: {} },
+    { item: { key: "currencyName", title: "币种" }, attr: {} },
+    {
+      item: { key: "explainStr", title: "价格合理性说明" },
+      attr: {},
     },
-  },
-  {
-    item: { key: "buyerName", title: "采购员" },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "CONTACTS_PARAM",
-      valueKey: "name",
-      dataMapping: { buyer: "code", buyerName: "name" },
+    { item: { key: "buyerName", title: "采购员" }, attr: {} },
+    { item: { key: "puDeptName", title: "采购部门" }, attr: {} },
+    {
+      item: { key: "file", title: "附件" },
+      attr: { is: "el-file-preview" },
     },
-  },
-  {
-    item: { key: "currencyName", title: "币种" },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "CURRENCY_PARAM",
-      valueKey: "name",
-      dataMapping: { currency: "id", currencyName: "name" },
+    { item: { key: "createByName", title: "创建人" }, attr: {} },
+    {
+      item: { key: "isEffective", title: "是否已推价格" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
     },
-  },
-  {
-    item: { key: "puDeptName", title: "采购部门" },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "DEPT_PARAM",
-      valueKey: "name",
-      dataMapping: { puDept: "id", puDeptName: "name" },
+    {
+      item: { key: "effectiveDate", title: "生效日期" },
+      attr: {},
     },
-  },
-  {
-    item: { key: "isEffective", title: "是否推价" },
-    attr: {
-      is: "el-select",
-      dictName: "is_effective",
-      clearable: true,
+    { item: { key: "source", title: "来源单据号" }, attr: {} },
+    {
+      item: { key: "sourceType", title: "来源单据类型" },
+      attr: {},
     },
-  },
-  {
-    item: { key: "status", title: "状态" },
-    attr: {
-      is: "el-select",
-      dictName: "sys_status",
-      clearable: true,
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, fixed: false },
+  }));
+  const SearchColumns = [
+    {
+      item: { key: "supplierName", title: "供应商" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "SUPPLIER_PARAM",
+        valueKey: "name",
+        dataMapping: { supplier: "id", supplierName: "name" },
+      },
     },
-  },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, span: item.span || 6 },
-}));
+    {
+      item: { key: "puOrgName", title: "采购组织" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "ORG_PARAM",
+        valueKey: "name",
+        dataMapping: { puOrg: "id", puOrgName: "name" },
+      },
+    },
+    {
+      item: { key: "buyerName", title: "采购员" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        dataMapping: { buyer: "code", buyerName: "name" },
+      },
+    },
+    {
+      item: { key: "currencyName", title: "币种" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CURRENCY_PARAM",
+        valueKey: "name",
+        dataMapping: { currency: "id", currencyName: "name" },
+      },
+    },
+    {
+      item: { key: "puDeptName", title: "采购部门" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "DEPT_PARAM",
+        valueKey: "name",
+        dataMapping: { puDept: "id", puDeptName: "name" },
+      },
+    },
+    {
+      item: { key: "isEffective", title: "是否推价" },
+      attr: {
+        is: "el-select",
+        dictName: "is_effective",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "status", title: "状态" },
+      attr: {
+        is: "el-select",
+        dictName: "sys_status",
+        clearable: true,
+      },
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, span: item.span || 6 },
+  }));
 
-export default { TableColumns, SearchColumns };
+  return { TableColumns, SearchColumns };
+}

src/views/purchase/apply/dicts.js

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

src/views/purchase/apply/index.vue

@@ -1,7 +1,7 @@
 <script>
 import { dicts } from "./dicts";
+import useColumns from "./columns";
 import { LIST } from "@/api/business/purchase/apply";
-import { TableColumns, SearchColumns } from "./columns";
 
 export default {
   name: "PuchaseApply",
@@ -15,6 +15,7 @@ export default {
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
   },
   data() {
+    const { TableColumns, SearchColumns } = useColumns();
     const params = this.$init.params(SearchColumns);
     return {
       size: "mini",
@@ -65,7 +66,7 @@ export default {
     useReset() {
       this.page.pageNum = 1;
       this.page.pageSize = 10;
-      this.params = this.$init.params(SearchColumns);
+      this.params = this.$init.params(this.SearchColumns);
       this.useQuery(this.params, this.page);
     },
     // 选 择
@@ -74,9 +75,8 @@ export default {
     },
     // 明 细
     async useSee(prop) {
-      const { $index } = prop;
       const { open } = this.$refs.SeeButton;
-      await open($index);
+      await open([prop]);
     },
   },
 };
@@ -92,7 +92,7 @@ export default {
       @reset="useReset"
       @submit="useQuery(params, page)"
     ></el-super-search>
-    <div style="padding: 0 20px; text-align: right">
+    <div style="margin: 0 0 20px 0; text-align: right">
       <el-button-group>
         <add-button
           :size="size"
@@ -115,6 +115,7 @@ export default {
           v-show="false"
           :size="size"
           :dict="dict"
+          :model="params"
           :select-data="selectData"
           ref="SeeButton"
           @success="useQuery(params, page)"
@@ -150,6 +151,8 @@ export default {
       @row-dblclick="useSee"
       @selection-change="useSelect"
     >
+      <el-table-column fixed width="55" align="center" label="#" prop="$index">
+      </el-table-column>
       <el-table-column fixed width="55" align="center" type="selection">
       </el-table-column>
     </el-super-table>
@@ -158,7 +161,7 @@ export default {
       :page.sync="page.pageNum"
       :limit.sync="page.pageSize"
       @pagination="useQuery(params, page)"
-      style="margin: 20px"
+      style="height: 32px; margin: 20px 0 0 0; padding: 0 !important"
     />
   </el-card>
 </template>
@@ -167,7 +170,7 @@ export default {
   width: calc(100% - 20px);
   height: 100%;
   margin: 10px;
-  padding: 0 0 20px 0;
+  padding: 20px;
 }
 .el-button-group + .el-button-group {
   margin: 0 0 0 10px;

src/views/purchase/apply/see/columns.js

@@ -1,208 +1,210 @@
 import CONFIG from "@/config";
 
-export const TableColumns = [
-  {
-    item: { key: "priceName", title: "价格名称" },
-    attr: {},
-  },
-  {
-    item: { key: "priceCode", title: "价格编码" },
-    attr: {},
-  },
-  {
-    item: { key: "supplierName", title: "供应商" },
-    attr: {},
-  },
-  {
-    item: { key: "puOrgName", title: "采购组织" },
-    attr: {},
-  },
-  {
-    item: { key: "currencyName", title: "币种" },
-    attr: {},
-  },
-  {
-    item: { key: "explainStr", title: "价格合理性说明" },
-    attr: {},
-  },
-  {
-    item: { key: "buyerName", title: "采购员" },
-    attr: {},
-  },
-  {
-    item: { key: "puDeptName", title: "采购部门" },
-    attr: {},
-  },
-  {
-    item: { key: "createByName", title: "创建人" },
-    attr: {},
-  },
-  {
-    item: { key: "source", title: "来源单据号" },
-    attr: {},
-  },
-  {
-    item: { key: "isEffective", title: "是否已推价格" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "is_effective",
-    },
-  },
-  {
-    item: { key: "effectiveDate", title: "生效日期" },
-    attr: {},
-  },
-  {
-    item: { key: "file", title: "附件" },
-    attr: { is: "el-file-preview" },
-  },
-  {
-    item: { key: "sourceType", title: "来源单据类型" },
-    attr: {},
-  },
-  {
-    item: { key: "status", title: "单据状态" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "sys_status",
-    },
-  },
-];
-
-export const TabColumns = [
-  {
-    item: {
-      title: "物料信息表",
-      key: "priceApplyItems",
-    },
-    attr: {
-      value: [],
-    },
-    TableColumns: [
-      {
-        item: { key: "materialName", title: "物料名称" },
-        attr: {},
-      },
-      { item: { key: "materialCode", title: "物料编码" }, attr: {} },
-      { item: { key: "manufacturerName", title: "生产厂家" }, attr: {} },
-      { item: { key: "specification", title: "规格" }, attr: {} },
-      { item: { key: "model", title: "型号" }, attr: {} },
-      {
-        item: { key: "unitName", title: "单位" },
-        attr: {},
+export default function useColumns() {
+  const TableColumns = [
+    {
+      item: { key: "priceName", title: "价格名称" },
+      attr: {},
+    },
+    {
+      item: { key: "priceCode", title: "价格编码" },
+      attr: {},
+    },
+    {
+      item: { key: "supplierName", title: "供应商" },
+      attr: {},
+    },
+    {
+      item: { key: "puOrgName", title: "采购组织" },
+      attr: {},
+    },
+    {
+      item: { key: "currencyName", title: "币种" },
+      attr: {},
+    },
+    {
+      item: { key: "explainStr", title: "价格合理性说明" },
+      attr: {},
+    },
+    {
+      item: { key: "buyerName", title: "采购员" },
+      attr: {},
+    },
+    {
+      item: { key: "puDeptName", title: "采购部门" },
+      attr: {},
+    },
+    {
+      item: { key: "createByName", title: "创建人" },
+      attr: {},
+    },
+    {
+      item: { key: "source", title: "来源单据号" },
+      attr: {},
+    },
+    {
+      item: { key: "isEffective", title: "是否已推价格" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "is_effective",
       },
-      {
-        item: { key: "puUnitName", title: "采购单位" },
-        attr: {},
+    },
+    {
+      item: { key: "effectiveDate", title: "生效日期" },
+      attr: {},
+    },
+    {
+      item: { key: "file", title: "附件" },
+      attr: { is: "el-file-preview" },
+    },
+    {
+      item: { key: "sourceType", title: "来源单据类型" },
+      attr: {},
+    },
+    {
+      item: { key: "status", title: "单据状态" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "sys_status",
       },
-      {
-        item: { key: "conversionRate", title: "采购换算率" },
-        attr: {
-          is: "el-computed-input-v2",
-          formatter: (prop) => {
-            return (prop * 1).toFixed(CONFIG.precision);
+    },
+  ];
+
+  const TabColumns = [
+    {
+      item: {
+        title: "物料信息表",
+        key: "priceApplyItems",
+      },
+      attr: {
+        value: [],
+      },
+      TableColumns: [
+        {
+          item: { key: "materialName", title: "物料名称" },
+          attr: {},
+        },
+        { item: { key: "materialCode", title: "物料编码" }, attr: {} },
+        { item: { key: "manufacturerName", title: "生产厂家" }, attr: {} },
+        { item: { key: "specification", title: "规格" }, attr: {} },
+        { item: { key: "model", title: "型号" }, attr: {} },
+        {
+          item: { key: "unitName", title: "单位" },
+          attr: {},
+        },
+        {
+          item: { key: "puUnitName", title: "采购单位" },
+          attr: {},
+        },
+        {
+          item: { key: "conversionRate", title: "采购换算率" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
           },
         },
-      },
-      {
-        item: { key: "tax", title: "税率%" },
-        attr: {
-          is: "el-computed-input-v2",
-          formatter: (prop) => {
-            return (prop * 1).toFixed(CONFIG.precision);
+        {
+          item: { key: "tax", title: "税率%" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
           },
         },
-      },
-      {
-        item: { key: "taxPrice", title: "含税单价" },
-        attr: {
-          is: "el-computed-input-v2",
-          formatter: (prop) => {
-            return (prop * 1).toFixed(CONFIG.precision);
+        {
+          item: { key: "taxPrice", title: "含税单价" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
           },
         },
-      },
-      {
-        item: { key: "price", title: "无税单价" },
-        attr: {
-          is: "el-computed-input-v2",
-          formatter: (prop) => {
-            return (prop * 1).toFixed(CONFIG.precision);
+        {
+          item: { key: "price", title: "无税单价" },
+          attr: {
+            is: "el-computed-input-v2",
+            formatter: (prop) => {
+              return (prop * 1).toFixed(CONFIG.precision);
+            },
           },
         },
-      },
-      {
-        item: { key: "currencyName", title: "币种" },
-        attr: {},
-      },
-      {
-        item: { key: "periodBegin", title: "价格有效期（起）" },
-        attr: {},
-      },
-      {
-        item: { key: "periodEnd", title: "价格有效期（止）" },
-        attr: {},
-      },
-      {
-        item: { key: "customerName", title: "客户" },
-        attr: {},
-      },
-      { item: { key: "recentlyPrice", title: "最近价格" }, attr: {} },
-      {
-        item: { key: "isApprovalFirst", title: "首次报批" },
-        attr: {
-          is: "el-dict-tag",
-          dictName: "is_effective",
+        {
+          item: { key: "currencyName", title: "币种" },
+          attr: {},
         },
-      },
-      {
-        item: { key: "isPriceAdjustment", title: "价格调整" },
-        attr: {
-          is: "el-dict-tag",
-          dictName: "is_effective",
+        {
+          item: { key: "periodBegin", title: "价格有效期（起）" },
+          attr: {},
         },
-      },
-      {
-        item: { key: "priceType", title: "价格类型" },
-        attr: {
-          is: "el-dict-tag",
-          dictName: "sys_price_type",
+        {
+          item: { key: "periodEnd", title: "价格有效期（止）" },
+          attr: {},
         },
-      },
-      {
-        item: { key: "isDistributionPrice", title: "配送价" },
-        attr: {
-          is: "el-dict-tag",
-          dictName: "is_effective",
+        {
+          item: { key: "customerName", title: "客户" },
+          attr: {},
         },
-      },
-      { item: { key: "createByName", title: "创建人名称" }, attr: {} },
-      { item: { key: "updateByName", title: "更新人名称" }, attr: {} },
-    ],
-  },
-  {
-    item: {
-      title: "合同执行组织范围",
-      key: "priceApplyOrgs",
-    },
-    attr: {
-      value: [],
-    },
-    TableColumns: [
-      {
-        item: { key: "orgName", title: "组织", width: "auto" },
-        attr: {},
-      },
-      {
-        item: { key: "createByName", title: "创建人名称", width: "auto" },
-        attr: {},
-      },
-      {
-        item: { key: "updateByName", title: "更新人名称", width: "auto" },
-        attr: {},
-      },
-    ],
-  },
-];
+        { item: { key: "recentlyPrice", title: "最近价格" }, attr: {} },
+        {
+          item: { key: "isApprovalFirst", title: "首次报批" },
+          attr: {
+            is: "el-dict-tag",
+            dictName: "is_effective",
+          },
+        },
+        {
+          item: { key: "isPriceAdjustment", title: "价格调整" },
+          attr: {
+            is: "el-dict-tag",
+            dictName: "is_effective",
+          },
+        },
+        {
+          item: { key: "priceType", title: "价格类型" },
+          attr: {
+            is: "el-dict-tag",
+            dictName: "sys_price_type",
+          },
+        },
+        {
+          item: { key: "isDistributionPrice", title: "配送价" },
+          attr: {
+            is: "el-dict-tag",
+            dictName: "is_effective",
+          },
+        },
+        { item: { key: "createByName", title: "创建人名称" }, attr: {} },
+        { item: { key: "updateByName", title: "更新人名称" }, attr: {} },
+      ],
+    },
+    {
+      item: {
+        title: "合同执行组织范围",
+        key: "priceApplyOrgs",
+      },
+      attr: {
+        value: [],
+      },
+      TableColumns: [
+        {
+          item: { key: "orgName", title: "组织", width: "auto" },
+          attr: {},
+        },
+        {
+          item: { key: "createByName", title: "创建人名称", width: "auto" },
+          attr: {},
+        },
+        {
+          item: { key: "updateByName", title: "更新人名称", width: "auto" },
+          attr: {},
+        },
+      ],
+    },
+  ];
 
-export default { TableColumns, TabColumns };
+  return { TableColumns, TabColumns };
+}

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

@@ -1,5 +1,5 @@
 <script>
-import { TabColumns, TableColumns } from "./columns";
+import useColumns from "./columns";
 import { ITEM, LIST } from "@/api/business/purchase/apply";
 
 export default {
@@ -10,11 +10,15 @@ export default {
     ElSuperTable: () => import("@/components/super-table/index.vue"),
   },
   data() {
-    const [
-      {
-        item: { key: tabName },
-      },
-    ] = TabColumns;
+    const {
+      TabColumns,
+      TableColumns,
+      TabColumns: [
+        {
+          item: { key: tabName },
+        },
+      ],
+    } = useColumns();
     return {
       width: "50%",
       column: 2,
@@ -31,6 +35,9 @@ export default {
     dict: {
       type: Object,
     },
+    model: {
+      type: Object,
+    },
     selectData: {
       type: [Array],
       require: true,
@@ -54,11 +61,11 @@ export default {
       try {
         // try
         this.loading = true;
-        const { params } = this.$parent.$parent.$parent;
+        const { model } = this.$props;
         const {
           total,
           rows: [{ id }],
-        } = await LIST({ ...params }, { pageNum: prop, pageSize: 1 });
+        } = await LIST({ ...model }, { pageNum: prop, pageSize: 1 });
         const { code, data } = await ITEM(id);
         if (code === 200) {
           this.params = data;
@@ -78,14 +85,20 @@ export default {
     },
     //
     async open(prop) {
-      this.visible = await this.fetchItem(prop);
+      const [{ $index }] = prop;
+      this.visible = await this.fetchItem($index);
     },
     //
     async hide() {
-      const { TabColumns, TableColumns, initParams } = this;
+      const {
+        TabColumns: [
+          {
+            item: { key: tabName },
+          },
+        ],
+      } = useColumns();
       this.visible = false;
-      this.tabName = TabColumns[0].item.key;
-      this.params = initParams([...TabColumns, ...TableColumns]);
+      this.tabName = tabName;
     },
   },
   created() {},
@@ -98,7 +111,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
     :disabled="disabled"
-    @click="open(selectData[0].$index)"
+    @click="open"
   >
     {{ title }}
     <el-drawer
@@ -106,6 +119,7 @@ export default {
       :title="title"
       :visible.sync="visible"
       append-to-body
+      @close="hide(selectData)"
     >
       <div
         style="

src/views/purchase/catalogue/columns.js

@@ -1,129 +1,131 @@
 import CONFIG from "@/config";
 
-export const TableColumns = [
-  {
-    item: { key: "puOrgName", title: "采购组织" },
-    attr: {},
-  },
-  { item: { key: "materialName", title: "物料" }, attr: {} },
-  { item: { key: "materialCode", title: "物料编码" }, attr: {} },
-  { item: { key: "materialClassifyName", title: "物料一级分类" }, attr: {} },
-  { item: { key: "manufacturerName", title: "生产厂家名称" }, attr: {} },
-  { item: { key: "model", title: "物料型号" }, attr: {} },
-  { item: { key: "specification", title: "物料规格" }, attr: {} },
-  {
-    item: { key: "supplierName", title: "供应商名称" },
-    attr: {},
-  },
-  { item: { key: "customerName", title: "客户" }, attr: {} },
-  {
-    item: { key: "taxPrice", title: "主含税单价" },
-    attr: {
-      is: "el-computed-input-v2",
-      formatter: (prop) => {
-        return (prop * 1).toFixed(CONFIG.precision);
+export default function useColumns() {
+  const TableColumns = [
+    {
+      item: { key: "puOrgName", title: "采购组织" },
+      attr: {},
+    },
+    { item: { key: "materialName", title: "物料" }, attr: {} },
+    { item: { key: "materialCode", title: "物料编码" }, attr: {} },
+    { item: { key: "materialClassifyName", title: "物料一级分类" }, attr: {} },
+    { item: { key: "manufacturerName", title: "生产厂家名称" }, attr: {} },
+    { item: { key: "model", title: "物料型号" }, attr: {} },
+    { item: { key: "specification", title: "物料规格" }, attr: {} },
+    {
+      item: { key: "supplierName", title: "供应商名称" },
+      attr: {},
+    },
+    { item: { key: "customerName", title: "客户" }, attr: {} },
+    {
+      item: { key: "taxPrice", title: "主含税单价" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
       },
     },
-  },
-  { item: { key: "unitName", title: "主单位" }, attr: {} },
-  { item: { key: "effectiveDate", title: "价格生效日期" }, attr: {} },
-  { item: { key: "endDate", title: "价格失效日期" }, attr: {} },
-  { item: { key: "buyerName", title: "采购员" }, attr: {} },
-  { item: { key: "source", title: "来源单据" }, attr: {} },
-  {
-    item: { key: "convertRate", title: "换算率" },
-    attr: {
-      is: "el-computed-input-v2",
-      formatter: (prop) => {
-        return (prop * 1).toFixed(CONFIG.precision);
+    { item: { key: "unitName", title: "主单位" }, attr: {} },
+    { item: { key: "effectiveDate", title: "价格生效日期" }, attr: {} },
+    { item: { key: "endDate", title: "价格失效日期" }, attr: {} },
+    { item: { key: "buyerName", title: "采购员" }, attr: {} },
+    { item: { key: "source", title: "来源单据" }, attr: {} },
+    {
+      item: { key: "convertRate", title: "换算率" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
       },
     },
-  },
-  {
-    item: { key: "status", title: "有效状态" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "enableStatus", title: "启用状态" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "materialStatus", title: "物料启用状态" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "isDistribution", title: "配送价" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "priceType", title: "价格类型" },
-    attr: { is: "el-dict-tag", dictName: "sys_price_type" },
-  },
-  { item: { key: "demandCode", title: "采购需求单号" }, attr: {} },
-  { item: { key: "expiryEarly", title: "效期预警" }, attr: {} },
-  { item: { key: "priority", title: "含税/无税优先" }, attr: {} },
-  { item: { key: "createByName", title: "创建人" }, attr: {} },
-  { item: { key: "updateByName", title: "更新人名称" }, attr: {} },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, fixed: false },
-}));
+    {
+      item: { key: "status", title: "有效状态" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
+    },
+    {
+      item: { key: "enableStatus", title: "启用状态" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
+    },
+    {
+      item: { key: "materialStatus", title: "物料启用状态" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
+    },
+    {
+      item: { key: "isDistribution", title: "配送价" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
+    },
+    {
+      item: { key: "priceType", title: "价格类型" },
+      attr: { is: "el-dict-tag", dictName: "sys_price_type" },
+    },
+    { item: { key: "demandCode", title: "采购需求单号" }, attr: {} },
+    { item: { key: "expiryEarly", title: "效期预警" }, attr: {} },
+    { item: { key: "priority", title: "含税/无税优先" }, attr: {} },
+    { item: { key: "createByName", title: "创建人" }, attr: {} },
+    { item: { key: "updateByName", title: "更新人名称" }, attr: {} },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, fixed: false },
+  }));
 
-export const SearchColumns = [
-  {
-    item: { key: "puOrgName", title: "采购组织" },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "ORG_PARAM",
-      valueKey: "name",
-      dataMapping: {
-        puOrg: "id",
-        puOrgName: "name",
+  const SearchColumns = [
+    {
+      item: { key: "puOrgName", title: "采购组织" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "ORG_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          puOrg: "id",
+          puOrgName: "name",
+        },
       },
     },
-  },
-  {
-    item: { key: "manufacturer", title: "生产厂家" },
-    attr: { is: "el-input" },
-  },
-  {
-    item: { key: "supplierName", title: "供应商" },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "SUPPLIER_PARAM",
-      valueKey: "name",
-      dataMapping: {
-        supplier: "id",
-        supplierName: "name",
+    {
+      item: { key: "manufacturer", title: "生产厂家" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "supplierName", title: "供应商" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "SUPPLIER_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          supplier: "id",
+          supplierName: "name",
+        },
       },
     },
-  },
-  {
-    item: { key: "source", title: "来源单据" },
-    attr: { is: "el-input" },
-  },
-  {
-    item: { key: "materialCode", title: "物料编码" },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "MATERIAL_PARAM",
-      dataMapping: {
-        material: "id",
-        materialCode: "code",
+    {
+      item: { key: "source", title: "来源单据" },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "materialCode", title: "物料编码" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "MATERIAL_PARAM",
+        dataMapping: {
+          material: "id",
+          materialCode: "code",
+        },
       },
     },
-  },
-  {
-    item: { key: "status", title: "有效状态" },
-    attr: { is: "el-select", dictName: "is_effective" },
-  },
-  {
-    item: { key: "enableStatus", title: "启用状态" },
-    attr: { is: "el-select", dictName: "is_effective" },
-  },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, span: item.span || 6 },
-}));
+    {
+      item: { key: "status", title: "有效状态" },
+      attr: { is: "el-select", dictName: "is_effective" },
+    },
+    {
+      item: { key: "enableStatus", title: "启用状态" },
+      attr: { is: "el-select", dictName: "is_effective" },
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, span: item.span || 6 },
+  }));
 
-export default { TableColumns, SearchColumns };
+  return { TableColumns, SearchColumns };
+}

src/views/purchase/catalogue/dicts.js

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

src/views/purchase/catalogue/index.vue

@@ -1,6 +1,6 @@
 <script>
 import { dicts } from "./dicts";
-import { TableColumns, SearchColumns } from "./columns";
+import useColumns from "./columns";
 import { LIST } from "@/api/business/purchase/catalogue";
 
 export default {
@@ -15,6 +15,7 @@ export default {
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
   },
   data() {
+    const { TableColumns, SearchColumns } = useColumns();
     const params = this.$init.params(SearchColumns);
     return {
       size: "mini",
@@ -22,8 +23,8 @@ export default {
       params: params,
       tableData: [],
       selectData: [],
-      SearchColumns: SearchColumns,
       TableColumns: TableColumns,
+      SearchColumns: SearchColumns,
       page: { pageNum: 1, pageSize: 10, total: 0 },
     };
   },
@@ -64,7 +65,7 @@ export default {
     useReset() {
       this.page.pageNum = 1;
       this.page.pageSize = 10;
-      this.params = this.$init.params(SearchColumns);
+      this.params = this.$init.params(this.SearchColumns);
       this.useQuery(this.params, this.page);
     },
     // 选 择
@@ -73,9 +74,8 @@ export default {
     },
     // 明 细
     async useSee(prop) {
-      const { $index } = prop;
       const { open } = this.$refs.SeeButton;
-      await open($index);
+      await open([prop]);
     },
   },
 };
@@ -91,7 +91,7 @@ export default {
       @reset="useReset"
       @submit="useQuery(params, page)"
     ></el-super-search>
-    <div style="padding: 0 20px; text-align: right">
+    <div style="margin: 0 0 20px 0; text-align: right">
       <el-button-group>
         <ena-button
           :size="size"
@@ -108,6 +108,7 @@ export default {
       </el-button-group>
       <el-button-group>
         <inv-button
+          ref="InvButton"
           :size="size"
           :select-data="selectData"
           @success="useQuery(params, page)"
@@ -140,6 +141,8 @@ export default {
       @row-dblclick="useSee"
       @selection-change="useSelect"
     >
+      <el-table-column fixed width="55" align="center" label="#" prop="$index">
+      </el-table-column>
       <el-table-column fixed width="55" align="center" type="selection">
       </el-table-column>
     </el-super-table>
@@ -148,7 +151,7 @@ export default {
       :page.sync="page.pageNum"
       :limit.sync="page.pageSize"
       @pagination="useQuery(params, page)"
-      style="margin: 20px"
+      style="height: 32px; margin: 20px 0 0 0; padding: 0 !important"
     />
   </el-card>
 </template>
@@ -157,7 +160,7 @@ export default {
   width: calc(100% - 20px);
   height: 100%;
   margin: 10px;
-  padding: 0 0 20px 0;
+  padding: 20px;
 }
 .el-button-group + .el-button-group {
   margin: 0 0 0 10px;

src/views/purchase/catalogue/see/columns.js

@@ -1,72 +1,73 @@
 import CONFIG from "@/config";
 
-export const TableColumns = [
-  {
-    item: { key: "puOrgName", title: "采购组织" },
-    attr: {},
-  },
-  { item: { key: "materialName", title: "物料" }, attr: {} },
-  { item: { key: "materialCode", title: "物料编码" }, attr: {} },
-  { item: { key: "materialClassifyName", title: "物料一级分类" }, attr: {} },
-  { item: { key: "manufacturerName", title: "生产厂家名称" }, attr: {} },
-  { item: { key: "model", title: "物料型号" }, attr: {} },
-  { item: { key: "specification", title: "物料规格" }, attr: {} },
-  {
-    item: { key: "supplierName", title: "供应商名称" },
-    attr: {},
-  },
-  { item: { key: "customerName", title: "客户" }, attr: {} },
-  {
-    item: { key: "taxPrice", title: "主含税单价" },
-    attr: {
-      is: "el-computed-input-v2",
-      formatter: (prop) => {
-        return (prop * 1).toFixed(CONFIG.precision);
+export default function useColumns() {
+  const TableColumns = [
+    {
+      item: { key: "puOrgName", title: "采购组织" },
+      attr: {},
+    },
+    { item: { key: "materialName", title: "物料" }, attr: {} },
+    { item: { key: "materialCode", title: "物料编码" }, attr: {} },
+    { item: { key: "materialClassifyName", title: "物料一级分类" }, attr: {} },
+    { item: { key: "manufacturerName", title: "生产厂家名称" }, attr: {} },
+    { item: { key: "model", title: "物料型号" }, attr: {} },
+    { item: { key: "specification", title: "物料规格" }, attr: {} },
+    {
+      item: { key: "supplierName", title: "供应商名称" },
+      attr: {},
+    },
+    { item: { key: "customerName", title: "客户" }, attr: {} },
+    {
+      item: { key: "taxPrice", title: "主含税单价" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
       },
     },
-  },
-  { item: { key: "unitName", title: "主单位" }, attr: {} },
-  { item: { key: "effectiveDate", title: "价格生效日期" }, attr: {} },
-  { item: { key: "endDate", title: "价格失效日期" }, attr: {} },
-  { item: { key: "buyerName", title: "采购员" }, attr: {} },
-  { item: { key: "source", title: "来源单据" }, attr: {} },
-  {
-    item: { key: "convertRate", title: "换算率" },
-    attr: {
-      is: "el-computed-input-v2",
-      formatter: (prop) => {
-        return (prop * 1).toFixed(CONFIG.precision);
+    { item: { key: "unitName", title: "主单位" }, attr: {} },
+    { item: { key: "effectiveDate", title: "价格生效日期" }, attr: {} },
+    { item: { key: "endDate", title: "价格失效日期" }, attr: {} },
+    { item: { key: "buyerName", title: "采购员" }, attr: {} },
+    { item: { key: "source", title: "来源单据" }, attr: {} },
+    {
+      item: { key: "convertRate", title: "换算率" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
       },
     },
-  },
-  {
-    item: { key: "status", title: "有效状态" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "enableStatus", title: "启用状态" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "materialStatus", title: "物料启用状态" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "isDistribution", title: "配送价" },
-    attr: { is: "el-dict-tag", dictName: "is_effective" },
-  },
-  {
-    item: { key: "priceType", title: "价格类型" },
-    attr: { is: "el-dict-tag", dictName: "sys_price_type" },
-  },
-  { item: { key: "demandCode", title: "采购需求单号" }, attr: {} },
-  { item: { key: "expiryEarly", title: "效期预警" }, attr: {} },
-  { item: { key: "priority", title: "含税/无税优先" }, attr: {} },
-  { item: { key: "createByName", title: "创建人" }, attr: {} },
-  { item: { key: "updateByName", title: "更新人名称" }, attr: {} },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, fixed: false },
-}));
-
-export default { TableColumns };
+    {
+      item: { key: "status", title: "有效状态" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
+    },
+    {
+      item: { key: "enableStatus", title: "启用状态" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
+    },
+    {
+      item: { key: "materialStatus", title: "物料启用状态" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
+    },
+    {
+      item: { key: "isDistribution", title: "配送价" },
+      attr: { is: "el-dict-tag", dictName: "is_effective" },
+    },
+    {
+      item: { key: "priceType", title: "价格类型" },
+      attr: { is: "el-dict-tag", dictName: "sys_price_type" },
+    },
+    { item: { key: "demandCode", title: "采购需求单号" }, attr: {} },
+    { item: { key: "expiryEarly", title: "效期预警" }, attr: {} },
+    { item: { key: "priority", title: "含税/无税优先" }, attr: {} },
+    { item: { key: "createByName", title: "创建人" }, attr: {} },
+    { item: { key: "updateByName", title: "更新人名称" }, attr: {} },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, fixed: false },
+  }));
+  return { TableColumns };
+}

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

@@ -1,5 +1,5 @@
 <script>
-import { TableColumns } from "./columns";
+import useColumns from "./columns";
 import { ITEM, LIST } from "@/api/business/purchase/catalogue";
 
 export default {
@@ -9,6 +9,7 @@ export default {
       import("@/components/super-descriptions/index.vue"),
   },
   data() {
+    const { TableColumns } = useColumns();
     return {
       column: 1,
       title: "明 细",
@@ -70,12 +71,12 @@ export default {
     },
     //
     async open(prop) {
-      this.visible = await this.fetchItem(prop);
+      const [{ $index }] = prop;
+      this.visible = await this.fetchItem($index);
     },
     //
     async hide() {
       this.visible = false;
-      this.params = initParams(this.TableColumns);
     },
   },
   created() {},
@@ -88,7 +89,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
     :disabled="disabled"
-    @click="open(selectData[0].$index)"
+    @click="open(selectData)"
   >
     {{ title }}
     <el-drawer

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

@@ -1,7 +1,7 @@
 import CONFIG from "@/config";
 
 export default function useColumns() {
-  const FormColumns = [
+  const TableColumns = [
     {
       item: { key: "puOrgName", title: "采购组织", require: true },
       attr: {
@@ -58,7 +58,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "contractType", title: "合同类型" },
+      item: { key: "contractType", title: "合同类型", require: true },
       attr: { is: "el-select", dictName: "puarchase_contract_contract_type" },
     },
     {
@@ -319,7 +319,11 @@ export default function useColumns() {
         precision: CONFIG.precision,
       },
     },
-  ];
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, span: item.span || 6 },
+  }));
+
   const TabColumns = [
     {
       item: { title: "物料基本信息", key: "contractItemList" },
@@ -405,34 +409,36 @@ export default function useColumns() {
         {
           item: { title: "含税金额合计", key: "taxMoney" },
           attr: {
-            is: "el-computed-input-v2",
             formatter: (prop) => {
               const { qty = 0, taxPrice = 0 } = prop;
-              return (qty * taxPrice * 1).toFixed(CONFIG.precision);
+              prop.taxMoney = (qty * taxPrice * 1).toFixed(CONFIG.precision);
+              return prop.taxMoney;
             },
           },
         },
         {
           item: { title: "无税单价", key: "taxFreePrice" },
           attr: {
-            is: "el-computed-input-v2",
             formatter: (prop) => {
               const { tax = 0, taxPrice = 0 } = prop;
-              return ((taxPrice / (tax / 100 + 1)) * 1).toFixed(
+              prop.taxFreePrice = ((taxPrice / (tax / 100 + 1)) * 1).toFixed(
                 CONFIG.precision
               );
+              return prop.taxFreePrice;
             },
           },
         },
         {
           item: { title: "无税金额合计", key: "taxFreeMoney" },
           attr: {
-            is: "el-computed-input-v2",
             formatter: (prop) => {
               const { qty = 0, tax = 0, taxPrice = 0 } = prop;
-              return (qty * (taxPrice / (tax / 100 + 1)) * 1).toFixed(
-                CONFIG.precision
-              );
+              prop.taxFreeMoney = (
+                qty *
+                (taxPrice / (tax / 100 + 1)) *
+                1
+              ).toFixed(CONFIG.precision);
+              return prop.taxFreeMoney;
             },
           },
         },
@@ -462,18 +468,24 @@ export default function useColumns() {
         value: [],
       },
       TableColumns: [
-        { item: { title: "条款编码", key: "code" }, attr: { is: "el-input" } },
-        { item: { title: "条款名称", key: "name" }, attr: { is: "el-input" } },
         {
-          item: { title: "条款内容", key: "content" },
+          item: { title: "条款编码", key: "code", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "条款名称", key: "name", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "条款内容", key: "content", width: "auto" },
           attr: { is: "el-input" },
         },
         {
-          item: { title: "变量序号", key: "variableRowno" },
+          item: { title: "变量序号", key: "variableRowno", width: "auto" },
           attr: { is: "el-input" },
         },
         {
-          item: { title: "变量内容", key: "variableContent" },
+          item: { title: "变量内容", key: "variableContent", width: "auto" },
           attr: { is: "el-input" },
         },
       ],
@@ -484,10 +496,16 @@ export default function useColumns() {
         value: [],
       },
       TableColumns: [
-        { item: { title: "费用编码", key: "code" }, attr: { is: "el-input" } },
-        { item: { title: "费用名称", key: "name" }, attr: { is: "el-input" } },
         {
-          item: { title: "费用金额", key: "money" },
+          item: { title: "费用编码", key: "code", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "费用名称", key: "name", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "费用金额", key: "money", width: "auto" },
           attr: { is: "el-input-number", precision: CONFIG.precision },
         },
       ],
@@ -587,6 +605,7 @@ export default function useColumns() {
           item: {
             title: "组织名称",
             key: "orgName",
+            width: "auto",
           },
           attr: {
             is: "el-popover-select-v2",
@@ -598,9 +617,9 @@ export default function useColumns() {
             },
           },
         },
-        { item: { title: "组织编码", key: "org" }, attr: {} },
+        { item: { title: "组织编码", key: "org", width: "auto" }, attr: {} },
       ],
     },
   ];
-  return { FormColumns, TabColumns };
+  return { TableColumns, TabColumns };
 }

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

@@ -1,6 +1,5 @@
 <script>
 import useColumns from "./columns";
-import { initParams, initRules } from "@/utils/init.js";
 import { REFER } from "@/components/popover-select/api";
 import { ADD, CODE } from "@/api/business/purchase/contract";
 
@@ -11,50 +10,62 @@ export default {
       type: [Array],
       require: true,
     },
+    dict: {
+      type: Object,
+      require: true,
+    },
     addType: {
       type: String,
       default: "add",
     },
   },
   components: {
-    ElFileUpload: () => import("@/components/FileUpload/index.vue"),
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+    ElSuperTable: () => import("@/components/super-table/index.vue"),
     ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
-    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
   },
   data() {
     const {
       TabColumns,
-      FormColumns,
+      TableColumns,
       TabColumns: [
         {
           item: { key: tabName },
         },
       ],
     } = useColumns();
-    const params = initParams([...TabColumns, ...FormColumns]);
-    const rules = initRules(FormColumns);
+    const rules = this.$init.rules([...TabColumns, ...TableColumns]);
+    const params = this.$init.params([...TabColumns, ...TableColumns]);
     return {
-      title: "新 增",
       width: "100%",
       visible: false,
       loading: false,
       rules: rules,
       params: params,
       tabName: tabName,
-      TabColumns,
-      FormColumns,
+      TabColumns: TabColumns,
+      TableColumns: TableColumns,
     };
   },
   computed: {
-    $dicts: {
+    title: {
       get() {
-        return this.$parent.$parent.$parent.dict.type;
+        const { addType } = this.$props;
+        if (addType === "add") {
+          this.params.source = "自制";
+          return "新 增";
+        }
+        if (addType === "record") {
+          this.params.source = "期初补录";
+          return "期初补录";
+        }
       },
       set() {},
     },
   },
   watch: {},
   methods: {
+    //
     async fetchCode() {
       try {
         // try
@@ -74,28 +85,27 @@ export default {
         this.loading = false;
       }
     },
-    async fetchRefer(row, prop) {
+    //
+    async changeMaterialName(prop) {
+      const { row } = prop;
       const { rateCode } = row;
-      const { source, referName } = prop;
-      if (referName === "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;
+      try {
+        // try
+        this.loading = true;
+        const { code, rows } = await REFER({
+          search: rateCode,
+          type: "TAX_RATE_PARAM",
+        });
+        if (code === 200) {
+          const [{ ntaxrate }] = rows;
+          row.tax = ntaxrate === "0E-8" ? "0.00000000" : ntaxrate;
         }
+      } catch (err) {
+        // catch
+        console.error(err);
+      } finally {
+        // finally
+        this.loading = false;
       }
     },
     //
@@ -122,7 +132,7 @@ export default {
     async hide() {
       const {
         TabColumns,
-        FormColumns,
+        TableColumns,
         TabColumns: [
           {
             item: { key: tabName },
@@ -131,14 +141,14 @@ export default {
       } = useColumns();
       this.visible = false;
       this.tabName = tabName;
-      this.params = initParams([...TabColumns, ...FormColumns]);
+      this.params = this.$init.params([...TabColumns, ...TableColumns]);
     },
     //
     async useRowAdd(prop) {
       const { TableColumns } = this.TabColumns.find(
         ({ item: { key } }) => key === prop
       );
-      this.params[prop].push(initParams(TableColumns));
+      this.params[prop].push(this.$init.params(TableColumns));
     },
     //
     async useRowRemove(prop, scope) {
@@ -147,7 +157,7 @@ export default {
     },
     //
     async useSubmit(prop) {
-      this.$refs[prop].validate(async (valid) => {
+      this.$refs[prop].$refs[prop].validate(async (valid) => {
         if (valid) {
           try {
             // try
@@ -172,10 +182,7 @@ export default {
       });
     },
   },
-  created() {
-    this.params.source = this.addType === "add" ? "自制" : "期初补录";
-    this.title = this.addType === "add" ? "新 增" : "期初补录";
-  },
+  created() {},
   mounted() {},
   destroyed() {},
 };
@@ -189,175 +196,68 @@ export default {
       :visible.sync="visible"
       append-to-body
       destroy-on-close
+      @close="hide"
     >
-      <el-form
-        ref="ruleForm"
-        v-loading="loading"
-        :size="$attrs.size"
+      <el-super-form
+        v-model="params"
+        :dict="dict"
         :rules="rules"
-        :model="params"
+        :size="$attrs.size"
+        :columns="TableColumns"
+        ref="superForm"
         label-width="auto"
         label-position="right"
-        style="padding: 10px"
-      >
-        <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
-          <el-col
-            v-for="{ item, attr } in FormColumns"
-            :key="item.key"
-            :span="item.span || 6"
+        style="padding: 20px"
+      ></el-super-form>
+
+      <el-tabs v-model="tabName" style="margin: 0 20px">
+        <el-tab-pane
+          v-for="{ item, TableColumns: columns } in TabColumns"
+          :key="item.key"
+          :label="item.title"
+          :name="item.key"
+          lazy
+        >
+          <el-super-table
+            v-model="params[item.key]"
+            :dict="dict"
+            :ref="tabName"
+            :columns="columns"
+            :size="$attrs.size"
           >
-            <el-form-item :prop="item.key" :label="item.title">
+            <template slot="materialName" slot-scope="scope">
               <component
-                v-if="attr.is === 'el-input'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                style="width: 100%"
-              ></component>
-              <component
-                v-if="attr.is === 'el-popover-select-v2'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                :source.sync="params"
-                style="width: 100%"
+                v-bind="scope.attr"
+                v-model="scope.row[scope.item.key]"
+                :size="$attrs.size"
+                :source.sync="scope.row"
+                @change="changeMaterialName(scope)"
               >
               </component>
-              <component
-                v-if="attr.is === 'el-input-number'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                style="width: 100%"
-              ></component>
-              <component
-                v-if="attr.is === 'el-select'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="dict in $dicts[attr.dictName]"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
+            </template>
+            <el-table-column fixed="right" label="操作" width="75">
+              <template slot="header" slot-scope="scope">
+                <el-button
+                  circle
+                  icon="el-icon-plus"
+                  :size="$attrs.size"
+                  @click="useRowAdd(tabName)"
                 >
-                </el-option>
-              </component>
-              <component
-                v-if="attr.is === 'el-date-picker'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                style="width: 100%"
-              >
-              </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="{ item, attr, TableColumns } in TabColumns"
-                  :key="item.key"
-                  :label="item.title"
-                  :name="item.key"
-                  lazy
+                </el-button>
+              </template>
+              <template slot-scope="scope">
+                <el-button
+                  circle
+                  icon="el-icon-minus"
+                  :size="$attrs.size"
+                  @click.native.prevent="useRowRemove(tabName, scope)"
                 >
-                  <el-table :size="$attrs.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="{ 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">
-                        <component
-                          v-if="cAttr.is === 'el-input'"
-                          v-bind="cAttr"
-                          v-model="scope.row[cItem.key]"
-                          style="width: 100%"
-                        ></component>
-                        <component
-                          v-else-if="cAttr.is === 'el-popover-select-v2'"
-                          v-bind="cAttr"
-                          v-model="scope.row[cItem.key]"
-                          :source.sync="scope.row"
-                          style="width: 100%"
-                          @change="fetchRefer"
-                        >
-                        </component>
-                        <component
-                          v-else-if="cAttr.is === 'el-input-number'"
-                          v-bind="cAttr"
-                          v-model="scope.row[cItem.key]"
-                          style="width: 100%"
-                        ></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="dict in $dicts[cAttr.dictName]"
-                            :key="dict.value"
-                            :label="dict.label"
-                            :value="dict.value"
-                          >
-                          </el-option>
-                        </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">
-                      <template slot="header" slot-scope="scope">
-                        <el-button
-                          circle
-                          icon="el-icon-plus"
-                          :size="$attrs.size"
-                          @click="useRowAdd(tabName)"
-                        >
-                        </el-button>
-                      </template>
-                      <template slot-scope="scope">
-                        <el-button
-                          circle
-                          icon="el-icon-minus"
-                          :size="$attrs.size"
-                          @click.native.prevent="useRowRemove(tabName, scope)"
-                        >
-                        </el-button>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                </el-tab-pane>
-              </el-tabs>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-super-table>
+        </el-tab-pane>
+      </el-tabs>
       <div style="padding: 20px; text-align: right">
         <el-button :size="$attrs.size" :loading="loading" @click="hide"
           >取 消</el-button
@@ -366,7 +266,7 @@ export default {
           type="primary"
           :size="$attrs.size"
           :loading="loading"
-          @click="useSubmit('ruleForm')"
+          @click="useSubmit('superForm')"
           >确 认</el-button
         >
       </div>

src/views/purchase/contract/columns.js

@@ -1,260 +1,262 @@
 import CONFIG from "@/config";
 
-export const TableColumns = [
-  { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
-  { item: { key: "code", title: "合同编码" }, attr: {} },
-  {
-    item: { key: "status", title: "状态" },
-    attr: { is: "el-dict-tag", dictName: "documents_status" },
-  },
-  {
-    item: { key: "lastPuMoney", title: "上年度采购额" },
-    attr: {
-      is: "el-computed-input-v2",
-      formatter: (prop) => {
-        return (prop * 1).toFixed(CONFIG.precision);
+export default function useColumns() {
+  const TableColumns = [
+    { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
+    { item: { key: "code", title: "合同编码" }, attr: {} },
+    {
+      item: { key: "status", title: "状态" },
+      attr: { is: "el-dict-tag", dictName: "documents_status" },
+    },
+    {
+      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: {} },
+    {
+      item: { key: "contractType", title: "合同类型" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_contract_type",
+      },
+    },
+    {
+      item: { key: "puMoneyYear", title: "本年度采购额" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
+      },
+    },
+    { item: { key: "puDeptName", title: "采购部门" }, attr: {} },
+    {
+      item: { key: "supplierTier", title: "供应商层级" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_supplier_tier",
+      },
+    },
+    {
+      item: { key: "contractName", title: "合同名称" },
+      attr: {},
+    },
+    {
+      item: { key: "grossRateAverage", title: "平均毛利率 (%)" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
+      },
+    },
+    {
+      item: { key: "approveFlow", title: "审批流程" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_approve_flow",
       },
     },
-  },
-  { item: { key: "buyerName", title: "采购员" }, attr: {} },
-  { item: { key: "supplierName", title: "供应商" }, attr: {} },
-  {
-    item: { key: "contractType", title: "合同类型" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "puarchase_contract_contract_type",
-    },
-  },
-  {
-    item: { key: "puMoneyYear", title: "本年度采购额" },
-    attr: {
-      is: "el-computed-input-v2",
-      formatter: (prop) => {
-        return (prop * 1).toFixed(CONFIG.precision);
+    {
+      item: { key: "consumableClass", title: "耗材类别" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_consumable_class",
       },
     },
-  },
-  { item: { key: "puDeptName", title: "采购部门" }, attr: {} },
-  {
-    item: { key: "supplierTier", title: "供应商层级" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "puarchase_contract_supplier_tier",
-    },
-  },
-  {
-    item: { key: "contractName", title: "合同名称" },
-    attr: {},
-  },
-  {
-    item: { key: "grossRateAverage", title: "平均毛利率 (%)" },
-    attr: {
-      is: "el-computed-input-v2",
-      formatter: (prop) => {
-        return (prop * 1).toFixed(CONFIG.precision);
+    {
+      item: { key: "effectiveDate", title: "合同生效日期" },
+      attr: {},
+    },
+    {
+      item: { key: "brandGrossRate", title: "同类品牌及毛利率 (%)" },
+      attr: {
+        is: "el-computed-input-v2",
+        formatter: (prop) => {
+          return (prop * 1).toFixed(CONFIG.precision);
+        },
+      },
+    },
+    {
+      item: { key: "contractFormat", title: "合同格式" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_contract_format",
+      },
+    },
+    {
+      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);
+        },
       },
     },
-  },
-  {
-    item: { key: "approveFlow", title: "审批流程" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "puarchase_contract_approve_flow",
-    },
-  },
-  {
-    item: { key: "consumableClass", title: "耗材类别" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "puarchase_contract_consumable_class",
-    },
-  },
-  {
-    item: { key: "effectiveDate", title: "合同生效日期" },
-    attr: {},
-  },
-  {
-    item: { key: "brandGrossRate", title: "同类品牌及毛利率 (%)" },
-    attr: {
-      is: "el-computed-input-v2",
-      formatter: (prop) => {
-        return (prop * 1).toFixed(CONFIG.precision);
+    {
+      item: { key: "emergencyDegree", title: "紧急程度" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_emergency_degree",
       },
     },
-  },
-  {
-    item: { key: "contractFormat", title: "合同格式" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "puarchase_contract_contract_format",
-    },
-  },
-  {
-    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);
+    { item: { key: "project", title: "项目医院" }, attr: {} },
+    {
+      item: { key: "deliveryType", title: "交货方式" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "puarchase_contract_delivery_type",
       },
     },
-  },
-  {
-    item: { key: "emergencyDegree", title: "紧急程度" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "puarchase_contract_emergency_degree",
-    },
-  },
-  { 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",
-    },
-  },
-  {
-    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";
+    { 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",
+      },
+    },
+    {
+      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";
+        },
       },
     },
-  },
-  { item: { key: "currencyName", title: "币种" }, attr: {} },
-  {
-    item: { key: "guaranteePeriod", title: "质保期" },
-    attr: {},
-  },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, fixed: false },
-}));
+    { item: { key: "currencyName", title: "币种" }, attr: {} },
+    {
+      item: { key: "guaranteePeriod", title: "质保期" },
+      attr: {},
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, fixed: false },
+  }));
 
-export const SearchColumns = [
-  {
-    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",
-    },
-  },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, span: item.span || 6 },
-}));
+  const SearchColumns = [
+    {
+      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",
+      },
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, span: item.span || 6 },
+  }));
 
-export default { TableColumns, SearchColumns };
+  return { TableColumns, SearchColumns };
+}

src/views/purchase/contract/dicts.js

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

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

@@ -1,7 +1,7 @@
 import CONFIG from "@/config";
 
 export default function useColumns() {
-  const FormColumns = [
+  const TableColumns = [
     {
       item: { key: "puOrgName", title: "采购组织", require: true },
       attr: {
@@ -58,7 +58,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "contractType", title: "合同类型" },
+      item: { key: "contractType", title: "合同类型", require: true },
       attr: { is: "el-select", dictName: "puarchase_contract_contract_type" },
     },
     {
@@ -194,7 +194,7 @@ export default function useColumns() {
     },
     {
       item: { key: "signDate", title: "合同签订日期" },
-      attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd"},
+      attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd" },
     },
     {
       item: { key: "isTarget", title: "是否有指标", require: true },
@@ -319,7 +319,11 @@ export default function useColumns() {
         precision: CONFIG.precision,
       },
     },
-  ];
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, span: item.span || 6 },
+  }));
+
   const TabColumns = [
     {
       item: { title: "物料基本信息", key: "contractItemList" },
@@ -405,34 +409,36 @@ export default function useColumns() {
         {
           item: { title: "含税金额合计", key: "taxMoney" },
           attr: {
-            is: "el-computed-input-v2",
             formatter: (prop) => {
               const { qty = 0, taxPrice = 0 } = prop;
-              return (qty * taxPrice * 1).toFixed(CONFIG.precision);
+              prop.taxMoney = (qty * taxPrice * 1).toFixed(CONFIG.precision);
+              return prop.taxMoney;
             },
           },
         },
         {
           item: { title: "无税单价", key: "taxFreePrice" },
           attr: {
-            is: "el-computed-input-v2",
             formatter: (prop) => {
               const { tax = 0, taxPrice = 0 } = prop;
-              return ((taxPrice / (tax / 100 + 1)) * 1).toFixed(
+              prop.taxFreePrice = ((taxPrice / (tax / 100 + 1)) * 1).toFixed(
                 CONFIG.precision
               );
+              return prop.taxFreePrice;
             },
           },
         },
         {
           item: { title: "无税金额合计", key: "taxFreeMoney" },
           attr: {
-            is: "el-computed-input-v2",
             formatter: (prop) => {
               const { qty = 0, tax = 0, taxPrice = 0 } = prop;
-              return (qty * (taxPrice / (tax / 100 + 1)) * 1).toFixed(
-                CONFIG.precision
-              );
+              prop.taxFreeMoney = (
+                qty *
+                (taxPrice / (tax / 100 + 1)) *
+                1
+              ).toFixed(CONFIG.precision);
+              return prop.taxFreeMoney;
             },
           },
         },
@@ -462,18 +468,24 @@ export default function useColumns() {
         value: [],
       },
       TableColumns: [
-        { item: { title: "条款编码", key: "code" }, attr: { is: "el-input" } },
-        { item: { title: "条款名称", key: "name" }, attr: { is: "el-input" } },
         {
-          item: { title: "条款内容", key: "content" },
+          item: { title: "条款编码", key: "code", width: "auto" },
           attr: { is: "el-input" },
         },
         {
-          item: { title: "变量序号", key: "variableRowno" },
+          item: { title: "条款名称", key: "name", width: "auto" },
           attr: { is: "el-input" },
         },
         {
-          item: { title: "变量内容", key: "variableContent" },
+          item: { title: "条款内容", key: "content", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "变量序号", key: "variableRowno", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "变量内容", key: "variableContent", width: "auto" },
           attr: { is: "el-input" },
         },
       ],
@@ -484,10 +496,16 @@ export default function useColumns() {
         value: [],
       },
       TableColumns: [
-        { item: { title: "费用编码", key: "code" }, attr: { is: "el-input" } },
-        { item: { title: "费用名称", key: "name" }, attr: { is: "el-input" } },
         {
-          item: { title: "费用金额", key: "money" },
+          item: { title: "费用编码", key: "code", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "费用名称", key: "name", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "费用金额", key: "money", width: "auto" },
           attr: { is: "el-input-number", precision: CONFIG.precision },
         },
       ],
@@ -587,6 +605,7 @@ export default function useColumns() {
           item: {
             title: "组织名称",
             key: "orgName",
+            width: "auto",
           },
           attr: {
             is: "el-popover-select-v2",
@@ -598,9 +617,9 @@ export default function useColumns() {
             },
           },
         },
-        { item: { title: "组织编码", key: "org" }, attr: {} },
+        { item: { title: "组织编码", key: "org", width: "auto" }, attr: {} },
       ],
     },
   ];
-  return { FormColumns, TabColumns };
+  return { TableColumns, TabColumns };
 }

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

@@ -16,24 +16,28 @@ export default {
       type: [Array],
       require: true,
     },
+    dict: {
+      type: Object,
+      require: true,
+    },
   },
   components: {
-    ElFileUpload: () => import("@/components/FileUpload/index.vue"),
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+    ElSuperTable: () => import("@/components/super-table/index.vue"),
     ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
-    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
   },
   data() {
     const {
       TabColumns,
-      FormColumns,
+      TableColumns,
       TabColumns: [
         {
           item: { key: tabName },
         },
       ],
     } = useColumns();
-    const params = initParams([...TabColumns, ...FormColumns]);
-    const rules = initRules(FormColumns);
+    const rules = this.$init.rules(TableColumns);
+    const params = this.$init.params([...TabColumns, ...TableColumns]);
     return {
       title: "编 辑",
       width: "100%",
@@ -42,17 +46,11 @@ export default {
       rules: rules,
       params: params,
       tabName: tabName,
-      TabColumns,
-      FormColumns,
+      TabColumns: TabColumns,
+      TableColumns: TableColumns,
     };
   },
   computed: {
-    $dicts: {
-      get() {
-        return this.$parent.$parent.$parent.dict.type;
-      },
-      set() {},
-    },
     disabled: {
       get() {
         const { selectData } = this;
@@ -65,30 +63,30 @@ export default {
   },
   watch: {},
   methods: {
-    async fetchRefer(row, prop) {
+    //
+    async changeMaterialName(prop) {
+      const { row } = prop;
       const { rateCode } = row;
-      const { source, referName } = prop;
-      if (referName === "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;
+      try {
+        // try
+        this.loading = true;
+        const { code, rows } = await REFER({
+          search: rateCode,
+          type: "TAX_RATE_PARAM",
+        });
+        if (code === 200) {
+          const [{ ntaxrate }] = rows;
+          row.tax = ntaxrate === "0E-8" ? "0.00000000" : ntaxrate;
         }
+      } catch (err) {
+        // catch
+        console.error(err);
+      } finally {
+        // finally
+        this.loading = false;
       }
     },
+    //
     async fetchItem(prop) {
       try {
         // try
@@ -109,14 +107,16 @@ export default {
       }
     },
     //
-    async open(prop) {
-      this.visible = await this.fetchItem(prop);
+    async open() {
+      const { selectData } = this.$props;
+      const [{ id }] = selectData;
+      this.visible = await this.fetchItem(id);
     },
     //
     async hide() {
       const {
         TabColumns,
-        FormColumns,
+        TableColumns,
         TabColumns: [
           {
             item: { key: tabName },
@@ -125,15 +125,14 @@ export default {
       } = useColumns();
       this.visible = false;
       this.tabName = tabName;
-      this.params = initParams([...TabColumns, ...FormColumns]);
+      this.params = this.$init.params([...TabColumns, ...TableColumns]);
     },
     //
     async useRowAdd(prop) {
       const { TableColumns } = this.TabColumns.find(
         ({ item: { key } }) => key === prop
       );
-      this.params[prop].push(initParams(TableColumns));
-      console.log(this.params[prop]);
+      this.params[prop].push(this.$init.params(TableColumns));
     },
     //
     async useRowRemove(prop, scope) {
@@ -188,7 +187,7 @@ export default {
     },
     //
     async useSubmit(prop) {
-      this.$refs[prop].validate(async (valid) => {
+      this.$refs[prop].$refs[prop].validate(async (valid) => {
         if (valid) {
           try {
             // try
@@ -227,7 +226,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
     :disabled="disabled"
-    @click="open(selectData[0].id)"
+    @click="open"
   >
     {{ title }}
     <el-drawer
@@ -236,182 +235,74 @@ export default {
       :visible.sync="visible"
       append-to-body
       destroy-on-close
+      @close="hide"
     >
-      <el-form
-        ref="ruleForm"
-        v-loading="loading"
-        :size="$attrs.size"
+      <el-super-form
+        v-model="params"
+        :dict="dict"
         :rules="rules"
-        :model="params"
+        :size="$attrs.size"
+        :columns="TableColumns"
+        ref="superForm"
         label-width="auto"
         label-position="right"
-        style="padding: 10px"
-      >
-        <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
-          <el-col
-            v-for="{ item, attr } in FormColumns"
-            :key="item.key"
-            :span="item.span || 6"
+        style="padding: 20px"
+      ></el-super-form>
+      <el-tabs v-model="tabName" style="margin: 0 20px">
+        <el-tab-pane
+          v-for="{ item, TableColumns: columns } in TabColumns"
+          :key="item.key"
+          :label="item.title"
+          :name="item.key"
+          lazy
+        >
+          <el-super-table
+            v-model="params[item.key]"
+            :dict="dict"
+            :ref="tabName"
+            :columns="columns"
+            :size="$attrs.size"
           >
-            <el-form-item :prop="item.key" :label="item.title">
+            <template slot="materialName" slot-scope="scope">
               <component
-                v-if="attr.is === 'el-input'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                style="width: 100%"
-              ></component>
-              <component
-                v-if="attr.is === 'el-popover-select-v2'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                :source.sync="params"
-                style="width: 100%"
+                v-bind="scope.attr"
+                v-model="scope.row[scope.item.key]"
+                :size="$attrs.size"
+                :source.sync="scope.row"
+                @change="changeMaterialName(scope)"
               >
               </component>
-              <component
-                v-if="attr.is === 'el-input-number'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                style="width: 100%"
-              ></component>
-              <component
-                v-if="attr.is === 'el-select'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                style="width: 100%"
-              >
-                <el-option
-                  v-for="dict in $dicts[attr.dictName]"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
+            </template>
+            <el-table-column fixed="right" label="操作" width="100">
+              <template slot="header" slot-scope="scope">
+                <el-button
+                  circle
+                  icon="el-icon-plus"
+                  :size="$attrs.size"
+                  @click="useRowAdd(tabName)"
                 >
-                </el-option>
-              </component>
-              <component
-                v-if="attr.is === 'el-date-picker'"
-                v-bind="attr"
-                v-model="params[item.key]"
-                style="width: 100%"
-              >
-              </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="{ item, attr, TableColumns } in TabColumns"
-                  :key="item.key"
-                  :label="item.title"
-                  :name="item.key"
-                  lazy
+                </el-button>
+              </template>
+              <template slot-scope="scope">
+                <el-button
+                  circle
+                  icon="el-icon-check"
+                  :size="$attrs.size"
+                  @click.native.prevent="useRowSubmit(tabName, scope)"
+                >
+                </el-button>
+                <el-button
+                  circle
+                  icon="el-icon-minus"
+                  :size="$attrs.size"
+                  @click.native.prevent="useRowRemove(tabName, scope)"
                 >
-                  <el-table :size="$attrs.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="{ 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">
-                        <component
-                          v-if="cAttr.is === 'el-input'"
-                          v-bind="cAttr"
-                          v-model="scope.row[cItem.key]"
-                          style="width: 100%"
-                        ></component>
-                        <component
-                          v-else-if="cAttr.is === 'el-popover-select-v2'"
-                          v-bind="cAttr"
-                          v-model="scope.row[cItem.key]"
-                          :source.sync="scope.row"
-                          style="width: 100%"
-                          @change="fetchRefer"
-                        >
-                        </component>
-                        <component
-                          v-else-if="cAttr.is === 'el-input-number'"
-                          v-bind="cAttr"
-                          v-model="scope.row[cItem.key]"
-                          style="width: 100%"
-                        ></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="dict in $dicts[cAttr.dictName]"
-                            :key="dict.value"
-                            :label="dict.label"
-                            :value="dict.value"
-                          >
-                          </el-option>
-                        </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">
-                      <template slot="header" slot-scope="scope">
-                        <el-button
-                          circle
-                          icon="el-icon-plus"
-                          :size="$attrs.size"
-                          @click="useRowAdd(tabName)"
-                        >
-                        </el-button>
-                      </template>
-                      <template slot-scope="scope">
-                        <el-button
-                          circle
-                          icon="el-icon-check"
-                          :size="$attrs.size"
-                          @click.native.prevent="useRowSubmit(tabName, scope)"
-                        >
-                        </el-button>
-                        <el-button
-                          circle
-                          icon="el-icon-minus"
-                          :size="$attrs.size"
-                          @click.native.prevent="useRowRemove(tabName, scope)"
-                        >
-                        </el-button>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                </el-tab-pane>
-              </el-tabs>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-super-table>
+        </el-tab-pane>
+      </el-tabs>
       <div style="padding: 20px; text-align: right">
         <el-button :size="$attrs.size" :loading="loading" @click="hide"
           >取 消</el-button
@@ -420,7 +311,7 @@ export default {
           type="primary"
           :size="$attrs.size"
           :loading="loading"
-          @click="useSubmit('ruleForm')"
+          @click="useSubmit('superForm')"
           >确 认</el-button
         >
       </div>

src/views/purchase/contract/index.vue

@@ -1,11 +1,10 @@
 <script>
 import { dicts } from "./dicts";
+import useColumns from "./columns";
 import { LIST } from "@/api/business/purchase/contract";
-import { TableColumns, SearchColumns } from "./columns";
-console.log(dicts);
 export default {
   name: "PuchaseContract",
-  dicts: [...dicts, "puarchase_contract_origin"],
+  dicts: dicts,
   components: {
     AddButton: () => import("./add/index.vue"),
     SeeButton: () => import("./see/index.vue"),
@@ -19,6 +18,7 @@ export default {
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
   },
   data() {
+    const { TableColumns, SearchColumns } = useColumns();
     const params = this.$init.params(SearchColumns);
     return {
       size: "mini",
@@ -26,8 +26,8 @@ export default {
       params: params,
       tableData: [],
       selectData: [],
-      SearchColumns: SearchColumns,
       TableColumns: TableColumns,
+      SearchColumns: SearchColumns,
       page: { pageNum: 1, pageSize: 10, total: 0 },
     };
   },
@@ -71,7 +71,7 @@ export default {
     useReset() {
       this.page.pageNum = 1;
       this.page.pageSize = 10;
-      this.params = this.$init.params(SearchColumns);
+      this.params = this.$init.params(this.SearchColumns);
       this.useQuery(this.params, this.page);
     },
     // 选 择
@@ -98,7 +98,7 @@ export default {
       @reset="useReset"
       @submit="useQuery(params, page)"
     ></el-super-search>
-    <div style="padding: 0 20px; text-align: right">
+    <div style="margin: 0 0 20px 0; text-align: right">
       <el-button-group>
         <add-button
           :size="size"
@@ -171,6 +171,8 @@ export default {
       @row-dblclick="useSee"
       @selection-change="useSelect"
     >
+      <el-table-column fixed width="55" align="center" label="#" prop="$index">
+      </el-table-column>
       <el-table-column fixed width="55" align="center" type="selection">
       </el-table-column>
     </el-super-table>
@@ -179,6 +181,7 @@ export default {
       :page.sync="page.pageNum"
       :limit.sync="page.pageSize"
       @pagination="useQuery(params, page)"
+      style="height: 32px; margin: 20px 0 0 0; padding: 0 !important"
     />
   </el-card>
 </template>
@@ -187,7 +190,7 @@ export default {
   width: calc(100% - 20px);
   height: 100%;
   margin: 10px;
-  padding: 0 0 20px 0;
+  padding: 20px;
 }
 .el-button-group + .el-button-group {
   margin: 0 0 0 10px;

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

@@ -1,106 +1,190 @@
 import CONFIG from "@/config";
 
 export default function useColumns() {
-  const FormColumns = [
-    { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
-    { item: { key: "code", title: "合同编码" }, attr: {} },
+  const TableColumns = [
+    {
+      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-dict-tag", dictName: "documents_status" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "documents_status",
+        disabled: true,
+        value: "0",
+      },
     },
     {
       item: { key: "lastPuMoney", title: "上年度采购额" },
       attr: {
-        is: "el-computed-input-v2",
-        formatter: (prop) => {
-          return (prop * 1).toFixed(CONFIG.precision);
+        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: "buyerName", title: "采购员" }, attr: {} },
-    { item: { key: "supplierName", title: "供应商" }, attr: {} },
     {
-      item: { key: "contractType", title: "合同类型" },
+      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: "合同类型", require: true },
       attr: { is: "el-dict-tag", dictName: "puarchase_contract_contract_type" },
     },
     {
       item: { key: "puMoneyYear", title: "本年度采购额" },
       attr: {
-        is: "el-computed-input-v2",
-        formatter: (prop) => {
-          return (prop * 1).toFixed(CONFIG.precision);
+        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: "puDeptName", title: "采购部门" }, attr: {} },
     {
-      item: { key: "supplierTier", title: "供应商层级" },
+      item: { key: "supplierTier", title: "供应商层级", require: true },
       attr: { is: "el-dict-tag", dictName: "puarchase_contract_supplier_tier" },
     },
-    { item: { key: "contractName", title: "合同名称" }, attr: {} },
     {
-      item: { key: "grossRateAverage", title: "平均毛利率 (%)" },
+      item: { key: "contractName", title: "合同名称", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "grossRateAverage", title: "平均毛利率 (%)", require: true },
       attr: {
-        is: "el-computed-input-v2",
-        formatter: (prop) => {
-          return (prop * 1).toFixed(CONFIG.precision);
-        },
+        is: "el-input-number",
+        precision: CONFIG.precision,
       },
     },
     {
-      item: { key: "approveFlow", title: "审批流程" },
+      item: { key: "approveFlow", title: "审批流程", require: true },
       attr: { is: "el-dict-tag", dictName: "puarchase_contract_approve_flow" },
     },
     {
-      item: { key: "consumableClass", title: "耗材类别" },
+      item: { key: "consumableClass", title: "耗材类别", require: true },
       attr: {
         is: "el-dict-tag",
         dictName: "puarchase_contract_consumable_class",
       },
     },
-    { item: { key: "effectiveDate", title: "合同生效日期" }, attr: {} },
     {
-      item: { key: "brandGrossRate", title: "同类品牌及毛利率 (%)" },
+      item: { key: "effectiveDate", title: "合同生效日期", require: true },
       attr: {
-        is: "el-computed-input-v2",
-        formatter: (prop) => {
-          return (prop * 1).toFixed(CONFIG.precision);
-        },
+        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: "合同格式" },
+      item: { key: "contractFormat", title: "合同格式", require: true },
       attr: {
         is: "el-dict-tag",
         dictName: "puarchase_contract_contract_format",
       },
     },
-    { item: { key: "productName", title: "产品类别&名称" }, attr: {} },
-    { item: { key: "endDate", title: "合同终止日期" }, attr: {} },
     {
-      item: { key: "invoiceTax", title: "发票税率 (%)" },
+      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-computed-input-v2",
-        formatter: (prop) => {
-          return (prop * 1).toFixed(CONFIG.precision);
+        is: "el-popover-select-v2",
+        valueKey: "ntaxrate",
+        referName: "TAX_RATE_PARAM",
+        dataMapping: {
+          invoiceTax: "ntaxrate",
         },
       },
     },
     {
-      item: { key: "emergencyDegree", title: "紧急程度" },
+      item: { key: "emergencyDegree", title: "紧急程度", require: true },
       attr: {
         is: "el-dict-tag",
         dictName: "puarchase_contract_emergency_degree",
       },
     },
-    { item: { key: "project", title: "项目医院" }, attr: {} },
     {
-      item: { key: "deliveryType", title: "交货方式" },
+      item: { key: "project", title: "项目医院", require: true },
+      attr: { is: "el-input" },
+    },
+    {
+      item: { key: "deliveryType", title: "交货方式", require: true },
       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: "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: {
@@ -108,60 +192,138 @@ export default function useColumns() {
         dictName: "puarchase_contract_freight_methods",
       },
     },
-    { item: { key: "signDate", title: "合同创建时间" }, attr: {} },
     {
-      item: { key: "isTarget", title: "是否有指标" },
+      item: { key: "signDate", title: "合同签订日期" },
+      attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd" },
+    },
+    {
+      item: { key: "isTarget", title: "是否有指标", require: true },
       attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
     },
-    { item: { key: "contractTarget", title: "合同指标" }, attr: {} },
-    { item: { key: "exemptionPostageCondtion", title: "包邮条件" }, attr: {} },
     {
-      item: { key: "isRebate", title: "是否有返利" },
+      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-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: "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-dict-tag", dictName: "sys_yes_no" },
+      attr: { is: "el-dict-tag", dictName: "sys_yes_no", disabled: true },
+    },
+    {
+      item: { key: "pigeonholeFile", title: "归档附件", span: 24 },
+      attr: { is: "el-file-preview", fileType: ["pdf"], disabled: true },
+    },
+    {
+      item: { key: "externalFile", title: "对外附件", span: 24 },
+      attr: { is: "el-file-preview", fileType: ["pdf"] },
     },
     {
-      item: { key: "pigeonholeFile", title: "归档附件" },
-      attr: { is: "el-file-preview" },
+      item: { key: "puFile", title: "采购商盖章合同附件", span: 24 },
+      attr: { is: "el-file-preview", fileType: ["pdf"] },
     },
     {
-      item: { key: "externalFile", title: "对外附件" },
-      attr: { is: "el-file-preview" },
+      item: { key: "supplierFile", title: "供应商盖章合同附件", span: 24 },
+      attr: { is: "el-file-preview", fileType: ["pdf"] },
     },
     {
-      item: { key: "puFile", title: "采购商盖章合同附件" },
-      attr: { is: "el-file-preview" },
+      item: { key: "projectCode", title: "项目编号" },
+      attr: { is: "el-input" },
     },
     {
-      item: { key: "supplierFile", title: "供应商盖章合同附件" },
-      attr: { is: "el-file-preview" },
+      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: "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";
+        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: "currencyName", title: "币种" }, attr: {} },
-    { item: { key: "guaranteePeriod", title: "质保期" }, attr: {} },
-  ];
+    {
+      item: { key: "guaranteePeriod", title: "质保期" },
+      attr: {
+        is: "el-input-number",
+        precision: CONFIG.precision,
+      },
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, span: item.span || 6 },
+  }));
+
   const TabColumns = [
     {
       item: { title: "物料基本信息", key: "contractItemList" },
@@ -172,7 +334,19 @@ export default function useColumns() {
             title: "物料名称",
             key: "materialName",
           },
-          attr: {},
+          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: {
@@ -199,64 +373,92 @@ export default function useColumns() {
         },
         {
           item: { title: "采购单位", key: "puUnit" },
-          attr: {},
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "UNIT_PARAM",
+            dataMapping: {
+              puUnit: "name",
+            },
+          },
         },
         {
           item: { title: "税率%", key: "tax" },
-          attr: {},
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "ntaxrate",
+            referName: "TAX_RATE_PARAM",
+            dataMapping: {
+              tax: "ntaxrate",
+            },
+          },
         },
         {
           item: { title: "采购数量", key: "qty" },
           attr: {
-            is: "el-computed-input-v2",
-            formatter: (prop = 0) => {
-              return (prop * 1).toFixed(CONFIG.precision);
-            },
+            is: "el-input-number",
           },
         },
         {
           item: { title: "含税单价", key: "taxPrice" },
           attr: {
-            is: "el-computed-input-v2",
-            formatter: (prop = 0) => {
-              return (prop * 1).toFixed(CONFIG.precision);
-            },
+            is: "el-input-number",
+            precision: CONFIG.precision,
           },
         },
         {
           item: { title: "含税金额合计", key: "taxMoney" },
           attr: {
-            is: "el-computed-input-v2",
-            formatter: (prop = 0) => {
-              return (prop * 1).toFixed(CONFIG.precision);
+            formatter: (prop) => {
+              const { qty = 0, taxPrice = 0 } = prop;
+              prop.taxMoney = (qty * taxPrice * 1).toFixed(CONFIG.precision);
+              return prop.taxMoney;
             },
           },
         },
         {
           item: { title: "无税单价", key: "taxFreePrice" },
           attr: {
-            is: "el-computed-input-v2",
-            formatter: (prop = 0) => {
-              return (prop * 1).toFixed(CONFIG.precision);
+            formatter: (prop) => {
+              const { tax = 0, taxPrice = 0 } = prop;
+              prop.taxFreePrice = ((taxPrice / (tax / 100 + 1)) * 1).toFixed(
+                CONFIG.precision
+              );
+              return prop.taxFreePrice;
             },
           },
         },
         {
           item: { title: "无税金额合计", key: "taxFreeMoney" },
           attr: {
-            is: "el-computed-input-v2",
-            formatter: (prop = 0) => {
-              return (prop * 1).toFixed(CONFIG.precision);
+            formatter: (prop) => {
+              const { qty = 0, tax = 0, taxPrice = 0 } = prop;
+              prop.taxFreeMoney = (
+                qty *
+                (taxPrice / (tax / 100 + 1)) *
+                1
+              ).toFixed(CONFIG.precision);
+              return prop.taxFreeMoney;
             },
           },
         },
         {
           item: { title: "注册证号及备案凭证号", key: "registration" },
-          attr: {},
+          attr: {
+            is: "el-input",
+          },
         },
         {
           item: { title: "收货客户", key: "customerName" },
-          attr: {},
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "CUSTOMER_PARAM",
+            dataMapping: {
+              customer: "code",
+              customerName: "name",
+            },
+          },
         },
       ],
     },
@@ -266,19 +468,25 @@ export default function useColumns() {
         value: [],
       },
       TableColumns: [
-        { item: { title: "条款编码", key: "code" }, attr: {} },
-        { item: { title: "条款名称", key: "name" }, attr: {} },
         {
-          item: { title: "条款内容", key: "content" },
-          attr: {},
+          item: { title: "条款编码", key: "code", width: "auto" },
+          attr: { is: "el-input" },
         },
         {
-          item: { title: "变量序号", key: "variableRowno" },
-          attr: {},
+          item: { title: "条款名称", key: "name", width: "auto" },
+          attr: { is: "el-input" },
         },
         {
-          item: { title: "变量内容", key: "variableContent" },
-          attr: {},
+          item: { title: "条款内容", key: "content", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "变量序号", key: "variableRowno", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "变量内容", key: "variableContent", width: "auto" },
+          attr: { is: "el-input" },
         },
       ],
     },
@@ -288,16 +496,17 @@ export default function useColumns() {
         value: [],
       },
       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: "code", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "费用名称", key: "name", width: "auto" },
+          attr: { is: "el-input" },
+        },
+        {
+          item: { title: "费用金额", key: "money", width: "auto" },
+          attr: { is: "el-input-number", precision: CONFIG.precision },
         },
       ],
     },
@@ -309,7 +518,7 @@ export default function useColumns() {
       TableColumns: [
         {
           item: { title: "付款阶段", key: "satge" },
-          attr: {},
+          attr: { is: "el-input-number" },
         },
         {
           item: {
@@ -324,28 +533,22 @@ export default function useColumns() {
         {
           item: { title: "账期天数", key: "paymetDays" },
           attr: {
-            is: "el-computed-input-v2",
-            formatter: (prop) => {
-              return (prop * 1).toFixed(CONFIG.precision);
-            },
+            is: "el-input-number",
+            precision: CONFIG.precision,
           },
         },
         {
           item: { title: "付款比例%", key: "ratio" },
           attr: {
-            is: "el-computed-input-v2",
-            formatter: (prop) => {
-              return (prop * 1).toFixed(CONFIG.precision);
-            },
+            is: "el-input-number",
+            precision: CONFIG.precision,
           },
         },
         {
           item: { title: "付款金额", key: "money" },
           attr: {
-            is: "el-computed-input-v2",
-            formatter: (prop) => {
-              return (prop * 1).toFixed(CONFIG.precision);
-            },
+            is: "el-input-number",
+            precision: CONFIG.precision,
           },
         },
         {
@@ -373,7 +576,14 @@ export default function useColumns() {
             title: "结算方式",
             key: "paymentMeans",
           },
-          attr: {},
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "BALATYPE_PARAM",
+            dataMapping: {
+              paymentMeans: "name",
+            },
+          },
         },
         {
           item: {
@@ -395,12 +605,21 @@ export default function useColumns() {
           item: {
             title: "组织名称",
             key: "orgName",
+            width: "auto",
+          },
+          attr: {
+            is: "el-popover-select-v2",
+            valueKey: "name",
+            referName: "ORG_PARAM",
+            dataMapping: {
+              org: "code",
+              orgName: "name",
+            },
           },
-          attr: {},
         },
-        { item: { title: "组织编码", key: "org" }, attr: {} },
+        { item: { title: "组织编码", key: "org", width: "auto" }, attr: {} },
       ],
     },
   ];
-  return { FormColumns, TabColumns };
+  return { TableColumns, TabColumns };
 }

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

@@ -1,50 +1,46 @@
 <script>
 import useColumns from "./columns";
-import { initParams } from "@/utils/init.js";
 import { ITEM } from "@/api/business/purchase/contract";
 
 export default {
   name: "SeeDrawer",
   props: {
+    dict: {
+      type: Object,
+    },
     selectData: {
       type: [Array],
       require: true,
     },
   },
   components: {
-    ElDictTag: () => import("@/components/DictTag/index.vue"),
-    ElFilePreview: () => import("@/components/file-preview/index.vue"),
-    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
+    ElSuperDescriptions: () =>
+      import("@/components/super-descriptions/index.vue"),
+    ElSuperTable: () => import("@/components/super-table/index.vue"),
   },
   data() {
     const {
       TabColumns,
-      FormColumns,
+      TableColumns,
       TabColumns: [
         {
           item: { key: tabName },
         },
       ],
     } = useColumns();
-    const params = initParams([...TabColumns, ...FormColumns]);
     return {
       column: 2,
       width: "50%",
       title: "明 细",
       visible: false,
       loading: false,
-      params: params,
+      params: {},
       tabName: tabName,
       TabColumns,
-      FormColumns,
+      TableColumns,
     };
   },
   computed: {
-    $dicts: {
-      get() {
-        return this.$parent.$parent.$parent.dict.type;
-      },
-    },
     disabled: {
       get() {
         const { selectData } = this;
@@ -83,8 +79,6 @@ export default {
     //
     async hide() {
       const {
-        TabColumns,
-        FormColumns,
         TabColumns: [
           {
             item: { key: tabName },
@@ -93,7 +87,6 @@ export default {
       } = useColumns();
       this.visible = false;
       this.tabName = tabName;
-      this.params = initParams([...TabColumns, ...FormColumns]);
     },
   },
   created() {},
@@ -115,81 +108,29 @@ export default {
       :visible.sync="visible"
       append-to-body
     >
-      <el-descriptions
-        :size="$attrs.size"
+      <el-super-descriptions
+        v-model="params"
+        :dict="dict"
         :column="column"
-        border
-        style="margin: 10px"
+        :size="$attrs.size"
+        :columns="TableColumns"
       >
-        <el-descriptions-item
-          v-if="params[item.key]"
-          v-for="{ item, attr } in FormColumns"
-          :key="item.key"
-          :label="item.title"
-          :labelStyle="{ width: '150px' }"
-          :contentStyle="{ width: 'auto' }"
-        >
-          <component
-            v-if="attr.is === 'el-dict-tag'"
-            v-bind="attr"
-            v-model="params[item.key]"
-            :size="$attrs.size"
-            :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-super-descriptions>
       <el-tabs v-model="tabName" :size="$attrs.size" style="margin: 10px">
         <el-tab-pane
-          v-for="{ item, TableColumns } in TabColumns"
+          v-for="{ item, TableColumns: columns } in TabColumns"
           :key="item.key"
           :name="item.key"
           :label="item.title"
           lazy
         >
-          <el-table :size="$attrs.size" :data="params[item.key]">
-            <el-table-column
-              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">
-                <component
-                  v-if="cAttr.is === 'el-dict-tag'"
-                  v-bind="cAttr"
-                  v-model="scope.row[cItem.key]"
-                  :size="$attrs.size"
-                  :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>
+          <el-super-table
+            v-model="params[item.key]"
+            :size="$attrs.size"
+            :dict="dict"
+            :columns="columns"
+          >
+          </el-super-table>
         </el-tab-pane>
       </el-tabs>
     </el-drawer>

src/views/purchase/task/column.js

@@ -1,275 +0,0 @@
-export const TableColumns = [
-  { item: { key: "code", title: "订单生成单号" }, attr: {} },
-  {
-    item: { key: "status", title: "状态" },
-    attr: {
-      is: "el-dict-tag",
-      dictName: "purchase_task_status",
-    },
-  },
-  { item: { key: "demandCode", title: "需求单号" }, attr: {} },
-  { item: { key: "materialName", title: "物料" }, attr: {} },
-  {
-    item: { key: "materialCode", title: "物料编码" },
-    attr: {},
-  },
-  {
-    item: { key: "materialDesc", title: "物料描述" },
-    attr: {},
-  },
-  {
-    item: { key: "manufacturerName", title: "生产厂家" },
-    attr: {},
-  },
-  { item: { key: "puQty", title: "采购数量" }, attr: {} },
-  {
-    item: { key: "executeQty", title: "已执行数量" },
-    attr: {},
-  },
-  {
-    item: { key: "residueQty", title: "未执行数量" },
-    attr: {},
-  },
-  {
-    item: { key: "priceType", title: "价格类型" },
-    attr: { is: "el-dict-tag", dictName: "sys_price_type" },
-  },
-  { item: { key: "puUnitName", title: "采购单位" }, attr: {} },
-  { item: { key: "buyerName", title: "采购员" }, attr: {} },
-  {
-    item: { key: "supplierName", title: "建议供应商" },
-    attr: {},
-  },
-  { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
-  { item: { key: "currencyName", title: "币种" }, attr: {} },
-  { item: { key: "source", title: "需求来源" }, attr: {} },
-  {
-    item: { key: "customerName", title: "收货客户" },
-    attr: {},
-  },
-  {
-    item: { key: "assignSupplierName", title: "指定供应商" },
-    attr: {},
-  },
-  { item: { key: "demandDate", title: "需求时间" }, attr: {} },
-  { item: { key: "projectName", title: "项目名称" }, attr: {} },
-  {
-    item: { key: "demandPersonalName", title: "需求人" },
-    attr: {},
-  },
-  {
-    item: { key: "demandOrgName", title: "需求组织" },
-    attr: {},
-  },
-  {
-    item: { key: "demandDeptName", title: "需求部门" },
-    attr: {},
-  },
-  {
-    item: { key: "isBack", title: "是否退回" },
-    attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
-  },
-  { item: { key: "baskCause", title: "退回原因" }, attr: {} },
-  { item: { key: "backDate", title: "退回日期" }, attr: {} },
-  { item: { key: "unitName", title: "单位" }, attr: {} },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, fixed: false },
-}));
-
-export const SearchColumns = [
-  {
-    item: {
-      key: "classIds",
-      title: "物料分类",
-    },
-    attr: {
-      is: "el-popover-multiple-tree-select",
-      referName: "MATERIALCLASSIFY_PARAM",
-      valueKey: "id",
-    },
-  },
-  {
-    item: {
-      key: "materialCodes",
-      title: "物料编码",
-    },
-    attr: {
-      is: "el-popover-multiple-select-v2",
-      valueKey: "code",
-      referName: "MATERIAL_PARAM",
-    },
-  },
-  {
-    item: {
-      key: "materialDesc",
-      title: "物料描述",
-    },
-    attr: {
-      is: "el-input",
-    },
-  },
-  {
-    item: {
-      key: "code",
-      title: "单据号",
-    },
-    attr: {
-      is: "el-input",
-    },
-  },
-  {
-    item: {
-      key: "puOrgIds",
-      title: "采购组织",
-    },
-    attr: {
-      is: "el-popover-multiple-select-v2",
-      referName: "ORG_PARAM",
-      valueKey: "id",
-    },
-  },
-  {
-    item: {
-      key: "status",
-      title: "状态",
-    },
-    attr: {
-      is: "el-select",
-      dictName: "purchase_task_status",
-      clearable: true,
-    },
-  },
-  {
-    item: {
-      key: "date",
-      title: "创建时间",
-    },
-    attr: {
-      is: "el-date-picker",
-      type: "daterange",
-      unlinkPanels: true,
-      rangeSeparator: "至",
-      valueFormat: "yyyy-MM-dd",
-      endPlaceholder: "结束日期",
-      startPlaceholder: "开始日期",
-      pickerOptions: pickerOptions,
-      value: [],
-    },
-  },
-  {
-    item: {
-      key: "buyers",
-      title: "采购员",
-    },
-    attr: {
-      is: "el-popover-multiple-select-v2",
-      referName: "CONTACTS_PARAM",
-      valueKey: "code",
-    },
-  },
-  {
-    item: {
-      key: "manufacturerName",
-      title: "生产厂家",
-    },
-    attr: {
-      is: "el-input",
-    },
-  },
-  {
-    item: {
-      key: "customerName",
-      title: "收货客户",
-    },
-    attr: {
-      is: "el-popover-select-v2",
-      referName: "CUSTOMERDEPT_PARAM",
-      valueKey: "name",
-    },
-  },
-  {
-    item: {
-      key: "documentsCodes",
-      title: "需求来源",
-      span: 12,
-    },
-    attr: {
-      is: "el-input",
-      placeholder: "请输入来源单据号，多个用,分隔",
-    },
-  },
-  {
-    item: {
-      key: "materialCodes",
-      title: "物料编码",
-      span: 12,
-    },
-    attr: {
-      is: "el-input",
-      placeholder: "请输入物料编码，多个用,分隔",
-    },
-  },
-].map(({ item, attr }) => ({
-  attr,
-  item: { ...item, hidden: true, span: item.span || 6 },
-}));
-
-const pickerOptions = {
-  shortcuts: [
-    {
-      text: "昨天",
-      onClick(picker) {
-        const end = new Date();
-        const start = new Date();
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
-        picker.$emit("pick", [start, end]);
-      },
-    },
-    {
-      text: "最近三天",
-      onClick(picker) {
-        const end = new Date();
-        const start = new Date();
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
-        picker.$emit("pick", [start, end]);
-      },
-    },
-    {
-      text: "最近一周",
-      onClick(picker) {
-        const end = new Date();
-        const start = new Date();
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-        picker.$emit("pick", [start, end]);
-      },
-    },
-    {
-      text: "最近一个月",
-      onClick(picker) {
-        const end = new Date();
-        const start = new Date();
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-        picker.$emit("pick", [start, end]);
-      },
-    },
-    {
-      text: "最近三个月",
-      onClick(picker) {
-        const end = new Date();
-        const start = new Date();
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-        picker.$emit("pick", [start, end]);
-      },
-    },
-    {
-      text: "最近半年",
-      onClick(picker) {
-        const end = new Date();
-        const start = new Date();
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
-        picker.$emit("pick", [start, end]);
-      },
-    },
-  ],
-};

src/views/purchase/task/columns.js

@@ -0,0 +1,279 @@
+export default function useColumns() {
+  const TableColumns = [
+    { item: { key: "code", title: "订单生成单号" }, attr: {} },
+    {
+      item: { key: "status", title: "状态" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "purchase_task_status",
+      },
+    },
+    { item: { key: "demandCode", title: "需求单号" }, attr: {} },
+    { item: { key: "materialName", title: "物料" }, attr: {} },
+    {
+      item: { key: "materialCode", title: "物料编码" },
+      attr: {},
+    },
+    {
+      item: { key: "materialDesc", title: "物料描述" },
+      attr: {},
+    },
+    {
+      item: { key: "manufacturerName", title: "生产厂家" },
+      attr: {},
+    },
+    { item: { key: "puQty", title: "采购数量" }, attr: {} },
+    {
+      item: { key: "executeQty", title: "已执行数量" },
+      attr: {},
+    },
+    {
+      item: { key: "residueQty", title: "未执行数量" },
+      attr: {},
+    },
+    {
+      item: { key: "priceType", title: "价格类型" },
+      attr: { is: "el-dict-tag", dictName: "sys_price_type" },
+    },
+    { item: { key: "puUnitName", title: "采购单位" }, attr: {} },
+    { item: { key: "buyerName", title: "采购员" }, attr: {} },
+    {
+      item: { key: "supplierName", title: "建议供应商" },
+      attr: {},
+    },
+    { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
+    { item: { key: "currencyName", title: "币种" }, attr: {} },
+    { item: { key: "source", title: "需求来源" }, attr: {} },
+    {
+      item: { key: "customerName", title: "收货客户" },
+      attr: {},
+    },
+    {
+      item: { key: "assignSupplierName", title: "指定供应商" },
+      attr: {},
+    },
+    { item: { key: "demandDate", title: "需求时间" }, attr: {} },
+    { item: { key: "projectName", title: "项目名称" }, attr: {} },
+    {
+      item: { key: "demandPersonalName", title: "需求人" },
+      attr: {},
+    },
+    {
+      item: { key: "demandOrgName", title: "需求组织" },
+      attr: {},
+    },
+    {
+      item: { key: "demandDeptName", title: "需求部门" },
+      attr: {},
+    },
+    {
+      item: { key: "isBack", title: "是否退回" },
+      attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
+    },
+    { item: { key: "baskCause", title: "退回原因" }, attr: {} },
+    { item: { key: "backDate", title: "退回日期" }, attr: {} },
+    { item: { key: "unitName", title: "单位" }, attr: {} },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, fixed: false },
+  }));
+
+  const SearchColumns = [
+    {
+      item: {
+        key: "classIds",
+        title: "物料分类",
+      },
+      attr: {
+        is: "el-popover-multiple-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        valueKey: "id",
+      },
+    },
+    {
+      item: {
+        key: "materialCodes",
+        title: "物料编码",
+      },
+      attr: {
+        is: "el-popover-multiple-select-v2",
+        valueKey: "code",
+        referName: "MATERIAL_PARAM",
+      },
+    },
+    {
+      item: {
+        key: "materialDesc",
+        title: "物料描述",
+      },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: {
+        key: "code",
+        title: "单据号",
+      },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: {
+        key: "puOrgIds",
+        title: "采购组织",
+      },
+      attr: {
+        is: "el-popover-multiple-select-v2",
+        referName: "ORG_PARAM",
+        valueKey: "id",
+      },
+    },
+    {
+      item: {
+        key: "status",
+        title: "状态",
+      },
+      attr: {
+        is: "el-select",
+        dictName: "purchase_task_status",
+        clearable: true,
+      },
+    },
+    {
+      item: {
+        key: "date",
+        title: "创建时间",
+      },
+      attr: {
+        is: "el-date-picker",
+        type: "daterange",
+        unlinkPanels: true,
+        rangeSeparator: "至",
+        valueFormat: "yyyy-MM-dd",
+        endPlaceholder: "结束日期",
+        startPlaceholder: "开始日期",
+        pickerOptions: pickerOptions,
+        value: [],
+      },
+    },
+    {
+      item: {
+        key: "buyers",
+        title: "采购员",
+      },
+      attr: {
+        is: "el-popover-multiple-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "code",
+      },
+    },
+    {
+      item: {
+        key: "manufacturerName",
+        title: "生产厂家",
+      },
+      attr: {
+        is: "el-input",
+      },
+    },
+    {
+      item: {
+        key: "customerName",
+        title: "收货客户",
+      },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CUSTOMERDEPT_PARAM",
+        valueKey: "name",
+      },
+    },
+    {
+      item: {
+        key: "documentsCodes",
+        title: "需求来源",
+        span: 12,
+      },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入来源单据号，多个用,分隔",
+      },
+    },
+    {
+      item: {
+        key: "materialCodes",
+        title: "物料编码",
+        span: 12,
+      },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入物料编码，多个用,分隔",
+      },
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, span: item.span || 6 },
+  }));
+
+  const pickerOptions = {
+    shortcuts: [
+      {
+        text: "昨天",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+      {
+        text: "最近三天",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+      {
+        text: "最近一周",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+      {
+        text: "最近一个月",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+      {
+        text: "最近三个月",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+      {
+        text: "最近半年",
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
+          picker.$emit("pick", [start, end]);
+        },
+      },
+    ],
+  };
+
+  return { TableColumns, SearchColumns };
+}

src/views/purchase/task/dicts.js

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

src/views/purchase/task/index.vue

@@ -1,11 +1,11 @@
 <script>
+import { dicts } from "./dicts";
+import useColumns from "./columns";
 import { LIST } from "@/api/business/purchase/task";
-import { TableColumns, SearchColumns } from "./column";
-import { initParams, initDicts } from "@/utils/init.js";
 
 export default {
   name: "PuchaseTask",
-  dicts: [...initDicts([...TableColumns, ...SearchColumns])],
+  dicts: dicts,
   components: {
     DcButton: () => import("./dao-chu/index.vue"),
     MxButton: () => import("./ming-xi/index.vue"),
@@ -16,14 +16,16 @@ export default {
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
   },
   data() {
+    const { TableColumns, SearchColumns } = useColumns();
+    const params = this.$init.params(SearchColumns);
     return {
       size: "mini",
       loading: false,
-      SearchColumns: SearchColumns,
-      params: initParams(SearchColumns),
+      params: params,
       tableData: [],
       selectData: [],
       TableColumns: TableColumns,
+      SearchColumns: SearchColumns,
       page: { pageNum: 1, pageSize: 10, total: 0 },
     };
   },
@@ -92,7 +94,7 @@ export default {
     useReset() {
       this.page.pageNum = 1;
       this.page.pageSize = 10;
-      this.params = initParams(SearchColumns);
+      this.params = initParams(this.SearchColumns);
       this.useQuery(this.params, this.page);
     },
     // 选 择
@@ -123,8 +125,8 @@ export default {
       @reset="useReset"
       @submit="useQuery(params, page)"
     ></el-super-search>
-    <div style="padding: 0 20px; text-align: right">
-      <el-button-group style="margin: 0 10px 0 0">
+    <div style="margin: 0 0 20px 0; text-align: right">
+      <el-button-group>
         <thxq-button
           :size="size"
           :select-data="selectData"
@@ -136,7 +138,7 @@ export default {
           @success="useQuery(params, page)"
         ></xyzc-button>
       </el-button-group>
-      <el-button-group style="margin: 0 10px 0 0">
+      <el-button-group>
         <zp-button
           :size="size"
           :select-data="selectData"
@@ -146,6 +148,7 @@ export default {
         <mx-button
           v-show="false"
           :size="size"
+          :dict="dict"
           :select-data="selectData"
           ref="mingxi"
           @success="useQuery(params, page)"
@@ -170,6 +173,8 @@ export default {
       @row-dblclick="useSee"
       @selection-change="useSelect"
     >
+      <el-table-column fixed width="55" align="center" label="#" prop="$index">
+      </el-table-column>
       <el-table-column
         fixed
         width="55"
@@ -184,6 +189,7 @@ export default {
       :page.sync="page.pageNum"
       :limit.sync="page.pageSize"
       @pagination="useQuery(params, page)"
+      style="height: 32px; margin: 20px 0 0 0; padding: 0 !important"
     />
   </el-card>
 </template>
@@ -192,6 +198,9 @@ export default {
   width: calc(100% - 20px);
   height: 100%;
   margin: 10px;
-  padding: 0 0 20px 0;
+  padding: 20px;
+}
+.el-button-group + .el-button-group {
+  margin: 0 0 0 10px;
 }
 </style>

src/views/purchase/task/ming-xi/columns.js

@@ -0,0 +1,82 @@
+export default function useColumns() {
+  const TableColumns = [
+    { item: { key: "code", title: "订单生成单号" }, attr: {} },
+    {
+      item: { key: "status", title: "状态" },
+      attr: {
+        is: "el-dict-tag",
+        dictName: "purchase_task_status",
+      },
+    },
+    { item: { key: "demandCode", title: "需求单号" }, attr: {} },
+    { item: { key: "materialName", title: "物料" }, attr: {} },
+    {
+      item: { key: "materialCode", title: "物料编码" },
+      attr: {},
+    },
+    {
+      item: { key: "materialDesc", title: "物料描述" },
+      attr: {},
+    },
+    {
+      item: { key: "manufacturerName", title: "生产厂家" },
+      attr: {},
+    },
+    { item: { key: "puQty", title: "采购数量" }, attr: {} },
+    {
+      item: { key: "executeQty", title: "已执行数量" },
+      attr: {},
+    },
+    {
+      item: { key: "residueQty", title: "未执行数量" },
+      attr: {},
+    },
+    {
+      item: { key: "priceType", title: "价格类型" },
+      attr: { is: "el-dict-tag", dictName: "sys_price_type" },
+    },
+    { item: { key: "puUnitName", title: "采购单位" }, attr: {} },
+    { item: { key: "buyerName", title: "采购员" }, attr: {} },
+    {
+      item: { key: "supplierName", title: "建议供应商" },
+      attr: {},
+    },
+    { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
+    { item: { key: "currencyName", title: "币种" }, attr: {} },
+    { item: { key: "source", title: "需求来源" }, attr: {} },
+    {
+      item: { key: "customerName", title: "收货客户" },
+      attr: {},
+    },
+    {
+      item: { key: "assignSupplierName", title: "指定供应商" },
+      attr: {},
+    },
+    { item: { key: "demandDate", title: "需求时间" }, attr: {} },
+    { item: { key: "projectName", title: "项目名称" }, attr: {} },
+    {
+      item: { key: "demandPersonalName", title: "需求人" },
+      attr: {},
+    },
+    {
+      item: { key: "demandOrgName", title: "需求组织" },
+      attr: {},
+    },
+    {
+      item: { key: "demandDeptName", title: "需求部门" },
+      attr: {},
+    },
+    {
+      item: { key: "isBack", title: "是否退回" },
+      attr: { is: "el-dict-tag", dictName: "sys_yes_no" },
+    },
+    { item: { key: "baskCause", title: "退回原因" }, attr: {} },
+    { item: { key: "backDate", title: "退回日期" }, attr: {} },
+    { item: { key: "unitName", title: "单位" }, attr: {} },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, fixed: false },
+  }));
+
+  return { TableColumns };
+}

src/views/purchase/task/ming-xi/index.vue

@@ -1,27 +1,31 @@
 <script>
-import { TableColumns } from "../column";
-import { initDicts } from "@/utils/init.js";
+import useColumns from "./columns";
 import { ITEM } from "@/api/business/purchase/task";
+
 export default {
   name: "SeeDrawer",
-  dicts: [...initDicts(TableColumns)],
   props: {
+    dict: {
+      type: Object,
+    },
     selectData: {
       type: [Array],
       require: true,
     },
   },
   components: {
-    ElDictTag: () => import("@/components/DictTag/index.vue"),
+    ElSuperDescriptions: () =>
+      import("@/components/super-descriptions/index.vue"),
   },
   data() {
+    const { TableColumns } = useColumns();
     return {
       title: "明 细",
       width: "25%",
       column: 1,
       visible: false,
       loading: false,
-      columns: TableColumns,
+      TableColumns: TableColumns,
       params: {},
     };
   },
@@ -78,28 +82,14 @@ export default {
       :visible.sync="visible"
       append-to-body
     >
-      <el-descriptions
-        :size="$attrs.size"
+      <el-super-descriptions
+        v-model="params"
+        :dict="dict"
         :column="column"
-        border
-        style="margin: 10px"
+        :size="$attrs.size"
+        :columns="TableColumns"
       >
-        <el-descriptions-item
-          v-if="params[item.key]"
-          v-for="({ item, attr }, index) in columns"
-          :key="index"
-          :label="item.title"
-        >
-          <component
-            v-if="attr.is === 'el-dict-tag'"
-            v-bind="attr"
-            v-model="params[item.key]"
-            :size="$attrs.size"
-            :options="dict.type[attr.dictName]"
-          ></component>
-          <component is="span" v-else>{{ params[item.key] }}</component>
-        </el-descriptions-item>
-      </el-descriptions>
+      </el-super-descriptions>
     </el-drawer>
   </el-button>
 </template>