n20-common-lib 1.2.46 → 1.3.2

package/src/components/NstcG6Components/NstcTableSet/NstcTableSet.vue

@@ -0,0 +1,801 @@
+<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 '@/components/NstcG6Components/NstcDialog/NstcDialog'
+import CheckboxCustom from '@/components/NstcG6Components/Form/CheckboxCustom'
+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;
+  }
+
+  &-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>