n20-common-lib 1.1.98

package/src/components/SelectTree/SelectTreeLazy.vue

@@ -0,0 +1,241 @@
+<template>
+  <el-select
+    ref="select"
+    v-model="valueC"
+    :multiple="multiple"
+    :collapse-tags="collapseTags"
+    :clearable="clearable"
+    :disabled="disabled"
+    :filterable="true"
+    :filter-method="filterFn"
+    :size="size"
+    @visible-change="showOpt"
+    @change="(val) => $emit('change', val)"
+  >
+    <slot></slot>
+    <el-option label="null" :value="null" style="display: none" />
+    <el-option
+      v-for="(item, i) in optionList"
+      :key="i"
+      :label="item[props.label]"
+      :value="item[props.value]"
+      style="display: none"
+    />
+    <el-tree
+      ref="tree"
+      class="m-r"
+      :data="data"
+      :props="props"
+      :node-key="props.value"
+      :default-expanded-keys="expandedKeys"
+      :highlight-current="!multiple"
+      :show-checkbox="multiple"
+      :check-strictly="true"
+      :expand-on-click-node="multiple"
+      :filter-node-method="filterNode"
+      :lazy="lazy"
+      :load="load"
+      :size="size"
+      @node-click="nodeClick"
+      @check-change="checkChange"
+    />
+  </el-select>
+</template>
+
+<script>
+import forEachs from '../../utils/forEachs'
+
+export default {
+  name: 'SelectTreeLazy',
+  props: {
+    size: {
+      type: String,
+      default: undefined
+    },
+    // 懒加载回显的选项
+    lazyChecked: {
+      type: [Array, Object],
+      default: undefined
+    },
+    /* select */
+    value: {
+      type: [String, Number, Array],
+      default: undefined
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    collapseTags: {
+      type: Boolean,
+      default: false
+    },
+    filterMethod: {
+      type: Function,
+      default: undefined
+    },
+    /* tree */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    props: {
+      type: Object,
+      default: () => ({
+        label: 'label',
+        children: 'children',
+        disabled: 'disabled',
+        isLeaf: 'isLeaf',
+        value: 'value'
+      })
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    load: {
+      type: Function,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      wCdList: [], // 监听value得到的选项
+      tCdList: [], // 临时选择得到的选项
+      expandedKeys: []
+    }
+  },
+  computed: {
+    valueC: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    optionList() {
+      let vK = this.props.value
+      let optionList = []
+
+      if (this.lazyChecked) {
+        if (Array.isArray(this.lazyChecked)) {
+          optionList.push.apply(optionList, this.lazyChecked)
+        } else {
+          optionList.push(this.lazyChecked)
+        }
+      }
+
+      this.wCdList.forEach((item) => {
+        if (!optionList.some((c) => c[vK] === item[vK])) {
+          optionList.push(item)
+        }
+      })
+
+      this.tCdList.forEach((item) => {
+        if (!optionList.some((c) => c[vK] === item[vK])) {
+          optionList.push(item)
+        }
+      })
+
+      return optionList
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (!val && !this.multiple) {
+          this.wCdList = []
+          this.$refs['tree']?.setCurrentKey(null)
+          return
+        }
+
+        let dataList = []
+        forEachs(this.data, (d) => dataList.push(d), this.props.children)
+
+        if (!this.multiple) {
+          let valueObj = dataList.find((d) => d[this.props.value] === val)
+          this.wCdList = valueObj ? [valueObj] : []
+          this.$refs['tree']?.setCurrentKey(val)
+        } else {
+          this.wCdList = dataList.filter((d) =>
+            val.includes(d[this.props.value])
+          )
+          this.$refs['tree']?.setCheckedKeys(val)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    showOpt() {
+      if (this.showd) return
+
+      this.showd = true
+
+      this.expandedKeys = this.multiple ? [...this.value] : [this.value]
+
+      if (!this.multiple) {
+        this.$refs['tree'].setCurrentKey(this.value)
+      } else {
+        this.$refs['tree'].setCheckedKeys(this.value)
+      }
+    },
+    filterFn(val) {
+      this.$refs['tree'].filter(val)
+      this.filterMethod && this.filterMethod(val)
+    },
+    nodeClick(data) {
+      if (!this.multiple) {
+        this.lazy && (this.tCdList = [data])
+
+        let vK = this.props.value
+        this.$emit('input', data[vK])
+        this.$emit('change', data[vK], data)
+        this.$refs['select'].blur()
+      }
+    },
+    checkChange(data, check) {
+      let vK = this.props.value
+      if (check) {
+        if (this.lazy) {
+          let tV = this.tCdList.some((c) => c[vK] === data[vK])
+          if (!tV) {
+            this.tCdList.push(data)
+          }
+        }
+        let vV = this.value.includes(data[vK])
+        if (!vV) {
+          this.value.push(data[vK])
+        }
+      } else {
+        if (this.lazy) {
+          let tI = this.tCdList.findIndex((c) => c[vK] === data[vK])
+          if (tI !== -1) {
+            this.tCdList.splice(tI, 1)
+          }
+        }
+
+        let vI = this.value.indexOf(data[vK])
+        if (vI !== -1) {
+          this.value.splice(vI, 1)
+        }
+      }
+      this.$emit('change', this.value)
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      let lK = this.props.label
+      return data[lK].indexOf(value) !== -1
+    }
+  }
+}
+</script>

package/src/components/SelectTree/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <el-select
+    ref="select"
+    v-model="valueC"
+    :multiple="multiple"
+    :collapse-tags="collapseTags"
+    :clearable="clearable"
+    :disabled="disabled"
+    :filterable="true"
+    :filter-method="filterFn"
+    :size="size"
+    @visible-change="showOpt"
+  >
+    <slot></slot>
+    <el-option :label="null" :value="null" style="display: none" />
+    <el-option
+      v-for="(item, i) in wCdList"
+      :key="i"
+      :label="item[props.label]"
+      :value="item[props.value]"
+      style="display: none"
+    />
+    <el-tree
+      ref="tree"
+      class="m-r"
+      :data="data"
+      :props="props"
+      :node-key="props.value"
+      :default-expanded-keys="expandedKeys"
+      :highlight-current="!multiple"
+      :show-checkbox="multiple"
+      :expand-on-click-node="multiple"
+      :filter-node-method="filterNode"
+      :size="size"
+      v-bind="$attrs"
+      @node-click="nodeClick"
+      @check="checkChange"
+    />
+  </el-select>
+</template>
+
+<script>
+import forEachs from '../../utils/forEachs'
+
+export default {
+  name: 'SelectTree',
+  props: {
+    // 是否关联
+    relevance: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: undefined
+    },
+    // 懒加载回显的选项
+    lazyChecked: {
+      type: [Array, Object],
+      default: undefined
+    },
+    /* select */
+    value: {
+      type: [String, Number, Array],
+      default: undefined
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    collapseTags: {
+      type: Boolean,
+      default: false
+    },
+    filterMethod: {
+      type: Function,
+      default: undefined
+    },
+    /* tree */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    props: {
+      type: Object,
+      default: () => ({
+        label: 'label',
+        children: 'children',
+        disabled: 'disabled',
+        isLeaf: 'isLeaf',
+        value: 'value'
+      })
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    load: {
+      type: Function,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      wCdList: [], // 监听value得到的选项
+      expandedKeys: []
+    }
+  },
+  computed: {
+    valueC: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (!val && !this.multiple) {
+          this.wCdList = []
+          this.$refs['tree']?.setCurrentKey(null)
+          this.$emit('change', val, undefined)
+          return
+        }
+        if (!this.multiple) {
+          if (val === undefined || val === null) {
+            this.wCdList = []
+            this.$refs['tree']?.setCurrentKey(null)
+            this.$emit('change', val, undefined)
+            return
+          }
+        } else {
+          if (val.length === 0) {
+            this.wCdList = []
+            this.$refs['tree']?.setCurrentKey(null)
+            this.$emit('change', val, undefined)
+            return
+          }
+        }
+
+        let dataList = []
+        forEachs(this.data, (d) => dataList.push(d), this.props.children)
+
+        if (!this.multiple) {
+          let valueObj = dataList.find((d) => d[this.props.value] === val)
+          this.wCdList = valueObj ? [valueObj] : []
+          this.$refs['tree']?.setCurrentKey(val)
+          this.$emit('change', val, valueObj)
+        } else {
+          this.wCdList = dataList.filter((d) =>
+            val.includes(d[this.props.value])
+          )
+          this.$refs['tree']?.setCheckedKeys(val)
+          this.$emit('change', val, this.wCdList)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    showOpt() {
+      if (this.showd) return
+
+      this.showd = true
+
+      this.expandedKeys = this.multiple ? [...this.value] : [this.value]
+
+      if (!this.multiple) {
+        this.$refs['tree'].setCurrentKey(this.value)
+      } else {
+        this.$refs['tree'].setCheckedKeys(this.value)
+      }
+    },
+    filterFn(val) {
+      this.$refs['tree'].filter(val)
+      this.filterMethod && this.filterMethod(val)
+    },
+    nodeClick(data) {
+      if (!this.multiple) {
+        this.lazy && (this.tCdList = [data])
+
+        let vK = this.props.value
+        this.$emit('input', data[vK])
+        this.$refs['select'].blur()
+      }
+    },
+    checkChange(data, { checkedKeys, checkedNodes }) {
+      this.$emit('input', checkedKeys)
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      let lK = this.props.label
+      return data[lK].indexOf(value) !== -1
+    }
+  }
+}
+</script>

package/src/components/ShowColumn/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <dialog-wrap
+    ref="dialog"
+    v-bind="$attrs"
+    :visible.sync="visible"
+    width="800px"
+    :title="isExport ? '导出' : '设置显示列'"
+    @open="popOpen"
+  >
+    <div class="dialog-view" style="margin-top: -16px">
+      <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>{{ isExport ? '导出' : '显示列' }}</span>
+            <span class="m-l-m color-999">
+              已选
+              <span class="color-main">{{ dragList.length }}</span>
+            </span>
+            <el-link
+              :underline="false"
+              type="primary"
+              class="m-l-auto"
+              @click="setAll"
+              >{{ setState ? '全部清空' : '全部选中' }}</el-link
+            >
+          </div>
+          <div class="flex-item p-r" style="height: 50%; overflow: auto">
+            <el-checkbox-group :value="dragList.map((d) => d[labelKey])">
+              <el-checkbox
+                v-for="(column, i) in columns"
+                :key="i"
+                :label="column[labelKey]"
+                class="m-t"
+                @change="(val) => checkChange(val, column)"
+                >{{ column[labelKey] }}</el-checkbox
+              >
+            </el-checkbox-group>
+          </div>
+        </div>
+        <div class="right-c flex-column p-t-m">
+          <div class="m-b">
+            当前选定项
+            <el-link type="primary" style="visibility: hidden"
+              >当前选定项</el-link
+            >
+          </div>
+          <div class="flex-1 overflow-y">
+            <drag-list :list="dragList" :label-key="labelKey" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="text-c">
+      <el-button type="primary" @click="setChange">确定</el-button>
+      <el-button plain @click="reset">重置</el-button>
+    </div>
+  </dialog-wrap>
+</template>
+<script>
+import axios from '../../utils/axios'
+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: () => []
+    },
+    checkColumns: {
+      type: Array,
+      default: () => []
+    },
+    isExport: {
+      type: Boolean,
+      default: false
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    pageId: {
+      type: String,
+      default: undefined
+    },
+    autoSave: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dragList: [],
+      userNo: sessionStorage.getItem('userNo')
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.dialogVisible
+      },
+      set(val) {
+        this.$emit('update:dialogVisible', val)
+      }
+    },
+    setState() {
+      return this.columns.length && this.columns.length === this.dragList.length
+    }
+  },
+  methods: {
+    popOpen() {
+      this.dragList = [...this.checkColumns]
+    },
+    setAll() {
+      if (this.setState) {
+        this.dragList = []
+      } else {
+        this.dragList = [...this.columns]
+      }
+    },
+    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 {
+        this.dragList.push(column)
+      }
+    },
+    reset() {
+      this.dragList = JSON.parse(JSON.stringify(this.checkColumns || []))
+    },
+    setChange() {
+      if (this.dragList.length < 1) {
+        this.$message.error('至少设置显示一列!')
+        return
+      }
+      // 自动保存设置的显示列
+      !this.isExport && this.autoSave && this.saveColumns()
+
+      this.$emit('setColumns', this.dragList)
+      this.visible = false
+    },
+    saveColumns() {
+      axios.post(
+        '/bems/prod_1.0/user/pageHabit',
+        {
+          userNo: this.userNo,
+          pageId: this.pageId,
+          showStructure: JSON.stringify(this.dragList)
+        },
+        { loading: false }
+      )
+    },
+    getColumns(pageId) {
+      return new Promise((resolve, reject) => {
+        axios
+          .post(
+            '/bems/prod_1.0/user/pageHabit/list',
+            {
+              userNo: this.userNo,
+              pageId: pageId || this.pageId
+            },
+            { loading: false }
+          )
+          .then(({ data }) => {
+            if (data) {
+              let _data = JSON.parse(data)
+              resolve(_data.length ? _data : null)
+            } else {
+              resolve(null)
+            }
+          })
+          .catch((err) => {
+            reject(err)
+          })
+      })
+    }
+  }
+}
+</script>