n20-common-lib 1.3.4 → 1.3.7

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

@@ -1,801 +0,0 @@
-<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;
-  }
-
-  &-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>