公告

prettier.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+    printWidth: 120,
     tabWidth: 4,
     semi: false,
     vueIndentScriptAndStyle: false,

src/api/system/notice.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
-// 查询公告列表
+// 查询公告列表+详情
 export function listNotice(query) {
   return request({
-    url: '/system/notice/list',
+    url: '/material-mall/notice/list',
     method: 'get',
     params: query
   })
@@ -20,7 +20,8 @@ export function getNotice(noticeId) {
 // 新增公告
 export function addNotice(data) {
   return request({
-    url: '/system/notice',
+    // url: '/system/notice',
+    url: '/material-mall/notice',
     method: 'post',
     data: data
   })
@@ -29,7 +30,7 @@ export function addNotice(data) {
 // 修改公告
 export function updateNotice(data) {
   return request({
-    url: '/system/notice/edit',
+    url: '/material-mall/notice/edit',
     method: 'post',
     data: data
   })

src/views/system/notice/index.vue

@@ -42,9 +42,10 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:notice:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="success"
           plain
@@ -53,8 +54,9 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:notice:edit']"
-        >修改</el-button>
+          >修改</el-button
-      </el-col>
+        >
+      </el-col> -->
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -64,25 +66,28 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:notice:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" prop="noticeId" width="100" />
       <el-table-column
-        label="公告标题"
+        label="序号"
         align="center"
-        prop="noticeTitle"
+        type="index"
-        :show-overflow-tooltip="true"
+        width="80"
+        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
       />
+      <el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
       <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType" />
         </template>
       </el-table-column>
+      <el-table-column label="有效日期" align="center" prop="expiryDate" :show-overflow-tooltip="true" />
       <el-table-column label="状态" align="center" prop="status" width="100">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status" />
@@ -96,20 +101,24 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-search" @click="handleUpdate(scope.row, 2)">查看</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            @click="handleUpdate(scope.row, 1)"
             v-hasPermi="['system:notice:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:notice:remove']"
-          >删除</el-button>
+            style="color: #f56c6c"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -124,8 +133,8 @@
 
     <!-- 添加或修改公告对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px" :disabled="isDetail" v-if="open">
-        <el-row>
+        <el-row :gutter="10">
           <el-col :span="12">
             <el-form-item label="公告标题" prop="noticeTitle">
               <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
@@ -143,38 +152,92 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="24">
+          <el-col :span="12">
-            <el-form-item label="状态">
+            <el-form-item label="组织机构" prop="deptId">
+              <treeselect
+                v-model="form.deptId"
+                :options="deptOptions"
+                :normalizer="normalizer"
+                placeholder="请选择组织机构"
+                :disabled="isDetail"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="角色" prop="roleId">
+              <el-select v-model="form.roleId" placeholder="请选择角色">
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="是否短信通知" label-width="120" prop="isSms">
+              <el-radio-group v-model="form.isSms">
+                <el-radio :label="'0'">是</el-radio>
+                <el-radio :label="'1'">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
               <el-radio-group v-model="form.status">
-                <el-radio
+                <el-radio v-for="dict in dict.type.sys_notice_status" :key="dict.value" :label="dict.value">{{
-                  v-for="dict in dict.type.sys_notice_status"
+                  dict.label
-                  :key="dict.value"
+                }}</el-radio>
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="内容">
+            <el-form-item label="有效期" prop="expiryDate">
-              <editor v-model="form.noticeContent" :min-height="192"/>
+              <el-date-picker
+                v-model="form.expiryDate"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+                :picker-options="pickerOptions"
+              >
+              </el-date-picker>
             </el-form-item>
           </el-col>
         </el-row>
+        <el-form-item label="内容" prop="noticeContent">
+          <!-- <editor v-model="form.noticeContent" :min-height="192" /> -->
+          <el-input
+            type="textarea"
+            v-model="form.noticeContent"
+            :rows="8"
+            show-word-limit
+            maxlength="500"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button v-if="!isDetail" type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice'
+import { deptTreeSelect } from '@/api/system/user'
+import { listRole } from '@/api/system/role'
 
 export default {
-  name: "Notice",
+  name: 'Notice',
   dicts: ['sys_notice_status', 'sys_notice_type'],
+  components: { Treeselect },
   data() {
     return {
       // 遮罩层
@@ -192,47 +255,64 @@ export default {
       // 公告表格数据
       noticeList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
+      isDetail: false, // 是否详情
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         noticeTitle: undefined,
         createBy: undefined,
-        status: undefined
+        status: undefined,
+        isHome: 1,
       },
       // 表单参数
-      form: {},
+      form: {
+        noticeTitle: '', // 公告标题
+        noticeType: '', // 公告类型
+        deptId: undefined, // 组织机构
+        roleId: undefined, // 角色
+        isSms: '1', // 是否短信通知
+        status: '0', // 状态
+        expiryDate: '', // 有效期
+        noticeContent: '', // 公告内容
+      },
       // 表单校验
       rules: {
-        noticeTitle: [
+        noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
-          { required: true, message: "公告标题不能为空", trigger: "blur" }
+        noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }],
-        ],
+        noticeContent: [{ required: true, message: '公告内容不能为空', trigger: 'blur' }],
-        noticeType: [
+      },
-          { required: true, message: "公告类型不能为空", trigger: "change" }
+      deptOptions: [], // 组织机构树选项
-        ]
+      roleOptions: [], // 角色选项
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < new Date().setHours(0, 0, 0, 0)
+        },
+      },
     }
-    };
   },
   created() {
-    this.getList();
+    this.getList()
+    this.getDeptTree()
+    this.getRoleOptions()
   },
   methods: {
     /** 查询公告列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
-      listNotice(this.queryParams).then(response => {
+      listNotice(this.queryParams).then((response) => {
-        this.noticeList = response.rows;
+        this.noticeList = response.data.rows
-        this.total = response.total;
+        this.total = response.data.total
-        this.loading = false;
+        this.loading = false
-      });
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
+      this.open = false
-      this.reset();
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -241,72 +321,123 @@ export default {
         noticeTitle: undefined,
         noticeType: undefined,
         noticeContent: undefined,
-        status: "0"
+        status: '0',
-      };
+      }
-      this.resetForm("form");
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
+      this.queryParams.pageNum = 1
-      this.getList();
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
+      this.resetForm('queryForm')
-      this.handleQuery();
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.noticeId)
+      this.ids = selection.map((item) => item.noticeId)
       this.single = selection.length != 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
+      this.isDetail = false
-      this.open = true;
+      this.reset()
-      this.title = "添加公告";
+      this.open = true
+      this.title = '添加公告'
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate(row, type) {
-      this.reset();
+      if (type == 2) {
+        this.isDetail = true
+        this.title = '查看公告'
+      } else {
+        this.isDetail = false
+        this.title = '修改公告'
+      }
+      this.reset()
       const noticeId = row.noticeId || this.ids
-      getNotice(noticeId).then(response => {
+      listNotice({ noticeId, isHome: 1 }).then((response) => {
-        this.form = response.data;
+        this.form = response.data.rows[0]
-        this.open = true;
+        this.open = true
-        this.title = "修改公告";
+      })
-      });
     },
     /** 提交按钮 */
     submitForm: function () {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
+          console.log('🚀 ~ 提交 ~ this.form:', this.form)
           if (this.form.noticeId != undefined) {
-            updateNotice(this.form).then(response => {
+            updateNotice(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
+              this.$modal.msgSuccess('修改成功')
-              this.open = false;
+              this.open = false
-              this.getList();
+              this.getList()
-            });
+            })
           } else {
-            addNotice(this.form).then(response => {
+            addNotice(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
+              this.$modal.msgSuccess('新增成功')
-              this.open = false;
+              this.open = false
-              this.getList();
+              this.getList()
-            });
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       const noticeIds = row.noticeId || this.ids
-      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
+      this.$modal
-        return delNotice(noticeIds);
+        .confirm('是否确认删除')
-      }).then(() => {
+        .then(function () {
-        this.getList();
+          return delNotice(noticeIds)
-        this.$modal.msgSuccess("删除成功");
+        })
-      }).catch(() => {});
+        .then(() => {
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
+        })
+        .catch(() => {})
+    },
+    // 处理树结构数据
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
       }
