采购工作台子表组件优化

src/views/purchase/workSpace/columns.js

@@ -30,7 +30,7 @@ export default function useColumns() {
     {
       item: { key: "docSubject", title: "标题", width: "auto" },
       attr: {
-        
+
       },
     },
     {
@@ -41,262 +41,508 @@ export default function useColumns() {
 
   // 采购需求单
   const PU_DEMAND_RULE = [
-    { label: "物料编码", prop: "materialCode" },
-    { label: "物料名称", prop: "materialName" },
-    { label: "规格", prop: "specification" },
-    { label: "单位", prop: "unitName", width: 50 },
-    { label: "生产厂家/代理人", prop: "manufacturerName" },
-    { label: "实际(业务)需求量", prop: "qty", width: 130 },
-    { label: "月均销量", prop: "averageQtyMonth", width: 80 },
-    { label: "需求可用周期", prop: "demandPeriod", width: 80 },
-    { label: "业务备注", prop: "remark" },
-    {
-      label: "紧急标识",
-      prop: "isUrgency",
-      // formatter: function (row, column, cellValue, index) {
-      //   return row.isUrgency == "Y" ? "是" : "否";
-      // },
+    {
+      item: { title: "物料编码", key: "materialCode" },
+      attr: {}
+    },
+    {
+      item: { title: "物料名称", key: "materialName" },
+      attr: {}
+    },
+    {
+      item: { title: "规格", key: "specification" },
+      attr: {}
+    },
+    {
+      item: { title: "单位", key: "unitName", width: 50 },
+      attr: {}
+    },
+    {
+      item: { title: "生产厂家/代理人", key: "manufacturerName" },
+      attr: {}
+    },
+    {
+      item: { title: "实际(业务)需求量", key: "qty", width: 130 },
+      attr: {}
+    },
+    {
+      item: { title: "月均销量", key: "averageQtyMonth", width: 80 },
+      attr: {}
+    },
+    {
+      item: { title: "需求可用周期", key: "demandPeriod", width: 80 },
+      attr: {}
+    },
+    {
+      item: { title: "业务备注", key: "remark" },
+      attr: {}
+    },
+    {
+      item: { title: "紧急标识", key: "isUrgency", width: 80, },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
-      width: 80,
     },
     {
-      label: "补单标识",
-      prop: "isReplenishment",
-      // formatter: function (row, column, cellValue, index) {
-      //   return row.isReplenishment == "Y" ? "是" : "否";
-      // },
+      item: {
+        title: "补单标识", key: "isReplenishment", width: 80,
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
-      },
-      width: 80,
+      }
     },
-  ];
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      width: item.width || 150
+    },
+  }));;
+
 
   const ALLOT_RULE = [
-    { label: "物料编码", prop: "materialCode", width: 120 },
-    { label: "物料名称", prop: "materialName" },
-    { label: "规格", prop: "specification" },
-    { label: "单位", prop: "unitName" },
-    { label: "生产厂家/代理人", prop: "manufacturerName" },
-    { label: "调出仓库", prop: "deliveryWarehouseName" },
-    { label: "调出货位", prop: "deliveryAllocationName" },
-    { label: "数量", prop: "qty", width: 50 },
-    { label: "调入仓库", prop: "storageWarehouseName" },
-    { label: "调入货位", prop: "storageAllocationName" },
-  ];
+    {
+      item: { title: "物料编码", key: "materialCode", width: 120 },
+      attr: {}
+    },
+    {
+      item: { title: "物料名称", key: "materialName" },
+      attr: {}
+    },
+    {
+      item: { title: "规格", key: "specification" },
+      attr: {}
+    },
+    {
+      item: { title: "单位", key: "unitName" },
+      attr: {}
+    },
+    {
+      item: { title: "生产厂家/代理人", key: "manufacturerName" },
+      attr: {}
+    },
+    {
+      item: { title: "调出仓库", key: "deliveryWarehouseName" },
+      attr: {}
+    },
+    {
+      item: { title: "调出货位", key: "deliveryAllocationName" },
+      attr: {}
+    },
+    {
+      item: { title: "数量", key: "qty", width: 50 },
+      attr: {}
+    },
+    {
+      item: { title: "调入仓库", key: "storageWarehouseName" },
+      attr: {}
+    },
+    {
+      item: { title: "调入货位", key: "storageAllocationName" },
+      attr: {}
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      width: item.width || 150
+    },
+  }));;
+
 
   // 物料申请单
   const MATERIAL_APPLY_RULE = [
-    { prop: 'name', label: '物料名称', },
-    { prop: 'code', label: '物料编码', },
-    { prop: 'specification', label: '规格' },
-    { prop: 'model', label: '型号', },
-    { prop: 'unitName', label: '计量单位', },
-    { prop: 'manufacturerName', label: '生产厂家/代理人', },
-    { prop: 'registrant', label: '注册人/上市许可持有人', },
-    { prop: 'productionPermit', label: '生产许可证', },
-    {
-      prop: 'storageCondition',
-      label: '存储条件',
+    {
+      item: { key: 'name', title: '物料名称', },
+      attr: {}
+    },
+    {
+      item: { key: 'code', title: '物料编码', },
+      attr: {}
+    },
+    {
+      item: { key: 'specification', title: '规格' },
+      attr: {}
+    },
+    {
+      item: { key: 'model', title: '型号', },
+      attr: {}
+    },
+    {
+      item: { key: 'unitName', title: '计量单位', },
+      attr: {}
+    },
+    {
+      item: { key: 'manufacturerName', title: '生产厂家/代理人', },
+      attr: {}
+    },
+    {
+      item: { key: 'registrant', title: '注册人/上市许可持有人', },
+      attr: {}
+    },
+    {
+      item: { key: 'productionPermit', title: '生产许可证', },
+      attr: {}
+    },
+    {
+      item: {
+        key: 'storageCondition',
+        title: '存储条件',
+        width: 100
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_storage_condition",
       },
     },
     {
-      prop: 'transportationCondition',
-      label: '运输条件',
+      item: {
+        key: 'transportationCondition',
+        title: '运输条件',
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_conditions_carriage",
       },
     },
-    { prop: 'originPlaceName', label: '产地', },
-    { prop: 'serviceLife', label: '使用期限/次数', },
-    { prop: 'brand', label: '品牌', },
-    { prop: 'classifyName', label: '四级分类', },
-    { prop: 'packExplain', label: '包装说明', },
-    { prop: 'deliveryPeriod', label: '交货周期', },
-    { prop: 'minOrderQty', label: '最小起订量', },
-    { prop: 'minPackQty', label: '最小包装量', },
-    { prop: 'minBatchQty', label: '最小批量', },
-    { prop: 'diCode', label: 'DI码', },
-    { prop: 'healthCode', label: '医保代码', },
-    { prop: 'manufacturersMaterialCode', label: '厂家物料编码', },
-    { prop: 'purchasingOrganizationName', label: '默认采购组织', },
-    { prop: 'puPersonnelName', label: '负责采购员', },
-    { prop: 'version', label: '版本号', },
-    {
-      prop: 'isMedicine',
-      label: '医药物料',
+    {
+      item: { key: 'originPlaceName', title: '产地', },
+      attr: {}
+    },
+    {
+      item: { key: 'serviceLife', title: '使用期限/次数', },
+      attr: {}
+    },
+    {
+      item: { key: 'brand', title: '品牌', },
+      attr: {}
+    },
+    {
+      item: { key: 'classifyName', title: '四级分类', },
+      attr: {}
+    },
+    {
+      item: { key:'packExplain', title: '包装说明', },
+      attr: {}
+    },
+    {
+      item: { key: 'deliveryPeriod', title: '交货周期', },
+      attr: {}
+    },
+    {
+      item: { key: 'minOrderQty', title: '最小起订量', },
+      attr: {}
+    },
+    {
+      item: { key: 'minPackQty', title: '最小包装量', },
+      attr: {}
+    },
+    {
+      item: { key: 'minBatchQty', title: '最小批量', },
+      attr: {}
+    },
+    {
+      item: { key: 'diCode', title: 'DI码', },
+      attr: {}
+    },
+    {
+      item: { key: 'healthCode', title: '医保代码', },
+      attr: {}
+    },
+    {
+      item: { key: 'manufacturersMaterialCode', title: '厂家物料编码', },
+      attr: {}
+    },
+    {
+      item: { key: 'purchasingOrganizationName', title: '默认采购组织', },
+      attr: {}
+    },
+    {
+      item: { key: 'puPersonnelName', title: '负责采购员', },
+      attr: {}
+    },
+    {
+      item: { key: 'version', title: '版本号', },
+      attr: {}
+    },
+    {
+      item: {
+        key: 'isMedicine',
+        title: '医药物料',
+        width: 100,
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
     },
     {
-      prop: 'serialNoManager',
-      label: '序列号管理',
+      item: {
+        key: 'serialNoManager',
+        title: '序列号管理',
+        width: 100,
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
     },
     {
-      prop: 'isInventoryStatus',
-      label: '批号及库存状态管理',
+      item: {
+        key: 'isInventoryStatus',
+        title: '批号及库存状态管理',
+        width: 100,
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
     },
     {
-      prop: 'expiryDateManagerment',
-      label: '效期管理',
+      item: {
+        key: 'expiryDateManagerment',
+        title: '效期管理',
+        width: 100,
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
     },
     {
-      prop: 'expiryUnitId',
-      label: '效期单位',
+      item: {
+        key: 'expiryUnitId',
+        title: '效期单位',
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "period_unit",
       },
     },
-    { prop: 'usefulLife', label: '有效期', },
     {
-      prop: 'usefulLifeUnitId',
-      label: '有效期至单位',
+      item: { key: 'usefulLife', title: '有效期', },
+      attr: {}
+    },
+    {
+      item: {
+        key: 'usefulLifeUnitId',
+        title: '有效期至单位',
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "expiry_date",
       },
     },
     {
-      prop: 'nearOnsetManagerment',
-      label: '近效期管理',
+      item: {
+        key: 'nearOnsetManagerment',
+        title: '近效期管理',
+        width: 100,
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
     },
-    { prop: 'recentWarningPeriod', label: '近效期预警天数', },
-    { prop: 'materialRateName', label: '物料税类', },
-    { prop: 'failCause', label: '同步失败原因', },
     {
-      prop: 'isDrug',
-      label: '是否药品',
+      item: { key: 'recentWarningPeriod', title: '近效期预警天数', },
+      attr: {}
+    },
+    {
+      item: { key: 'materialRateName', title: '物料税类', },
+      attr: {}
+    },
+    {
+      item: { key: 'failCause', title: '同步失败原因', },
+      attr: {}
+    },
+    {
+      item: {
+        key: 'isDrug',
+        title: '是否药品',
+        width: 100,
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
     },
-    { prop: 'ratifyBatchNo', label: '批准文号', },
-    { prop: 'registrationNo', label: '注册证号/备案凭证编号', },
-    { prop: 'dosageFrom', label: '剂型', },
     {
-      prop: 'medicalInstruments',
-      label: '管理类别',
+      item: { key: 'ratifyBatchNo', title: '批准文号', },
+      attr: {}
+    },
+    {
+      item: { key: 'registrationNo', title: '注册证号/备案凭证编号', },
+      attr: {}
+    },
+    {
+      item: { key: 'dosageFrom', title: '剂型', },
+      attr: {}
+    },
+    {
+      item: {
+        key: 'medicalInstruments',
+        title: '管理类别',
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "medical_instruments",
       },
     },
-    { prop: 'oriRegistrationNo', label: '旧注册证号', },
     {
-      prop: 'curingType',
-      label: '养护类型',
+      item: { key: 'oriRegistrationNo', title: '旧注册证号', },
+      attr: {}
+    },
+    {
+      item: {
+        key: 'curingType',
+        title: '养护类型',
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "curing_type",
       },
     },
-    { prop: 'drugCode', label: '药品类别编码', },
-    { prop: 'drugName', label: '药品类别名称', },
-
-    // { prop: 'orgName', label: '所属组织', },
-    // { prop: 'barCode', label: '条形码', },
-    // { prop: 'height', label: '高度', },
-    // { prop: 'width', label: '宽度', },
-
-    // { prop: 'length', label: '长度', },
-    // { prop: 'oneClass', label: '一级分类', },
-
-
-    // { prop: 'twoClass', label: '二级分类', },
-
-
-    // { prop: 'threeClass', label: '三级分类', },
+    {
+      item: { key: 'drugCode', title: '药品类别编码', },
+      attr: {}
+    },
+    {
+      item: { key: 'drugName', title: '药品类别名称', },
+      attr: {}
+    },
+    // { key: 'orgName', title: '所属组织', },
+    // { key: 'barCode', title: '条形码', },
+    // { key: 'height', title: '高度', },
+    // { key: 'width', title: '宽度', },
+    // { key: 'length', title: '长度', },
+    // { key: 'oneClass', title: '一级分类', },
+    // { key: 'twoClass', title: '二级分类', },
+    // { key: 'threeClass', title: '三级分类', },
     // {
-    //   prop: 'isEnable',
-    //   label: '启用状态',
+    //   key: 'isEnable',
+    //   title: '启用状态',
     //   attr: {
     //     is: "el-dict-tag",
     //     dictName: "material_enable",
     //   },
     // },
-    // { prop: 'remark', label: '备注', },
-    // { prop: 'proposerName', label: '物料申请人', },
-    // { prop: 'serviceClass', label: '服务类', },
-  ];
+    // { key: 'remark', title: '备注', },
+    // { key: 'proposerName', title: '物料申请人', },
+    // { key: 'serviceClass', title: '服务类', },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      width: item.width || 150
+    },
+  }));;
 
   // 价格申报单
   const PU_PRICE_APPLY_RULE = [
-    { label: "物料编码", prop: "materialCode", width: 120 },
-    { label: "物料名称", prop: "materialName" },
-    { label: "规格", prop: "specification" },
-    { label: "型号", prop: "model" },
-    { label: "生产厂家/代理人", prop: "manufacturerName" },
-    { label: "客户", prop: "customerName" },
-    { label: "主单位", prop: "unitName" },
-    { label: "含税单价", prop: "taxPrice", width: 80 },
-    { label: "税率", prop: "tax" },
-    { label: "价格有效期（起）", prop: "periodBegin" },
-    { label: "价格有效期（止）", prop: "periodEnd" },
-    {
-      label: "首次报批",
-      prop: "isApprovalFirst",
+    {
+      item: { title: "物料编码", key: "materialCode", width: 120 },
+      attr: {}
+    },
+    {
+      item: { title: "物料名称", key: "materialName" },
+      attr: {}
+    },
+    {
+      item: { title: "规格", key: "specification" },
+      attr: {}
+    },
+    {
+      item: { title: "型号", key: "model" },
+      attr: {}
+    },
+    {
+      item: { title: "生产厂家/代理人", key: "manufacturerName" },
+      attr: {}
+    },
+    {
+      item: { title: "客户", key: "customerName" },
+      attr: {}
+    },
+    {
+      item: { title: "主单位", key: "unitName" },
+      attr: {}
+    },
+    {
+      item: { title: "含税单价", key: "taxPrice", width: 80 },
+      attr: {}
+    },
+    {
+      item: { title: "税率", key: "tax" },
+      attr: {}
+    },
+    {
+      item: { title: "价格有效期（起）", key: "periodBegin" },
+      attr: {}
+    },
+    {
+      item: { title: "价格有效期（止）", key: "periodEnd" },
+      attr: {}
+    },
+    {
+      item: {
+        title: "首次报批",
+        key: "isApprovalFirst",
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
-      // formatter: function (row, column, cellValue, index) {
-      //   return row.isApprovalFirst == "Y" ? "是" : "否";
-      // },
     },
-    { label: "调整类型", prop: "isPriceAdjustment" },
-    { label: "最近价格", prop: "recentlyPrice", width: 80 },
-    { label: "单价差", prop: "priceDiffer", width: 80 },
-    { label: "涨幅", prop: " increase" },
-    { label: "预计年采购量", prop: "yPurchaseQuantity" },
-    { label: "预计年影响金额", prop: "yAffectedAmount" },
     {
-      label: "价格类型",
-      prop: "priceType",
+      item: { title: "调整类型", key: "isPriceAdjustment" },
+      attr: {}
+    },
+    {
+      item: { title: "最近价格", key: "recentlyPrice", width: 80 },
+      attr: {}
+    },
+    {
+      item: { title: "单价差", key: "priceDiffer", width: 80 },
+      attr: {}
+    },
+    {
+      item: { title: "涨幅", key: " increase" },
+      attr: {}
+    },
+    {
+      item: { title: "预计年采购量", key: "yPurchaseQuantity" },
+      attr: {}
+    },
+    {
+      item: { title: "预计年影响金额", key: "yAffectedAmount" },
+      attr: {}
+    },
+    {
+      item: {
+        title: "价格类型",
+        key: "priceType",
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_price_type",
       },
     },
-
-
-    { label: "申请理由", prop: "explainStr" },
-    // { label: "供应商名称1", prop: "supplierName1" },
-    // { label: "单价1", prop: "unitPrice1", width: 70 },
-    // { label: "供应商名称2", prop: "supplierName2" },
-    // { label: "单价2", prop: "unitPrice2", width: 70 },
-    // { label: "供应商名称3", prop: "supplierName3" },
-    // { label: "单价3", prop: "unitPrice3", width: 70 },
+    {
+      item: { title: "申请理由", key: "explainStr" },
+      attr: {}
+    },
+    // { title: "供应商名称1", key: "supplierName1" },
+    // { title: "单价1", key: "unitPrice1", width: 70 },
+    // { title: "供应商名称2", key: "supplierName2" },
+    // { title: "单价2", key: "unitPrice2", width: 70 },
+    // { title: "供应商名称3", key: "supplierName3" },
+    // { title: "单价3", key: "unitPrice3", width: 70 },
     // {
-    //   label: "配送价",
-    //   prop: "isDistributionPrice",
+    //   title: "配送价",
+    //   key: "isDistributionPrice",
     //   attr: {
     //     is: "el-dict-tag",
     //     dictName: "sys_number_yes_no",
@@ -305,61 +551,114 @@ export default function useColumns() {
     //   //   return row.isDistributionPrice == "Y" ? "是" : "否";
     //   // },
     // },
-    // { label: "币种名称", prop: "currencyName" },
-    // { label: "无税单价", prop: "price" },
-    // { label: "采购换算率", prop: "conversionRate" },
-    // { label: "采购单位名称", prop: "puUnitName" },
-    // { label: "单位名称", prop: "unitName" },
-    // { label: "预计年影响量", prop: "yAffectedAmount" },
-  ];
+    // { title: "币种名称", key: "currencyName" },
+    // { title: "无税单价", key: "price" },
+    // { title: "采购换算率", key: "conversionRate" },
+    // { title: "采购单位名称", key: "puUnitName" },
+    // { title: "单位名称", key: "unitName" },
+    // { title: "预计年影响量", key: "yAffectedAmount" },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      width: item.width || 150
+    },
+  }));;
+
 
   // 采购订单
   const PU_ORDER_RULE = [
-    { label: "物料编码", prop: "materialCode", width: 120 },
-    { label: "物料名称", prop: "materialName" },
-    { label: "规格", prop: "specification" },
-    { label: "生产厂家", prop: "manufacturerName" },
-    // {label: '医药物料',  prop: 'isMedcine'},
-    { label: "单位", prop: "unitName" },
-    { label: "数量", prop: "qty", width: 60 },
-    { label: "含税单价", prop: "taxPrice", width: 80 },
-    {
-      label: "价税合计",
-      prop: "money",
-      width: 80,
-      formatter: function (row, column, cellValue, index) {
-        return row.money ? parseFloat(row.money).toFixed(2) : "0.00";
-      },
-    },
-    { label: "收货客户", prop: "customerName" },
-    { label: "税率", prop: "tax" },
-    {
-      label: "赠品",
-      prop: "isGift",
-      width: 50,
+    {
+      item: { title: "物料编码", key: "materialCode", width: 120 },
+      attr: {}
+    },
+    {
+      item: { title: "物料名称", key: "materialName" },
+      attr: {}
+    },
+    {
+      item: { title: "规格", key: "specification" },
+      attr: {}
+    },
+    {
+      item: { title: "生产厂家", key: "manufacturerName" },
+      attr: {}
+    },
+    //  title: '医药物料',  key: 'isMedcine'},
+    {
+      item: { title: "单位", key: "unitName" },
+      attr: {}
+    },
+    {
+      item: { title: "数量", key: "qty", width: 60 },
+      attr: {}
+    },
+    {
+      item: { title: "含税单价", key: "taxPrice", width: 80 },
+      attr: {}
+    },
+    {
+      item: {
+        title: "价税合计",
+        key: "money",
+        width: 80,
+      },
+      attr: {
+        formatter: function (row, column, cellValue, index) {
+          return row.money ? parseFloat(row.money).toFixed(2) : "0.00";
+        },
+      }
+    },
+    {
+      item: { title: "收货客户", key: "customerName" },
+      attr: {}
+    },
+    {
+      item: { title: "税率", key: "tax" },
+      attr: {}
+    },
+    {
+      item: {
+        title: "赠品",
+        key: "isGift",
+        width: 50,
+      },
       attr: {
         is: "el-dict-tag",
         dictName: "sys_number_yes_no",
       },
-      // formatter: function (row, column, cellValue, index) {
-      //   return row.isGift == "Y" ? "是" : "否";
-      // },
     },
-    { label: "价格类型", prop: "priceType", width: 80 },
-    { label: "折扣%", prop: "nitemdiscountrate", width: 70 },
-    { label: "注册证号", prop: "registration" },
-    { label: "需求单号", prop: "demandCode" },
-  ];
+    {
+      item: { title: "价格类型", key: "priceType", width: 80 },
+      attr: {}
+    },
+    {
+      item: { title: "折扣%", key: "nitemdiscountrate", width: 70 },
+      attr: {}
+    },
+    {
+      item: { title: "注册证号", key: "registration" },
+      attr: {}
+    },
+    {
+      item: { title: "需求单号", key: "demandCode" },
+      attr: {}
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      width: item.width || 150
+    },
+  }));;
 
   return {
     SearchColumns,
     TableColumns,
-    // RULE: {
-    //   PU_DEMAND_RULE,
-    //   ALLOT_RULE,
-    //   MATERIAL_APPLY_RULE,
-    //   PU_PRICE_APPLY_RULE,
-    //   PU_ORDER_RULE,
-    // }
+    PU_DEMAND_RULE,
+    ALLOT_RULE,
+    MATERIAL_APPLY_RULE,
+    PU_PRICE_APPLY_RULE,
+    PU_ORDER_RULE,
   }
 };

