迭代七信息发布列表相关界面

src/views/informationissue/informationApproval.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="!sendDetailState.show">
+  <div v-show="!showReleaseDetailState.show">
     <div class="common-dialog">
       <div class="common-dialog-content">
         <el-row :gutter="20">
@@ -54,8 +54,8 @@
                   <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>
+                      ><span class="highlight-text">已选择{{ formData.releaseList }}人</span>
+                      <el-text class="common-btn-text-primary" @click="showReleaseDetail">发送明细</el-text>
                     </el-form-item>
                     <el-row :gutter="18">
                       <el-col :span="6">
@@ -99,6 +99,21 @@
               </div>
               <div class="common-dialog-box">
                 <div class="approval-process">
+                  <div class="box1">
+                    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
+                      <h4>审批意见</h4>
+                      <el-form-item label="审批状态：" prop="approvalStatus">
+                        <el-select v-model="formData.approvalStatus" placeholder="请选择审批状态" style="width: 500px !important">
+                          <el-option label="审批通过" value="approved"></el-option>
+                          <el-option label="审批不通过" value="rejected"></el-option>
+                        </el-select>
+                      </el-form-item>
+                      <!-- 添加具体意见的输入框 -->
+                      <el-form-item label="具体意见：" prop="approvalComment">
+                        <el-input v-model="formData.approvalComment" type="textarea" placeholder="请输入具体意见" style="width: 500px"></el-input>
+                      </el-form-item>
+                    </el-form>
+                  </div>
                   <div class="box1">
                     <h4>审批流程</h4>
                     <div>
@@ -111,7 +126,7 @@
                             <h4>{{ item.status }}</h4>
                             <p v-if="item.handler">
                               处理人：<span>{{ item.handler }}</span
-                            >&nbsp;&nbsp;&nbsp;&nbsp;时间：{{ item.time }}
+                              >&nbsp;&nbsp;&nbsp;&nbsp;时间：{{ item.time }}
                             </p>
                             <p v-if="item.result">处理结果：{{ item.result }}</p>
                             <p v-if="item.comment">具体意见：{{ item.comment }}</p>
@@ -134,18 +149,14 @@
     </div>
   </div>
   <SendDetail v-if="sendDetailState.show" :event-id="sendDetailState.eventId" @close="handleCancel" />
+  <ShowReleaseDetail v-if="showReleaseDetailState.show" :event-id="showReleaseDetailState.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;
+import ShowReleaseDetail from './showReleaseDetail.vue';
 const processingTime = '1小时 6分22秒';
 const formData = ref({
   title: '',
@@ -158,7 +169,9 @@ const formData = ref({
   auditor: '',
   timing: '',
   materials: '',
-  processingTime: ''
+  processingTime: '',
+  approvalStatus: '',
+  approvalComment: ''
 });
 
 const auditMaterials = ['2023年4月29日广东省发布突发事件预警信息.pdf', '审核材料2'];
@@ -168,7 +181,9 @@ const rules = {
   releaseList: [{ required: true, message: '请选择发布名单', trigger: 'change' }],
   timing: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
   feedbackWay: [{ required: true, message: '请选择消息反馈方式', trigger: 'change' }],
-  auditor: [{ required: true, message: '请填写审核人', trigger: 'blur' }]
+  auditor: [{ required: true, message: '请填写审核人', trigger: 'blur' }],
+  approvalStatus: [{ required: true, message: '请选择审批状态', trigger: 'change' }],
+  approvalComment: [{ required: true, message: '请输入具体意见', trigger: 'blur' }]
 };
 const files = ref([
   { name: '2023年4月29日广东省发布突发事件预警信息.pdf', url: '/path/to/file1.pdf' },
@@ -225,21 +240,19 @@ let sendDetailState = reactive({
   show: false,
   eventId: ''
 });
+let showReleaseDetailState = reactive({
+  show: false,
+  eventId: ''
+});
+const showReleaseDetail = () => {
+  showReleaseDetailState.show = true;
+};
 const handleCancel = () => {
-  sendDetailState.show = false;
+  showReleaseDetailState.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('点击了立即发布');
 };
@@ -269,7 +282,6 @@ const publishNow = () => {
   padding: 10px; /* 可选：为了美观，可以添加一些内边距 */
   margin-bottom: 10px;
 }
-
 .highlight-text {
   font-weight: bold; /* 加粗 */
   font-size: 1.2em; /* 放大字体大小 */
@@ -282,13 +294,6 @@ const publishNow = () => {
   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;
@@ -297,9 +302,6 @@ const publishNow = () => {
 .common-dialog-footer {
   margin-top: 0.5rem;
 }
-.send-statistics {
-  width: 100%;
-}
 .common-dialog-footer {
   display: flex;
   justify-content: center; /* 水平居中 */

src/views/informationissue/informationView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="!sendDetailState.show">
+  <div>
     <div class="common-dialog">
       <div class="common-dialog-content">
         <el-row :gutter="24">

src/views/informationissue/sendDetail.vue

@@ -1,76 +1,89 @@
 <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"
-      />
+  <el-dialog v-model="showSearch" title="发送明细" width="80%" @close="$emit('close')">
+    <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>
-  </div>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">

src/views/informationissue/showReleaseDetail.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-dialog v-model="showSearch" title="发送明细" width="80%" @close="$emit('close')">
+    <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>
+                    <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="organization" label="组织"></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>
+  </el-dialog>
+</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>