fix: 查询服务增加关联流程

src/api/flow/settingApi.js

@@ -63,8 +63,16 @@ const settingApi = {
 
     getPrint: '/setting/engine/getPrint',
     updatePrint: '/setting/engine/updatePrint',
+    getQueryServiceRelated: '/setting/engine/getQueryServiceRelated',
 
 }
+export function getQueryServiceRelated(searchInfo) {
+    return request({
+        url: settingApi.getQueryServiceRelated,
+        method: 'get',
+        params: searchInfo,
+    });
+}
 export function getPrint(searchInfo) {
     return request({
         url: settingApi.getPrint,

src/views/flow/setting/queryService.vue

@@ -2,19 +2,19 @@
   <div>
     <a-flex style="padding: 10px" wrap="wrap" gap="small">
       <a-input-search
-         style="width: 20%"
+          style="width: 20%"
           v-model:value="queryData"
           placeholder="请输入查询名称"
           enter-button
           @search="query"
       />
-    <a-button @click="add">新增查询</a-button>
+      <a-button @click="add">新增查询</a-button>
     </a-flex>
     <a-table :columns="columns" :data-source="data" bordered>
       <template #bodyCell="{ column, text, record, index }">
         <template v-if="column.dataIndex === 'operation'">
           <div class="editable-row-operations">
-            <a @click="() => edit(record)">编辑</a>
+            <a-button type="text" @click="() => edit(record)">编辑</a-button>
           </div>
         </template>
         <template v-if="column.dataIndex === 'queryType'">
@@ -25,61 +25,80 @@
     </a-table>
 
     <a-modal width="85%" title="数据查询" :open="visible" @ok="handleOk" @cancel="handleCancel">
-      <a-row class="top-row">
-        <a-col :span="2"> 查询名称</a-col>
-        <a-col :span="22">
-          <a-input v-model:value="record.queryName"></a-input>
-        </a-col>
-      </a-row>
-      <a-row class="top-row">
-        <a-col :span="2"> 查询编码</a-col>
-        <a-col :span="22">
-          <a-input v-model:value="record.queryCode"></a-input>
-        </a-col>
-      </a-row>
-      <a-row class="top-row">
-        <a-col :span="2"> 查询类型</a-col>
-        <a-col :span="22">
-          <a-radio-group v-model:value="record.queryType">
-            <a-radio-button value="0">SQL</a-radio-button>
-            <a-radio-button value="1">接口</a-radio-button>
-          </a-radio-group>
-        </a-col>
-      </a-row>
-      <a-row class="top-row">
-        <a-col v-show="record.queryType=='0'" :span="2"> 查询SQL</a-col>
-        <a-col v-show="record.queryType=='1'" :span="2"> 查询接口</a-col>
-        <a-col v-show="record.queryType=='0'" :span="22">
-          <a-textarea v-model:value="record.querySql" :rows="8"></a-textarea>
+      <a-row>
+        <a-col :span="relatedVisible==false?24:20">
+          <div class="content-main">
+            <a-row class="top-row">
+              <a-col :span="2"> 查询名称</a-col>
+              <a-col :span="22">
+                <a-input v-model:value="record.queryName"></a-input>
+              </a-col>
+            </a-row>
+            <a-row class="top-row">
+              <a-col :span="2"> 查询编码</a-col>
+              <a-col :span="22">
+                <a-input v-model:value="record.queryCode"></a-input>
+              </a-col>
+            </a-row>
+            <a-row class="top-row">
+              <a-col :span="2"> 查询类型</a-col>
+              <a-col :span="22">
+                <a-radio-group v-model:value="record.queryType">
+                  <a-radio-button value="0">SQL</a-radio-button>
+                  <a-radio-button value="1">接口</a-radio-button>
+                </a-radio-group>
+              </a-col>
+            </a-row>
+            <a-row class="top-row">
+              <a-col v-show="record.queryType=='0'" :span="2"> 查询SQL</a-col>
+              <a-col v-show="record.queryType=='1'" :span="2"> 查询接口</a-col>
+              <a-col v-show="record.queryType=='0'" :span="22">
+                <a-textarea v-model:value="record.querySql" :rows="8"></a-textarea>
+              </a-col>
+              <a-col v-show="record.queryType=='1'" :span="22">
+                <a-input v-model:value="record.querySql"
+                         placeholder="示例（全局搜索后端“/queryTest”）：/demo/engine/queryTest"></a-input>
+              </a-col>
+            </a-row>
+            <a-button class="addBtn" @click="addChild">新增子项</a-button>
+            <a-table size="small" :columns="columnsZi" :data-source="dataZi" bordered :pagination="false">
+              <template #bodyCell="{ column, text, record, index }">
+                <div v-for="(col, idx) in columnsZi.filter(el => el.key == column.key).map(el => el.key)">
+                  <a-input
+                      v-if="col == 'field' || col == 'fieldName'"
+                      style="margin: -5px 0"
+                      :value="record[col]"
+                      @change="(e) => handleChange(e.target.value, record, col)"
+                  />
+                  <a-checkbox
+                      v-if="col == 'visible' || col == 'search' || col == 'mapping'"
+                      v-model:checked="record[col]"
+                      @change="(e) => handleChange(record[col], record, col)"
+                  ></a-checkbox>
+                  <a-button v-if="col == 'action'" @click="delChild(record, index)">删除</a-button>
+                </div>
+              </template>
+            </a-table>
+          </div>
         </a-col>
-        <a-col v-show="record.queryType=='1'" :span="22">
-          <a-input v-model:value="record.querySql"  placeholder="示例（全局搜索后端“/queryTest”）：/demo/engine/queryTest" ></a-input>
+        <a-col v-show="relatedVisible" :span="4">
+          <div class="content-related">
+            <a-descriptions title="关联的流程" layout="vertical" bordered :column="2">
+              <template v-for="(n,i) in relatedData">
+                <a-descriptions-item label="流程名称">{{ n.flowName }}</a-descriptions-item>
+                <a-descriptions-item label="流程编码">{{ n.flowCode }}</a-descriptions-item>
+              </template>
+            </a-descriptions>
+            <a-empty v-if="relatedData.length==0"/>
+          </div>
         </a-col>
       </a-row>
-      <a-button class="addBtn" @click="addChild">新增子项</a-button>
-      <a-table size="small" :columns="columnsZi" :data-source="dataZi" bordered :pagination="false">
-        <template #bodyCell="{ column, text, record, index }">
-          <div v-for="(col, idx) in columnsZi.filter(el => el.key == column.key).map(el => el.key)">
-            <a-input
-                v-if="col == 'field' || col == 'fieldName'"
-                style="margin: -5px 0"
-                :value="record[col]"
-                @change="(e) => handleChange(e.target.value, record, col)"
-            />
-            <a-checkbox
-                v-if="col == 'visible' || col == 'search' || col == 'mapping'"
-                v-model:checked="record[col]"
-                @change="(e) => handleChange(record[col], record, col)"
-            ></a-checkbox>
-            <a-button v-if="col == 'action'" @click="delChild(record, index)">删除</a-button>
-          </div>
-        </template>
-      </a-table>
+
     </a-modal>
   </div>
 </template>
 <script>
-import {getQueryMainList, updateQueryMain, istQueryMain} from '/@/api/flow/settingApi';
+import {getQueryMainList, updateQueryMain, istQueryMain, getQueryServiceRelated} from '/@/api/flow/settingApi';
 
 const columnsZi = [
   {
@@ -129,9 +148,9 @@ const columns = [
     width: '20%',
   },
   {
-    title: '查询服务类型',
+    title: '类型',
     dataIndex: 'queryType',
-    width: '20%',
+    width: '8%',
   },
   {
     title: '查询服务SQL/接口',
@@ -146,7 +165,7 @@ const columns = [
   {
     title: '创建时间',
     dataIndex: 'createTime',
-    width: '10%',
+    width: '8%',
   },
   {
     title: '操作',
@@ -164,7 +183,9 @@ export default {
       columnsZi,
       record: {},
       visible: false,
-      queryData:'',
+      queryData: '',
+      relatedData: [],
+      relatedVisible: true,
     };
   },
   mounted() {
@@ -181,11 +202,13 @@ export default {
       });
     },
     query() {
-      getQueryMainList({queryName:this.queryData}).then((res) => {
+      getQueryMainList({queryName: this.queryData}).then((res) => {
         this.data = res.data;
       });
     },
     add() {
+      this.relatedVisible = false
+      this.relatedData = []
       this.dataZi = [];
       this.visible = true;
       this.record = {
@@ -213,10 +236,14 @@ export default {
       });
     },
     edit(record) {
+      this.relatedVisible = true
       this.dataZi = [];
       this.visible = true;
       this.record = record;
       this.dataZi = record.queryColumnList;
+      getQueryServiceRelated({queryId: this.record.id}).then((res) => {
+        this.relatedData = res.data.data
+      })
     },
     onChangeCheckbox(e) {
       console.log(e);
@@ -257,4 +284,26 @@ export default {
 .addBtn {
   margin: 10px;
 }
+
+.content-main {
+  height: calc(100vh - 300px);
+  overflow-y: auto;
+  border: 1px solid #ccc; /* 添加灰色边框 */
+  border-radius: 8px; /* 添加圆角边框 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  background-color: #fff; /* 设置背景颜色 */
+  padding: 6px; /* 添加内边距 */
+  margin: 6px;
+}
+
+.content-related {
+  height: calc(100vh - 300px);
+  overflow-y: auto;
+  border: 1px solid #ccc; /* 添加灰色边框 */
+  border-radius: 8px; /* 添加圆角边框 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  background-color: #fff; /* 设置背景颜色 */
+  padding: 6px; /* 添加内边距 */
+  margin: 6px;
+}
 </style>