From 40daae08df5e13c352badc39907d675d3c64ea87 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Wed, 14 Jun 2023 15:55:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E7=94=A8=E4=BE=8B-=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E9=A1=B5=E6=98=AF=E7=A9=BA=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1026912 --user=白奇 【测试跟踪】功能用例-筛选弹框页是空白 https://www.tapd.cn/55049933/s/1381797
---
 .../components/search/MsTableAdvSearchBar.vue | 238 ++++++++++++------
 1 file changed, 167 insertions(+), 71 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/components/search/MsTableAdvSearchBar.vue b/framework/sdk-parent/frontend/src/components/search/MsTableAdvSearchBar.vue
index c4c136236b..a5704182eb 100644
--- a/framework/sdk-parent/frontend/src/components/search/MsTableAdvSearchBar.vue
+++ b/framework/sdk-parent/frontend/src/components/search/MsTableAdvSearchBar.vue
@@ -1,28 +1,56 @@
 <template>
   <span class="adv-search-bar">
-    <el-link type="primary" @click="open" v-if="showLink">{{ $t('commons.adv_search.title') }}</el-link>
-    <el-dialog :title="$t('commons.adv_search.title')" :visible.sync="visible"
-               custom-class="adv-dialog" :append-to-body="true">
+    <el-link type="primary" @click="open" v-if="showLink">{{
+      $t("commons.adv_search.title")
+    }}</el-link>
+    <el-dialog
+      :title="$t('commons.adv_search.title')"
+      :visible.sync="visible"
+      custom-class="adv-dialog"
+      :append-to-body="true"
+    >
       <div class="search-items">
-        <div class="search-item" v-for="(component) in optional.components" :key="component.key">
+        <div
+          class="search-item"
+          v-for="component in optional.components"
+          :key="component.key"
+        >
           <el-row>
             <el-col :span="22">
-              <component :is="component.name" :component="component" :components.sync="config.components"
-                         @updateKey="changeSearchItemKey" :custom="condition.custom"/>
+              <component
+                :is="component.name"
+                :component="component"
+                :components.sync="config.components"
+                @updateKey="changeSearchItemKey"
+                :custom="condition.custom"
+              />
             </el-col>
             <el-col :span="2">
-              <i class="el-icon-close delete-icon" @click="remove(component)"
-                 v-if="optional.components.length !==1"></i>
+              <i
+                class="el-icon-close delete-icon"
+                @click="remove(component)"
+                v-if="optional.components.length !== 1"
+              ></i>
             </el-col>
           </el-row>
         </div>
-        <el-link type="primary" icon="el-icon-plus" v-if="showAddFilterLink"
-                 class="add-filter-link" @click="addFilter">{{ $t('commons.adv_search.add_filter_link') }}</el-link>
+        <el-link
+          type="primary"
+          icon="el-icon-plus"
+          v-if="showAddFilterLink"
+          class="add-filter-link"
+          @click="addFilter"
+          >{{ $t("commons.adv_search.add_filter_link") }}</el-link
+        >
       </div>
       <template v-slot:footer>
         <div class="dialog-footer">
-          <el-button @click="reset">{{ $t('commons.adv_search.reset') }}</el-button>
-          <el-button type="primary" @click="search">{{ $t('commons.adv_search.search') }}</el-button>
+          <el-button @click="reset">{{
+            $t("commons.adv_search.reset")
+          }}</el-button>
+          <el-button type="primary" @click="search">{{
+            $t("commons.adv_search.search")
+          }}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -31,11 +59,11 @@
 
 <script>
 import components from "./search-components";
