n20-common-lib 1.2.43 → 1.3.0

package/src/components/NstcG6Components/NstcForm/AutocompleteCustom/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-autocomplete
+    v-model="_value"
+    v-bind="$attrs"
+    :style="{width:parseFloat(width) + 'px'}"
+    :placeholder="placeholder"
+    v-on="$listeners"
+    @select="handleSelect"
+  >
+    <template v-for="(_, slotName) in $slots" v-slot:[slotName]>
+      <slot :name="slotName" />
+    </template>
+  </el-autocomplete>
+</template>
+
+<script>
+export default {
+  name: 'AutocompleteCustom',
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+
+    width: {
+      type: [String, Number],
+      default: ''
+    },
+
+    unit: {
+      type: String,
+      default: ''
+    },
+
+    placeholder: {
+      type: String,
+      default: function (){
+        return '请输入'
+      }
+    },
+
+    selectHandler: {
+      type: Function,
+      default: undefined
+    }
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+
+  methods: {
+    handleSelect(val) {
+      this.selectHandler && this.selectHandler(val)
+    }
+  }
+}
+</script>

package/src/components/NstcG6Components/NstcForm/BusinessSpecific/InputMultiple.vue

@@ -0,0 +1,191 @@
+<!-- 行政区域三级联动下拉组件 -->
+<template>
+  <div class="nstc-g6-common-input-multiple">
+    <SelectCustom
+        v-model="_value[0]"
+        filterable
+        :options="options[0]"
+        :width="widthConfig[0]"
+        @change="inputChange(0)"
+        class="nstc-g6-common-input-multiple-select"
+    />
+    <SelectCustom
+        v-model="_value[1]"
+        filterable
+        :options="options[1]"
+        :width="widthConfig[1]"
+        @change="inputChange(1)"
+        class="nstc-g6-common-input-multiple-select"
+    />
+    <SelectCustom
+        v-model="_value[2]"
+        filterable
+        :options="options[2]"
+        :width="widthConfig[2]"
+        @change="inputChange(2)"
+        class="nstc-g6-common-input-multiple-select"
+    />
+  </div>
+</template>
+
+<script>
+import SelectCustom from '../SelectCustom'
+import axios from '@/utils/axios'
+export default {
+  name: "NstcInputMultiple",
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return [null, null, null]
+      }
+    },
+    // options: {
+    //   type: Array,
+    //   default: () => {
+    //     return [[],[],[]]
+    //   }
+    // },
+    widthConfig: {
+      type: Array,
+      default: () => {
+        return [100, 100, 100]
+      }
+    },
+    default: {
+      type: [String, Number, Array],
+      default: () => {
+        return []
+      }
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    labelKey: {
+      type: String,
+      default: ''
+    },
+    valueKey: {
+      type: String,
+      default: ''
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return null
+      }
+    },
+    // 额外参数
+    params: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 特殊处理
+    father: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    SelectCustom
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  created() {
+    this._value = this.default
+    this.request(this.url, 0)
+  },
+  data() {
+    return {
+      arr: [null, null, null],
+      options: [null,null,null]
+    }
+  },
+
+  methods: {
+    request(url, optionsIndex) {
+      const that = this
+
+      axios({
+        url: url,
+        method: 'get',
+        params: optionsIndex === 0 ? null : this.params
+      }).then(res => {
+        console.log(res)
+        let resList = res.list || res
+        resList = Array.isArray(resList) ? resList : [resList] 
+
+        // 特殊业务处理
+        if (this.father && optionsIndex === 0) {
+          let newOptions = []
+          that.options[optionsIndex] = resList
+          that.options[optionsIndex].map(item => {
+            if (!item.fatherNo) {
+              item.label = item[this.labelKey]
+              item.value = item[this.valueKey]
+              newOptions.push(item)
+            }
+          })
+          that.options[optionsIndex] = newOptions
+        } else {
+          // alert(1)
+          console.log(resList[0].children)
+          let newOptions = resList[0].children
+          newOptions.map(item => {
+            item.label = item[this.labelKey]
+            item.value = item[this.valueKey]
+          })
+        
+          that.options[optionsIndex] = newOptions
+          
+        }
+        
+        that.$nextTick(() => {
+          that.$forceUpdate()
+        })
+      }).catch(() => {})
+
+    },
+    inputChange(i) {
+      switch (i) {
+        case 0:
+            this._value[1] = ''
+            this._value[2] = ''
+            this.request(`${this.url}?${this.valueKey}=${this._value[i]}`, 1)
+          break;
+        case 1:
+            this._value[2] = ''
+            this.request(`${this.url}?${this.valueKey}=${this._value[i]}`, 2)
+          break;
+      }
+      
+    }
+    
+  },
+}
+</script>
+
+<style scoped lang="scss">
+//@import '~@/theme/theme1/styles/variables.scss';
+//.nstc-g6-common-input-multiple{
+//  display: flex;
+//  width: $formItemDefaultWidth;
+//  .nstc-g6-common-input-multiple-select {
+//    margin-right: 10px;
+//  }
+//  .input-custom{
+//    margin-right: 10px;
+//  }
+//}
+</style>