src/views/purchase/workSpace/index.vue

@@ -27,12 +27,10 @@
         :height="tableHeight"
         index
         pagination
-        ref="tables"
         highlight-current-row
         storage-key="workSpaceSuperTable"
         @selection-change="(selection) => (ids = selection)"
         @row-click="rowSelect"
-        @row-dblclick="doubleClick"
         @pagination="getList({ ...page, ...params })"
       >
         <ux-table-column fixed="right" title="操作" align="center" width="180">
@@ -51,75 +49,28 @@
       </el-super-ux-table>
     </div>
 
-    
-  </el-card>
-  <!-- <div id="workSpace">
-    <el-card style="position: relative">
-
-    
-
-      <el-card class="box-card" style="margin-top: 10px">
-        <div slot="header" class="clearfix" style="line-height: 38px">
-          <span>单据概述</span>
-        </div>
-        <el-table
+    <el-tabs v-model="tabName">
+      <el-tab-pane label="单据概述" name="first">
+        <el-super-ux-table
           v-if="cols.length !== 0"
           v-loading="loading"
-          :data="sonTableList"
-          fit
-          :cell-style="{ borderColor: '#c0c0c0' }"
-          :header-cell-style="{ borderColor: '#c0c0c0' }"
-          class="exporttable"
-          max-height="410"
-          border
+          v-model="sonTableList"
+          :size="size"
+          :dict="dict"
+          :page="tabPage"
+          :columns="cols"
+          :height="tabHeight"
+          :key="checkRow.type"
+          index
+          pagination
           highlight-current-row
