迭代七信息发布列表+查看界面及明细界面+编辑界面

src/views/informationissue/informationApproval.vue

@@ -0,0 +1,309 @@
+<template>
+  <div v-show="!sendDetailState.show">
+    <div class="common-dialog">
+      <div class="common-dialog-content">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="information-approval">
+              <div class="common-dialog-title-box">
+                <h3 class="common-dialog-title">信息详情</h3>
+              </div>
+              <div class="common-dialog-box">
+                <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+                  <h4>信息内容</h4>
+                  <div class="box1">
+                    <el-form-item label="标题：" prop="title">
+                      <el-input v-model="formData.title" placeholder="请输入标题" style="width: 468px !important" />
+                    </el-form-item>
+
+                    <el-form-item label="发布单位：" prop="publishUnit">
+                      <el-input v-model="formData.publishUnit" placeholder="请输入发布单位" style="width: 468px !important" />
+                    </el-form-item>
+
+                    <el-form-item label="信息模板：" prop="templateType">
+                      <el-radio-group v-model="formData.templateType">
+                        <el-radio label="预设模板">预设模板</el-radio>
+                        <el-radio label="自定义模板">自定义模板</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item v-if="formData.templateType === '预设模板'" label="预设模板：" prop="presetTemplate">
+                      <el-select v-model="selectedPresetTemplate" placeholder="请选择预设模板" style="width: 300px !important">
+                        <el-option v-for="option in presetTemplates" :key="option.value" :label="option.label" :value="option.value"></el-option>
+                      </el-select>
+                      <el-text class="common-btn-text-primary" @click="showExample">样例</el-text>
+                    </el-form-item>
+                    <el-form-item v-if="formData.templateType === '自定义模板'" prop="customPageUrl">
+                      <el-input v-model="formData.customPageUrl" placeholder="请输入自定义详情页面链接地址" style="width: 468px !important" />
+                    </el-form-item>
+                    <el-form-item label="信息内容：" prop="messageContent">
+                      <el-input
+                        v-model="formData.messageContent"
+                        type="textarea"
+                        placeholder="请输入信息内容"
+                        style="width: 468px !important"
+                      ></el-input>
+                    </el-form-item>
+                    <el-form-item label="查看附件：">
+                      <ul>
+                        <li v-for="(file, index) in files" :key="index" @click="viewFile(file)">
+                          {{ file.name }}
+                        </li>
+                      </ul>
+                    </el-form-item>
+                  </div>
+                  <h4>推送配置</h4>
+                  <div class="box1">
+                    <el-form-item label="发布名单：" prop="releaseList" style="width: 468px !important"
+                    ><span class="highlight-text">已选择{{ formData.releaseList }}人</span>
+                      <el-text class="common-btn-text-primary" @click="showReleaseList">查看详情</el-text>
+                    </el-form-item>
+                    <el-row :gutter="18">
+                      <el-col :span="6">
+                        <el-form-item label="发布时间：" prop="releaseTime">
+                          <el-button type="text" @click="publishNow">立即发布</el-button>
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="12">
+                        <el-form-item label="定时发布：" prop="timing">
+                          <el-date-picker v-model="formData.timing" type="datetime" placeholder="选择发布时间"></el-date-picker>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                    <el-form-item label="消息反馈方式：" prop="feedbackWay" style="width: 468px !important">
+                      <el-select v-model="formData.feedbackWay" placeholder="请选择消息反馈方式">
+                        <el-option v-for="option in feedbackOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                  <h4 class="common-dialog-title">审核配置</h4>
+                  <div class="box1">
+                    <el-form-item label="审核材料：" prop="materials">
+                      <ul>
+                        <li v-for="(material, index) in auditMaterials" :key="index">
+                          {{ material }}
+                        </li>
+                      </ul>
+                    </el-form-item>
+                    <el-form-item label="审核人：" prop="auditor">
+                      <el-input v-model="formData.auditor" placeholder="请输入审核人姓名" style="width: 368px !important" />
+                    </el-form-item>
+                  </div>
+                </el-form>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="information-approval">
+              <div class="common-dialog-title-box">
+                <h3 class="common-dialog-title">信息审批</h3>
+              </div>
+              <div class="common-dialog-box">
+                <div class="approval-process">
+                  <div class="box1">
+                    <h4>审批流程</h4>
+                    <div>
+                      <p v-if="processingTime">已用时：{{ processingTime }}</p>
+                    </div>
+                    <el-timeline style="width: 700px">
+                      <template v-for="(item, index) in approvalSteps" :key="index">
+                        <el-timeline-item placement="top">
+                          <el-card>
+                            <h4>{{ item.status }}</h4>
+                            <p v-if="item.handler">
+                              处理人：<span>{{ item.handler }}</span
+                            >&nbsp;&nbsp;&nbsp;&nbsp;时间：{{ item.time }}
+                            </p>
+                            <p v-if="item.result">处理结果：{{ item.result }}</p>
+                            <p v-if="item.comment">具体意见：{{ item.comment }}</p>
+                          </el-card>
+                        </el-timeline-item>
+                      </template>
+                    </el-timeline>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <div class="common-dialog-footer">
+          <el-button @click="$emit('close')">返回</el-button>
+          <el-button :disabled="true">编辑</el-button>
+          <el-button :disabled="true">提交</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <SendDetail v-if="sendDetailState.show" :event-id="sendDetailState.eventId" @close="handleCancel" />
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import SendDetail from './sendDetail.vue';
+const totalPeople = 46600;
+const successCount = 29998;
+const failureCount = 13;
+const sendingCount = 9989;
+const feedbackCount = 3000;
+const unresponsiveCount = 2;
+const processingTime = '1小时 6分22秒';
+const formData = ref({
+  title: '',
+  publishUnit: '',
+  templateType: '',
+  messageContent: '',
+  releaseList: 0,
+  releaseTime: '',
+  feedbackWay: '',
+  auditor: '',
+  timing: '',
+  materials: '',
+  processingTime: ''
+});
+
+const auditMaterials = ['2023年4月29日广东省发布突发事件预警信息.pdf', '审核材料2'];
+const rules = {
+  title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
+  publishUnit: [{ required: true, message: '请填写发布单位', trigger: 'blur' }],
+  releaseList: [{ required: true, message: '请选择发布名单', trigger: 'change' }],
+  timing: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
+  feedbackWay: [{ required: true, message: '请选择消息反馈方式', trigger: 'change' }],
+  auditor: [{ required: true, message: '请填写审核人', trigger: 'blur' }]
+};
+const files = ref([
+  { name: '2023年4月29日广东省发布突发事件预警信息.pdf', url: '/path/to/file1.pdf' },
+  { name: '2023年5月15日上海市发布突发事件预警信息.docx', url: '/path/to/file2.docx' }
+]);
+const feedbackOptions = [
+  { value: '仅需阅读', label: '仅需阅读' },
+  { value: '点击确认', label: '点击确认' },
+  { value: '签字确认', label: '签字确认' }
+];
+const presetTemplates = [
+  { value: 'template1', label: '模板一' },
+  { value: 'template2', label: '模板二' }
+];
+const selectedPresetTemplate = ref('');
+const approvalSteps = ref([
+  {
+    status: '提交',
+    handler: '李四',
+    result: '提交',
+    time: '2023-05-17 10:00',
+    comment: '无'
+  },
+  {
+    status: '领导审批',
+    handler: '王五',
+    result: '审批通过',
+    time: '2023-05-17 13:00',
+    comment: '无'
+  },
+  {
+    status: '重新提交',
+    handler: '李四',
+    result: '重新提交',
+    time: '2023-05-17 12:00',
+    comment: '无'
+  },
+  {
+    status: '领导审批',
+    handler: '王五',
+    result: '审批通过',
+    time: '2023-05-17 13:00',
+    comment: '无'
+  },
+  {
+    status: '结束',
+    handler: '',
+    result: '',
+    time: '2023-05-17 14:00',
+    comment: ''
+  }
+]);
+let sendDetailState = reactive({
+  show: false,
+  eventId: ''
+});
+const handleCancel = () => {
+  sendDetailState.show = false;
+};
+const viewFile = (file) => {
+  window.open(file.url, '_blank'); // 打开新标签页
+};
+const showSendDetails = (row) => {
+  if (row) {
+    sendDetailState.eventId = row.id; // 假设eventId是id字段
+    sendDetailState.show = true;
+  }
+};
+const showReleaseList = () => {
+  ElMessage.info('点击了查看发布名单');
+};
+const publishNow = () => {
+  ElMessage.info('点击了立即发布');
+};
+</script>
+
+<style scoped>
+.common-dialog {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.common-dialog-title-box {
+  margin-bottom: 20px;
+}
+
+.common-dialog-title {
+  font-size: 1.2rem;
+  color: #333;
+}
+
+.box1 {
+  border: 1px solid #dcdfe6; /* 浅灰色边框 */
+  padding: 10px; /* 可选：为了美观，可以添加一些内边距 */
+  margin-bottom: 10px;
+}
+
+.highlight-text {
+  font-weight: bold; /* 加粗 */
+  font-size: 1.2em; /* 放大字体大小 */
+}
+
+.information-approval {
+  width: 100%;
+  max-width: 800px;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+.information-approval1 {
+  width: 100%;
+  max-width: 100%;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+.approval-process {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.common-dialog-footer {
+  margin-top: 0.5rem;
+}
+.send-statistics {
+  width: 100%;
+}
+.common-dialog-footer {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  gap: 10px; /* 按钮之间的间距 */
+  margin-top: 50px;
+}
+</style>

src/views/informationissue/informationDetail.vue

@@ -81,7 +81,7 @@
           </div>
         </el-form>
         <div class="common-dialog-footer">
-          <el-button @click="cancel">返回</el-button>
+          <el-button @click="$emit('close')">返回</el-button>
           <el-button @click="submitForm">编辑</el-button>
           <el-button type="primary" @click="submitForm">提交</el-button>
         </div>
@@ -93,9 +93,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
-
-const title = '信息详情';
-
 const formData = ref({
   title: '',
   publishUnit: '',
@@ -169,9 +166,8 @@ const validateFormData = (): boolean => {
   return isValid;
 };
 
-const cancel = () => {
-  router.back();
-};
+// const cancel = () => {
+// };
 </script>
 
 <style scoped>

src/views/informationissue/informationList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div v-show="!informationDetailState.show">
+    <div v-show="!informationDetailState.show && !informationViewState.show && !informationApprovalState.show">
       <transition name="fade">
         <div v-show="showSearch">
           <el-form ref="queryFormRef" :model="queryParams" label-width="100px">
@@ -80,19 +80,23 @@
           <template #default="scope">
             <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
             <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
-            <el-text class="common-btn-text-primary" @click="handleClose(scope.row)">审批</el-text>
+            <el-text class="common-btn-text-primary" @click="handleApproval(scope.row)">审批</el-text>
           </template>
         </el-table-column>
       </el-table>
       <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="tableData" />
     </div>
-    <InformationDetail v-if="informationDetailState.show" :event-id="informationDetailState.eventId" />
+    <InformationDetail v-if="informationDetailState.show" :event-id="informationDetailState.eventId" @close="handleCancel" />
+    <InformationView v-if="informationViewState.show" :event-id="informationViewState.eventId" @close="handleCancel" />
+    <InformationApproval v-if="informationApprovalState.show" :event-id="informationApprovalState.eventId" @close="handleCancel" />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, reactive, toRefs, onMounted } from 'vue';
 import { getInformation } from '@/api/duty/eventing'; // 假设 getInformation 已经定义好
 import InformationDetail from './informationDetail.vue';
+import InformationView from './informationView.vue';
+import InformationApproval from './informationApproval.vue';
 const showSearch = ref(true);
 const queryFormRef = ref();
 const tableData = ref([]);
@@ -185,26 +189,44 @@ const handleSelectionChange = (selection) => {
   multiple.value = !selection.length;
 };
 
-const handleUpdate = (row) => {
-  // Implement update functionality
-};
-
-const handleClose = (row) => {
-  // Implement close functionality
-};
-
 let informationDetailState = reactive({
   show: false,
   eventId: ''
 });
+let informationViewState = reactive({
+  show: false,
+  eventId: ''
+});
+let informationApprovalState = reactive({
+  show: false,
+  eventId: ''
+});
 
 const handleView = (row) => {
+  if (row) {
+    informationViewState.eventId = row.id; // 假设eventId是id字段
+    informationViewState.show = true;
+  }
+};
+const handleUpdate = (row) => {
   if (row) {
     informationDetailState.eventId = row.id; // 假设eventId是id字段
     informationDetailState.show = true;
   }
 };
 
+const handleApproval = (row) => {
+  if (row) {
+    informationApprovalState.eventId = row.id; // 假设eventId是id字段
+    informationApprovalState.show = true;
+  }
+};
+const handleCancel = () => {
+  informationDetailState.show = false;
+  informationViewState.show = false;
+  informationApprovalState.show = false;
+};
+
 const getList = () => {
   loading.value = true;
   getInformation(queryParams.value) // 假设 getInformation 已经定义好

src/views/informationissue/informationView.vue

@@ -0,0 +1,342 @@
+<template>
+  <div v-show="!sendDetailState.show">
+    <div class="common-dialog">
+      <div class="common-dialog-content">
+        <el-row :gutter="24">
+          <el-col :span="24">
+            <div class="information-approval1">
+              <el-row :gutter="24">
+                <el-col :span="17">
+                  <div class="common-dialog-title-box">
+                    <h4 class="common-dialog-title">发送统计</h4>
+                  </div>
+                </el-col>
+                <el-col :span="6" style="text-align: right">
+                  <el-text class="common-btn-text-primary" @click="showSendDetails">发送明细</el-text>
+                </el-col>
+              </el-row>
+              <!-- 添加分割线 -->
+              <div style="border-top: 1px solid #dcdfe6; margin-top: -25px"></div>
+              <div class="common-dialog-box">
+                <div class="send-statistics">
+                  <el-row :gutter="24">
+                    <el-col :span="8">
+                      <p>选择人数 {{ totalPeople }}</p>
+                    </el-col>
+                    <el-col :span="8">
+                      <p>成功 {{ successCount }} | 失败 {{ failureCount }} | 发送中 {{ sendingCount }}</p>
+                    </el-col>
+                    <el-col :span="8">
+                      <p>反馈 {{ feedbackCount }} | 未反馈 {{ unresponsiveCount }}</p>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="information-approval">
+              <div class="common-dialog-title-box">
+                <h3 class="common-dialog-title">信息详情</h3>
+              </div>
+              <div class="common-dialog-box">
+                <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+                  <h4>信息内容</h4>
+                  <div class="box1">
+                    <el-form-item label="标题：" prop="title">
+                      <el-input v-model="formData.title" placeholder="请输入标题" style="width: 468px !important" />
+                    </el-form-item>
+
+                    <el-form-item label="发布单位：" prop="publishUnit">
+                      <el-input v-model="formData.publishUnit" placeholder="请输入发布单位" style="width: 468px !important" />
+                    </el-form-item>
+
+                    <el-form-item label="信息模板：" prop="templateType">
+                      <el-radio-group v-model="formData.templateType">
+                        <el-radio label="预设模板">预设模板</el-radio>
+                        <el-radio label="自定义模板">自定义模板</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item v-if="formData.templateType === '预设模板'" label="预设模板：" prop="presetTemplate">
+                      <el-select v-model="selectedPresetTemplate" placeholder="请选择预设模板" style="width: 300px !important">
+                        <el-option v-for="option in presetTemplates" :key="option.value" :label="option.label" :value="option.value"></el-option>
+                      </el-select>
+                      <el-text class="common-btn-text-primary" @click="showExample">样例</el-text>
+                    </el-form-item>
+                    <el-form-item v-if="formData.templateType === '自定义模板'" prop="customPageUrl">
+                      <el-input v-model="formData.customPageUrl" placeholder="请输入自定义详情页面链接地址" style="width: 468px !important" />
+                    </el-form-item>
+                    <el-form-item label="信息内容：" prop="messageContent">
+                      <el-input
+                        v-model="formData.messageContent"
+                        type="textarea"
+                        placeholder="请输入信息内容"
+                        style="width: 468px !important"
+                      ></el-input>
+                    </el-form-item>
+                    <el-form-item label="查看附件：">
+                      <ul>
+                        <li v-for="(file, index) in files" :key="index" @click="viewFile(file)">
+                          {{ file.name }}
+                        </li>
+                      </ul>
+                    </el-form-item>
+                  </div>
+                  <h4>推送配置</h4>
+                  <div class="box1">
+                    <el-form-item label="发布名单：" prop="releaseList" style="width: 468px !important"
+                      ><span class="highlight-text">已选择{{ formData.releaseList }}人</span>
+                      <el-text class="common-btn-text-primary" @click="showReleaseList">查看详情</el-text>
+                    </el-form-item>
+                    <el-row :gutter="18">
+                      <el-col :span="6">
+                        <el-form-item label="发布时间：" prop="releaseTime">
+                          <el-button type="text" @click="publishNow">立即发布</el-button>
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="12">
+                        <el-form-item label="定时发布：" prop="timing">
+                          <el-date-picker v-model="formData.timing" type="datetime" placeholder="选择发布时间"></el-date-picker>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                    <el-form-item label="消息反馈方式：" prop="feedbackWay" style="width: 468px !important">
+                      <el-select v-model="formData.feedbackWay" placeholder="请选择消息反馈方式">
+                        <el-option v-for="option in feedbackOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                  <h4 class="common-dialog-title">审核配置</h4>
+                  <div class="box1">
+                    <el-form-item label="审核材料：" prop="materials">
+                      <ul>
+                        <li v-for="(material, index) in auditMaterials" :key="index">
+                          {{ material }}
+                        </li>
+                      </ul>
+                    </el-form-item>
+                    <el-form-item label="审核人：" prop="auditor">
+                      <el-input v-model="formData.auditor" placeholder="请输入审核人姓名" style="width: 368px !important" />
+                    </el-form-item>
+                  </div>
+                </el-form>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="information-approval">
+              <div class="common-dialog-title-box">
+                <h3 class="common-dialog-title">信息审批</h3>
+              </div>
+              <div class="common-dialog-box">
+                <div class="approval-process">
+                  <div class="box1">
+                    <h4>审批流程</h4>
+                    <div>
+                      <p v-if="processingTime">已用时：{{ processingTime }}</p>
+                    </div>
+                    <el-timeline style="width: 700px">
+                      <template v-for="(item, index) in approvalSteps" :key="index">
+                        <el-timeline-item placement="top">
+                          <el-card>
+                            <h4>{{ item.status }}</h4>
+                            <p v-if="item.handler">
+                              处理人：<span>{{ item.handler }}</span
+                              >&nbsp;&nbsp;&nbsp;&nbsp;时间：{{ item.time }}
+                            </p>
+                            <p v-if="item.result">处理结果：{{ item.result }}</p>
+                            <p v-if="item.comment">具体意见：{{ item.comment }}</p>
+                          </el-card>
+                        </el-timeline-item>
+                      </template>
+                    </el-timeline>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <div class="common-dialog-footer">
+          <el-button @click="$emit('close')">返回</el-button>
+          <el-button :disabled="true">编辑</el-button>
+          <el-button :disabled="true">提交</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <SendDetail v-if="sendDetailState.show" :event-id="sendDetailState.eventId" @close="handleCancel" />
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import SendDetail from './sendDetail.vue';
+const totalPeople = 46600;
+const successCount = 29998;
+const failureCount = 13;
+const sendingCount = 9989;
+const feedbackCount = 3000;
+const unresponsiveCount = 2;
+const processingTime = '1小时 6分22秒';
+const formData = ref({
+  title: '',
+  publishUnit: '',
+  templateType: '',
+  messageContent: '',
+  releaseList: 0,
+  releaseTime: '',
+  feedbackWay: '',
+  auditor: '',
+  timing: '',
+  materials: '',
+  processingTime: ''
+});
+
+const auditMaterials = ['2023年4月29日广东省发布突发事件预警信息.pdf', '审核材料2'];
+const rules = {
+  title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
+  publishUnit: [{ required: true, message: '请填写发布单位', trigger: 'blur' }],
+  releaseList: [{ required: true, message: '请选择发布名单', trigger: 'change' }],
+  timing: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
+  feedbackWay: [{ required: true, message: '请选择消息反馈方式', trigger: 'change' }],
+  auditor: [{ required: true, message: '请填写审核人', trigger: 'blur' }]
+};
+const files = ref([
+  { name: '2023年4月29日广东省发布突发事件预警信息.pdf', url: '/path/to/file1.pdf' },
+  { name: '2023年5月15日上海市发布突发事件预警信息.docx', url: '/path/to/file2.docx' }
+]);
+const feedbackOptions = [
+  { value: '仅需阅读', label: '仅需阅读' },
+  { value: '点击确认', label: '点击确认' },
+  { value: '签字确认', label: '签字确认' }
+];
+const presetTemplates = [
+  { value: 'template1', label: '模板一' },
+  { value: 'template2', label: '模板二' }
+];
+const selectedPresetTemplate = ref('');
+const approvalSteps = ref([
+  {
+    status: '提交',
+    handler: '李四',
+    result: '提交',
+    time: '2023-05-17 10:00',
+    comment: '无'
+  },
+  {
+    status: '领导审批',
+    handler: '王五',
+    result: '审批通过',
+    time: '2023-05-17 13:00',
+    comment: '无'
+  },
+  {
+    status: '重新提交',
+    handler: '李四',
+    result: '重新提交',
+    time: '2023-05-17 12:00',
+    comment: '无'
+  },
+  {
+    status: '领导审批',
+    handler: '王五',
+    result: '审批通过',
+    time: '2023-05-17 13:00',
+    comment: '无'
+  },
+  {
+    status: '结束',
+    handler: '',
+    result: '',
+    time: '2023-05-17 14:00',
+    comment: ''
+  }
+]);
+let sendDetailState = reactive({
+  show: false,
+  eventId: ''
+});
+const handleCancel = () => {
+  sendDetailState.show = false;
+};
+const viewFile = (file) => {
+  window.open(file.url, '_blank'); // 打开新标签页
+};
+const showSendDetails = (row) => {
+  if (row) {
+    sendDetailState.eventId = row.id; // 假设eventId是id字段
+    sendDetailState.show = true;
+  }
+};
+const showReleaseList = () => {
+  ElMessage.info('点击了查看发布名单');
+};
+const publishNow = () => {
+  ElMessage.info('点击了立即发布');
+};
+</script>
+
+<style scoped>
+.common-dialog {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.common-dialog-title-box {
+  margin-bottom: 20px;
+}
+
+.common-dialog-title {
+  font-size: 1.2rem;
+  color: #333;
+}
+
+.box1 {
+  border: 1px solid #dcdfe6; /* 浅灰色边框 */
+  padding: 10px; /* 可选：为了美观，可以添加一些内边距 */
+  margin-bottom: 10px;
+}
+
+.highlight-text {
+  font-weight: bold; /* 加粗 */
+  font-size: 1.2em; /* 放大字体大小 */
+}
+
+.information-approval {
+  width: 100%;
+  max-width: 800px;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+.information-approval1 {
+  width: 100%;
+  max-width: 100%;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+.approval-process {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.common-dialog-footer {
+  margin-top: 0.5rem;
+}
+.send-statistics {
+  width: 100%;
+}
+.common-dialog-footer {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  gap: 10px; /* 按钮之间的间距 */
+  margin-top: 50px;
+}
+</style>

src/views/informationissue/sendDetail.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="app-container">
+    <div>
+      <transition name="fade">
+        <div v-show="showSearch">
+          <el-form ref="queryFormRef" :model="queryParams" label-width="100px">
+            <el-row :gutter="20">
+              <el-col :span="5">
+                <el-form-item label="渠道：">
+                  <el-select v-model="queryParams.channel" placeholder="全部">
+                    <el-option v-for="(option, index) in channelOptions" :key="index" :label="option.label" :value="option.value"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item label="发布状态：">
+                  <el-select v-model="queryParams.publishStatus" placeholder="请选择">
+                    <el-option v-for="(option, index) in publishStatusOptions" :key="index" :label="option.label" :value="option.value"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item label="反馈状态：">
+                  <el-select v-model="queryParams.feedbackStatus" placeholder="请选择">
+                    <el-option v-for="(option, index) in feedbackStatusOptions" :key="index" :label="option.label" :value="option.value"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item label="搜索：">
+                  <el-input v-model="queryParams.searchInput" placeholder="请输入内容"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item>
+                  <el-button type="primary" @click="handleSearch">搜索</el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </transition>
+      <!-- 表格组件 -->
+      <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
+        <el-table-column prop="no" label="序号" width="180"></el-table-column>
+        <el-table-column prop="name" label="姓名"></el-table-column>
+        <el-table-column prop="phone" label="手机号码"></el-table-column>
+        <el-table-column prop="organization" label="组织"></el-table-column>
+        <el-table-column prop="feedbackMethod" label="反馈方式"></el-table-column>
+        <el-table-column prop="yuezhengyiStatus" label="粤政易" width="180">
+          <template #default="{ row }">
+            <el-tag :key="row.id" :type="getTagType(row.yuezhengyiPublishStatus)" closable :disable-transitions="false" @close="handleTagClose(row)">
+              {{ row.yuezhengyiFeedbackStatus }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="haixinetStatus" label="好心网格" width="180">
+          <template #default="{ row }">
+            <el-tag :key="row.id" :type="getTagType(row.haixinetPublishStatus)" closable :disable-transitions="false" @close="handleTagClose(row)">
+              {{ row.haixinetFeedbackStatus }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.page"
+        v-model:limit="queryParams.page_size"
+        :total="total"
+        @pagination="fetchTableData"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs } from 'vue';
+import { ElMessage } from 'element-plus'; // 引入提示信息模块
+
+// 初始化查询条件
+const initFormData = reactive({
+  channel: '',
+  publishStatus: '',
+  approvalStatus: '',
+  disposeStatus: '',
+  searchInput: '' // 添加搜索输入字段
+});
+
+// 查询参数
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: 1,
+    page_size: 10,
+    channel: '',
+    publishStatus: '',
+    feedbackStatus: '',
+    searchInput: '' // 同步搜索输入字段
+  },
+  tableData: [],
+  loading: false,
+  total: 0,
+  showSearch: true,
+  channelOptions: [], // 渠道选项
+  publishStatusOptions: [], // 发布状态选项
+  feedbackStatusOptions: [] // 反馈状态选项
+});
+
+const { queryParams, form, tableData, loading, total, showSearch } = toRefs(data);
+
+// 获取表格数据
+const fetchTableData = () => {
+  // 模拟数据获取逻辑
+  const mockData = [
+    // 示例数据...
+  ];
+  tableData.value = mockData;
+  total.value = mockData.length;
+};
+
+// 处理搜索
+const handleSearch = () => {
+  fetchTableData();
+};
+
+// 选择改变时触发
+const handleSelectionChange = (val) => {
+  // 处理表格多选逻辑
+};
+
+// 获取标签类型
+const getTagType = (status) => {
+  switch (status) {
+    case 'published':
+      return 'success';
+    case 'pending':
+      return 'warning';
+    case 'rejected':
+      return 'danger';
+    default:
+      return '';
+  }
+};
+
+// 关闭标签时触发
+const handleTagClose = (row) => {
+  ElMessage.warning(`标签关闭操作：${row.yuezhengyiFeedbackStatus}`);
+  // 实现标签关闭后的逻辑处理
+};
+
+// 初始化选项数据
+const initOptions = () => {
+  data.channelOptions = [
+    { value: 'channel1', label: '渠道一' },
+    { value: 'channel2', label: '渠道二' }
+  ];
+  data.publishStatusOptions = [
+    { value: 'published', label: '已发布' },
+    { value: 'pending', label: '待发布' }
+  ];
+  data.feedbackStatusOptions = [
+    { value: 'approved', label: '已审批' },
+    { value: 'rejected', label: '未通过' }
+  ];
+};
+initOptions(); // 初始化选项数据
+
+// 请求数据模拟
+fetchTableData();
+</script>