resolve_error/src/views/register/index.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      v-model="form"
      :permission="permissionList"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot-scope="scope" slot="reStatusSearch">
        <el-select v-model="form.getRegList" placeholder="请选择诉求状态">
          <el-option
            v-for="item in statusData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template slot-scope="scope" slot="timeRangeSearch">
        <el-date-picker
          v-model="form.timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </template>
      <template slot-scope="scope" slot="reTypeSearch">
        <el-select v-model="form.reType" placeholder="请选择诉求类型">
          <el-option
            v-for="item in typeData"
            :key="item.id"
            :label="item.dictValue"
            :value="item.id"
          ></el-option>
        </el-select>
      </template>
      <template slot-scope="scope" slot="windowsSearch">
        <el-select v-model="form.windows" placeholder="请选择处理窗口">
          <el-option
            v-for="item in winData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </template>
      <template slot-scope="scope" slot="nameSearch">
        <el-input v-model="form.name" placeholder="请输入代表姓名"></el-input>
      </template>
      <template slot-scope="{ row }" slot="menu">
        <el-button
          size="small"
          @click="handleRegis(row)"
          v-show="permission.register_add && row.status == 1"
          >再次调解</el-button
        >
         <el-button
          size="small"
          @click="handleRecon(row)"
          v-show="permission.appeal_resolve"
          >诉求调解</el-button
        >
        <el-button
          size="small"
          v-show="permission.register_list && row.status !== 0"
          @click="handleList(row)"
          >调解记录</el-button
        >
      </template>
      <template slot-scope="scope" slot="status">
        <div v-show="scope.row.status == 0" style="color: #529ce5">待处理</div>
        <div v-show="scope.row.status == 1" style="color: #91b337">正在处理</div>
        <div v-show="scope.row.status == 2" style="color: #101010">达成协议</div>
        <div v-show="scope.row.status == 3" style="color: #101010">调解成功</div>
      </template>
      <template slot-scope="scope" slot="finishTime">
        <div>{{scope.row.finishTime !== '' ? scope.row.finishTime : '---/-/---'}}</div>
      </template>
      <template slot-scope="scope" slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          @click="addRegister"
          v-show="permission.appeal_register"
          >诉求登记</el-button
        >
        <el-button
          type="success"
          size="small"
          @click="exportRegister"
          >导出</el-button
        >
        <!-- <div> -->
          <el-upload
          class="upload-demo"
          action="/api/blade-business/appealReg/importData"
          :on-success="handleSuccess"
          :show-file-list="false"
          multiple>
          <el-button size="small" type="primary">导入</el-button>
      </el-upload>
        <!-- </div> -->
       
      </template>
    </avue-crud>
    <el-dialog
        title="调解记录"
        :visible.sync="dialogVisible"
        width="30%"
        :modal-append-to-body="true"
        :append-to-body="true"
        custom-class="resi_list"
    >
    <div class="list">
        <div class="list_box" v-for="item in listData" :key="item.time" @click="listView(item)">
            <div  class="time_txt">{{item.talkingTime}}<span style="margin-left:20px">调解记录</span></div>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import {getBaseList,getTypeList} from "@/api/base"
