配置表格表头 样式

package.json

@@ -23,6 +23,7 @@
     "vue-bus": "^1.2.1",
     "vue-router": "^3.2.0",
     "vue-wechat-title": "^2.0.7",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0",
     "vuex-persistedstate": "^4.0.0-beta.1",
     "xlsx": "^0.17.4"

src/components/headerSettings.vue

+<template>
+  <div>
+    <el-dialog
+      visible
+      width="780px"
+      custom-class="headerSettingsClass"
+      :destroy-on-close="true"
+      :show-close="false"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div class="topHeader">
+        配置表格表头字段
+        <i
+          class="elIcon el-icon-close"
+          @click="closePage"
+        ></i>
+      </div>
+      <div>已选表头:{{cxDefaultFormThead}}</div>
+      <div>待选表头:{{waitBt}}</div>
+      <div class="botCont">
+        <div class="botTitle">已选表头</div>
+        <draggable
+          class="list-group clearfix"
+          id="selected_ul"
+          ref="selected_ul"
+          group="people"
+          tag="ul"
+          data-listidx="0"
+          :list="cxDefaultFormThead"
+        >
+          <li
+            class="list-group-li"
+            v-for="element in cxDefaultFormThead"
+            :key="element.label"
+          >
+            <div
+              :rel="element.prop"
+              :name="element.label"
+            >
+              {{ element.label }}
+            </div>
+          </li>
+        </draggable>
+        <div class="botTitle">待选表头</div>
+        <draggable
+          class="list-group clearfix waiting-group"
+          id="waiting_ul"
+          ref="waiting_ul"
+          group="people"
+          tag="ul"
+          data-listidx="1"
+          :list="waitBt"
+        >
+          <li
+            class="list-group-li"
+            v-for="element in waitBt"
+            :key="element.label"
+          >
+            <div
+              :rel="element.prop"
+              :name="element.label"
+            >
+              {{ element.label }}
+            </div>
+          </li>
+        </draggable>
+        <div class="tips">
+          <span>亲，可以通过拖动来配置表格</span>
+        </div>
+        <div class="btns">
+          <el-button
+            size="small"
+            @click="closePage"
+          >取消</el-button>
+          <el-button
+            type="primary"
+            size="small"
+          >确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+
+export default {
+  name: "headerSettings",
+  components: {
+    draggable,
+  },
+  data() {
+    return {
+      cxDefaultFormThead: [
+        {
+          label: "名称",
+          prop: "name",
+        },
+        {
+          label: "单位",
+          prop: "unit",
+        },
+      ],
+      cxDefaultFormTheadList: [
+        {
+          label: "名称",
+          prop: "name",
+        },
+        {
+          label: "单位",
+          prop: "unit",
+        },
+        {
+          label: "警犬",
+          prop: "jingquan",
+        },
+        {
+          label: "时间",
+          prop: "time",
+        },
+      ],
+      waitBt: [],
+    };
+  },
+  mounted() {
+    this.waitBt = this.cxDefaultFormTheadList.filter(
+      (item) => !this.cxDefaultFormThead.some((ele) => ele.label === item.label)
+    );
+    console.log(this.waitBt);
+  },
+  methods: {
+    closePage() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.headerSettingsClass {
+  * {
+    box-sizing: border-box;
+  }
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 10px 20px 20px 20px !important;
+    .topHeader {
+      width: 100%;
+      height: 56px;
+      line-height: 56px;
+      font-size: 18px;
+      color: #333;
+      position: relative;
+      text-align: center;
+      .elIcon {
+        font-size: 16px;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+      }
+    }
+    .botCont {
+      .botTitle {
+        width: 100%;
+        font-size: 16px;
+        margin-bottom: 10px;
+        border-bottom: 1px dashed #ccc;
+      }
+      .clearfix {
+        *zoom: 1;
+      }
+      .clearfix:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+      }
+      .list-group {
+        width: 100%;
+        margin-bottom: 10px;
+        .list-group-li {
+          padding: 0 20px;
+          height: 30px;
+          line-height: 30px;
+          background: #a02531;
+          float: left;
+          font-size: 16px;
+          color: #fff;
+          margin-right: 5px;
+          margin-bottom: 5px;
+          border-radius: 5px;
+          cursor: pointer;
+        }
+      }
+      .waiting-group {
+        .list-group-li {
+          background: #3a8125;
+        }
+      }
+      .tips {
+        font-size: 16px;
+      }
+      .btns {
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/artisanManage/index.vue

@@ -70,6 +70,13 @@
       </el-form>
       <div class="queryBtnsClass">
         <el-button
+          type="text"
+          size="small"
+          @click="handleHeaderSettings"
+        >
+          表头配置
+        </el-button>
+        <el-button
           type="primary"
           size="small"
           @click="getLists(1)"
@@ -218,6 +225,11 @@
       @refreshLists="getLists(1)"
     >
     </importFilePublic>
+    <!-- 表头配置 -->
+    <headerSettings
+      v-if="centerDialogVisible"
+      @close="centerDialogVisible = false"
+    ></headerSettings>
   </div>
 </template>
 
@@ -231,11 +243,13 @@ import { getJsonDataApi } from "@/utils/getJsonData.js";
 import { getCodeName, handleDownFile } from "@/utils/mk.js";
 
 import importFilePublic from "@c/importFilePublic.vue";
+import headerSettings from "@c/headerSettings.vue";
 
 export default {
   name: "artisanManage",
   components: {
     importFilePublic,
+    headerSettings,
   },
   data() {
     return {
@@ -262,6 +276,8 @@ export default {
         fileLocalUrl: "files/jsrydrmb.xlsx",
         apiName: "importArtisanApi",
       },
+
+      centerDialogVisible: false,
     };
   },
   mounted() {},
@@ -423,6 +439,10 @@ export default {
     importData() {
       this.showImportBox = true;
     },
+    // 配置表头
+    handleHeaderSettings() {
+      this.centerDialogVisible = true;
+    },
   },
   beforeRouteLeave(to, form, next) {
     let toName = to.name;