bugfix: 测试问题修复

luofann · Aug 17, 2023 · 7b3148e · 7b3148e
1 parent ea3aa59
commit 7b3148e
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 35 deletions.
diff --git a/frontend/pc/src/utils/use-modal-close-confirmation.js b/frontend/pc/src/utils/use-modal-close-confirmation.js
@@ -0,0 +1,11 @@
+export default function useModalCloseConfirmation(title, subTitle) {
+  return new Promise(resolve => {
+    window.app.$bkInfo({
+      title: title || '确认离开当前页？',
+      subTitle: subTitle || '离开会导致未保存信息丢失',
+      okText: '离开',
+      confirmFn: () => resolve(true),
+      cancelFn: () => resolve(false),
+    });
+  });
+}
diff --git a/frontend/pc/src/views/processManagement/apiConfigure/addApiInfo.vue b/frontend/pc/src/views/processManagement/apiConfigure/addApiInfo.vue
@@ -69,25 +69,28 @@
         :property="'name'">
         <bk-input maxlength="120"
           :placeholder="$t(`m.systemConfig['请输入接口名称']`)"
-          v-model="directory.formInfo.name">
+          v-model="directory.formInfo.name"
+          @change="$emit('change')">
         </bk-input>
       </bk-form-item>
       <bk-form-item :label="$t(`m.systemConfig['负责人：']`)">
-        <member-select v-model="directory.formInfo.ownersInputValue"></member-select>
+        <member-select v-model="directory.formInfo.ownersInputValue" @change="$emit('change')"></member-select>
       </bk-form-item>
       <bk-form-item
         :label="$t(`m.systemConfig['函数名称']`)">
         <!-- eslint-disable vue/camelcase -->
         <bk-input
           :placeholder="$t(`m.systemConfig['请输入函数名称']`)"
-          v-model="directory.formInfo.func_name">
+          v-model="directory.formInfo.func_name"
+          @change="$emit('change')">
         </bk-input>
         <!-- eslint-enable -->
       </bk-form-item>
       <bk-form-item
         :label="$t(`m.systemConfig['接口路径']`)">
         <bk-input v-model="directory.formInfo.road" placeholder="please input path"
-          :disabled="(directory.formInfo.category === 'component' || directory.formInfo.category === 'buffet_component') && typeInfo !== 'ADD'">
+          :disabled="(directory.formInfo.category === 'component' || directory.formInfo.category === 'buffet_component') && typeInfo !== 'ADD'"
+          @change="$emit('change')">
           <template slot="prepend">
             <bk-dropdown-menu class="group-text"
               @show="dropdownShow"
@@ -114,7 +117,8 @@
         :label="$t(`m.systemConfig['版本号']`)">
         <bk-input
           :placeholder="$t(`m.systemConfig['请输入版本号']`)"
-          v-model="directory.formInfo.version">
+          v-model="directory.formInfo.version"
+          @change="$emit('change')">
         </bk-input>
       </bk-form-item>
       <bk-form-item
@@ -123,7 +127,8 @@
           :placeholder="$t(`m.systemConfig['请输入API描述']`)"
           :type="'textarea'"
           :rows="3"
-          v-model="directory.formInfo.desc">
+          v-model="directory.formInfo.desc"
+          @change="$emit('change')">
         </bk-input>
       </bk-form-item>
     </bk-form>
@@ -301,6 +306,7 @@
         this.directory.formInfo.name = dataItem.label;
         this.directory.formInfo.version = dataItem.version || 'v1';
         this.directory.formInfo.category = dataItem.category;
+        this.$emit('change');
       },
       changeCode(id) {
         // 切换 清空
@@ -318,6 +324,7 @@
         };
         const dataItem = this.treeList.slice(1).filter(item => item.id === id)[0];
         this.$parent.$parent.$parent.getChannelPathList(dataItem.code);
+        this.$emit('change');
       },
       dropdownShow() {
         this.isDropdownShow = true;

diff --git a/frontend/pc/src/views/processManagement/apiConfigure/apiTable.vue b/frontend/pc/src/views/processManagement/apiConfigure/apiTable.vue
@@ -195,13 +195,16 @@
     <bk-sideslider
       :is-show.sync="entryInfo.show"
       :title="entryInfo.title"
-      :width="entryInfo.width">
+      :width="entryInfo.width"
+      :quick-close="true"
+      :before-close="handleBeforeClose">
       <div slot="content" style="padding: 20px" v-if="entryInfo.show">
         <add-api-info
           :first-level-info="firstLevelInfo"
           :path-list="pathList"
           :tree-list="treeList"
-          :type-info="typeInfo">
+          :type-info="typeInfo"
+          @change="isFormChanged = true">
         </add-api-info>
       </div>
     </bk-sideslider>
@@ -212,6 +215,7 @@
   import { errorHandler } from '../../../utils/errorHandler';
   import addApiInfo from './addApiInfo.vue';
   import permission from '@/mixins/permission.js';
+  import useModalCloseConfirmation from '@/utils/use-modal-close-confirmation';
   import Empty from '../../../components/common/Empty.vue';
 
   export default {
@@ -289,6 +293,7 @@
         fileVal: '',
         typeInfo: '',
         searchtoggle: false,
+        isFormChanged: false,
       };
     },
     computed: {
@@ -360,6 +365,7 @@
           ? this.$t('m.systemConfig["新增接口"]') : this.$t('m.systemConfig["接入接口"]');
         this.$refs.apiDropdown.hide();
         this.entryInfo.show = !this.entryInfo.show;
+        this.isFormChanged = false;
       },
       dropdownShow() {
         this.isDropdownShow = true;
@@ -523,6 +529,13 @@
       exportFlow(item) {
         window.open(`${window.SITE_URL}api/postman/remote_api/${item.id}/exports/`);
       },
+      async handleBeforeClose() {
+        if (this.isFormChanged) {
+          const result = await useModalCloseConfirmation();
+          return result;
+        }
+        return true;
+      },
     },
   };
 </script>

