n20-common-lib 1.3.28 → 1.3.31

package/src/components/Filters/index.vue

@@ -5,13 +5,8 @@
     :width="width"
     title="筛选"
     placement="bottom-end"
-    @show="showPopC = true"
-    @after-leave="
-      () => {
-        showPopC = false
-        showMore = false
-      }
-    "
+    @show="show"
+    @after-leave="leave"
   >
     <template slot="reference">
       <el-button
@@ -30,240 +25,75 @@
       :label-width="labelWidth"
       @submit.native.prevent
     >
-      <el-form-item
-        v-for="(item, i) in minList"
-        :key="i"
-        class="m-b"
-        :label="item.label"
-      >
-        <slot v-if="item.slotName" :name="item.slotName"></slot>
-        <el-input
-          v-else-if="item.type === 'text' || item.type === undefined"
-          v-model="form[item.value]"
-          :clearable="item | clearableF"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <el-select
-          v-else-if="item.type === 'select'"
-          v-model="form[item.value]"
-          :clearable="item | clearableF"
-          :multiple="item.multiple"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        >
-          <template
-            v-if="item.props && item.props.labelKey && item.props.valueKey"
-          >
-            <el-option
-              v-for="(c, i) in item.options"
-              :key="i"
-              :label="c[item.props.labelKey]"
-              :value="c[item.props.valueKey]"
-              :disabled="c.disabled"
-            />
-          </template>
-          <template v-else>
-            <el-option
-              v-for="c in item.options"
-              :key="c.value + '_' + c.label"
-              :label="c.label"
-              :value="c.value"
-              :disabled="c.disabled"
-            />
-          </template>
-        </el-select>
-        <inputNumber
-          v-else-if="item.type === 'number'"
-          v-model="form[item.value]"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <inputNumberRange
-          v-else-if="item.type === 'numberrange'"
-          :start-value.sync="form[item.startValue]"
-          :end-value.sync="form[item.endValue]"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <datePickerPor
-          v-else-if="item.type === 'date'"
-          v-model="form[item.value]"
-          type="date"
-          :clearable="item | clearableF"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <datePickerPor
-          v-else-if="item.type === 'daterange'"
-          type="daterange"
-          :start-date.sync="form[item.startDate]"
-          :end-date.sync="form[item.endDate]"
-          :clearable="item | clearableF"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <el-checkbox-group
-          v-else-if="item.type === 'checkbox'"
-          v-model="form[item.value]"
-          v-bind="item.props"
-          v-on="item.on"
+      <template v-if="!type">
+        <el-form-item
+          v-for="(item, i) in minList"
+          :key="i"
+          class="m-b"
+          :label="item.label"
         >
-          <el-checkbox
-            v-for="c in item.options"
-            :key="c.value"
-            :label="c.value"
-            :disabled="c.disabled"
-            >{{ c.label }}</el-checkbox
-          >
-        </el-checkbox-group>
-        <el-radio-group
-          v-else-if="item.type === 'radio'"
-          v-model="form[item.value]"
-          v-bind="item.props"
-          v-on="item.on"
+          <slot v-if="item.slotName" :name="item.slotName"></slot>
+          <form-item-input v-else :form="form" :item="item" />
+        </el-form-item>
+        <template v-if="filterList.length > defaultShow">
+          <div :style="{ paddingLeft: labelWidth }">
+            <el-button
+              class="p-t-0 m-b-s color-primary"
+              type="text"
+              @click="showMore = !showMore"
+              ><span>更多条件</span
+              ><i
+                :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+              ></i
+            ></el-button>
+          </div>
+          <el-collapse-transition>
+            <div v-if="showMore">
+              <el-form-item
+                v-for="(item, i) in moreList"
+                :key="i"
+                class="m-b"
+                :label="item.label"
+              >
+                <slot v-if="item.slotName" :name="item.slotName"></slot>
+                <form-item-input v-else :form="form" :item="item" />
+              </el-form-item>
+            </div>
+          </el-collapse-transition>
+        </template>
+      </template>
+      <template v-else-if="type === 'remote'">
+        <!-- 服务端保存筛选条件组 -->
+        <el-form-item
+          v-for="(item, i) in remoteList"
+          :key="i"
+          class="m-b"
+          :label="item.label"
         >
