n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/NstcTableSet/NstcTableSet.vue

@@ -1,802 +1,802 @@
-<template>
-  <NstcDialog
-    v-model="_value"
-    :title="pageTitle"
-    :custom-class="cName"
-    :show-footer="false"
-    :width="dialogWidth"
-  >
-    <div :class="`${cName}-inner`">
-      <div :class="{ [`${cName}-left`]: true }">
-        <!-- 顶部标题以及全选按钮 -->
-        <div :class="`${cName}-inner-title`">
-          <div class="title-temp">
-            <span>{{ titleObj[type] }}</span>
-            <span>已选</span>
-            <span>{{ result.length || 0 }}</span>
-          </div>
-          <!--          <div class="choose-all" @click="chooseAllOrCancel">{{ isChkAll ? "取消全选": "全部选中" }}</div>-->
-          <div class="choose-all" @click="chooseAllOrCancel">全部选中</div>
-        </div>
-        <!-- checkBox -->
-        <div :class="`${cName}-inner-content`">
-          <div
-            v-for="(group, index) in options"
-            :key="index"
-            class="table-columns-set-group"
-          >
-            <div :class="`${cName}-group-name`">
-              {{ group.groupName }}
-              <!-- <i v-if="showCollapse" :class="['el-icon-arrow-up', 'arrow-up',arrowStates[index]?'arrow-down':'']" @click="upDown(index)"></i> -->
-            </div>
-            <CheckboxCustom
-              v-model="model[index]"
-              :class="[
-                arrowStates[index] ? 'arrowwz-change' : '',
-                'show-group'
-              ]"
-              :options="group.children"
-              hover-show-title
-              @change="(_) => handleLeftChange(group.children)"
-            />
-          </div>
-        </div>
-      </div>
-      <!-- 右边排序部分 -->
-      <div
-        v-show="['set', 'export', 'condition'].includes(type)"
-        :class="`${cName}-right`"
-      >
-        <div :class="`${cName}-inner-title`">当前选定项</div>
-        <div ref="table_columns_set_result" :class="`${cName}-inner-content`">
-          <div
-            v-for="(item, index) in result"
-            :key="item.id"
-            :class="`${cName}-result-item`"
-          >
-            <span>{{ item.name }}</span>
-            <!-- <el-button
-                v-if="!item.isRequired"
-                type="text"
-                style="padding:0;"
-                icon="el-icon-close"
-                @click="handleDel(item, index)"
-                style="color:#007AFF"
-            /> -->
-            <div class="close">
-              <i class="el-icon-close" @click="handleDel(item, index)"></i>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 下面按钮部分 -->
-    <template slot="after">
-      <div slot="footer" class="dialog-footer">
-        <el-button
-          v-if="footerHandlers.confirm"
-          type="primary"
-          :class="footerHandlers.confirm.className || ''"
-          @click="handleConfirm"
-        >
-          {{ footerHandlers.confirm.text }}
-        </el-button>
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="重置本次操作"
-          placement="top-start"
-        >
-          <el-button
-            v-if="footerHandlers.cancel"
-            :class="footerHandlers.cancel.className || ''"
-            @click="handleReset"
-          >
-            {{ footerHandlers.cancel.text }}
-          </el-button>
-        </el-tooltip>
-      </div>
-    </template>
-  </NstcDialog>
-</template>
-
-<script>
-import NstcDialog from '../NstcDialog/NstcDialog'
-import CheckboxCustom from '../NstcForm/CheckboxCustom/index.vue'
-import axios from '../../utils/axios'
-import Sortable from 'sortablejs'
-
-export default {
-  name: 'NstcTableSet',
-
-  components: {
-    NstcDialog,
-    CheckboxCustom
-  },
-
-  props: {
-    showCollapse: {
-      type: Boolean,
-      default: true
-    },
-    value: {
-      // 控制显示隐藏
-      type: Boolean,
-      default: false
-    },
-
-    type: {
-      // set - 列设置 export - 导出 condition - 筛选条件
-      type: String,
-      default: 'set'
-    },
-
-    exportExcelConfig: {
-      type: Object,
-      default: function () {
-        return {
-          url: '',
-          httpMethod: 'get',
-          formatData: (i) => {
-            return i
-          },
-          searchObj: {},
-          exportFileName: '导出'
-        }
-      }
-    },
-
-    title: {
-      type: String,
-      default: function () {
-        return '设置显示字段'
-      }
-    },
-
-    config: {
-      type: Object,
-      default: () => {
-        return {
-          pageUUID: '',
-          moduleNo: ''
-        }
-      }
-    }
-  },
-
-  data() {
-    return {
-      arrowStates: [],
-      hasInit: false,
-
-      footerHandlers: {
-        confirm: {
-          text: '确定',
-          className: {
-            'nstc-g6-common-btn-1': true,
-            'nstc-g6-common-btn-size-b': true
-          }
-        },
-        cancel: {
-          text: '重置',
-          className: {
-            'nstc-g6-common-btn-1': true,
-            'nstc-g6-common-btn-size-b': true
-          }
-        }
-      },
-
-      titleObj: {
-        set: '列设置',
-        export: '导出',
-        condition: '筛选'
-      },
-
-      options: [],
-      model: [],
-
-      result: [],
-      sortableInstance: null,
-      searchObj: {},
-      saveObj: {
-        userUnit: '',
-        userCondition: '',
-        pageUUID: '',
-        userId: '',
-        userExportUnit: ''
-      },
-      // 列表的
-      defaultSet: [],
-      cName: 'table-columns-global-set',
-
-      columns: [],
-
-      // 不能操作的选择项
-      isRequiredArr: [],
-
-      typeObj: {
-        set: 'userUnit',
-        export: 'userCondition',
-        condition: 'userExportUnit'
-      },
-
-      // 自定义表单和筛选的默认条件
-      defaultList: []
-    }
-  },
-
-  computed: {
-    _value: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    // 是否全选
-    isChkAll() {
-      let sum = 0
-      this.options.map((i) => {
-        i[`children`] && (sum += i[`children`].length)
-      })
-      return sum === this.result.length
-    },
-    // 页面名称
-    pageTitle() {
-      return this.titleObj[this.type]
-    },
-    dialogWidth() {
-      return '914px'
-    }
-  },
-
-  watch: {
-    value(val) {
-      // && !this[`hasInit_${this.type}`]
-      val && this.init()
-    }
-  },
-
-  methods: {
-    upDown(index) {
-      this.$set(this.arrowStates, index, !this.arrowStates[index])
-    },
-    /**
-     * 当左侧变化时， 左侧跟着变化
-     * options
-     * val
-     */
-    handleLeftChange(options) {
-      const resultIds = this.result.map((item) => item.id)
-      const leftCheckedArr = this.model.reduce(
-        (total, next) => [...total, ...next],
-        []
-      )
-
-      if (leftCheckedArr.length > resultIds.length) {
-        // 添加列
-        const id = leftCheckedArr.find((id) => !resultIds.includes(id))
-        const changeItem = options.find((item) => item.id === id)
-
-        this.result.push(changeItem)
-      } else {
-        // 删除列
-        const changeIndex = resultIds.findIndex(
-          (id) => !leftCheckedArr.includes(id)
-        )
-
-        this.result.splice(changeIndex, 1)
-      }
-    },
-
-    /**
-     * 左侧删除按钮
-     */
-    handleDel(item, index) {
-      this.result.splice(index, 1)
-
-      for (let i in this.model) {
-        const idx = this.model[i].findIndex((id) => id === item.id)
-
-        if (~idx) {
-          this.model[i].splice(idx, 1)
-          break
-        }
-      }
-    },
-
-    /**
-     * 保存自定义列
-     * @returns {Promise<void>}
-     */
-    async handleConfirm() {
-      if (['condition', 'set'].includes(this.type)) {
-        const k = this.type === 'set' ? 'userUnit' : 'userCondition'
-        if (this.result.length == 0) {
-          return this.$message.warning('至少勾选一个字段')
-        }
-        this.saveObj[k] = this.result.map((item) => item.id).join(',')
-        if (k == 'userUnit') {
-          this.saveObj['userCondition'] = null //防止设置自定义列或设置自定义筛选后，自定义列与自定义筛选相互影响
-        } else if (k == 'userCondition') {
-          this.saveObj['userUnit'] = null //防止设置自定义列或设置自定义筛选后，自定义列与自定义筛选相互影响
-        }
-        await axios
-          .put(`/bems/1.0/dynamicUnit/userUnit`, {
-            ...this.saveObj,
-            ...this.config
-          })
-          .then(() => {
-            this.$emit('update:defaultSet', this.result)
-            this.$emit('confirm', this.result)
-            this._value = false
-            // this.$message({
-            //   type: 'success',
-            //   message: '保存成功'
-            // })
-            // update Date
-            // this.init()
-          })
-          .catch((e) => {
-            this.$message({
-              type: 'error',
-              message: e.msg || '保存失败'
-            })
-          })
-      } else {
-        if (this.result.length == 0) {
-          return this.$message.warning('至少勾选一个字段')
-        }
-        await this.exportAction()
-      }
-    },
-
-    /**
-     * 重置选项
-     */
-    handleReset() {
-      this.init('reset')
-    },
-
-    handleDefaultSet(val) {
-      const ids = val.map((item) => item.id)
-
-      this.result = JSON.parse(JSON.stringify(val))
-      console.log('__log_result', this.result)
-      this.model = this.options.map((group) => {
-        let model = []
-
-        if (group.children) {
-          model = group.children
-            .map((item) => item.id)
-            .filter((id) => ids.includes(id))
-        }
-
-        return model
-      })
-    },
-
-    /**
-     * 初始化
-     * @param reset reset重置
-     * @returns {Promise<void>}
-     */
-    async init(reset) {
-      this.isRequiredArr = []
-      const { data } = await axios.get(`/bems/1.0/dynamicUnit`, this.config)
-      try {
-        // 全量的table列
-        let allUnit = []
-        if (this.type === 'set' || this.type === 'export') {
-          allUnit = JSON.parse(data[`allUnit`] || '[]')
-        } else if (this.type === 'condition') {
-          allUnit = JSON.parse(data[`allCondition`] || '[]')
-        }
-
-        // 用户默认选择的 userUnit
-        let key = ''
-        if (this.type === 'set') {
-          reset == 'reset' ? (data['userUnitList'] = data['userUnitList']) : ''
-          key = data[`userUnitList`] ? 'userUnitList' : 'defaultUnitList'
-          reset == 'reset' ? (key = 'userUnitList') : ''
-          this.defaultList = data[`defaultUnitList`]
-        } else if (this.type === 'condition') {
-          key = data[`userConditionList`]
-            ? 'userConditionList'
-            : 'defaultConditionList'
-          this.defaultList = data[`defaultConditionList`]
-        } else if (this.type === 'export') {
-          // 导出的字段在付款这边默认勾选是列显示的字段
-          key = data[`userUnitList`] ? 'userUnitList' : 'defaultUnitList'
-          reset == 'reset' ? (key = 'userUnitList') : ''
-          this.defaultList = data[`defaultUnitList`]
-        }
-        let userUnit = data[key]
-        console.log('__log_用户选择的', userUnit)
-
-        this.options = allUnit.map((group) => {
-          this.model.push([])
-
-          if (group.children) {
-            group.children = group.children.map((item) => {
-              !!item.isRequired && this.isRequiredArr.push(item.id)
-              return {
-                ...item,
-                label: item.name,
-                value: item.id,
-                disabled: false //  导出都可以勾选
-              }
-            })
-          }
-          this.arrowStates.push(false)
-          return group
-        })
-
-        this.handleDefaultSet(userUnit || [])
-
-        this.sortableInstance = new Sortable(
-          this.$refs[`table_columns_set_result`],
-          {
-            setData(dataTransfer) {
-              // to avoid Firefox bug
-              // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-              dataTransfer.setData('Text', '')
-            },
-            onEnd: (evt) => {
-              const targetRow = this.result.splice(evt.oldIndex, 1)[0]
-
-              this.$nextTick(() => {
-                this.result.splice(evt.newIndex, 0, targetRow)
-              })
-            }
-          }
-        )
-        // type
-        this[`hasInit_${this.type}`] = true
-        //
-      } catch (e) {
-        console.log('__log_custom_column', e)
-      }
-    },
-
-    /**
-     * 全选 或 取消全选
-     */
-    chooseAllOrCancel() {
-      if (this.isChkAll) {
-        // this.model.map(i => {
-        //   i.length = 0
-        // })
-        // this.handleDefaultSet([])
-      } else {
-        let arr = []
-        this.options.map((item, index) => {
-          if (item[`children`]) {
-            arr = arr.concat(item.children)
-            item.children.map((i) => {
-              !this.model[index].includes(i.id) && this.model[index].push(i.id)
-            })
-          }
-        })
-        this.handleDefaultSet(arr)
-        this.$forceUpdate()
-        console.log('__log_this.model', this.model)
-      }
-    },
-
-    /**
-     * 导出动作
-     */
-    async exportAction() {
-      // 导出默认10000
-      this.exportExcelConfig.searchObj[`page.size`] = 10000
-
-      let result = await axios({
-        url: this.exportExcelConfig.url,
-        method: this.exportExcelConfig.httpMethod,
-        [`${this.exportExcelConfig.httpMethod === 'get' ? 'params' : 'data'}`]:
-          this.exportExcelConfig.searchObj
-      })
-
-      this._value = false
-      console.log('返回结果', result)
-      result = result[`list`] || result
-
-      // 格式化导出数据
-      this.exportExcelConfig.formatData &&
-        (result = this.exportExcelConfig.formatData(result))
-
-      // 拼接导出结构
-      console.log('result', this.result)
-
-      this.excelExportAction(result)
-    },
-
-    /**
-     * 导出excel
-     * @param data 列表数据
-     */
-    excelExportAction(data) {
-      console.log('返回数据', data)
-      this.excelExportList = data
-      this.excelDownloadLoading = true
-      let that = this
-      import('../../utils/vendor/Export2Excel').then((excel) => {
-        const tHeader = this.result.map((i) => {
-          return i[`name`]
-        })
-        const keys = this.result.map((i) => {
-          return i[`id`]
-        })
-
-        // 格式化导出数据格式
-        const exportData = that.excelExportList.map((i) => {
-          const temp = []
-          keys.map((k) => {
-            temp.push(i[k])
-          })
-          return temp
-        })
-
-        console.log('___格式化数据', data, {
-          header: tHeader,
-          data: exportData,
-          filename: that.exportExcelConfig.exportFileName
-        })
-        let cellStyle = {}
-        if (that.exportExcelConfig.cellStyle) {
-          let cellStyleColName = this.result.filter(
-            (i) => that.exportExcelConfig.cellStyle[i.id]
-          )
-          let cellStyleMap = {}
-          cellStyleColName.forEach((i) => {
-            if (that.exportExcelConfig.cellStyle[i.id]) {
-              cellStyleMap[[i.name]] = that.exportExcelConfig.cellStyle[i.id]
-            }
-          })
-          let headerWs = excel.sheet_from_array_of_arrays([tHeader])
-          for (let colKey in headerWs) {
-            if (headerWs[colKey].v && cellStyleMap[headerWs[colKey].v]) {
-              let colName = colKey.slice(0, 1)
-              cellStyle[colName] = cellStyleMap[headerWs[colKey].v]
-            }
-          }
-        }
-
-        excel.export_json_to_excel(
-          {
-            header: tHeader,
-            data: exportData,
-            filename: that.exportExcelConfig.exportFileName,
-            merges: that.exportExcelConfig.merges
-          },
-          cellStyle
-        )
-        that.excelDownloadLoading = false
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.show-group {
-  max-height: 800px;
-  overflow: hidden;
-  transition: all 0.25s ease;
-}
-
-.arrowwz-change {
-  max-height: 0px;
-}
-
-.arrow-up {
-  font-size: 15px;
-  display: inline-block;
-  margin: 0px 3px;
-  cursor: pointer;
-  transition: all 0.25s linear;
-}
-
-.arrow-down {
-  transform: rotateZ(+90deg);
-}
-
-.export-excel {
-  .el-checkbox {
-    margin-right: 50px !important;
-  }
-
-  .el-checkbox:nth-child(5n) {
-    margin-right: 0;
-  }
-}
-
-// 导出模板
-
-.table-columns-global-set {
-  &-group-name {
-    font-size: 14px;
-    color: #262d34;
-  }
-
-  .dialog-footer {
-    text-align: center;
-  }
-
-  // 弹框按钮样式
-  .nstc-dialog-footer-btn {
-    width: 90px;
-    height: 34px;
-  }
-
-  .nstc-dialog-footer-btn-clear {
-    margin-left: 15px;
-  }
-
-  padding: 15px 19px;
-
-  .el-dialog__header {
-    padding: 0 0 8px 0 !important;
-    text-align: left;
-
-    .el-icon-close {
-      transform: scale(1.4);
-    }
-  }
-
-  .el-dialog__body {
-    //border-top: 1px solid #dfe6ee;
-    padding: 15px 0;
-
-    .el-checkbox {
-      width: 15%;
-      margin-bottom: 20px;
-    }
-  }
-
-  .export-excel {
-    // border: none !important;
-  }
-
-  .el-checkbox__input {
-    transform: scale(1.2855);
-  }
-
-  .el-checkbox__label {
-    overflow: hidden;
-    vertical-align: middle;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-  }
-
-  .el-checkbox-group {
-    box-sizing: border-box;
-    padding-left: 2px;
-    margin-top: 12px;
-    padding-top: 4px;
-  }
-
-  &-inner {
-    display: flex;
-    height: 500px;
-
-    &-title {
-      padding: 0 10px 20px 0;
-      color: #8a8a8a;
-      display: flex;
-      justify-content: space-between;
-      font-weight: 700;
-
-      .title-temp {
-        span:nth-child(1) {
-        }
-
-        span:nth-child(2) {
-          color: #bac4cf;
-          font-size: 14px;
-          margin: 0 3px 0 13px;
-        }
-
-        span:nth-child(3) {
-          color: #007aff;
-          font-size: 14px;
-        }
-      }
-
-      .choose-all {
-        color: #007aff;
-        font-size: 14px;
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-
-    &-content {
-      flex: 1;
-      overflow-x: hidden;
-      overflow-y: auto;
-    }
-  }
-
-  &-left {
-    flex: 1;
-    border-right: 1px solid #dfe6ee;
-  }
-
-  &-right {
-    width: 180px;
-    padding-left: 10px;
-    margin: 0 0 0 10px;
-  }
-
-  &-left,
-  &-right {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-group {
-    & + & {
-      margin-top: 20px;
-    }
-
-    &-name {
-      color: #3d4a57;
-      font-weight: bold;
-      margin-bottom: 10px;
-      text-align: left;
-    }
-
-    .el-checkbox__label {
-      width: 92px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      vertical-align: middle;
-      line-height: 30px;
-    }
-  }
-
-  &-result-item {
-    padding: 9px 9px 0 0;
-    display: flex;
-    cursor: move;
-    align-items: center;
-    margin-right: 10px;
-
-    &:hover {
-      .close {
-        color: #007aff;
-      }
-    }
-
-    &:first-of-type {
-      margin-top: -7px;
-    }
-
-    & > span {
-      flex: 1;
-      overflow: hidden;
-      white-space: nowrap;
-      margin-right: 5px;
-    }
-
-    .el-button--mini {
-      padding: 0px;
-    }
-
-    .close {
-      z-index: 999;
-    }
-
-    .close:hover {
-      cursor: pointer;
-    }
-  }
-}
-</style>
+<template>
+  <NstcDialog
+    v-model="_value"
+    :title="pageTitle"
+    :custom-class="cName"
+    :show-footer="false"
+    :width="dialogWidth"
+  >
+    <div :class="`${cName}-inner`">
+      <div :class="{ [`${cName}-left`]: true }">
+        <!-- 顶部标题以及全选按钮 -->
+        <div :class="`${cName}-inner-title`">
+          <div class="title-temp">
+            <span>{{ titleObj[type] }}</span>
+            <span>已选</span>
+            <span>{{ result.length || 0 }}</span>
+          </div>
+          <!--          <div class="choose-all" @click="chooseAllOrCancel">{{ isChkAll ? "取消全选": "全部选中" }}</div>-->
+          <div class="choose-all" @click="chooseAllOrCancel">全部选中</div>
+        </div>
+        <!-- checkBox -->
+        <div :class="`${cName}-inner-content`">
+          <div
+            v-for="(group, index) in options"
+            :key="index"
+            class="table-columns-set-group"
+          >
+            <div :class="`${cName}-group-name`">
+              {{ group.groupName }}
+              <!-- <i v-if="showCollapse" :class="['el-icon-arrow-up', 'arrow-up',arrowStates[index]?'arrow-down':'']" @click="upDown(index)"></i> -->
+            </div>
+            <CheckboxCustom
+              v-model="model[index]"
+              :class="[
+                arrowStates[index] ? 'arrowwz-change' : '',
+                'show-group'
+              ]"
+              :options="group.children"
+              hover-show-title
+              @change="(_) => handleLeftChange(group.children)"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- 右边排序部分 -->
+      <div
+        v-show="['set', 'export', 'condition'].includes(type)"
+        :class="`${cName}-right`"
+      >
+        <div :class="`${cName}-inner-title`">当前选定项</div>
+        <div ref="table_columns_set_result" :class="`${cName}-inner-content`">
+          <div
+            v-for="(item, index) in result"
+            :key="item.id"
+            :class="`${cName}-result-item`"
+          >
+            <span>{{ item.name }}</span>
+            <!-- <el-button
+                v-if="!item.isRequired"
+                type="text"
+                style="padding:0;"
+                icon="el-icon-close"
+                @click="handleDel(item, index)"
+                style="color:#007AFF"
+            /> -->
+            <div class="close">
+              <i class="el-icon-close" @click="handleDel(item, index)"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 下面按钮部分 -->
+    <template slot="after">
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          v-if="footerHandlers.confirm"
+          type="primary"
+          :class="footerHandlers.confirm.className || ''"
+          @click="handleConfirm"
+        >
+          {{ footerHandlers.confirm.text }}
+        </el-button>
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="重置本次操作"
+          placement="top-start"
+        >
+          <el-button
+            v-if="footerHandlers.cancel"
+            :class="footerHandlers.cancel.className || ''"
+            @click="handleReset"
+          >
+            {{ footerHandlers.cancel.text }}
+          </el-button>
+        </el-tooltip>
+      </div>
+    </template>
+  </NstcDialog>
+</template>
+
+<script>
+import NstcDialog from '../NstcDialog/NstcDialog'
+import CheckboxCustom from '../NstcForm/CheckboxCustom/index.vue'
+import axios from '../../utils/axios'
+import Sortable from 'sortablejs'
+
+export default {
+  name: 'NstcTableSet',
+
+  components: {
+    NstcDialog,
+    CheckboxCustom
+  },
+
+  props: {
+    showCollapse: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      // 控制显示隐藏
+      type: Boolean,
+      default: false
+    },
+
+    type: {
+      // set - 列设置 export - 导出 condition - 筛选条件
+      type: String,
+      default: 'set'
+    },
+
+    exportExcelConfig: {
+      type: Object,
+      default: function () {
+        return {
+          url: '',
+          httpMethod: 'get',
+          formatData: (i) => {
+            return i
+          },
+          searchObj: {},
+          exportFileName: '导出'
+        }
+      }
+    },
+
+    title: {
+      type: String,
+      default: function () {
+        return '设置显示字段'
+      }
+    },
+
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          pageUUID: '',
+          moduleNo: ''
+        }
+      }
+    }
+  },
+
+  data() {
+    return {
+      arrowStates: [],
+      hasInit: false,
+
+      footerHandlers: {
+        confirm: {
+          text: '确定',
+          className: {
+            'nstc-g6-common-btn-1': true,
+            'nstc-g6-common-btn-size-b': true
+          }
+        },
+        cancel: {
+          text: '重置',
+          className: {
+            'nstc-g6-common-btn-1': true,
+            'nstc-g6-common-btn-size-b': true
+          }
+        }
+      },
+
+      titleObj: {
+        set: '列设置',
+        export: '导出',
+        condition: '筛选'
+      },
+
+      options: [],
+      model: [],
+
+      result: [],
+      sortableInstance: null,
+      searchObj: {},
+      saveObj: {
+        userUnit: '',
+        userCondition: '',
+        pageUUID: '',
+        userId: '',
+        userExportUnit: ''
+      },
+      // 列表的
+      defaultSet: [],
+      cName: 'table-columns-global-set',
+
+      columns: [],
+
+      // 不能操作的选择项
+      isRequiredArr: [],
+
+      typeObj: {
+        set: 'userUnit',
+        export: 'userCondition',
+        condition: 'userExportUnit'
+      },
+
+      // 自定义表单和筛选的默认条件
+      defaultList: []
+    }
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    // 是否全选
+    isChkAll() {
+      let sum = 0
+      this.options.map((i) => {
+        i[`children`] && (sum += i[`children`].length)
+      })
+      return sum === this.result.length
+    },
+    // 页面名称
+    pageTitle() {
+      return this.titleObj[this.type]
+    },
+    dialogWidth() {
+      return '914px'
+    }
+  },
+
+  watch: {
+    value(val) {
+      // && !this[`hasInit_${this.type}`]
+      val && this.init()
+    }
+  },
+
+  methods: {
+    upDown(index) {
+      this.$set(this.arrowStates, index, !this.arrowStates[index])
+    },
+    /**
+     * 当左侧变化时， 左侧跟着变化
+     * options
+     * val
+     */
+    handleLeftChange(options) {
+      const resultIds = this.result.map((item) => item.id)
+      const leftCheckedArr = this.model.reduce(
+        (total, next) => [...total, ...next],
+        []
+      )
+
+      if (leftCheckedArr.length > resultIds.length) {
+        // 添加列
+        const id = leftCheckedArr.find((id) => !resultIds.includes(id))
+        const changeItem = options.find((item) => item.id === id)
+
+        this.result.push(changeItem)
+      } else {
+        // 删除列
+        const changeIndex = resultIds.findIndex(
+          (id) => !leftCheckedArr.includes(id)
+        )
+
+        this.result.splice(changeIndex, 1)
+      }
+    },
+
+    /**
+     * 左侧删除按钮
+     */
+    handleDel(item, index) {
+      this.result.splice(index, 1)
+
+      for (let i in this.model) {
+        const idx = this.model[i].findIndex((id) => id === item.id)
+
+        if (~idx) {
+          this.model[i].splice(idx, 1)
+          break
+        }
+      }
+    },
+
+    /**
+     * 保存自定义列
+     * @returns {Promise<void>}
+     */
+    async handleConfirm() {
+      if (['condition', 'set'].includes(this.type)) {
+        const k = this.type === 'set' ? 'userUnit' : 'userCondition'
+        if (this.result.length == 0) {
+          return this.$message.warning('至少勾选一个字段')
+        }
+        this.saveObj[k] = this.result.map((item) => item.id).join(',')
+        if (k == 'userUnit') {
+          this.saveObj['userCondition'] = null //防止设置自定义列或设置自定义筛选后，自定义列与自定义筛选相互影响
+        } else if (k == 'userCondition') {
+          this.saveObj['userUnit'] = null //防止设置自定义列或设置自定义筛选后，自定义列与自定义筛选相互影响
+        }
+        await axios
+          .put(`/bems/1.0/dynamicUnit/userUnit`, {
+            ...this.saveObj,
+            ...this.config
+          })
+          .then(() => {
+            this.$emit('update:defaultSet', this.result)
+            this.$emit('confirm', this.result)
+            this._value = false
+            // this.$message({
+            //   type: 'success',
+            //   message: '保存成功'
+            // })
+            // update Date
+            // this.init()
+          })
+          .catch((e) => {
+            this.$message({
+              type: 'error',
+              message: e.msg || '保存失败'
+            })
+          })
+      } else {
+        if (this.result.length == 0) {
+          return this.$message.warning('至少勾选一个字段')
+        }
+        await this.exportAction()
+      }
+    },
+
+    /**
+     * 重置选项
+     */
+    handleReset() {
+      this.init('reset')
+    },
+
+    handleDefaultSet(val) {
+      const ids = val.map((item) => item.id)
+
+      this.result = JSON.parse(JSON.stringify(val))
+      console.log('__log_result', this.result)
+      this.model = this.options.map((group) => {
+        let model = []
+
+        if (group.children) {
+          model = group.children
+            .map((item) => item.id)
+            .filter((id) => ids.includes(id))
+        }
+
+        return model
+      })
+    },
+
+    /**
+     * 初始化
+     * @param reset reset重置
+     * @returns {Promise<void>}
+     */
+    async init(reset) {
+      this.isRequiredArr = []
+      const { data } = await axios.get(`/bems/1.0/dynamicUnit`, this.config)
+      try {
+        // 全量的table列
+        let allUnit = []
+        if (this.type === 'set' || this.type === 'export') {
+          allUnit = JSON.parse(data[`allUnit`] || '[]')
+        } else if (this.type === 'condition') {
+          allUnit = JSON.parse(data[`allCondition`] || '[]')
+        }
+
+        // 用户默认选择的 userUnit
+        let key = ''
+        if (this.type === 'set') {
+          reset == 'reset' ? (data['userUnitList'] = data['userUnitList']) : ''
+          key = data[`userUnitList`] ? 'userUnitList' : 'defaultUnitList'
+          reset == 'reset' ? (key = 'userUnitList') : ''
+          this.defaultList = data[`defaultUnitList`]
+        } else if (this.type === 'condition') {
+          key = data[`userConditionList`]
+            ? 'userConditionList'
+            : 'defaultConditionList'
+          this.defaultList = data[`defaultConditionList`]
+        } else if (this.type === 'export') {
+          // 导出的字段在付款这边默认勾选是列显示的字段
+          key = data[`userUnitList`] ? 'userUnitList' : 'defaultUnitList'
+          reset == 'reset' ? (key = 'userUnitList') : ''
+          this.defaultList = data[`defaultUnitList`]
+        }
+        let userUnit = data[key]
+        console.log('__log_用户选择的', userUnit)
+
+        this.options = allUnit.map((group) => {
+          this.model.push([])
+
+          if (group.children) {
+            group.children = group.children.map((item) => {
+              !!item.isRequired && this.isRequiredArr.push(item.id)
+              return {
+                ...item,
+                label: item.name,
+                value: item.id,
+                disabled: false //  导出都可以勾选
+              }
+            })
+          }
+          this.arrowStates.push(false)
+          return group
+        })
+
+        this.handleDefaultSet(userUnit || [])
+
+        this.sortableInstance = new Sortable(
+          this.$refs[`table_columns_set_result`],
+          {
+            setData(dataTransfer) {
+              // to avoid Firefox bug
+              // Detail see : https://github.com/RubaXa/Sortable/issues/1012
+              dataTransfer.setData('Text', '')
+            },
+            onEnd: (evt) => {
+              const targetRow = this.result.splice(evt.oldIndex, 1)[0]
+
+              this.$nextTick(() => {
+                this.result.splice(evt.newIndex, 0, targetRow)
+              })
+            }
+          }
+        )
+        // type
+        this[`hasInit_${this.type}`] = true
+        //
+      } catch (e) {
+        console.log('__log_custom_column', e)
+      }
+    },
+
+    /**
+     * 全选 或 取消全选
+     */
+    chooseAllOrCancel() {
+      if (this.isChkAll) {
+        // this.model.map(i => {
+        //   i.length = 0
+        // })
+        // this.handleDefaultSet([])
+      } else {
+        let arr = []
+        this.options.map((item, index) => {
+          if (item[`children`]) {
+            arr = arr.concat(item.children)
+            item.children.map((i) => {
+              !this.model[index].includes(i.id) && this.model[index].push(i.id)
+            })
+          }
+        })
+        this.handleDefaultSet(arr)
+        this.$forceUpdate()
+        console.log('__log_this.model', this.model)
+      }
+    },
+
+    /**
+     * 导出动作
+     */
+    async exportAction() {
+      // 导出默认10000
+      this.exportExcelConfig.searchObj[`page.size`] = 10000
+
+      let result = await axios({
+        url: this.exportExcelConfig.url,
+        method: this.exportExcelConfig.httpMethod,
+        [`${this.exportExcelConfig.httpMethod === 'get' ? 'params' : 'data'}`]:
+          this.exportExcelConfig.searchObj
+      })
+
+      this._value = false
+      console.log('返回结果', result)
+      result = result[`list`] || result
+
+      // 格式化导出数据
+      this.exportExcelConfig.formatData &&
+        (result = this.exportExcelConfig.formatData(result))
+
+      // 拼接导出结构
+      console.log('result', this.result)
+
+      this.excelExportAction(result)
+    },
+
+    /**
+     * 导出excel
+     * @param data 列表数据
+     */
+    excelExportAction(data) {
+      console.log('返回数据', data)
+      this.excelExportList = data
+      this.excelDownloadLoading = true
+      let that = this
+      import('../../utils/vendor/Export2Excel').then((excel) => {
+        const tHeader = this.result.map((i) => {
+          return i[`name`]
+        })
+        const keys = this.result.map((i) => {
+          return i[`id`]
+        })
+
+        // 格式化导出数据格式
+        const exportData = that.excelExportList.map((i) => {
+          const temp = []
+          keys.map((k) => {
+            temp.push(i[k])
+          })
+          return temp
+        })
+
+        console.log('___格式化数据', data, {
+          header: tHeader,
+          data: exportData,
+          filename: that.exportExcelConfig.exportFileName
+        })
+        let cellStyle = {}
+        if (that.exportExcelConfig.cellStyle) {
+          let cellStyleColName = this.result.filter(
+            (i) => that.exportExcelConfig.cellStyle[i.id]
+          )
+          let cellStyleMap = {}
+          cellStyleColName.forEach((i) => {
+            if (that.exportExcelConfig.cellStyle[i.id]) {
+              cellStyleMap[[i.name]] = that.exportExcelConfig.cellStyle[i.id]
+            }
+          })
+          let headerWs = excel.sheet_from_array_of_arrays([tHeader])
+          for (let colKey in headerWs) {
+            if (headerWs[colKey].v && cellStyleMap[headerWs[colKey].v]) {
+              let colName = colKey.slice(0, 1)
+              cellStyle[colName] = cellStyleMap[headerWs[colKey].v]
+            }
+          }
+        }
+
+        excel.export_json_to_excel(
+          {
+            header: tHeader,
+            data: exportData,
+            filename: that.exportExcelConfig.exportFileName,
+            merges: that.exportExcelConfig.merges
+          },
+          cellStyle
+        )
+        that.excelDownloadLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.show-group {
+  max-height: 800px;
+  overflow: hidden;
+  transition: all 0.25s ease;
+}
+
+.arrowwz-change {
+  max-height: 0px;
+}
+
+.arrow-up {
+  font-size: 15px;
+  display: inline-block;
+  margin: 0px 3px;
+  cursor: pointer;
+  transition: all 0.25s linear;
+}
+
+.arrow-down {
+  transform: rotateZ(+90deg);
+}
+
+.export-excel {
+  .el-checkbox {
+    margin-right: 50px !important;
+  }
+
+  .el-checkbox:nth-child(5n) {
+    margin-right: 0;
+  }
+}
+
+// 导出模板
+
+.table-columns-global-set {
+  &-group-name {
+    font-size: 14px;
+    color: #262d34;
+  }
+
+  .dialog-footer {
+    text-align: center;
+  }
+
+  // 弹框按钮样式
+  .nstc-dialog-footer-btn {
+    width: 90px;
+    height: 34px;
+  }
+
+  .nstc-dialog-footer-btn-clear {
+    margin-left: 15px;
+  }
+
+  padding: 15px 19px;
+
+  .el-dialog__header {
+    padding: 0 0 8px 0 !important;
+    text-align: left;
+
+    .el-icon-close {
+      transform: scale(1.4);
+    }
+  }
+
+  .el-dialog__body {
+    //border-top: 1px solid #dfe6ee;
+    padding: 15px 0;
+
+    .el-checkbox {
+      width: 15%;
+      margin-bottom: 20px;
+    }
+  }
+
+  .export-excel {
+    // border: none !important;
+  }
+
+  .el-checkbox__input {
+    transform: scale(1.2855);
+  }
+
+  .el-checkbox__label {
+    overflow: hidden;
+    vertical-align: middle;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  .el-checkbox-group {
+    box-sizing: border-box;
+    padding-left: 2px;
+    margin-top: 12px;
+    padding-top: 4px;
+  }
+
+  &-inner {
+    display: flex;
+    height: 500px;
+
+    &-title {
+      padding: 0 10px 20px 0;
+      color: #8a8a8a;
+      display: flex;
+      justify-content: space-between;
+      font-weight: 700;
+
+      .title-temp {
+        span:nth-child(1) {
+        }
+
+        span:nth-child(2) {
+          color: #bac4cf;
+          font-size: 14px;
+          margin: 0 3px 0 13px;
+        }
+
+        span:nth-child(3) {
+          color: #007aff;
+          font-size: 14px;
+        }
+      }
+
+      .choose-all {
+        color: #007aff;
+        font-size: 14px;
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    &-content {
+      flex: 1;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+
+  &-left {
+    flex: 1;
+    border-right: 1px solid #dfe6ee;
+  }
+
+  &-right {
+    width: 180px;
+    padding-left: 10px;
+    margin: 0 0 0 10px;
+  }
+
+  &-left,
+  &-right {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-group {
+    & + & {
+      margin-top: 20px;
+    }
+
+    &-name {
+      color: #3d4a57;
+      font-weight: bold;
+      margin-bottom: 10px;
+      text-align: left;
+    }
+
+    .el-checkbox__label {
+      width: 92px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+      line-height: 30px;
+    }
+  }
+
+  &-result-item {
+    padding: 9px 9px 0 0;
+    display: flex;
+    cursor: move;
+    align-items: center;
+    margin-right: 10px;
+
+    &:hover {
+      .close {
+        color: #007aff;
+      }
+    }
+
+    &:first-of-type {
+      margin-top: -7px;
+    }
+
+    & > span {
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      margin-right: 5px;
+    }
+
+    .el-button--mini {
+      padding: 0px;
+    }
+
+    .close {
+      z-index: 999;
+    }
+
+    .close:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>