n20-common-lib 1.3.9 → 1.3.12

package/nstc-g6/components/NstcForm/SelectCustom/index.vue

@@ -0,0 +1,460 @@
+<template>
+  <div>
+    <el-select
+      v-model="_value"
+      v-nstc-lazy-load="lazyLoadAction"
+      v-bind="$attrs"
+      class="input-w"
+      :style="{ width: parseFloat(width ? width : 224) + 'px' }"
+      :placeholder="placeholder || '请选择'"
+      :loading="loading"
+      :remote="remote"
+      :remote-method="remoteMethod"
+      :collapse-tags="collapseTags"
+      :multiple="multiple"
+      :filterable="filterable"
+      :allow-create="allowCreate"
+      :default-first-option="defaultFirstOption"
+      :value-key="valueKey"
+      :is-cache="isCache"
+      :clearable="clearable"
+      v-on="$listeners"
+      @blur="selectBlur"
+      @visible-change="visibleChange"
+      @focus="selectFocus"
+    >
+      <template v-for="item in _options">
+        <el-option-group v-if="item.children" :key="item.label" v-bind="item">
+          <el-option
+            v-for="child in item.children"
+            :key="`${item.label}-${JSON.stringify(child.value)}`"
+            v-bind="child"
+          />
+        </el-option-group>
+        <el-option v-else :key="JSON.stringify(item.value)" v-bind="item">
+          <div v-if="useCustomTemplate === 1">
+            <span style="float: left; margin-right: 6px">{{ item.value }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{
+              item.label
+            }}</span>
+          </div>
+        </el-option>
+      </template>
+      <template v-for="(_, slotName) in $slots" v-slot:[slotName]>
+        <slot :name="slotName"></slot>
+      </template>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import axios from '../../../../src/utils/axios'
+
+export default {
+  name: 'SelectCustom',
+
+  directives: {
+    'nstc-lazy-load': {
+      bind(el, binding) {
+        const SELECTWRAP_DOM = el.querySelector(
+          '.el-select-dropdown .el-select-dropdown__wrap'
+        )
+        SELECTWRAP_DOM.addEventListener('scroll', function () {
+          const condition =
+            this.scrollHeight - this.scrollTop <= this.clientHeight
+          console.log('condition', condition)
+          if (condition) {
+            binding.value()
+          }
+        })
+      }
+    }
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type: [String, Number, Boolean, Array, Object],
+      default: null
+    },
+
+    width: {
+      type: [String, Number],
+      default: ''
+    },
+
+    options: {
+      type: [Array, String],
+      default: () => []
+    },
+
+    collapseTags: {
+      type: Boolean,
+      default: true
+    },
+
+    remote: {
+      type: Boolean,
+      default: false
+    },
+
+    url: {
+      type: String,
+      default: ''
+    },
+
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+
+    allowCreate: {
+      type: Boolean,
+      default: false
+    },
+
+    defaultFirstOption: {
+      type: Boolean,
+      default: false
+    },
+
+    reserveKeyword: {
+      type: Boolean,
+      default: false
+    },
+
+    query: {
+      type: String,
+      default: 'query'
+    },
+
+    // 远程搜索的其他参数
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+
+    // 返回的值是不是对象
+    optionValueIsObject: {
+      type: Boolean,
+      default: false
+    },
+
+    isSelectChangeValue: {
+      type: Boolean,
+      default: false
+    },
+
+    placeholder: {
+      type: String,
+      default: function () {
+        return '请选择'
+      }
+    },
+
+    httpMethod: {
+      type: String,
+      default: 'get'
+    },
+
+    queryDataFormatter: {
+      type: Function,
+      default: (data) => {
+        return data
+      }
+    },
+
+    useCustomTemplate: {
+      type: Number,
+      default: -1
+    },
+
+    template: {
+      type: String,
+      default: ''
+    },
+
+    // 是否添加懒加载
+    lazyLoad: {
+      type: Boolean,
+      default: false
+    },
+
+    pageMode: {
+      type: String,
+      default: 'common' // common 公共模式;  special: 特殊模式
+    },
+
+    pageCurrentKey: {
+      type: String,
+      default: 'current'
+    },
+
+    pageSizeKey: {
+      type: String,
+      default: 'size'
+    },
+
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 返回数据取值
+    resProp: {
+      type: String,
+      default: ''
+    },
+    // 是否缓存远程查询option
+    isCache: {
+      type: Boolean,
+      default: false
+    },
+    // 是否初始化请求
+    isInitRequest: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      showUp: false,
+      showIcon: true,
+      loading: false,
+      remoteOptions: [],
+      queryStr: null,
+      paginationObj: {
+        'page.current': 1,
+        'page.size': 20
+      }
+    }
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('update:isSelectChangeValue', true)
+
+        this.$nextTick(() => {
+          this.$emit('input', val)
+        })
+      }
+    },
+
+    remoteMethod() {
+      return this.remote
+        ? (query) => {
+            this.queryStr = query
+            this.remoteOptions = []
+            this.getList()
+          }
+        : undefined
+    },
+
+    _options: {
+      get() {
+        // return this.remote ? this.remoteOptions : this.options;
+
+        if (this.url) {
+          return this.remoteOptions
+        } else {
+          if (Array.isArray(this.options)) {
+            return this.options
+          } else {
+            try {
+              return JSON.parse(this.options)
+            } catch (error) {
+              return []
+            }
+          }
+        }
+      },
+      set(val) {
+        return val
+      }
+    }
+  },
+  watch: {
+    isInitRequest: {
+      handler(val) {
+        if (val) {
+          this.remoteOptions = []
+          this.getList()
+        }
+      },
+      immediate: true
+    },
+    url: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.getList()
+        }
+      }
+    }
+  },
+  created() {
+    this.$bus.$on('nstc_custom_form_config_update', (formData) => {
+      console.log('监听到的全局事件', formData)
+    })
+  },
+  beforeDestroy() {
+    this.$bus.$off('nstc_custom_form_config_update')
+  },
+
+  methods: {
+    mouseenter() {
+      this._value && (this.showIcon = false)
+    },
+    mouseleave() {
+      this.showIcon = true
+    },
+    setRemoteOptions(options) {
+      this.remoteOptions = options
+    },
+
+    /**
+     * 懒加载
+     */
+    lazyLoadAction() {
+      if (this.lazyLoad) {
+        this.paginationObj['page.current']++
+        this.getList()
+      }
+    },
+
+    /**
+     * 获取下拉列表
+     */
+    async getList() {
+      this.loading = true
+      try {
+        // 构建请求的体
+        let key = this.httpMethod.toLowerCase() === 'post' ? 'data' : 'params'
+        this._options = []
+        let keyParams = this.lazyLoad
+          ? {
+              [this.query]: this.queryStr,
+              ...this.paginationObj,
+              ...this.params
+            }
+          : {
+              [this.query]: this.queryStr,
+              ...this.params
+            }
+        let remoteOptions = await axios({
+          url: this.url,
+          method: this.httpMethod,
+          [key]: keyParams,
+          loading: false
+        })
+
+        console.log(this.resProp, remoteOptions)
+
+        if (this.resProp && this.resProp !== '' && this.resProp !== null) {
+          remoteOptions = remoteOptions[this.resProp] || remoteOptions
+        } else {
+          remoteOptions = remoteOptions[`list`] || remoteOptions
+        }
+
+        // remoteOptions = remoteOptions[`list`] || remoteOptions;
+        if (!Array.isArray(remoteOptions)) {
+          remoteOptions = remoteOptions[Object.keys(remoteOptions)[0]]
+        }
+        // 返回数据格式化
+        this.queryDataFormatter &&
+          (remoteOptions = await this.queryDataFormatter(remoteOptions))
+        console.log(remoteOptions, 'remoteOptions', this.remoteOptions)
+        !remoteOptions.length && (this.remoteOptions = []) //未查出数据，需要把下拉值置空
+        console.log(this.remoteOptions)
+        if (this.lazyLoad) {
+          const temp = remoteOptions.map((item) => {
+            const label = item[this.labelKey ? this.labelKey : 'label']
+            const value = item[this.valueKey ? this.valueKey : 'value']
+            return {
+              value: this.optionValueIsObject
+                ? { ...item, label, value }
+                : value,
+              label
+            }
+          })
+          this.remoteOptions = this.remoteOptions.concat(temp)
+        } else {
+          this.remoteOptions = remoteOptions.map((item) => {
+            const label = item[this.labelKey ? this.labelKey : 'label']
+            const value = item[this.valueKey ? this.valueKey : 'value']
+            return {
+              value: this.optionValueIsObject
+                ? { ...item, label, value }
+                : value,
+              label
+            }
+          })
+        }
+      } catch (err) {
+        console.error(err)
+      } finally {
+        this.loading = false
+      }
+    },
+    visibleChange(val) {
+      this.showUp = val
+    },
+    /**
+     * 失去焦点
+     */
+    selectBlur() {
+      if (this.lazyLoad) {
+        this.paginationObj['page.current']++
+      }
+    },
+
+    /**
+     * 获取焦点
+     */
+    selectFocus() {
+      this.queryStr = null
+      if (!this.isCache && this.url && this._options.length < 1) {
+        this.remoteOptions = []
+        this.getList()
+      } else if (this.isCache && this.url) {
+        this.remoteOptions = []
+        this.getList()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.remote {
+  position: relative;
+  left: -24px;
+  display: inline-block;
+  height: 100%;
+}
+</style>

package/nstc-g6/components/NstcForm/SelectSubject/NstcSelectSubject.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-13 11:06:47
+ * @LastEditTime: 2022-01-13 17:11:38
+ * @LastEditors: Please set LastEditors
+ * @Description: 科目选择
+ * @FilePath: NstcSelectSubject.vue
+-->
+<template>
+  <SelectAndDialog v-model="_value" ref="select" v-bind="bindProps" :table-form="formSearch" :format-data="formatData"
+                   :format-params="formatParams" @show-dialog="onShowDialog">
+    <div class="form-wrap">
+      <el-form inline :model="formSearch">
+        <el-form-item :label="chMapper.subjectNoLabel">
+          <el-input
+              :placeholder="chMapper.plcInput"
+              v-model="formSearch.km"
+              maxlength="60"
+              clearable
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="chMapper.subjectNameLabel">
+          <el-input
+              :placeholder="chMapper.plcInput"
+              v-model="formSearch.kmName"
+              maxlength="60"
+              clearable
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="nstc-g6-common-btn-1" @click="searchClick">查询
+          </el-button>
+          <el-button style="margin-left:8px;" class="nstc-g6-common-btn-3" @click="queryReset">重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </SelectAndDialog>
+</template>
+
+<script>
+import SelectAndDialog from "../SelectAndDialog/NstcSelectAndDialog.vue";
+
+export default {
+  name: "NstcSelectSubject",
+  components: {SelectAndDialog},
+  props: {
+    value: [String, Object],
+    queryConf: {
+      type: Object,
+      default: () => {
+      }
+    },
+    chMapper: {
+      type: Object,
+      default: () => ({
+        title: "选择科目",
+        plcInput: "请输入",
+        plcSelect: "请选择",
+        noselectmsg: "请选择科目",
+        subjectNoLabel: "科目编号",
+        subjectNameLabel: "科目名称",
+        balanceDirectionlabel: "余额方向",
+      }),
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showText: "",
+      formSearch: {
+        km: "",
+        kmName: "",
+      },
+      showDialog: false,
+      columns: [],
+      options: [],
+      inputHovering: false,
+      remoteQuery: "",
+      bindProps: {},
+    };
+  },
+  wacth: {
+    'queryConf.defaultParam': {
+      handler(val) {
+        this.$refs.select.queryAllData();
+        // this.queryAllData();
+      },
+      deep: true
+    }
+  },
+  computed: {
+    _value: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.value;
+      },
+    },
+  },
+  created() {
+    let props = {
+      columns: [
+        {prop: "km", label: this.chMapper.subjectNoLabel, align: "center"},
+        {prop: "kmName", label: this.chMapper.subjectNameLabel, align: "center"},
+        {prop: "dirName", label: this.chMapper.balanceDirectionlabel, align: "center"},
+      ],
+      url: this.queryConf.url || "/api/nstc-tss/1.0/remote/list",
+      httpMethod: this.queryConf.httpMethod || "POST",
+      params: this.queryConf.defaultParam || {},
+      rowKey: "km",
+      valueKey: "km",
+      labelKey: "km",
+      disabled: this.disabled,
+      chMapper: this.chMapper
+    };
+    this.bindProps = props;
+  },
+  mounted() {
+  },
+  methods: {
+    formatParams(params) {
+      console.log(params, '----------params')
+      let size = 20;
+      let current = 1;
+      if (params["page.size"]) {
+        size = params["page.size"];
+        current = params["page.current"];
+      }
+      if (params.page && params.page.size) {
+        size = params.page.size;
+        current = params.page.current;
+      }
+      let page = {"pageSize": size, "pageNo": current};
+      if (params.diabledValue && !(params.brNo)) {
+        params.brNo = params.diabledValue
+      }
+      return {...params, ...page};
+    },
+    formatData(res) {
+      let data = [],
+          total = 0;
+      if (res && !res.total && Array.isArray(res)) {
+        data = res;
+        total = res.length;
+      } else if (res && res.total && res.list) {
+        data = res.list || [];
+        total = res.total;
+      }
+      return {data, total};
+    },
+
+
+    onShowDialog() {
+      this.queryReset();
+    },
+
+    searchClick() {
+      this.$refs.select.queryTableData();
+    },
+
+    queryReset() {
+      this.formSearch = {
+        km: "",
+        kmName: "",
+      };
+    },
+  },
+};
+</script>
+
+<style>
+.search-btn {
+  color: #c0c4cc;
+  position: absolute;
+  right: 5px;
+  top: -1px;
+}
+</style>