n20-common-lib 2.4.5 → 2.4.7

package/nstc-g6/components/Form/InputAndDialog/src/main.vue

@@ -8,11 +8,7 @@
 -->
 <template>
   <div class="dialog-select">
-    <div
-      style="position: relative"
-      @mouseenter="hovering = true"
-      @mouseleave="hovering = false"
-    >
+    <div style="position: relative" @mouseenter="hovering = true" @mouseleave="hovering = false">
       <el-input
         v-model="InputValue"
         v-bind="$attrs"
@@ -20,14 +16,9 @@
         v-on="$listeners"
         @change="changeValue"
         :placeholder="chMapper.plcSelect"
-        >
-      </el-input>
-      <i
-        v-if="!showClose"
-        class="search-btn el-input__icon el-icon-search"
-        @click="onSearchIconClick"
       >
-      </i>
+      </el-input>
+      <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"
@@ -35,12 +26,7 @@
       ></i>
     </div>
 
-    <DialogTable
-      v-model="showDialog"
-      ref="dialog"
-      v-bind="dialogProps"
-      @comfirm="onComfirm"
-    >
+    <DialogTable v-model="showDialog" ref="dialog" v-bind="dialogProps" @comfirm="onComfirm">
       <template slot="form">
         <slot></slot>
       </template>
@@ -49,22 +35,22 @@
 </template>
 
 <script>
