xiaoshi_system/src/views/report/InvalidResponse/components/IPREmail/IPREmail.vue

<template>
    <div class="height_100">
      <el-container>
          <el-header>
              <div class="head">
                  <div>
                      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
                          <el-form-item label="姓名:" prop="name" >
                              <el-input v-model="queryParams.name" placeholder="请输入姓名"></el-input>
                          </el-form-item>
                          <el-form-item label="邮箱:" prop="email">
                            <el-input v-model="queryParams.email" placeholder="请输入邮箱"></el-input>
                          </el-form-item>
                          <el-form-item label="类型：" prop="ifDefault">
                              <el-select v-model="queryParams.ifDefault" placeholder="请选择" clearable >
                                  <el-option v-for="(item, key) in types" :key="key" :label="item" :value="key"></el-option>
                              </el-select>
                          </el-form-item>
                          <el-form-item>
                              <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                          </el-form-item>
                      </el-form>
                  </div>
                  <div>
                    <el-button icon="el-icon-plus" size="mini" @click="add">新增</el-button>
                  </div>
              </div>
          </el-header>
          <el-main>
            <IPREmailTable :tableData="tableData" :loading="loading">
                <template slot="column">
                    <el-table-column label="操作" align="center" width="120px">
                        <template slot-scope="scope">
                            <div v-if="userinfo.roleType==1 || userinfo.roleType == 2 || userinfo.id == scope.row.createId">
                                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </template>
            </IPREmailTable>
          </el-main>
          <el-footer class="pagination">
              <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                      :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
                      @current-change="handleCurrentChange" @size-change="changeSize" :total="total">
                  </el-pagination>
          </el-footer>
      </el-container>
      <!-- 新增或者编辑IPR邮箱 -->
      <addOrEditIPREmailDialog ref="addOrEditIPREmailDialog" @close="closeAddOrEditIPREmail"></addOrEditIPREmailDialog>
    </div>
</template>
  
<script>
const defaultSearchForm={
    name:null,
    email:null,
    ifDefault:null
}
import IPREmailTable from '../table/IPREmail.vue'
import addOrEditIPREmailDialog from './components/dialog/addOrEditIPREmail.vue';
export default {
    components: {
        IPREmailTable,
        addOrEditIPREmailDialog
    },
    props: {
        type:{
            type:[String,Number],
            default:"1"
        }
    },
    data() {
        return {
            tableData:[],
            queryParams:{
                current:1,
                size:10,
                type:this.type,
                ...defaultSearchForm,
            },
            total:0,
            loading:false,
            types:{
                true:'默认发送邮箱',
                false:'非默认发送邮箱'
            }
        };
    },
    watch: {
        type(){
            this.queryParams.type = this.type
            this.handleCurrentChange(1)
        },
    },
    computed: {
        userinfo(){
            return this.$s.getObj('userinfo')
        },
    },
    created() {},
    mounted() {
      this.getList()
    },
    methods: {
        async getList(){
            this.loading = true
            var api = 'iprPersonQuery'
            this.$api[api](this.queryParams).then(response=>{
                if(response.code == 200){
                    this.tableData = response.data.data
                    this.total = response.data.total
                    this.loading = false
                }
            }).catch(error=>{
                this.tableData = []
                this.total = 0
                this.loading = false
            })
        },
        //切换分页
        handleCurrentChange(value){
            this.queryParams.current = value
            this.getList()
        },
        //切换页大小
        changeSize(value){
            this.queryParams.size = value
            this.queryParams.current = 1
            this.getList()
        },
        //检索
        search(){
            this.queryParams.current = 1
            this.getList()
        },
        //重置条件
        resetQuery(){
            this.queryParams = {
                ...this.queryParams,
                ...defaultSearchForm
            }
            this.search()
        },
        //添加IPR邮箱
        add(){
            let form = {
                type:this.type
            }
            this.$refs.addOrEditIPREmailDialog.open(form,'add')
        },
        //编辑IPR邮箱
        edit(row){
            this.$refs.addOrEditIPREmailDialog.open(row,'edit')
        },
        //回调
        closeAddOrEditIPREmail(model){
            if(model == 'add'){
                this.search()
            }
            if(model == 'edit'){
                this.getList()
            }
        },
        //删除
        remove(row){
            this.$confirm('确认删除选择的数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                this.$api.iprPersonDelete([row.id]).then(response => {
                    this.$message.success('删除成功')
                    this.loading = false
                    this.delFinish()
                }).catch(error => {
                    this.loading = false
                })
            })
        },
        delFinish(){
            if(this.tableData.length == 1 && this.queryParams.current!=1){
                this.queryParams.current -= 1
            }
            this.getList()
        },
    },
  };
  </script>
  <style lang="scss" scoped>
  .head{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  </style>