-          style="font-size: 12px"
-        >
-          <el-table-column
-            label="序号"
-            type="index"
-            align="center"
-            width="50px"
-          />
-          <el-table-column
-            v-for="(col, index) in cols"
-            :prop="col.prop"
-            :label="col.label"
-            :width="col.width"
-            :formatter="col.formatter"
-          >
-            <template slot-scope="scope">
-              <template v-if="col.attr">
-                <component
-                  v-if="col.attr.is === 'el-dict-tag'"
-                  v-bind="col.attr"
-                  :size="$attrs.size"
-                  :value="scope.row[col.prop]"
-                  :options="dict.type[col.attr.dictName]"
-                ></component>
-              </template>
-              <template v-else>
-                <component v-if="col.formatter" is="span">{{
-                  col.formatter(scope.row)
-                }}</component>
-                <component v-else is="span">{{
-                  scope.row[col.prop]
-                }}</component>
-              </template>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <pagination
-          :total="sonTotal"
-          :page.sync="sonQuery.pageNum"
-          :limit.sync="sonQuery.pageSize"
           @pagination="getDetailList(checkRow)"
-          style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"
-        />
-      </el-card>
-    </el-card>
-  </div> -->
+        >
+        </el-super-ux-table>
+        <el-empty v-else :image-size="80" description="暂无数据"></el-empty>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
 </template>
 
 <script>