+      return {
+        id: node.id,
+        label: node.label,
+        children: node.children,
+      }
+    },
+    // 获取部门树结构数据
+    async getDeptTree() {
+      try {
+        const res = await deptTreeSelect()
+        this.deptOptions = res.data
+        // console.log('🚀 ~ getDeptTree ~ this.deptOptions:', this.deptOptions)
+      } catch (error) {
+        console.log('🚀 ~ getDeptTree ~ error:', error)
+      }
+    },
+    // 获取角色下拉
+    async getRoleOptions() {
+      try {
+        const res = await listRole({ pageNum: 1, pageSize: 9999 })
+        if (res.code !== 200 || !res.rows) {
+          return
+        }
+        this.roleOptions = res.rows.map((item) => {
+          return {
+            value: item.roleId,
+            label: item.roleName,
+          }
+        })
+        // console.log('🚀 ~ this.roleOptions=res.rows.map ~ this.roleOptions:', this.roleOptions)
+      } catch (error) {
+        console.log('🚀 ~ getRoleOptions ~ error:', error)
+      }
+    },
+  },
 }
-};
 </script>

vue.config.js

@@ -36,7 +36,7 @@ module.exports = {
             // detail: https://cli.vuejs.org/config/#devserver-proxy
             [process.env.VUE_APP_BASE_API]: {
                 // target: `http://localhost:18080`,
-                // target: `http://192.168.2.246:18080`,//马
+                // target: `http://192.168.0.96:28080`,//马
                 // target: `http://192.168.0.110:18080`,//洪
                 // target: `http://192.168.0.234:18080`,//阮
                 // target: `http://36.33.26.201:17788/proxyApi`, //测试