cnhis-design-vue 2.1.78 → 2.1.80

package/packages/table-filter/src/classification/search-class-name.vue

@@ -1,266 +1,266 @@
-<template>
-  <div>
-    <div class="item-name" v-if="showItemName">
-      <span class="label">筛选分类名称：</span>
-      <a-input
-        v-model="className"
-        :placeholder="$t('1.1.6.6')"
-        style="width: 250px"
-        :maxLength="10"
-      />
-    </div>
-    <div class="parent-names" v-if="showItemName">
-      <span class="label">{{ $t("1.9.362") }}：</span>
-      <div
-        class="edit-tag"
-        v-for="(item, index) in parentNames"
-        :key="index"
-        @dblclick="e => editParentName(e, item)"
-        @click="handleParentNameSelect(item, index)"
-        :class="{ 'edit-tag-select': item.selected && item.disabled }"
-      >
-        <a-input
-          style="width: 100px"
-          :value="item"
-          :disabled="item.disabled"
-          @blur="() => (item.disabled = true)"
-          v-model="item.value"
-          :maxLength="10"
-        />
-        <a-icon slot="suffix" type="close" @click="handleParentNamesRemove(index, item)" />
-      </div>
-      <template v-if="!parentNamesHasAdd">
-        <a-button v-show="!showAdd" icon="plus" type="dashed" @click="handleParentNamesAdd">
-          {{ $t("1.9.363") }}
-        </a-button>
-        <a-input
-          class="edit-tag"
-          v-model.trim="addVal"
-          v-show="showAdd"
-          style="width: 100px"
-          @blur="hanldeBlur"
-          :maxLength="10"
-        />
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "search-class-name",
-  data() {
-    return {
-      showAdd: false,
-      className: "",
-      addVal: "",
-      parentNames: []
-    };
-  },
-  props: {
-    showItemName: {
-      type: Boolean,
-      default: true
-    },
-    tableId: {
-      type: String,
-      default: ""
-    },
-    actionList_prop: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  computed: {
-    parentNamesHasAdd() {
-      return this.parentNames.some(v => v.isAdd);
-    }
-  },
-  watch: {},
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-    this.init();
-  },
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    init() {
-      this.showItemName && this.getParentNames();
-      this.className = this.actionList_prop.name;
-    },
-
-    // getTableCondiTionList() {
-    //   const tableId = this.tableId;
-    //   if (!tableId) {
-    //     return;
-    //   }
-    //   let params = { tableId };
-    //   let url = `/tableList/getTableCondiTionList`;
-    //   return this.axios
-    //     .get(url, { params })
-    //     .then(({ data }) => {
-    //       if (data && data.result == "SUCCESS") {
-    //         const { conditionList = [], displayCategoryList = [], settingId = "" } = data.map || {};
-    //         this.conditionList = conditionList;
-    //         this.displayCategoryList = displayCategoryList;
-    //         this.settingId = settingId;
-    //       }
-    //     })
-    //     .catch(err => {
-    //       console.log(err);
-    //     });
-    // },
-
-    getParentNames() {
-      let parentNames = [];
-      this.$attrs.displayCategoryList.forEach(item => {
-        if (item !== "未分类") {
-          parentNames.push({
-            disabled: true,
-            selected: item === this.actionList_prop.displayCategory,
-            value: item
-          });
-        }
-      });
-      this.parentNames = parentNames;
-    },
-
-    handleParentNamesAdd(e) {
-      const nextInput = e?.target?.nextElementSibling;
-      setTimeout(() => {
-        nextInput && nextInput.focus();
-      });
-      this.showAdd = true;
-    },
-    hanldeBlur() {
-      this.showAdd = false;
-      if (!this.addVal) return;
-      this.parentNames.forEach(v => (v.selected = false));
-      this.parentNames.push({
-        disabled: true,
-        value: this.addVal,
-        selected: true,
-        isAdd: true
-      });
-      this.addVal = "";
-    },
-    editParentName(e, item) {
-      item.disabled = false;
-      setTimeout(() => {
-        e.target.focus();
-      }, 0);
-    },
-    handleParentNameSelect(item, index) {
-      if (!item.disabled) return;
-      this.parentNames.forEach((pItem, pIndex) => {
-        if (pIndex !== index) {
-          pItem.selected = false;
-        }
-      });
-      item.selected = !item.selected;
-    },
-    handleParentNamesRemove(index, item) {
-      // this.parentNames.splice(index, 1);
-      this.handleParent(index, item);
-    },
-    handleParent(index, item) {
-      let { conditionList } = this;
-      if (!conditionList || !conditionList.length) {
-        this.parentNames.splice(index, 1);
-        return;
-      }
-      let hasItem = conditionList.filter(v => v.displayCategory === item.value);
-      if (!hasItem || !hasItem.length) {
-        this.parentNames.splice(index, 1);
-        return;
-      }
-      this.$message.error("该分类下有已有数据，请删除该分类下的筛选集后重试！");
-    },
-
-    handleGetParams() {
-      if (!this.className && this.showItemName) {
-        this.$message.warn(`${this.$t("1.1.7.3")}!`, 2);
-        return;
-      }
-      let displayCategory = this.parentNames.find(item => item.selected)?.value;
-      return {
-        displayCategory,
-        name: this.className
-      };
-    }
-  },
-  components: {}
-};
-</script>
-
-<style lang="less" scoped>
-.item-name {
-  display: flex;
-  height: 32px;
-  line-height: 32px;
-  margin-bottom: 10px;
-  .label {
-    width: 120px;
-    text-align: right;
-  }
-}
-.parent-names {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  line-height: 32px;
-  .label {
-    display: inline-block;
-    height: 32px;
-    line-height: 32px;
-    margin-bottom: 10px;
-    width: 120px;
-    text-align: right;
-  }
-  /deep/ .ant-btn-dashed {
-    border-color: #a6a6a6;
-    color: #a6a6a6;
-  }
-
-  .edit-tag {
-    position: relative;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    /deep/ .anticon-close {
-      position: absolute;
-      right: 5px;
-      line-height: 36px;
-      color: #2d7aff;
-    }
-    /deep/ .ant-input-disabled {
-      color: #2d7aff;
-      background-color: rgba(45, 122, 255, 0.1);
-      opacity: 1;
-      border-color: #2d7aff;
-      cursor: pointer;
-    }
-    /deep/.ant-input-group-addon,
-    /deep/.ant-input:not(:hover),
-    /deep/.ant-input-number:not(:hover) {
-      border-color: #2d7aff !important;
-    }
-    &.edit-tag-select {
-      /deep/ .ant-input-disabled {
-        color: #fff;
-        background-color: #2d7aff;
-      }
-      /deep/ .anticon-close {
-        color: #fff;
-      }
-    }
-  }
-  /deep/ .ant-btn {
-    margin-bottom: 10px;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="item-name" v-if="showItemName">
+      <span class="label">筛选分类名称：</span>
+      <a-input
+        v-model="className"
+        :placeholder="$t('1.1.6.6')"
+        style="width: 250px"
+        :maxLength="10"
+      />
+    </div>
+    <div class="parent-names" v-if="showItemName">
+      <span class="label">{{ $t("1.9.362") }}：</span>
+      <div
+        class="edit-tag"
+        v-for="(item, index) in parentNames"
+        :key="index"
+        @dblclick="e => editParentName(e, item)"
+        @click="handleParentNameSelect(item, index)"
+        :class="{ 'edit-tag-select': item.selected && item.disabled }"
+      >
+        <a-input
+          style="width: 100px"
+          :value="item"
+          :disabled="item.disabled"
+          @blur="() => (item.disabled = true)"
+          v-model="item.value"
+          :maxLength="10"
+        />
+        <a-icon slot="suffix" type="close" @click="handleParentNamesRemove(index, item)" />
+      </div>
+      <template v-if="!parentNamesHasAdd">
+        <a-button v-show="!showAdd" icon="plus" type="dashed" @click="handleParentNamesAdd">
+          {{ $t("1.9.363") }}
+        </a-button>
+        <a-input
+          class="edit-tag"
+          v-model.trim="addVal"
+          v-show="showAdd"
+          style="width: 100px"
+          @blur="hanldeBlur"
+          :maxLength="10"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "search-class-name",
+  data() {
+    return {
+      showAdd: false,
+      className: "",
+      addVal: "",
+      parentNames: []
+    };
+  },
+  props: {
+    showItemName: {
+      type: Boolean,
+      default: true
+    },
+    tableId: {
+      type: String,
+      default: ""
+    },
+    actionList_prop: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    parentNamesHasAdd() {
+      return this.parentNames.some(v => v.isAdd);
+    }
+  },
+  watch: {},
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+    this.init();
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  activated() {},
+  methods: {
+    init() {
+      this.showItemName && this.getParentNames();
+      this.className = this.actionList_prop.name;
+    },
+
+    // getTableCondiTionList() {
+    //   const tableId = this.tableId;
+    //   if (!tableId) {
+    //     return;
+    //   }
+    //   let params = { tableId };
+    //   let url = `/tableList/getTableCondiTionList`;
+    //   return this.axios
+    //     .get(url, { params })
+    //     .then(({ data }) => {
+    //       if (data && data.result == "SUCCESS") {
+    //         const { conditionList = [], displayCategoryList = [], settingId = "" } = data.map || {};
+    //         this.conditionList = conditionList;
+    //         this.displayCategoryList = displayCategoryList;
+    //         this.settingId = settingId;
+    //       }
+    //     })
+    //     .catch(err => {
+    //       console.log(err);
+    //     });
+    // },
+
+    getParentNames() {
+      let parentNames = [];
+      this.$attrs.displayCategoryList.forEach(item => {
+        if (item !== "未分类") {
+          parentNames.push({
+            disabled: true,
+            selected: item === this.actionList_prop.displayCategory,
+            value: item
+          });
+        }
+      });
+      this.parentNames = parentNames;
+    },
+
+    handleParentNamesAdd(e) {
+      const nextInput = e?.target?.nextElementSibling;
+      setTimeout(() => {
+        nextInput && nextInput.focus();
+      });
+      this.showAdd = true;
+    },
+    hanldeBlur() {
+      this.showAdd = false;
+      if (!this.addVal) return;
+      this.parentNames.forEach(v => (v.selected = false));
+      this.parentNames.push({
+        disabled: true,
+        value: this.addVal,
+        selected: true,
+        isAdd: true
+      });
+      this.addVal = "";
+    },
+    editParentName(e, item) {
+      item.disabled = false;
+      setTimeout(() => {
+        e.target.focus();
+      }, 0);
+    },
+    handleParentNameSelect(item, index) {
+      if (!item.disabled) return;
+      this.parentNames.forEach((pItem, pIndex) => {
+        if (pIndex !== index) {
+          pItem.selected = false;
+        }
+      });
+      item.selected = !item.selected;
+    },
+    handleParentNamesRemove(index, item) {
+      // this.parentNames.splice(index, 1);
+      this.handleParent(index, item);
+    },
+    handleParent(index, item) {
+      let { conditionList } = this;
+      if (!conditionList || !conditionList.length) {
+        this.parentNames.splice(index, 1);
+        return;
+      }
+      let hasItem = conditionList.filter(v => v.displayCategory === item.value);
+      if (!hasItem || !hasItem.length) {
+        this.parentNames.splice(index, 1);
+        return;
+      }
+      this.$message.error("该分类下有已有数据，请删除该分类下的筛选集后重试！");
+    },
+
+    handleGetParams() {
+      if (!this.className && this.showItemName) {
+        this.$message.warn(`${this.$t("1.1.7.3")}!`, 2);
+        return;
+      }
+      let displayCategory = this.parentNames.find(item => item.selected)?.value;
+      return {
+        displayCategory,
+        name: this.className
+      };
+    }
+  },
+  components: {}
+};
+</script>
+
+<style lang="less" scoped>
+.item-name {
+  display: flex;
+  height: 32px;
+  line-height: 32px;
+  margin-bottom: 10px;
+  .label {
+    width: 120px;
+    text-align: right;
+  }
+}
+.parent-names {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  line-height: 32px;
+  .label {
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    margin-bottom: 10px;
+    width: 120px;
+    text-align: right;
+  }
+  /deep/ .ant-btn-dashed {
+    border-color: #a6a6a6;
+    color: #a6a6a6;
+  }
+
+  .edit-tag {
+    position: relative;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    /deep/ .anticon-close {
+      position: absolute;
+      right: 5px;
+      line-height: 36px;
+      color: #2d7aff;
+    }
+    /deep/ .ant-input-disabled {
+      color: #2d7aff;
+      background-color: rgba(45, 122, 255, 0.1);
+      opacity: 1;
+      border-color: #2d7aff;
+      cursor: pointer;
+    }
+    /deep/.ant-input-group-addon,
+    /deep/.ant-input:not(:hover),
+    /deep/.ant-input-number:not(:hover) {
+      border-color: #2d7aff !important;
+    }
+    &.edit-tag-select {
+      /deep/ .ant-input-disabled {
+        color: #fff;
+        background-color: #2d7aff;
+      }
+      /deep/ .anticon-close {
+        color: #fff;
+      }
+    }
+  }
+  /deep/ .ant-btn {
+    margin-bottom: 10px;
+  }
+}
+</style>