采购订单维护-详情编辑界面增加隐藏列的按扭和功能

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

@@ -17,7 +17,10 @@ const { Columns, TabColumns } = judgeColumns();
 const NewColumns = initColumns(Columns);
 const NewTabColumns = TabColumns.map((element) => ({
   ...element,
-  tableColumns: initColumns(element.tableColumns),
+  tableColumns: initColumns(element.tableColumns).map((item, index) => ({
+    ...item,
+    hidden: true,
+  })),
 }));
 
 const SelectColumns = NewColumns.filter(
@@ -39,6 +42,7 @@ export default {
     FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
     popDialog: () => import("@/components/PopDialog/index.vue"),
     BatchImport: () => import("@/components/BatchImport/index.vue"),
+    ButtonHide: () => import("../components/hide/index.vue"),
   },
 
   data() {
@@ -86,6 +90,27 @@ export default {
       },
       set() {},
     },
+    innerColumns: {
+      get() {
+        let { tabName, tabColumns } = this;
+        let obj = tabColumns.find(({ key }) => key === tabName).tableColumns;
+
+        return obj;
+      },
+      set(value) {
+        let { tabName, tabColumns } = this;
+        this.tabColumns = tabColumns.map((item) => {
+          if (item.key === tabName) {
+            item.tableColumns = value;
+          }
+          return { ...item };
+        });
+        this.$nextTick(() => {
+          this.$refs.puOrderItemList &&
+            this.$refs.puOrderItemList[0].doLayout();
+        });
+      },
+    },
   },
   watch: {
     // 同步物料信息与执行结果
@@ -737,7 +762,8 @@ export default {
 
           let sumColumn = tabColumns
             .find((tab) => tab.key === tabName)
-            .tableColumns.filter(
+            .tableColumns.filter((item) => item.hidden)
+            .filter(
               ({ key, isSummary }) => isSummary && key === column.property
             );
 
@@ -847,6 +873,9 @@ export default {
         }
       }
     },
+    onHide(prop) {
+      this.innerColumns = prop;
+    },
   },
   created() {
     console.log("ADD CREATED", this.params);
@@ -1068,8 +1097,10 @@ export default {
             >
               <template slot="empty">暂无数据</template>
               <ux-table-column
-                v-for="(cColumn, cIndex) in column.tableColumns"
-                :key="cIndex"
+                v-for="(cColumn, cIndex) in column.tableColumns.filter(
+                  (item) => item.hidden
+                )"
+                :key="cColumn.key + cColumn.hidden"
                 :title="cColumn.title"
                 :width="cColumn.width || 80"
                 :field="cColumn.key"
@@ -1210,6 +1241,11 @@ export default {
             :fileSize="2"
           ></BatchImport>
         </el-row>
+        <el-row style="margin-top: 10px">
+          <el-col>
+            <button-hide v-model="innerColumns" @change="onHide"></button-hide>
+          </el-col>
+        </el-row>
       </el-card>
     </el-form>
   </el-drawer>

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

@@ -0,0 +1,135 @@
+<template>
+  <el-button size="mini" @click="drawer = true">
+    {{ number ? `隐藏列 ：${number}` : "隐藏列" }}
+    <el-drawer
+      :show-close="false"
+      :visible.sync="drawer"
+      size="22%"
+      title="隐藏列"
+      append-to-body
+    >
+      <template slot="title">
+        <span>隐藏列</span>
+      </template>
+      <el-input
+        v-model="key"
+        size="mini"
+        placeholder="请输入列名称"
+        style="width: 100%; padding: 0 16px 16px"
+      >
+      </el-input>
+      <el-row
+        :gutter="20"
+        style="margin: 0; display: flex; flex-direction: column"
+      >
+        <!-- <el-draggable
+          v-model="columns"
+          :group="{ item: 'key' }"
+          @change="onDraggableChange"
+        > -->
+        <el-col
+          v-for="(item, index) in searchColumns"
+          :key="index"
+          :span="24"
+          style="
+            display: flex;
+            justify-content: space-between;
+            padding: 12px 16px;
+          "
+        >
+          <span
+            style="
+              height: 20px;
+              line-height: 20px;
+              font-size: 13px;
+              flex: 1;
+              cursor: move;
+              padding: 0 12px 0 0;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              word-break: break-all;
+              white-space: nowrap;
+            "
+          >
+            <!-- <i
+              class="el-icon-mouse"
+              style="color: #72767b; margin: 0 6px 0 0"
+            ></i> -->
+            <i
+              class="el-icon-user"
+              style="color: #72767b; margin: 0 6px 0 0"
+            ></i>
+            {{ item.title }}
+          </span>
+          <el-switch
+            v-model="item.hidden"
+            size="mini"
+            @change="onDraggableChange"
+          ></el-switch>
+        </el-col>
+        <!-- </el-draggable> -->
+      </el-row>
+    </el-drawer>
+  </el-button>
+</template>
+
+<script>
+import deepCopy from "@gby/deep-copy";
+export default {
+  name: "Hide",
+  components: {
+    ElDraggable: () => import("@/components/draggable/index.vue"),
+  },
+  props: {
+    value: {
+      type: Array,
+      require: true,
+    },
+  },
+  data() {
+    return {
+      drawer: false,
+      key: "",
+    };
+  },
+  computed: {
+    columns: {
+      get() {
+        return this.$props.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+    searchColumns: {
+      get() {
+        return this.columns.filter((item) => item.title.indexOf(this.key) > -1);
+      },
+      set(value) {},
+    },
+    number: {
+      get() {
+        return this.columns.filter((item) => !item.hidden).length;
+      },
+      set(value) {},
+    },
+  },
+  watch: {},
+  methods: {
+    onClone(prop) {
+      return deepCopy(prop);
+    },
+    onDraggableChange() {
+      event.stopPropagation();
+      this.$emit("change", this.columns);
+    },
+    useSubmit() {
+      this.drawer = false;
+    },
+  },
+  created() {},
+  mounted() {},
+  destroyed() {},
+};
+</script>
+<style scoped></style>

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

@@ -19,6 +19,7 @@ export default {
     VirtualColumn,
     FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
     BatchImport: () => import("@/components/BatchImport/index.vue"),
+    ButtonHide: () => import("../components/hide/index.vue"),
   },
   data() {
     return {
@@ -60,6 +61,27 @@ export default {
       },
       set() {},
     },
+    innerColumns: {
+      get() {
+        let { tabName, tabColumns } = this;
+        let obj = tabColumns.find(({ key }) => key === tabName).tableColumns;
+
+        return obj;
+      },
+      set(value) {
+        let { tabName, tabColumns } = this;
+        this.tabColumns = tabColumns.map((item) => {
+          if (item.key === tabName) {
+            item.tableColumns = value;
+          }
+          return { ...item };
+        });
+        this.$nextTick(() => {
+          this.$refs.puOrderItemList &&
+            this.$refs.puOrderItemList[0].doLayout();
+        });
+      },
+    },
   },
   watch: {
     "params.contractType": function (newProp) {
@@ -695,7 +717,8 @@ export default {
 
           let sumColumn = tabColumns
             .find((tab) => tab.key === tabName)
-            .tableColumns.filter(
+            .tableColumns.filter((item) => item.hidden)
+            .filter(
               ({ key, isSummary }) => isSummary && key === column.property
             );
 
@@ -814,6 +837,9 @@ export default {
         }
       }
     },
+    onHide(prop) {
+      this.innerColumns = prop;
+    },
   },
   created() {},
   mounted() {},
@@ -1034,8 +1060,10 @@ export default {
                 width="60"
               ></ux-table-column>
               <ux-table-column
-                v-for="(cColumn, cIndex) in column.tableColumns"
-                :key="cIndex"
+                v-for="(cColumn, cIndex) in column.tableColumns.filter(
+                  (item) => item.hidden
+                )"
+                :key="cColumn.key + cColumn.hidden"
                 :field="cColumn.key"
                 :title="cColumn.title"
                 :width="cColumn.width || 80"
@@ -1186,6 +1214,11 @@ export default {
             :fileSize="2"
           ></BatchImport>
         </el-row>
+        <el-row style="margin-top: 10px">
+          <el-col>
+            <button-hide v-model="innerColumns" @change="onHide"></button-hide>
+          </el-col>
+        </el-row>
       </el-card>
     </el-form>
   </el-drawer>

src/views/purchase/purchase-order/edit/initColumn.js

@@ -12,7 +12,10 @@ export const editColumns = initColumns(Columns);
 export const editTabColumns = TabColumns.map((element) => 
 ({
   ...element,
-  tableColumns: initColumns(element.tableColumns),
+  tableColumns: initColumns(element.tableColumns).map((item) => ({
+    ...item,
+    hidden: true,
+  })),
 }));
 
 export const SelectColumns = editColumns.filter(column => column.inputType === 'Select')

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

@@ -18,7 +18,10 @@ const { Columns, TabColumns } = judgeColumns();
 const NewColumns = initColumns(Columns);
 const NewTabColumns = TabColumns.map((element) => ({
   ...element,
-  tableColumns: initColumns(element.tableColumns),
+  tableColumns: initColumns(element.tableColumns).map((item, index) => ({
+    ...item,
+    hidden: true,
+  })),
 }));
 //
 const SelectColumns = NewColumns.filter(
@@ -38,6 +41,7 @@ export default {
     VirtualColumn,
     FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
     FilePrint: () => import("../print/index.vue"),
+    ButtonHide: () => import("../components/hide/index.vue"),
   },
   data() {
     return {
@@ -68,6 +72,27 @@ export default {
       },
       set() {},
     },
+    innerColumns: {
+      get() {
+        let { tabName, tabColumns } = this;
+        let obj = tabColumns.find(({ key }) => key === tabName).tableColumns;
+
+        return obj;
+      },
+      set(value) {
+        let { tabName, tabColumns } = this;
+        this.tabColumns = tabColumns.map((item) => {
+          if (item.key === tabName) {
+            item.tableColumns = value;
+          }
+          return { ...item };
+        });
+        this.$nextTick(() => {
+          this.$refs.puOrderItemList &&
+            this.$refs.puOrderItemList[0].doLayout();
+        });
+      },
+    },
   },
   watch: {},
   methods: {
@@ -121,7 +146,6 @@ export default {
     },
     // 发送NC
     async handleSendNC() {
-
       try {
         let { code } = await orderApi.toNc({ puOrderId: this.params.id });
 
@@ -162,7 +186,8 @@ export default {
 
           let sumColumn = tabColumns
             .find((tab) => tab.key === tabName)
-            .tableColumns.filter(
+            .tableColumns.filter((item) => item.hidden)
+            .filter(
               ({ key, isSummary }) => isSummary && key === column.property
             );
 
@@ -186,6 +211,9 @@ export default {
       // sums[index] = sums[index] && sums[index].toFixed(2); // 保留2位小数，解决小数合计列
       return [means];
     },
+    onHide(prop) {
+      this.innerColumns = prop;
+    },
   },
   created() {},
   mounted() {},
@@ -396,7 +424,6 @@ export default {
             :label="column.title"
             :name="column.key"
           >
-           
             <ux-grid
               border
               use-virtual
@@ -420,8 +447,10 @@ export default {
                 width="60"
               ></ux-table-column>
               <ux-table-column
-                v-for="(cColumn, cIndex) in column.tableColumns"
-                :key="cIndex"
+                v-for="(cColumn, cIndex) in column.tableColumns.filter(
+                  (item) => item.hidden
+                )"
+                :key="cColumn.key + cColumn.hidden"
                 :field="cColumn.key"
                 :title="cColumn.title"
                 :width="cColumn.width || 80"
@@ -507,6 +536,11 @@ export default {
             </ux-grid>
           </el-tab-pane>
         </el-tabs>
+        <el-row style="margin-top: 10px">
+          <el-col>
+            <button-hide v-model="innerColumns" @change="onHide"></button-hide>
+          </el-col>
+        </el-row>
       </el-card>
     </el-form>
   </el-drawer>