wip: 🚧 通知公告开发

通知公告开发

src/views/system/notice/index.vue

@@ -1,65 +1,23 @@
 <template>
   <div class="app-container">
     <div class="search-container">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-form-item label="通知标题" prop="title">
+      <el-form
+        ref="queryFormRef"
+        :model="queryParams"
+        :inline="true"
+        label-suffix=":"
+      >
+        <el-form-item label="标题" prop="title">
           <el-input
             v-model="queryParams.title"
-            placeholder="通知标题"
+            placeholder="标题"
             clearable
             @keyup.enter="handleQuery()"
           />
         </el-form-item>
-        <el-form-item label="通知内容" prop="content">
-          <el-input
-            v-model="queryParams.content"
-            placeholder="通知内容"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="通知类型" prop="noticeType">
-          <el-input
-            v-model="queryParams.noticeType"
-            placeholder="通知类型"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="发布人" prop="releaseBy">
-          <el-input
-            v-model="queryParams.releaseBy"
-            placeholder="发布人"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="优先级" prop="priority">
+        <el-form-item label="发布状态" prop="releaseStatus">
           <el-select
-            v-model="queryParams.priority"
-            class="!w-[100px]"
-            clearable
-            placeholder="全部"
-          >
-            <el-option :value="0" label="低" />
-            <el-option :value="1" label="中" />
-            <el-option :value="2" label="高" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="目标类型" prop="tarType">
-          <el-select
-            v-model="queryParams.tarType"
-            class="!w-[100px]"
-            clearable
-            placeholder="全部"
-          >
-            <el-option :value="0" label="全体" />
-            <el-option :value="1" label="指定" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="发布状态" prop="sendStatus">
-          <el-select
-            v-model="queryParams.sendStatus"
+            v-model="queryParams.releaseStatus"
             class="!w-[100px]"
             clearable
             placeholder="全部"
@@ -69,26 +27,6 @@
             <el-option :value="2" label="已撤回" />
           </el-select>
         </el-form-item>
-        <el-form-item label="发布时间" prop="sendTime">
-          <el-date-picker
-            v-model="queryParams.sendTime"
-            type="daterange"
-            range-separator="~"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
-        </el-form-item>
-        <el-form-item label="撤回时间" prop="recallTime">
-          <el-date-picker
-            v-model="queryParams.recallTime"
-            type="daterange"
-            range-separator="~"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
-        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery()">
             <i-ep-search />
@@ -110,7 +48,7 @@
           @click="handleOpenDialog()"
         >
           <i-ep-plus />
-          新增
+          新增通知
         </el-button>
         <el-button
           v-hasPerm="['system:notice:delete']"
@@ -131,13 +69,6 @@
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column
-          align="center"
-          key="id"
-          label="id"
-          prop="id"
-          min-width="100"
-        />
         <el-table-column
           align="center"
           key="title"
@@ -145,13 +76,6 @@
           prop="title"
           min-width="150"
         />
-        <el-table-column
-          align="center"
-          key="content"
-          label="通知内容"
-          prop="content"
-          min-width="150"
-        />
         <el-table-column
           align="center"
           key="noticeType"
@@ -182,7 +106,7 @@
         <el-table-column
           align="center"
           key="tarType"
-          label="目标类型"
+          label="通告对象"
           prop="tarType"
           min-width="100"
         >
@@ -193,28 +117,28 @@
         </el-table-column>
         <el-table-column
           align="center"
-          key="sendStatus"
+          key="releaseStatus"
           label="发布状态"
-          prop="sendStatus"
+          prop="releaseStatus"
           min-width="100"
         >
           <template #default="scope">
-            <el-tag v-if="scope.row.sendStatus == 0" type="warning">
+            <el-tag v-if="scope.row.releaseStatus == 0" type="warning">
               未发布
             </el-tag>
-            <el-tag v-if="scope.row.sendStatus == 1" type="success">
+            <el-tag v-if="scope.row.releaseStatus == 1" type="success">
               已发布
             </el-tag>
-            <el-tag v-if="scope.row.sendStatus == 2" type="primary">
+            <el-tag v-if="scope.row.releaseStatus == 2" type="primary">
               已撤回
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column
           align="center"
-          key="sendTime"
+          key="releaseTime"
           label="发布时间"
-          prop="sendTime"
+          prop="releaseTime"
           min-width="100"
         />
         <el-table-column
@@ -224,23 +148,32 @@
           prop="recallTime"
           min-width="100"
         />
-        <el-table-column
-          align="center"
-          key="createTime"
-          label="创建时间"
-          prop="createTime"
-          min-width="100"
-        />
-        <el-table-column
-          align="center"
-          key="updateTime"
-          label="更新时间"
-          prop="updateTime"
-          min-width="100"
-        />
         <el-table-column align="center" fixed="right" label="操作" width="220">
           <template #default="scope">
             <el-button
+              v-if="scope.row.releaseStatus != 1"
+              v-hasPerm="['system:notice:release']"
+              type="primary"
+              size="small"
+              link
+              @click="releaseNotice(scope.row.id)"
+            >
+              <i-ep-edit />
+              发布
+            </el-button>
+            <el-button
+              v-if="scope.row.releaseStatus == 1"
+              v-hasPerm="['system:notice:recall']"
+              type="primary"
+              size="small"
+              link
+              @click="recallNotice(scope.row.id)"
+            >
+              <i-ep-edit />
+              撤回
+            </el-button>
+            <el-button
+              v-if="scope.row.releaseStatus != 1"
               v-hasPerm="['system:notice:edit']"
               type="primary"
               size="small"
@@ -251,6 +184,7 @@
               编辑
             </el-button>
             <el-button
+              v-if="scope.row.releaseStatus != 1"
               v-hasPerm="['system:notice:delete']"
               type="danger"
               size="small"
