列设置

src/views/Warehousing/components/incomeMoney.vue

@@ -1,5 +1,67 @@
 <template>
   <div>
+    <!--      列设置-->
+    <el-dialog title="提示" :visible.sync="showSetting" width="700px" v-dialogDrag append-to-body>
+      <template slot="title">
+        <div class="avue-crud__dialog__header">
+            <span class="el-dialog__title">
+            <span
+              style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
+            </span>
+        </div>
+      </template>
+      <div>配置排序列数据（拖动调整顺序）</div>
+      <div style="margin-left: 17px">
+        <el-checkbox
+          v-model="allCheck"
+          label="全选"
+          @change="allChecked"
+        ></el-checkbox>
+      </div>
+      <div style="padding: 4px; display: flex; justify-content: center">
+        <draggable
+          v-model="setRowList"
+          group="site"
+          animation="300"
+          @start="onStart"
+          @end="onEnd"
+          handle=".indraggable"
+        >
+          <transition-group>
+            <div
+              v-for="item in setRowList"
+              :key="item.surface"
+              class="listStyle"
+            >
+              <div style="width: 500px" class="indraggable">
+                <div class="progress" :style="{ width: item.width + 'px' }">
+                  <el-checkbox
+                    :label="item.name"
+                    v-model="item.checked"
+                    :true-label="0"
+                    :false-label="1"
+                  >{{ item.name }}
+                  </el-checkbox>
+                </div>
+              </div>
+              <el-input-number
+                v-model.number="item.width"
+                controls-position="right"
+                :min="1"
+                :max="500"
+                size="mini"
+              ></el-input-number>
+            </div>
+          </transition-group>
+        </draggable>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showSetting = false">取 消</el-button>
+        <el-button @click="delRow" type="danger">重 置</el-button>
+        <el-button type="primary" @click="save()">确 定</el-button>
+      </span>
+    </el-dialog>
+
     <div
         class="dialogTableTitle flex a-center jlr"
         style="
@@ -51,6 +113,14 @@
           @click="feeChange"
         >费用变更</el-button>
       </div>
+      <div style="margin: 0 10px;float: right">
+        <el-button
+          icon="el-icon-setting"
+          size="mini"
+          circle
+          @click="showSetting = !showSetting"
+        ></el-button>
+      </div>
     </div>
     <el-table
         :data="warehouseDrList"
@@ -773,6 +843,8 @@ import {operationAgreement} from "@/api/agreement/agreement";
 import {feesCheck,revokefeeCheck} from "@/api/warehouseBusiness/warehouseInStock";
 import print from "print-js";
 import Cookies from "js-cookie";
+import {addSet, resetModule, select} from '@/api/system/set';
+import draggable from "vuedraggable";
 import {
   listWarehouse,
   treeselect,
@@ -850,6 +922,9 @@ export default {
       type: Object,
     },
   },
