政务通知

src/router/index.js

@@ -449,7 +449,7 @@ export const constantRoutes = [
           }
         ]
       },
-  // ----------liuj------------
+ 
     {
         path: '/jobHuntingList',
         component: Layout,
@@ -482,7 +482,43 @@ export const constantRoutes = [
           }
         ]
 
-      },
+  },
+       {
+        path: '/addNotice',
+        component: Layout,
+        children: [
+          {
+            name: '',
+            path: '',
+            component: () => import('@/views/news/addNotice'),
+            meta: {
+              title: '添加通知',
+              hidden: true,
+              breadcrumb: true
+            }
+          }
+        ]
+  },
+  {
+    path: '/noticeList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/noticeList'),
+        meta: {
+          title: '通知列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+
+  },
+      
+  // ----------liuj------------
+
   {
     path: '/topic',
     component: Layout,

src/views/news/addNotice.vue

@@ -0,0 +1,722 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle" />
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
+        <div class="formDiv">
+
+          <el-form-item label="标题：" prop="title" class="custom-align-right">
+            <el-input v-model="form.title" autocomplete="off" placeholder="请输入标题"></el-input>
+          </el-form-item>
+          <el-form-item label="类型：" prop="type" class="custom-align-right">
+            <el-radio-group v-model="form.type">
+              <el-radio :label="1">公告</el-radio>
+              <el-radio :label="2">通知</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="级别：" prop="level" class="custom-align-right">
+            <el-radio-group v-model="form.level">
+              <el-radio :label="1">常规</el-radio>
+              <el-radio :label="2">紧急</el-radio>
+              <el-radio :label="3">特急</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="内容：" prop="content" class="custom-align-right">
+            <el-input v-model="form.content" maxlength="500" autocomplete="off" placeholder="请输入内容" type="textarea"
+              rows="10"></el-input>
+          </el-form-item>
+          <el-form-item label="发布范围：" prop="city_arr_id" class="custom-align-right">
+            <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="请选择发布范围" :props="cityData"
+              filterable clearable></el-cascader>
+          </el-form-item>
+          <el-form-item label="行政职能："  prop="department_arr_id" class="custom-align-right">
+            <el-cascader :key="searchDepartmentKey" v-model="form.department_arr_id" placeholder="请选择行政职能"
+              popper-class="my_cascader" :props="searchDepartmentData" filterable clearable></el-cascader>
+          </el-form-item>
+          <el-form-item label="发布日期：" prop="timeList" class="custom-align-right">
+            <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" :picker-options="pickerOptions">
+            </el-date-picker>
+          </el-form-item>
+        
+          <el-form-item label="附件：" class="custom-align-right" prop="">
+            <div class="uploaderBox" @mouseenter="hovering = true" mouseleave="hovering = false">
+              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                <!-- 预览图片 -->
+                <img v-if="file && (fileType == 'jpeg' || fileType =='png' )" :src="file" class="avatar">
+                <div v-if="file && (fileType == 'pdf' || fileType =='word' )" class="chooseImgDiv1">
+                  <div>
+                    <div>{{file}}</div>
+                  </div>
+                </div>
+                <div v-else class="chooseImgDiv">
+                  <div>
+                    <img src="@/assets/public/upload/noImage.png">
+                    <div>选择文档</div>
+                  </div>
+                </div>
+              </el-upload>
+              <input type="hidden" v-model="form.imgurl">
+              <span class="photo_tips">支持文件形式pdf,word,jpg,文件最大2M。</span>
+              <div v-if="hovering && imgUrl" class="delete-button" @click="handleDelete">
+                <i class="el-icon-delete"></i>
+              </div>
+            </div>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="returnPage">返回</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus == true">确定</el-button>
+      <el-button type="primary" @click="addToServe" v-else>发布通知</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+import { quillEditor } from 'vue-quill-editor';
+import 'quill/dist/quill.snow.css';
+import ImageResize from 'quill-image-resize-module';
+import Quill from 'quill';  // 引入 Quill
+import Delta from 'quill-delta'; // 引入 Delta，用于手动修改文档
+//格式化时间
+import { formatLocalDate } from '@/utils/public';
+
+// 注册 Image Resize 模块
+Quill.register('modules/imageResize', ImageResize);
+//解决富文本样式居中不显示
+import 'quill/dist/quill.core.css';
+export default {
+  components: {
+    quillEditor,
+    tableTitle
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateNull = (rule, value, callback) => {
+      console.log(value, '-------------------------------')
+      if (value == '' || value == undefined || value == null) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateEmpty = (rule, value, callback) => {
+      console.log(value, '-------------------------------')
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule, value, callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+    return {
+      formLabelWidth: '80px',//表单的长度
+      //1.表单项 start ------------------------------------------------------------>
+      editStatus: false,
+      tableDivTitle: "添加通知",
+      searchCascaderKey: 0, //列表缓存key
+      website_id: 2,
+      file: '',
+      pickerOptions: {
+        selectableRange: '1900-01-01 to 2100-12-31', // 允许选择的日期范围
+        // disabledDate(time) {
+        //   return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
+        // },
+      },
+
+      //提交表单
+      form: {
+        //1.1使用了外链
+        title: '',//通知标题
+        type: 1,//类型：1：公告，2：通知
+        level: 1,//级别：1：常规，2：紧急，3：特急
+        city_arr_id: [],//行政区划
+        city_id: '',//城市id
+        content: "",
+        timelist: "",
+        file: "",//文件路径
+        department_arr_id: [],//部门id
+        department_id: '',//部门id
+      },
+      //1.2 表单验证规则
+      formRules: {
+        title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        type: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
+        department_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
+        level: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        content: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+      },
+      //1.3富文本编辑器配置
+      showHtml: false, //用于保存源码内容
+      editorHtml: '',
+      cascaderKey: 0,//弹窗用的key
+      websiteData: {
+        lazy: true,
+        checkStrictly: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'page': 1,
+            'pageSize': 1000,
+          }
+          self.$store.dispatch('news/websiteList', parames).then(res => {
+            if (res.data) {
+              const nodes = res.data.rows.map(item => ({
+                value: item.id,
+                label: item.website_name,
+                leaf: level >= 3,
+                children: []
+              }))
+
+              console.log(nodes, 'leaf')
+              resolve(nodes)
+            }
+          })
+        },
+      },
+
+      cityData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level, '====level-----')
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'pid': parentId
+          }
+          self.$store.dispatch('pool/getcityList', parames).then(res => {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+
+      imgurl: [],
+      //获取父级导航池
+      parentKey: 0,//获取父级导航
+      parentData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          console.log(resolve, 'node')
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level, 'level--1--');
+          let pid = level == 0 ? 0 : data.value
+          let website_id = self.form.website_id == '' ? 2 : self.form.website_id;
+          console.log(website_id, 'website_id--111-----');
+          let parames = {
+            'website_id': website_id,
+            'pid': pid
+          }
+          self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.category_id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            } else {
+              //输出报错原因
+              console.log(res.msg, 'getWebsiteNavList--1--');
+
+            }
+          })
+        }
+      },
+      //行政职能部门
+      searchDepartmentKey: 0, //列表缓存key
+      searchDepartmentData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'pid': parentId
+          }
+          self.$store.dispatch('pool/getDepartment', parames).then(res => {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      inputList: [
+        { value: '' }
+      ]
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+    async fetchWebsiteOptions() {
+      try {
+        const response = await this.$store.dispatch('news/websiteList', { page: 1, pageSize: 1000 });
+        if (response && response.data) {
+          this.websiteOptions = response.data.rows.map(item => ({
+            value: item.id,
+            label: item.website_name,
+          }));
+        }
+      } catch (error) {
+        console.error('获取网站列表失败:', error);
+      }
+    },
+    //获取用户身份信息
+    getUserInfo() {
+      this.$store.dispatch('public/getInfo').then(res => {
+        console.log(res)
+        this.userType = res.data.type_id;
+
+        //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //1.提交表单 start ------------------------------------------------------------>
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      //word  pdf
+      const isWord = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+      const isPdf = file.type === 'application/pdf';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      console.log(this.imgurl.length, '-0--------------------------------')
+      if (this.imgurl.length > 4) {
+        this.$message.warning('只能上传5张图片');
+        return false;
+      }
+
+      if (!isJPG && !isPNG && !isWord && !isPdf) {
+        this.$message.error('上传文件只能是 JPG、PNG、WORD、PDF 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传缩略图大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile', formData).then(res => {
+        this.file = res.data.imgUrl;//提供表单地址
+        this.fileType = res.data.fileType;
+        this.oldFileName = res.data.oldFileName;
+        this.form.file.push(res.data.imgUrl);//提供表单地址
+        console.log(res.data.imgUrl, '00000')
+      })
+      // 阻止默认的上传行为
+      return false;
+    },
+    deleteImage(index) { // 删除图片
+      this.file.splice(index, 1);
+    },
+    //1.2 提交表单
+    addToServe() {
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        console.log(this.form.validity, 'this.form.validity-----------------')
+        if (valid) {
+          if (this.form.validity) {
+            this.form.validity = formatLocalDate(this.form.validity);
+          }
+          if (this.form.department_arr_id.length == 0) {
+            this.form.department_id = 0;
+          }
+          if (this.form.city_arr_id.length == 0) {
+            this.form.city_id = 0;
+          }
+          console.log(typeof this.form.city_arr_id, '---=-==-=')
+          if (typeof this.form.city_arr_id == 'object') {
+            this.form.city_id = this.form.city_arr_id.at(-1) || 0;
+            this.form.city_arr_id = JSON.stringify(this.form.city_arr_id);
+          }
+          if (typeof this.form.department_arr_id == 'object') {
+            this.form.department_id = this.form.department_arr_id.at(-1) || 0;
+            this.form.department_arr_id = JSON.stringify(this.form.department_arr_id);
+          }
+          console.log(typeof this.form.time, '---=-==-=')
+          console.log(this.form.time.length, '---=-==-=')
+          if (this.form.time.length > 0) {
+            this.form.start = this.formatDate(this.form.time[0]);
+            this.form.end = this.formatDate(this.form.time[1]);
+            delete this.form.time;
+          }
+          delete this.form.cat_arr_id;
+          delete this.form.timelist;
+          delete this.form.catid;
+          this.form.file = this.file;
+          console.log(this.form, 'this.form-----------------')
+          this.$store.dispatch('news/addNotice', this.form).then(res => {
+            if (res.code == 200) {
+              //汇报结果
+              this.$message({
+                type: 'success',
+                message: '已成功添加通知！'
+              });
+              this.cleatForm();
+              //返回列表页
+              this.returnPage()
+            } else {
+              this.$message({
+                type: 'error',
+                message: "通知发布失败，请稍后再试！"
+              });
+            }
+          })
+        }
+      })
+    },
+    formatDate(date) {
+      if (date instanceof Date) {
+        return date.toISOString().slice(0, 19).replace('T', ' ');
+      } else if (typeof date === 'string') {
+        // 将 ISO 8601 格式的字符串转换为 MySQL 期望的格式
+        const parsedDate = new Date(date);
+        return parsedDate.toISOString().slice(0, 19).replace('T', ' ');
+      } else {
+        return date;
+      }
+    },
+    //1.3 清理表单
+    cleatForm() {
+    },
+    //提交表单 end ------------------------------------------------------------>
+
+    //2.跳转操作 start ------------------------------------------------------------>
+    returnPage() {
+      this.$router.push({
+        path: '/noticeList',
+      });
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //3.回显操作 ------------------------------------------------------------>
+    //3.1回显数据
+    getMainData() {
+      let data = {
+        id: this.$route.query.id
+      };
+      this.$store.dispatch('news/getNoticeInfo', data).then(res => {
+        console.log(res);
+        this.form.name = res.data.name;
+        // 回显导航池
+        this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
+        this.form.city_arr_id = Array.isArray(res.data.city_arr_id) ? res.data.city_arr_id : JSON.parse(res.data.city_arr_id);
+        this.parentKey += 1; // 触发级联选择器重新加载
+        this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
+        //回显推荐等级
+
+        this.form.title = res.data.title;
+        this.form.type = res.data.type;
+        this.form.website_id = res.data.website_id;
+        this.form.level = res.data.level;
+        this.form.content = res.data.content;
+        this.form.department_arr_id = Array.isArray(res.data.department_arr_id) ? res.data.department_arr_id : JSON.parse(res.data.department_arr_id);
+        this.form.city_id = res.data.city_id;
+        this.form.department_id = res.data.department_id;
+        this.form.cat_id = res.data.cat_id;
+        this.form.time = [res.data.start, res.data.end];
+        this.form.file = res.data.file;
+        this.file = res.data.file; 
+        const filePath = res.data.file;
+        const fileExtension = filePath.split('.').pop().toLowerCase();
+        this.fileType = fileExtension; // 设置文件类型
+      })
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        // self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
+        //     if (res.data) {
+        //       const nodes = res.data.map(item => ({
+        //         value: item.category_id,
+        //         label: item.name,
+        //         leaf: level >= 3,
+        //         children: []
+        //       }))
+        //       resolve(nodes)
+        await this.$store.dispatch('pool/categoryList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.form.cat_arr_id = path; // 确保最后一级路径正确设置
+              this.parentKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+    //1.3提交修改
+    editToServe() {
+      console.log(this.form)
+      //添加要修改的id
+      this.form.id = this.editId;
+      //先进行验证
+      if (this.form.islong == 1 && this.form.validity == null) {
+        this.form.validity = '1970-01-01 00:00:00';
+      }
+      this.$refs.form.validate(valid => {
+
+        if (valid) {
+          if (this.form.validity) {
+            this.form.validity = formatLocalDate(this.form.validity);
+          }
+          if (this.form.department_arr_id.length == 0) {
+            this.form.department_id = 0;
+          }
+          if (this.form.city_arr_id.length == 0) {
+            this.form.city_id = 0;
+          }
+          console.log(typeof this.form.city_arr_id, '---=-==-=')
+          if (typeof this.form.city_arr_id == 'object') {
+            this.form.city_id = this.form.city_arr_id.at(-1) || 0;
+            this.form.city_arr_id = JSON.stringify(this.form.city_arr_id);
+          }
+          if (typeof this.form.department_arr_id == 'object') {
+            this.form.department_id = this.form.department_arr_id.at(-1) || 0;
+            this.form.department_arr_id = JSON.stringify(this.form.department_arr_id);
+          }
+          console.log(typeof this.form.time, '---=-==-=')
+          console.log(this.form.time.length, '---=-==-=')
+          if (this.form.time.length > 0) {
+            this.form.start = this.formatDate(this.form.time[0]);
+            this.form.end = this.formatDate(this.form.time[1]);
+            delete this.form.time;
+          }
+          delete this.form.cat_arr_id;
+          delete this.form.timelist;
+          delete this.form.catid;
+          this.form.file = this.file;
+          console.log(this.form, 'this.form-----------------')
+          this.$store.dispatch('news/updateNotice', this.form).then(res => {
+            if (res.code != 200) {
+              this.$message.error("修改失败，请稍后再试！");
+            } else {
+              //汇报结果
+              this.$message({
+                type: 'success',
+                message: '已成功编辑通知！'
+              });
+              this.cleatForm();
+              //返回列表页
+              this.returnPage()
+            }
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //跳转操作 end ------------------------------------------------------------>
+    //4.富文本编辑器 start ------------------------------------------------------------>
+    //4.1 编辑器点击上传图片
+    //4.2 图片粘贴上传
+    // 处理从网页粘贴的图片 URL
+    //富文本编辑器 end ------------------------------------------------------------>
+
+  },
+  watch: {
+  },
+  mounted() {
+    //1.判断是新建还是回显
+    if (this.$route.query.id != undefined) {
+      this.editId = this.$route.query.id;
+      this.editStatus = true;
+      this.tableDivTitle = "编辑通知";
+
+      console.log("编辑通知")
+      this.getMainData();
+    } else {
+      this.editStatus = false;
+      console.log("添加通知！")
+    }
+    this.fetchWebsiteOptions();
+    this.getUserInfo();
+    //复制内容到富文本 start ------------------------------------------------------------>
+    //复制富文本 end ------------------------------------------------------------>
+  },
+};
+</script>
+<style scoped lang="less">
+//文本编辑器
+.QuillTitle {
+  line-height: 36px;
+  font-size: 14px;
+  color: #606266;
+  font-weight: bold;
+  padding-left: 30px;
+
+  span {
+    color: #ff4949
+  }
+
+  .QuillModelBtn {
+    display: inline-block;
+    margin-left: 10px;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+  }
+}
+
+.editor-container {
+  height: 420px;
+  padding-bottom: 20px;
+}
+
+.my-quill-editor {
+  height: 320px;
+}
+
+.ql-editor {
+  height: 320px;
+}
+
+/* 富文本对齐方式 */
+.ql-align-center {
+  text-align: center;
+}
+
+.ql-align-right {
+  text-align: right;
+}
+
+.ql-indent-1 {
+  padding-left: 16px;
+}
+
+.ql-indent-2 {
+  padding-left: 32px;
+}
+
+.ql-indent-3 {
+  padding-left: 48px;
+}
+
+.ql-indent-4 {
+  padding-left: 64px;
+}
+
+.ql-indent-5 {
+  padding-left: 80px;
+}
+
+.ql-indent-6 {
+  padding-left: 96px;
+}
+
+.ql-indent-7 {
+  padding-left: 112px;
+}
+
+.ql-indent-8 {
+  padding-left: 128px;
+}
+
+
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item>.el-form-item__label {
+  line-height: 140px !important;
+}
+
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none;
+  /* 禁止用户拖拽调整大小 */
+}
+
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right;
+  /* 设置标签文字右对齐 */
+}
+
+::v-deep .el-select {
+  width: 100%;
+  /* 禁止用户拖拽调整大小 */
+}
+
+::v-deep .el-input-group__prepend {
+  color: black !important;
+}
+
+.formLabelFloatBox {
+  margin-bottom: 10px;
+  position: relative;
+
+  .formLabeladdIcon {
+    position: absolute;
+    right: 45px;
+    top: 5px;
+    width: 38px;
+    height: 24px;
+  }
+
+  .formLabelDelIcon {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    width: 38px;
+    height: 24px;
+  }
+}
+
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/news/noticeList.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
+        <el-row>
+
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">标题：</div>
+              <el-input placeholder="请输入标题" autocomplete="off" v-model="getApiData.title" />
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">公告级别：</div>
+              <el-select v-model="getApiData.level" placeholder="请选择..">
+                <el-option label="常规" value="1"></el-option>
+                <el-option label="紧急" value="2"></el-option>
+                <el-option label="特急" value="3"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+    </div>
+
+    <div class="layerBoxNoBg">
+      <div>
+        <el-button type="primary" @click="goCreat">发布通知</el-button>
+      </div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" @click="getData('search')">搜索</el-button>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle" />
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="title" label="标题" width="">
+
+            </el-table-column>
+            <el-table-column prop="type" label="类型" width="">
+
+
+              <template slot-scope="scope">
+                <span v-if="scope.row.type == 1">
+                  公告
+                </span>
+                <span v-if="scope.row.type == 2">
+                  通知
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="level" label="级别" width="">
+              <template slot-scope="scope">
+                <span v-if="scope.row.level == 1">
+                  常规
+                </span>
+                <span v-if="scope.row.level == 2">
+                  紧急
+                </span>
+                <span v-if="scope.row.level == 3">
+                  特急
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="start" label="开始时间" width="">
+
+            </el-table-column>
+            <el-table-column prop="end" label="到期时间" width=""></el-table-column>
+            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
+
+            <el-table-column fixed="right" label="操作" width="200" header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                      class="el-icon-delete"></i>删除</div>
+                  <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i
+                      class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+    <!--分页 start------------------------------------------------------------>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page"
+            @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
+            :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle: "通知列表",
+      tableData: [],//内容
+      editId: 0,//要修改的网站id
+      getApiData: {
+        name: "",//标题
+        category_name: "",//导航池id
+        website_name: "",//网站名称
+        type_id: "",//发布类型
+
+        page: 1,//当前是第几页
+        page_size: 10,//一共多少条
+      },
+      allCount: 0,//总条数
+      //分页相关 end ------------------------------------------------------------>
+
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(type) {
+      if (type == "search") {
+        this.getApiData.page = 1;
+      }
+      console.log(this.getApiData, '---1--')
+      this.$store.dispatch('news/getNoticeList', this.getApiData).then(res => {
+        console.log(this.getApiData, '---2-')
+        let data = [];
+        for (let item of res.data.rows) {
+          data.push(item)
+        }
+        this.tableData = res.data.rows; //给与内容
+        this.allCount = res.data.count; //给与总条数
+      })
+    },
+    //1.2 删除内容
+    deleteRow(id) {
+      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        this.$store.dispatch('news/deleteNotice', { id: id }).then(res => {
+          this.getData();
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.3 修改网站状态
+    upRow(id, status) {
+      let data = {
+        id: id,
+        status: status
+      }
+      this.$store.dispatch('news/upArticleStatus', data).then(res => {
+        if (res.code == 200) {
+          this.$message({
+            type: 'success',
+            message: '通知状态已修改!'
+          });
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.4 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.5 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.6 重置按钮
+    clearSearchList() {
+      this.tableData = [];
+      this.getApiData.title = "";
+      this.getApiData.level = "";
+
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+    //2.添加新闻 start ------------------------------------------------------------>
+    //跳转到通知发布页面
+    goCreat() {
+      this.$router.push({
+        path: '/addNotice',
+      });
+    },
+    goEdit(id) {
+      let data = {
+        id: id
+      }
+      this.$router.push({
+        path: '/addNotice',
+        query: data
+      });
+    }
+    //添加新闻 end ------------------------------------------------------------>
+  },
+  mounted() {
+    //1.获得初始数据
+    this.getData();
+  }
+}
+</script>
+<style scoped lang="less"></style>