n20-common-lib 2.5.0-beta.1 → 2.5.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.5.0-beta.1",
+  "version": "2.5.0-beta.3",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/cl-advanced-filter.scss

@@ -1,8 +1,16 @@
 .cl-advanced_filter {
+  position: relative;
+  display: flex;
+  flex: 1;
   padding: 8px;
   &_list {
-    width: 90%;
+    .el-form-item,
+    .el-form-item--small.el-form-item {
+      margin-bottom: 10px;
+    }
     &-item {
+      min-width: 200px;
+      max-width: 320px;
       border: 1px solid $--border-color-base;
       padding: 0 4px;
       border-radius: 4px;
@@ -12,9 +20,19 @@
       .el-input__inner:focus {
         box-shadow: none;
       }
+      :hover {
+        .cl-advanced_filter-close {
+          display: block;
+        }
+      }
+    }
+    :hover {
+      border-color: $--color-primary;
     }
   }
+
   &-close {
+    display: none;
     position: absolute;
     top: -10px;
     right: -10px;
@@ -22,3 +40,8 @@
     cursor: pointer;
   }
 }
+
+.popover-check-box {
+  max-height: 300px;
+  overflow-y: auto;
+}

package/src/assets/css/select.scss

@@ -47,3 +47,11 @@
     }
   }
 }
+
+.el-select.input-w {
+  .el-select__tags {
+    .el-tag--info {
+      max-width: 150px;
+    }
+  }
+}

package/src/components/AdvancedFilter/filterItem.vue

@@ -1,29 +1,46 @@
 <template>
-  <div>
+  <div class="popover-check-box">
     <el-checkbox-group v-model="checkList" class="flex-column" @change="checkChange">
-      <el-checkbox v-for="(item, i) in filterList" :key="i" class="m-t-b" :label="item.label" />
+      <el-checkbox
+        v-for="(item, i) in filterList"
+        :key="i"
+        class="m-t-b"
+        :disabled="checkList.includes(item.label)"
+        :label="item.label"
+      />
     </el-checkbox-group>
   </div>
 </template>
 
 <script>
-import { $lc } from '../../utils/i18n/index.js'
 export default {
   name: 'FilterItem',
   props: {
     filterList: {
       type: Array,
       default: () => []
+    },
+    checkArray: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
-      checkList: []
+      checkList: ''
+    }
+  },
+  watch: {
+    checkArray: {
+      handler(val) {
+        this.checkList = val
+      },
+      deep: true
     }
   },
   methods: {
     checkChange(keys) {
-      this.$emit('check', keys)
+      this.$emit('checked', keys)
     }
   }
 }

package/src/components/AdvancedFilter/filterList.vue

@@ -1,39 +1,118 @@
 <template>
   <el-form inline class="cl-advanced_filter_list">
-    <el-form-item v-for="(item, i) in data" :key="i" class="cl-advanced_filter_list-item" :label="item.label">
+    <el-form-item v-for="(item, i) in dataC" :key="i" class="cl-advanced_filter_list-item" :label="item.label">
       <slot v-if="item.slotName" :name="item.slotName"></slot>
       <formItemInput v-else :form="form" :item="item" />
-      <i class="cl-advanced_filter-close el-icon-error"></i>
+      <i class="cl-advanced_filter-close el-icon-error" @click="handleClose(item)"></i>
+    </el-form-item>
+    <el-form-item>
+      <el-button v-popover:advanced_popover onlyicon plain icon="el-icon-plus" />
+      <el-popover ref="advanced_popover" placement="bottom-start" trigger="click">
+        <el-form>
+          <InputSearch
+            v-model="search"
+            clearable
+            class="input-w m-b-s"
+            :placeholder="$l('搜索筛选条件')"
+            @change="searchFn"
+          />
+          <filterItem :filter-list="filterListC" :check-array.sync="checkList" @checked="check" />
+        </el-form>
+      </el-popover>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
 import formItemInput from './form-item-input.vue'