import {getRegList,getResolveList,regResolve,againResolve,exportList} from "@/api/register/register"
export default {
  data() {
    return {
    active:'1',
      form: {},
      dialogVisible:false,
      statusData: [
        { label: "待处理", value: "0" },
        { label: "正在处理", value: "1" },
        { label: "达成协议", value: "2" },
        { label: "调解成功", value: "3" },
      ],
      listData:[],
      typeData:[
        {label:'邻里纠纷',value:0},
        {label:'婚姻纠纷',value:1},
        {label:'合同纠纷',value:2},
      ],
      winData:[
        {label:'窗口一',value:0},
        {label:'窗口二',value:1},
        {label:'窗口三',value:2},
      ],
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        searchShowBtn: false,
        refreshBtn: false,
        columnBtn: false,
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        searchSpan: 6,
        border: false,
        index: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        index: true,
        column: [
          {
            label: "诉求状态",
            prop: "reStatus",
            search: true,
            searchslot: true,
            hide: true,
            // searchSpan: 4,
          },
          {
            label: "诉求类型",
            prop: "reType",
            search: true,
            searchslot: true,
            hide: true,
            // searchSpan: 4,
          },
          {
            label: "处理窗口",
            prop: "windows",
            search: true,
            searchslot: true,
            hide: true,
            // searchSpan: 4,
          },
          {
            label: "代表姓名",
            prop: "name",
            search: true,
            searchslot: true,
            hide: true,
            // searchSpan: 4,
          },
          {
            label: "登记时间",
            prop: "timeRange",
            search: true,
            searchslot: true,
            hide: true,
          },
          {
            label: "代表姓名",
            prop: "username",
            align: "center",
            overHidden:true,
            width:70,
          },
          {
            label: "身份证号码",
            overHidden:true,
            width:150,
            prop: "cardno",
            align: "center",
          },
          {
            label: "诉求类型",
            overHidden:true,
            prop: "disputeName",
            align: "center",
          },
          {
            label: "登记时间",
            overHidden:true,
            prop: "firstRegTime",
            align: "center",
          },
          {
            label: "办结时间",
            slot:true,
            prop: "finishTime",
            align: "center",
          },
          {
            label: "反应主要问题",
            overHidden:true,
            prop: "problemDesc",
            align: "center",
          },
          {
            label: "状态",
            prop: "status",
            slot: true,
            align: "center",
          },
        ],
      },
      data: [],
      time:'',
      date:'',
    };
  },
   computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    this.getTime();
    this.getWinData();
    this.getTypeData()
    console.log(this.permission)
  },
  methods: {
    getWinData(){
      getBaseList().then(res =>{
        this.winData = res.data.data
      })
    },
    getTypeData(){
      getTypeList().then(res =>{
        this.typeData = res.data.data
      })
    },
    handleList(row){
      console.log(row)
        this.dialogVisible = true;
        getResolveList({appealId:row.id}).then(res =>{
          console.log('res',res)
          this.listData = res.data.data
        })
    },
    handleRegis(row){
      this.$router.push({ path: "/register/add",query:{type:'edit',appealId:row.id} });
    },
    handleRecon(row){
      console.log(row)
      this.$router.push({ path: "/register/recon",query:{type:'recon',time:this.date + ' ' + this.time,id:row.id} });
    },
    listView(row){
      this.$router.push({ path: "/register/recon",query:{type:'view',time:row.mediateTime,id:row.mediateId} });
    },
    searchReset() {
      this.query = {};
      this.form = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      console.log(this.form);
      this.query = this.form;
      this.page.currentPage = 1;
      this.onLoad(this.page, this.form);
      done();
    },
    handleSuccess(res){
      console.log(res)
      if(res.code == 200){
        this.$message.success('上传成功')
      }
    },
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getTime() {
      //获取当前时间
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        // this.getWeek(this.day);
        this.time = this.fn(hours) + ":" + this.fn(minute);
        this.date = year + "-" + (month + 1) + "-" + data;
    },
    onLoad() {
      let params = {}
      if(this.form.timeRange){
        params = {
          appealStatus:this.form.getRegList,
          startTime:this.form.timeRange[0],
          endTime:this.form.timeRange[1],
          appealType:this.form.reType,
          windowId:this.form.windows,
          username:this.form.name,
          current:this.page.currentPage,
          size:this.page.pageSize
        }
      }else{
        params = {
          appealStatus:this.form.getRegList,
          appealType:this.form.reType,
          windowId:this.form.windows,
          username:this.form.name,
          current:this.page.currentPage,
          size:this.page.pageSize
        }
      }
      getRegList(params).then(res =>{
        console.log('res==>',res)
        this.loading = false;
        this.data = res.data.data.records;
        this.page.total = res.data.data.total
      })
    },
    addRegister() {
      this.$router.push({ path: "/register/add",query:{type:'add'} });
    },
    exportRegister(){
      let params = {}
      if(this.form.timeRange){
        params = {
          appealStatus:this.form.getRegList,
          startTime:this.form.timeRange[0],
          endTime:this.form.timeRange[1],
          appealType:this.form.reType,
          windowId:this.form.windows,
          username:this.form.name,
        }
      }else{
        params = {
          appealStatus:this.form.getRegList,
          appealType:this.form.reType,
          windowId:this.form.windows,
          username:this.form.name,
        }
      };
      exportList(params).then(res =>{
        console.log(res)
        if (!res || !res.data) {
          this.$message({
            type: 'error',
            message: "导出失败！"
          });
          return;
        }
        let blob = new Blob([res.data]);//response.data为后端传的流文件
        let downloadFilename = '诉求登记' + '.xlsx';//设置导出的文件名
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          //兼容ie浏览器
          window.navigator.msSaveOrOpenBlob(blob, downloadFilename)
        }else {
          //谷歌,火狐等浏览器
            let url = window.URL.createObjectURL(blob);
            let downloadElement = document.createElement("a");
            downloadElement.style.display = "none";
            downloadElement.href = url;
            downloadElement.download = downloadFilename;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(url);
        }
       this.$message({type: "success", message: '导出成功！'}); 
      })
    },
    importRegister(){

    },
    handleEdit() {
      this.$router.push({ path: "/request/add" });
    },
    handleDis(row) {
      this.$confirm(`确认禁用当前处理窗口吗？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {});
    },
    handleDelete(row) {
      this.$confirm(`确认删除当前处理窗口吗？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {});
    },
  },
};
</script>

<style lang="scss">
.resi_list{
    .list{
        width: 80%;
        max-height: 246px;
        overflow-y: auto;

        .list_box{
            width: 100%;
            height: 41px;
            font-size: 20px;
            display: flex;
            align-items: center;

            & :hover{
                cursor: pointer;
                // .time_txt{
                    color: #4095e5;

                // }
            }
        }
    }
}

.upload-demo{
  float: right;
}
</style>
<style scoped>

</style>