增加列设置

src/views/finance/otherFinancial/index.vue

@@ -45,6 +45,69 @@
           </el-form-item>
         </el-row>
       </el-form>
+
+      <!--      列设置-->
+      <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>
+
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
@@ -93,6 +156,14 @@
           :showSearch.sync="showSearch"
           @queryTable="getList"
         ></right-toolbar>
+        <div style="margin: 0 12px;float: right">
+          <el-button
+            icon="el-icon-setting"
+            size="mini"
+            circle
+            @click="showSetting = !showSetting"
+          ></el-button>
+        </div>
       </el-row>
       <el-table
         v-loading="loading"
@@ -102,69 +173,18 @@
         <el-table-column type="selection" width="55" align="center"/>
         <el-table-column type="index" label="行号" align="center" fixed width="60"/>
         <el-table-column
-            label="参考编号"
-            sortable
-            align="center"
-            prop="fMblno"
-            fixed
-            show-overflow-tooltip
-        />
-        <el-table-column
-            label="船名"
-            sortable
-            align="center"
-            prop="shipsName"
-            fixed
-            show-overflow-tooltip
-        />
-        <el-table-column
-            label="航次"
-            sortable
-            align="center"
-            prop="voyage"
-            fixed
-            show-overflow-tooltip
-        />
-        <el-table-column
-            label="单据类型"
-            sortable
-            align="center"
-            prop="fBilltype"
-            fixed
-            show-overflow-tooltip
-        />
-        <el-table-column
-            label="单据编号"
-            sortable
-            align="center"
-            prop="fBillno"
-            fixed
-            show-overflow-tooltip
-        />
-        <el-table-column
-          label="单据日期"
-          sortable
-          align="center"
-          prop="fBsdate"
-          fixed
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="制单人"
-          sortable
+          v-for="(item, index) in getRowList"
+          v-if="item.show"
+          :key="index"
+          :label="item.name"
+          :width="item.width"
+          :prop="item.label"
           align="center"
-          prop="createBy"
-          fixed
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="备注"
+          :fixed="item.fixed"
+          :show-overflow-tooltip="true"
           sortable
-          align="center"
-          prop="remark"
-          fixed
-          show-overflow-tooltip
-        />
+        >
+        </el-table-column>
         <el-table-column
           label="操作"
           align="center"
@@ -262,7 +282,7 @@
               size="small"
             />
           </el-form-item>
-          <el-form-item label="船名">
+          <el-form-item label="船名" v-if="sysType == 3">
             <template slot-scope="scope">
               <el-select
                   v-model="queryParams.fVslid"
@@ -284,6 +304,7 @@
               prop="fVoyid"
               header-align="center"
               label="航次"
+              v-if="sysType == 3"
           >
             <template slot-scope="scope">
               <el-select
@@ -890,9 +911,15 @@ import {
 } from '@/api/otherFinancial'
 import {listFees} from '@/api/basicdata/fees'
 import {selectTVesself, selectTVoyagef} from "@/api/finance/kaihe/payment";
+import Cookies from "js-cookie";
+import {addSet, resetModule, select} from '@/api/system/set';
+import draggable from "vuedraggable";
 
 export default {
   name: 'jiGang',
+  components: {
+    draggable
+  },
   data() {
     return {
       rules:{
@@ -926,10 +953,95 @@ export default {
       fFeetUnitOptions:[],
       currencyList:[],
       TVesselfs:[],
-      TVoyagefs:[]
+      TVoyagefs:[],
+      sysType: '',// 系统判断 1仓储 3凯和
+      // 设置列开关
+      showSetting: false,
+      setRowList: [],
+      getRowList: [],
+      //自定义列宽
+      allCheck: false,
+      drag: false,
+      tableDate: [
+        {
+          surface: "1",
+          label: "fMblno",
+          name: "参考编号",
+          checked: 0,
+          width: 150,
+          show: true
+        },
+        {
+          surface: "2",
+          label: "shipsName",
+          name: "船名",
+          checked: 0,
+          width: 150,
+          show: true
+        },
+        {
+          surface: "3",
+          label: "voyage",
+          name: "航次",
+          checked: 0,
+          width: 150,
+          show: true
+        },
+        {
+          surface: "4",
+          label: "fBilltype",
+          name: "单据类型",
+          checked: 0,
+          width: 150,
+          show: true
+        },
+        {
+          surface: "5",
+          label: "fBillno",
+          name: "单据编号",
+          checked: 0,
+          width: 150,
+          show: true
+        },
+        {
+          surface: "6",
+          label: "fBsdate",
+          name: "单据日期",
+          checked: 0,
+          width: 150,
+          show: true
+        },
+        {
+          surface: "7",
+          label: "createBy",
+          name: "制单人",
+          checked: 0,
+          width: 150,
+          show: true
+        },
+        {
+          surface: "8",
+          label: "remark",
+          name: "备注",
+          checked: 0,
+          width: 150,
+          show: true
+        }
+      ],
     }
   },
   created() {
+    this.setRowList = this.tableDate;
+    this.getRowList = this.tableDate;
+    this.sysType = Cookies.get("sysType");
+    if (this.sysType == 1) {
+      this.tableDate.forEach(item => {
+        if (item.label == 'shipsName' || item.label == 'voyage') {
+          item.checked = 1
+          item.show = false
+        }
+      })
+    }
     selectTVesself().then((res) => {
       this.TVesselfs = res.rows;
     });
@@ -1213,6 +1325,79 @@ export default {
       })
       return sums
     },
+
+    //列设置全选
+    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;
+          }, []);
+        }
+      });
+    },
   }
 }
 </script>