n20-common-lib 1.2.46 → 1.3.2

package/src/components/NstcG6Components/Form/DatepickerCustom/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-date-picker
+    class="date-picker-hover"
+    v-model="_value"
+    v-bind="$attrs"
+    :value-format="valueFormat"
+    :unlink-panels="unlinkPanels"
+    :picker-options="_pickerOptions"
+    :style="{ width: parseFloat(width) + 'px' }"
+    clearable
+    placeholder="请选择"
+    start-placeholder="请选择"
+    end-placeholder="请选择"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import dateAndValidator from "@/utils/dateAndValidator";
+
+export default {
+  name: "DatePickerCustom",
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      default: null,
+      type: [Date, Array, String],
+    },
+    dateType:{
+      type: [String, Number],
+      default: "",
+    },
+    width: {
+      type: [String, Number],
+      default: "",
+    },
+
+    limit: {
+      type: Array,
+      default: () => [],
+    },
+
+    pickerOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    unlinkPanels: {
+      type: Boolean,
+      default: true,
+    },
+
+    valueFormat: {
+      type: String,
+      default: "yyyy-MM-dd",
+    },
+  },
+
+  data() {
+    return {
+      key: `DatePickerCustomID-${Math.random().toString(36).slice(2)}`,
+    };
+  },
+  created() {
+    this.$bus.$on("nstc_custom_form_config_update", (formData) => {
+      console.log("监听到的全局事件", formData);
+    });
+    console.log(this.dateType,'----------dateType')
+  },
+  beforeDestroy() {
+    this.$bus.$off("nstc_custom_form_config_update");
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+        this.$emit("change", val);
+      },
+    },
+
+    _pickerOptions() {
+      // 今天以及今天之前
+      if(this.dateType == 'includeTodayBefore') {
+        return {
+            disabledDate(time) {
+            return time.getTime() > Date.now() - 8.64e6
+          }
+        }
+      } else if(this.dateType == 'todayBefore') {
+        // 今天之前
+        return {
+          disabledDate(time) {
+            return time.getTime() > Date.now()
+          }
+        }
+      } else if(this.dateType == 'includeTodayAfter') {
+        // 今天以及今天之后
+        return {
+          disabledDate(time) {
+            return time.getTime() < Date.now() - 8.64e7
+          }
+        }
+      } else if (this.dateType == 'todayAfter') {
+        // 今天之后
+        return {
+          disabledDate(time) {
+            return time.getTime() < Date.now()
+          }
+        }
+      } else{
+        return {
+          ...dateAndValidator.limit.pickerOptions(...this.limit),
+          ...this.pickerOptions,
+        };
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.date-picker-hover.el-input__inner:hover {
+  border: 1px solid #007aff;
+}
+</style>

package/src/components/NstcG6Components/Form/InputAndDialog/index.js

@@ -0,0 +1,15 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-13 10:45:13
+ * @LastEditTime: 2022-01-13 10:46:45
+ * @LastEditors: your name
+ * @Description: 下拉+弹窗
+ * @FilePath: \nstc_g6_common\packages\Form\SelectAndDialog\index.js
+ */
+import NstcInputAndDialog from "./src/main.vue";
+
+NstcInputAndDialog.install = function(Vue) {
+  Vue.component(NstcInputAndDialog.name, NstcInputAndDialog);
+};
+
+export default NstcInputAndDialog;

package/src/components/NstcG6Components/Form/InputAndDialog/src/main.vue

@@ -0,0 +1,395 @@
+<!--
+ * @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-input
+        v-model="InputValue"
+        v-bind="$attrs"
+        maxlength="64"
+        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>
+      <i
+        v-if="showClose"
+        class="search-btn el-select__caret el-input__icon el-icon-circle-close"
+        @click="onClearIconClick"
+      ></i>
+    </div>
+
+    <DialogTable
+      v-model="showDialog"
+      ref="dialog"
+      v-bind="dialogProps"
+      @comfirm="onComfirm"
+    >
+      <template slot="form">
+        <slot></slot>
+      </template>
+    </DialogTable>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import DialogTable from "^/DialogTable/src/main.vue";
+export default {
+  name: "NstcInputAndDialog",
+  components: { DialogTable },
+  props: {
+    width: {
+      type: String,
+      default: "1000px",
+    },
+    value: String,
+    columns: Array,
+    url: String,
+    httpMethod: {
+      type: String,
+      default: "GET",
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    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,
+    },
+    // 是否显示删除
+    canClose: {
+      type: Boolean,
+      default : true
+    }
+  },
+  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();
+          }
+        });
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      options: [],
+      allData: [],
+      hovering: false,
+      loading: false,
+      remoteQuery: "",
+      dialogProps: {},
+      paginationObj: {
+        current: 1,
+        size: 20,
+      },
+      lazyLoadLocal: false,
+
+    };
+  },
+  created() {
+    this.$bus.$on("nstc_custom_form_config_update", (formData) => {
+      console.log("监听到的全局事件", formData);
+    });
+  },
+  beforeDestroy() {
+    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;
+    },
+    attrs: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        console.log(this.value);
+        return this.value;
+      },
+    },
+    InputValue: {
+      set(val) {
+        console.log(21212121)
+        this.$emit("input", val);
+      },
+      get() {
+        console.log(this.value);
+        return this.value;
+      },
+    },
+  },
+  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,
+      width: this.width
+    };
+    console.log('inputDialog===', props)
+    this.dialogProps = props;
+  },
+  mounted() {
+    this.editSetOptions();
+    this.lazyLoadLocal = this.lazyLoad;
+  },
+  methods: {
+    changeValue(val) {
+      console.log(val)
+    },
+    /**
+     * 懒加载
+     */
+    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;
+      }
+
+      let { data } = this.formatData(res || []);
+      console.log('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);
+      
+    },
+
+    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 };
+      } 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 } };
+      }
+      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);
+    },
+
+    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");
+      // 判断是否有付款单位
+      let resUltParams = this.formatParams()
+      console.log('resUltParams====', resUltParams)
+      if(!resUltParams.unitCode) return 
+      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");
+    },
+    selectBlur() {
+      if(this.lazyLoadLocal) {
+        this.paginationObj = { size: 20, current: 1 };
+      }
+      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);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.search-btn {
+  color: #c0c4cc;
+  position: absolute;
+  right: 7px;
+  top: -1px;
+}
+</style>

package/src/components/NstcG6Components/Form/InputCustom/demo/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <!--    <InputCustom-->
+    <!--      v-model="value"-->
+    <!--      width="500"-->
+    <!--    >-->
+    <!--      <template v-slot:prefix>1</template>-->
+    <!--      <template v-slot:suffix>2</template>-->
+    <!--      <template v-slot:prepend>3</template>-->
+    <!--      <template v-slot:append>4</template>-->
+    <!--    </InputCustom>-->
+    <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 }"
+    />
+    <el-divider />
+    <InputCustom
+      v-model="inputValue"
+      width="500"
+      is-money
+      style="margin: 10px"
+      :number-rule="{ min:0, precision: 2, isMoney: true }"
+    />
+    <el-button @click="add">增加</el-button>
+  </div>
+
+</template>
+
+<script>
+import InputCustom from '../'
+
+export default {
+  name: 'Demo',
+
+  components: {
+    InputCustom
+  },
+
+  data() {
+    return {
+      value: '',
+      inputValue: ''
+    }
+  },
+  methods: {
+    add() {
+      this.inputValue = 12321321312.234234
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>