n20-common-lib 3.0.22 → 3.0.23

package/src/components/ShowColumn/index copy 2.vue

@@ -1,545 +0,0 @@
-<template>
-  <dialog-wrap
-    ref="dialog"
-    v-drag
-    class="p-t-0"
-    v-bind="$attrs"
-    :visible.sync="visible"
-    :title="title"
-    :width="width"
-    :close-on-click-modal="false"
-    @open="popOpen"
-  >
-    <div class="dialog-view">
-      <div class="flex-box">
-        <div class="left-c flex-column p-t-m bd-r">
-          <div class="flex-box flex-v p-r m-b">
-            <span>{{ header }}</span>
-            <span class="m-l-m color-999">
-              {{ '已选' | $lc }}
-              <span class="color-main">{{ dragList.length }}</span>
-            </span>
-            <el-link :underline="false" type="primary" class="m-l-auto" @click="setAll">{{
-              setState ? $lc('全部清空') : $lc('全部选中')
-            }}</el-link>
-          </div>
-          <div class="flex-item p-r" style="height: 50%; overflow: auto">
-            <el-checkbox-group :value="dragListN.map((d) => d[labelKey])">
-              <template v-if="!columnsGroups">
-                <el-checkbox
-                  v-for="(column, i) in columnsAs"
-                  :key="i"
-                  v-hover-tooltip="column[labelKey]"
-                  :label="column[labelKey]"
-                  :disabled="column.checked"
-                  class="m-t"
-                  @change="(val) => checkChange(val, column)"
-                  >{{ column[labelKey] }}</el-checkbox
-                >
-              </template>
-              <template v-else>
-                <div v-for="gp in columnsGroups" :key="gp.groupId" class="m-b">
-                  <div class="f-s-b font-w600">{{ gp.groupName }}</div>
-                  <template v-for="(column, i) in columnsAs">
-                    <el-checkbox
-                      v-if="column.groupId === gp.groupId"
-                      :key="i"
-                      v-hover-tooltip="column[labelKey]"
-                      :label="column[labelKey]"
-                      :disabled="column.checked"
-                      class="m-t"
-                      @change="(val) => checkChange(val, column)"
-                      >{{ column[labelKey] }}</el-checkbox
-                    >
-                  </template>
-                </div>
-              </template>
-            </el-checkbox-group>
-          </div>
-        </div>
-        <div v-if="!hasPX" class="right-c flex-column p-t-m">
-          <div class="m-b">
-            {{ '当前选定项' | $lc }}
-            <el-link type="primary" style="visibility: hidden">{{ '当前选定项' | $lc }}</el-link>
-          </div>
-          <div class="flex-1 overflow-y">
-            <drag-list :list="dragList" :label-key="labelKey" :in-show-column="true" />
-          </div>
-        </div>
-        <div v-else class="right-tree flex-column p-t-m">
-          <div class="m-b flex-box flex-lr flex-v">
-            {{ '当前选定项' | $lc }}
-            <el-link class="m-r-s" :underline="false" icon="n20-icon-xinzeng" @click="add">{{
-              '新增字段' | $lc
-            }}</el-link>
-          </div>
-          <el-tree
-            ref="menu-tree"
-            class="menu-tree"
-            :data="dragList"
-            :props="{
-              children: 'children',
-              label: 'label'
-            }"
-            node-key="prop"
-            draggable
-            style="width: 200px"
-            :allow-drop="allowDrop"
-          >
-            <span slot-scope="{ node, data }" class="menu-item flex-item flex-box flex-lr flex-v">
-              <span>
-                <i class="n20-drag-icon n20-icon-tuodong"></i>
-                <span
-                  :class="data.isNew ? 'color-success' : 'color-primary'"
-                  class="text-ellipsis pointer"
-                  @click="clickItem(data)"
-                  >{{ data.label }}</span
-                >
-              </span>
-              <el-link
-                class="n20-icon-shanchu"
-                :underline="false"
-                :disabled="data.checked"
-                @click.stop="() => removeMenu(node, data)"
-              />
-            </span>
-          </el-tree>
-        </div>
-      </div>
-    </div>
-    <dialogWrap
-      v-drag
-      :visible.sync="configVisible"
-      :title="'表头设置' | $lc"
-      width="350px"
-      :close-on-click-modal="false"
-    >
-      <el-form :model="configModel">
-        <el-form-item>
-          {{ configModel.label }}
-        </el-form-item>
-        <el-form-item
-          :label="'表头宽度' | $lc"
-          :rules="[
-            {
-              type: 'number',
-              trigger: ['change', 'blur'],
-              validator: validator
-            }
-          ]"
-          prop="width"
-        >
-          <el-input v-model="configModel.width" class="w-224" />
-        </el-form-item>
-        <el-form-item :label="'是否折行' | $lc">
-          <el-radio-group v-model="configModel.wrap">
-            <el-radio :label="true">{{ $lc('是') }}</el-radio>
-            <el-radio :label="false">{{ $lc('否') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="'是否加粗' | $lc">
-          <el-radio-group v-model="configModel.bold">
-            <el-radio :label="true">{{ $lc('是') }}</el-radio>
-            <el-radio :label="false">{{ $lc('否') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="'对齐方式' | $lc">
-          <el-radio-group v-model="configModel.align">
-            <el-radio :label="'right'">{{ $lc('右对齐') }}</el-radio>
-            <el-radio :label="'left'">{{ $lc('左对齐') }}</el-radio>
-            <el-radio :label="'center'">{{ $lc('居中对齐') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button type="primary" @click="configSave">{{ '确定' | $lc }}</el-button>
-      </div>
-    </dialogWrap>
-    <dialogWrap v-drag :visible.sync="configVisibleN" :title="'新增' | $lc" width="350px" :close-on-click-modal="false">
-      <el-form :model="configModelN">
-        <el-form-item :label="'名称' | $lc" required>
-          <el-input v-model="configModelN.label" class="input-w" :placeholder="'请输入' | $lc" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button type="primary" @click="configSaveN">{{ '确定' | $lc }}</el-button>
-      </div>
-    </dialogWrap>
-    <div slot="footer" class="text-c">
-      <el-button type="primary" @click="setChange">{{ '确定' | $lc }}</el-button>
-      <el-button plain @click="reset">{{ '恢复默认' | $lc }}</el-button>
-    </div>
-  </dialog-wrap>
-</template>
-
-<script>
-import axios from '../../utils/axios'
-import { $lc } from '../../utils/i18n/index'
-
-import { Message } from 'element-ui'
-import forEachs from '../../utils/forEachs'
-import dialogWrap from '../Dialog/index.vue'
-import dragList from '../DragList/index.vue'
-export default {
-  name: 'ShowColumn',
-  components: { dialogWrap, dragList },
-  inheritAttrs: false,
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    columnsGroups: {
-      type: Array,
-      default: undefined
-    },
-    checkColumns: {
-      type: Array,
-      default: () => []
-    },
-    isExport: {
-      type: Boolean,
-      default: false
-    },
-    isFilter: {
-      type: Boolean,
-      default: false
-    },
-    labelKey: {
-      type: String,
-      default: 'label'
-    },
-    pageId: {
-      type: String,
-      default: undefined
-    },
-    autoSave: {
-      type: Boolean,
-      default: false
-    },
-    width: {
-      type: String,
-      default: '1000px'
-    },
-    hasPX: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      dragList: [],
-      configVisible: false,
-      enabled: false,
-      configModel: {
-        wrap: false,
-        bold: false,
-        align: 'center'
-      },
-      configModelN: {
-        label: '',
-        prop: '',
-        width: 120,
-        isNew: true,
-        children: []
-      },
-      userNo: sessionStorage.getItem('userNo'),
-      configVisibleN: false,
-      dragListN: []
-    }
-  },
-  computed: {
-    title() {
-      if (this.isExport) {
-        return $lc('导出')
-      } else if (this.isFilter) {
-        return $lc('筛选')
-      } else {
-        return $lc('设置显示列')
-      }
-    },
-    header() {
-      if (this.isExport) {
-        return $lc('导出')
-      } else if (this.isFilter) {
-        return $lc('筛选')
-      } else {
-        return $lc('显示列')
-      }
-    },
-    visible: {
-      get() {
-        return this.dialogVisible
-      },
-      set(val) {
-        this.$emit('update:dialogVisible', val)
-      }
-    },
-    setState() {
-      const columnsAs = []
-      forEachs(this.columnsAs, (item) => {
-        columnsAs.push(item)
-      })
-      return columnsAs.length && columnsAs.length === this.dragListN.length
-      // return this.columnsAs.length && this.columnsAs.length === this.dragListN.length
-    },
-    columnsAs: {
-      get() {
-        return this.columns.filter((col) => !col.static)
-      },
-      set(val) {
-        return val
-      }
-    },
-    columnsN() {
-      return this.columns || []
-    }
-  },
-  watch: {
-    dragList: {
-      handler() {
-        let arr = []
-        forEachs(this.dragList, (item) => {
-          arr.push(item)
-        })
-        this.dragListN = arr
-        /* const newArr = arr.filter((item) => {
-          return item.isNew
-        })
-        newArr.forEach((item) => {
-          const index = this.columns.findIndex((col) => col.prop === item.prop || col.label === item.label)
-          if (index === -1) {
-            this.columns.push(item)
-          }
-        }) */
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  methods: {
-    validator(rule, value, callback) {
-      if (value) {
-        if (value > 300) {
-          return callback(new Error($lc('输入最大宽度不能大于300')))
-        } else if (!/^[1-9]\d*$/.test(value)) {
-          return callback(new Error($lc('表头宽度只能输入正整数')))
-        }
-      }
-      callback()
-    },
-    add() {
-      this.configVisibleN = true
-      this.configModelN.prop = `prop${Date.now()}`
-    },
-    configSaveN() {
-      if (!this.configModelN.label) {
-        return this.$message.warning($lc('请填写名称'))
-      }
-      const hasLabel = this.dragListN.find((item) => {
-        return item.label === this.configModelN.label
-      })
-      if (hasLabel) {
-        return this.$message.warning($lc('已有重名字段,请修改'))
-      }
-      this.dragList.unshift(this.configModelN)
-      // this.columns = [this.configModelN, ...this.columns]
-      this.$message.success($lc('添加成功'))
-      this.configVisibleN = false
-      this.configModelN = {
-        label: '',
-        prop: '',
-        width: 120,
-        isNew: true,
-        children: []
-      }
-    },
-    removeMenu(node, data) {
-      const parent = node.parent
-      const children = parent.data.children || parent.data
-      const index = children.findIndex((d) => d.prop === data.prop)
-      children.splice(index, 1)
-    },
-    allowDrop(draggingNode, dropNode, type) {
-      if (type === 'inner' && draggingNode.data.isNew) {
-        return !(draggingNode.level <= dropNode.level)
-      } else if (type === 'inner' && !draggingNode.data.isNew) {
-        return !(draggingNode.level <= dropNode.level && !dropNode.data.isNew)
-      } else {
-        return true
-      }
-    },
-    clickItem(item) {
-      this.configModel = item
-      this.configVisible = true
-    },
-    configSave() {
-      this.configVisible = false
-    },
-    popOpen() {
-      this.dragList = this.checkColumns.filter((col) => !col.static)
-    },
-    setAll() {
-      if (this.setState) {
-        this.dragList = this.dragList.filter((c) => c.checked)
-      } else {
-        this.dragList = [...this.columnsAs]
-      }
-    },
-    checkChange(val, column) {
-      if (val === false) {
-        let index = this.dragList.findIndex((d) => d[this.labelKey] === column[this.labelKey])
-        index !== -1 && this.dragList.splice(index, 1)
-      } else {
-        let index = this.dragListN.findIndex((d) => d[this.labelKey] === column[this.labelKey])
-        if (index !== -1) {
-          Message.warning($lc(`子级请在右侧删除!`))
-          return false
-        }
-        this.dragList.push(column)
-      }
-    },
-    reset() {
-      let dragList = this.columns.filter((col) => col.isDefault)
-      this.dragList = dragList.length ? dragList : this.checkColumns.filter((col) => !col.static)
-    },
-    setChange() {
-      if (this.dragList.length < 1) {
-        this.$message.error(
-          `${$lc(`至少设置`)}${
-            this.isExport ? $lc('一列导出数据') : this.isFilter ? $lc('一个筛选条件') : $lc('一列显示列')
-          }!`
-        )
-        return
-      }
-
-      let list = []
-      let preCols = this.columns.filter((col) => col.static === 'pre')
-      let nextCols = this.columns.filter((col) => col.static === 'next')
-      list.push(...preCols, ...this.dragList, ...nextCols)
-      // 新增校验
-      if (!this.isExport) {
-        let state = list.findIndex((c) => c.isNew && c.children && c.children.length === 0)
-        if (state !== -1) {
-          Message.warning($lc(`新增字段必须包含子级!`))
-          return false
-        }
-      }
-      // 自动保存设置的显示列
-      this.userNo = sessionStorage.getItem('userNo')
-      !this.isExport && this.autoSave && this.saveColumns(list)
-
-      this.$emit('setColumns', list)
-      if (this.isExport) {
-        this.visible = false
-      }
-    },
-    saveColumns(list) {
-      let columns = saveTransform(list, this.labelKey, this.isFilter)
-      axios.post(
-        '/bems/prod_1.0/user/pageHabit',
-        {
-          userNo: this.userNo,
-          pageId: this.pageId,
-          showStructure: JSON.stringify(columns)
-        },
-        { loading: false }
-      )
-      this.visible = false
-    },
-    getColumns(pageId) {
-      return getColumns(pageId || this.pageId, this.userNo, this.columnsN, this.labelKey)
-    }
-  }
-}
-
-function saveTransform(list, labelKey, isFilter) {
-  let listN = []
-  if (!isFilter) {
-    list.forEach((c) => {
-      if (c.prop && !c.children && !c.isNew && !c.width & !c.isNew) {
-        listN.push({ _colKey: 'prop', _colVal: c.prop })
-      } else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
-        listN.push({ _colKey: 'type', _colVal: c.type })
-      } else {
-        listN.push(c)
-      }
-    })
-  } else {
-    list.forEach((c) => {
-      if (c.value) {
-        listN.push({ _colKey: 'value', _colVal: c.value })
-      } else if (c.startValue) {
-        listN.push({ _colKey: 'startValue', _colVal: c.startValue })
-      } else if (c.startDate) {
-        listN.push({ _colKey: 'startDate', _colVal: c.startDate })
-      } else if (c.slotName) {
-        listN.push({ _colKey: 'slotName', _colVal: c.slotName })
-      } else {
-        listN.push(c)
-      }
-    })
-  }
-  return listN
-}
-
-function getTransform(list, columnsT, labelKey = 'label') {
-  let columns = []
-  list.forEach((d) => {
-    // 如果list中的每一项是字符串
-    if (typeof d === 'string') {
-      // 从columnsT中找到label等于d的项
-      let column = columnsT.find((c) => c[labelKey] === d)
-      // 如果找到，则将其添加到columns中
-      column && columns.push(column)
-      // 如果list中的每一项是对象
-    } else if (typeof d === 'object') {
-      // 如果d中有_colKey属性
-      if (d._colKey) {
-        // 从columnsT中找到d._colKey等于d._colVal的项
-        let column = columnsT.find((c) => c[d._colKey] === d._colVal)
-        // 如果找到，则将其添加到columns中
-        column && columns.push(column)
-        // 如果d中没有_colKey属性
-      } else {
-        // 将d添加到columns中
-        columns.push(d)
-      }
-    }
-  })
-  // 返回columns
-  return columns
-}
-
-// 这段代码在筛选组件中复用
-export function getColumns(pageId, userNo, columnsT, labelKey = 'label') {
-  return new Promise((resolve, reject) => {
-    axios
-      .post(
-        '/bems/prod_1.0/user/pageHabit/list',
-        {
-          userNo: userNo,
-          pageId: pageId
-        },
-        { loading: false }
-      )
-      .then(({ data }) => {
-        if (data) {
-          let _data = JSON.parse(data)
-          if (_data && _data.length > 0) {
-            let columns = getTransform(_data, columnsT, labelKey)
-            return resolve(columns)
-          }
-        }
-        return resolve(null)
-      })
-      .catch((err) => {
-        reject(err)
-      })
-  })
-}
-</script>