-          <el-radio
-            v-for="c in item.options"
-            :key="c.value"
-            :label="c.value"
-            :disabled="c.disabled"
-            >{{ c.label }}</el-radio
-          >
-        </el-radio-group>
-      </el-form-item>
-      <template v-if="filterList.length > defaultShow">
+          <slot v-if="item.slotName" :name="item.slotName"></slot>
+          <form-item-input v-else :form="form" :item="item" />
+        </el-form-item>
         <div :style="{ paddingLeft: labelWidth }">
           <el-button
             class="p-t-0 m-b-s color-primary"
             type="text"
-            @click="showMore = !showMore"
+            @click="setRemoteV = true"
             ><span>更多条件</span
             ><i
               :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
             ></i
           ></el-button>
         </div>
-        <el-collapse-transition>
-          <div v-if="showMore">
-            <el-form-item
-              v-for="(item, i) in moreList"
-              :key="i"
-              class="m-b"
-              :label="item.label"
-            >
-              <slot v-if="item.slotName" :name="item.slotName"></slot>
-              <el-input
-                v-else-if="item.type === 'text' || item.type === undefined"
-                v-model="form[item.value]"
-                :clearable="item | clearableF"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <el-select
-                v-else-if="item.type === 'select'"
-                v-model="form[item.value]"
-                :clearable="item | clearableF"
-                :multiple="item.multiple"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              >
-                <template
-                  v-if="
-                    item.props && item.props.labelKey && item.props.valueKey
-                  "
-                >
-                  <el-option
-                    v-for="(c, i) in item.options"
-                    :key="i"
-                    :label="c[item.props.labelKey]"
-                    :value="c[item.props.valueKey]"
-                    :disabled="c.disabled"
-                  />
-                </template>
-                <template v-else>
-                  <el-option
-                    v-for="c in item.options"
-                    :key="c.value + '_' + c.label"
-                    :label="c.label"
-                    :value="c.value"
-                    :disabled="c.disabled"
-                  />
-                </template>
-              </el-select>
-              <inputNumber
-                v-else-if="item.type === 'number'"
-                v-model="form[item.value]"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <inputNumberRange
-                v-else-if="item.type === 'numberrange'"
-                :start-value.sync="form[item.startValue]"
-                :end-value.sync="form[item.endValue]"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <datePickerPor
-                v-else-if="item.type === 'date'"
-                v-model="form[item.value]"
-                type="date"
-                :clearable="item | clearableF"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <datePickerPor
-                v-else-if="item.type === 'daterange'"
-                type="daterange"
-                :start-date.sync="form[item.startDate]"
-                :end-date.sync="form[item.endDate]"
-                :clearable="item | clearableF"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <el-checkbox-group
-                v-else-if="item.type === 'checkbox'"
-                v-model="form[item.value]"
-                v-bind="item.props"
-                v-on="item.on"
-              >
-                <el-checkbox
-                  v-for="c in item.options"
-                  :key="c.value"
-                  :label="c.value"
-                  :disabled="c.disabled"
-                  >{{ c.label }}</el-checkbox
-                >
-              </el-checkbox-group>
-              <el-radio-group
-                v-else-if="item.type === 'radio'"
-                v-model="form[item.value]"
-                v-bind="item.props"
-                v-on="item.on"
-              >
-                <el-radio
-                  v-for="c in item.options"
-                  :key="c.value"
-                  :label="c.value"
-                  :disabled="c.disabled"
-                  >{{ c.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-          </div>
-        </el-collapse-transition>
+        <showColumn
+          ref="setRemote"
+          :dialog-visible.sync="setRemoteV"
+          :check-columns="remoteList"
+          :columns="filterList"
+          :is-filter="true"
+          :auto-save="true"
+          page-id="filterId"
+          @setColumns="setRemoteChange"
+        />
       </template>
       <footerBox class="text-c">
         <el-button type="primary" @click="filter">确认</el-button>
@@ -274,26 +104,15 @@
 </template>
 
 <script>
-import inputNumber from '../InputNumber/index.vue'
-import inputNumberRange from '../InputNumber/numberRange.vue'
-import datePickerPor from '../DatePicker/por.vue'
+import formItemInput from './form-item-input.vue'
 import footerBox from '../FooterBox/index.vue'
+import showColumn from '../ShowColumn/index.vue'
 export default {
   name: 'Filters',
   components: {
-    inputNumber,
-    inputNumberRange,
-    datePickerPor,
-    footerBox
-  },
-  filters: {
-    clearableF(item) {
-      if (item.props && item.props.clearable === false) {
-        return false
-      } else {
-        return true
-      }
-    }
+    formItemInput,
+    footerBox,
+    showColumn
   },
   props: {
     width: {
@@ -315,13 +134,23 @@ export default {
     labelWidth: {
       type: [String, Number],
       default: '5em'
+    },
+    type: {
+      type: String,
+      default: undefined
+    },
+    filterId: {
+      type: String,
+      default: undefined
     }
   },
   data() {
     return {
       showPop: false,
       showPopC: false,
-      showMore: false
+      showMore: false,
+      remoteList: [],
+      setRemoteV: false
     }
   },
   computed: {
@@ -333,6 +162,18 @@ export default {
     }
   },
   methods: {
+    show() {
+      this.showPopC = true
+      this.$nextTick(() => {
+        if (this.type === 'remote' && !this.remoteList.length) {
+          this.getRemote()
+        }
+      })
+    },
+    leave() {
+      this.showPopC = false
+      this.showMore = false
+    },
     clear() {
       this.$emit('clear')
     },
@@ -366,6 +207,14 @@ export default {
       if (item) {
         item.options = opts || []
       }
+    },
+    getRemote() {
+      this.$refs['setRemote'].getColumns().then((list) => {
+        this.remoteList = list || this.filterList
+      })
+    },
+    setRemoteChange(list) {
+      this.remoteList = list
     }
   }
 }

package/src/components/InputNumber/index.vue

@@ -8,6 +8,7 @@
       :disabled="disabled"
       :placeholder="phd"
       @focus="focusFn"
+      @blur.native.capture.stop
     />
     <el-input-number
       v-else
@@ -19,6 +20,7 @@
       :value="valueNum"
       :placeholder="phd"
       v-on="listeners"
+      @input.native="inputFn"
       @blur="blurFn"
       @change="changeFn"
     />
@@ -96,6 +98,7 @@ export default {
         if (val && typeof val === 'string' && val.includes(',')) {
           return this.$emit('input', Number(val.replace(/,/g, '')))
         }
+        this.preValue = val
         this.valueStr = this.num2str(val)
       },
       immediate: true
@@ -163,6 +166,13 @@ export default {
           }
           break
       }
+    },
+    inputFn({ target }) {
+      if (isNaN(target.value)) {
+        target.value = this.preValue
+      } else {
+        this.preValue = target.value
+      }
     }
   }
 }