+import InputSearch from '../InputSearch/index.vue'
+import filterItem from './filterItem.vue'
+import mixins from './mixins/index.js'
 export default {
   name: 'FilterList',
   components: {
+    filterItem,
+    InputSearch,
     formItemInput
   },
+  mixins: [mixins],
   props: {
     data: {
       type: Array,
       default: () => []
+    },
+    form: {
+      type: Object,
+      default: () => ({})
+    },
+    width: {
+      type: String,
+      default: '90%'
+    },
+    filterList: {
+      type: Array,
+      default: () => []
+    },
+    filterId: {
+      type: String,
+      default: 'filterId'
     }
   },
   data() {
     return {
-      form: {}
+      search: '',
+      dataC: [],
+      filterListC: []
     }
   },
-  computed: {
-    dataC: {
-      get() {
-        return this.data
+  watch: {
+    GroupData: {
+      handler(value) {
+        this.dataC = value
+      },
+      immediate: true
+    },
+    filterList: {
+      handler(value) {
+        this.filterListC = value
       },
-      set(val) {
-        console.log(val)
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    this.getFilterList()
+  },
+  methods: {
+    handleClose(item) {
+      let data = this.GroupData.filter((s) => {
+        return s.label !== item.label || s.value !== item.value
+      })
+      this.saveFilter(data).then(({ code }) => {
+        if (code === 200) {
+          this.getFilterList()
+        }
+      })
+    },
+    searchFn() {
+      console.log(this.search)
+      this.filterListC = this.cloneDeepFList.filter((r) => {
+        return r.label.includes(this.search)
+      })
+    },
+    check(keys) {
+      this.checkList = keys
+      let groupFilter = []
+      if (keys.length > 0) {
+        keys.forEach((k) => {
+          groupFilter.push(this.filterList.find((s) => s.label === k))
+        })
       }
+      this.saveFilter(groupFilter).then(({ code }) => {
+        if (code === 200) {
+          this.getFilterList()
+        }
+      })
     }
   }
 }

package/src/components/AdvancedFilter/form-item-input.vue

@@ -3,7 +3,6 @@
     v-if="item.type === 'text' || item.type === undefined"
     v-model="form[item.value]"
     :clearable="item | clearableF"
-    style="width: 100%"
     v-bind="item.props"
     :placeholder="item.props && item.props.placeholder ? item.props.placeholder : $lc('请输入')"
     v-on="item.on"
@@ -12,7 +11,6 @@
     v-else-if="item.type === 'search'"
     v-model="form[item.value]"
     :clearable="item | clearableF"
-    style="width: 100%"
     readonly
     v-bind="item.props"
     v-on="item.on"
@@ -32,7 +30,6 @@
     v-model="form[item.value]"
     :clearable="item | clearableF"
     :multiple="item.multiple"
-    style="width: 100%"
     v-bind="item.props"
     v-on="item.on"
   >
@@ -58,7 +55,6 @@
   <inputNumber
     v-else-if="item.type === 'number'"
     v-model="form[item.value]"
-    style="width: 100%"
     v-bind="item.props"
     v-on="item.on"
   />
@@ -74,7 +70,6 @@
     v-model="form[item.value]"
     :type="item.type"
     :clearable="item | clearableF"
-    style="width: 100%"
     v-bind="item.props"
     v-on="item.on"
   />
@@ -84,7 +79,6 @@
     :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"
   />

package/src/components/AdvancedFilter/index.vue

@@ -1,45 +1,36 @@
 <template>
-  <div class="cl-advanced_filter">
-    <filterList :data="GroupData" />
-    <el-popover
-      ref="popover"
-      v-model="showPop"
-      trigger="manual"
-      :width="widthAs"
-      :popper-class="popperClass"
-      placement="bottom-start"
-      @show="show"
-    >
-      <template slot="reference">
-        <el-button onlyicon plain icon="el-icon-plus" @click="clickBtn" />
+  <div :class="prefixCls">
+    <filterList v-if="visible" :width="width" :form="model" :filter-id="filterId" :filter-list="filterList">
+      <template v-for="(item, i) in GroupData">
+        <div v-if="item.slotName" :key="i" :slot="item.slotName">
+          <slot :name="item.slotName"></slot>
+        </div>
       </template>
-      <el-form>
-        <InputSearch v-model="search" clearable class="input-w" :placeholder="$l('搜索筛选条件')" @change="searchFn" />
-        <filterItem :filter-list="cloneDeepFList" @check="check" />
-      </el-form>
-    </el-popover>
+    </filterList>
+    <div v-else :width="width"></div>
   </div>
 </template>
 
 <script>
 import filterList from './filterList.vue'
-import InputSearch from '../InputSearch/index.vue'
-import filterItem from './filterItem.vue'
-import getWidth from '../../utils/asciiWidth'
-import cloneDeep from 'lodash/cloneDeep'
-import axios from '../../utils/axios.js'
+
+import mixins from './mixins/index.js'
+const prefixCls = 'cl-advanced_filter'
 export default {
   name: 'AdvancedFilter',
   components: {
-    filterList,
-    filterItem,
-    InputSearch
+    filterList
   },
+  mixins: [mixins],
   props: {
     type: {
       type: String,
       default: ''
     },
+    visible: {
+      type: Boolean,
+      default: false
+    },
     filterList: {
       type: Array,
       default: () => []
@@ -52,6 +43,14 @@ export default {
       type: [String, Number],
       default: undefined
     },
+    width: {
+      type: String,
+      default: '90%'
+    },
+    model: {
+      type: Object,
+      default: () => ({})
+    },
     filterId: {
       type: String,
       default: 'AdvancedFilter'
@@ -60,106 +59,16 @@ export default {
   data() {
     return {
       search: '',
-      userNo: sessionStorage.getItem('userNo'),
       showPop: false,
       showPopC: false,
-      popover: undefined,
-      GroupData: [],
-      cloneDeepFList: [],
+      prefixCls: prefixCls,
+      // popover: undefined,
       remoteList: [],
-      popperClass: ('filters_popper_' + Date.now() + '_' + Math.random() + ' cl-advanced_filter_popover').replace(
-        '.',
-        ''
-      )
+      checkList: []
     }
   },
-  computed: {
-    widthAs() {
-      if (this.width !== undefined) return this.width
-
-      return this.labelWidthAs + 180
-    },
 
-    labelWidthAs() {
-      if (this.labelWidth !== undefined) {
-        return /em$/.test(this.labelWidth) ? parseInt(this.labelWidth) * 14 : parseInt(this.labelWidth)
-      }
-
-      let maxW = Math.max(4 * 14, ...this.filterList.map((r) => getWidth(r.label)))
-
-      return maxW + 14
-    }
-  },
-  watch: {
-    filterList: {
-      handler(val) {
-        if (val.length > 0) {
-          this.cloneDeepFList = cloneDeep(val)
-        }
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    this.getFilterList()
-  },
   methods: {
-    show() {
-      this.showPopC = true
-    },
-    clickBtn() {
-      if (!this.showPop) {
-        setTimeout(() => {
-          this.showPop = true
-        }, 60)
-      }
-    },
-    searchFn() {
-      if (this.search) {
-        this.cloneDeepFList = cloneDeep(this.filterList).filter((r) => r.label.includes(this.search))
-      } else {
-        this.cloneDeepFList = cloneDeep(this.filterList)
-      }
-    },
-    check(keys) {
-      if (keys.length > 0) {
-        let groupFilter = []
-        keys.forEach((k) => {
-          groupFilter.push(this.filterList.find((s) => s.label === k))
-        })
-        this.saveFilter(groupFilter)
-        this.getFilterList()
-      }
-    },
-    saveFilter(data) {
-      axios.post(
-        `/bems/prod_1.0/user/pageHabit?t=${Date.now()}`,
-        {
-          userNo: this.userNo,
-          pageId: this.filterId,
-          showStructure: JSON.stringify(data)
-        },
-        { loading: false, noMsg: true }
-      )
-    },
-    getFilterList() {
-      axios
-        .post(
-          `/bems/prod_1.0/user/pageHabit/list?t=${Date.now()}`,
-          {
-            userNo: this.userNo,
-            pageId: this.filterId
-          },
-          { loading: false, noMsg: true }
-        )
-        .then(({ data }) => {
-          if (data) {
-            let _data = JSON.parse(data)
-            console.log(_data)
-            this.GroupData = _data
-          }
-        })
-    },
     setOptions(key, opts) {
       let item = this.filterList.find((f) => f.value === key)
       if (item) {

package/src/components/AdvancedFilter/mixins/index.js

@@ -0,0 +1,73 @@
+import axios from '../../../utils/axios.js'
+import cloneDeep from 'lodash/cloneDeep'
+export default {
+  watch: {
+    filterList: {
+      handler(val) {
+        if (val.length > 0) {
+          this.cloneDeepFList = cloneDeep(val)
+        }
+      },
+      immediate: true
+    },
+    model: {
+      handler(val) {
+        this.$emit('change', val)
+      }
+    }
+  },
+  data() {
+    return {
+      cloneDeepFList: [],
+      GroupData: [],
+      checkList: [],
+      userNo: sessionStorage.getItem('userNo')
+    }
+  },
+  methods: {
+    /**
+     * 保存筛选条件
+     * @param data
+     */
+    saveFilter(data) {
+      return new Promise((resolve) => {
+        axios
+          .post(
+            `/bems/prod_1.0/user/pageHabit?t=${Date.now()}`,
+            {
+              userNo: this.userNo,
+              pageId: this.filterId,
+              showStructure: JSON.stringify(data)
+            },
+            { loading: false, noMsg: true }
+          )
+          .then((res) => {
+            resolve(res)
+          })
+      })
+    },
+    /**
+     * 获取筛选条件
+     */
+    getFilterList() {
+      axios
+        .post(
+          `/bems/prod_1.0/user/pageHabit/list?t=${Date.now()}`,
+          {
+            userNo: this.userNo,
+            pageId: this.filterId
+          },
+          { loading: false, noMsg: true }
+        )
+        .then(({ data }) => {
+          if (data) {
+            let _data = JSON.parse(data)
+            this.GroupData = _data
+            this.checkList = _data.map((s) => {
+              return s.label
+            })
+          }
+        })
+    }
+  }
+}

package/src/index.js

@@ -64,7 +64,7 @@ import WornPagination from './components/WornPagination/index.vue'
 
 import Tree from './components/Tree/index.vue'
 import SelectTreePro from './components/SelectTree/pro.vue'
-// import AdvancedFilter from './components/AdvancedFilter/index.vue'
+import AdvancedFilter from './components/AdvancedFilter/index.vue'
 
 // 新版日期选择框
 import BusiDatePicker from './components/DateSelect/busiDate.vue'
@@ -198,7 +198,7 @@ const components = [
   UploadMsg,
   Tree,
   SelectTreePro,
-  // AdvancedFilter,
+  AdvancedFilter,
   /* old */
   TableO,
   FiltersO,
@@ -351,6 +351,6 @@ export {
   refreshTab,
   Tree,
   SelectTreePro,
-  // AdvancedFilter,
+  AdvancedFilter,
   version
 }