n20-common-lib 2.7.0-beta.14 → 2.7.0-beta.16

package/src/assets/iconFont/iconfont.json

@@ -5,6 +5,202 @@
   "css_prefix_text": "n20-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "39632933",
+      "name": "语言切换",
+      "font_class": "yuyanqiehuan",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "39546292",
+      "name": "arrows",
+      "font_class": "lujing",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "39545500",
+      "name": "menu",
+      "font_class": "caidan",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "39545088",
+      "name": "jtskywgk",
+      "font_class": "a-bianzu701",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "39545089",
+      "name": "cszhyw",
+      "font_class": "zhcsyw",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "39545090",
+      "name": "jrwg",
+      "font_class": "a-bianzu1",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "39545091",
+      "name": "csywgl",
+      "font_class": "bianzu",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "39545092",
+      "name": "cszlpt",
+      "font_class": "a-bianzu3",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "39545093",
+      "name": "cswy",
+      "font_class": "a-bianzu69",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "39545094",
+      "name": "jtsjfx",
+      "font_class": "a-bianzu2",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "39545095",
+      "name": "csfzjc",
+      "font_class": "a-bianzu70",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "39130753",
+      "name": "query",
+      "font_class": "query",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "38017865",
+      "name": "风控管理",
+      "font_class": "fengkongguanli",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "37668679",
+      "name": "清除",
+      "font_class": "qingchu",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "37667394",
+      "name": "移除",
+      "font_class": "yichu",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "37355986",
+      "name": "增加 copy",
+      "font_class": "a-zengjiacopy",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "37315078",
+      "name": "图钉",
+      "font_class": "tuding",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "35627211",
+      "name": "出口",
+      "font_class": "chukou",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "35627212",
+      "name": "步骤",
+      "font_class": "buzhou",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "35627213",
+      "name": "撤销",
+      "font_class": "chexiao",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "35627214",
+      "name": "并行网关",
+      "font_class": "binghangwangguan",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "35627215",
+      "name": "保存",
+      "font_class": "baocun",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "35627216",
+      "name": "框选",
+      "font_class": "kuangxuan",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "35627217",
+      "name": "分支网关",
+      "font_class": "fenzhiwangguan",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "35627218",
+      "name": "预览",
+      "font_class": "yulan",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "35627219",
+      "name": "入口",
+      "font_class": "rukou",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "35627220",
+      "name": "合并网关",
+      "font_class": "hebingwangguan",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "35627221",
+      "name": "恢复",
+      "font_class": "huifu",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
     {
       "icon_id": "34742144",
       "name": "收起折叠（去边框）",

package/src/assets/realUrl.js

@@ -6,7 +6,7 @@ export default function realUrl(url, rest = false) {
     return url
   } else if (/^\//.test(url)) {
     return prefix + url.replace(/^\//, '')
-  } else if (!rest) {
+  } else if (rest) {
     return '/' + url
   } else {
     return url

package/src/components/AdvancedFilter/FormItem.vue

@@ -0,0 +1,41 @@
+<script>
+import getWidth from '../../utils/asciiWidth.js'
+const prefixClass = 'n20-advanced-filter-item'
+
+export default {
+  name: "FormItem",
+  props: {
+    label: {
+      type:String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      prefixClass
+    }
+  },
+  computed: {
+    width(){
+      return this._lang === 'zh'? this.label.length: getWidth(this.label)
+    }
+  }
+}
+</script>
+
+<template>
+  <div :class="prefixClass">
+    <div :class="prefixClass +'__name'">{{label}}</div>
+    <div :class="[prefixClass+ '__value']">
+      <slot></slot>
+    </div>
+    <i class="filter_remove n20-icon-yichu"></i>
+  </div>
+</template>
+
+
+<style lang="scss">
+.n20-advanced-filter-item {
+
+}
+</style>

package/src/components/AdvancedFilter/formItemRender.vue

@@ -49,6 +49,9 @@ export default {
     handleFilter() {
       this.$emit('filter')
     },
+    handleEnter() {
+      this.$emit('enter')
+    },
     handleVisibleChange(value) {
       if (!value) {
         this.handleFilter()
@@ -77,7 +80,7 @@ export default {
   },
   render(h) {
     const { item, form, context } = this
-    const MAX_WIDTH = 335
+    const MAX_WIDTH = 312
     let elementDom = null
 
     let typeEnum = (type) => {
@@ -103,7 +106,7 @@ export default {
       }
     }
 
-    let w = asciiWidth(item.placeholder || typeEnum(item.type)) + 40
+    let w = asciiWidth(item.placeholder || typeEnum(item.type)) + 34
     if (/px$/.test(item.width)) {
       w = item.width.replace(/px$/, '')
     }
@@ -117,25 +120,40 @@ export default {
 
     const calcWidth = (value, type) => {
       let W = null
-      if (!value) {
-        if (type) {
-          return Number(w) + 110 + 'px'
+      if (!Array.isArray(value)) {
+        if (!value) {
+          if (type) {
+            return Number(w) + 104 + 'px'
+          }
+          return w + 'px'
         }
-        return w + 'px'
-      }
-      if (getWidth(value, type) > w) {
-        if (getWidth(value, type) > MAX_WIDTH) {
-          W = MAX_WIDTH
+        if (getWidth(value, type) > w) {
+          if (getWidth(value, type) > MAX_WIDTH) {
+            W = MAX_WIDTH
+          } else {
+            W = getWidth(value, type)
+          }
         } else {
-          W = getWidth(value, type)
+          if (type) {
+            W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 150
+          } else {
+            W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 40
+          }
         }
       } else {
-        if (type) {
-          W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 150
-        } else {
-          W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 40
+        if (!value[0] && !value[1]) {
+          return Number(w) + 110 + 'px'
+        }
+        let widthMax = getWidth(value[0]) + getWidth(value[1]) + 35
+        if (widthMax > w) {
+          if (widthMax > MAX_WIDTH) {
+            W = MAX_WIDTH
+          } else {
+            W = widthMax
+          }
         }
       }
+
       return W + 'px'
     }
 
@@ -166,7 +184,7 @@ export default {
     const keyup = (ev) => {
       if (ev.keyCode === 13) {
         ev.target.blur()
-        this.handleFilter()
+        this.handleEnter()
       }
     }
 
@@ -178,7 +196,7 @@ export default {
           {
             attrs: {
               style: {
-                width: calcWidth(form[item.value])
+                width:calcWidth(form[item.value])
               },
               ruleField: true,
               'rule-form': 'ruleValidate',
@@ -338,7 +356,7 @@ export default {
             ruleErrorHide: item.ruleErrorHide
           },
           style: {
-            width: calcWidth(form[item.startValue], true)
+            width: calcWidth([form[item.startValue], form[item.endValue]], true)
           },
           props: inputRangeProps,
           on: {
@@ -365,13 +383,22 @@ export default {
         const datePickerProps = {
           value: form[item.value],
           type: item.type,
+          'prefix-icon': (item.props && item.props.prefixIcon) ?? '',
           clearable: (item.props && item.props.clearable) ?? true,
           // 将 props 对象中的属性应用到 datePicker 上
           ...item.props
         }
-        elementDom = h('datePickerPor', {
+        elementDom = h('el-date-picker', {
           directives: [{ name: 'rule-key' }],
-          attrs: { 'rule-form': 'ruleValidate', ruleField: true, rules: item.rules, ruleErrorHide: item.ruleErrorHide },
+          attrs: {
+            'rule-form': 'ruleValidate',
+            ruleField: true,
+            class: `n20-date-editor`,
+            'value-format': (item.props && item.props.valueFormat) ?? 'yyyy-MM-dd',
+            placeholder: (item.props && item.props.placeholder) ?? $lc('请选择'),
+            rules: item.rules,
+            ruleErrorHide: item.ruleErrorHide
+          },
           style: {
             width: calcWidth(form[item.value])
           },
@@ -396,29 +423,33 @@ export default {
       case 'monthrange':
         const pickerProps = {
           type: item.type,
-          startDate: form[item.startDate],
-          endDate: form[item.endDate],
+          startDate: form[item.startDate] || null,
+          endDate: form[item.endDate] || null,
+          rules: item.rules,
           clearable: (item.props && item.props.clearable) ?? true,
           ...item.props
         }
-
         elementDom = h('datePickerPor', {
           directives: [{ name: 'rule-key', value: 'startDate' }],
-          attrs: { 'rule-form': 'ruleValidate', ruleField: true, rules: item.rules, ruleErrorHide: item.ruleErrorHide },
+          attrs: {
+            ruleField: true,
+            'rule-form': 'ruleValidate',
+            ruleErrorHide: item.ruleErrorHide,
+            rules: item.rules
+          },
           props: pickerProps,
           style: {
             width: calcWidth(form[item.startDate], true)
           },
           on: {
+            'update:start-date': (val) => {
+              this.$set(form, item.startDate, val)
+            },
+            'update:end-date': (val) => {
+              this.$set(form, item.endDate, val)
+            },
             clear: this.handleClear,
-            change: (value) => {
-              if (value) {
-                this.$set(form, item.startDate, value[0])
-                this.$set(form, item.endDate, value[1])
-              } else {
-                this.$set(form, item.startDate, null)
-                this.$set(form, item.endDate, null)
-              }
+            change: () => {
               this.handleFilter()
             }
           },

package/src/components/AdvancedFilter/index.vue

@@ -1,16 +1,15 @@
 <template>
   <div :class="prefixCls">
-    <el-form ref="advancedFilter" v-if="visible" :class="prefixCls + '-body'">
+    <div ref="advancedFilter" v-show="visible" :class="prefixCls + '-body'">
       <slot name="prefix"></slot>
-      <el-form-item
+      <FormItem
         v-for="item in GroupData"
         :key="getOnlyKey(item)"
-        :class="[prefixCls + '-item', activeClass(item)]"
+        :class="[activeClass(item)]"
         :label="item.label"
-        :required="item.required !== undefined || item.required !== null ? item.required : false"
+        :required="item.required !== undefined || true ? item.required : false"
         :disabled="item.props && item.props.disabled"
       >
-        <div :class="prefixCls + '-content'">
           <slot v-if="item.slotName" :name="item.slotName"></slot>
           <formItemRender
             v-else
@@ -18,36 +17,39 @@
             :item="item"
             @blur="$emit('blur')"
             @clean="$emit('clean')"
+            @enter="$emit('enter')"
             @filter="$emit('filter', model)"
           />
-        </div>
-        <i
-          v-if="!item.isDefault"
+<!--        <i
+          v-if="!item.isNotClose"
           :key="getOnlyKey(item)"
           :class="[prefixCls + '-item-close', 'n20-icon-yichu']"
           @click="handleClose(item)"
-        ></i>
-      </el-form-item>
+        ></i>-->
+      </FormItem>
       <slot name="suffix"></slot>
-      <el-form-item :class="prefixCls + '-add'">
+      <div :class="prefixCls + '-add'">
         <el-button v-popover:advanced_popover onlyicon plain icon="el-icon-plus" />
         <el-popover ref="advanced_popover" placement="bottom-start" trigger="click">
           <el-input v-model="keyword" clearable class="input-w m-b-s" :placeholder="$lc('搜索筛选条件')" />
           <filterItem :filter-list="filterListS" :check-array.sync="checkList" @checked="check" />
         </el-popover>
+        <el-link class="m-l-s f-s-s color-primary" :underline="false" icon="n20-icon-query" @click="$emit('search')">
+          {{ '查询' | $lc }}</el-link
+        >
         <el-link class="m-l-s f-s-s" :underline="false" icon="n20-icon-qingchu" @click="cleared">
-          {{ '清除条件' | $lc }}</el-link
+          {{ '清空' | $lc }}</el-link
         >
-      </el-form-item>
-    </el-form>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-// import formItemInput from './form-item-input.vue'
 import formItemRender from './formItemRender.vue'
 import InputSearch from '../InputSearch/index.vue'
 import filterItem from './filterItem.vue'
+import FormItem from './FormItem.vue'
 import axios from '../../utils/axios.js'
 import { $lc } from '../../utils/i18n/index.js'
 import cloneDeep from 'lodash/cloneDeep'
@@ -60,9 +62,14 @@ export default {
     // formItemInput,
     formItemRender,
     InputSearch,
-    filterItem
+    filterItem,
+    FormItem
   },
   props: {
+    isNotClose: {
+      type: Boolean,
+      default: false
+    },
     visible: {
       type: Boolean,
       default: false
@@ -157,7 +164,13 @@ export default {
       let flag = ''
       switch (item.type) {
         case 'numberrange':
-          flag = this.model[item.startValue] && this.model[item.endValue] ? this.prefixCls + '-active' : ''
+          flag =
+            this.model[item.startValue] !== null &&
+            this.model[item.endValue] !== null &&
+            this.model[item.startValue] !== undefined &&
+            this.model[item.endValue] !== undefined
+              ? this.prefixCls + '-active'
+              : ''
           break
         case 'daterange':
         case 'datetimerange':
@@ -219,7 +232,27 @@ export default {
     cleared() {
       this.$emit('clear')
     },
-
+    setModelData(list) {
+      let arr = []
+      list.forEach((res) => {
+        if (res.value) {
+          arr.push(res.value)
+        } else if (res.startDate && res.endDate) {
+          arr.push(res.startDate)
+          arr.push(res.endDate)
+        } else if (res.startValue && res.endValue) {
+          arr.push(res.startValue)
+          arr.push(res.endValue)
+        }
+      })
+      for (const key in this.model) {
+        if (Object.hasOwnProperty.call(this.model, key)) {
+          if (!arr.includes(key)) {
+            delete this.model[key]
+          }
+        }
+      }
+    },
     check: _debounce(function (keys) {
       // 保存当前选择的过滤条件
       this.checkList = keys
@@ -232,6 +265,7 @@ export default {
           }
         })
       }
+      this.setModelData(saveCheckArr)
       this.saveFilter(saveCheckArr).then(({ code }) => {
         // 如果保存成功
         if (code === 200) {
@@ -240,7 +274,6 @@ export default {
         }
       })
       this.$emit('check')
-      // // 保存过滤条件
     }, 1000),
     /**
      * 保存筛选条件

package/src/components/Anchor/AnchorItem.vue

@@ -1,5 +1,10 @@
 <template>
   <ExpandablePane :anchor-item-id="id" :default-expand.sync="show" :title="title">
+    <div slot="title">
+      <slot name="title"
+        ><span>{{ title }}</span></slot
+      >
+    </div>
     <slot></slot>
     <div slot="tips">
       <slot name="tips"> </slot>

package/src/components/Anchor/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="flex-box" style="height: 100%">
+  <div :class="{ 'flex-box': position !== 'top' }" style="height: 100%">
     <AnchorSidebar
       v-if="position !== 'right'"
       :nav-list="navList"
       :activit="value"
       :style="{ width: navWidth }"
+      :class="{ 'top-css': position === 'top' }"
       @click="activitFn"
     />
     <div ref="anchor-content" :class="['flex-item', parentClass]" style="height: 100%; overflow: auto">
@@ -214,3 +215,24 @@ export default {
   }
 }
 </script>
+<style>
+.top-css {
+  width: auto !important;
+  display: flex;
+  margin-bottom: 4px;
+}
+.top-css .n20-anchor2-nav {
+  padding: 5px;
+  border-left: none;
+}
+.top-css .n20-anchor2-nav-activit {
+  color: var(--color-primary);
+}
+.top-css .n20-anchor2-nav-activit:after {
+  content: '';
+  height: 2px;
+  background-color: #007aff;
+  display: block;
+  margin-top: 4px;
+}
+</style>