cnhis-design-vue 0.2.63-beta → 0.3.1-beta

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

@@ -1,680 +0,0 @@
-<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>