-import {cloneDeep, concat, slice} from "lodash-es";
-import {_findByKey, _findIndexByKey} from "./custom-component";
+import { cloneDeep, concat, slice } from "lodash-es";
+import { _findByKey, _findIndexByKey } from "./custom-component";
 
 export default {
-  components: {...components},
+  components: { ...components },
   name: "MsTableAdvSearchBar",
   props: {
     condition: Object,
@@ -47,47 +75,58 @@ export default {
       type: Number,
       default() {
         return 4; // 默认展示的搜索条件数量
-      }
-    }
+      },
+    },
   },
   data() {
     return {
       visible: false,
       config: {
-        components: []
+        components: [],
       },
       optional: {
-        components: []
+        components: [],
       },
       showAddFilterLink: true,
-      nullFilterKey: '',
+      nullFilterKey: "",
       isInit: false,
-    }
+    };
   },
   methods: {
     doInit(handleCustom) {
       let config = cloneDeep(this.condition);
-      config.components.forEach(component => {
+      config.components.forEach((component) => {
         let operator = component.operator.value;
-        component.operator.value = operator === undefined ? component.operator.options[0].value : operator;
-      })
+        component.operator.value =
+          operator === undefined
+            ? component.operator.options[0].value
+            : operator;
+      });
       if (!handleCustom) {
         return config;
       }
       if (this.condition.custom) {
         let components = [];
-        this.systemFiled = config.components.filter(co => co.custom === undefined || co.custom === false);
-        this.customFiled = config.components.filter(co => co.custom === true);
+        this.systemFiled = config.components.filter(
+          (co) => co.custom === undefined || co.custom === false
+        );
+        this.customFiled = config.components.filter((co) => co.custom === true);
         // 选项分组
-        this.$set(components, 0, {label: this.$t('custom_field.system_field'), child: this.systemFiled});
-        this.$set(components, 1, {label: this.$t('custom_field.name'), child: this.customFiled});
+        components.push({
+          label: this.$t("custom_field.system_field"),
+          child: this.systemFiled,
+        });
+        components.push({
+          label: this.$t("custom_field.name"),
+          child: this.customFiled,
+        });
         this.$set(config, "components", components);
       }
       return config;
     },
     search() {
-      let condition = {}
-      this.optional.components.forEach(component => {
+      let condition = {};
+      this.optional.components.forEach((component) => {
         let value = component.value;
         if (Array.isArray(value)) {
           if (value.length > 0) {
@@ -104,42 +143,60 @@ export default {
       if (this.condition.name) this.condition.name = undefined;
       // 添加组合条件
       this.condition.combine = condition;
-      this.$emit('update:condition', this.condition);
-      this.$emit('search', condition);
+      this.$emit("update:condition", this.condition);
+      this.$emit("search", condition);
       this.visible = false;
     },
     setCondition(condition, component) {
       // 某些字段储存在自定义表但是其 custom 的值是 false
       // 因为需求要把这些字段在有选项分类时归为 系统字段 ？
-      if (component.custom || ['严重程度', '处理人', '状态', '用例状态', '责任人', '用例等级'].indexOf(component.label) > -1) {
+      if (
+        component.custom ||
+        [
+          "严重程度",
+          "处理人",
+          "状态",
+          "用例状态",
+          "责任人",
+          "用例等级",
+        ].indexOf(component.label) > -1
+      ) {
         this.handleCustomField(condition, component);
         return;
       }
       condition[component.key] = {
         operator: component.operator.value,
-        value: component.value
+        value: component.value,
       };
     },
     handleCustomField(condition, component) {
       if (!condition.customs) {
-        condition['customs'] = [];
+        condition["customs"] = [];
       }
       let value = component.value;
-      if (component.label === '用例状态' && value.length === 1 && value.indexOf('Trash') > -1) {
+      if (
+        component.label === "用例状态" &&
+        value.length === 1 &&
+        value.indexOf("Trash") > -1
+      ) {
         return;
       }
-      if (component.type === "multipleMember" || component.type === "checkbox" || component.type === "multipleSelect") {
+      if (
+        component.type === "multipleMember" ||
+        component.type === "checkbox" ||
+        component.type === "multipleSelect"
+      ) {
         try {
           value = JSON.stringify(component.value);
         } catch (e) {
           // nothing
         }
       }
-      condition['customs'].push({
+      condition["customs"].push({
         id: component.key,
         operator: component.operator.value,
         value: value,
-        type: component.type
+        type: component.type,
       });
     },
     reset() {
@@ -147,7 +204,10 @@ export default {
       this.optional.components.forEach((component, index) => {
         if (component.operator.value !== undefined) {
           let operator = _findByKey(source, component.key).operator.value;
-          component.operator.value = operator === undefined ? component.operator.options[0].value : operator;
+          component.operator.value =
+            operator === undefined
+              ? component.operator.options[0].value
+              : operator;
         }
         if (component.value !== undefined) {
           component.value = source[index].value;
@@ -155,24 +215,37 @@ export default {
         if (component.reset && component.reset instanceof Function) {
           component.reset();
         }
-      })
+      });
       this.condition.combine = undefined;
-      this.$emit('update:condition', this.condition);
-      this.$emit('search');
+      this.$emit("update:condition", this.condition);
+      this.$emit("search");
     },
     init() {
       this.config = this.doInit(true);
       this.optional = this.doInit();
-      if (this.optional.components.length && this.optional.components.length <= this.showItemSize) {
+      if (
+        this.optional.components.length &&
+        this.optional.components.length <= this.showItemSize
+      ) {
         this.showAddFilterLink = false;
       }
       // 默认显示几个搜索条件
-      this.optional.components = slice(this.optional.components, 0, this.showItemSize);
-      let allComponent = this.condition.custom ?
-        concat(this.config.components[0].child, this.config.components[1].child) : this.config.components;
+      this.optional.components = slice(
+        this.optional.components,
+        0,
+        this.showItemSize
+      );
+      let allComponent = this.condition.custom
+        ? concat(
+            this.config.components[0].child,
+            this.config.components[1].child
+          )
+        : this.config.components;
       for (let component of allComponent) {
         let co = _findByKey(this.optional.components, component.key);
-        co ? this.$set(co, 'disable', true) : this.$set(component, 'disable', false);
+        co
+          ? this.$set(co, "disable", true)
+          : this.$set(component, "disable", false);
       }
     },
     open() {
@@ -188,40 +261,58 @@ export default {
     },
     refreshComponentOption() {
       // 当前已存在的搜索子组件中是否有需要进行刷新数据选项的
-      let comps = this.optional.components.filter(cp => cp.init && cp.init instanceof Function);
-      comps.forEach(comp => comp.init());
+      let comps = this.optional.components.filter(
+        (cp) => cp.init && cp.init instanceof Function
+      );
+      comps.forEach((comp) => comp.init());
     },
     setModulesParam() {
-      let comps = this.optional.components.filter(c => c.key === 'moduleIds' && c.options.type === 'POST');
-      comps.forEach(comp => comp.options.params = {"projectId": this.condition.projectId});
+      let comps = this.optional.components.filter(
+        (c) => c.key === "moduleIds" && c.options.type === "POST"
+      );
+      comps.forEach(
+        (comp) =>
+          (comp.options.params = { projectId: this.condition.projectId })
+      );
     },
     handleCustomComponent() {
       let newConfig = cloneDeep(this.condition);
-      newConfig.components.forEach(component => {
+      newConfig.components.forEach((component) => {
         let operator = component.operator.value;
-        component.operator.value = operator === undefined ? component.operator.options[0].value : operator;
-      })
-      this.newCustomFiled = newConfig.components.filter(co => co.custom);
+        component.operator.value =
+          operator === undefined
+            ? component.operator.options[0].value
+            : operator;
+      });
+      this.newCustomFiled = newConfig.components.filter((co) => co.custom);
       for (let customField of this.newCustomFiled) {
         let co = _findByKey(this.optional.components, customField.key);
-        co ? this.$set(co, 'disable', true) : this.$set(customField, 'disable', false);
+        co
+          ? this.$set(co, "disable", true)
+          : this.$set(customField, "disable", false);
       }
-      this.config.components[1] = {label: this.$t('custom_field.name'), child: this.newCustomFiled};
+      this.config.components[1] = {
+        label: this.$t("custom_field.name"),
+        child: this.newCustomFiled,
+      };
     },
     addFilter() {
-      const index = _findIndexByKey(this.optional.components, this.nullFilterKey);
+      const index = _findIndexByKey(
+        this.optional.components,
+        this.nullFilterKey
+      );
       if (index > -1) {
-        this.$warning(this.$t('commons.adv_search.add_filter_link_tip'));
+        this.$warning(this.$t("commons.adv_search.add_filter_link_tip"));
         return;
       }
       let data = {
         key: this.nullFilterKey,
-        name: 'MsTableSearchInput',
-        label: '',
+        name: "MsTableSearchInput",
+        label: "",
         operator: {
-          options: []
+          options: [],
         },
-        disable: false
+        disable: false,
       };
       this.optional.components.push(data);
     },
@@ -231,7 +322,10 @@ export default {
         this.enableOptional(component, this.config.components);
       } else {
         // 系统字段和自定义字段选项合并
-        const components = concat(this.config.components[0].child, this.config.components[1].child);
+        const components = concat(
+          this.config.components[0].child,
+          this.config.components[1].child
+        );
         this.enableOptional(component, components);
       }
       let index = _findIndexByKey(this.optional.components, component.key);
@@ -242,7 +336,7 @@ export default {
     enableOptional(component, components) {
       let data = _findByKey(components, component.key);
       if (data) {
-        this.$set(data, 'disable', false);
+        this.$set(data, "disable", false);
       }
     },
     // 搜索组件的字段变换时触发
@@ -255,7 +349,10 @@ export default {
       if (!this.condition.custom) {
         components = this.config.components;
       } else {
-        components = concat(this.config.components[0].child, this.config.components[1].child);
+        components = concat(
+          this.config.components[0].child,
+          this.config.components[1].child
+        );
       }
       for (let op of components) {
         if (op.disable !== undefined && op.disable === false) {
@@ -263,9 +360,9 @@ export default {
           break;
         }
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style>
@@ -296,7 +393,6 @@ export default {
 </style>
 
 <style scoped>
-
 .dialog-footer {
   text-align: center;
 }