diff --git a/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/addField/index.vue b/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/addField/index.vue
@@ -37,8 +37,10 @@
           :property="'prevId'"
           :error-display-type="'normal'"
           :ext-cls="'bk-mt0-item'">
-          <bk-select v-model="formInfo.prevId"
-            searchable>
+          <bk-select
+            v-model="formInfo.prevId"
+            searchable
+            @change="$emit('change')">
             <bk-option v-for="option in prevNodeList"
               :key="option.id"
               :id="option.id"
@@ -73,7 +75,8 @@
         <bk-input
           v-model="formInfo.key"
           :placeholder="$t(`m.treeinfo['请输入唯一标识']`)"
-          :disabled="typeof changeInfo.id === 'number' || changeInfo.is_builtin || changeInfo.source === 'TABLE'">
+          :disabled="typeof changeInfo.id === 'number' || changeInfo.is_builtin || changeInfo.source === 'TABLE'"
+          @change="$emit('change')">
         </bk-input>
       </bk-form-item>
       <bk-form-item
@@ -116,7 +119,7 @@
         v-if="formInfo.regex === 'ASSOCIATED_FIELD_VALIDATION' && !isEditPublic">
         <div class="bk-form-content" style="margin-left: 0">
           <p class="bk-form-p">{{$t(`m.newCommon["字段间关系"]`)}}</p>
-          <bk-radio-group v-model="formInfo.regex_config.rule.type">
+          <bk-radio-group v-model="formInfo.regex_config.rule.type" @change="$emit('change')">
             <bk-radio :value="'and'" :ext-cls="'mr20'">{{$t(`m.treeinfo['且']`)}}</bk-radio>
             <bk-radio :value="'or'">{{$t(`m.treeinfo['或']`)}}</bk-radio>
           </bk-radio-group>
@@ -128,7 +131,8 @@
           <bk-select style="width: 120px"
             :ext-cls="'field-valid-select'"
             v-model="expression.condition"
-            :clearable="false">
+            :clearable="false"
+            @change="$emit('change')">
             <bk-option v-for="option in betweenList"
               :key="option.id"
               :id="option.typeName"
@@ -164,7 +168,8 @@
           <bk-input
             v-model="formInfo.customRegex"
             :disabled="(changeInfo.is_builtin || changeInfo.source === 'TABLE') && formInfo.key !== 'bk_biz_id'"
-            :placeholder="$t(`m.treeinfo['请输入正则规则']`)">
+            :placeholder="$t(`m.treeinfo['请输入正则规则']`)"
+            @change="$emit('change')">
           </bk-input>
         </bk-form-item>
       </template>
@@ -276,7 +281,7 @@
         <bk-form-item :ext-cls="'bk-halfline-item bk-halfline-margin bk-mt20-item'"
           :label="$t(`m.treeinfo['布局要求']`)"
           :required="true">
-          <bk-radio-group v-model="formInfo.layout">
+          <bk-radio-group v-model="formInfo.layout" @change="$emit('change')">
             <template v-for="(layout, layoutIndex) in globalChoise.layout_type">
               <bk-radio :ext-cls="'mr20'"
                 :key="layoutIndex"
@@ -290,7 +295,7 @@
         <bk-form-item :ext-cls="'bk-halfline-item bk-mt20-item'"
           :label="$t(`m.treeinfo['字段必填']`)"
           :required="true">
-          <bk-radio-group v-model="formInfo.validate">
+          <bk-radio-group v-model="formInfo.validate" @change="$emit('change')">
             <template v-for="(validate, validateIndex) in globalChoise.validate_type">
               <bk-radio :ext-cls="'mr20'"
                 :key="validateIndex"
@@ -308,13 +313,15 @@
         <textarea
           class="bk-form-textarea bk-textarea-tanble bk-halfline-item bk-halfline-margin field-input-tips"
           :placeholder="$t(`m.treeinfo['请输入字段填写说明']`)"
