修改消息通知中修改消息规则时角色和模板表格数据加载，开启通知开关逻辑修改

src/views/sopm/sop/NotificationRules.vue

@@ -18,10 +18,11 @@
       <p
         >启用通知：
         <el-switch
-          v-model="status"
+          v-model="enableNotifications"
           size="small"
           :active-value="1"
           :inactive-value="0"
+          @update:modelValue="(val) => handleNotificationsChange(enableNotifications, val)"
         />
       </p>
       <section class="noticebtn">
@@ -48,7 +49,7 @@
       <el-table
         v-loading="loading"
         border
-        :data="filteredTableData"
+        :data="noticeList"
         @selection-change="handleSelectionChange"
         style="width: 100%"
       >
@@ -81,6 +82,7 @@
 
 <script setup lang="ts">
 import { Edit } from '@element-plus/icons-vue'
+import * as SopApi from '@/api/sop'
 import * as NotificationRules from '@/api/sop/notificationRules'
 import { getStrDictOptions } from '@/utils/dict'
 import {deleteNotifyConfigList, getNotifyConfigPage} from "@/api/sop/notificationRules";
@@ -99,15 +101,18 @@ const notifyParams=reactive({
   pageSize: -1,
   sopId:route.query.id
 })
-const status = ref(1) // 默认显示启用的
+const enableNotifications = ref(1) // 默认显示启用的
 const actionNoticeList=ref([])
+// 添加初始化标志位
+const isInitialized = ref(false)
 
-
-const filteredTableData = computed(() => {
-  return noticeList.value.filter(item => item.status == status.value)
-})
+// const filteredTableData = computed(() => {
+//   return noticeList.value.filter(item => item.status == status.value)
+// })
 
 onMounted(()=>{
+  // 数据加载完成后
+  isInitialized.value = true
   getNotifyData()
   getActionNoticeData()
 })
@@ -197,6 +202,38 @@ const getNotifyData = async () => {
   }
 }
 
