fix: 规则表单修改交互

src/components/RealView/index.less

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  top: 0;
+  top: -24px;
   left: 0;
   z-index: 99;
   background-color: #f7f7f9;

src/pages/Iot/rule/forwardRule.vue

@@ -6,33 +6,23 @@
 />
 
 <a-card style="margin-top: 20px;" >
-  <a-row justify="space-between"   >
-    <a-col :span="18" >
-
-    </a-col>
-    <a-col>
-      <a-space>
-        <a-button  type="primary" @click="search">搜索</a-button>
-        <a-button type="primary" @click="openModal('add', {})" >创建规则</a-button>
-      </a-space>
-
-    </a-col>
-  </a-row>
   <table-pro
     style="margin-top: 20px;"
     :columns="columns"
     :service="RuleController.pageForward"
     :serviceParams="queryParams"
+    @add="openModal('add', {})"
+    ref="tableProDom"
   >
     <template #search >
       <a-row style="width: 100%"  :gutter="[8,8]" >
-        <a-col :xs="20" :md="12" :xl="5">
+        <a-col :xs="20" :md="12" :xl="4">
           <a-input  allowClear v-model:value="queryParams.ruleId" placeholder="请输入规则id"></a-input>
         </a-col>
-        <a-col :xs="20" :md="12" :xl="5">
+        <a-col :xs="20" :md="12" :xl="4">
           <a-input allowClear v-model:value="queryParams.ruleLabel" placeholder="请输入规则名称" ></a-input>
         </a-col>
-        <a-col :xs="20" :md="12" :xl="5" >
+        <a-col :xs="20" :md="12" :xl="4" >
               <a-select allowClear style="width: 100% !important;" v-model:value="queryParams.subjectResource"    placeholder="选择数据来源">
                 <a-select-option
                   v-for="item in subjectResourceList"
@@ -43,7 +33,7 @@
                 </a-select-option>
               </a-select>
         </a-col>
-        <a-col :xs="20" :md="12" :xl="5" >
+        <a-col :xs="20" :md="12" :xl="4" >
               <a-select allowClear style="width: 100% !important;" v-model:value="queryParams.subjectEvent"  placeholder="选择触发事件">
                 <a-select-option
                   v-for="item in Array.from(RuleController.SubjectEventMap, ([key, value]) => ({ ...value, value: value.key }))"
@@ -54,7 +44,7 @@
                 </a-select-option>
               </a-select>
         </a-col>
-        <a-col :xs="20" :md="12" :xl="4" >
+        <a-col :xs="20" :md="12" :xl="3" >
               <a-select allowClear style="width: 100% !important;" v-model:value="queryParams.status" >
                 <a-select-option
                   v-for="item in statusList"
@@ -65,6 +55,9 @@
                 </a-select-option>
               </a-select>
         </a-col>
+        <a-col :xs="20" :md="12" :xl="3" >
+          <a-button type="primary" @click="search">搜索</a-button>
+        </a-col>
       </a-row>
     </template>
     <template #render="{column, record}"  >
@@ -102,69 +95,17 @@
       </template>
     </template>
   </table-pro>
-  <!-- <a-table
-    style="margin-top: 20px;"
-    :columns="columns"
-    :data-source="state.dataSource"
-    :loading="state.loading"
-    :pagination="queryParams"
-    @change="changePage"
-  >
-    <template #bodyCell="{column, record}" >
-      <template v-if="column.key === 'id'" >
-          <a  @click="openDetailModal(record.id)">{{record.id}}</a>
-        </template>
-      <template v-if="column.key === 'subjectResource'" >
-        <a-tag >{{RuleController.SubjectResourceMap.get(record.subjectResource)?.name}}</a-tag>
-      </template>
-      <template v-if="column.key === 'subjectEvent'" >
-        <a-tag >{{RuleController.SubjectEventMap.get(record.subjectEvent)?.name}}</a-tag>
-      </template>
-      <template v-if="column.key === 'status'" >
-        <a-switch
-          v-model:checked="record.status"
-          checked-children="运行中"
-          un-checked-children="已停止"
-          @click="changeStatus(record)"
-        />
-      </template>
-      <template v-if="column.key === 'action'" >
-        <a-space>
-              <a @click="openModalDebug(record.id)">调试</a>
-              <a @click="openDetailModal(record.id)">详情</a>
-              <a @click="openModal('update', record)">编辑</a>
-              <a-popconfirm
-                  title="确实要删除吗？"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="delForwardRule(record.id)"
-                >
-                  <a>删除</a>
-              </a-popconfirm>
-        </a-space>
-      </template>
-    </template>
-  </a-table> -->
 </a-card>
 
