admin_home/src/views/news/addNcomplaint.vue

<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="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="re_user_ids" class="custom-align-right">
            <el-select v-model="form.re_user_ids" placeholder="请选择行政人员" multiple filterable clearable
              @visible-change="getDUser">
              <el-option v-for="item in re_user_ids" :key="item.id" :label="item.user_name + '/' + item.nickname"
                :value="item.id">
              </el-option>
            </el-select>
          </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="want" class="custom-align-right">
            <el-input v-model="form.want" maxlength="500" autocomplete="off" placeholder="请输入我的要求：" type="textarea"
              rows="10"></el-input>
          </el-form-item>


          <el-form-item label="发生日期：" prop="start" class="custom-align-right">
            <el-date-picker v-model="form.start" placeholder="请选择发生日期">
            </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>
          <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="is_group" class="custom-align-right">
            <el-radio-group v-model="form.is_group" :disabled="this.$route.query.id != undefined">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="群聊名称：" prop="group_name" class="custom-align-right" v-if="form.is_group == 1"
            :disabled="this.$route.query.id != undefined">
            <el-input v-model="form.group_name" autocomplete="off" placeholder="请输入群聊名称"></el-input>
          </el-form-item> -->
        </div>
      </el-form>
    </div>
    <div class="bottomBtnBox" v-if="readStatus == false">
      <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 { formatLocalDate } from '@/utils/public';

export default {
  components: {
    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 {
      hovering: false, // 鼠标悬浮状态 悬浮时显示删除
      formLabelWidth: '80px',//表单的长度
      //1.表单项 start ------------------------------------------------------------>
      editStatus: false,
      readStatus: false,
      tableDivTitle: "添加投诉举报",
      searchCascaderKey: 0, //列表缓存key
      website_id: 2,
      file: '',
      userType: 1, //用户类型 1：普通用户，
      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: "",
        file: "",//文件路径
        department_arr_id: [],//部门id
        department_id: '',//部门id
        want: "",//我的要求
        type: 1,//发布类型：1：匿名，2：实名
        start: '',//开始时间
        re_user_ids: [],//行政人员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 }],
        re_user_ids: [{ 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 }],
        is_group: [{ 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: {
    //获取行政人员
    getDUser() {
      this.$forceUpdate();
      let department_id = this.form.department_arr_id;
      let city_id = this.form.city_arr_id;
      if (department_id.length == 0) {
        this.$message.warning('请选择行政职能');
        return;
      }
      if (city_id.length == 0) {
        this.$message.warning('请选择行政区划');
        return;
      }
      department_id = department_id.at(-1) || 0;
      city_id = city_id.at(-1) || 0;
      let parames = {
        'department_id': department_id,
        'city_id': city_id,
      }
      //如果是编辑，就返回数据
      // if (this.$route.query.id != undefined) {
      //   let ids = Array.isArray(this.form.re_user_ids) ? this.form.re_user_ids : JSON.parse(this.form.re_user_ids)
      //   if (ids.length > 0) {
      //     parames = {
      //       'ids': ids,
      //     }
      //   } else {
      //     this.$message({
      //       type: 'info',
      //       message: '用户数据为空'
      //     });
      //     return;
      //   }

      // }
      this.$store.dispatch('news/getDUser', parames).then(res => {
        // this.form.re_user_ids = res.data;
        this.re_user_ids = res.data;
        this.$forceUpdate();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '网络错误，请重试！'
        });
      })
    },
    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' || file.type === 'application/vnd.ms-word' || file.type === 'doc';
      const isPdf = file.type === 'application/pdf' || file.type === 'application/x-pdf' || file.type === 'application/acrobat' || file.type === 'pdf' || file.type === 'text/x-pdf' || file.type === 'application/x-download' || file.type === 'application/octet-stream';
      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);
          }

          delete this.form.cat_arr_id;
          delete this.form.catid;
          this.form.file = this.file;
          console.log(this.form, 'this.form-----------------')
          if (this.userType == 10000) {
            this.form.status = 2
          } else {
            this.form.status = 1
          }
          this.$store.dispatch('news/addComplaint1', 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: '/ncomplaintList',
      });
    },
    //跳转操作 end ------------------------------------------------------------>

    //3.回显操作 ------------------------------------------------------------>
    //3.1回显数据
    getMainData() {
      let data = {
        id: this.$route.query.id
      };
      this.$store.dispatch('news/getComplaintInfo', 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.file = res.data.file;
        this.file = res.data.file;
        const filePath = res.data.file;
        const fileExtension = filePath.split('.').pop().toLowerCase();
        this.fileType = fileExtension; // 设置文件类型
        this.form.is_group = parseInt(res.data.is_group);
        this.form.group_name = res.data.group_name;
        this.form.want = res.data.want;
        this.form.start = res.data.start ? new Date(res.data.start) : null; // 处理时间格式
        this.form.re_user_ids = Array.isArray(res.data.re_user_ids) ? res.data.re_user_ids : JSON.parse(res.data.re_user_ids);
      })
    },
    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;
      //先进行验证

      this.$refs.form.validate(valid => {

        if (valid) {
          if (this.form.start) {
            this.form.start = formatLocalDate(this.form.start);
          }
          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);
          }

          delete this.form.cat_arr_id;
          delete this.form.time;
          delete this.form.catid;
          this.form.file = this.file;
          console.log(this.form, 'this.form-----------------')

          if (this.userType == 10000) {
            this.form.status = 2
          } else {
            this.form.status = 1
          }

          this.$store.dispatch('news/updateComplaint', 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: {
    //监听发布范围和行政职能的变化，获取行政人员
    'form.city_arr_id': function (newVal, oldVal) {
      console.log(newVal, oldVal, 'newVal, oldVal')
      if (newVal.length > 0) {
        this.getDUser();
      }
    },
    'form.department_arr_id': function (newVal, oldVal) {
      console.log(newVal, oldVal, 'newVal, oldVal')
      if (newVal.length > 0) {
        this.getDUser();
      }
    },
    '$route'(to, from) {
      console.log(from, '---------------------------------------');
      // 监听路由参数中的 id 变化，若变化则更新页面状态并获取数据
      if (to.query.id) {
        this.getMainData();
      }
    },

  },
  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("添加投诉举报！")
    }
    if (this.$route.query.read == 1) {
      this.readStatus = true;;
    } else {
      this.readStatus = false;
    }
    this.fetchWebsiteOptions();
    this.getUserInfo();
    // this.getDUser();
    //复制内容到富文本 start ------------------------------------------------------------>
    //复制富文本 end ------------------------------------------------------------>
  },
};
</script>
<style scoped lang="less">
//执行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>