n20-common-lib 1.3.8 → 1.3.11

package/nstc-g6/components/NstcForm/SelectAndDialog/NstcSelectAndDialog.vue

@@ -0,0 +1,377 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-13 11:06:47
+ * @LastEditTime: 2022-02-15 14:01:35
+ * @LastEditors: Please set LastEditors
+ * @Description: 下拉+弹框
+ * @FilePath: SelectAndDialog.vue
+-->
+<template>
+  <div class="dialog-select">
+    <div
+      style="position: relative"
+      @mouseenter="hovering = true"
+      @mouseleave="hovering = false"
+    >
+      <el-select
+        v-model="selectValue"
+        v-nstc-lazy-load="lazyLoadAction"
+        filterable
+        remote
+        :loading="loading"
+        :remote-method="filterOptions"
+        :placeholder="chMapper.plcSelect"
+        :disabled="disabled"
+        v-bind="$attrs"
+        @change="selectOpt"
+        @blur="selectBlur"
+        @focus="selectFocus"
+        v-on="$listeners"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item[valueKey]"
+          :label="item[labelKey]"
+          :value="item[valueKey]"
+        />
+      </el-select>
+      <i
+        v-if="!showClose"
+        class="search-btn el-input__icon el-icon-search"
+        @click="onSearchIconClick"
+      >
+      </i>
+      <i
+        v-if="showClose"
+        class="search-btn el-select__caret el-input__icon el-icon-circle-close"
+        @click="onClearIconClick"
+      ></i>
+    </div>
+
+    <DialogTable
+      ref="dialog"
+      v-model="showDialog"
+      v-bind="dialogProps"
+      @comfirm="onComfirm"
+    >
+      <template slot="form">
+        <slot></slot>
+      </template>
+    </DialogTable>
+  </div>
+</template>
+
+<script>
+import axios from '../../../../src/utils/axios'
+import DialogTable from '../../NstcDialogTable/NstcDialogTable'
+export default {
+  name: 'NstcSelectAndDialog',
+  components: { DialogTable },
+  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 - 2 <= this.clientHeight
+          console.log('condition', condition)
+          if (condition) {
+            binding.value()
+          }
+        })
+      }
+    }
+  },
+  props: {
+    value: String,
+    columns: Array,
+    url: String,
+    httpMethod: {
+      type: String,
+      default: 'GET'
+    },
+    query: {
+      type: String,
+      default: 'label'
+    },
+    params: {
+      type: Object,
+      default: () => ({
+        isEnable: 1
+      })
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    formatData: {
+      type: Function,
+      default: (d) => d
+    },
+    formatParams: {
+      type: Function,
+      default: (d) => d
+    },
+    tableForm: {
+      type: Object,
+      default: () => {}
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    chMapper: {
+      type: Object,
+      default: () => ({
+        title: '选择xx',
+        noselectmsg: '请选择xx',
+        plcInput: '请输入',
+        plcSelect: '请选择'
+      })
+    },
+    // 是否添加懒加载
+    lazyLoad: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showDialog: false,
+      options: [],
+      allData: [],
+      hovering: false,
+      loading: false,
+      remoteQuery: '',
+      dialogProps: {},
+      paginationObj: {
+        current: 1,
+        size: 20
+      },
+      lazyLoadLocal: false
+    }
+  },
+  computed: {
+    showClose() {
+      let hasValue =
+        this.value !== undefined && this.value !== null && this.value !== ''
+      return this.hovering && hasValue
+    },
+    selectValue: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        console.log(this.value)
+        return this.value
+      }
+    }
+  },
+  beforeDestroy() {
+    this.$bus.$off('nstc_custom_form_config_update')
+  },
+  created() {
+    let props = {
+      title: this.chMapper.title,
+      warning: this.chMapper.noselectmsg,
+      single: true,
+      columns: this.columns,
+      rowKey: this.rowKey,
+      queryApi: this.queryApi,
+      formatParams: this.beforeFormatParams,
+      formatData: this.formatData,
+      appendToBody: this.appendToBody
+    }
+    this.dialogProps = props
+    this.$bus.$on('nstc_custom_form_config_update', (formData) => {
+      console.log('监听到的全局事件', formData)
+    })
+  },
+  mounted() {
+    this.editSetOptions()
+    this.lazyLoadLocal = this.lazyLoad
+  },
+  methods: {
+    /**
+     * 懒加载
+     */
+    lazyLoadAction() {
+      if (this.lazyLoadLocal) {
+        this.paginationObj.current++
+        this.queryAllData()
+      }
+    },
+    async queryAllData() {
+      let param = this.lazyLoadLocal
+        ? this.beforeFormatParams(this.paginationObj, 'init')
+        : this.beforeFormatParams({ size: 100, current: 1 }, 'init')
+      this.lazyLoadLocal ? (param.quickSearch = this.remoteQuery) : ''
+      let res = await this.queryApi(param)
+
+      if (!this.lazyLoadLocal && res && res.total && res.total > 100) {
+        param = this.beforeFormatParams({ size: res.total, current: 1 }, 'init')
+        let resAll = await this.queryApi(param)
+        res = resAll
+      }
+      console.log('数据====', res)
+      let { data } = this.formatData(res || [])
+      this.allData = this.lazyLoadLocal ? this.allData.concat(data) : data
+      // this.allData = data;
+      console.log(this.allData)
+      this.lazyLoadLocal ? this.setOptions(this.allData) : this.setOptions(data)
+    },
+
+    beforeFormatParams(pageParam, mode) {
+      const { size, current } = pageParam
+      let defaultParam = this.params
+      let page = this.formatPageParam(size, current)
+      let params
+      if (mode != 'init') {
+        let param = this.queryFormData || {}
+        params = { ...defaultParam, ...param, ...page }
+      } else {
+        params = { ...defaultParam, ...page }
+      }
+      return this.formatParams(params)
+    },
+
+    formatPageParam(size, current) {
+      let page = { 'page.size': size, 'page.current': current }
+      let method = this.httpMethod.toUpperCase()
+      if (method == 'POST') {
+        page = { page: { size, current } }
+      }
+      return page
+    },
+
+    queryApi(param) {
+      const { url, httpMethod } = this
+      let body = httpMethod.toUpperCase() === 'POST' ? 'data' : 'params'
+      let reqConf = { url, method: httpMethod }
+      reqConf[body] = param
+      return axios(reqConf)
+    },
+
+    setOptions(data) {
+      // let opts = [];
+      // let value = this.value;
+      // let valueKey = this.valueKey;
+      // if (value) {
+      //   let row = data.find((item) => item[valueKey] == value);
+      //   if (row) {
+      //     let filters = data.filter((item) => item[valueKey] != value);
+      //     opts = [row].concat(filters.slice(0, 9));
+      //   } else {
+      //     opts = data.slice(0, 10);
+      //   }
+      // } else {
+      //   opts = data.slice(0, 10);
+      // }
+      this.options = data
+    },
+
+    filterOptions(query) {
+      this.remoteQuery = query
+      if (this.lazyLoad) {
+        this.allData = []
+        this.queryAllData()
+        return
+      }
+      if (query) {
+        let opts = this.allData.filter((item) => {
+          return item[this.labelKey].indexOf(query) > -1
+        })
+        this.options = opts.slice(0, 10)
+      } else {
+        this.options = this.allData.slice(0, 10)
+      }
+    },
+
+    updateOptions(value) {
+      let allData = this.allData || []
+      let options = this.options || []
+      let row = allData.find((item) => item[this.valueKey] == value)
+      let hasRow = options.find((item) => item[this.valueKey] == value)
+      if (row && !hasRow) {
+        let opts = [row].concat(options)
+        this.options = opts
+      }
+      console.log(this.options)
+    },
+
+    // 编辑回显
+    editSetOptions() {
+      if (this.value) {
+        this.queryAllData()
+      }
+    },
+
+    // 显示弹窗
+    onSearchIconClick(event) {
+      this.$emit('show-dialog')
+      this.queryAllData()
+      this.showDialog = true
+      this.$nextTick(() => {
+        this.queryTableData()
+      })
+    },
+
+    onClearIconClick() {
+      this.options = this.allData.slice(0, 10)
+      this.$emit('input', '')
+    },
+
+    queryTableData() {
+      this.queryFormData = Object.assign({}, this.tableForm)
+      this.$refs.dialog.queryData('searchbtn')
+    },
+
+    selectOpt(val) {
+      let row = this.allData.find((item) => item[this.valueKey] == val)
+      console.log(val, row, this.valueKey, this.allData)
+      this.$emit('comfirm', [val], row)
+    },
+
+    selectFocus() {
+      this.allData = []
+      this.queryAllData()
+    },
+    selectBlur() {
+      if (this.lazyLoadLocal) {
+        this.paginationObj = { size: 20, current: 1 }
+      }
+      return
+    },
+
+    onComfirm(values, row) {
+      let value = row[this.valueKey]
+      this.updateOptions(value)
+      this.$emit('input', value)
+      this.$emit('comfirm', values, row)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-btn {
+  color: #c0c4cc;
+  position: absolute;
+  right: 7px;
+  top: -1px;
+}
+</style>

package/nstc-g6/components/NstcForm/SelectCashFlow/NstcSelectCashFlow.vue

@@ -0,0 +1,123 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-13 11:06:47
+ * @LastEditTime: 2022-02-14 09:47:37
+ * @LastEditors: Please set LastEditors
+ * @Description: 现金流选择
+ * @FilePath: NstcSelectCashFlow.vue
+-->
+<template>
+  <SelectAndDialog v-model="_value" ref="select" v-bind="bindProps" :table-form="formSearch" :format-data="formatData" @show-dialog="onShowDialog">
+    <div class="form-wrap">
+      <el-form inline :model="formSearch">
+        <el-form-item :label="chMapper.flowNoLabel">
+          <el-input :placeholder="chMapper.plcInput" v-model="formSearch.flowNoLike" maxlength="60" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="chMapper.flowNameLabel">
+          <el-input :placeholder="chMapper.plcInput" v-model="formSearch.flowName" maxlength="60" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchClick">查询</el-button>
+          <el-button 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: "NstcSelectCashFlow",
+  components: { SelectAndDialog },
+  props: {
+    value: String,
+    queryConf: {
+      type: Object,
+      default: () => {}
+    },
+    chMapper: {
+      type: Object,
+      default: () => ({
+        title: "选择现金流",
+        plcInput: "请输入",
+        plcSelect: "请选择",
+        noselectmsg: "请选择现金流",
+        flowNoLabel: "现金流编号",
+        flowNameLabel: "现金流名称"
+      })
+    }
+  },
+  data() {
+    return {
+      formSearch: {
+        flowNoLike: "",
+        flowName: ""
+      },
+      bindProps: {}
+    };
+  },
+  computed: {
+    _value: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.value;
+      }
+    }
+  },
+  created() {
+    let url = "/api/nstc-mdm/1.0/cashflow"
+    let props = {
+      columns: [
+        { prop: "flowNo", label: this.chMapper.flowNoLabel },
+        { prop: "flowName", label: this.chMapper.flowNameLabel }
+      ],
+      url: this.queryConf.url || url,
+      params: this.queryConf.defaultParam || { resultType: 0, lastNode: 1 },
+      rowKey: "flowNo",
+      valueKey: "flowNo",
+      labelKey: "flowName",
+      chMapper: this.chMapper
+    };
+    this.bindProps = props;
+  },
+  mounted() {},
+  methods: {
+    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;
+      }
+      data = data.map((item) => {
+        return {
+          flowNo: item.flowNo,
+          flowName: item.flowName
+        };
+      });
+      return { data, total };
+    },
+
+    onShowDialog() {
+      this.queryReset();
+    },
+
+    searchClick() {
+      this.$refs.select.queryTableData();
+    },
+
+    queryReset() {
+      this.formSearch = {
+        flowNoLike: "",
+        flowName: ""
+      };
+    }
+  }
+};
+</script>