-<!-- 创建规则 -->
-<modal-pro
-  width="1000px"
-  label="创建规则"
+<RealView
   :open="state.visible"
+  title="创建规则"
   @cancel="state.visible = false"
-  @ok="ok('visible')"
+  @ok="ok"
 >
-    <a-steps :current="state.stepCount">
-        <a-step title="设置转发数据" ></a-step>
-        <a-step title="设置转发目标"  />
-    </a-steps>
-    <div style="margin: 20px 0px;" >
-      <div v-if="state.stepCount === 0" >针对部分类型数据提供的快速配置，将引导您完成简单的业务设置。您也可以直接编辑过滤语句，实现更复杂的查询要求</div>
-      <div v-else-if="state.stepCount === 1" >您可以设置将数据转发至华为云其他服务或私有服务器。</div>
-    </div>
-    <div v-if="state.stepCount == 0">
-      <a-form :label-col="{span: 4 }" :wrapper-col="{ span: 14 }" style="height: 300px; overflow-y: auto;">
+  <a-card title="设置转发数据" >
+    <div style="margin-bottom: 20px;" >针对部分类型数据提供的快速配置，将引导您完成简单的业务设置。您也可以直接编辑过滤语句，实现更复杂的查询要求</div>
+    <a-form :label-col="{span: 4 }" :wrapper-col="{ span: 14 }" style="height: 300px; overflow-y: auto;">
         <a-form-item  label="规则名称" v-bind="validateInfosStep1.ruleLabel" >
           <a-input v-model:value="forwardRStateStep1.ruleLabel" ></a-input>
         </a-form-item>
@@ -205,16 +146,11 @@
             :auto-size="{ minRows: 2, maxRows: 5 }"
           />
         </a-form-item>
-      </a-form>
-    </div>
-    <div v-if="state.stepCount == 1" >
-      <a-row>
-        <a-col>
-          <a-space>
-            <a-button type="primary" @click="addForwardState">添加</a-button>
-          </a-space>
-        </a-col>
-      </a-row>
+    </a-form>
+  </a-card>
+  <a-card title="设置转发目标" style="margin-top: 20px;" >
+    <template #extra > <a-button type="primary" @click="addForwardState">添加</a-button></template>
+    <div>您可以设置将数据转发至华为云其他服务或私有服务器。</div>
       <a-table
         style="margin-top: 20px;"
         v-if="forwardRuleTargets.length"
@@ -232,19 +168,19 @@
         </template>
       </a-table>
       <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
-    </div>
-</modal-pro>
+  </a-card>
+</RealView>
 
 <modal-pro
   style="width: 800px"
   label="转发目标"
   :open="state.targetVisible"
-  :ok-text=" state.stepCount === 0 ? '下一步' : '确定'"
+  ok-text="确定"
   @cancel="closeModal"
-  @ok="ok('targetVisible')"
+  @ok="ok"
 >
     <a-form :label-col="{span: 4 }" :wrapper-col="{ span: 14 }" style="height: 400px; overflow-y: auto;">
-      <a-form-item label="转发目标">
+    <a-form-item label="转发目标">
         <a-select
         allowClear
         style="width: 100%;"
@@ -467,6 +403,7 @@
 >
   <TestDialog ref="testDialogRef"/>
 </modal-pro>
+
 </template>
 
 <script lang='ts' setup >
@@ -478,6 +415,7 @@ import TestDialog from './components/testDialog.vue'
 import StatisticsTemplate from '@/components/StatisticsTemplate/index.vue'
 import { SubjectEventEnum, SubjectResourceEnum } from '@/enum/common'
 import { useId } from '@/hooks'
