采购订单列表页主表子表修改行配置，主表实现行隐藏

src/components/super-table/index.vue

@@ -1,6 +1,6 @@
 <template>
+  <!-- v-if="innerValue.length" -->
   <el-table
-    v-if="innerValue.length"
     v-bind="$attrs"
     v-on="$listeners"
     :data="innerValue"
@@ -36,13 +36,18 @@
           v-bind="attr"
           v-model="scope.row[item.key]"
         ></component>
+        <component
+          v-else-if="attr.is === 'el-checkbox'"
+          v-bind="attr"
+          v-model="scope.row[item.key]"
+        ></component>
         <component v-else is="span">{{
           scope.row[item.key] || "--"
         }}</component>
       </template>
     </el-table-column>
   </el-table>
-  <el-empty v-else :image-size="200"></el-empty>
+  <!-- <el-empty v-else :image-size="200"></el-empty> -->
 </template>
 
 <script>

src/views/purchase/purchase-order/index.vue

@@ -5,19 +5,31 @@ import orderApi from "@/api/business/purchase/purchase-order";
 import {
   initPage,
   initParams,
-  initDicts,
+  // initDicts,
 } from "@/utils/init/index.js";
+import {  initDicts } from "@/utils/init.js";
+
+const allColumns = [...TableColumns, ...SearchColumns];
+
+TabColumns.forEach(column =>{
+  allColumns.push(...column.tableColumns)
+})
 
 
 export default {
   name: "PuchaseOrder",
-  dicts: initDicts(SelectColumns),
+  // dicts: initDicts(SelectColumns),
+  dicts: [...initDicts(allColumns)],
   components: {
     AddDrawer: () => import('./add/index.vue'),
     SeeDrawer: () => import('./see/index.vue'),
     EditDrawer: () => import('./edit/index.vue'),
     PurchaseReturnDrawer: () => import('./purchaseReturn/index.vue'),
-  },
+    ElHideTableColumnButton: () =>
+      import("@/components/hide-table-column/index.vue"),
+    ElSuperTable: () => import("@/components/super-table/index.vue"),
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    },
   data() {
     const initTabColumns = () => TabColumns;
     return {
@@ -52,6 +64,16 @@ export default {
         ? this.searchColumns.slice(0, 4)
         : this.searchColumns;
     },
+    // tableShowColumns:{
+    //   get() {
+    //     return this.tableColumns.filter(({ attr }) => attr.isHidden);
+    //   },
+    // },
+    $dicts: {
+      get: function () {
+        return this.dict.type;
+      },
+    },
   },
   created() {
     // this.fetchList(this.params, this.page);
@@ -61,8 +83,11 @@ export default {
     async fetchList(data, params) {
 
       try {
+
         this.loading = true;
+
         params['isAsc'] = 'desc';
+        
         params['orderByColumn'] = 'updateTime';
         
         const { code, msg, rows, total } = await orderApi.list(data, params);
@@ -92,54 +117,66 @@ export default {
 
     // 刷新操作
     handleRefreshList() {
+
       this.page = initPage();
+
       this.checkedList = [];
               
       this.checkedTabList = [];
 
       this.primaryResource = {};
+
       this.fetchList(this.params, this.page);
     },
     // 查询操作
     handleQueryList() {
+
       let {date} = this.params;
+
       this.params.startDate = date ? date[0] :'';
+
       this.params.endDate = date ? date[1] : '';
+
       this.fetchList(this.params, this.page);
+
     },
     // 重置操作
     handleResetList() {
+
       this.page = initPage();
+
       this.params = initParams(SearchColumns);
+
       this.fetchList(this.params, this.page);
+
     },
     handleTabClick() { },
     // 新增
     handleOpenAddDrawer(copyVal) {
+
       const { setVisible, setCopyParams } = this.$refs.addDrawerFef;
+
       setVisible(true,(copyVal.id && copyVal.id != '') ? true :false);
 
       copyVal.id && copyVal.id != '' && setCopyParams(copyVal.id);
     },
     // 复制
     handleCopy() {
-
-      // let rowDetails = {
-      //   ... this.checkedList[0],
-      //   id: '',
-      //   code: '',
-      //   status: '0',
-      //   source: '3',
-      // };
       this.handleOpenAddDrawer(this.checkedList[0]);
     },
     // 查看
     async handleOpenSeeDrawer(row) {
+
       window.clearInterval(this.timeOut);
+
       const { id } = row;
+
       const { setVisible, fetchItem } = this.$refs.seeDrawerRef;
+
       await setVisible(true);
+
       await fetchItem(id);
+
     },
     // 编辑、修订
     async handleOpenEditDrawer(row) {
@@ -275,10 +312,7 @@ export default {
           }
 
         })
-      } catch (error) {
-      } finally {
-      }
-      
+      } catch (error) {} 
     },
 
     // 判断“整单退回”按钮
@@ -316,9 +350,13 @@ export default {
     },
     // 行退回
     handleLineReturn(){
+
       let ids = this.checkedTabList.map(checked => checked.id);
+
       console.log(ids,'行退回ids');
+
       this.handleReturn(this.primaryResource.id,ids);
+
     },
     // 退回接口
     handleReturn(id,documentIds){
@@ -331,9 +369,13 @@ export default {
         }).then(async ({ value }) => {
 
           let data = {
+
             id:Number(id),
+
             documentIds:documentIds.map(ids =>Number(ids)),
+
             baskCause: value,
+            
           };
 
           console.log(data);
@@ -374,7 +416,6 @@ export default {
 
           let puOrderIds = this.checkedList.map(order => Number(order.id));
 
-          // console.log(puOrderIds,'puOrderIds');
           let { code } = await orderApi.close({ puOrderIds });
 
           if (code === 200) {
@@ -389,29 +430,33 @@ export default {
     async handlePaymentRequest(){
       // name:工号
       try {
-        // let {name} = this.$store.state.user;
 
         let {code,msg} = await orderApi.payRequest();
 
         if(code == 200){
+
           msg.replace(/\/n/g,'');
+
           let url = `uclient://start/http://172.16.100.2:8081?ssoKey=${msg}&uiloader=nc.uap.lfw.applet.PortalUILoader&nodeId=40040407`
 
           window.location.href = url;
 
         }
 
-      } catch (error) {
-        
-      }
+      } catch (error) {}
       
     },
     // 退货
     async handlePurchaseReturn(){
+
       const { id } = this.checkedList[0];
+
       const { setVisible, fetchStorage } = this.$refs.PurchaseReturnDrawerRef;
+
       await setVisible(true);
+
       await fetchStorage(id);
+
     },
     // 主表Select框
     handleSelect(selection, row) {
@@ -430,20 +475,34 @@ export default {
     },
     // 保留两位小数，补位
     keepTwoDecimalStr(num) {
+
       if(num){
+
           const result = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
+
           let s = result.toString();
+
           let rs = s.indexOf('.');
+
           if (rs < 0) {
+
             rs = s.length;
+
             s += '.';
+
           }
           while (s.length <= rs + 2) {
+
             s += '0';
+
           }
+
           return s;
+
       }else{
+
         return '';
+
       }
     }
   }
@@ -567,38 +626,96 @@ export default {
       <el-col :span="24" style="text-align: right;margin: 0 10px 0 0">
 
         <!-- <el-button-group style="margin-left: 10px"> -->
-        <el-button size="mini" type="primary" plain @click="handleOpenAddDrawer"
+        <el-button size="mini" type="primary" @click="handleOpenAddDrawer"
           v-hasPermi="['material:order:add']">新增</el-button>
         <!-- </el-button-group> -->
 
         <el-button-group style="margin-left: 10px">
-          <el-button size="mini" :disabled="checkedList.length != 1" @click="handleCopy">复制</el-button>
-          <el-button size="mini" @click="handleBatchSubmit">批量提交</el-button>
+          <el-button type="primary" size="mini" :disabled="checkedList.length != 1" @click="handleCopy">复制</el-button>
+          <el-button type="primary" size="mini" @click="handleBatchSubmit">批量提交</el-button>
         </el-button-group>
 
         <el-button-group style="margin-left: 10px" :key="checkedList.length + 1">
-          <el-button size="mini" @click="handleAllReturn" :disabled="judgeIsAllReturn()">整单退回</el-button>
-          <el-button size="mini" @click="handleAllClose" :disabled="judgeIsAllClose()">整单关闭</el-button>
+          <el-button type="primary" size="mini" @click="handleAllReturn" :disabled="judgeIsAllReturn()">整单退回</el-button>
+          <el-button type="primary" size="mini" @click="handleAllClose" :disabled="judgeIsAllClose()">整单关闭</el-button>
         </el-button-group>
 
-        <el-button-group style="margin-left: 10px">
+        <el-button-group style="margin:0 10px">
           <!-- <el-button size="mini" 
             :disabled="!(checkedList.length == 1 && checkedList[0].deliveryStatus == '0')"
             :key="checkedList.length"
             @click="handlePurchaseReturn"
           >采购退货</el-button> -->
-          <el-button size="mini" @click="handlePaymentRequest">付款申请</el-button>
+          <el-button type="primary" size="mini" @click="handlePaymentRequest">付款申请</el-button>
 
           <!-- <el-button size="mini">附件管理</el-button>
           <el-button size="mini">单据追溯</el-button> -->
         </el-button-group>
+
+        <el-hide-table-column-button
+          v-model="tableColumns"
+          size="mini"
+        ></el-hide-table-column-button>
+
       </el-col>
     </el-row>
 
-    <el-table 
+    <el-super-table
+      v-model="tableData"
+      size="mini"
+      :dict="dict"
+      :columns="tableColumns"
+      @row-dblclick="handleOpenSeeDrawer" 
+      @row-click="handleDetailsData" 
+      @select="handleSelect"
+    >
+
+      <el-table-column type="selection" width="45" ></el-table-column>
+      <el-table-column type="index" width="50" label="序号"></el-table-column>
+      <el-table-column fixed="right" label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button 
+              v-if="scope.row.status == '2'"
+              type="text" 
+              size="small" 
+              @click.stop="handleOpenEditDrawer(scope.row)"
+              v-hasPermi="['material:order:edit']">
+            修订
+            </el-button>
+            <el-button 
+              v-if="scope.row.status == '0' || scope.row.status == '3'"
+              type="text" 
+              size="small" 
+              @click.stop="handleOpenEditDrawer(scope.row)"
+              v-hasPermi="['material:order:edit']">
+            编辑
+            </el-button>
+            <!-- 0=自由态，1=审批中，2=已审核，3=已驳回 4=提交中-->
+            <el-button 
+              v-if="(scope.row.status == '0' || scope.row.status == '3') && scope.row.source == '3'" 
+              type="text" 
+              size="small" 
+              @click.stop="handleDeleteList(scope.row)"
+              v-hasPermi="['material:order:remove']"
+            >删除</el-button>
+            <el-button 
+              v-if="scope.row.status == '0' || scope.row.status == '3'" 
+              type="text" 
+              size="mini"
+              v-hasPermi="['material:order:toOa']" 
+              @click.stop="handleSubmit(scope.row)"
+            >提交</el-button>
+          </template>
+      </el-table-column>
+    
+    </el-super-table>
+
+    <!-- <el-table 
       @row-dblclick="handleOpenSeeDrawer" 
       @row-click="handleDetailsData" 
       :data="tableData" 
+      border
+      stripe
       size="mini"
       highlight-current-row
       @select="handleSelect"
@@ -608,28 +725,28 @@ export default {
       <el-table-column type="selection" width="45" ></el-table-column>
       <el-table-column type="index" width="50" label="序号"></el-table-column>
       <el-table-column 
-        v-for="(column, index) in tableColumns" 
+        v-for="({item}, index) in tableShowColumns" 
         :key="index" 
-        :prop="column.key" 
-        :label="column.title"
-        :width="column.width || 180" 
-        :show-overflow-tooltip="column.showOverflowTooltip || true"
+        :prop="item.key" 
+        :label="item.title"
+        :width="item.width || 180" 
+        :show-overflow-tooltip="item.showOverflowTooltip || true"
       >
 
         <template slot-scope="scope">
-          <dict-tag v-if="column.inputType === 'Select'" 
+          <dict-tag v-if="item.inputType === 'Select'" 
             size="small" 
-            :value="scope.row[column.key]"
-            :options="dict.type[column.referName]"
+            :value="scope.row[item.key]"
+            :options="dict.type[item.referName]"
            />
 
-          <el-checkbox v-else-if="column.inputType === 'Checkbox'"
-            v-model="scope.row[column.key]" 
+          <el-checkbox v-else-if="item.inputType === 'Checkbox'"
+            v-model="scope.row[item.key]" 
             disabled 
             true-label="Y"
             false-label="N"
           > </el-checkbox>
-          <span v-else>{{column.precision ? keepTwoDecimalStr(scope.row[column.key]):scope.row[column.key] }}</span>
+          <span v-else>{{item.precision ? keepTwoDecimalStr(scope.row[item.key]):scope.row[item.key] }}</span>
         </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作" width="120">
@@ -650,7 +767,6 @@ export default {
             v-hasPermi="['material:order:edit']">
            编辑
           </el-button>
-          <!-- 0=自由态，1=审批中，2=已审核，3=已驳回 4=提交中-->
           <el-button 
             v-if="(scope.row.status == '0' || scope.row.status == '3') && scope.row.source == '3'" 
             type="text" 
@@ -668,7 +784,7 @@ export default {
         </template>
       </el-table-column>
 
-    </el-table>
+    </el-table> -->
 
     <pagination
       v-show="page.total>0"
@@ -694,7 +810,21 @@ export default {
           :label="column.title" 
           :name="column.key"
         >
-          <el-table 
+          <el-super-table
+            v-model="tabTableDatas[column.key]"
+            size="mini"
+            :dict="dict"
+            :columns="column.tableColumns"
+            @select="handleTabSelect"
+          >
+            <el-table-column
+              v-if=" tabName === 'puOrderItemList'" 
+              type="selection" 
+              width="45"
+            ></el-table-column>
+            <el-table-column type="index" width="50" label="序号"></el-table-column>
+          </el-super-table>
+          <!-- <el-table 
             :data="tabTableDatas[column.key]" 
             style="width: 100%" 
             highlight-current-row
@@ -730,7 +860,7 @@ export default {
                 <span v-else>{{cColumn.precision ? keepTwoDecimalStr(scope.row[cColumn.key]): scope.row[cColumn.key] }}</span>
               </template>
             </el-table-column>
-          </el-table>
+          </el-table> -->
         </el-tab-pane>
         
       </el-tabs>