+  components: {
+    draggable
+  },
   data() {
     return {
       Collectionoptionss: [],
@@ -874,6 +949,16 @@ export default {
       isShowInvoice: null,
       // 是否启用费用确认单
       isShowFeesConfirm: null,
+
+      // 设置列开关
+      showSetting: false,
+      setRowList: [],
+      getRowList: [],
+      showfCustomno: null,
+      //自定义列宽
+      allCheck: false,
+      drag: false,
+      tableDate: [],
     };
   },
   created() {
@@ -1224,6 +1309,79 @@ export default {
           break;
       }
     },
+
+    //列设置全选
+    allChecked() {
+      if (this.allCheck == true) {
+        this.setRowList.map((e) => {
+          return (e.checked = 0);
+        });
+      } else {
+        this.setRowList.map((e) => {
+          return (e.checked = 1);
+        });
+      }
+    },
+    //开始拖拽事件
+    onStart() {
+      this.drag = true;
+    },
+    //拖拽结束事件
+    onEnd() {
+      this.drag = false;
+    },
+    //重置列表
+    delRow() {
+      this.data = {
+        tableName: "入库收费",
+        userId: Cookies.get("userName"),
+      };
+      resetModule(this.data).then((res) => {
+        if (res.code == 200) {
+          this.showSetting = false;
+          this.setRowList = this.tableDate;
+          console.log(this.setRowList)
+          this.getRowList = this.tableDate;
+        }
+      });
+    },
+    //保存列设置
+    save() {
+      this.showSetting = false;
+      this.data = {
+        tableName: "入库收费",
+        userId: Cookies.get("userName"),
+        sysTableSetList: this.setRowList,
+      };
+      addSet(this.data).then((res) => {
+        this.getRowList = this.setRowList.filter((e) => e.checked == 0);
+      });
+    },
+    //查询列数据
+    getRow() {
+      let that = this;
+      this.data = {
+        tableName: "入库收费",
+        userId: Cookies.get("userName"),
+      };
+      select(this.data).then((res) => {
+        if (res.data.length != 0) {
+          this.getRowList = res.data.filter((e) => e.checked == 0);
+          this.setRowList = res.data;
+          this.setRowList = this.setRowList.reduce((res, item) => {
+            res.push({
+              surface: item.surface,
+              label: item.label,
+              name: item.name,
+              checked: item.checked,
+              width: item.width,
+              fixed: item.fixed,
+            });
+            return res;
+          }, []);
+        }
+      });
+    },
   },
   watch: {
     browseStatus(val) {

src/views/Warehousing/components/payMoney.vue

@@ -1,5 +1,67 @@
 <template>
   <div>
+    <!--      列设置-->
+    <el-dialog title="提示" :visible.sync="showSetting" width="700px" v-dialogDrag append-to-body>
+      <template slot="title">
+        <div class="avue-crud__dialog__header">
+            <span class="el-dialog__title">
+            <span
+              style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
+            </span>
+        </div>
+      </template>
+      <div>配置排序列数据（拖动调整顺序）</div>
+      <div style="margin-left: 17px">
+        <el-checkbox
+          v-model="allCheck"
+          label="全选"
+          @change="allChecked"
+        ></el-checkbox>
+      </div>
+      <div style="padding: 4px; display: flex; justify-content: center">
+        <draggable
+          v-model="setRowList"
+          group="site"
+          animation="300"
+          @start="onStart"
+          @end="onEnd"
+          handle=".indraggable"
+        >
+          <transition-group>
+            <div
+              v-for="item in setRowList"
+              :key="item.surface"
+              class="listStyle"
+            >
+              <div style="width: 500px" class="indraggable">
+                <div class="progress" :style="{ width: item.width + 'px' }">
+                  <el-checkbox
+                    :label="item.name"
+                    v-model="item.checked"
+                    :true-label="0"
+                    :false-label="1"
+                  >{{ item.name }}
+                  </el-checkbox>
+                </div>
+              </div>
+              <el-input-number
+                v-model.number="item.width"
+                controls-position="right"
+                :min="1"
+                :max="500"
+                size="mini"
+              ></el-input-number>
+            </div>
+          </transition-group>
+        </draggable>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showSetting = false">取 消</el-button>
+        <el-button @click="delRow" type="danger">重 置</el-button>
+        <el-button type="primary" @click="save()">确 定</el-button>
+      </span>
+    </el-dialog>
+
     <div
       class="dialogTableTitle flex a-center jlr"
       style="
@@ -53,6 +115,14 @@
           费用变更
         </el-button>
       </div>
+      <div style="margin: 0 10px;float: right">
+        <el-button
+          icon="el-icon-setting"
+          size="mini"
+          circle
+          @click="showSetting = !showSetting"
+        ></el-button>
+      </div>
     </div>
     <el-table
       :data="warehouseCrList"
@@ -728,6 +798,8 @@
 import { operationAgreement } from "@/api/agreement/agreement";
 import {feesCheck,revokefeeCheck} from "@/api/warehouseBusiness/warehouseInStock";
 import Cookies from "js-cookie";
+import {addSet, resetModule, select} from '@/api/system/set';
+import draggable from "vuedraggable";
 import print from "print-js";
 import {
   listWarehouse,
@@ -800,6 +872,9 @@ export default {
       default: [],
     },
   },
+  components: {
+    draggable
+  },
   data() {
     return {
       warehousingagreements: false,
@@ -840,7 +915,17 @@ export default {
       isShowInvoice: null,
       // 是否启用费用确认单
       isShowFeesConfirm: null,
-      activeIndex: '1'
+      activeIndex: '1',
+
+      // 设置列开关
+      showSetting: false,
+      setRowList: [],
+      getRowList: [],
+      showfCustomno: null,
+      //自定义列宽
+      allCheck: false,
+      drag: false,
+      tableDate: [],
     };
   },
   created() {
@@ -1240,6 +1325,79 @@ export default {
         this.$message.error("请选择需要打印的明细!");
       }
     },
+
+    //列设置全选
+    allChecked() {
+      if (this.allCheck == true) {
+        this.setRowList.map((e) => {
+          return (e.checked = 0);
+        });
+      } else {
+        this.setRowList.map((e) => {
+          return (e.checked = 1);
+        });
+      }
+    },
+    //开始拖拽事件
+    onStart() {
+      this.drag = true;
+    },
+    //拖拽结束事件
+    onEnd() {
+      this.drag = false;
+    },
+    //重置列表
+    delRow() {
+      this.data = {
+        tableName: "入库付费",
+        userId: Cookies.get("userName"),
+      };
+      resetModule(this.data).then((res) => {
+        if (res.code == 200) {
+          this.showSetting = false;
+          this.setRowList = this.tableDate;
+          console.log(this.setRowList)
+          this.getRowList = this.tableDate;
+        }
+      });
+    },
+    //保存列设置
+    save() {
+      this.showSetting = false;
+      this.data = {
+        tableName: "入库付费",
+        userId: Cookies.get("userName"),
+        sysTableSetList: this.setRowList,
+      };
+      addSet(this.data).then((res) => {
+        this.getRowList = this.setRowList.filter((e) => e.checked == 0);
+      });
+    },
+    //查询列数据
+    getRow() {
+      let that = this;
+      this.data = {
+        tableName: "入库付费",
+        userId: Cookies.get("userName"),
+      };
+      select(this.data).then((res) => {
+        if (res.data.length != 0) {
+          this.getRowList = res.data.filter((e) => e.checked == 0);
+          this.setRowList = res.data;
+          this.setRowList = this.setRowList.reduce((res, item) => {
+            res.push({
+              surface: item.surface,
+              label: item.label,
+              name: item.name,
+              checked: item.checked,
+              width: item.width,
+              fixed: item.fixed,
+            });
+            return res;
+          }, []);
+        }
+      });
+    },
   },
   watch: {
     browseStatus(val) {