修改警方公告

odc.xiaohui

2023-04-14 15fccc0a1fedf1244516b108a4dc8a8acdfa3c7c

修改警方公告

 src/api/announcement.js

New file
@@ -0,0 +1,16 @@
import request from '@/plugins/request'

export function getannouncementList(params) {
    return request({
        url: '/policePublicity',
        method: 'get',
        params
    })
}
export function addannouncementList(params) {
    return request({
        url: '/policePublicity',
        method: 'post',
        data:params
    })
}

 src/router/index.js

@@ -65,6 +65,11 @@
                component: () => import('../views/common/Publicity.vue')
            },
            {
                path: '/announcement',
                name: 'announcement',
                component: () => import('../views/common/announcement.vue')
            },
            {
                path: '/question',
                name: 'question',
                component: () => import('../views/common/Question.vue')

 src/views/Home.vue

@@ -82,6 +82,12 @@
                <span>公共宣传</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/announcement">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>警方公告</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/question">
              <template slot="title">
                <i class="el-icon-menu"></i>

 src/views/common/Audit.vue

@@ -168,7 +168,8 @@
                        :with-credentials="true"
                        :on-preview="handlePictureCardPreview"
                        :on-success="handIdCardMaterials"
                        :on-remove="handleRemove"
                        :on-remove="handleRemovecard"
                        :file-list="auditInfo.cardimg"
                       >
                      <i slot="default" class="el-icon-plus"></i>
                    </el-upload>
@@ -187,7 +188,8 @@
                        :with-credentials="true"
                        :on-preview="handlePictureCardPreview"
                        :on-success="handContractMaterials"
                        :on-remove="handleRemove"
                        :on-remove="handleRemovecontractimg"
                        :file-list="auditInfo.contractimg"
                       >
                      <i slot="default" class="el-icon-plus"></i>
                    </el-upload>
@@ -213,7 +215,8 @@
                        :with-credentials="true"
                        :on-preview="handlePictureCardPreview"
                        :on-success="handTransactionMaterials"
                        :on-remove="handleRemove"
                        :on-remove="handleRemovetransaction"
                        :file-list="auditInfo.transactionimg"
                        >
                      <i slot="default" class="el-icon-plus"></i>
                    </el-upload>
@@ -226,7 +229,8 @@
                        :with-credentials="true"
                        :on-preview="handlePictureCardPreview"
                        :on-success="handTlseMaterials"
                        :on-remove="handleRemove"
                        :on-remove="handleRemoveelse"
                        :file-list="auditInfo.elseimg"
                       >
                      <i slot="default" class="el-icon-plus"></i>
                    </el-upload>
@@ -256,7 +260,7 @@
        <el-button type="primary" @click="checkAdd">确 定</el-button>
      </span>
      <!-- 图片放大弹窗 -->
      <el-dialog :visible.sync="dialogVisible">
      <el-dialog :visible.sync="dialogVisible" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-dialog
@@ -528,8 +532,11 @@
  methods: {
    handTlseMaterials(res){
      if (res.code === 200) {
        this.elseList.push({
          data: res.data
        this.auditInfo.elseimg.push({
          name: res.data,
          url: '/minio/img/' + res.data,
          // uid: this.addPublicityForm.img.length
          response: {data:res.data}
        })
      } else {
        this.$message.error(res.msg)
@@ -538,8 +545,11 @@
    },
    handTransactionMaterials(res){
      if (res.code === 200) {
        this.transacList.push({
          data: res.data
        this.auditInfo.transactionimg.push({
          name: res.data,
          url: '/minio/img/' + res.data,
          // uid: this.addPublicityForm.img.length
          response: {data:res.data}
        })
      } else {
        this.$message.error(res.msg)
@@ -548,8 +558,11 @@
    },
    handContractMaterials(res){
      if (res.code === 200) {
        this.contractList.push({
          data: res.data
        this.auditInfo.contractimg.push({
          name: res.data,
          url: '/minio/img/' + res.data,
          // uid: this.addPublicityForm.img.length
          response: {data:res.data}
        })
      } else {
        this.$message.error(res.msg)
@@ -557,9 +570,13 @@
      console.log(res,this.auditInfo)
    },
    handIdCardMaterials(res){
      console.log(res)
      if (res.code === 200) {
        this.idCardList.push({
          data: res.data
        this.auditInfo.cardimg.push({
          name: res.data,
          url: '/minio/img/' + res.data,
          // uid: this.addPublicityForm.img.length
          response: {data:res.data}
        })
      } else {
        this.$message.error(res.msg)
@@ -573,6 +590,19 @@
      // file是点击删除的文件，fileList时删除后剩下的文件列表
      console.log(file,fileList)
      // this.auditInfo.idCardMaterials = fileList[0].response
    },
    handleRemovecard(file,fileList){
      console.log(fileList)
      this.auditInfo.cardimg = fileList
    },
    handleRemovecontractimg(file,fileList){
      this.auditInfo.contractimg = fileList
    },
    handleRemovetransaction(file,fileList){
      this.auditInfo.transactionimg = fileList
    },
    handleRemoveelse(file,fileList){
      this.auditInfo.elseimg = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
@@ -627,20 +657,21 @@
      let form = null;
      form = this.auditInfo;
      console.log(form,this.idCardList)
      //处理图片身份证
      if (this.idCardList.length>0){
        form.idCardMaterials=this.idCardList.map(item=>item.data).join(',')
      }else {form.idCardMaterials=''}
      if (this.contractList.length>0){
        form.contractMaterials=this.contractList.map(item=>item.data).join(',')
      }else {form.contractMaterials=''}
      if (this.transacList.length>0){
        form.transactionMaterials=this.transacList.map(item=>item.data).join(',')
      }else {form.transactionMaterials=''}
      if (this.elseList.length>0){
        form.elseMaterials=this.elseList.map(item=>item.data).join(',')
      }else {form.elseMaterials=''}

      if (this.fromTitle=='添加'){
        //处理图片身份证
        if (form.cardimg.length>0){
          form.idCardMaterials=form.cardimg.map(item=>item.response.data).join(',')
        }else {form.idCardMaterials=''}
        if (form.contractimg.length>0){
          form.contractMaterials=form.contractimg.map(item=>item.response.data).join(',')
        }else {form.contractMaterials=''}
        if (form.transactionimg.length>0){
          form.transactionMaterials=form.transactionimg.map(item=>item.response.data).join(',')
        }else {form.transactionMaterials=''}
        if (form.elseimg.length>0){
          form.elseMaterials=form.elseimg.map(item=>item.response.data).join(',')
        }else {form.elseMaterials=''}
        report(form).then(res=>{
          this.checkVisible=false
          console.log(res)
@@ -736,6 +767,9 @@

    async getCauseOptions() {
      const { data: data } = await this.$http.get('/api/cause/getCauseIdAndName');
      data.data.map(item=>{
        item.id=Number(item.id)
      })
      this.causeOptions = data.data;
      console.log(this.causeOptions)
    },
@@ -795,6 +829,10 @@
      this.fromDis=false
      this.picShow= ''
      this.auditInfo= {
        elseimg:[],
        transactionimg:[],
        cardimg:[],
        contractimg:[],
        pic: '',
        reporterName: '',
        mobile: '',

 src/views/common/announcement.vue

New file
@@ -0,0 +1,467 @@
<template>
  <div style="height: 100%">
    <el-card style="height: 100%">
      <template slot="header">
        <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
          <el-form-item label="标题：">
            <el-input v-model="queryInfo.publicityTitle" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="queryInfo.status" :style="{ width: '120px' }" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAnnounce">添加</el-button>
          </el-form-item>

          <el-form-item>
            <el-upload :before-upload="beforeAvatarUpload" :limit="1" :on-success="respond" :show-file-list="false"
                       action="/api/publicity/upload " class="upload-demo" name="multipartFile">
              <!--              <el-button type="primary">导入</el-button>-->
            </el-upload>
          </el-form-item>
        </el-form>
      </template>
      <template>
        <el-table :data="publicityList" style="width: 100%">

          <el-table-column align="center" label="序号" type="index" width="180">
            <template slot-scope="scope">
              <span>{{ (current - 1) * size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标题" prop="title" width="180">
          </el-table-column>
          <el-table-column align="center" header-align="center" label="状态" prop="status" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">未发布</span>
              <span v-if="scope.row.status == 1">已发布</span>
              <span v-if="scope.row.status == 2">下架</span>
            </template>
          </el-table-column>

          <el-table-column align="center" header-align="center" label="发布时间" prop="ctime" width="180">
          </el-table-column>
          <el-table-column align="conter" label="操作">
            <template slot-scope="scope">
              <el-button size="medium" type="text" @click="details(scope.row.id)">详情</el-button>
              <el-button :disabled="scope.row.status == 2" size="medium" type="text"
                         @click="punlish(scope.row.id, scope.row.status)">
                <span v-if="scope.row.status === 1" style="color:#ff0000">下架</span>
                <span v-else>发布</span>
              </el-button>
              <el-button size="medium" style="color:#ff0000" type="text" @click="remove(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination :current-page="queryInfo.current" :page-size="queryInfo.size" :total="total"
                     layout="prev, pager, next" @current-change="handleCurrentChange"></el-pagination>
    </el-card>

    <!--添加公共宣传弹窗-->
    <el-dialog :append-to-body="true" :before-close="addPublicityClose" :visible.sync="addPublicityVisibel" title="警方公告添加"
               width="50%">
      <el-row :gutter="15">
        <el-form ref="addPublicityForm" :model="addPublicityForm" :rules="rules" label-width="100px" size="medium">
          <el-col :span="12">
            <el-form-item label="标题 " prop="title">
              <el-input v-model="addPublicityForm.title" :style="{ width: '100%' }" clearable
                        placeholder="请输入标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="正文图片">
              <el-upload
                  :file-list="addPublicityForm.img"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="uploadSuccess3"
                  :with-credentials="true"
                  action="/api/minio/upload"
                  list-type="picture-card">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容 " prop="content">
              <el-input v-model="addPublicityForm.text" :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" clearable
                        placeholder="请输入公告内容" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPublicityVisibel = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 图片放大弹窗 -->
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" alt="" width="100%">
    </el-dialog>

    <!--公共宣传详情弹窗-->
    <el-dialog :append-to-body="true" :before-close="detailsVisibleclose" :visible.sync="detailsVisible" title="警方公告详情"
               width="50%">

      <el-row :gutter="15">
        <el-form ref="addGroupForm" :model="detailsRow" label-width="100px" size="medium">
          <el-col :span="12">
            <el-form-item label="标题" prop="effectiveEtime">
              <el-input v-model="detailsRow.title" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="正文图片">
              <el-upload
                  :file-list="detailsRow.media"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="uploadSuccess3"
                  :with-credentials="true"
                  action="/api/minio/upload"
                  class="freePic"
                  disabled
                  list-type="picture-card">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容 " prop="text">
              <el-input v-model="detailsRow.text" :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" disabled
                        placeholder="请输入公告内容" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="公告有效期" prop="effectiveStime">
              <el-date-picker v-model="detailsGroupAn.effectiveStime" type="datetime" placeholder="选择日期时间" disabled
                :style="{ width: '100%' }" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="至" prop="effectiveEtime">
              <el-date-picker v-model="detailsGroupAn.effectiveEtime" type="datetime" placeholder="选择日期时间" disabled
                :style="{ width: '100%' }" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="发布时间" prop="effectiveEtime">
              <el-date-picker v-model="detailsRow.ctime" :style="{ width: '100%' }" disabled placeholder="选择日期时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="创建人" prop="effectiveEtime">
              <el-input v-model="detailsGroupAn.createName" disabled></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <span v-if="detailsRow.status === 1">已发布</span>
              <span v-else-if="detailsRow.status === 0">未发布</span>
              <span v-else="detailsRow.status === 2">已下架</span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <!-- <div style="display:flex; width:180;">
        <div style="display:flex; width:180;">
          <h4>标题</h4>
          <p>{{ detailsRow.publicityTitle }}</p>
        </div>
        <div style="display:flex; width:180;">
          <h4>内容</h4>
          <p>{{ detailsRow.text }}</p>
        </div>
        <div style="display:flex; width:180;">
          <h4>创建时间</h4>
          <p>{{ detailsRow.ctime }}</p>
        </div>
      </div> -->

      <!-- <el-table-column width="180" prop="effectiveStime" label="群组公告"></el-table-column>
            <el-table-column width="120" prop="status" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status === 1">已发布</span>
                <span v-else-if="scope.row.status === 0">未发布</span>
                <span v-else="scope.row.status=== 2">已下架</span>
              </template>
            </el-table-column>
            <el-table-column width="100" prop="createName" label="创建人"></el-table-column>
            <el-table-column width="180" prop="publishTime" label="发布时间">
            </el-table-column> -->

    </el-dialog>

  </div>
</template>

<script>
import {
  getPublicityList,
  addPublicityList
} from '@/api/publicty'
import {addannouncementList, getannouncementList} from "@/api/announcement";

export default {
  name: "Publicity",
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      //详细内容弹框
      detailsVisible: false,
      //详细内容
      detailsRow: [],
      //表单提交内容
      addPublicityForm: {
        title: '',
        text: '',
        img: []
      },
      //添加弹框
      addPublicityVisibel: false,
      //序号当前页
      current: 1,
      //序号数目
      size: 10,
      //页面查询总数
      total: null,
      //查询条件
      queryInfo: {
        publicityTitle: '',
        status: null,
        current: 1,
        size: 10
      },
      rules: {
        publicityTitle: [{
          required: true,
          message: '请输入标题 ',
          trigger: 'blur'
        }],
        text: [{
          required: true,
          message: '请输入内容 ',
          trigger: 'blur'
        }],
      },

      options: [
        {
          value: null,
          label: '全部'
        },
        {
          value: '0',
          label: '未发布'
        },
        {
          value: '1',
          label: '已发布'
        }

      ],
      publicityList: []
      ,
    }
  },
  created() {
    this.init();

  },
  methods:
      {
        addAnnounce() {
          this.addPublicityVisibel = true
          this.addPublicityForm = {
            title: '',
            text: '',
            img: []
          }
        },
        uploadSuccess3(res, file) {
          if (res.code === 200) {
            this.addPublicityForm.img.push({
              name: res.data,
              url: '/minio/img/' + res.data,
              uid: this.addPublicityForm.img.length
            })
          } else {
            this.$message.error(res.msg)
          }
        },
        // 正文图片上传,删除操作
        handleRemove(file, fileList) {
          // file是点击删除的文件，fileList时删除后剩下的文件列表
          console.log(this.addPublicityForm.img)
          this.addPublicityForm.img = fileList
          console.log(this.addPublicityForm.img)
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        },
        //删除
        remove(val) {
          this.$http.delete('/api/policePublicity/' + val).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })

            this.search();
          })
        },
        //发布/下架
        punlish(val, val2) {
          if (val2 == 0) {
            this.$http.get('/api/policePublicity/release/' + val).then(res => {
                  this.$message({
                    message: '发布成功',
                    type: 'success'
                  })

                  this.search();
                }
            )
          }
          if (val2 == 1) {
            this.$http.get('/api/policePublicity/offline/' + val).then(res => {
                  this.$message({
                    message: '下架成功',
                    type: 'success'
                  })
                  this.search();
                }
            );
          }
        },

        //详情
        details(val) {
          this.detailsVisible = true;
          this.$http.get('/api/policePublicity/' + val).then(res => {
            this.detailsRow = res.data.data
            this.detailsRow.media = this.detailsRow['media'].split(',').map(item => {
              return {
                name: item,
                url: '/minio/img/' + item,
                uid: this.detailsRow['media'].split(',').length
              }
            })
            this.fileList = this.detailsRow.media
          });
        },
        //添加
        add() {
          this.$refs.addPublicityForm.validate(async (vaild) => {
            if (!vaild) return this.$message.error('输入有误')
            let param = null;
            param = JSON.parse(JSON.stringify(this.addPublicityForm));
            console.log(param)
            param.media = param.img.map(item => item.name).join(',');
            addannouncementList(param).then(res => {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  });
                  this.addPublicityForm = {}
                  this.init();
                }
            )
            this.addPublicityVisibel = false;
          })
        },
        //关闭之前
        addPublicityClose() {
          this.addPublicityVisibel = false;
        },
        detailsVisibleclose() {
          this.detailsVisible = false;
        },
        //分页方法
        handleCurrentChange(val) {
          this.queryInfo.current = val;
          this.search();
        },
        //导入
        beforeAvatarUpload(file) {
          let Xls = file.name.split('.');
          if (Xls[1] === 'xls' || Xls[1] === 'xlsx') {
            return file
          } else {
            this.$message.error('上传文件只能是 xls/xlsx 格式!')
            return false
          }
        },
        //导入成功
        respond(res) {
          if (res.code == 200) {
            this.$message({
                  message: '上传成功',
                  type: 'success'
                }
            )
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
          location.reload();
        },
        //公共宣传加载
        init() {
          let param = {}
          param.current = this.queryInfo.current
          param.size = this.queryInfo.size
          param.status = this.queryInfo.status !== null ? this.queryInfo.status : ''
          getannouncementList(param).then(res => {
            this.publicityList = res.records;
            this.total = res.total
          })
        },
        //查询
        search() {
          let param = {}
          param.title = this.queryInfo.publicityTitle;
          param.current = this.queryInfo.current
          param.size = this.queryInfo.size
          param.status = this.queryInfo.status !== null ? this.queryInfo.status : ''
          getannouncementList(param).then(res => {
            this.publicityList = res.records;
            this.total = res.total
            this.current = res.current
          })
        },

      }
}
</script>

<style scoped>
::v-deep(.el-table thead) {
  color: #000000;
}

.freePic ::v-deep .el-upload--picture-card {
  display: none;
}
</style>