cnhis-design-vue 2.1.58 → 2.1.59

package/packages/table-filter/src/classification/search-professional-model.vue

@@ -1,680 +1,680 @@
-<template>
-  <div class="search-professional-container">
-    <a-row>
-      <!-- 左侧筛选分类设置 -->
-      <a-col :span="14" class="left-content">
-        <div ref="comWrap" class="left-content-com">
-          <SearchCondition
-            v-bind="$attrs"
-            ref="conditionRef"
-            :searchFieldList="newSearchFieldList"
-            :actionList_prop="actionList_prop"
-            :showItemName="false"
-            :isCnHis="false"
-            :saveEmpty="true"
-            :isOnlyCondition="false"
-            :hideAddBtn="true"
-            :isInSearch="true"
-            :source="'search-professional'"
-            @saveAdd="saveAdd"
-          ></SearchCondition>
-        </div>
-        <div class="left-content-btn">
-          <a-button @click="handleAddCondition">
-            添加条件
-          </a-button>
-          <a-button type="primary" @click="handleSearch">
-            查询
-          </a-button>
-          <a-button type="primary" @click="handleSaveToClass">
-            {{ saveBtnName }}
-          </a-button>
-
-          <span v-show="conObjLen > 0" class="selected-item-del" @click="handleClearConObj">
-            <svg-icon
-              class-name="svg-icon-btn"
-              icon-class="xitongtubiaoliebiaocaozuoanniushanchu"
-            />
-            清空筛选
-            <span>({{ conObjLen }})</span>
-          </span>
-        </div>
-      </a-col>
-      <!-- 右侧筛选分类列表 -->
-      <a-col :span="10" class="right-content">
-        <div class="list">
-          <div class="list-title">
-            <span class="list-title-parent">{{ $t("1.9.362") }}</span>
-            <span class="list-title-name">
-              <!-- {{ $t("1.1.3.1.1") }} -->
-              筛选名称
-              <a-popover placement="bottom" trigger="click" v-model="filtrationConfig.visible">
-                <template slot="content">
-                  <div class="search-condition-f">
-                    <div class="search-condition-f-content">
-                      <a-input-search
-                        v-model="filtrationConfig.keyWord"
-                        placeholder="请输入关键字"
-                        style="width: 200px"
-                        @search="onSearch"
-                      />
-                    </div>
-                    <div class="search-condition-f-footer">
-                      <a-button @click="handleFiltrationCancel" style="margin-right: 10px">
-                        {{ $t("1.1.1.1.4") }}
-                      </a-button>
-                      <a-button type="primary" @click="handleConditionFiltration">
-                        <!-- {{ $t("1.1.1.1.1") }} -->
-                        筛选
-                      </a-button>
-                    </div>
-                  </div>
-                </template>
-                <template slot="title">
-                  <span>筛选名称</span>
-                </template>
-                <a-icon
-                  type="filter"
-                  class="icon"
-                  theme="filled"
-                  :style="{ color: filterKeyWork ? '#2D7AFF' : 'rgba(0, 0, 0, 0.6)' }"
-                  @click="openConditionFiltration"
-                />
-              </a-popover>
-            </span>
-            <span class="list-title-name">{{ "创建人" }}</span>
-            <span class="list-title-btn">{{ $t("1.1.8.2.22") }}</span>
-          </div>
-          <!-- <draggable
-            class="list-content"
-            tag="ul"
-            v-model="originConditionList"
-            animation="300"
-          > -->
-          <ul class="list-content">
-            <template v-for="(item, j) in showConditionList">
-              <li :key="item.sid" :class="{ checked: item.checked }" @click="handleChecked(item)">
-                <span class="list-content-parent">
-                  <TextOverTooltip :content="item.displayCategory" />
-                </span>
-                <span class="list-content-name">
-                  <TextOverTooltip :content="item.name" />
-                </span>
-                <span class="list-content-name">
-                  <TextOverTooltip :content="item.createdByName" />
-                </span>
-
-                <span class="list-content-btn">
-                  <!-- 编辑 -->
-                  <a-tooltip v-show="item.isEdit" :title="$t('1.1.1.5.5')" destroyTooltipOnHide>
-                    <svg-icon
-                      @click.prevent.stop="handleListItemEdit(item, '编辑')"
-                      icon-class="xitongtubiaoliebiaocaozuoanniubianjixiugai"
-                      class="svg-icon-btn"
-                    />
-                  </a-tooltip>
-                  <!-- 复制 -->
-                  <a-tooltip :title="$t('1.2.1.11.83')" destroyTooltipOnHide>
-                    <svg-icon
-                      @click.prevent.stop="handleListItemCopy(item, '编辑')"
-                      icon-class="xitongtubiaoliebiaocaozuoanniufuzhi"
-                      class="svg-icon-btn"
-                    />
-                  </a-tooltip>
-                  <!-- 删除 -->
-                  <a-popconfirm
-                    @click.prevent.stop
-                    v-show="item.isEdit"
-                    :title="$t('1.1.7.36')"
-                    @confirm="handleListItemDel(item, j)"
-                  >
-                    <a-tooltip :title="$t('1.1.1.3.3')" destroyTooltipOnHide>
-                      <svg-icon
-                        @click.prevent.stop
-                        class-name="svg-icon-btn is-danger thumb"
-                        icon-class="xitongtubiaoliebiaocaozuoanniushanchu"
-                      />
-                    </a-tooltip>
-                  </a-popconfirm>
-                </span>
-              </li>
-            </template>
-          </ul>
-          <!-- </draggable> -->
-        </div>
-      </a-col>
-    </a-row>
-
-    <!-- 保存到分类弹窗 -->
-    <a-modal
-      :title="'保存到分类'"
-      :visible="showInnerModal"
-      @ok="saveToCalss"
-      @cancel="cancelSaveToCalss"
-      :destroyOnClose="true"
-      wrapClassName="quickSearch-saveToClass-modal"
-    >
-      <search-class-name
-        ref="className"
-        v-bind="$attrs"
-        v-on="$listeners"
-        :actionList_prop="actionList_prop"
-      />
-    </a-modal>
-  </div>
-</template>
-
-<script>
-// import { EventBus } from "@/common/utils/eventBus.js";
-// import { SearchCondition } from "@/components/modal";
-import SearchCondition from "../components/search-condition/SearchCondition.vue";
-import TextOverTooltip from "~/scale-view/formitem/text-over-tooltip/TextOverTooltip";
-import searchClassName from "./search-class-name.vue";
-import tableSearchCon from "../mixins/tableSearchCon";
-
-export default {
-  name: "search-professional-model",
-  data() {
-    return {
-      actionList_prop: {}, // 修改
-      conOjbConfig: {},
-
-      showInnerModal: false, // 保存分类弹窗
-
-      filterKeyWork: "",
-
-      filtrationConfig: {
-        visible: false,
-        keyWord: ""
-      }
-    };
-  },
-  mixins: [tableSearchCon],
-  props: {
-    // 筛选分类 list
-    originConditionList: {
-      type: Array,
-      default: () => []
-    },
-    // 字段list
-    searchFieldList: {
-      type: Array,
-      default: () => []
-    },
-    searchFieldLimit: {
-      type: Object,
-      default: () => ({})
-    },
-    // 格式化后的 筛选分类
-    treeData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    newSearchFieldList() {
-      let list = this?.searchFieldList || [];
-      return list.filter(i => i.columnName !== "operatorColumn");
-    },
-    conObjLen() {
-      return this?.conOjbConfig?.conObj?.length || 0;
-    },
-
-    hasCheckedList() {
-      return false;
-    },
-
-    showConditionList() {
-      if (typeof this.filterKeyWork === "string" && this.filterKeyWork) {
-        return this.originConditionList.filter(v => v.name.includes(this.filterKeyWork));
-      }
-      return this.originConditionList;
-    },
-
-    // 保存按钮的名称
-    saveBtnName() {
-      let f = this.actionList_prop.from;
-
-      return f == "edit" ? "保存模板" : "另存为模板";
-    }
-  },
-  watch: {},
-  beforeCreate() {},
-  created() {
-    this.initUnWatch = this.$watch(
-      "originConditionList",
-      val => {
-        if (val.length > 0) {
-          this.init();
-        }
-      },
-      { deep: true, immediate: true }
-    );
-  },
-  beforeMount() {},
-  mounted() {
-    // 订阅 “清空条件” 事件
-    // EventBus.$on("handleClearClassConObj", this.handleClearConObj);
-    // this.init();
-  },
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {
-    // EventBus.$off("handleClearClassConObj");
-  },
-  destroyed() {},
-  activated() {},
-  methods: {
-    init() {
-      // isDefault
-      // 找到设置默认的“筛选分类”
-      let f = this.originConditionList.find(v => v.isDefault);
-      let name = "全部数据";
-      if (f) {
-        this.$set(f, "checked", true);
-        this.conOjbConfig = f;
-        if (f.isEdit) {
-          this.handleListItemEdit(f);
-        } else {
-          this.handleListItemCopy(f);
-        }
-        name = f.name || "全部数据";
-        this.$emit("changeShowName", name);
-      } else if (name === "全部数据") {
-        this.actionList_prop = Object.assign({}, { from: "copy" });
-      }
-      // 初始化完成，取消 watch
-      if (typeof this.initUnWatch === "function") {
-        this.initUnWatch();
-      }
-    },
-    /**
-     * 添加条件
-     */
-    handleAddCondition() {
-      this.$refs.conditionRef.addAction({ noDefault: true });
-      this.$nextTick(() => {
-        let com = this.$refs.comWrap;
-        // console.log(com, com.scrollHeight);
-        com.scrollTop = com.scrollHeight;
-      });
-      // handleInitConditions
-      // addAction
-      // cancelSaveAdd
-    },
-
-    /**
-     * 检索
-     */
-    handleSearch() {
-      // 检查 是否所有条件都没有选中 field_key，
-      let f = this.$refs.conditionRef.checkActionList();
-      if (!f) {
-        // 触发事件，监听 emit ‘saveAdd’ 处理
-        this.handleType = "search";
-        this.$refs.conditionRef.saveAdd();
-      } else {
-        this.$emit("changeSearch", "all", {}, {}, []);
-        this.$emit("changeShowName", "全部数据");
-        this.conOjbConfig = {};
-      }
-
-      // 清空右侧列表的选中状态
-      this.originConditionList.forEach(el => {
-        this.$set(el, "checked", false);
-      });
-    },
-
-    /**
-     * 保存到分类
-     */
-    handleSaveToClass() {
-      // 触发事件，监听 emit ‘saveAdd’ 处理
-      this.handleType = "SaveToClass";
-      this.$refs.conditionRef.saveAdd();
-    },
-
-    /**
-     * 打开保存分类弹窗
-     */
-    handleOpenSaveToClass(config) {
-      this.showInnerModal = true;
-      this.saveToClassConfig = config;
-      this.$nextTick(() => {
-        this.$refs.className.init();
-      });
-    },
-
-    /**
-     * 清空筛选条件
-     */
-    handleClearConObj(reload = true) {
-      this.$refs.conditionRef.cancelSaveAdd();
-      this.conOjbConfig = {};
-      this.actionList_prop = {};
-      this.originConditionList.forEach(el => {
-        this.$set(el, "checked", false);
-      });
-
-      // 清空筛选条件 “全部数据” 刷新数据
-      this.$nextTick(() => {
-        reload && this.$emit("changeSearch", "all", {}, {}, []);
-        this.$refs.conditionRef.addAction();
-        this.$emit("changeShowName", "全部数据");
-      });
-    },
-
-    /**
-     * 监听 emit ‘saveAdd’ 事件
-     */
-    saveAdd(config = {}) {
-      if (this.handleType === "search") {
-        this.handleRequestSearch(config);
-      } else if (this.handleType === "SaveToClass") {
-        this.handleOpenSaveToClass(config);
-      }
-    },
-
-    handleRequestSearch(config) {
-      let setting = config?.setting;
-      if (this.$utils.isJSON(setting)) {
-        setting = JSON.parse(setting);
-      }
-      this.conOjbConfig = setting;
-      this.$emit("changeSearch", "", setting, {}, [setting]);
-      this.$emit("changeShowName", "自定义筛选");
-    },
-
-    /**
-     * 左边列表选中
-     */
-    handleChecked(item) {
-      // 已选中的，再次点击，则取消选中
-      this.conOjbConfig = item.checked ? {} : item;
-
-      this.originConditionList.forEach(el => {
-        if (el.sid == item.sid && !el.checked) {
-          this.$set(el, "checked", true);
-        } else {
-          this.$set(el, "checked", false);
-        }
-      });
-      let f =
-        Array.isArray(this.treeData) && this.treeData.find(v => v.name == item.displayCategory);
-      this.$emit("handleItemClick", item, 0, f || {}, 0);
-
-      // 取消选中
-      if (Object.keys(this.conOjbConfig || {}).length === 0) {
-        this.$refs.conditionRef.cancelSaveAdd();
-        this.actionList_prop = {};
-        this.$nextTick(() => {
-          this.$refs.conditionRef.addAction();
-        });
-        return;
-      }
-      // 点击右边的筛选列表项，如果是有权限修改则是“修改逻辑”，否“赋值逻辑”
-      let type = item.isEdit ? "edit" : "copy";
-      // this.$emit("changeData", this.originConditionList, item);
-      if (type === "copy") {
-        this.handleListItemCopy(item);
-      } else {
-        this.handleListItemEdit(item);
-      }
-    },
-
-    /**
-     * 编辑
-     */
-    handleListItemEdit(item) {
-      this.actionList_prop = Object.assign({}, item, { from: "edit" });
-      this.$set(this.actionList_prop, "from", "edit");
-      //
-      this.$nextTick(() => {
-        this.$refs.conditionRef.handleInitConditions();
-      });
-    },
-
-    /**
-     * 复制
-     */
-    handleListItemCopy(item) {
-      this.actionList_prop = Object.assign({}, item, { from: "copy" });
-      this.$set(this.actionList_prop, "from", "copy");
-      this.$nextTick(() => {
-        this.$refs.conditionRef.handleInitConditions();
-      });
-    },
-
-    /**
-     * 删除
-     */
-    handleListItemDel(checkedItem, j) {
-      if (!checkedItem) {
-        this.$message.info(this.$t("1.9.18"));
-        return;
-      }
-      let url = `/tableList/deleteTableCondiTion`;
-      let params = { id: checkedItem.sid };
-      this.axios.post(url, this.$qs.stringify(params)).then(({ data }) => {
-        if (data.result == "SUCCESS") {
-          this.$message.success(this.$t("1.6.7"));
-          // this.$emit("saveGetTableCondiTionList", {
-          //   type: "delete",
-          //   item: checkedItem
-          // });
-          this.originConditionList.splice(j, 1);
-        } else {
-          this.$message.error(data.resultMsg);
-        }
-      });
-    },
-
-    saveToCalss() {
-      // this.showInnerModal = false;
-
-      // 获取分类和名称
-      let nameConfig = this.$refs.className.handleGetParams();
-      if (!nameConfig) return;
-      // 合拼其他参数
-      let setting = this.saveToClassConfig.setting;
-      if (this.$utils.isJSON(setting)) {
-        setting = JSON.parse(setting);
-        Object.assign(setting, nameConfig);
-      }
-
-      this.saveToClassConfig.setting = JSON.stringify(setting);
-
-      this.handleSaveAdd(this.saveToClassConfig);
-    },
-
-    cancelSaveToCalss() {
-      this.showInnerModal = false;
-    },
-
-    /**
-     * 右侧列表筛选打开
-     */
-    openConditionFiltration() {
-      this.filtrationConfig.visible = true;
-    },
-
-    handleFiltrationCancel() {
-      this.filtrationConfig.visible = false;
-    },
-
-    handleConditionFiltration() {
-      this.filterKeyWork = this.filtrationConfig.keyWord;
-      this.filtrationConfig.visible = false;
-    },
-
-    onSearch() {
-      this.handleConditionFiltration();
-    },
-
-    // 保存列表搜索分类
-    handleSaveAdd(params) {
-      // // 查询条件校验
-      const setting = JSON.parse(params.setting);
-      if (!this.validConObj(setting.conObj, this.newSearchFieldList, this.searchFieldLimit)) return;
-      Object.assign(params, {
-        tableId: this.$attrs.tableId,
-        conditionList: JSON.stringify(this.originConditionList)
-      });
-      let url = `/tableList/saveTableCondiTion`;
-      this.axios.post(url, this.$qs.stringify(params)).then(({ data }) => {
-        if (data.result == "SUCCESS") {
-          this.cancelSaveToCalss();
-          // 推送事件到 editTable  刷新筛选分类的数据。
-          this.$emit("reloadClassification");
-
-          this.$refs.conditionRef.cancelSaveAdd();
-          this.$nextTick(() => {
-            this.$refs.conditionRef.addAction();
-          });
-        } else {
-          this.$message.error(data.resultMsg);
-        }
-      });
-    }
-  },
-  components: {
-    SearchCondition,
-    TextOverTooltip,
-    searchClassName
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.search-professional-container {
-  .left-content {
-    padding: 10px;
-    // height: 160px;
-    overflow: hidden;
-    overflow-y: auto;
-    padding-right: 0;
-    border-right: 1px solid #d5d5d5;
-    /deep/ .inner-content {
-      .item-list {
-        padding-top: 0;
-        margin-top: 0;
-        margin-bottom: 0;
-        border-top: none;
-      }
-    }
-    &-com {
-      min-height: 98px;
-      max-height: 244px;
-      overflow: hidden;
-      overflow-y: auto;
-      padding-right: 10px;
-    }
-    &-btn {
-      padding-top: 10px;
-      padding-left: 30px;
-      .selected-item-del {
-        font-size: 14px;
-        color: #2474ff;
-        margin-left: 10px;
-        .svg-icon-btn {
-          margin-right: 6px;
-        }
-      }
-    }
-  }
-
-  .right-content {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-
-  .list {
-    height: 100%;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    &-title {
-      height: 40px;
-      font-size: 14px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      line-height: 40px;
-      background: #f2f2f2;
-      border-bottom: 1px solid #d5d5d5;
-      &-parent {
-        width: 25%;
-      }
-      &-name {
-        width: 25%;
-      }
-      &-btn {
-        width: 25%;
-      }
-      > span {
-        text-align: center;
-        display: inline-block;
-      }
-    }
-
-    &-content {
-      flex: 1;
-      font-size: 14px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      line-height: 30px;
-      background: #fff;
-      overflow: hidden;
-      overflow-y: auto;
-
-      &-parent {
-        width: 25%;
-      }
-      &-name {
-        width: 25%;
-      }
-      &-btn {
-        width: 25%;
-      }
-      > li {
-        line-height: 30px;
-        height: 30px;
-        border-bottom: 1px solid #d5d5d5;
-        &.checked {
-          background-color: #fdf2e0;
-          &:hover {
-            background-color: #fdf2e0;
-          }
-        }
-        &:hover {
-          background: #fafafa;
-        }
-        > span {
-          line-height: 30px;
-          height: 30px;
-          vertical-align: middle;
-          text-align: center;
-          display: inline-block;
-        }
-      }
-    }
-
-    .svg-icon-btn {
-      margin-right: 8px;
-    }
-    .svg-icon-btn + .svg-icon-btn {
-      margin-left: 0;
-    }
-  }
-
-  .ant-btn + .ant-btn {
-    margin-left: 10px;
-  }
-}
-</style>
-
-<style lang="less">
-.search-condition-f-footer {
-  padding-top: 10px;
-}
-</style>
+<template>
+  <div class="search-professional-container">
+    <a-row>
+      <!-- 左侧筛选分类设置 -->
+      <a-col :span="14" class="left-content">
+        <div ref="comWrap" class="left-content-com">
+          <SearchCondition
+            v-bind="$attrs"
+            ref="conditionRef"
+            :searchFieldList="newSearchFieldList"
+            :actionList_prop="actionList_prop"
+            :showItemName="false"
+            :isCnHis="false"
+            :saveEmpty="true"
+            :isOnlyCondition="false"
+            :hideAddBtn="true"
+            :isInSearch="true"
+            :source="'search-professional'"
+            @saveAdd="saveAdd"
+          ></SearchCondition>
+        </div>
+        <div class="left-content-btn">
+          <a-button @click="handleAddCondition">
+            添加条件
+          </a-button>
+          <a-button type="primary" @click="handleSearch">
+            查询
+          </a-button>
+          <a-button type="primary" @click="handleSaveToClass">
+            {{ saveBtnName }}
+          </a-button>
+
+          <span v-show="conObjLen > 0" class="selected-item-del" @click="handleClearConObj">
+            <svg-icon
+              class-name="svg-icon-btn"
+              icon-class="xitongtubiaoliebiaocaozuoanniushanchu"
+            />
+            清空筛选
+            <span>({{ conObjLen }})</span>
+          </span>
+        </div>
+      </a-col>
+      <!-- 右侧筛选分类列表 -->
+      <a-col :span="10" class="right-content">
+        <div class="list">
+          <div class="list-title">
+            <span class="list-title-parent">{{ $t("1.9.362") }}</span>
+            <span class="list-title-name">
+              <!-- {{ $t("1.1.3.1.1") }} -->
+              筛选名称
+              <a-popover placement="bottom" trigger="click" v-model="filtrationConfig.visible">
+                <template slot="content">
+                  <div class="search-condition-f">
+                    <div class="search-condition-f-content">
+                      <a-input-search
+                        v-model="filtrationConfig.keyWord"
+                        placeholder="请输入关键字"
+                        style="width: 200px"
+                        @search="onSearch"
+                      />
+                    </div>
+                    <div class="search-condition-f-footer">
+                      <a-button @click="handleFiltrationCancel" style="margin-right: 10px">
+                        {{ $t("1.1.1.1.4") }}
+                      </a-button>
+                      <a-button type="primary" @click="handleConditionFiltration">
+                        <!-- {{ $t("1.1.1.1.1") }} -->
+                        筛选
+                      </a-button>
+                    </div>
+                  </div>
+                </template>
+                <template slot="title">
+                  <span>筛选名称</span>
+                </template>
+                <a-icon
+                  type="filter"
+                  class="icon"
+                  theme="filled"
+                  :style="{ color: filterKeyWork ? '#2D7AFF' : 'rgba(0, 0, 0, 0.6)' }"
+                  @click="openConditionFiltration"
+                />
+              </a-popover>
+            </span>
+            <span class="list-title-name">{{ "创建人" }}</span>
+            <span class="list-title-btn">{{ $t("1.1.8.2.22") }}</span>
+          </div>
+          <!-- <draggable
+            class="list-content"
+            tag="ul"
+            v-model="originConditionList"
+            animation="300"
+          > -->
+          <ul class="list-content">
+            <template v-for="(item, j) in showConditionList">
+              <li :key="item.sid" :class="{ checked: item.checked }" @click="handleChecked(item)">
+                <span class="list-content-parent">
+                  <TextOverTooltip :content="item.displayCategory" />
+                </span>
+                <span class="list-content-name">
+                  <TextOverTooltip :content="item.name" />
+                </span>
+                <span class="list-content-name">
+                  <TextOverTooltip :content="item.createdByName" />
+                </span>
+
+                <span class="list-content-btn">
+                  <!-- 编辑 -->
+                  <a-tooltip v-show="item.isEdit" :title="$t('1.1.1.5.5')" destroyTooltipOnHide>
+                    <svg-icon
+                      @click.prevent.stop="handleListItemEdit(item, '编辑')"
+                      icon-class="xitongtubiaoliebiaocaozuoanniubianjixiugai"
+                      class="svg-icon-btn"
+                    />
+                  </a-tooltip>
+                  <!-- 复制 -->
+                  <a-tooltip :title="$t('1.2.1.11.83')" destroyTooltipOnHide>
+                    <svg-icon
+                      @click.prevent.stop="handleListItemCopy(item, '编辑')"
+                      icon-class="xitongtubiaoliebiaocaozuoanniufuzhi"
+                      class="svg-icon-btn"
+                    />
+                  </a-tooltip>
+                  <!-- 删除 -->
+                  <a-popconfirm
+                    @click.prevent.stop
+                    v-show="item.isEdit"
+                    :title="$t('1.1.7.36')"
+                    @confirm="handleListItemDel(item, j)"
+                  >
+                    <a-tooltip :title="$t('1.1.1.3.3')" destroyTooltipOnHide>
+                      <svg-icon
+                        @click.prevent.stop
+                        class-name="svg-icon-btn is-danger thumb"
+                        icon-class="xitongtubiaoliebiaocaozuoanniushanchu"
+                      />
+                    </a-tooltip>
+                  </a-popconfirm>
+                </span>
+              </li>
+            </template>
+          </ul>
+          <!-- </draggable> -->
+        </div>
+      </a-col>
+    </a-row>
+
+    <!-- 保存到分类弹窗 -->
+    <a-modal
+      :title="'保存到分类'"
+      :visible="showInnerModal"
+      @ok="saveToCalss"
+      @cancel="cancelSaveToCalss"
+      :destroyOnClose="true"
+      wrapClassName="quickSearch-saveToClass-modal"
+    >
+      <search-class-name
+        ref="className"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :actionList_prop="actionList_prop"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+// import { EventBus } from "@/common/utils/eventBus.js";
+// import { SearchCondition } from "@/components/modal";
+import SearchCondition from "../components/search-condition/SearchCondition.vue";
+import TextOverTooltip from "~/scale-view/formitem/text-over-tooltip/TextOverTooltip";
+import searchClassName from "./search-class-name.vue";
+import tableSearchCon from "../mixins/tableSearchCon";
+
+export default {
+  name: "search-professional-model",
+  data() {
+    return {
+      actionList_prop: {}, // 修改
+      conOjbConfig: {},
+
+      showInnerModal: false, // 保存分类弹窗
+
+      filterKeyWork: "",
+
+      filtrationConfig: {
+        visible: false,
+        keyWord: ""
+      }
+    };
+  },
+  mixins: [tableSearchCon],
+  props: {
+    // 筛选分类 list
+    originConditionList: {
+      type: Array,
+      default: () => []
+    },
+    // 字段list
+    searchFieldList: {
+      type: Array,
+      default: () => []
+    },
+    searchFieldLimit: {
+      type: Object,
+      default: () => ({})
+    },
+    // 格式化后的 筛选分类
+    treeData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    newSearchFieldList() {
+      let list = this?.searchFieldList || [];
+      return list.filter(i => i.columnName !== "operatorColumn");
+    },
+    conObjLen() {
+      return this?.conOjbConfig?.conObj?.length || 0;
+    },
+
+    hasCheckedList() {
+      return false;
+    },
+
+    showConditionList() {
+      if (typeof this.filterKeyWork === "string" && this.filterKeyWork) {
+        return this.originConditionList.filter(v => v.name.includes(this.filterKeyWork));
+      }
+      return this.originConditionList;
+    },
+
+    // 保存按钮的名称
+    saveBtnName() {
+      let f = this.actionList_prop.from;
+
+      return f == "edit" ? "保存模板" : "另存为模板";
+    }
+  },
+  watch: {},
+  beforeCreate() {},
+  created() {
+    this.initUnWatch = this.$watch(
+      "originConditionList",
+      val => {
+        if (val.length > 0) {
+          this.init();
+        }
+      },
+      { deep: true, immediate: true }
+    );
+  },
+  beforeMount() {},
+  mounted() {
+    // 订阅 “清空条件” 事件
+    // EventBus.$on("handleClearClassConObj", this.handleClearConObj);
+    // this.init();
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {
+    // EventBus.$off("handleClearClassConObj");
+  },
+  destroyed() {},
+  activated() {},
+  methods: {
+    init() {
+      // isDefault
+      // 找到设置默认的“筛选分类”
+      let f = this.originConditionList.find(v => v.isDefault);
+      let name = "全部数据";
+      if (f) {
+        this.$set(f, "checked", true);
+        this.conOjbConfig = f;
+        if (f.isEdit) {
+          this.handleListItemEdit(f);
+        } else {
+          this.handleListItemCopy(f);
+        }
+        name = f.name || "全部数据";
+        this.$emit("changeShowName", name);
+      } else if (name === "全部数据") {
+        this.actionList_prop = Object.assign({}, { from: "copy" });
+      }
+      // 初始化完成，取消 watch
+      if (typeof this.initUnWatch === "function") {
+        this.initUnWatch();
+      }
+    },
+    /**
+     * 添加条件
+     */
+    handleAddCondition() {
+      this.$refs.conditionRef.addAction({ noDefault: true });
+      this.$nextTick(() => {
+        let com = this.$refs.comWrap;
+        // console.log(com, com.scrollHeight);
+        com.scrollTop = com.scrollHeight;
+      });
+      // handleInitConditions
+      // addAction
+      // cancelSaveAdd
+    },
+
+    /**
+     * 检索
+     */
+    handleSearch() {
+      // 检查 是否所有条件都没有选中 field_key，
+      let f = this.$refs.conditionRef.checkActionList();
+      if (!f) {
+        // 触发事件，监听 emit ‘saveAdd’ 处理
+        this.handleType = "search";
+        this.$refs.conditionRef.saveAdd();
+      } else {
+        this.$emit("changeSearch", "all", {}, {}, []);
+        this.$emit("changeShowName", "全部数据");
+        this.conOjbConfig = {};
+      }
+
+      // 清空右侧列表的选中状态
+      this.originConditionList.forEach(el => {
+        this.$set(el, "checked", false);
+      });
+    },
+
+    /**
+     * 保存到分类
+     */
+    handleSaveToClass() {
+      // 触发事件，监听 emit ‘saveAdd’ 处理
+      this.handleType = "SaveToClass";
+      this.$refs.conditionRef.saveAdd();
+    },
+
+    /**
+     * 打开保存分类弹窗
+     */
+    handleOpenSaveToClass(config) {
+      this.showInnerModal = true;
+      this.saveToClassConfig = config;
+      this.$nextTick(() => {
+        this.$refs.className.init();
+      });
+    },
+
+    /**
+     * 清空筛选条件
+     */
+    handleClearConObj(reload = true) {
+      this.$refs.conditionRef.cancelSaveAdd();
+      this.conOjbConfig = {};
+      this.actionList_prop = {};
+      this.originConditionList.forEach(el => {
+        this.$set(el, "checked", false);
+      });
+
+      // 清空筛选条件 “全部数据” 刷新数据
+      this.$nextTick(() => {
+        reload && this.$emit("changeSearch", "all", {}, {}, []);
+        this.$refs.conditionRef.addAction();
+        this.$emit("changeShowName", "全部数据");
+      });
+    },
+
+    /**
+     * 监听 emit ‘saveAdd’ 事件
+     */
+    saveAdd(config = {}) {
+      if (this.handleType === "search") {
+        this.handleRequestSearch(config);
+      } else if (this.handleType === "SaveToClass") {
+        this.handleOpenSaveToClass(config);
+      }
+    },
+
+    handleRequestSearch(config) {
+      let setting = config?.setting;
+      if (this.$utils.isJSON(setting)) {
+        setting = JSON.parse(setting);
+      }
+      this.conOjbConfig = setting;
+      this.$emit("changeSearch", "", setting, {}, [setting]);
+      this.$emit("changeShowName", "自定义筛选");
+    },
+
+    /**
+     * 左边列表选中
+     */
+    handleChecked(item) {
+      // 已选中的，再次点击，则取消选中
+      this.conOjbConfig = item.checked ? {} : item;
+
+      this.originConditionList.forEach(el => {
+        if (el.sid == item.sid && !el.checked) {
+          this.$set(el, "checked", true);
+        } else {
+          this.$set(el, "checked", false);
+        }
+      });
+      let f =
+        Array.isArray(this.treeData) && this.treeData.find(v => v.name == item.displayCategory);
+      this.$emit("handleItemClick", item, 0, f || {}, 0);
+
+      // 取消选中
+      if (Object.keys(this.conOjbConfig || {}).length === 0) {
+        this.$refs.conditionRef.cancelSaveAdd();
+        this.actionList_prop = {};
+        this.$nextTick(() => {
+          this.$refs.conditionRef.addAction();
+        });
+        return;
+      }
+      // 点击右边的筛选列表项，如果是有权限修改则是“修改逻辑”，否“赋值逻辑”
+      let type = item.isEdit ? "edit" : "copy";
+      // this.$emit("changeData", this.originConditionList, item);
+      if (type === "copy") {
+        this.handleListItemCopy(item);
+      } else {
+        this.handleListItemEdit(item);
+      }
+    },
+
+    /**
+     * 编辑
+     */
+    handleListItemEdit(item) {
+      this.actionList_prop = Object.assign({}, item, { from: "edit" });
+      this.$set(this.actionList_prop, "from", "edit");
+      //
+      this.$nextTick(() => {
+        this.$refs.conditionRef.handleInitConditions();
+      });
+    },
+
+    /**
+     * 复制
+     */
+    handleListItemCopy(item) {
+      this.actionList_prop = Object.assign({}, item, { from: "copy" });
+      this.$set(this.actionList_prop, "from", "copy");
+      this.$nextTick(() => {
+        this.$refs.conditionRef.handleInitConditions();
+      });
+    },
+
+    /**
+     * 删除
+     */
+    handleListItemDel(checkedItem, j) {
+      if (!checkedItem) {
+        this.$message.info(this.$t("1.9.18"));
+        return;
+      }
+      let url = `/tableList/deleteTableCondiTion`;
+      let params = { id: checkedItem.sid };
+      this.axios.post(url, this.$qs.stringify(params)).then(({ data }) => {
+        if (data.result == "SUCCESS") {
+          this.$message.success(this.$t("1.6.7"));
+          // this.$emit("saveGetTableCondiTionList", {
+          //   type: "delete",
+          //   item: checkedItem
+          // });
+          this.originConditionList.splice(j, 1);
+        } else {
+          this.$message.error(data.resultMsg);
+        }
+      });
+    },
+
+    saveToCalss() {
+      // this.showInnerModal = false;
+
+      // 获取分类和名称
+      let nameConfig = this.$refs.className.handleGetParams();
+      if (!nameConfig) return;
+      // 合拼其他参数
+      let setting = this.saveToClassConfig.setting;
+      if (this.$utils.isJSON(setting)) {
+        setting = JSON.parse(setting);
+        Object.assign(setting, nameConfig);
+      }
+
+      this.saveToClassConfig.setting = JSON.stringify(setting);
+
+      this.handleSaveAdd(this.saveToClassConfig);
+    },
+
+    cancelSaveToCalss() {
+      this.showInnerModal = false;
+    },
+
+    /**
+     * 右侧列表筛选打开
+     */
+    openConditionFiltration() {
+      this.filtrationConfig.visible = true;
+    },
+
+    handleFiltrationCancel() {
+      this.filtrationConfig.visible = false;
+    },
+
+    handleConditionFiltration() {
+      this.filterKeyWork = this.filtrationConfig.keyWord;
+      this.filtrationConfig.visible = false;
+    },
+
+    onSearch() {
+      this.handleConditionFiltration();
+    },
+
+    // 保存列表搜索分类
+    handleSaveAdd(params) {
+      // // 查询条件校验
+      const setting = JSON.parse(params.setting);
+      if (!this.validConObj(setting.conObj, this.newSearchFieldList, this.searchFieldLimit)) return;
+      Object.assign(params, {
+        tableId: this.$attrs.tableId,
+        conditionList: JSON.stringify(this.originConditionList)
+      });
+      let url = `/tableList/saveTableCondiTion`;
+      this.axios.post(url, this.$qs.stringify(params)).then(({ data }) => {
+        if (data.result == "SUCCESS") {
+          this.cancelSaveToCalss();
+          // 推送事件到 editTable  刷新筛选分类的数据。
+          this.$emit("reloadClassification");
+
+          this.$refs.conditionRef.cancelSaveAdd();
+          this.$nextTick(() => {
+            this.$refs.conditionRef.addAction();
+          });
+        } else {
+          this.$message.error(data.resultMsg);
+        }
+      });
+    }
+  },
+  components: {
+    SearchCondition,
+    TextOverTooltip,
+    searchClassName
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.search-professional-container {
+  .left-content {
+    padding: 10px;
+    // height: 160px;
+    overflow: hidden;
+    overflow-y: auto;
+    padding-right: 0;
+    border-right: 1px solid #d5d5d5;
+    /deep/ .inner-content {
+      .item-list {
+        padding-top: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+        border-top: none;
+      }
+    }
+    &-com {
+      min-height: 98px;
+      max-height: 244px;
+      overflow: hidden;
+      overflow-y: auto;
+      padding-right: 10px;
+    }
+    &-btn {
+      padding-top: 10px;
+      padding-left: 30px;
+      .selected-item-del {
+        font-size: 14px;
+        color: #2474ff;
+        margin-left: 10px;
+        .svg-icon-btn {
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+
+  .right-content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .list {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    &-title {
+      height: 40px;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      line-height: 40px;
+      background: #f2f2f2;
+      border-bottom: 1px solid #d5d5d5;
+      &-parent {
+        width: 25%;
+      }
+      &-name {
+        width: 25%;
+      }
+      &-btn {
+        width: 25%;
+      }
+      > span {
+        text-align: center;
+        display: inline-block;
+      }
+    }
+
+    &-content {
+      flex: 1;
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      line-height: 30px;
+      background: #fff;
+      overflow: hidden;
+      overflow-y: auto;
+
+      &-parent {
+        width: 25%;
+      }
+      &-name {
+        width: 25%;
+      }
+      &-btn {
+        width: 25%;
+      }
+      > li {
+        line-height: 30px;
+        height: 30px;
+        border-bottom: 1px solid #d5d5d5;
+        &.checked {
+          background-color: #fdf2e0;
+          &:hover {
+            background-color: #fdf2e0;
+          }
+        }
+        &:hover {
+          background: #fafafa;
+        }
+        > span {
+          line-height: 30px;
+          height: 30px;
+          vertical-align: middle;
+          text-align: center;
+          display: inline-block;
+        }
+      }
+    }
+
+    .svg-icon-btn {
+      margin-right: 8px;
+    }
+    .svg-icon-btn + .svg-icon-btn {
+      margin-left: 0;
+    }
+  }
+
+  .ant-btn + .ant-btn {
+    margin-left: 10px;
+  }
+}
+</style>
+
+<style lang="less">
+.search-condition-f-footer {
+  padding-top: 10px;
+}
+</style>