bi-element-ui 0.1.51 → 0.1.55

package/src/components/BiTableColumn/index.vue

@@ -1,615 +1,615 @@
-<template>
-
-  <el-button
-    type="primary"
-    @click="visible = true"
-  >
-    自定义列
-    <el-dialog
-      custom-class="bi-column-dialog"
-      title="自定义列"
-      :visible.sync="visible"
-      width="800px"
-      top="8vh"
-      append-to-body
-      @open="handleOpen"
-      @close="close"
-    >
-      <div
-        class="dialog-body"
-        style="min-height: 160px"
-      >
-        <div class="bi-column-container">
-          <div class="checkbox-container">
-            <el-card class="box-card">
-              <div
-                slot="header"
-                class="clearfix"
-              >
-                <span>可操作性的列</span>
-
-              </div>
-              <div
-                v-for="(item, index) in colList"
-                :key="index"
-                class="checkbox-group"
-              >
-                <p class="checkbox-title">
-                  <el-checkbox
-                    v-model="item.status"
-                    @change="
-                      (val) => {
-                        return handleCheckGroupAllChange(val, item);
-                      }
-                    "
-                  >{{ item.content }}</el-checkbox>
-                </p>
-                <p>
-                  <el-checkbox-group
-                    v-model="checkList"
-                    :true-label="1"
-                    :false-label="0"
-                    @change="handleCheckGroupAll(item)"
-                  >
-                    <el-checkbox
-                      v-for="(city, cityIndex) in item.children"
-                      :key="cityIndex"
-                      :label="city.name"
-                      style="width:120px;margin:0 15px 15px 0;"
-                    >
-                      {{ city.content }}
-                    </el-checkbox>
-                  </el-checkbox-group>
-                </p>
-              </div>
-            </el-card>
-
-          </div>
-          <div class="column-container">
-            <el-card class="box-card">
-              <div
-                slot="header"
-                class="column-title"
-              >
-                <span>已选{{ columnLength }}列</span>
-                <el-button
-                  type="text"
-                  @click="clearAll"
-                >清空全部</el-button>
-              </div>
-              <p class="column-group-title">左侧固定列</p>
-              <div class="column-configurable">
-                <draggable
-                  v-model="leftColumnList"
-                  group="column"
-                >
-                  <!-- <transition-group> -->
-                  <div
-                    v-for="column in leftColumnList"
-                    :key="column.prop"
-                    class="selected-column-item"
-                  >
-                    <i class="el-icon-menu"></i>
-                    <div class="column-name">{{ column.content||column.label }}</div>
-                    <i
-                      class="el-icon-close column-close"
-                      @click="closeColumn(column.prop)"
-                    ></i>
-                  </div>
-                  <!-- </transition-group> -->
-                </draggable>
-
-              </div>
-
-              <p class="column-group-title">中间不固定列</p>
-              <div class="column-configurable">
-                <draggable
-                  v-model="columnList"
-                  group="column"
-                >
-                  <!-- <transition-group> -->
-                  <div
-                    v-for="column in columnList"
-                    :key="column.prop"
-                    class="selected-column-item"
-                  >
-                    <i class="el-icon-menu"></i>
-                    <div class="column-name">{{ column.content||column.label }}</div>
-                    <i
-                      class="el-icon-close column-close"
-                      @click="closeColumn(column.prop)"
-                    ></i>
-                  </div>
-                  <!-- </transition-group> -->
-                </draggable>
-              </div>
-
-              <p class="column-group-title">右侧固定列</p>
-              <div class="column-configurable">
-                <draggable
-                  v-model="rightColumnList"
-                  group="column"
-                >
-                  <!-- <transition-group> -->
-                  <div
-                    v-for="column in rightColumnList"
-                    :key="column.prop"
-                    class="selected-column-item"
-                  >
-                    <i class="el-icon-menu"></i>
-                    <div class="column-name">{{ column.content||column.label }}</div>
-                    <i
-                      class="el-icon-close column-close"
-                      @click="closeColumn(column.prop)"
-                    ></i>
-                  </div>
-                  <!-- </transition-group> -->
-                </draggable>
-
-              </div>
-
-            </el-card>
-          </div>
-        </div>
-      </div>
-      <span
-        slot="footer"
-        class="dialog-footer"
-        style="display: flex; justify-content: space-between"
-      >
-        <span style="display: inline-block; line-height: 32px">
-          <el-checkbox
-            v-model="checkAllData"
-            label="全选"
-            @change="checkAll"
-          >
-            全选
-          </el-checkbox>
-        </span>
-        <div>
-          <el-button @click="close">关闭</el-button>
-          <el-button
-            type="primary"
-            @click="ok"
-          >生效</el-button>
-        </div>
-      </span>
-    </el-dialog>
-  </el-button>
-
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-export default {
-  name: 'BiTableColumn',
-  components: {
-    draggable
-  },
-  props: {
-    columnName: {
-      type: String,
-      require: true,
-      default: ''
-    },
-    listType: {
-      type: String,
-      require: true,
-      default: ''
-    },
-    checkData: {
-      type: Array,
-      require: true,
-      default: () => {
-        return []
-      }
-    },
-    tableColumn: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    defaultColumn: {
-      type: Object,
-      default: () => {
-        return {
-          left: [],
-          center: [],
-          right: []
-        }
-      }
-    }
-  },
-
-  data() {
-    return {
-      tableColumnList: this.tableColumn,
-      visible: false,
-      colList: [],
-
-      checkList: [], // 存放勾选数据
-      checkAllData: false,
-
-      draggableList: [],
-      leftColumnList: [],
-      columnList: [],
-      rightColumnList: []
-    }
-  },
-  computed: {
-    columnLength() {
-      return this.leftColumnList.length + this.columnList.length + this.rightColumnList.length
-    }
-  },
-  watch: {
-    colList: {
-      handler(now) {
-        let i = true
-        now.forEach((item) => {
-          item.status = Boolean(item.status)
-          if (item.status) {
-            this.checkAllData = item.status
-          } else {
-            i = false
-          }
-          this.checkAllData = i
-        })
-      },
-
-      deep: true
-    }
-  },
-  mounted() {
-    // console.log(this.tableColumn)
-    const params = {
-      type: this.listType
-    }
-    this.defaultColumnInit()
-    this.getList(params)
-    this.returnColumn()
-  },
-  // created() {
-  //   this.list = this.colList
-  // },
-  beforeDestroy() {
-    this.visible = false
-  },
-  methods: {
-    // 获取列表
-    defaultColumnInit() {
-      // console.log('defaultColumnInit')
-      const localData = this.getLocalStorage()
-      const { left, center, right } = localData || this.defaultColumn
-
-      // this.leftColumnList = []
-      // this.columnList = []
-      // this.rightColumnList = []
-      left.map((prop) => {
-        this.checkList.push(prop)
-        const column = this.tableColumnList.find((item) => item.prop === prop)
-        column && this.leftColumnList.push(column)
-      })
-      center.map((prop) => {
-        this.checkList.push(prop)
-        const column = this.tableColumnList.find((item) => item.prop === prop)
-        column && this.columnList.push(column)
-      })
-      right.map((prop) => {
-        this.checkList.push(prop)
-        const column = this.tableColumnList.find((item) => item.prop === prop)
-        column && this.rightColumnList.push(column)
-      })
-      // console.log(this.checkList)
-    },
-    async getList(params) {
-      // const res = await getTheadList(params)
-      // if (res.status_code === 1) {
-      this.colList = [
-        {
-          content: '分组1',
-          status: false,
-          children: [
-            {
-              name: 'date',
-              content: '日期',
-              status: false
-            }
-          ]
-        },
-        {
-          content: '分组2',
-          status: false,
-          children: [
-            { content: '姓名', name: 'name', status: false },
-            { content: '省份', name: 'province', status: false },
-            { content: '市区', name: 'city', status: false }
-          ]
-        },
-        {
-          content: '分组3',
-          status: false,
-          children: [
-            { content: '地址', name: 'address', status: false },
-            { content: '地址2', name: 'address2', status: false },
-            { content: '邮编', name: 'zip', status: false },
-            { content: 'v-model', name: 'other', status: false }
-          ]
-        }
-      ]
-
-      this.defaultCheck()
-      // this.defaultCheck()
-      // }
-    },
-    // 全选
-    checkAll(val) {
-      this.colList.forEach((item) => {
-        this.handleCheckGroupAllChange(val, item)
-        item.status = val
-      })
-      if (!val) {
-        this.checkList = []
-      }
-    },
-    // 全选检查
-    defaultCheck() {
-      this.colList.forEach((item) => {
-        this.handleCheckGroupAll(item)
-      })
-    },
-    deleteArrayItemForIndex(arr, index) {
-      if (index === -1) {
-        return
-      }
-      return arr.splice(index, 1)
-    },
-    // 组全选
-    handleCheckGroupAllChange(val, item) {
-      // console.log('handleCheckGroupAllChange')
-      if (val) {
-        item.children.map((column) => {
-          if (this.checkList.indexOf(column.name) === -1) {
-            this.checkList.push(column.name)
-            this.insertColumn(column.name)
-          }
-        })
-      } else {
-        item.children.map((column) => {
-          this.deleteArrayItemForIndex(this.checkList, this.checkList.indexOf(column.name))
-          this.removeColumn(column.name)
-        })
-      }
-    },
-    // 组全选状态
-    handleCheckGroupAll(item) {
-      // console.log('handleCheckGroupAll', item)
-      let flag = 1
-      item.children.map((column) => {
-        if (this.checkList.indexOf(column.name) === -1) {
-          this.removeColumn(column.name)
-          flag = 0
-        } else {
-          this.insertColumn(column.name)
-        }
-      })
-      item.status = flag
-    },
-    // 发送数据
-    async setTheadList() {
-      // 数组变化调用接口保存全部数据
-      const params = JSON.parse(JSON.stringify(this.colList))
-      var arr = []
-      params.forEach((item) => {
-        item.status = item.status ? 1 : 0
-        arr.push(...item.children)
-      })
-      // const data = {
-      //   head_info: JSON.stringify(arr)
-      // }
-      // await setTheadList(data)
-    },
-    clearAll() {
-      this.checkList = []
-      this.checkAll(false)
-    },
-    closeColumn(name) {
-      this.deleteArrayItemForIndex(this.checkList, this.checkList.indexOf(name))
-      this.removeColumn(name)
-      this.defaultCheck()
-    },
-    insertColumn(name) {
-      const column = this.tableColumnList.find((item) => item.prop === name)
-
-      if (!this.leftColumnList.find((item) => item.prop === name) && !this.rightColumnList.find((item) => item.prop === name) && !this.columnList.find((item) => item.prop === name)) {
-        this.columnList.push(column)
-      }
-    },
-    removeColumn(name) {
-      if (this.leftColumnList.length && this.leftColumnList.find((item) => item.prop === name)) {
-        const columnIndex = this.leftColumnList.findIndex((item) => item.prop === name)
-        columnIndex > -1 && this.leftColumnList.splice(columnIndex, 1)
-      }
-      if (this.columnList.length && this.columnList.find((item) => item.prop === name)) {
-        const columnIndex = this.columnList.findIndex((item) => item.prop === name)
-        columnIndex > -1 && this.columnList.splice(columnIndex, 1)
-      }
-      if (this.rightColumnList.length && this.rightColumnList.find((item) => item.prop === name)) {
-        const columnIndex = this.rightColumnList.findIndex((item) => item.prop === name)
-        columnIndex > -1 && this.rightColumnList.splice(columnIndex, 1)
-      }
-      // column.status = false
-    },
-    returnColumn() {
-      this.leftColumnList.map((item) => {
-        item.fixed = true
-      })
-      this.columnList.map((item) => {
-        item.fixed = false
-      })
-      this.rightColumnList.map((item) => {
-        item.fixed = 'right'
-      })
-      this.$emit('handleTableColumn', [...this.leftColumnList, ...this.columnList, ...this.rightColumnList])
-    },
-    ok() {
-      this.returnColumn()
-      this.saveLocalStorage()
-      this.visible = false
-    },
-    saveLocalStorage() {
-      const columnData = {
-        left: [],
-        center: [],
-        right: []
-      }
-      this.leftColumnList.map(({ prop }) => {
-        prop && columnData.left.push(prop)
-      })
-      this.columnList.map(({ prop }) => {
-        prop && columnData.center.push(prop)
-      })
-      this.rightColumnList.map(({ prop }) => {
-        prop && columnData.right.push(prop)
-      })
-      // console.log(columnData)
-      localStorage.setItem(this.columnName, JSON.stringify(columnData))
-    },
-    getLocalStorage() {
-      // console.log('name:', this.columnName)
-      const localData = localStorage.getItem(this.columnName)
-
-      if (localData) {
-        return JSON.parse(localData)
-      } else {
-        return
-      }
-    },
-    handleOpen() {
-      // console.log('handleOpen')
-      this.checkList = []
-      this.rightColumnList = []
-      this.leftColumnList = []
-      this.columnList = []
-      const localData = this.getLocalStorage()
-      localData && this.defaultColumnInit()
-    },
-    // 关闭弹窗
-    close() {
-      this.checkList = []
-      this.rightColumnList = []
-      this.leftColumnList = []
-      this.columnList = []
-      this.visible = false
-      this.$emit('closeDialog', { visible: false })
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.bi-column-container {
-  display: flex;
-  justify-content: space-between;
-
-  .checkbox-container {
-    .checkbox-title {
-      cursor: pointer;
-      height: 34px;
-      line-height: 22px;
-      font-size: 14px;
-      font-weight: 500;
-      background-color: #f5f5f5;
-      color: #333;
-      position: relative;
-      padding-left: 12px;
-      margin-bottom: 12px;
-      border-radius: 4px;
-      align-items: center;
-      display: flex;
-    }
-    .el-checkbox-group {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-
-      margin-bottom: 0;
-      padding-left: 12px;
-
-      .el-checkbox {
-        width: 210px !important;
-        display: block;
-        float: left;
-        margin: 0 !important;
-        min-height: 32px;
-        max-height: 52px;
-        line-height: 20px;
-      }
-    }
-  }
-  .column-container {
-    margin-left: 20px;
-    width: 230px;
-    flex: 0 0 230px;
-
-    .column-title {
-      display: flex;
-      justify-content: space-between;
-      .el-button {
-        padding: 0;
-      }
-    }
-    .column-group-title {
-      font-size: 14px;
-      color: #8c8c8c;
-      margin: 5px 0;
-    }
-    .column-configurable {
-      .selected-column-item {
-        cursor: move;
-        height: 26px;
-        background: #f0f0f0;
-        border-radius: 4px;
-        line-height: 28px;
-        padding: 0 8px;
-        margin-top: 0;
-        display: flex;
-        align-items: center;
-        color: #666;
-        font-size: 14px;
-        &:not(:first-child) {
-          margin-top: 8px;
-        }
-        .column-name {
-          // width: 20px;
-          flex-grow: 2;
-          margin-left: 8px;
-        }
-        .column-close {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
-</style>
-<style lang="scss">
-.bi-column-dialog {
-  .el-card__header {
-    background-color: #f8f9fa;
-    // border: #e0e0e0 1px solid;
-    box-sizing: border-box;
-    line-height: 22px;
-    padding: 8px 12px;
-    // border-radius: 4px 4px 0 0;
-    font-weight: 600;
-    color: #333;
-  }
-  .el-card__body {
-    padding: 12px 16px;
-    height: 395px;
-    box-sizing: border-box;
-    overflow-y: auto;
-  }
-}
+<template>
+
+  <el-button
+    type="primary"
+    @click="visible = true"
+  >
+    自定义列
+    <el-dialog
+      custom-class="bi-column-dialog"
+      title="自定义列"
+      :visible.sync="visible"
+      width="800px"
+      top="8vh"
+      append-to-body
+      @open="handleOpen"
+      @close="close"
+    >
+      <div
+        class="dialog-body"
+        style="min-height: 160px"
+      >
+        <div class="bi-column-container">
+          <div class="checkbox-container">
+            <el-card class="box-card">
+              <div
+                slot="header"
+                class="clearfix"
+              >
+                <span>可操作性的列</span>
+
+              </div>
+              <div
+                v-for="(item, index) in colList"
+                :key="index"
+                class="checkbox-group"
+              >
+                <p class="checkbox-title">
+                  <el-checkbox
+                    v-model="item.status"
+                    @change="
+                      (val) => {
+                        return handleCheckGroupAllChange(val, item);
+                      }
+                    "
+                  >{{ item.content }}</el-checkbox>
+                </p>
+                <p>
+                  <el-checkbox-group
+                    v-model="checkList"
+                    :true-label="1"
+                    :false-label="0"
+                    @change="handleCheckGroupAll(item)"
+                  >
+                    <el-checkbox
+                      v-for="(city, cityIndex) in item.children"
+                      :key="cityIndex"
+                      :label="city.name"
+                      style="width:120px;margin:0 15px 15px 0;"
+                    >
+                      {{ city.content }}
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </p>
+              </div>
+            </el-card>
+
+          </div>
+          <div class="column-container">
+            <el-card class="box-card">
+              <div
+                slot="header"
+                class="column-title"
+              >
+                <span>已选{{ columnLength }}列</span>
+                <el-button
+                  type="text"
+                  @click="clearAll"
+                >清空全部</el-button>
+              </div>
+              <p class="column-group-title">左侧固定列</p>
+              <div class="column-configurable">
+                <draggable
+                  v-model="leftColumnList"
+                  group="column"
+                >
+                  <!-- <transition-group> -->
+                  <div
+                    v-for="column in leftColumnList"
+                    :key="column.prop"
+                    class="selected-column-item"
+                  >
+                    <i class="el-icon-menu"></i>
+                    <div class="column-name">{{ column.content||column.label }}</div>
+                    <i
+                      class="el-icon-close column-close"
+                      @click="closeColumn(column.prop)"
+                    ></i>
+                  </div>
+                  <!-- </transition-group> -->
+                </draggable>
+
+              </div>
+
+              <p class="column-group-title">中间不固定列</p>
+              <div class="column-configurable">
+                <draggable
+                  v-model="columnList"
+                  group="column"
+                >
+                  <!-- <transition-group> -->
+                  <div
+                    v-for="column in columnList"
+                    :key="column.prop"
+                    class="selected-column-item"
+                  >
+                    <i class="el-icon-menu"></i>
+                    <div class="column-name">{{ column.content||column.label }}</div>
+                    <i
+                      class="el-icon-close column-close"
+                      @click="closeColumn(column.prop)"
+                    ></i>
+                  </div>
+                  <!-- </transition-group> -->
+                </draggable>
+              </div>
+
+              <p class="column-group-title">右侧固定列</p>
+              <div class="column-configurable">
+                <draggable
+                  v-model="rightColumnList"
+                  group="column"
+                >
+                  <!-- <transition-group> -->
+                  <div
+                    v-for="column in rightColumnList"
+                    :key="column.prop"
+                    class="selected-column-item"
+                  >
+                    <i class="el-icon-menu"></i>
+                    <div class="column-name">{{ column.content||column.label }}</div>
+                    <i
+                      class="el-icon-close column-close"
+                      @click="closeColumn(column.prop)"
+                    ></i>
+                  </div>
+                  <!-- </transition-group> -->
+                </draggable>
+
+              </div>
+
+            </el-card>
+          </div>
+        </div>
+      </div>
+      <span
+        slot="footer"
+        class="dialog-footer"
+        style="display: flex; justify-content: space-between"
+      >
+        <span style="display: inline-block; line-height: 32px">
+          <el-checkbox
+            v-model="checkAllData"
+            label="全选"
+            @change="checkAll"
+          >
+            全选
+          </el-checkbox>
+        </span>
+        <div>
+          <el-button @click="close">关闭</el-button>
+          <el-button
+            type="primary"
+            @click="ok"
+          >生效</el-button>
+        </div>
+      </span>
+    </el-dialog>
+  </el-button>
+
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+export default {
+  name: 'BiTableColumn',
+  components: {
+    draggable
+  },
+  props: {
+    columnName: {
+      type: String,
+      require: true,
+      default: ''
+    },
+    listType: {
+      type: String,
+      require: true,
+      default: ''
+    },
+    checkData: {
+      type: Array,
+      require: true,
+      default: () => {
+        return []
+      }
+    },
+    tableColumn: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    defaultColumn: {
+      type: Object,
+      default: () => {
+        return {
+          left: [],
+          center: [],
+          right: []
+        }
+      }
+    }
+  },
+
+  data() {
+    return {
+      tableColumnList: this.tableColumn,
+      visible: false,
+      colList: [],
+
+      checkList: [], // 存放勾选数据
+      checkAllData: false,
+
+      draggableList: [],
+      leftColumnList: [],
+      columnList: [],
+      rightColumnList: []
+    }
+  },
+  computed: {
+    columnLength() {
+      return this.leftColumnList.length + this.columnList.length + this.rightColumnList.length
+    }
+  },
+  watch: {
+    colList: {
+      handler(now) {
+        let i = true
+        now.forEach((item) => {
+          item.status = Boolean(item.status)
+          if (item.status) {
+            this.checkAllData = item.status
+          } else {
+            i = false
+          }
+          this.checkAllData = i
+        })
+      },
+
+      deep: true
+    }
+  },
+  mounted() {
+    // console.log(this.tableColumn)
+    const params = {
+      type: this.listType
+    }
+    this.defaultColumnInit()
+    this.getList(params)
+    this.returnColumn()
+  },
+  // created() {
+  //   this.list = this.colList
+  // },
+  beforeDestroy() {
+    this.visible = false
+  },
+  methods: {
+    // 获取列表
+    defaultColumnInit() {
+      // console.log('defaultColumnInit')
+      const localData = this.getLocalStorage()
+      const { left, center, right } = localData || this.defaultColumn
+
+      // this.leftColumnList = []
+      // this.columnList = []
+      // this.rightColumnList = []
+      left.map((prop) => {
+        this.checkList.push(prop)
+        const column = this.tableColumnList.find((item) => item.prop === prop)
+        column && this.leftColumnList.push(column)
+      })
+      center.map((prop) => {
+        this.checkList.push(prop)
+        const column = this.tableColumnList.find((item) => item.prop === prop)
+        column && this.columnList.push(column)
+      })
+      right.map((prop) => {
+        this.checkList.push(prop)
+        const column = this.tableColumnList.find((item) => item.prop === prop)
+        column && this.rightColumnList.push(column)
+      })
+      // console.log(this.checkList)
+    },
+    async getList(params) {
+      // const res = await getTheadList(params)
+      // if (res.status_code === 1) {
+      this.colList = [
+        {
+          content: '分组1',
+          status: false,
+          children: [
+            {
+              name: 'date',
+              content: '日期',
+              status: false
+            }
+          ]
+        },
+        {
+          content: '分组2',
+          status: false,
+          children: [
+            { content: '姓名', name: 'name', status: false },
+            { content: '省份', name: 'province', status: false },
+            { content: '市区', name: 'city', status: false }
+          ]
+        },
+        {
+          content: '分组3',
+          status: false,
+          children: [
+            { content: '地址', name: 'address', status: false },
+            { content: '地址2', name: 'address2', status: false },
+            { content: '邮编', name: 'zip', status: false },
+            { content: 'v-model', name: 'other', status: false }
+          ]
+        }
+      ]
+
+      this.defaultCheck()
+      // this.defaultCheck()
+      // }
+    },
+    // 全选
+    checkAll(val) {
+      this.colList.forEach((item) => {
+        this.handleCheckGroupAllChange(val, item)
+        item.status = val
+      })
+      if (!val) {
+        this.checkList = []
+      }
+    },
+    // 全选检查
+    defaultCheck() {
+      this.colList.forEach((item) => {
+        this.handleCheckGroupAll(item)
+      })
+    },
+    deleteArrayItemForIndex(arr, index) {
+      if (index === -1) {
+        return
+      }
+      return arr.splice(index, 1)
+    },
+    // 组全选
+    handleCheckGroupAllChange(val, item) {
+      // console.log('handleCheckGroupAllChange')
+      if (val) {
+        item.children.map((column) => {
+          if (this.checkList.indexOf(column.name) === -1) {
+            this.checkList.push(column.name)
+            this.insertColumn(column.name)
+          }
+        })
+      } else {
+        item.children.map((column) => {
+          this.deleteArrayItemForIndex(this.checkList, this.checkList.indexOf(column.name))
+          this.removeColumn(column.name)
+        })
+      }
+    },
+    // 组全选状态
+    handleCheckGroupAll(item) {
+      // console.log('handleCheckGroupAll', item)
+      let flag = 1
+      item.children.map((column) => {
+        if (this.checkList.indexOf(column.name) === -1) {
+          this.removeColumn(column.name)
+          flag = 0
+        } else {
+          this.insertColumn(column.name)
+        }
+      })
+      item.status = flag
+    },
+    // 发送数据
+    async setTheadList() {
+      // 数组变化调用接口保存全部数据
+      const params = JSON.parse(JSON.stringify(this.colList))
+      var arr = []
+      params.forEach((item) => {
+        item.status = item.status ? 1 : 0
+        arr.push(...item.children)
+      })
+      // const data = {
+      //   head_info: JSON.stringify(arr)
+      // }
+      // await setTheadList(data)
+    },
+    clearAll() {
+      this.checkList = []
+      this.checkAll(false)
+    },
+    closeColumn(name) {
+      this.deleteArrayItemForIndex(this.checkList, this.checkList.indexOf(name))
+      this.removeColumn(name)
+      this.defaultCheck()
+    },
+    insertColumn(name) {
+      const column = this.tableColumnList.find((item) => item.prop === name)
+
+      if (!this.leftColumnList.find((item) => item.prop === name) && !this.rightColumnList.find((item) => item.prop === name) && !this.columnList.find((item) => item.prop === name)) {
+        this.columnList.push(column)
+      }
+    },
+    removeColumn(name) {
+      if (this.leftColumnList.length && this.leftColumnList.find((item) => item.prop === name)) {
+        const columnIndex = this.leftColumnList.findIndex((item) => item.prop === name)
+        columnIndex > -1 && this.leftColumnList.splice(columnIndex, 1)
+      }
+      if (this.columnList.length && this.columnList.find((item) => item.prop === name)) {
+        const columnIndex = this.columnList.findIndex((item) => item.prop === name)
+        columnIndex > -1 && this.columnList.splice(columnIndex, 1)
+      }
+      if (this.rightColumnList.length && this.rightColumnList.find((item) => item.prop === name)) {
+        const columnIndex = this.rightColumnList.findIndex((item) => item.prop === name)
+        columnIndex > -1 && this.rightColumnList.splice(columnIndex, 1)
+      }
+      // column.status = false
+    },
+    returnColumn() {
+      this.leftColumnList.map((item) => {
+        item.fixed = true
+      })
+      this.columnList.map((item) => {
+        item.fixed = false
+      })
+      this.rightColumnList.map((item) => {
+        item.fixed = 'right'
+      })
+      this.$emit('handleTableColumn', [...this.leftColumnList, ...this.columnList, ...this.rightColumnList])
+    },
+    ok() {
+      this.returnColumn()
+      this.saveLocalStorage()
+      this.visible = false
+    },
+    saveLocalStorage() {
+      const columnData = {
+        left: [],
+        center: [],
+        right: []
+      }
+      this.leftColumnList.map(({ prop }) => {
+        prop && columnData.left.push(prop)
+      })
+      this.columnList.map(({ prop }) => {
+        prop && columnData.center.push(prop)
+      })
+      this.rightColumnList.map(({ prop }) => {
+        prop && columnData.right.push(prop)
+      })
+      // console.log(columnData)
+      localStorage.setItem(this.columnName, JSON.stringify(columnData))
+    },
+    getLocalStorage() {
+      // console.log('name:', this.columnName)
+      const localData = localStorage.getItem(this.columnName)
+
+      if (localData) {
+        return JSON.parse(localData)
+      } else {
+        return
+      }
+    },
+    handleOpen() {
+      // console.log('handleOpen')
+      this.checkList = []
+      this.rightColumnList = []
+      this.leftColumnList = []
+      this.columnList = []
+      const localData = this.getLocalStorage()
+      localData && this.defaultColumnInit()
+    },
+    // 关闭弹窗
+    close() {
+      this.checkList = []
+      this.rightColumnList = []
+      this.leftColumnList = []
+      this.columnList = []
+      this.visible = false
+      this.$emit('closeDialog', { visible: false })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.bi-column-container {
+  display: flex;
+  justify-content: space-between;
+
+  .checkbox-container {
+    .checkbox-title {
+      cursor: pointer;
+      height: 34px;
+      line-height: 22px;
+      font-size: 14px;
+      font-weight: 500;
+      background-color: #f5f5f5;
+      color: #333;
+      position: relative;
+      padding-left: 12px;
+      margin-bottom: 12px;
+      border-radius: 4px;
+      align-items: center;
+      display: flex;
+    }
+    .el-checkbox-group {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      margin-bottom: 0;
+      padding-left: 12px;
+
+      .el-checkbox {
+        width: 210px !important;
+        display: block;
+        float: left;
+        margin: 0 !important;
+        min-height: 32px;
+        max-height: 52px;
+        line-height: 20px;
+      }
+    }
+  }
+  .column-container {
+    margin-left: 20px;
+    width: 230px;
+    flex: 0 0 230px;
+
+    .column-title {
+      display: flex;
+      justify-content: space-between;
+      .el-button {
+        padding: 0;
+      }
+    }
+    .column-group-title {
+      font-size: 14px;
+      color: #8c8c8c;
+      margin: 5px 0;
+    }
+    .column-configurable {
+      .selected-column-item {
+        cursor: move;
+        height: 26px;
+        background: #f0f0f0;
+        border-radius: 4px;
+        line-height: 28px;
+        padding: 0 8px;
+        margin-top: 0;
+        display: flex;
+        align-items: center;
+        color: #666;
+        font-size: 14px;
+        &:not(:first-child) {
+          margin-top: 8px;
+        }
+        .column-name {
+          // width: 20px;
+          flex-grow: 2;
+          margin-left: 8px;
+        }
+        .column-close {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.bi-column-dialog {
+  .el-card__header {
+    background-color: #f8f9fa;
+    // border: #e0e0e0 1px solid;
+    box-sizing: border-box;
+    line-height: 22px;
+    padding: 8px 12px;
+    // border-radius: 4px 4px 0 0;
+    font-weight: 600;
+    color: #333;
+  }
+  .el-card__body {
+    padding: 12px 16px;
+    height: 395px;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
+}
 </style>