gcs-ui-lib 1.0.1

package/packages/AutoFillService/src/components/ConditionGroup.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="auto-group" :key="templateKey">
+    <div class="auto-actions" v-if="!disabled">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          <i class="el-icon-circle-plus-outline auto-icon-ops"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item icon="el-icon-plus" command="a"
+            >条件</el-dropdown-item
+          >
+          <el-dropdown-item icon="el-icon-plus" command="b"
+            >条件组</el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <i
+        v-if="!localNode.root"
+        class="el-icon-circle-close m-l-s auto-icon-ops"
+        @click="deleteleGroup"
+      ></i>
+    </div>
+    <select
+      v-model="localNode.logicalOperation"
+      v-if="showOperator"
+      :disabled="disabled"
+      class="auto-group-select"
+    >
+      <option value="AND">{{ $l("并且") }}</option>
+      <option value="OR">{{ $l("或者") }}</option>
+    </select>
+    <div
+      v-for="(item, idx) in localNode.matchingRules"
+      class="auto-rule"
+      :key="item.key + '-auto-rule'"
+    >
+      <div class="auto-group-item" :class="{'auto-group-item-disabled':disabled}">
+        <label class="auto-group-item-label">匹配字段</label>
+        <el-select
+          v-model="item.matchingFieldCode"
+          :placeholder="$l('请选择')"
+          :disabled="disabled"
+          filterable
+          v-title
+          @change="(val) => handChangeField(val, item)"
+        >
+          <el-option
+            v-for="(item, index) in filedList"
+            :key="index + item.fieldCode"
+            :label="item.fieldName"
+            :value="item.fieldCode"
+          ></el-option>
+          <!-- 其他字段 -->
+        </el-select>
+      </div>
+      <div
+        class="auto-group-item"
+        :class="{
+          'auto-required': localNode.vaild && !item.matchingOperation,
+          'auto-group-item-disabled':disabled
+        }"
+      >
+        <label class="auto-group-item-label">匹配关系</label>
+        <el-select
+          v-model="item.matchingOperation"
+          :placeholder="$l('请选择')"
+          clearable
+          :disabled="disabled"
+          @change="(val) => handChangeOperation(val, item)"
+        >
+          <el-option
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+            v-for="(item, index) in matchList"
+          ></el-option>
+          <!-- 其他操作符 -->
+        </el-select>
+      </div>
+      <div
+        class="auto-group-item"
+        v-if="isNew"
+        :class="{
+          'auto-required': localNode.vaild && !item.matchingValueType,
+          'auto-group-item-disabled':disabled
+        }"
+      >
+        <label class="auto-group-item-label">匹配值</label>
+        <el-select
+          v-model="item.matchingValueType"
+          :placeholder="$l('请选择')"
+          :disabled="disabled"
+        >
+          <el-option
+            :key="index"
+            :label="row.label"
+            :value="row.value"
+            :disabled="disabledOps(row.value, item)"
+            v-for="(row, index) in valueList"
+          ></el-option>
+        </el-select>
+      </div>
+      <div
+        class="auto-group-item item-content"
+        :class="{
+          'auto-required': autoValus(item),
+          'auto-group-item-disabled':disabled
+        }"
+      >
+        <label class="auto-group-item-label">匹配内容</label>
+        <el-cascader
+          v-if="item.matchingValueType === 'DYNAMIC'"
+          :placeholder="$l('请选择')"
+          :disabled="disabled"
+          v-title
+          :separator="'-'"
+          style="width: 100%"
+          clearable
+          v-model="item.TmValues"
+          :options="options"
+        ></el-cascader>
+        <inputTag
+          v-model="item.mValues"
+          placeholder="请输入内容，按回车添加"
+          :disabled="disabled || emptyList.includes(item.matchingOperation)"
+          :tagEffect="'plain'"
+          :key="item.key"
+          :tagType="'info'"
+          v-else
+        />
+      </div>
+
+      <template v-if="!disabled">
+        <i
+          class="el-icon-edit auto-icon-ops"
+          @click="edit(item, idx)"
+          :class="{
+            noEvent: emptyList.includes(item.matchingOperation),
+          }"
+        ></i>
+        <i
+          class="el-icon-circle-plus-outline auto-icon-ops"
+          @click="addRule(idx)"
+        ></i>
+        <i
+          class="el-icon-document-copy auto-icon-ops"
+          @click="copyRule(item, idx)"
+        ></i>
+        <i
+          class="el-icon-circle-close auto-icon-ops"
+          @click="deleteChild(idx)"
+        ></i>
+      </template>
+    </div>
+    <div
+      v-for="(child, idx) in localNode.children"
+      :key="`${child.key || idx}-auto-group`"
+      class="auto-child"
+    >
+      <condition-group
+        :localNode="child"
+        :emptyList="emptyList"
+        :isNew="isNew"
+        :options="options"
+        :ref="`conditionGroup${idx}`"
+        @delete="deleteGrout(idx)"
+        :disabled="disabled"
+        :filedList="filedList"
+      />
+    </div>
+    <CLDialog
+      v-drag
+      :visible.sync="visible"
+      :title="$l('匹配值')"
+      :destroy-on-open="true"
+    >
+      <span>{{ $l("若需要同时维护多个匹配值，可换行维护。") }}</span>
+      <el-input
+        class="m-t-s"
+        type="textarea"
+        rows="10"
+        v-model="textarea"
+        placeholder="请输入1000字以内"
+        maxlength="1000"
+        show-word-limit
+      ></el-input>
+      <span slot="footer" class="dialog-footer m-t-m">
+        <el-button type="primary" @click="save">{{ $l("确 定") }}</el-button>
+        <el-button plain @click="visible = false">{{ $l("取 消") }}</el-button>
+      </span>
+    </CLDialog>
+  </div>
+</template>
+
+<script>
+import { Dialog } from "n20-common-lib";
+import { NODE_GROUP } from "./config";
+import { uuid } from "@/utils";
+const groupItem = [
+  {
+    ...NODE_GROUP,
+    key: uuid(),
+  },
+  {
+    ...NODE_GROUP,
+    key: uuid(),
+  },
+];
+const ruleItem = {
+  ...NODE_GROUP,
+  key: uuid(),
+};
+export default {
+  name: "ConditionGroup",
+  props: {
+    isNew: {
+      type: Boolean,
+      default: true,
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    emptyList: {
+      type: Array,
+      default: () => [],
+    },
+    localNode: Object,
+    filedList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    CLDialog: Dialog,
+    inputTag: () => import("../../../inputTag/src/main.vue"),
+  },
+  data(vm) {
+    return {
+      valueList: [
+        { label: "固定值", value: "FIXED" },
+        { label: "动态值", value: "DYNAMIC" },
+      ],
+      textarea: "",
+      visible: false,
+      currentIndex: 0,
+      matchList: [
+        { label: "包含", value: "CONTAINS" },
+        { label: "不包含", value: "NOT_CONTAINS" },
+        { label: "等于", value: "EQUALS" },
+        { label: "不等于", value: "NOT_EQUALS" },
+        { label: "为空", value: "IS_EMPTY" },
+        { label: "不为空", value: "IS_NOT_EMPTY" },
+        { label: "开头包含", value: "STARTS_WITH" },
+        { label: "结尾包含", value: "ENDS_WITH" },
+      ],
+    };
+  },
+  computed: {
+    templateKey() {
+      return this.localNode?.matchingRules?.length;
+    },
+    autoValus() {
+      return (item) => {
+        if (!this.localNode.vaild) return false;
+        if (this.emptyList.includes(item.matchingOperation)) return false;
+        if (item?.mValues?.length) return false;
+        if (item?.TmValues?.length) return false;
+        return true;
+      };
+    },
+    disabledOps() {
+      return (val, item) => {
+        return (
+          !["EQUALS", "NOT_EQUALS"].includes(item.matchingOperation) &&
+          val == "DYNAMIC"
+        );
+      };
+    },
+    showDelBtn() {
+      return this.localNode?.matchingRules?.length > 1;
+    },
+    showOperator() {
+      let l = this.localNode?.matchingRules?.length || 0;
+      let c = this.localNode?.children?.length || 0;
+      return l + c > 1;
+    },
+  },
+  async mounted() {},
+  methods: {
+    valueTypeChange(val) {
+      if (val === "DYNAMIC") {
+        this.$set(item, "fValues", []);
+      }
+    },
+    handleCommand(val) {
+      switch (val) {
+        case "a":
+          this.addItem();
+          break;
+        case "b":
+          this.addGroup();
+          break;
+      }
+    },
+    addItem() {
+      let arr = this.localNode.matchingRules;
+      if (Array.isArray(arr)) {
+        this.localNode.matchingRules.push({ ...ruleItem });
+      } else {
+        this.localNode.matchingRules = [{ ...ruleItem }];
+      }
+    },
+    handChangeOperation(val, item) {
+      // if (this.emptyList.includes(val)) {
+        this.$set(item, "mValues", []);
+        this.$set(item, "TmValues", []);
+      // }
+      this.$set(item, "matchingValueType", "FIXED");
+      this.$set(item, "key", uuid());
+    },
+    handChangeField(val, item) {
+      let temp = this.filedList.find((item) => item.fieldCode == val);
+      if (!temp) return;
+      this.$set(item, "matchingFieldName", temp.fieldName);
+    },
+    validFn() {
+      //试图反馈逻辑
+      this.$set(this.localNode, "vaild", true);
+      this.localNode.children?.forEach((item, index) => {
+        this.$refs[`conditionGroup${index}`][0]?.validFn();
+      });
+      for (let i of this.localNode?.matchingRules || []) {
+        if (!i.matchingOperation) {
+          throw new Error("请输入匹配规则");
+        }
+        //匹配字段和匹配关系有值时，若匹配关系不等于‘为空’，匹配值必填。
+        let flag = !i.mValues.length && !i.TmValues.length;
+        if (!this.emptyList.includes(i.matchingOperation) && flag) {
+          throw new Error("请输入匹配规则");
+        }
+      }
+    },
+    addGroup() {
+      let matchingRules = JSON.parse(JSON.stringify(groupItem));
+      for (let i of matchingRules) {
+        i.key = uuid();
+      }
+      if ("children" in this.localNode) {
+        try {
+          this.localNode.children.push({
+            logicalOperation: "AND",
+            matchingRules: matchingRules,
+          });
+          return;
+        } catch {}
+      }
+      this.$set(this.localNode, "children", [
+        {
+          logicalOperation: "AND",
+          matchingRules: matchingRules,
+        },
+      ]);
+    },
+    save() {
+      if (!this.textarea)
+        return this.$message.warning(this.$l("请输入匹配内容"));
+      let temp = this.textarea.split("\n");
+      temp = temp.filter(item=>!!item)
+      this.$set(
+        this.localNode.matchingRules[this.currentIndex],
+        "mValues",
+        temp
+      );
+      this.visible = false;
+    },
+    edit(row, idx) {
+      if (this.emptyList.includes(row.matchingOperation)) return;
+      if (!row?.mValues?.length) {
+        this.textarea = "";
+      } else {
+        this.textarea = row.mValues.join("\n");
+      }
+      this.currentIndex = idx;
+      this.visible = true;
+    },
+    addRule(idx) {
+      let item = JSON.parse(JSON.stringify(ruleItem));
+      item.key = uuid();
+      this.localNode.matchingRules.splice(idx + 1, 0, { ...item });
+    },
+    copyRule(child, idx) {
+      let item = { ...child };
+      item.key = uuid();
+      this.localNode.matchingRules.splice(idx + 1, 0, { ...item });
+    },
+    deleteleGroup() {
+      this.$emit("delete");
+    },
+    deleteGrout(idx) {
+      this.localNode.children?.splice(idx, 1);
+    },
+    deleteChild(idx) {
+      this.localNode.matchingRules?.splice(idx, 1);
+    },
+  },
+};
+</script>

package/packages/AutoFillService/src/components/CustomInput.vue

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <el-input
+      v-if="type === 'input'"
+      class="input-w"
+      clearable
+      v-title
+      :show-overflow-tooltip="true"
+      :maxlength="64"
+      v-model="val"
+      :placeholder="$l('请输入')"
+    />
+    <CLSelectLazy
+      v-if="type === 'select'"
+      class="input-w"
+      :filter-method="filterFn"
+      @scroll-bottom="getNextList"
+      v-title
+      :show-overflow-tooltip="true"
+      v-model="val"
+      @change="selectChange"
+      :placeholder="$l('请选择')"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item[valueKey]"
+        :label="
+          labelKey == 'branchBankName'
+            ? '(' + item['cnapsNo'] + ')' + item[labelKey]
+            : item[labelKey]
+        "
+        :value="item[valueKey]"
+      >
+      </el-option>
+    </CLSelectLazy>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { delistToSame } from "@/utils/index";
+import { SelectLazy, SecondaryTab, Page, dayjs } from "n20-common-lib";
+export default {
+  name: "CustomInput",
+  props: {
+    type: {
+      type: String,
+    },
+    url: {
+      type: String,
+    },
+    valueKey: {
+      type: String,
+    },
+    labelKey: {
+      type: String,
+    },
+    params: {
+      type: Object,
+    },
+    value: {
+      type: String,
+    },
+    matchName: {
+      type: String,
+    },
+  },
+  components: {
+    CLSelectLazy:SelectLazy
+  },
+  data() {
+    return {
+      options: [],
+      current: 1,
+    };
+  },
+  computed: {
+    val: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        console.log(val, "val--");
+        this.$emit("input", val);
+      },
+    },
+  },
+  watch: {
+    url(val) {
+      if (!val) return;
+      this.type === "select" && this.filterFn();
+    },
+  },
+  mounted() {
+    this.type === "select" && this.filterFn();
+  },
+  methods: {
+    async getNextList() {
+      this.current++;
+      let params = {
+        ...this.params,
+      };
+      if (this.labelKey == "branchBankName") {
+        //支行模糊查询
+        params.searchKey = this.fval;
+      } else {
+        params[this.labelKey] = this.fval;
+      }
+
+      const list = await this.requestFn({
+        ...params,
+        "page.size": this.labelKey === "bankName" ? 100 : 20,
+        "page.current": this.current,
+      });
+      if (list.length == 0) {
+        this.current--;
+        return;
+      }
+      this.options.push(...list);
+      delistToSame(this.options, this.valueKey);
+    },
+    selectChange(val) {
+      let temp = this.options.filter((i) => i[this.valueKey] == val);
+      let map = {
+        value: temp[0][this.valueKey],
+        label: temp[0][this.labelKey],
+      };
+      this.$emit("change", map);
+    },
+    async filterFn(val) {
+      this.fval = val;
+      this.current = 1;
+      let params = {
+        ...this.params,
+      };
+      if (this.labelKey == "branchBankName") {
+        setTimeout(async () => {
+          if (this.value) {
+            const res = await request({
+              url: "/bems/1.0/branchBank",
+              method: "get",
+              loading:false,
+              params: {
+                cnapsNo: this.value,
+                "page.size": 1,
+                "page.current": 1,
+              },
+            });
+            if (!res.list?.length) {
+              return;
+            }
+            this.options = [...this.options, ...res.list];
+          }
+        }, 0);
+        //支行模糊查询
+        params.searchKey = val;
+      } else {
+        params[this.labelKey] = val;
+      }
+      const list = await this.requestFn({
+        ...params,
+        "page.size": this.labelKey === "bankName" ? 100 : 20,
+        "page.current": this.current,
+      });
+      if (!list?.length) return;
+      this.options = list;
+      let temp = this.options.find((item) => item[this.valueKey] == this.value);
+      if (!temp && this.value) {
+        this.options.push({
+          [this.valueKey]: this.value,
+          [this.labelKey]: this.matchName,
+        });
+      }
+    },
+    async requestFn(params) {
+      try {
+        const { list = [] } = await request({
+          url: this.url,
+          method: "get",
+          params,
+        });
+        return list;
+      } catch (error) {
+        return [];
+      }
+    },
+  },
+};
+</script>
+
+<style></style>