fix: 流程样式优化

src/api/flow/settingApi.js

@@ -22,6 +22,7 @@ const settingApi = {
 
 
     getQueryData: '/setting/engine/getQueryData',
+    getQueryMainSingleForMapping: '/setting/engine/getQueryMainSingleForMapping',
     getQueryPopupData: '/setting/engine/getQueryPopupData',
     getPopUpData: '/form/engine/popup/data',
     getSingleFlowSetting: '/setting/engine/getSingleFlowSetting',
@@ -337,7 +338,13 @@ export function getQueryData(parameter) {
         params: parameter
     })
 }
-
+export function getQueryMainSingleForMapping(parameter) {
+    return request({
+        url: settingApi.getQueryMainSingleForMapping,
+        method: 'get',
+        params: parameter
+    })
+}
 export function getQueryPopupData(parameter) {
     return request({
         url: settingApi.getQueryPopupData,

src/views/flow/stFormDesign/packages/PopUpMapping/index.vue

@@ -1,10 +1,36 @@
 <template>
   <div class="page">
-    <a-select v-model:value='queryServiceData' style='width: 100%' placeholder='选择查询服务' @change='handleChange'>
-      <a-select-option v-for='d in data' :key='d.id'>
-        {{ d.queryName }}
-      </a-select-option>
-    </a-select>
+    <a-row>
+      <a-col :span="22">
+        <a-select v-model:value='queryServiceData' style='width: 100%'
+                  optionFilterProp="label"
+                  show-search
+                  placeholder='选择查询服务'
+                  @change='handleChange'>
+          <a-select-option v-for='d in data'
+                           :key='d.id'
+                           :value="d.id"
+                           :label="d.queryName"
+          >
+            {{ d.queryName }}
+          </a-select-option>
+        </a-select>
+      </a-col>
+      <a-col :span="2">
+        <a-tooltip placement="topLeft">
+          <template #title>
+            <span>查询服务内容改变后，刷新当前查询服务</span>
+          </template>
+          <a-button type="text" @click="reloadQueryService">
+            <template #icon>
+              <SyncOutlined/>
+            </template>
+          </a-button>
+        </a-tooltip>
+
+      </a-col>
+    </a-row>
+
     <a-card size='small' title='字段映射：' :bordered='true'>
       <div v-for='(m,index) in queryMapFieldData'>
         <div v-show='m.mapping===true'>
@@ -33,10 +59,10 @@
         <div class="query-map" v-if="queryMapKeyValData.length > 0">
           <div class="query-map-item" v-for="(qItm, qIdx) in queryMapKeyValData" :key="qIdx">
             <div class="query-map-item-header">
-              <div class="query-no">查询映射{{  qIdx + 1  }}</div>
+              <div class="query-no">查询映射{{ qIdx + 1 }}</div>
               <a-button danger size="small" type="dashed" @click="deleteChangeQueryMapKeyVal(qIdx)">
                 <template #icon>
-                  <DeleteOutlined />
+                  <DeleteOutlined/>
                 </template>
               </a-button>
             </div>
@@ -50,22 +76,22 @@
               <template #title>
                 <span>Key格式</span>
               </template>
-              <span><QuestionCircleOutlined />查询Key</span>
+              <span><QuestionCircleOutlined/>查询Key</span>
             </a-popover>
             <a-input placeholder="请输入查询Key" v-model:value="qItm.queryKey"></a-input>
 
             <span>查询Value</span>
             <a-tree-select
-              v-model:value='qItm.queryValue'
-              style='width: 100%'
-              show-search
-              :tree-data='queryMapKeyValOpts'
-              tree-node-filter-prop="name"
-              :filter-option='filterOption'
-              :allowClear='true'
-              :fieldNames='{children:"children",label:"name",key:"code",value:"code"}'
-              placeholder='请输入查询Value'
-              tree-default-expand-all
+                v-model:value='qItm.queryValue'
+                style='width: 100%'
+                show-search
+                :tree-data='queryMapKeyValOpts'
+                tree-node-filter-prop="name"
+                :filter-option='filterOption'
+                :allowClear='true'
+                :fieldNames='{children:"children",label:"name",key:"code",value:"code"}'
+                placeholder='请输入查询Value'
+                tree-default-expand-all
             >
             </a-tree-select>
           </div>
@@ -73,7 +99,7 @@
 
         <a-button type="dashed" @click="handleAddQueryMap">
           <template #icon>
-            <PlusOutlined />
+            <PlusOutlined/>
           </template>
           新增
         </a-button>
@@ -83,11 +109,11 @@
 
 </template>
 <script>
-import {getQueryMainListForMapping} from '/@/api/flow/settingApi'
-import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import {getQueryMainListForMapping, getQueryMainSingleForMapping} from '/@/api/flow/settingApi'
+import {PlusOutlined, DeleteOutlined} from '@ant-design/icons-vue'
 
 export default {
-  components: { PlusOutlined, DeleteOutlined },
+  components: {PlusOutlined, DeleteOutlined},
   props: {
     formDataList: {
       type: Array
@@ -105,7 +131,7 @@ export default {
     },
     queryService: {
       type: Number,
-      default: 0
+      default: null
     },
     queryMapKeyValData: {
       type: Array,
@@ -123,7 +149,7 @@ export default {
     getQueryMainListForMapping().then((res) => {
       this.data = res.data
       this.queryServiceData = this.queryService
-      if ( this.data.find(item => item.id == this.queryServiceData)){
+      if (this.data.find(item => item.id == this.queryServiceData)) {
         const newData = this.data.find(item => item.id == this.queryServiceData).queryColumnList
         for (let i in newData) {
           const exists = this.queryMapField.some(item => item.field == newData[i]["field"]);
@@ -133,12 +159,24 @@ export default {
             this.queryMapFieldData.push(newData[i])
           }
         }
-        this.$emit('changeMap',  this.queryServiceData, this.queryMapFieldData, this.queryMapKeyValData)
+        this.$emit('changeMap', this.queryServiceData, this.queryMapFieldData, this.queryMapKeyValData)
       }
     })
 
   },
   methods: {
+    reloadQueryService() {
+      const curQueryMapFieldData = JSON.parse(JSON.stringify(this.queryMapFieldData))
+      getQueryMainSingleForMapping({queryId: this.queryService}).then((res) => {
+        this.queryMapFieldData = res.data.queryColumnList
+        for (const item of this.queryMapFieldData) {
+          const resultFind = curQueryMapFieldData.find(f => f.field == item.field)
+          if (resultFind && resultFind.mapField) {
+            item.mapField = resultFind.mapField
+          }
+        }
+      })
+    },
     filterOption(input, option) {
       return (
           option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -148,7 +186,8 @@ export default {
       this.queryMapFieldData = this.data.find(item => item.id == value).queryColumnList
       this.$emit('changeMap', value, this.queryMapFieldData)
     },
-    handleChangeField(value) {},
+    handleChangeField(value) {
+    },
     handleAddQueryMap() {
       this.queryMapKeyValData.push({
         queryKey: undefined,
@@ -171,7 +210,7 @@ export default {
         code: '[CurrentLoginUser]',
         name: '当前登录人'
       },]
-      return [...customFields,...this.formFields.map(v => ({
+      return [...customFields, ...this.formFields.map(v => ({
         ...v,
         code: `{${v.code}}`
       }))]
@@ -190,6 +229,7 @@ export default {
     display: flex;
     flex-direction: column;
     gap: 10px;
+
     .query-map {
       display: flex;
       flex-direction: column;
@@ -197,6 +237,7 @@ export default {
       padding: 10px;
       border-radius: 10px;
       border: 1px dotted #ccc;
+
       .query-map-item {
         display: flex;
         flex-direction: column;
@@ -208,9 +249,9 @@ export default {
           align-items: center;
 
           .query-no {
-           font-size: 12px;
-           color: #000;
-           font-weight: bold;
+            font-size: 12px;
+            color: #000;
+            font-weight: bold;
           }
         }
       }