admin_home/src/views/news/ncomplaintListDeal.vue

<template>
  <div class="mainBox">
    <!--搜索功能 start------------------------------------------------------------>
    <div class="layerBox_search">
      <div class="layerBoxLine">
        <el-row>

          <el-col :span="6">
            <div class="searchBox">
              <div class="searchTitle">投诉主题：</div>
              <el-input placeholder="请输入投诉主题" autocomplete="off" v-model="getApiData.title" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="searchBox">
              <div class="searchTitle">投诉类型：</div>
              <el-input placeholder="请输入投诉类型" autocomplete="off" v-model="getApiData.title" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="searchBox">
              <div class="searchTitle">处理状态：</div>
              <el-select v-model="getApiData.deal" placeholder="请处理状态..">
                <el-option label="未处理" value="1"></el-option>
                <el-option label="处理中" value="2"></el-option>
                <el-option label="已完结" value="3"></el-option>
                <el-option label="不予处理" value="4"></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="department_name" label="投诉类型" width="">
            </el-table-column>
            <el-table-column prop="cityname" label="接收人" width="">
            </el-table-column>

            <el-table-column prop="status" label="审核状态" width="">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1">
                  未审核
                </span>
                <span v-if="scope.row.status == 2">
                  已审核
                </span>
                <span v-if="scope.row.status == 3">
                  已拒绝
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="deal" label="处理状态" width="">
              <template slot-scope="scope">
                <span v-if="scope.row.deal == 1">
                  未处理
                </span>
                <span v-if="scope.row.deal == 2">
                  处理中
                </span>
                <span v-if="scope.row.deal == 3">
                  已完结
                </span>
                <span v-if="scope.row.deal == 4">
                  不予处理
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="start" label="投诉时间" width="">

            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>

            <el-table-column fixed="right" label="操作" width="400" header-align="center">
              <template slot-scope="scope">
                <div class="listBtnBox">
                  <div class="listMainBtn" v-if="scope.row.deal == 1" @click="getUpRow(scope.row.id, tableData)"><i
                      class="el-icon-check"></i>处理
                  </div>
                  <div class="listMainBtn" v-if="scope.row.deal == 2" @click="setOverRow(scope.row.id, tableData)"><i
                      class="el-icon-check"></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------------------------------------------------------------>
    <!--弹出框1：外部表单弹出框 start------------------------------------------------------------>
    <el-dialog title="请输入驳回理由" :visible.sync="examineWindow" :close-on-click-modal="false">
      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
        <div class="formDiv">
          <el-form-item label="驳回原因：" :label-width="formLabelWidth" prop="reason" class="custom-align-right">
            <el-input type="textarea" v-model="form.reason" class="custom-textarea" placeholder="请输入驳回原因"
              :rows="3"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button type="info" @click="examineWindow = false">取消</el-button>
          <el-button type="primary" @click="examineToServe">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--弹出框1：外部表单弹出框 end------------------------------------------------------------>
    <!--表格内容 end------------------------------------------------------------>
  </div>
</template>

<script>
//表格标题
import tableTitle from './components/tableTitle';
//获得用户身份
import { getUseType } from '@/utils/auth'

//引入公用样式
import '@/styles/global.less';

export default {
  components: {
    tableTitle,//表格标题
  },
  data() {
    return {
      //1.列表和分页相关 start ------------------------------------------------------------>
      tableDivTitle: "投诉列表",
      tableData: [],//内容
      editId: 0,//要修改的网站id
      examineWindow: false,//审核窗口
      //提交驳回
      formLabelWidth: '80px',//表单的长度
      type_id: 0,//用户身份
      user_id: this.$store.state.user.userid,
      form: {
        reason: ""
      },
      formRules: {
      },
      getApiData: {
        name: "",//标题
        category_name: "",//导航池id
        website_name: "",//网站名称
        type_id: "",//发布类型
        status: 2,//审核状态
        deal_user: 1,//处理状态
        page: 1,//当前是第几页
        page_size: 10,//一共多少条
      },
      allCount: 0,//总条数
      //分页相关 end ------------------------------------------------------------>

    }
  },
  methods: {

    //提交驳回内容
    examineToServe(id) {
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = {
            id: this.editId,
            status: 2,//驳回status
            deal: 4,//处理状态
            deal_reason: this.form.reason
          }
          this.$store.dispatch('news/updateComplaintStatus', data).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功！'
              });
              this.getData();
              this.form.reason = "";//清空上一次的输入
              this.examineWindow = false;
            }
          })
        } else {
          this.$message.error("驳回理由不能为空！")
        }
      })
    },
    getUpRow(id) {
      //设置待审核的id
      this.editId = id;
      console.log(id)
      this.$confirm('您将处理此投诉举报吗?', '提示', {
        confirmButtonText: '处理',
        cancelButtonText: '拒绝',
        distinguishCancelAndClose: true,  // 关键配置项
        type: 'warning'
      }).then(() => {
        this.upRow(id, 2, 2)
      }).catch((the_reback) => {

        if (the_reback == "cancel") {
          //输入驳回理由
          // console.log("驳回" )
          this.examineWindow = true;
        }

      })
    },
    setOverRow(id) {
      //设置待审核的id
      this.editId = id;
      console.log(id)
      this.$confirm('您将完结此投诉举报吗?', '提示', {
        confirmButtonText: '完结',
        distinguishCancelAndClose: true,  // 关键配置项
        type: 'warning'
      }).then(() => {
        this.upRow(id, 3, 2)
      }).catch((the_reback) => {
        if (the_reback == "cancel") {
          // //输入驳回理由
          // // console.log("驳回" )
          // this.examineWindow = true;
        }

      })
    },
    upRow(id, deal, status) {
      let data = {
        id: id,
        deal: deal,
        status: status
      }
      this.$store.dispatch('news/updateComplaintStatus', data).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '投诉举报处理状态已修改!'
          });
          this.getData();
        }
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },

    //1.列表和分页相关 start ------------------------------------------------------------>
    //1.1 开始请求列表信息方法
    getData(type) {
      if (type == "search") {
        this.getApiData.page = 1;
      }
      console.log(this.getApiData, '---1--')
      this.$store.dispatch('news/getComplaintList', 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/deleteComplaint', { 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 修改网站状态

    //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: '/addNComplaint',
      });
    },
    goEdit(id) {
      let data = {
        id: id,
        read: 1
      }
      this.$router.push({
        path: '/addNComplaint',
        query: data
      });
    }
    //添加新闻 end ------------------------------------------------------------>
  },
  mounted() {
    this.type_id = getUseType()

    //1.获得初始数据
    this.getData();
  }
}
</script>
<style scoped lang="less"></style>