n20-common-lib 2.9.13 → 2.9.14

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

@@ -0,0 +1,566 @@
+<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() {
+      return this.columnsAs.length && this.columnsAs.length === this.dragListN.length
+    },
+    columnsAs: {
+      get() {
+        return this.columns.filter((col) => !col.static)
+      },
+      set(val) {
+        return val
+      }
+    }
+  },
+  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 = JSON.parse(JSON.stringify(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)
+      if (this.isExport) {
+        this.visible = false
+         this.$emit('setColumns', list)
+      }
+    },
+    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 }
+      ).then(() => {
+        this.getColumns(this.pageId).then(list => {
+               this.visible = false
+        this.$emit('setColumns', list)
+      })
+      })
+    },
+    getColumns(pageId) {
+      return getColumns(pageId || this.pageId, this.userNo, this.columns, 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.slotName) {
+        listN.push({ _colKey: 'slotName', _colVal: c.slotName })
+      } else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
+        listN.push({ _colKey: 'type', _colVal: c.type })
+      } else {
+        let sFn = false
+        for (let k in c) {
+          // if (typeof c[k] === 'function') sFn = true
+        }
+        if (sFn && c[labelKey]) {
+          listN.push({ _colKey: labelKey, _colVal: c[labelKey] })
+        } 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') {
+      if (d.children) {
+        d.children.forEach((item, index) => {
+          let column = columnsT.find((c) => c.prop === d.children[index].prop)
+          // 如果找到，则将其添加到columns中
+        if (column.formatter) {
+          d.children[index].formatter = column.formatter
+        }
+        })
+        columns.push(d)
+      } else {
+      // 如果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 {
+        let column = columnsT.find((c) => c.prop === d.prop)
+        d.formatter = column.formatter
+        // 将d添加到columns中
+        columns.push(d)
+        }
+      }
+    }
+  })
+    console.log(columns)
+  // 返回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>

package/src/components/ShowColumn/index.vue

@@ -280,7 +280,12 @@ export default {
       }
     },
     setState() {
-      return this.columnsAs.length && this.columnsAs.length === this.dragListN.length
+      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() {
@@ -289,6 +294,9 @@ export default {
       set(val) {
         return val
       }
+    },
+    columnsN() {
+      return this.columns || []
     }
   },
   watch: {
@@ -424,7 +432,7 @@ export default {
       // 自动保存设置的显示列
       this.userNo = sessionStorage.getItem('userNo')
       !this.isExport && this.autoSave && this.saveColumns(list)
-      
+
       this.$emit('setColumns', list)
       if (this.isExport) {
         this.visible = false
@@ -444,7 +452,7 @@ export default {
       this.visible = false
     },
     getColumns(pageId) {
-      return getColumns(pageId || this.pageId, this.userNo, this.columns, this.labelKey)
+      return getColumns(pageId || this.pageId, this.userNo, this.columnsN, this.labelKey)
     }
   }
 }
@@ -455,8 +463,6 @@ function saveTransform(list, labelKey, 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.slotName) {
-        listN.push({ _colKey: 'slotName', _colVal: c.slotName })
       } else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
         listN.push({ _colKey: 'type', _colVal: c.type })
       } else {
@@ -479,8 +485,6 @@ function saveTransform(list, labelKey, isFilter) {
         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)
       }

package/src/components/Statis/statisItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="!isDbz" class="n20-statis">
-    <span v-if="title" class="p-r-ss text-r stati-item-cell">{{ title }}</span
-    > <span class="stati-type stati-item-cell p-r-ss">{{ type }}</span
+    <span v-if="title" class="p-r-ss text-r stati-item-cell">{{ title }}</span>
+    <span class="stati-type stati-item-cell p-r-ss">{{ type }}</span
     ><span class="n20-statis-division p-r-ss stati-item-cell">|</span
     ><span v-for="(item, i) in list" :key="i" class="p-r-ss stati-item-cell"
       >{{ item.label }}:<span v-if="countLabel.includes(item.label)" class="n20-primary">{{ item.value }}</span
@@ -11,7 +11,7 @@
   <div v-else class="n20-statis">
     <span class="stati-type stati-item-cell">{{ type }}</span>
     <span v-if="total !== null">:</span>
-    <span  class="stati-type stati-item-cell n20-primary p-l-ss">{{ total }}</span>
+    <span class="stati-type stati-item-cell n20-primary p-l-ss">{{ total }}</span>
     <span v-if="total !== null" class="n20-statis-division p-l-ss p-r-ss stati-item-cell">|</span>
     <span v-if="title" class="text-r stati-item-cell p-r-ss">{{ title }}</span>
     <span v-for="(item, i) in list" :key="i" class="p-r-ss p-l-ss stati-item-cell"
@@ -23,7 +23,8 @@
 
 <script>
 import { $lc } from '../../utils/i18n/index'
-import numerify from 'numerify'
+// import numerify from 'numerify'
+import XEUtils from 'xe-utils'
 const n = 10000
 
 export default {
@@ -32,12 +33,12 @@ export default {
     numerify({ label, value }, f, w, unit = '') {
       unit = unit ? (unit === true ? $lc('元') : unit) : ''
       if (!w) {
-        return numerify(value, f) + unit
+        return XEUtils.commafy(value, { digits: 2 }) + unit
       } else {
         if (value > n) {
-          return numerify(value / n, f) + $lc('万') + unit
+          return XEUtils.commafy(value / n, { digits: 2 }) + $lc('万') + unit
         } else {
-          return numerify(value, f) + unit
+          return XEUtils.commafy(value, { digits: 2 }) + unit
         }
       }
     }

package/src/components/Table/filters.js

@@ -58,6 +58,19 @@ export function colfF(colf, map) {
   return (row) => tplFn(row, sc, mck, map)
 }
 
+export function colfFRow(row, colf, map) {
+  if (typeof colf !== 'string') return colf
+  let sc = colf.split(/{.+?}/g) || []
+  let mc = colf.match(/{.+?}/g) || []
+  let mck = []
+  mc.forEach((t) => {
+    t = t.replace(/^{|\s+|}$/g, '').split('|')
+    mck.push(t)
+  })
+
+  return tplFn(row, sc, mck, map)
+}
+
 export function colftF(colft, fMap) {
   if (typeof colft !== 'string') return colft
   return fMap[colft]