package/src/components/ShowColumn/index.vue

@@ -5,14 +5,14 @@
     v-bind="$attrs"
     :visible.sync="visible"
     :width="width"
-    :title="isExport ? '导出' : '设置显示列'"
+    :title="title"
     @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>{{ isExport ? '导出' : '显示列' }}</span>
+            <span>{{ header }}</span>
             <span class="m-l-m color-999">
               已选
               <span class="color-main">{{ dragList.length }}</span>
@@ -87,6 +87,10 @@ export default {
       type: Boolean,
       default: false
     },
+    isFilter: {
+      type: Boolean,
+      default: false
+    },
     labelKey: {
       type: String,
       default: 'label'
@@ -111,6 +115,24 @@ export default {
     }
   },
   computed: {
+    title() {
+      if (this.isExport) {
+        return '导出'
+      } else if (this.isFilter) {
+        return '筛选'
+      } else {
+        return '设置显示列'
+      }
+    },
+    header() {
+      if (this.isExport) {
+        return '导出'
+      } else if (this.isFilter) {
+        return '筛选'
+      } else {
+        return '显示列'
+      }
+    },
     visible: {
       get() {
         return this.dialogVisible
@@ -154,32 +176,37 @@ export default {
     },
     setChange() {
       if (this.dragList.length < 1) {
-        this.$message.error('至少设置显示一列!')
+        this.$message.error(
+          `至少设置${
+            this.isExport
+              ? '一列导出数据'
+              : this.isFilter
+              ? '一个筛选条件'
+              : '一列显示列'
+          }!`
+        )
         return
       }
-      // 自动保存设置的显示列
-      !this.isExport && this.autoSave && this.saveColumns()
 
       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)
 
+      // 自动保存设置的显示列
+      !this.isExport && this.autoSave && this.saveColumns(list)
+
       this.$emit('setColumns', list)
       this.visible = false
     },
-    saveColumns() {
-      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)
-
+    saveColumns(list) {
+      let labels = list.map((c) => c[this.labelKey] || c)
       axios.post(
         '/bems/prod_1.0/user/pageHabit',
         {
           userNo: this.userNo,
           pageId: this.pageId,
-          showStructure: JSON.stringify(list)
+          showStructure: JSON.stringify(labels)
         },
         { loading: false }
       )
@@ -198,10 +225,22 @@ export default {
           .then(({ data }) => {
             if (data) {
               let _data = JSON.parse(data)
-              resolve(_data.length ? _data : null)
-            } else {
-              resolve(null)
+              if (_data && _data.length > 0) {
+                let columns = []
+                _data.forEach((d) => {
+                  if (typeof d === 'string') {
+                    let column = this.columns.find(
+                      (c) => c[this.labelKey] === d
+                    )
+                    column && columns.push(column)
+                  } else if (typeof d === 'object') {
+                    columns.push(d)
+                  }
+                })
+                return resolve(columns)
+              }
             }
+            return resolve(undefined)
           })
           .catch((err) => {
             reject(err)

package/src/components/Table/ThSelectHeader.vue

@@ -23,7 +23,7 @@
         v-model="checkbox"
         :indeterminate="isIndeterminate"
         @change="checkboxChange"
-        >{{ '全部' + '(' + this.thIndex.length + ')' }}</el-checkbox
+        >{{ '全部' + '(' + dataList.length + ')' }}</el-checkbox
       >
       <el-checkbox-group
         v-model="checkLists"
@@ -63,7 +63,7 @@ export default {
         return {}
       }
     },
-    thIndex: {
+    dataList: {
       type: Array,
       default: () => {
         return []
@@ -108,8 +108,8 @@ export default {
       })
     },
     countNum(res) {
-      var newArrays = this.thIndex.filter((item) => {
-        return item[this.property] == res
+      var newArrays = this.dataList.filter((item) => {
+        return item[this.property] === res
       })
       return newArrays.length
     },
@@ -125,4 +125,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/Table/filters.js

@@ -0,0 +1,60 @@
+import numerify from 'numerify'
+import dayjs from 'dayjs'
+
+function tplFn(row, sc, mck, map = {}) {
+  let str = ''
+  sc.forEach((s, i) => {
+    str += s
+    let kA = mck[i]
+    if (kA && kA.length) {
+      let key = kA[0]
+      if (kA.length === 1) {
+        str += row[key]
+      } else {
+        let type = kA[1]
+        switch (type) {
+          case 'money':
+            str += numerify(row[key], '0,0.00')
+            break
+          case 'rate':
+            str += numerify(row[key], '0.000000')
+            break
+          case 'map':
+            str += map[row[key]]
+            break
+          case 'date':
+            str += dayjs(row[key]).format('YYYY-MM-DD')
+            break
+          case 'datetime':
+            str += dayjs(row[key]).format('YYYY-MM-DD HH:mm:ss')
+            break
+          case 'time':
+            str += dayjs(row[key]).format('HH:mm:ss')
+            break
+          default:
+            str += row[key]
+            break
+        }
+      }
+    }
+  })
+  return str
+}
+
+export function colfF(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 (row) => tplFn(row, sc, mck, map)
+}
+
+export function colftF(colft, fMap) {
+  if (typeof colft !== 'string') return colft
+  return fMap[colft]
+}