package/src/components/NstcG6Components/NstcForm/BusinessSpecific/InputWithUnit.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div v-if="isSingle" class="nstc-g6-common-input-with-unit">
+      <InputCustom
+          v-model="_value[0]"
+          :width="_widthConfig[0]"
+          :maxlength="3"
+      />
+      <SelectCustom
+          v-model="_value[1]"
+          filterable
+          :options="options"
+          :width="_widthConfig[1]"
+      />
+    </div>
+    <div v-else class="nstc-g6-common-input-with-unit">
+      <InputCustom
+          v-model="_value[0]"
+          :width="_widthConfig[0]"
+          :maxlength="3"
+      />
+      <span style="margin: 0 10px">到</span>
+      <InputCustom
+          v-model="_value[1]"
+          :width="_widthConfig[1]"
+          :maxlength="3"
+      />
+      <SelectCustom
+          v-model="_value[2]"
+          filterable
+          :options="options"
+          :width="_widthConfig[2]"
+      />
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import InputCustom from '../InputCustom'
+import SelectCustom from '../SelectCustom'
+export default {
+  name: "NstcInputWithUnit",
+  props: {
+    isSingle: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Array,
+      default: () => {
+        return [null, null]
+      }
+    },
+    options: {
+      type: Array,
+      default: () => {
+        return [
+          {label: '年', value: 3},
+          {label: '月', value: 2},
+          {label: '日', value: 1},
+        ]
+      }
+    },
+    widthConfig: {
+      type: Array,
+      default: () => {
+        return [150, 106]
+      }
+    },
+    default: {
+      type: [String, Number, Array],
+      default: () => {
+        return []
+      }
+    }
+  },
+  components: {
+    InputCustom,
+    SelectCustom
+  },
+  watch: {
+    isSingle:{
+      immediate: true,
+      handler(val) {
+        if (!val) {
+          this._value = ['', '', 3]
+          this._widthConfig = [150, 150, 106]
+        } else {
+          this._value = ['', 3]
+          this._widthConfig = [150, 106]
+        }
+      }
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  created() {
+    this._value = this.default
+    this._widthConfig = this.widthConfig
+  },
+  data() {
+    return {
+      arr: [null, null]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+//@import '~@/theme/theme1/styles/variables.scss';
+//.nstc-g6-common-input-with-unit{
+//  display: flex;
+//  width: $formItemDefaultWidth;
+//  align-items: center;
+//  // .input-custom{
+//  //   margin-right: 10px;
+//  // }
+//}
+</style>

package/src/components/NstcG6Components/NstcForm/BusinessSpecific/SelectTreeDialog.vue

@@ -0,0 +1,233 @@
+<template>
+  <SelectInDialogCustom
+      ref="SelectInDialogCustom"
+      v-model="model[0]"
+      :title="title"
+      :url="url"
+      clearable
+      remote
+      :value-key="valueKey"
+      :label-key="labelKey"
+      width="294"
+      :original-form="false"
+      :original-table="false"
+      :dialogVisibleTree="dialogVisibleTree"
+  >
+    <template v-slot:table>
+      <div style="display:flex;">
+        <el-input
+          class="select-dialog-custom-tree-inp"
+          placeholder="输入关键字进行过滤"
+          v-model="filterText">
+        </el-input>
+        <el-button
+          type="primary"
+          style="margin-left: 20px;"
+          class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-b"
+          @click.stop="handleQuery"
+        >
+          查询
+        </el-button>
+      </div>
+      
+      <div style="height:300px;overflow:scroll;">
+        <el-tree
+          class="filter-tree"
+          style="margin:20px;"
+          :data="data"
+          :props="defaultProps"
+          :node-key="nodeKey"
+          default-expand-all
+          :show-checkbox="showCheckbox"
+          v-bind="$attrs"
+          v-on="$listeners"
+          @node-click="treeNodeClick"
+          :filter-node-method="filterNode"
+          ref="tree"
+        >
+        </el-tree>
+      </div>
+      <div style='text-align:center;'>
+        <el-button
+          type="primary"
+          class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-b"
+          @click.stop="handleclick"
+        >
+          确认
+        </el-button>
+        <el-button
+          class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-b"
+          @click.stop="handleClear"
+        >
+          取消
+        </el-button>
+        </div>
+    </template>
+  </SelectInDialogCustom>
+
+</template>
+
+<script>
+import SelectInDialogCustom from '../SelectindialogCustom'
+export default {
+  name: 'SelectTreeDialog',
+
+  components: {
+    SelectInDialogCustom,
+  },
+  
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+
+  props: {
+    title: {
+      type: String,
+      default: '表格里边弹窗'
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    data: {
+      type: Array,
+      default: () => [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }]
+    },
+    defaultProps: {
+      type: Object,
+      default: () => {
+        return {
+          children: 'children',
+          label: 'label'
+        }
+      }
+    },
+    valueKey :{
+      type: String,
+      default: 'prop1'
+    },
+    labelKey: {
+      type: String,
+      default: 'prop2'
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+
+  },
+
+  data() {
+    return {
+      filterText: '',
+      model: [{ prop1: '1', prop2: '' }],
+      dialogVisibleTree: false,
+    }
+  },
+
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    handleQuery() {
+      this.$refs.tree.filter(this.filterText);
+    },
+    /**
+     * 树节点点击事件
+     *  回调参数： data, node, tree
+     */
+    treeNodeClick(data) {
+      this.queryFlag = false
+
+      const k = this.defaultProps.label || 'label'
+
+      this.filterText = data[k]
+      this.placeholder = this.filterText
+
+      this._value = data[this.nodeKey]
+      console.log(this._value,this.nodeKey)
+
+      // 主动让input框失去交单
+      // this.$refs[this.inputRefName].blur()
+      this.showPopoverFlag = false
+    },
+    handleclick() {
+      this.$emit('handleclick', this.filterText) 
+      this.model[0].prop2 = this.filterText
+      this.model[0].prop1 = this.nodeKey
+      this.$refs.SelectInDialogCustom.dialogVisible = false
+      console.log(this.filterText)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.select-dialog-custom-tree-inp {
+  .el-input__inner {
+    height: 34px !important;
+    margin-right: 20px;
+  }
+  .el-tree-node:focus {
+    background-color: #007AFF;
+  }
+}
+
+</style>
+
+<style scoped>
+.select-dialog-custom-tree-inp {
+  width: 299px;
+  height: 34px !important;
+}
+</style>

package/src/components/NstcG6Components/NstcForm/BusinessSpecific/readme.md

@@ -0,0 +1,7 @@
+#各个业务模块特殊的组件
+
+##融租
+
+```
+1. 期限
+```

package/src/components/NstcG6Components/NstcForm/CascaderCustom/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-cascader
+    v-model="_value"
+    v-bind="$attrs"
+    :collapse-tags="collapseTags"
+    :props="calcProps"
+    :style="{width:parseFloat(width) + 'px'}"
+    v-on="$listeners"
+  >
+    <template v-slot="scope">
+      <slot v-bind="scope" />
+    </template>
+    <template v-slot:empty>
+      <slot name="empty" />
+    </template>
+  </el-cascader>
+</template>
+
+<script>
+import axios from "@/utils/axios"
+
+export default {
+  name: 'CascaderCustom',
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+
+    width: {
+      type: [String, Number],
+      default: ''
+    },
+
+    collapseTags: {
+      type: Boolean,
+      default: true
+    },
+
+    url: {
+      type: String,
+      default: ''
+    },
+
+    props: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data() {
+    return {
+      options: []
+    }
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+
+    calcProps() {
+      return {
+        ...this.props,
+        lazyLoad: this.props.lazy
+          ? (node) => {
+            // Todo 需要后端统一传参格式与返回数据的格式
+            console.log('子选项node', node)
+          }
+          : undefined
+      }
+    }
+  },
+
+  async created() {
+    !this.props.lazy && (this.options = await this.getOptions())
+  },
+
+  methods: {
+    getOptions() {
+      return axios(this.url)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.el-cascader {
+  .el-input {
+    width: 100%;
+  }
+}
+</style>