+// 是否开启通知
+const handleNotificationsChange = async (enableNotifications, val) => {
+  if (!isInitialized.value) return
+
+  const originalValue = enableNotifications.value
+
+  try {
+    // const data = {
+    //   ...row,
+    //   enableNotifications: val
+    // }
+    const data = {
+      id: route.query.id,
+      enableNotifications: val
+    }
+    console.log(data,'是什么数据')
+    await SopApi.updateSopEnableNotification(data)
+    ElMessage.success(val == 1 ? '已开启' : '已关闭')
+
+    // 成功后更新值（防止 UI 不更新）
+    enableNotifications.value= val
+  } catch (err) {
+    // 接口失败，回滚原始值
+    enableNotifications.value = originalValue
+
+    // 强制刷新 UI
+    await nextTick()
+
+    // 提示错误
+    // ElMessage.error('状态更新失败，请重试')
+  }
+}
 
 /** 添加/修改/查看操作 */
 const openForm = ({type, id, rowId, workstationId,}: { type: string

src/views/sopm/sop/NotificationUpdate.vue

@@ -95,9 +95,8 @@
       </section>
       <section>
         <span>通知区域：</span>
-
         <el-tree-select
-          style="width: 220px"
+          style="width: 260px"
           v-model="noticeData.workstationId"
           :data="workstationOptions"
           :props="{ label: 'label', children: 'children', value: 'id' }"
@@ -120,7 +119,7 @@
           <el-radio label="showNotice" :value="1">仅显示通知</el-radio>
         </el-radio-group>
       </p>
-      <el-table :data="filteredTableData" border style="width: 80%">
+      <el-table v-loading="loading" :data="filteredTableData" border style="width: 80%">
         <el-table-column prop="name" label="角色" width="180" v-if="route.query.type == 'create'" />
         <el-table-column prop="roleName" label="角色" width="180" v-else />
         <el-table-column label="是否通知" align="center" width="100">
@@ -157,13 +156,72 @@
 
   <!--  选择模板-->
   <el-dialog v-model="templateDialogVisible" title="请选择通知模板" width="80%" center>
+    <!-- 搜索工作栏 -->
+    <div class="templateSearch">
+      <el-form
+        class="-mb-15px"
+        :model="templateQueryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="模板名称" prop="name">
+          <el-input
+            v-model="templateQueryParams.name"
+            placeholder="请输入模板名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="模板编号" prop="code">
+          <el-input
+            v-model="templateQueryParams.code"
+            placeholder="请输入模版编码"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="templateQueryParams.status"
+            placeholder="请选择开启状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          <el-date-picker
+            v-model="templateQueryParams.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
     <el-table
       v-loading="loading"
       :data="templateList"
       @current-change="handleCurrentChange"
       highlight-current-row
-      :row-class-name="(row) => (row.code === selectedTemplate?.code ? 'selected-row' : '')"
-      style="width: 100%"
+      :row-class-name="(row) => (row.code == selectedTemplate?.code ? 'selected-row' : '')"
+      style="width: 100%;cursor: pointer;"
     >
       <!-- 单选通过点击行来实现 -->
       <el-table-column label="模板编码" prop="code" align="center" width="160" fixed />
@@ -187,8 +245,22 @@
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
     </el-table>
-
+    <!-- 分页 -->
+    <Pagination
+      style="width: 100%;text-align:right;"
+      :total="total"
+      v-model:page="templateQueryParams.pageNo"
+      v-model:limit="templateQueryParams.pageSize"
+      @pagination="getTemplateData"
+    />
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="templateDialogVisible = false">取消</el-button>
@@ -206,6 +278,7 @@ import { getNotifyTemplatePage } from '@/api/system/notify/template'
 import { handleTree } from '@/utils/tree'
 import { listMarsDept } from '@/api/system/marsdept'
 import { ref } from 'vue'
+import {dateFormatter} from "@/utils/formatTime";
 
 const router = useRouter()
 const route = useRoute()
@@ -223,10 +296,10 @@ const timeParts = reactive({
   minute: 1,
   second: 0
 })
-const templateQueryParams = reactive({
-  pageNo: 1,
-  pageSize: 10
-})
+// const templateQueryParams = reactive({
+//   pageNo: 1,
+//   pageSize: 10
+// })
 // 角色列表参数
 const roleQueryParams = reactive({
   pageNo: 1,
@@ -241,6 +314,16 @@ const loading = ref(false)
 const templateList = ref([])
 const selectedTemplate = ref(null) // 当前选中的模板
 const currentTargetRow = ref(null) // 当前要修改的角色行
+const total = ref(0) // 列表的总页数
+const templateQueryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  code: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
 
 const filteredTableData = computed(() => {
   if (status.value == 0) return tableData.value
@@ -307,66 +390,85 @@ const getWorkArea = async () => {
   workstationOptions.value = [{ id: 0, label: '全部', children: [] }, ...filteredTree]
 }
 
+// 通知角色模板中表格数据拼接
 const getTableData = async () => {
   if (route.query.type == 'create') {
+    // 创建逻辑保持不变
+    loading.value = true
     const [roleRes, notifyRes] = await Promise.all([
       getRolePage(roleQueryParams),
       NotificationRules.getNotifyConfigDetailPage()
     ])
-    // ✅ 这里改成 list 才对
     const roles = roleRes?.list || []
-
     const notifyMap = new Map()
     ;(notifyRes.list || []).forEach((item) => {
       notifyMap.set(item.roleId, item)
     })
-    console.log(roleRes, notifyRes, '数据拿到了吗')
-    // 合并数据
+    loading.value = false
+
     tableData.value = roles.map((role) => {
       const notify = notifyMap.get(role.id)
       return {
         id: role.id,
         name: role.name,
-        status: 0,
-        isClient: 0,
-        notifyTemplateName: notify ? notify.notifyTemplateName : '',
+        status: notify?.status ?? 0,
+        isClient: notify?.isClient ?? 0,
+        notifyTemplateName: notify?.notifyTemplateName || '',
         notifyConfigId: notify?.id ?? null
       }
     })
-  } else if (route.query.type == 'update') {
-    const list = await NotificationRules.selectNotifyConfigById(route.query.rowId)
+  } else  if (route.query.type === 'update') {
+    loading.value = true
 
-    // 合并数据
-    tableData.value = list.notifyConfigDetailRespVOList
+    const [roleRes, notifyRes] = await Promise.all([
+      getRolePage(roleQueryParams),
+      NotificationRules.selectNotifyConfigById(route.query.rowId)
+    ])
 
-    Object.assign(noticeData, list)
-    // 把字符串形式的 rule 转换为数字
+    const roles = roleRes?.list || []
+    const notifyList = notifyRes.notifyConfigDetailRespVOList || []
+
+    Object.assign(noticeData, notifyRes)
     noticeData.rule = Number(noticeData.rule)
-    // ✅ 然后解析时间
     if (noticeData.notifyTimeType === 0 || noticeData.notifyTimeType === 2) {
       parseNotifyTimeToParts(noticeData.notifyTime)
     }
-    console.log(noticeData, '我走这里了')
-    console.log(tableData.value, '✅ 表格数据是否组合成功')
+
+    const notifyMap = new Map()
+    notifyList.forEach((item) => {
+      notifyMap.set(item.roleId, item)
+    })
+
+    tableData.value = roles.map((role) => {
+      const notify = notifyMap.get(role.id)
+      return {
+        id: role.id,
+        roleName: role.name, // ✅ 修复字段
+        status: notify?.status ?? 0,
+        isClient: notify?.isClient ?? 0,
+        notifyTemplateName: notify?.notifyTemplateName || '',
+        notifyConfigId: notify?.id ?? null
+      }
+    })
+
+    loading.value = false
   }
 }
+
+// 时间处理
 const parseNotifyTimeToParts = (totalSeconds: number) => {
   timeParts.day = Math.floor(totalSeconds / 86400)
   timeParts.hour = Math.floor((totalSeconds % 86400) / 3600)
   timeParts.minute = Math.floor((totalSeconds % 3600) / 60)
   timeParts.second = totalSeconds % 60
 }
+
+// 选择或更换模板
 const changeTemplate = async (row) => {
   // 这里你可以打开弹窗、弹出菜单或其他方式让用户选模板
   templateDialogVisible.value = true
   currentTargetRow.value = row
-  try {
-    const templateData = await getNotifyTemplatePage(templateQueryParams)
-    templateList.value = templateData.list
-    console.log(templateData, '有什么数据', templateList.value)
-  } finally {
-    loading.value = false
-  }
+  await getTemplateData()
 }
 // 新增确认
 const submit = async () => {
@@ -417,7 +519,8 @@ const submit = async () => {
     // message.error('保存失败')
   }
 }
-// 修改确认呢
+
+// 修改确认
 const submitUpdate = async () => {
   if (noticeData.notifyTimeType == 0 || noticeData.notifyTimeType == 2) {
     const totalSeconds =
@@ -426,29 +529,35 @@ const submitUpdate = async () => {
   } else {
     noticeData.notifyTime = 0
   }
-  // ✅ Step 1: 遍历 table 中的数据（filteredTableData 是 computed，所以要加 .value）
-  // const notifyConfigDetailRespVOList = filteredTableData.value.map((item) => ({
-  //   id: item.notifyConfigId ?? null, // 编辑时的 ID，新增为 null
-  //   roleId: item.id, // 角色 ID
-  //   status: item.status, // 是否通知
-  //   isClient: item.isClient, // 是否仅通知当事人
-  //   notifyTemplateCode: item.notifyTemplateCode, // ✅ 这里已经处理好了
-  //   configId: item.notifyConfigId ?? null // 通知配置 ID
-  // }))
-
-
-  // ✅ 合并表单部分数据 noticeData（例如通知名称、类型等）
+
+  // ✅ 包含主表信息 + 详情数组（tableData.value）
   const payload = {
     ...noticeData,
-    // notifyConfigDetailRespVOList
+    notifyConfigDetailList: tableData.value.map(item => ({
+      roleId: item.id,
+      status: item.status,
+      isClient: item.isClient,
+      notifyTemplateName: item.notifyTemplateName,
+      id: item.notifyConfigId // 有id则为修改，无id则为新增
+    }))
   }
-  const data=await NotificationRules.updateNotifyConfig(payload)
-  if(data){
+  const data = await NotificationRules.updateNotifyConfig(payload)
+  if (data) {
     ElMessage.success('更新成功')
   }
 }
 
-// 模板选中后确认
+// 获取模板数据
+const getTemplateData=async()=>{
+  try {
+    const templateData = await getNotifyTemplatePage(templateQueryParams)
+    templateList.value = templateData.list
+    total.value = templateData.total
+    console.log(templateData, '有什么数据', templateList.value)
+  } finally {
+    loading.value = false
+  }
+}
 // 表格中点击行时触发
 const handleCurrentChange = (row) => {
   selectedTemplate.value = row
@@ -456,16 +565,25 @@ const handleCurrentChange = (row) => {
 // 弹框确认
 const templateconfirm = async () => {
   if (!selectedTemplate.value || !currentTargetRow.value) return
-
   // ✅ 存 name（用于页面显示）
   currentTargetRow.value.notifyTemplateName = selectedTemplate.value.name
-
   // ✅ 存 code（用于接口提交）
   currentTargetRow.value.notifyTemplateCode = selectedTemplate.value.code
-
   templateDialogVisible.value = false
 }
 
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  templateQueryParams.pageNo = 1
+  getTemplateData()
+}
+
+/** 重置按钮操作 */
+const resetQuery =() => {
+  queryFormRef.value.resetFields()
+   handleQuery()
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -484,6 +602,14 @@ const templateconfirm = async () => {
   section {
     width: 100%;
     height: 49px;
+    display: flex;
+    span{
+     display: block;
+      padding: 0 5px 0 0;
+      width:120px;
+      line-height: 25px;
+      text-align:right;
+    }
   }
 }
 
@@ -502,6 +628,22 @@ const templateconfirm = async () => {
 }
 
 .dialog-footer {
-  text-align: right;
+  width: 100%;
+  text-align:right;
+}
+/* 鼠标悬停时变小手 */
+.el-table__body tr:hover {
+  cursor: pointer;
+}
+
+/* 选中行的背景设为蓝色，文字颜色可选白色以增强对比 */
+.el-table__body .selected-row {
+  background-color: #e6f7ff !important; /* 浅蓝色 */
+  /* background-color: #409EFF !important; */ /* 如果你要主色蓝，可以用这个 */
+}
+.templateSearch{
+  width: 100%;
+  height: 100%;
+  margin: 20px auto 30px;
 }
 </style>