n20-common-lib 1.2.43 → 1.3.0

package/src/components/Search/index.vue

@@ -0,0 +1,593 @@
+<!--
+  功能：    自定义查询条件
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+
+<template>
+  <div class="filter-custom-box">
+    <el-popover
+      ref="popover"
+      v-model="popoverShowFlag"
+      :placement="placement"
+      trigger="click"
+      popper-class="n20-search__popper"
+    >
+      <div class="filter-custom-box-main">
+        <div class="filter-custom-box-main-header">
+          <div class="filter-text">筛选</div>
+          <div class="filter-close-img" @click="closePopover">
+            <img :src="filterCloseImg" alt="" />
+          </div>
+        </div>
+        <div v-loading="loadingFlag" class="filter-custom-box-main-condition">
+          <NstcForm
+            v-model="formModel"
+            :form-data="formModel"
+            :config="formConfig"
+            :mount-and-query="false"
+            :reset.sync="reset"
+            :label-width="labelWidth"
+            @tree-node-click="clickTreeNode"
+          />
+        </div>
+        <div class="filter-custom-box-main-more">
+          <span @click="moreCondition">更多条件</span>
+        </div>
+        <div class="filter-custom-box-main-footer">
+          <el-button
+            type="primary"
+            class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-b"
+            @click="confirmAction"
+            >确定</el-button
+          >
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="重置本次操作"
+            placement="top-start"
+          >
+            <el-button
+              class="nstc-g6-common-btn-3 nstc-g6-common-btn-size-b"
+              @click="resetAction"
+              >清空</el-button
+            >
+          </el-tooltip>
+        </div>
+      </div>
+      <div slot="reference" class="filter-opt">
+        <el-button
+          icon="n20-icon-iconfontshaixuan"
+          plain
+          onlyicon
+          size="mini"
+          @click.stop="init"
+        />
+      </div>
+    </el-popover>
+
+    <!-- 查询条件   -->
+    <NstcTableSet
+      v-model="conditionSetFlag"
+      :type="defaultType"
+      :config="config"
+      :title="setTitle"
+      @confirm="handleConfirm"
+    />
+  </div>
+</template>
+
+<script>
+import filterImg from '@/assets/svg/filter.svg'
+import filterImgActive from '@/assets/svg/filterActive.svg'
+import filterCloseImg from '@/assets/svg/filterClose@2x.png'
+import searchImg from '@/assets/svg/hourglass.svg'
+import searchImgActive from '@/assets/svg/searchActive.svg'
+import NstcTableSet from '../NstcG6Components/NstcTableSet/NstcTableSet'
+import NstcForm from '../NstcG6Components/NstcForm/Component'
+import SvgIcon from '../NstcG6Components/NstcSvgIcon/NstcSvgIcon'
+import axios from '@/utils/axios'
+
+export default {
+  name: 'Search',
+
+  components: {
+    NstcTableSet,
+    NstcForm,
+    SvgIcon
+  },
+
+  props: {
+    defaultConfig: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          pageUUID: '',
+          moduleNo: '',
+          queryType: ''
+        }
+      }
+    },
+    defaultValue: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    valueConfig: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+
+  data() {
+    return {
+      placement: 'bottom',
+      filterImg,
+      filterCloseImg,
+      filterImgActive,
+      searchImg,
+      searchImgActive,
+      conditionSetFlag: false,
+      defaultType: 'condition',
+      formModel: {},
+      reset: false,
+      defaultSet: [],
+      setTitle: '筛选条件',
+      popoverShowFlag: false,
+      queryTypeObj: {
+        all: 1, // 全部
+        columnSet: 2, // 表格设置
+        condition: 3 // 条件设置
+      },
+      loadingFlag: false,
+      hasLoad: false,
+      formConfig: [],
+      oldFormModel: {}
+    }
+  },
+
+  computed: {
+    labelWidth() {
+      let l = 0
+      this.defaultSet.map((i) => {
+        l = Math.max(i[`name`].length, l)
+      })
+      return l === 0 ? '120' : l * 16 + 12
+    }
+  },
+  watch: {
+    defaultSet: {
+      handler(value) {
+        if (value && Array.isArray(value) && value.length) {
+          const that = this
+          this.formConfig = that.defaultSet.map((item) => {
+            let mold = that.typeConversion(item.type)
+            let options = []
+            try {
+              options = JSON.parse(item.options)
+            } catch (error) {
+              options = []
+            }
+            // item.multiple  添加默认配置
+            const customConfig = that.defaultConfig[item.id] || {}
+            let data = [
+              {
+                mold: mold.type, // 组件名称
+                name: item.name, // 表单选项的名称
+                prop:
+                  item.type == 'select' && item.multiple
+                    ? item.id + 's'
+                    : item.id, // 绑定的key值
+                options: options, //item.options ? JSON.parse(item.options):[], // 下拉选择框的选项
+                url: that.removeQuotation(item.url), // 远程查询的url
+                formConfig: item.formConfig || [], // 弹窗查询的 选择表单
+                columns: item.columns || [], // 弹框查询： 的表格配置
+                valueKey: that.removeQuotation(item.valueKey),
+                labelKey: that.removeQuotation(item.labelKey),
+                httpMethod: item.httpMethod || 'get', // 请求方式
+                lazyLoad: item.lazyLoad || false, // 请求方式
+                placeholder: item.placeholder,
+                width: item.width || 224,
+                disabled: item.disabled,
+                params: item.params,
+                multiple: item.multiple,
+                defaultProps: item.defaultProps,
+                remote: item.remote,
+                filterable: item.filterable,
+                query: item.query,
+                onlyClickLeaf: item.onlyClickLeaf, //item.onlyClickLeaf,
+                disableUnclickLeaf: item.disableUnclickLeaf, //下拉树是否禁用非子节点，默认false，不禁用
+                clearable: item.clearable,
+                checkStrictly: item.checkStrictly,
+                resProp: item.resProp || null,
+                isCache: item.isCache,
+                dateType: item.dateType, // 时间选择框 时间范围限制
+                class: {
+                  'filter-condition-input': [
+                    'input',
+                    'nstcSelectTree'
+                  ].includes(mold.type), // 用于控制组件长度
+                  [item.className || 'null-custom-class']: true
+                },
+                ...customConfig,
+                isInitRequest: item.name === '融资单位' && item.id // 特殊处理
+              }
+            ]
+
+            // 判断是否设置默认值
+            if (!['', null, undefined].includes(this.defaultValue[item.id])) {
+              data[0].default = this.defaultValue[item.id]
+            }
+
+            if (mold.attr) {
+              data[0].type = mold.attr
+            }
+
+            if (item.bind && item.bind instanceof Object) {
+              // 不能改变原来的属性
+              const bindKey = Object.keys(item.bind)
+              const dataKey = Object.keys(data[0])
+              const tempKey = bindKey.filter((k) => !dataKey.includes(k))
+
+              tempKey.map((k) => {
+                data[0][k] = item.bind[k]
+              })
+            }
+
+            /**
+             * 特殊自定义组件属性处理
+             */
+            if (
+              item.type === 'nstcSelectTree' ||
+              item.type === 'nstcSelectTreeList'
+            ) {
+              data[0].defaultProps = item.defaultProps
+              data[0].tagProps = item.tagProps
+              data[0].nodeKey = item.nodeKey
+              data[0].params = item.params
+              data[0].queryKey = item.queryKey
+              data[0].label = item.label
+            }
+            if (item.id === 'branchBankNo') {
+              data[0].defaultProps = item.defaultProps
+              data[0].nodeKey = item.nodeKey
+              data[0].params = item.params
+              data[0].queryKey = item.queryKey
+              data[0].filterable = item.filterable
+              data[0].httpMethod = item.httpMethod
+              data[0].queryKey = item.queryKey
+              data[0].lazyLoad = item.lazyLoad
+              data[0].pageMode = item.pageMode
+              data[0].pageCurrentKey = item.pageCurrentKey
+              data[0].pageSizeKey = item.pageSizeKey
+              data[0].remote = item.remote
+            }
+            return data
+          })
+          setTimeout(() => {
+            this.setValue()
+          }, 0)
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+
+    /**
+     * 下拉等组件联动，修改组件配置
+     * 监听form-change，并使用updateFormConfig更新表单配置
+     */
+    formModel: {
+      deep: true,
+      handler(data) {
+        this.$emit('form-change', data, this.formConfig)
+      }
+    }
+  },
+  mounted() {
+    console.log(444)
+  },
+  methods: {
+    /**
+     * 组件联动，避免多次触发nstcform.watch.config
+     */
+    updateFormConfig(newConfig) {
+      this.formConfig = newConfig
+    },
+
+    clickTreeNode(queryKey, data) {
+      if (queryKey) {
+        this.formModel[queryKey] = data[queryKey]
+      }
+    },
+    /**
+     * 提交保存成功
+     */
+    handleConfirm() {
+      console.log('查询条件设置成功', this.formModel)
+      // 缓存下之前的数据
+      const cache = JSON.parse(JSON.stringify(this.formModel))
+      this.init('update', () => {
+        this.formModel = cache
+      })
+      this.popoverShowFlag = true
+    },
+
+    async init(flag, cb) {
+      this.popoverShowFlag = !this.popoverShowFlag
+      if (this.hasLoad && flag !== 'update') {
+        this.changeDefaultSet()
+
+        this.$nextTick(() => {
+          this.$forceUpdate()
+        })
+        return
+      }
+      this.loadingFlag = true
+      this.defaultSet = []
+      const res = await axios.get(`/bems/1.0/dynamicUnit`, {
+        ...this.config,
+        queryType: 3
+      })
+      this.loadingFlag = false
+      this.hasLoad = true
+      this.defaultSet = res.data
+      this.changeDefaultSet()
+      this.$nextTick(() => {
+        this.updatePop()
+        this.$forceUpdate()
+        cb && cb()
+      })
+    },
+    changeDefaultSet(type) {
+      this.defaultSet = this.defaultSet.map((item) => {
+        let nItem = Object.assign({}, item)
+        nItem.disabled = this.valueConfig[item.id]
+          ? this.valueConfig[item.id].disabled || false
+          : false
+        this.valueConfig[item.id] &&
+          (nItem.label = this.valueConfig[item.id].label)
+        nItem.options = this.valueConfig[item.id]
+          ? JSON.stringify(this.valueConfig[item.id].options) || []
+          : item.options
+        nItem.time = new Date().getTime()
+        nItem.clearable = this.valueConfig[item.id]
+          ? this.valueConfig[item.id].clearable
+          : true
+        return nItem
+      })
+      console.log(this.defaultSet, 123)
+    },
+    setValue() {
+      let newObj = {}
+      for (let key1 in this.valueConfig) {
+        let item = this.valueConfig[key1]
+        let keyObj = this.defaultSet.find(
+          (item) => item.id === key1 && item.type === 'select' && item.multiple
+        )
+        if (item.hasOwnProperty('value')) {
+          this.$set(
+            newObj,
+            keyObj ? key1 + 's' : key1,
+            this.reset ? '' : item.value
+          )
+        }
+      }
+      // this.formModel = {...this.formModel,...this.oldFormModel, ...newObj}
+      if (JSON.stringify(this.oldFormModel) !== '{}') {
+        // 旧配置中的字段不在新的配置中，则需要移除对应的缓存值
+        this.defaultSet.forEach(({ id, multiple, type, queryKey }) => {
+          const isExist =
+            Reflect.has(this.oldFormModel, id) ||
+            Reflect.has(this.oldFormModel, id + 's')
+          // 在缓存中存在，则取缓存的值
+          if (isExist) {
+            if (type === 'select' && multiple) {
+              this.formModel[id + 's'] = this.oldFormModel[id + 's']
+            } else {
+              this.formModel[id] = this.oldFormModel[id]
+            }
+          } else {
+            this.formModel[id] = this.defaultSet[id]
+          }
+        })
+        // 新配置中移除了某些字段，需要将缓存中的字段移除
+        Object.keys(this.oldFormModel).forEach((k) => {
+          const isExist = this.defaultSet.find((item) => {
+            return item.id === k || item.id + 's' === k || item.queryKey == k
+          })
+          if (!isExist) {
+            delete this.formModel[k]
+          }
+        })
+      }
+      this.formModel = { ...this.formModel, ...newObj }
+      this.reset = false
+    },
+    /**
+     * 类型转化方法
+     */
+    typeConversion(type) {
+      // 属性合集
+      const mold = [
+        {
+          // 时间
+          type: 'datepicker',
+          attr: 'daterange'
+        }
+      ]
+      // 筛选对应需要添加属性的数据
+      // eg:
+      let isAddAttr = mold.filter((x) => x.attr === type)
+
+      return isAddAttr.length !== 0
+        ? {
+            type: isAddAttr[0].type,
+            attr: isAddAttr[0].attr
+          }
+        : {
+            type: type,
+            attr: null
+          }
+    },
+
+    /**
+     * 查询更多条件
+     */
+    moreCondition() {
+      this.conditionSetFlag = true
+    },
+
+    /**
+     * 确认查询
+     */
+    confirmAction() {
+      this.popoverShowFlag = false
+      this.oldFormModel = JSON.parse(JSON.stringify(this.formModel))
+      // 格式化金额
+      this.$emit('search', this.formModel)
+    },
+
+    /**
+     * 去掉后台返回字段的”
+     */
+    removeQuotation(str) {
+      return str ? str.replace(/"/g, '') : ''
+    },
+
+    /**
+     * 重置
+     */
+    resetAction() {
+      this.reset = true
+      this.oldFormModel = {}
+      this.changeDefaultSet('reset')
+      this.$emit('reset', this.formModel)
+    },
+
+    /**
+     * 关闭
+     */
+    closePopover() {
+      this.reset = true
+      this.$nextTick(() => {
+        this.popoverShowFlag = false
+      })
+    },
+
+    /**
+     * 手动打开
+     */
+    openPopover() {},
+
+    updatePop() {
+      this.$refs.popover.updatePopper()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.n20-search__popper.el-popper[x-placement^='bottom'] {
+  padding: 16px;
+}
+.filter-custom-box {
+  display: inline-block;
+  .interval-input-custom {
+  }
+  .filter-btn {
+    height: 34px !important;
+    width: 90px !important;
+  }
+  .filter-opt {
+    display: inline-block;
+    cursor: pointer;
+    &-temp {
+      border: 1px solid #dddddd;
+      // width: 26px;
+      // height: 26px;
+      padding: 5px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      .is-svg-default {
+        display: block;
+      }
+      .is-svg-hover {
+        display: none;
+      }
+    }
+
+    &-temp:hover {
+      border: 1px solid #007aff;
+      .is-svg-default {
+        display: none;
+      }
+      .is-svg-hover {
+        display: block;
+      }
+    }
+  }
+
+  &-main {
+    display: flex;
+    flex-direction: column;
+    min-width: 360px;
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-right: 16px;
+      .filter-text {
+        color: #262d34;
+        font-size: 16px;
+      }
+      .filter-close-img {
+        cursor: pointer;
+      }
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    &-condition {
+      flex: 1;
+      //border: 1px solid #000;
+      overflow-y: auto;
+      margin-top: 11px;
+      max-height: 300px !important;
+      padding-top: 3px;
+      // 13 剧中
+      width: calc(100%);
+      .el-form-item {
+        margin-bottom: 16px;
+      }
+    }
+    &-more {
+      margin: 10px 0 6px 0;
+      font-size: 14px;
+      span {
+        color: #007aff;
+        cursor: pointer;
+      }
+    }
+    &-footer {
+      text-align: center;
+    }
+  }
+  .el-input__inner {
+    width: 224px;
+  }
+}
+</style>
+

package/src/components/SecondaryTab/index.vue

@@ -1,58 +1,58 @@
-
-<template>
-  <el-tabs
-    :value="init"
-    class="n20-secondary-tab m-b"
-    :before-leave="beforeFn"
-    @tab-click="clickFn"
-  >
-    <el-tab-pane
-      v-for="item of data"
-      :key="item.name"
-      :tab-info="item"
-      :name="item.name"
-      :icon="item.icon"
-      :disabled="item.disabled"
-    >
-      <template slot="label">
-        <span v-if="item.icon" :class="item.icon"></span>
-        <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
-        {{ item.name }}
-      </template>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script>
-export default {
-  name: 'SecondaryTab',
-  props: {
-    data: {
-      type: Array,
-      default: () => []
-    },
-    init: {
-      type: String,
-      default: ''
-    },
-    stop: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    clickFn(C) {
-      let item = C.$attrs['tab-info']
-      if (this.$listeners['update:init']) {
-        !item.disabled && this.$emit('update:init', item.name)
-      }
-      if (this.$listeners['click']) {
-        this.$emit('click', item)
-      }
-    },
-    beforeFn(name) {
-      return !this.stop
-    }
-  }
-}
-</script>
+
+<template>
+  <el-tabs
+    :value="init"
+    class="n20-secondary-tab m-b"
+    :before-leave="beforeFn"
+    @tab-click="clickFn"
+  >
+    <el-tab-pane
+      v-for="item of data"
+      :key="item.name"
+      :tab-info="item"
+      :name="item.name"
+      :icon="item.icon"
+      :disabled="item.disabled"
+    >
+      <template slot="label">
+        <span v-if="item.icon" :class="item.icon"></span>
+        <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
+        {{ item.name }}
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  name: 'SecondaryTab',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    init: {
+      type: String,
+      default: ''
+    },
+    stop: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    clickFn(C) {
+      let item = C.$attrs['tab-info']
+      if (this.$listeners['update:init']) {
+        !item.disabled && this.$emit('update:init', item.name)
+      }
+      if (this.$listeners['click']) {
+        this.$emit('click', item)
+      }
+    },
+    beforeFn(name) {
+      return !this.stop
+    }
+  }
+}
+</script>