-import request from "@/utils/request";
-import DialogTable from "^/DialogTable/src/main.vue";
+import request from '@/utils/request'
+import DialogTable from '^/DialogTable/src/main.vue'
 export default {
-  name: "NstcInputAndDialog",
+  name: 'NstcInputAndDialog',
   components: { DialogTable },
   props: {
     width: {
       type: String,
-      default: "1000px",
+      default: '1000px'
     },
     value: String,
     columns: Array,
     url: String,
     httpMethod: {
       type: String,
-      default: "GET",
+      default: 'GET'
     },
     clearable: {
       type: Boolean,
@@ -72,82 +58,79 @@ export default {
     },
     query: {
       type: String,
-      default: "label",
+      default: 'label'
     },
     params: {
       type: Object,
       default: () => ({
-        isEnable: 1,
-      }),
+        isEnable: 1
+      })
     },
     rowKey: {
       type: String,
-      default: "id",
+      default: 'id'
     },
     formatData: {
       type: Function,
-      default: (d) => d,
+      default: (d) => d
     },
     formatParams: {
       type: Function,
-      default: (d) => d,
+      default: (d) => d
     },
     tableForm: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     valueKey: {
       type: String,
-      default: "value",
+      default: 'value'
     },
     labelKey: {
       type: String,
-      default: "label",
+      default: 'label'
     },
     appendToBody: {
       type: Boolean,
-      default: true,
+      default: true
     },
     disabled: {
       type: Boolean,
-      default: false,
+      default: false
     },
     chMapper: {
       type: Object,
       default: () => ({
-        title: "选择xx",
-        noselectmsg: "请选择xx",
-        plcInput: "请输入",
-        plcSelect: "请选择",
-      }),
+        title: '选择xx',
+        noselectmsg: '请选择xx',
+        plcInput: '请输入',
+        plcSelect: '请选择'
+      })
     },
     // 是否添加懒加载
     lazyLoad: {
       type: Boolean,
-      default: false,
+      default: false
     },
     // 是否显示删除
     canClose: {
       type: Boolean,
-      default : true
+      default: true
     }
   },
   directives: {
-    "nstc-lazy-load": {
+    '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);
+        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();
+            binding.value()
           }
-        });
-      },
-    },
+        })
+      }
+    }
   },
   data() {
     return {
@@ -156,49 +139,47 @@ export default {
       allData: [],
       hovering: false,
       loading: false,
-      remoteQuery: "",
+      remoteQuery: '',
       dialogProps: {},
       paginationObj: {
         current: 1,
-        size: 20,
+        size: 20
       },
-      lazyLoadLocal: false,
-
-    };
+      lazyLoadLocal: false
+    }
   },
   created() {
-    this.$bus.$on("nstc_custom_form_config_update", (formData) => {
-      console.log("监听到的全局事件", formData);
-    });
+    this.$bus.$on('nstc_custom_form_config_update', (formData) => {
+      console.log('监听到的全局事件', formData)
+    })
   },
   beforeDestroy() {
-    this.$bus.$off("nstc_custom_form_config_update");
+    this.$bus.$off('nstc_custom_form_config_update')
   },
   computed: {
     showClose() {
-      let hasValue =
-        this.value !== undefined && this.value !== null && this.value !== "";
-      return this.hovering && hasValue && this.canClose;
+      let hasValue = this.value !== undefined && this.value !== null && this.value !== ''
+      return this.hovering && hasValue && this.canClose
     },
     attrs: {
       set(val) {
-        this.$emit("input", val);
+        this.$emit('input', val)
       },
       get() {
-        console.log(this.value);
-        return this.value;
-      },
+        console.log(this.value)
+        return this.value
+      }
     },
     InputValue: {
       set(val) {
         console.log(21212121)
-        this.$emit("input", val);
+        this.$emit('input', val)
       },
       get() {
-        console.log(this.value);
-        return this.value;
-      },
-    },
+        console.log(this.value)
+        return this.value
+      }
+    }
   },
   created() {
     let props = {
@@ -212,13 +193,13 @@ export default {
       formatData: this.formatData,
       appendToBody: this.appendToBody,
       width: this.width
-    };
+    }
     console.log('inputDialog===', props)
-    this.dialogProps = props;
+    this.dialogProps = props
   },
   mounted() {
-    this.editSetOptions();
-    this.lazyLoadLocal = this.lazyLoad;
+    this.editSetOptions()
+    this.lazyLoadLocal = this.lazyLoad
   },
   methods: {
     changeValue(val) {
@@ -229,66 +210,62 @@ export default {
      */
     lazyLoadAction() {
       if (this.lazyLoadLocal) {
-        this.paginationObj.current++;
-        this.queryAllData();
+        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);
+        ? 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;
+        param = this.beforeFormatParams({ size: res.total, current: 1 }, 'init')
+        let resAll = await this.queryApi(param)
+        res = resAll
       }
 
-      let { data } = this.formatData(res || []);
+      let { data } = this.formatData(res || [])
       console.log('data==============', data)
-      this.allData = this.lazyLoadLocal ? this.allData.concat(data) : data;
+      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);
-      
+      console.log(this.allData)
+      this.lazyLoadLocal ? this.setOptions(this.allData) : this.setOptions(data)
     },
 
     beforeFormatParams(pageParam, mode) {
-      console.log('beforeFormatParams pageParam,mode',  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 };
+      console.log('beforeFormatParams pageParam,mode', 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 };
+        params = { ...defaultParam, ...page }
       }
-      return this.formatParams(params);
+      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 } };
+      let page = { 'page.size': size, 'page.current': current }
+      let method = this.httpMethod.toUpperCase()
+      if (method == 'POST') {
+        page = { page: { size, current } }
       }
-      console.log('formatPageParam===',page )
-      return page;
+      console.log('formatPageParam===', page)
+      return page
     },
 
     queryApi(param) {
-      const { url, httpMethod } = this;
-      let body = httpMethod.toUpperCase() === "POST" ? "data" : "params";
-      let reqConf = { url, method: httpMethod };
-      reqConf[body] = param;
-      return request(reqConf);
+      const { url, httpMethod } = this
+      let body = httpMethod.toUpperCase() === 'POST' ? 'data' : 'params'
+      let reqConf = { url, method: httpMethod }
+      reqConf[body] = param
+      return request(reqConf)
     },
 
     setOptions(data) {
@@ -306,83 +283,83 @@ export default {
       // } else {
       //   opts = data.slice(0, 10);
       // }
-      this.options = data;
+      this.options = data
     },
 
     filterOptions(query) {
-      this.remoteQuery = query;
+      this.remoteQuery = query
       if (this.lazyLoad) {
-        this.allData = [];
-        this.queryAllData();
+        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);
+          return item[this.labelKey].indexOf(query) > -1
+        })
+        this.options = opts.slice(0, 10)
       } else {
-        this.options = this.allData.slice(0, 10);
+        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);
+      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;
+        let opts = [row].concat(options)
+        this.options = opts
       }
