列设置

src/views/warehouseBusiness/warehouseCheck/index.vue

@@ -56,6 +56,67 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </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
@@ -96,37 +157,48 @@
       <!--        </el-button>-->
       <!--      </el-col>-->
       <right-toolbar :showSearch.sync="showSearch" @queryTable="resetQuery"></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" :data="logList" @selection-change="handleSelectionChange" ref="table"
               :height="tableHeight">
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="序号" type="index" width="50" fixed align="center"/>
-      <el-table-column label="仓库名称" align="center" prop="fWarehouseName" width="280" show-overflow-tooltip/>
-      <el-table-column label="巡检人" align="center" prop="fInspectorName" show-overflow-tooltip/>
-      <el-table-column label="巡检计划日期起" align="center" prop="fInspectorBeginDatetime" width="180" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.fInspectorBeginDatetime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="巡检计划日期止" align="center" prop="fInspectorEndDatetime" width="180" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.fInspectorEndDatetime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="制单人" align="center" prop="fCreateByName" show-overflow-tooltip/>
-      <el-table-column label="制单日期" align="center" prop="fCreateTime" width="180" show-overflow-tooltip>
+      <el-table-column
+        v-for="(item, index) in getRowList"
+        :key="index"
+        :label="item.name"
+        :width="item.width"
+        :prop="item.label"
+        align="center"
+        :fixed="item.fixed"
+        :show-overflow-tooltip="true"
+        sortable
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.fCreateTime, '{y}-{m}-{d}') }}</span>
+          <span v-if="item.label == 'fInspectorBeginDatetime'">
+            {{ parseTime(scope.row.fInspectorBeginDatetime, '{y}-{m}-{d}') }}
+          </span>
+          <span v-else-if="item.label == 'fInspectorEndDatetime'">
+            {{ parseTime(scope.row.fInspectorEndDatetime, '{y}-{m}-{d}') }}
+          </span>
+          <span v-else-if="item.label == 'fCreateTime'">
+            {{ parseTime(scope.row.fCreateTime, '{y}-{m}-{d}') }}
+          </span>
+          <span v-else-if="item.label == 'fUpdateTime'">
+            {{ parseTime(scope.row.fUpdateTime, '{y}-{m}-{d}') }}
+          </span>
+          <span v-else>
+            {{ scope.row[item.label] }}
+          </span>
         </template>
       </el-table-column>
-      <el-table-column label="更新人" align="center" prop="fUpdateByName" show-overflow-tooltip/>
-      <el-table-column label="最新时间" align="center" prop="fUpdateTime" width="180" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.fUpdateTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="系统编号" align="center" prop="fSystemNo" show-overflow-tooltip/>
-      <el-table-column label="备注" align="center" prop="fRemark" show-overflow-tooltip/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160" fixed="right">
         <template slot-scope="scope">
           <el-button
@@ -462,10 +534,15 @@ import {
 } from '@/api/warehouseCheck/index'
 import {listWarehousesss} from "@/api/basicdata/warehouse";
 import {getToken} from "@/utils/auth";
+import Cookies from "js-cookie";
+import {addSet, resetModule, select} from '@/api/system/set';
+import draggable from "vuedraggable";
 
 export default {
   name: "Log",
-  components: {},
+  components: {
+    draggable
+  },
   data() {
     return {
       tableHeight: '600',
@@ -538,6 +615,87 @@ export default {
           }
         }]
       },
+
+      // 设置列开关
+      showSetting: false,
+      setRowList: [],
+      getRowList: [],
+      showfCustomno: null,
+      //自定义列宽
+      allCheck: false,
+      drag: false,
+      tableDate: [
+        {
+          surface: "1",
+          label: "fWarehouseName",
+          name: "仓库名称",
+          checked: 0,
+          width: 160,
+        },
+        {
+          surface: "2",
+          label: "fInspectorName",
+          name: "巡检人",
+          checked: 0,
+          width: 100,
+        },
+        {
+          surface: "3",
+          label: "fInspectorBeginDatetime",
+          name: "巡检计划日期起",
+          checked: 0,
+          width: 180,
+        },
+        {
+          surface: "4",
+          label: "fInspectorEndDatetime",
+          name: "巡检计划日期止",
+          checked: 0,
+          width: 180,
+        },
+        {
+          surface: "5",
+          label: "fCreateByName",
+          name: "制单人",
+          checked: 0,
+          width: 100,
+        },
+        {
+          surface: "6",
+          label: "fCreateTime",
+          name: "制单日期",
+          checked: 0,
+          width: 180,
+        },
+        {
+          surface: "7",
+          label: "fUpdateByName",
+          name: "更新人",
+          checked: 0,
+          width: 100,
+        },
+        {
+          surface: "8",
+          label: "fUpdateTime",
+          name: "更新人",
+          checked: 0,
+          width: 180,
+        },
+        {
+          surface: "9",
+          label: "fSystemNo",
+          name: "系统编号",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "10",
+          label: "fRemark",
+          name: "备注",
+          checked: 0,
+          width: 120,
+        },
+      ]
     };
   },
   created() {
@@ -568,6 +726,8 @@ export default {
     }
     this.fPlanneddate = [lYear + '-' + lMonth + '-' + '01 00:00:00', nYear + '-' + nMonth + '-' + nDay + '23:59:59']
 
+    this.setRowList = this.tableDate;
+    this.getRowList = this.tableDate;
     currentLogin().then(res => {
       console.log(res)
     })
@@ -833,7 +993,80 @@ export default {
       }).then(response => {
         this.download(response.msg);
       })
-    }
+    },
+
+    //列设置全选
+    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>