admin_home/src/views/complaint/complaintList.vue

<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-select v-model="getApiData.nature" placeholder="请选择.." @change="getNatureChildren">
                <el-option
                  v-for="item in natureData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">性质进度：</div>
              <el-select v-model="getApiData.nature_level" placeholder="请选择">
                <el-option
                  v-for="item in netureLevelData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">类型：</div>
              <el-select v-model="getApiData.type" placeholder="请选择.." @change="getTypeChildren">
                <el-option
                  v-for="item in typeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="layerBoxLineTwo">
        <el-row>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">类型进度：</div>
              <el-select v-model="getApiData.type_level" placeholder="请选择">
                <el-option
                  v-for="item in typeLevelData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">状态：</div>
              <el-select v-model="getApiData.status" placeholder="请选择..">
                <el-option
                  v-for="item in statusData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="layerBoxNoBg">
      <div></div>
      <div>
        <el-button @click="clearSearchList">重置</el-button>
        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</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="标题"></el-table-column>
            <el-table-column prop="nature_name" label="性质"></el-table-column>
            <el-table-column prop="nature_level_name" label="进度"></el-table-column>
            <el-table-column prop="type_name" label="类型"></el-table-column>
            <el-table-column prop="type_level_name" label="类型说明"></el-table-column>
            <el-table-column label="判决书">
              <template slot-scope="scope">
                {{ scope.row.judgment ? '有' : '无' }}
              </template>
            </el-table-column>
            <el-table-column label="录音录像">
              <template slot-scope="scope">
                {{ scope.row.audio_and_video ? '有' : '无' }}
              </template>
            </el-table-column>
            <el-table-column label="合同">
              <template slot-scope="scope">
                {{ scope.row.contract ? '有' : '无' }}
              </template>
            </el-table-column>
            <el-table-column label="资质">
              <template slot-scope="scope">
                {{ scope.row.qualifications ? '有' : '无' }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="judgment" label="判决书"></el-table-column>
            <el-table-column prop="audio_and_video" label="录音录像"></el-table-column>
            <el-table-column prop="contract" label="合同"></el-table-column>
            <el-table-column prop="qualifications" label="资质"></el-table-column> -->
            <el-table-column prop="money" label="涉案标的额"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="mobile" label="电话"></el-table-column>
            <el-table-column prop="status_name" label="状态"></el-table-column>
            <el-table-column prop="created_at" label="创建时间"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120" header-align="center">
              <template slot-scope="scope">
                <div class="listBtnBox">
                  <div class="listEditBtn" @click="editRow(scope.row)"><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 :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
        </el-col>
      </el-row>
    </div>
    <!--分页 end------------------------------------------------------------>
    <!--表格内容 end------------------------------------------------------------>

    <!--弹出框start------------------------------------------------------------>
    <el-dialog title="编辑投诉" :visible.sync="windowStatus" :close-on-click-modal="false">
      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
        <div class="formDiv">
          <el-form-item label="标题：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <el-input v-model="form.title" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="性质：" :label-width="formLabelWidth" prop="nature" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-select v-model="form.nature" placeholder="请选择.." @change="getWindowNatureChildren">
                <el-option
                  v-for="item in windowNatureData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="性质进度：" :label-width="formLabelWidth" prop="nature_level" class="custom-align-right">
            <el-select v-model="form.nature_level" placeholder="请选择">
              <el-option
                v-for="item in windowNetureLevelData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型：" :label-width="formLabelWidth" prop="type" class="custom-align-right">
            <el-select v-model="form.type" placeholder="请选择.." @change="getWindowTypeChildren">
              <el-option
                v-for="item in typeData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型进度：" :label-width="formLabelWidth" prop="type_level" class="custom-align-right">
            <el-select v-model="form.type_level" placeholder="请选择">
              <el-option
                v-for="item in windowTypeLevelData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细说明：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <el-input type="textarea" v-model="form.describe" class="custom-textarea" disabled placeholder="请输入详细说明"></el-input>
          </el-form-item>
          <el-form-item label="判决书：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <div v-if="form.judgment" @click="downloadFile(form.judgment)" class="complaintListdownloadBtn">
              <i class="el-icon-download"></i>
              下载
            </div>
            <div v-else>暂无数据</div>
          </el-form-item>
          <el-form-item label="录音录像：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <div v-if="form.audio_and_video" @click="downloadFile(form.audio_and_video)" class="complaintListdownloadBtn">
              <i class="el-icon-download"></i>
              下载
            </div>
            <div v-else>暂无数据</div>
          </el-form-item>
          <el-form-item label="合同：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <div v-if="form.contract" @click="downloadFile(form.contract)" class="complaintListdownloadBtn">
              <i class="el-icon-download"></i>
              下载
            </div>
            <div v-else>暂无数据</div>
          </el-form-item>
          <el-form-item label="资质：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <div v-if="form.qualifications" @click="downloadFile(form.qualifications)" class="complaintListdownloadBtn">
              <i class="el-icon-download"></i>
              下载
            </div>
            <div v-else>暂无数据</div>
          </el-form-item>
          <el-form-item label="涉案标的金额：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <el-input v-model="form.money" autocomplete="off" disabled placeholder="请输入涉案标的金额"></el-input>
          </el-form-item>
          <el-form-item label="姓名：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <el-input v-model="form.name" autocomplete="off" disabled placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <el-input v-model="form.id_card" autocomplete="off" disabled placeholder="请输入身份证号"></el-input>
          </el-form-item>
          <el-form-item label="期待学习法律：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <el-input v-model="form.like_remark" autocomplete="off" disabled placeholder="请输入期待学习法律"></el-input>
          </el-form-item>
          <el-form-item label="状态：" :label-width="formLabelWidth" prop="status" class="custom-align-right">
            <el-radio-group v-model="form.status">
              <!-- <el-radio label="100">待审核</el-radio> -->
              <el-radio label="101">已接案</el-radio>
              <el-radio label="102">已拒绝</el-radio>
              <el-radio label="103">已完结</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注信息：" :label-width="formLabelWidth" prop="" class="custom-align-right">
            <el-input type="textarea" v-model="form.reason" class="custom-textarea" placeholder="请输入备注信息"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button @click="closeWindow">取 消</el-button>
          <el-button type="primary" @click="editData">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>


  </div>
</template>

<script>
//引入公用样式
import '@/styles/global.less';
//表格标题
import tableTitle from './components/tableTitle';

export default {
  components: {
    tableTitle,//表格标题
  },
  data() {
    //0.全局操作 start ------------------------------------------------------------>
    //表单验证
    const validateEmpty = (rule,value,callback) => {
      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 {
      //1.列表和分页相关 start ------------------------------------------------------------>
      tableDivTitle:"投诉举报",
      tableData: [],//列表
      allCount:0,//总条数
      editId:0,//要修改的网站id
      getApiData:{
        is_admin:1,//是否为管理员
        nature:"",//性质
        nature_level:"",//性质进度
        type:"",//类型
        type_level:"",//类型进度
        status:"",//状态 
        page:1,//当前是第几页
        pageSize:10,//一共多少条
      },
      natureData:[],//所有性质
      netureLevelData:[],//所有进度
      typeData:[],//所有类型
      typeLevelData:[],//所有类型进度
      statusData:[],//所有状态 

      //暂存所有进度
      allNetureLevelData:[],//性质
      allTypeLevelData:[],//类型
      //分页相关 end ------------------------------------------------------------>

      //2.弹出框设置 start ------------------------------------------------------------>
      //是否显示弹出窗口
      windowStatus:false,
      formLabelWidth: '120px',
      //弹出框设置 end ------------------------------------------------------------>

      //3.搜索相关 start ------------------------------------------------------------>
      //搜索相关 end ------------------------------------------------------------>

      //3.弹出框中的表单设置 start ------------------------------------------------------------>
      //3.1 表单收集的数据
      form: {
        title:"",//标题
        nature:"",//性质
        nature_level:"",//进度
        type:"",//类型
        type_level:"",//类型进度
        describe:"",//详细说明
        judgment:"",//判决书
        audio_and_video:"",//录音录像
        contract:"",//合同
        qualifications:"",//资质
        money:"",//涉案标的额
        name:"",//姓名
        id_card:"",//身份证
        status:"100",//状态
        like_remark:"",//你最想了解的法律知识
        reason:"",//备注信息
      },
      windowNatureData:[],//所有性质
      windowNetureLevelData:[],//所有进度
      windowTypeData:[],//所有类型
      windowTypeLevelData:[],//所有类型进度
      windowStatusData:[],//所有状态 
      //3.2表单验证规则
      formRules: {
        //性质不能为空
        nature:[{required:true,trigger:'blur',validator:validateEmpty}],
        //进度不能为空
        nature_level:[{required:true,trigger:'blur',validator:validateEmpty}],
        //类型不能为空
        type:[{required:true,trigger:'blur',validator:validateEmpty}],
        //类型进度不能为空
        type_level:[{required:true,trigger:'blur',validator:validateEmpty}],
        //状态不能为空
        status:[{required:true,trigger:'blur',validator:validateEmpty}],
      },
      //弹出框中的表单设置 end ------------------------------------------------------------>
    }
  },
  methods: {
    //1.列表和分页相关 start ------------------------------------------------------------>
    //1.1 获取内容
    getData(){
      this.$store.dispatch('complaint/getComplaint',this.getApiData).then(res=> {
        console.log(res)
        let data = [];
        for(let item of res.data.rows){
          // item.judgment = item.judgment.length > 0 ? "有" : "没有";
          // item.audio_and_video = item.audio_and_video.length > 0 ? "有" : "没有";
          // item.contract = item.contract.length > 0 ? "有" : "没有";
          // item.qualifications = item.qualifications.length > 0 ? "有" : "没有";

          // 判断 item.status 的状态
          switch (item.status) {
            case 100:
              item.status = "";
              break;
            case 101:
              item.status = "已接案";
              break;
            case 102:
              item.status = "已拒绝";
              break;
            case 103:
              item.status = "已完结";
              break;
            default:
              item.status = "";
              break;
          }
        }
        this.tableData = res.data.rows;//放入数据
        this.allCount = res.data.count;//放入总条数
      })
    },
    //获取所有父级状态
    getStatus(){
      //获取性质和进度
      let getNature = {
        type:1
      }
      this.$store.dispatch('complaint/getLetterType',getNature).then(res=> {
        //格式化性质
        for(let item of res.data){
          let data = {
            value: item.id,
            label: item.type_name
          }
          //搜索栏
          this.natureData.push(data)
          //弹窗框
          this.windowNatureData.push(data)
        }
        //暂存所有性质进度
        this.allNetureLevelData = res.data;
      })
      //获取类型和类型说明
      let getType = {
        type:2
      }
      this.$store.dispatch('complaint/getLetterType',getType).then(res=> {
        for(let item of res.data){
          let data = {
            value: item.id,
            label: item.type_name
          }
          //搜索栏
          this.typeData.push(data)
          //弹窗框
          this.windowTypeData.push(data)
        }
        //暂存所有类型进度
        this.allTypeLevelData = res.data;
      })
      //获取状态
      let getStatus = {
        type:10
      }
      this.$store.dispatch('complaint/getLetterType',getStatus).then(res=> {
        for(let item of res.data){
          let data = {
            value: item.id,
            label: item.type_name
          }
          //搜索栏  
          this.statusData.push(data)
          //弹窗框
          this.windowStatusData.push(data)
        }
      })
    },

    // 获取子进度 可优化 start---------------------------------------->
    //获取进度性质对应的子级状态
    getNatureChildren(val) {
      this.getApiData.nature_level = "";
      this.netureLevelData = [];
      console.log(val);
      // 从 allNetureLevelData 中找到 id 与 val 相同的对象
      const selectedItem = this.allNetureLevelData.find(item => item.id === val);
      console.log(selectedItem)
      for(let item of selectedItem.children){
        let data = {
          value: item.id,
          label: item.type_name
        }
        //搜索栏  
        this.netureLevelData.push(data)
      }
    },
    getTypeChildren(val) {
      this.getApiData.type_level = "";
      this.typeLevelData = [];
      console.log(val);
      const selectedItem = this.allTypeLevelData.find(item => item.id === val);
      console.log(selectedItem)
      for(let item of selectedItem.children){
        let data = {
          value: item.id,
          label: item.type_name
        }
        //搜索栏  
        this.typeLevelData.push(data)
      }
    },

    //弹出框中的
    getWindowNatureChildren(val) {
      this.form.nature_level = "";
      this.windowNetureLevelData = [];
      console.log(val);
      // 从 allNetureLevelData 中找到 id 与 val 相同的对象
      const selectedItem = this.allNetureLevelData.find(item => item.id === val);
      console.log(selectedItem)
      for(let item of selectedItem.children){
        let data = {
          value: item.id,
          label: item.type_name
        } 
        this.windowNetureLevelData.push(data)
      }
    },
    getWindowTypeChildren(val) {
      this.form.type_level = "";
      this.windowTypeLevelData = [];
      console.log(val);
      const selectedItem = this.allTypeLevelData.find(item => item.id === val);
      console.log(selectedItem)
      for(let item of selectedItem.children){
        let data = {
          value: item.id,
          label: item.type_name
        }
        //搜索栏  
        this.windowTypeLevelData.push(data)
      }
    },
    //回显数据
    returnWindowNatureChildren(val) {
      console.log(val);
      const selectedItem = this.allNetureLevelData.find(item => item.id === val);
      console.log(selectedItem)
      for(let item of selectedItem.children){
        let data = {
          value: item.id,
          label: item.type_name
        } 
        this.windowNetureLevelData.push(data)
      }
    },
    returnWindowTypeChildren(val) {
      this.form.type_level = "";
      this.windowTypeLevelData = [];
      console.log(val);
      const selectedItem = this.allTypeLevelData.find(item => item.id === val);
      console.log(selectedItem)
      for(let item of selectedItem.children){
        let data = {
          value: item.id,
          label: item.type_name
        }
        //搜索栏  
        this.windowTypeLevelData.push(data)
      }
    },
    // 获取子进度 可优化 end---------------------------------------->

    //1.2 列表内容分页
    //直接跳转
    handleSizeChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.3 点击分页
    handleCurrentChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.4 重置按钮
    clearSearchList(){
      this.getApiData.is_admin = 1;
      this.getApiData.nature = "";
      this.getApiData.nature_level = "";
      this.netureLevelData = [];
      this.getApiData.type = "";
      this.getApiData.type_level = "";
      this.typeLevelData = [];
      this.getApiData.status = "";
      this.getApiData.page = 1;
      this.getApiData.pageSize = 10;
      this.getData();
    },
    //列表和分页相关 end ------------------------------------------------------------>

    //2.弹出框设置 start ------------------------------------------------------------>
    //2.1 打开弹出框
    openWindow() {
      //this.clearToServe();
      this.windowStatus = true;
    },
    //2.2 关闭弹出框
    closeWindow(){
      this.windowStatus = false;
      this.clearToServe();
    },
    //2.3 清空提交窗口
    clearToServe(){
      //重置窗口
      this.editId = "";
      this.form.title = "";
      this.form.nature = "";
      this.form.nature_level = "";
      this.form.type = "";
      this.form.type_level = "";
      this.form.describe = "";
      this.form.judgment = "";
      this.form.audio_and_video = "";
      this.form.contract = "";
      this.form.qualifications = "";
      this.form.money = "";
      this.form.name = "";
      this.form.id_card = "";
      this.form.like_remark = "";
      this.form.reason = "";
    },
    //弹出框设置 end ------------------------------------------------------------>


    //4.编辑 start ------------------------------------------------------------>
    downloadFile(data){
      let files = [];
      let fileName = "download";
      if (!Array.isArray(data)) {
        data = [data];
      }
      console.log(data)
      for(let item of data){
        if(item.fileSrc){
          files.push(item.fileSrc);
        }else{
          files.push(item)
        }
      }
      //console.log(files)
      let getData = {
        files:files,
        fileName:fileName
      }

      this.$store.dispatch('complaint/downloadFile',getData).then(res=> {
        // console.log(res)
        // window.open(res.data.fileUrl, '_blank');
        const link = document.createElement('a');
        link.href = res.data.fileUrl;
        link.setAttribute('download', 'downloaded_file'); // You can set a default file name here
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })

    },
    //回显数据
    editRow(data){
      //先判断这条数据是否已经被其他人受理
      this.$store.dispatch('complaint/checkMeasure',{id:data.id}).then(res=> {
        if(res.code == 200){
          //列表里面已经有了，就不需要再请求了
          //开始回显数据
          this.openWindow();
          console.log(data)
          this.editId = data.id;
          this.form.title = data.title;
          //还原性质
          this.form.nature = data.nature;
          this.returnWindowNatureChildren(data.nature);
          this.form.nature_level = data.nature_level;
          //还原类型
          this.form.type = data.type;
          this.returnWindowTypeChildren(data.type);
          this.form.type_level = data.type_level;
          //详细说明
          this.form.describe = data.describe;
          this.form.judgment = data.judgment;
          this.form.audio_and_video = data.audio_and_video;
          this.form.contract = data.contract;
          this.form.qualifications = data.qualifications;

          // if(data.judgment.length > 0){
          //   this.form.judgment = data.judgment[0].fileSrc;
          // }
          // if(data.audio_and_video.length > 0){
          //   this.form.audio_and_video = data.audio_and_video[0].fileSrc;
          // }
          // if(data.contract.length > 0){
          //   this.form.contract = data.contract[0].fileSrc;
          // }
          // if(data.qualifications.length > 0){
          //   this.form.qualifications = data.qualifications[0].fileSrc;
          // }
          this.form.money = data.money;
          this.form.id_card = data.id_card;
          this.form.like_remark = data.like_remark;
          this.form.reason = data.reason;
          switch (data.status) {
            case "待审核":
            this.form.status = "100";
              break;
            case "已接案":
            this.form.status = "101";
              break;
            case "已拒绝":
              this.form.status = "102";
              break;
            case "已完结":
              this.form.status = "103";
              break;
            default:
              this.form.status = "0"; // 可选：处理未定义的状态
              break;
          }
          console.log(this.form.status) //100
          this.form.name = data.name;

        }else{
          this.$message({
            type: 'warning',
            message: '该数据已经被其他人受理！'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '网络错误，请重试！'
        });
      })

    },
    //提交编辑
    editData(){
      let data = {
        id:this.editId,
        nature:this.form.nature,
        nature_level:this.form.nature_level,
        type:this.form.type,
        type_level:this.form.type_level,
        status:this.form.status,
        reason:this.form.reason,
        is_admin:1 //必须，否则无法修改
      }

      //console.log(data)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$store.dispatch('complaint/upComplaint',data).then(res=> {
            console.log(res)
            this.closeWindow();
            this.$message({
              type: 'success',
              message: '修改成功！'
            });
            this.getData();
          })
        }
      })
      
    }
    //编辑 end ------------------------------------------------------------>

  },
  mounted(){
    //获取页面列表
    this.getData();
    //查询状态
    this.getStatus();
  }
}
</script>

<style scoped lang="less">
//表单微调 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-group__title {
  color: #909399;
}
::v-deep .el-select {
  width: 100% !important;
}
</style>