@@ -277,111 +211,48 @@
     <el-dialog
       v-model="dialog.visible"
       :title="dialog.title"
-      width="500px"
+      width="70%"
       @close="handleCloseDialog"
     >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <!--        <el-input v-model="queryParams.id" hidden />-->
-        <el-form-item label="通知标题" prop="title">
-          <el-input
-            v-model="formData.title"
-            placeholder="通知标题"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="通知内容" prop="content">
-          <el-input
-            v-model="formData.content"
-            placeholder="通知内容"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <el-form-item label="通知类型" prop="noticeType">
-          <el-input
-            v-model="formData.noticeType"
-            placeholder="通知类型"
-            clearable
-            @keyup.enter="handleQuery()"
-          />
-        </el-form-item>
-        <!--        <el-form-item label="发布人" prop="releaseBy">-->
-        <!--          <el-input-->
-        <!--            v-model="formData.releaseBy"-->
-        <!--            placeholder="发布人"-->
-        <!--            clearable-->
-        <!--            @keyup.enter="handleQuery()"-->
-        <!--          />-->
-        <!--        </el-form-item>-->
-        <el-form-item label="优先级" prop="priority">
-          <!--          <el-input-->
-          <!--            v-model="formData.priority"-->
-          <!--            placeholder="优先级(0-低 1-中 2-高)"-->
-          <!--            clearable-->
-          <!--            @keyup.enter="handleQuery()"-->
-          <!--          />-->
-          <el-radio-group v-model="formData.priority">
-            <el-radio :value="0">低</el-radio>
-            <el-radio :value="1">中</el-radio>
-            <el-radio :value="2">高</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="目标类型" prop="tarType">
-          <!--          <el-input-->
-          <!--            v-model="formData.tarType"-->
-          <!--            placeholder="目标类型(0-全体 1-指定)"-->
-          <!--            clearable-->
-          <!--            @keyup.enter="handleQuery()"-->
-          <!--          />-->
-          <el-radio-group v-model="formData.tarType">
-            <el-radio :value="0">全体</el-radio>
-            <el-radio :value="1">指定</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="发布状态" prop="sendStatus">
-          <!--          <el-input-->
-          <!--            v-model="formData.sendStatus"-->
-          <!--            placeholder="发布状态(0-未发布 1已发布 2已撤回)"-->
-          <!--            clearable-->
-          <!--            @keyup.enter="handleQuery()"-->
-          <!--          />-->
-          <el-radio-group v-model="formData.sendStatus">
-            <el-radio :value="0">未发布</el-radio>
-            <el-radio :value="1">已发布</el-radio>
-            <el-radio :value="2">已撤回</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.sendStatus === 1"
-          label="发布时间"
-          prop="sendTime"
+      <div style="max-height: calc(100vh - 200px)">
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-width="100px"
         >
-          <el-date-picker
-            v-model="formData.sendTime"
-            type="datetime"
-            placeholder="发布时间"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
-        </el-form-item>
-        <el-form-item
-          v-if="formData.sendStatus === 2"
-          label="撤回时间"
-          prop="recallTime"
-        >
-          <el-date-picker
-            v-model="formData.recallTime"
-            type="datetime"
-            placeholder="撤回时间"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
-        </el-form-item>
-      </el-form>
+          <el-form-item label="通知标题" prop="title">
+            <el-input
+              v-model="formData.title"
+              placeholder="通知标题"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="通知内容" prop="content">
+            <editor v-model="formData.content" style="height: 500px" />
+          </el-form-item>
+          <el-form-item label="通知类型" prop="noticeType">
+            <el-input
+              v-model="formData.noticeType"
+              placeholder="通知类型"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="优先级" prop="priority">
+            <el-radio-group v-model="formData.priority">
+              <el-radio :value="0">低</el-radio>
+              <el-radio :value="1">中</el-radio>
+              <el-radio :value="2">高</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="目标类型" prop="tarType">
+            <el-radio-group v-model="formData.tarType">
+              <el-radio :value="0">全体</el-radio>
+              <el-radio :value="1">指定</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit()">确定</el-button>
@@ -397,6 +268,7 @@ defineOptions({
   name: "Notice",
   inheritAttrs: false,
 });
+import Editor from "@/components/WangEditor/index.vue";
 
 import NoticeAPI, {
   NoticePageVO,
@@ -427,7 +299,6 @@ const dialog = reactive({
 
 // 通知公告表单数据
 const formData = reactive<NoticeForm>({
-  sendStatus: 0, // 默认状态为未发布
   priority: 0, // 默认优先级为低
   tarType: 0, // 默认目标类型为全体
 });
@@ -436,9 +307,6 @@ const formData = reactive<NoticeForm>({
 const rules = reactive({
   title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
   content: [{ required: true, message: "请输入通知内容", trigger: "blur" }],
-  // releaseBy: [{ required: true, message: "请输入发布人", trigger: "blur" }],
-  sendTime: [{ required: true, message: "请输入发布时间", trigger: "blur" }],
-  recallTime: [{ required: true, message: "请输入撤回时间", trigger: "blur" }],
 });
 
 /** 查询通知公告 */
@@ -479,6 +347,20 @@ function handleOpenDialog(id?: number) {
   }
 }
 
+function releaseNotice(id: number) {
+  NoticeAPI.releaseNotice(id).then((res) => {
+    ElMessage.success("发布成功");
+    handleQuery();
+  });
+}
+
+function recallNotice(id: number) {
+  NoticeAPI.recallNotice(id).then((res) => {
+    ElMessage.success("撤回成功");
+    handleQuery();
+  });
+}
+
 /** 提交通知公告表单 */
 function handleSubmit() {
   dataFormRef.value.validate((valid: any) => {