n20-common-lib 1.3.46 → 1.3.49

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

@@ -1,488 +1,488 @@
-<template>
-  <div>
-    <el-select
-      v-model="_value"
-      v-bind="$attrs"
-      v-nstc-lazy-load="lazyLoadAction"
-      :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"
-      :isCache="isCache"
-      v-on="$listeners"
-      :clearable="clearable"
-      @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" />
-      </template>
-    </el-select>
-    <!-- <span
-      class="remote"
-      ref="iconRomote"
-      @mouseleave="mouseleave"
-      @mouseenter="mouseenter"
-    >
-      <i
-        :class="[!showUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"
-        v-if="remote && showIcon"
-      ></i>
-      <i class="el-icon-circle-close" v-if="remote && !showIcon" @click="_value = ''"></i>
-    </span> -->
-  </div>
-</template>
-
-<script>
-import request from "@/utils/request";
-
-export default {
-  name: "SelectCustom",
-
-  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,
-    }
-  },
-
-  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();
-          }
-        });
-      },
-    },
-  },
-
-  data() {
-    return {
-      showUp: false,
-      showIcon: true,
-      loading: false,
-      remoteOptions: [],
-      queryStr: null,
-      paginationObj: {
-        "page.current": 1,
-        "page.size": 20,
-      },
-    };
-  },
-  created() {
-    this.$bus.$on("nstc_custom_form_config_update", (formData) => {
-      console.log("监听到的全局事件", formData);
-    });
-  },
-  beforeDestroy() {
-    this.$bus.$off("nstc_custom_form_config_update");
-  },
-
-  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();
-        }
-      }
-    }
-  },
-
-  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";
-        // try {
-        //   if (this.params["unitNo"]) {
-        //     let User_Info = JSON.parse(sessionStorage.getItem("User_Info"));
-        //     this.params["unitNo"] = User_Info ? User_Info.custNo : "";
-        //   }
-        //   for (let i in this.params) {
-        //     try {
-        //       if (i == "page") {
-        //         this.params[i] = eval("(" + this.params[i] + ")");
-        //       }
-        //     } catch (e) {
-        //       console.log(e);
-        //     }
-        //   }
-        // } catch (e) {
-        //   console.log(e);
-        // }
-        this._options = [];
-        let keyParams = this.lazyLoad ? {
-            [this.query]: this.queryStr,
-            ...this.paginationObj,
-            ...this.params,
-          }: {
-            [this.query]: this.queryStr,
-            ...this.params,
-          }
-        let remoteOptions = await request({
-          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>
+<template>
+  <div>
+    <el-select
+      v-model="_value"
+      v-bind="$attrs"
+      v-nstc-lazy-load="lazyLoadAction"
+      :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"
+      :isCache="isCache"
+      v-on="$listeners"
+      :clearable="clearable"
+      @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" />
+      </template>
+    </el-select>
+    <!-- <span
+      class="remote"
+      ref="iconRomote"
+      @mouseleave="mouseleave"
+      @mouseenter="mouseenter"
+    >
+      <i
+        :class="[!showUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"
+        v-if="remote && showIcon"
+      ></i>
+      <i class="el-icon-circle-close" v-if="remote && !showIcon" @click="_value = ''"></i>
+    </span> -->
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+export default {
+  name: "SelectCustom",
+
+  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,
+    }
+  },
+
+  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();
+          }
+        });
+      },
+    },
+  },
+
+  data() {
+    return {
+      showUp: false,
+      showIcon: true,
+      loading: false,
+      remoteOptions: [],
+      queryStr: null,
+      paginationObj: {
+        "page.current": 1,
+        "page.size": 20,
+      },
+    };
+  },
+  created() {
+    this.$bus.$on("nstc_custom_form_config_update", (formData) => {
+      console.log("监听到的全局事件", formData);
+    });
+  },
+  beforeDestroy() {
+    this.$bus.$off("nstc_custom_form_config_update");
+  },
+
+  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();
+        }
+      }
+    }
+  },
+
+  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";
+        // try {
+        //   if (this.params["unitNo"]) {
+        //     let User_Info = JSON.parse(sessionStorage.getItem("User_Info"));
+        //     this.params["unitNo"] = User_Info ? User_Info.custNo : "";
+        //   }
+        //   for (let i in this.params) {
+        //     try {
+        //       if (i == "page") {
+        //         this.params[i] = eval("(" + this.params[i] + ")");
+        //       }
+        //     } catch (e) {
+        //       console.log(e);
+        //     }
+        //   }
+        // } catch (e) {
+        //   console.log(e);
+        // }
+        this._options = [];
+        let keyParams = this.lazyLoad ? {
+            [this.query]: this.queryStr,
+            ...this.paginationObj,
+            ...this.params,
+          }: {
+            [this.query]: this.queryStr,
+            ...this.params,
+          }
+        let remoteOptions = await request({
+          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>