+import { RealView } from '@/components/RealView/index'
 
 const columns = [
   {
@@ -605,7 +543,7 @@ const detailColumn = reactive({
 
 const useForm = Form.useForm
 
-const formProo = ref('')
+const tableProDom = ref('')
 
 const testDialogRef = ref('')
 
@@ -675,8 +613,6 @@ const initForwardState = {
   handshakeTimeout: 10000
 }
 
-const forwardR1Ref = ref()
-
 const forwardState = reactive(JSON.parse(JSON.stringify(initForwardState)))
 
 const forwardRStateStep1 = reactive({
@@ -744,11 +680,6 @@ const updateForwardRuleTargets = (record, index) => {
   resetFields({ ...record })
 }
 
-const changePage = ({ current }) => {
-  queryParams.page = current
-  getForwardList()
-}
-
 const openDetailModal = async (id: string) => {
   state.detailVisible = true
   const { data } = await RuleController.forwardById(id)
@@ -816,8 +747,6 @@ const openModal = async (opraState: 'add' | 'update', record) => {
       item.otherProperties = _otherProperties
     })
 
-    console.log('_forwardRuleTargets:', _forwardRuleTargets)
-
     forwardRuleTargets = reactive(JSON.parse(JSON.stringify(_forwardRuleTargets)))
   }
 
@@ -831,7 +760,7 @@ const addRequestHeaders = (key: 'requestHeaders' | 'otherProperties') => forward
 
 const search = (record) => {
   queryParams = { ...queryParams, ...record }
-  getForwardList()
+  tableProDom.value.reload()
 }
 
 const addForwardState = () => {
@@ -855,19 +784,19 @@ const getCount = async () => {
 }
 
 /** 提交转发规则 */
-const ok = async (visibleKey: string) => {
-  if (state.stepCount === 1) {
-    if (state.targetVisible) {
-      validate().then(() => {
-        if (typeof state.updateIndex === 'number') {
-          forwardRuleTargets.splice(state.updateIndex, 1, { ...forwardState })
-        } else {
-          forwardRuleTargets.push({ ...forwardState })
-          resetFields(JSON.parse(JSON.stringify(initForwardState)))
-        }
-        state.targetVisible = false
-      })
-    } else {
+const ok = async () => {
+  if (state.targetVisible) {
+    validate().then(() => {
+      if (typeof state.updateIndex === 'number') {
+        forwardRuleTargets.splice(state.updateIndex, 1, { ...forwardState })
+      } else {
+        forwardRuleTargets.push({ ...forwardState })
+        resetFields(JSON.parse(JSON.stringify(initForwardState)))
+      }
+      state.targetVisible = false
+    }).catch(e => e)
+  } else {
+    validateStep1().then(async (r) => {
       const _otherProperties: Record<string, string> = {}
 
       forwardRuleTargets.forEach(item => {
@@ -896,16 +825,8 @@ const ok = async (visibleKey: string) => {
 
       state.visible = false
       closeModal()
-      getForwardList()
-    }
-  }
-
-  if (state.stepCount === 0) {
-    validateStep1().then((r) => {
-      if (r) {
-        state.stepCount = 1
-      }
-    })
+      tableProDom.value.reload()
+    }).catch((e) => {})
   }
 }
 
@@ -921,19 +842,10 @@ const dispatchDebug = async () => {
 
 const delForwardRule = async (id: string) => {
   await RuleController.delForwardRule(id)
-  getForwardList()
-}
-
-const getForwardList = async () => {
-  state.loading = true
-  const { data, sum } = await RuleController.pageForward(queryParams)
-  state.loading = false
-  state.dataSource = data
-  queryParams.total = sum
+  tableProDom.value.reload()
 }
 
 onMounted(() => {
-  getForwardList()
   getCount()
 })
 </script>

src/pages/Iot/rule/linkRules.vue

@@ -4,67 +4,57 @@
     :list="state.linkCount"
   />
   <a-card style="margin-top: 20px;" >
-    <a-row justify="space-between" >
-      <a-col :span="12" >
-        <a-space>
-          <a-input allowClear  placeholder="请填写规则名称" v-model:value="queryParamsState.ruleLabel" ></a-input>
-          <a-button type="primary" @click="getLinkPage()" >搜索</a-button>
-        </a-space>
-      </a-col>
-      <a-col>
-        <a-space>
-          <a-button type="primary" @click="openModal('add', {})" >创建规则</a-button>
-        </a-space>
-      </a-col>
-    </a-row>
-    <a-table
+    <table-pro
       style="margin-top: 20px;"
       :columns="columns"
-      :data-source="state.dataSource"
-      :loading="state.loading"
-      :pagination="queryParamsState"
-      @change="changePage"
+      :service="RuleController.pageLink"
+      :serviceParams="queryParamsState"
+      ref="tableProDom"
+      @add="openModal('add', {})"
     >
-    <template #bodyCell="{column, record}" >
-      <template v-if="column.key === 'id'" >
-        <a @click="openModal('preview', record)" >{{record.id}}</a>
-        </template>
-      <template v-if="column.key === 'status'" >
-        <a-switch
-          v-model:checked="record.status"
-          checked-children="运行中"
-          un-checked-children="已停止"
-          @click="changeStatus(record)"
-        />
-      </template>
-      <template  v-if="column.key === 'action'" >
+      <template #search >
         <a-space>
-          <a @click="openModalDebug(record.id)" >调试</a>
-          <a @click="openModal('preview', record)" >详情</a>
-          <a @click="openModal('update', record)" >编辑</a>
-          <a-popconfirm
-                  title="确实要删除吗？"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="delLinkRule(record.id)"
-                >
-                  <a>删除</a>
-                </a-popconfirm>
+          <a-input allowClear  placeholder="请填写规则名称" v-model:value="queryParamsState.ruleLabel" ></a-input>
+          <a-button type="primary" @click="search" >搜索</a-button>
         </a-space>
       </template>
-    </template>
-    </a-table>
+      <template #render="{column, record}" >
+        <template v-if="column.key === 'id'" >
+          <a @click="openModal('preview', record)" >{{record.id}}</a>
+          </template>
+        <template v-if="column.key === 'status'" >
+          <a-switch
+            v-model:checked="record.status"
+            checked-children="运行中"
+            un-checked-children="已停止"
+            @click="changeStatus(record)"
+          />
+        </template>
+        <template  v-if="column.key === 'action'" >
+          <a-space>
+            <a @click="openModalDebug(record.id)" >调试</a>
+            <a @click="openModal('preview', record)" >详情</a>
+            <a @click="openModal('update', record)" >编辑</a>
+            <a-popconfirm
+              title="确实要删除吗？"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="delLinkRule(record.id)"
+            >
+              <a>删除</a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </table-pro>
   </a-card>
 
-  <modal-pro
-    style="width: 1000px;"
-    :label=" state.opraState !== 'preview' ? '创建联动规则' : '查看详情'"
+  <RealView
+    :title="state.opraState !== 'preview' ? '创建联动规则' : '查看详情'"
     :open="state.visible"
-    destroyOnClose
     @cancel="state.visible = false"
     @ok="ok"
   >
-    <div style="height: 500px;overflow: hidden; overflow-y: auto;">
       <a-card
         title="基本信息"
         :bordered="false"
@@ -88,7 +78,9 @@
       <a-card
         title="触发条件"
         :bordered="false"
+        style="margin-top: 20px;"
       >
+      <template #extra > <a-button  v-if="state.opraState !== 'preview'" type="primary" @click="openFormVisible('conditions')">添加条件</a-button></template>
         <a-row class="condition" >
           <a-col span="12" >
             需满足
@@ -112,7 +104,6 @@
             以下条件：
           </a-col>
           <a-col class="df" span="12" >
-            <a-button  v-if="state.opraState !== 'preview'" type="primary" @click="openFormVisible('conditions')">添加条件</a-button>
           </a-col>
           <a-col :span="24"  v-if="deviceDataSource.length" >
             <a-table
@@ -180,9 +171,13 @@
       <a-card
         title="执行动作"
         :bordered="false"
+        style="margin-top: 20px;"
       >
+      <template #extra >
+        <a-button v-if="state.opraState !== 'preview'" type="primary" @click="openFormVisible('actions')" >添加动作</a-button>
+      </template>
       <a-row  style="width: 100%;" >
-        <a-col :span="24" class="df" ><a-button v-if="state.opraState !== 'preview'" type="primary" @click="openFormVisible('actions')" >添加动作</a-button></a-col>
+        <a-col :span="24" class="df" ></a-col>
         <a-row style="width: 100%;" v-if="bodyParamsState.actions.length">
           <a-col :span="24"  v-if="deviceCmdsource.length" >
             <a-table
@@ -272,8 +267,7 @@
         <a-col  class="content"  v-if="bodyParamsState.actions.length === 0"   >尚未设置动作</a-col>
       </a-row>
       </a-card>
-    </div>
-  </modal-pro>
+  </RealView>
 
   <modal-pro
     label="选择"
@@ -287,7 +281,7 @@
       }
     }"
     style="width: 700px;"
-    zIndex="1001"
+    zIndex="1000"
   >
     <div  style="width: 100%;" v-if="state.opraModel === 'conditions'" >
       <a-row :gutter="[8, 8]" style="width: 100%;" >
@@ -683,19 +677,19 @@
     </div>
   </modal-pro>
 
-  <modal-pro
-    style="width: 900px;height: 500px;"
-    label="选择设备"
-    :open="state.deviceModalVisible"
-    @cancel="state.deviceModalVisible = false"
-    @ok="selectDevice"
-    destroyOnClose
+  <a-drawer
+    title="选择设备"
+    v-model:open="state.deviceModalVisible"
+    placement="right"
     zIndex="1003"
+    size="large"
   >
-    <SelectDevice
-      ref="selectDeviceRef"
-    />
-  </modal-pro>
+    <template #extra>
+      <a-button style="margin-right: 8px" @click="state.deviceModalVisible = false">取消</a-button>
+      <a-button type="primary" @click="selectDevice">确定</a-button>
+    </template>
+    <SelectDevice ref="selectDeviceRef" />
+  </a-drawer>
 
   <modal-pro
     label="调试"
@@ -718,7 +712,7 @@ import { useId, useSchedulerOnce } from '@/hooks'
 import { Form } from 'ant-design-vue'
 import TestDialog from './components/testDialog.vue'
 import StatisticsTemplate from '@/components/StatisticsTemplate/index.vue'
-
+import { RealView } from '@/components/RealView/index'
 const {
   proxy: { $forceUpdate }
 }: any = getCurrentInstance()
@@ -866,12 +860,9 @@ const operatorList = [
 
 const selectDeviceRef = ref('')
 
-const formProRef = ref('')
+const tableProDom = ref('')
 
 const queryParamsState = reactive({
-  page: 1,
-  pageSize: 10,
-  total: 0,
   ruleLabel: ''
 })
 
@@ -1091,13 +1082,12 @@ const ok = async () => {
 
     state.opraState === 'add' ? await RuleController.addLink({ ...bodyParamsState }) : await RuleController.updateLink({ ...bodyParamsState })
     state.visible = false
-    getLinkPage()
   })
 }
 
 const delLinkRule = async (id: string) => {
   await RuleController.delLink(id)
-  getLinkPage()
+  search()
 }
 
 // 选择设备
@@ -1113,11 +1103,6 @@ const selectDevice = () => {
   }
 }
 
-const changePage = ({ current }) => {
-  queryParamsState.page = current
-  getLinkPage()
-}
-
 // 打开选择设备弹窗
 const openDeviceModal = (key: 'conditions' | 'actions') => {
   state.deviceModalVisible = true
@@ -1190,16 +1175,11 @@ const getLinkPageById = async (id: string) => {
   bodyParamsState.id = data.id
 }
 
-const getLinkPage = async () => {
-  state.loading = true
-  const { data, sum } = await RuleController.pageLink(queryParamsState)
-  state.dataSource = data
-  queryParamsState.total = sum
-  state.loading = false
+const search = () => {
+  tableProDom.value.reload()
 }
 
 onMounted(() => {
-  getLinkPage()
   getModelList()
   getCount()
 })