@@ -133,36 +84,42 @@ import useColumns from "./columns";
 import { dicts } from "./dicts";
 export default {
   name: "workSpace",
-  dicts: [...dicts, "oa_templete_id"],
+  dicts: [...dicts],
   components: {
-    ElDictTag: () => import("@/components/DictTag/index.vue"),
     ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
   },
   data() {
     const page = this.$init.page();
-    const { SearchColumns, TableColumns, RULE } = useColumns();
+    const {
+      SearchColumns,
+      TableColumns,
+      PU_DEMAND_RULE,
+      ALLOT_RULE,
+      MATERIAL_APPLY_RULE,
+      PU_PRICE_APPLY_RULE,
+      PU_ORDER_RULE,
+    } = useColumns();
     const params = this.$init.params(SearchColumns);
     return {
       page: page,
-      Columns: RULE,
+      tabPage: page,
+      Columns: {
+        PU_DEMAND_RULE,
+        ALLOT_RULE,
+        MATERIAL_APPLY_RULE,
+        PU_PRICE_APPLY_RULE,
+        PU_ORDER_RULE,
+      },
       size: "mini",
       SearchColumns,
       TableColumns,
       params,
-      // queryParams: {
-      //   modelIds: [],
-      //   docSubject: "",
-      // },
+      tabName: "first",
       loading: false,
       tableList: [],
       ids: [],
       sonTableList: [],
-      sonQuery: {
-        pageNum: 1,
-        pageSize: 10,
-      },
-      sonTotal: 0,
       checkRow: {
         billCode: "",
         type: "",
@@ -177,14 +134,26 @@ export default {
       get() {
         return `${
           this.tableList.length
-            ? this.tableList.length > 6
-              ? 400
+            ? this.tableList.length > 9
+              ? 350
               : this.tableList.length * 36 + 36
             : 120
         }px`;
       },
       set() {},
     },
+    tabHeight: {
+      get() {
+        return `${
+          this.sonTableList.length
+            ? this.sonTableList.length > 5
+              ? 300
+              : this.sonTableList.length * 36 + 120
+            : 120
+        }px`;
+      },
+      set() {},
+    },
   },
   created() {
     this.resetList();
@@ -208,9 +177,9 @@ export default {
       this.page = this.$init.page();
       this.getList({ ...this.page, ...this.params });
     },
-    doubleClick(row) {
-      this.rowSelect(row);
-    },
+    // doubleClick(row) {
+    //   this.rowSelect(row);
+    // },
     rowSelect(row, column, event) {
       // this.recordIndex = this.tableList.findIndex((value, index ,arr) => {
       //   return value.billCode == row.billCode
@@ -246,7 +215,6 @@ export default {
       }
     },
     check(row) {
-      console.log(row);
       this.$router.push({
         path: row.linkUrl,
         query: { billCode: row.billCode },
@@ -315,12 +283,12 @@ export default {
         let param = {
           billCode: row.billCode,
           type: row.type,
-          ...this.sonQuery,
+          ...this.tabPage,
         };
         let { code, rows, total } = await getWorkDetailList(param);
         if (code === 200) {
           this.sonTableList = rows;
-          this.sonTotal = total;
+          this.tabPage.total = total;
         }
       } catch (error) {
       } finally {
@@ -331,30 +299,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-#workSpace {
-  padding: 12px;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-.btn_grooup {
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: flex-end;
-}
-.el-pagination {
-  margin-top: 10px;
-  text-align: right;
-}
-</style>
-<style>
-.exporttable {
-  border: solid 1px #c0c0c0;
-}
-.el-table .el-table__header-wrapper th {
-  font-size: 14px;
-}
-</style>
 <style scoped lang="scss">
 .el-card {
   width: calc(100% - 32px);
@@ -362,6 +306,8 @@ export default {
   margin: 16px;
   padding: 16px;
   border-radius: 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .el-button-group + .el-button-group {