-      console.log(this.options);
+      console.log(this.options)
     },
 
     // 编辑回显
     editSetOptions() {
       if (this.value) {
-        this.queryAllData();
+        this.queryAllData()
       }
     },
 
     // 显示弹窗
     onSearchIconClick(event) {
-      this.$emit("show-dialog");
+      this.$emit('show-dialog')
       // 判断是否有付款单位
       let resUltParams = this.formatParams()
       console.log('resUltParams====', resUltParams)
-      if(!resUltParams.unitCode) return 
-      this.queryAllData();
-      this.showDialog = true;
+      if (!resUltParams.unitCode) return
+      this.queryAllData()
+      this.showDialog = true
       this.$nextTick(() => {
-        this.queryTableData();
-      });
+        this.queryTableData()
+      })
     },
 
     onClearIconClick() {
-      this.options = this.allData.slice(0, 10);
-      this.$emit("input", "");
+      this.options = this.allData.slice(0, 10)
+      this.$emit('input', '')
     },
 
     queryTableData() {
-      this.queryFormData = Object.assign({}, this.tableForm);
-      this.$refs.dialog.queryData("searchbtn");
+      this.queryFormData = Object.assign({}, this.tableForm)
+      this.$refs.dialog.queryData('searchbtn')
     },
     selectBlur() {
-      if(this.lazyLoadLocal) {
-        this.paginationObj = { size: 20, current: 1 };
+      if (this.lazyLoadLocal) {
+        this.paginationObj = { size: 20, current: 1 }
       }
-      return;
+      return
     },
 
     onComfirm(values, row) {
       console.log('this.valueKey=====', this.valueKey)
-      let value = row[this.valueKey];
-      this.updateOptions(value);
-      this.$emit("input", value);
-      this.$emit("comfirm", values, row);
-    },
-  },
-};
+      let value = row[this.valueKey]
+      this.updateOptions(value)
+      this.$emit('input', value)
+      this.$emit('comfirm', values, row)
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -392,4 +369,4 @@ export default {
   right: 7px;
   top: -1px;
 }
-</style>
+</style>

package/nstc-g6/components/Form/InputCustom/demo/index.vue

@@ -9,19 +9,14 @@
     <!--      <template v-slot:prepend>3</template>-->
     <!--      <template v-slot:append>4</template>-->
     <!--    </InputCustom>-->
-    <InputCustom
-      v-model="value"
-      width="500"
-      is-money
-      style="margin: 10px"
-    />
+    <InputCustom v-model="value" width="500" is-money style="margin: 10px" />
     <el-divider />
     <InputCustom
       v-model="inputValue"
       width="500"
       is-money
       style="margin: 10px"
-      :number-rule="{ min:0, precision: 2, isMoney: true }"
+      :number-rule="{ min: 0, precision: 2, isMoney: true }"
     />
     <el-divider />
     <InputCustom
@@ -29,11 +24,10 @@
       width="500"
       is-money
       style="margin: 10px"
-      :number-rule="{ min:0, precision: 2, isMoney: true }"
+      :number-rule="{ min: 0, precision: 2, isMoney: true }"
     />
     <el-button @click="add">增加</el-button>
   </div>
-
 </template>
 
 <script>
@@ -60,6 +54,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>