-          v-model.trim="formInfo.desc">
+          v-model.trim="formInfo.desc"
+          @change="$emit('change')">
                 </textarea>
         <p class="field-tips-checkbox" style="margin-left: 335px;">
           <bk-checkbox
             :true-value="trueStatus"
             :false-value="falseStatus"
-            v-model="formInfo.is_tips">
+            v-model="formInfo.is_tips"
+            @change="$emit('change')">
             {{ $t('m.treeinfo["添加额外提示说明"]') }}
           </bk-checkbox>
         </p>
@@ -328,8 +335,9 @@
           <textarea
             class="bk-form-textarea bk-textarea-tanble bk-halfline-item bk-halfline-margin"
             :placeholder="$t(`m.treeinfo['请输入，用于鼠标经过提示']`)"
-            v-model.trim="formInfo.tips">
-                    </textarea>
+            v-model.trim="formInfo.tips"
+            @change="$emit('change')">
+          </textarea>
           <p class="bk-label-tips">
             <span v-bk-tooltips.top="(formInfo.tips || $t(`m.treeinfo['字段释疑填填看哦']`))">
               {{ $t('m.treeinfo["效果预览"]') }}
@@ -345,7 +353,8 @@
           :ext-cls="'bk-mt20-item'">
           <bk-switcher v-model="formInfo.show_type"
             size="small"
-            :disabled="changeInfo.key === 'title'">
+            :disabled="changeInfo.key === 'title'"
+            @change="$emit('change')">
           </bk-switcher>
         </bk-form-item>
         <template v-if="formInfo.show_type">
@@ -670,6 +679,7 @@
         } else {
           this.isShowDataSource = false;
         }
+        this.$emit('change');
       },
       openDataSource() {
         this.isShowDataSource = true;
@@ -680,6 +690,7 @@
           keyElement.validator.content = '';
           keyElement.validator.state = '';
         }
+        this.$emit('change');
       },
       // 初始化赋值数据
       initData() {
@@ -839,6 +850,7 @@
       },
       // 改变字段类型，需要进行操作
       async changeType() {
+        this.$emit('change');
         // 改变字段类型，清空正则规则表达式
         this.formInfo.regex = 'EMPTY';
         this.formInfo.customRegex = '';
@@ -902,6 +914,7 @@
           });
       },
       onRegexFieldChange(key, expression) {
+        this.$emit('change');
         // system 表示系统内置条件，field 表示来源节点
         const systemCondition = ['system_time'];
         expression.source = systemCondition.includes(key) ? 'system' : 'field';
@@ -930,6 +943,7 @@
         }
       },
       changeApiInfo(val) {
+        this.$emit('change');
         this.apiDetail = val;
       },
       // rpc数据
@@ -938,6 +952,7 @@
       },
       // 上传文件模板
       handleFile(e) {
+        this.$emit('change');
         const fileInfo = e.target.files[0];
         const maxSize = 100000;
         const fileSize = fileInfo.size / 1024;

diff --git a/...tend/pc/src/views/processManagement/processDesign/nodeConfigue/components/fieldConfig.vue b/...tend/pc/src/views/processManagement/processDesign/nodeConfigue/components/fieldConfig.vue
@@ -150,8 +150,10 @@
     <!-- 新增字段 -->
     <bk-sideslider
       :is-show.sync="sliderInfo.show"
+      :quick-close="true"
       :title="sliderInfo.title"
-      :width="sliderInfo.width">
+      :width="sliderInfo.width"
+      :before-close="handleBeforeClose">
       <div class="p20" slot="content" v-if="sliderInfo.show">
         <add-field
           :change-info="changeInfo"
@@ -163,6 +165,7 @@
           :is-edit-public="isEditPublic"
           :workflow="flowInfo ? flowInfo.id : 0"
           :state="configur.id ? configur.id : 0"
+          @change="isFormChanged = true"
           @closeShade="closeShade">
         </add-field>
       </div>
@@ -193,6 +196,7 @@
 <script>
   import draggable from 'vuedraggable';
   import apiFieldsWatch from '../../../../commonMix/api_fields_watch';
+  import useModalCloseConfirmation from '../../../../../utils/use-modal-close-confirmation';
   import fieldPreview from './fieldPreview.vue';
   import addField from '../addField';
   import inheritState from './inheritState';
@@ -275,6 +279,7 @@
         addOrigin: {
           isOther: false,
         },
+        isFormChanged: false,
       };
     },
     computed: {
@@ -380,6 +385,13 @@
       updateInfo() {
         this.cacheFieldsIndexInfo();
       },
+      async handleBeforeClose() {
+        if (this.isFormChanged) {
+          const result = await useModalCloseConfirmation();
+          return result;
+        }
+        return true;
+      },
       // 新增编辑弹窗
       closeShade() {
         this.sliderInfo.show = false;
@@ -443,6 +455,7 @@
         this.$store.dispatch(url, params).then((res) => {
           this.nodesList = res.data;
           this.sliderInfo.show = true;
+          this.isFormChanged = false;
         })
           .catch((res) => {
             errorHandler(res, this);