admin_operation/src/views/userList/whiteList.vue

<template>
     <div class="app-container ">
       <div class="margin_top">
        <!-- 搜索向 -->
      <div class="flex">
          <div class="w_input">
            <span  class="textSpan">手机号:</span>
            <el-input v-model="body.phoneNo" style="width:200px" placeholder="请输入手机号" size="small" clearable />
            <el-button class="filter-item"  icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
            <el-button class="classitem" style="marginRight:30px" type="primary" plain icon="el-icon-plus" @click="dataFormAdd">新增</el-button>
           <el-button  icon="el-icon-delete" type="danger" plain @click="ModifyDelete">删除</el-button>
          </div>
      </div>
      <div >
      </div>
        <!-- 表格数据 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
           <el-table-column
            type="selection"
            align="center"
            width="55">
            </el-table-column>

          <el-table-column label="手机号" align="center" width="300" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.phoneNo }}</span>
              </template>
          </el-table-column>

          <el-table-column label="备注" align="center"  show-overflow-tooltip>
              <template slot-scope="scope">
                  <span type="text" >{{ scope.row.note }}</span>
              </template>
          </el-table-column>


        
      </el-table>
        <!-- 分页 -->
      <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    </div>
     <!-- 新增与修改 -->
    <el-dialog :title="operation?'新增黑名单':'编辑黑名单'" :visible.sync="dialogFormVisible" width="55%" center>
      <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
 
            <el-form-item label="手机号" prop="phoneNo" :label-width="formLabelWidth"  style="width:420px;margin:15px auto">
              <el-input v-model="dataForm.phoneNo" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="备注" prop="groupName" :label-width="formLabelWidth"  style="width:420px;margin:15px auto">
              <el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="dataForm.note" placeholder="请输入备注" />
            </el-form-item>

 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import api from '@/api/blackList.js'
export default {
    data(){
        return{
            loading:false,   //表格数据加载
            tableData:[],       //表格数据
            body:{
                size:10,
                current:1,
                phoneNo:""   //名称搜索
            },
             total:0,
            dataForm:{},
            rules2:{
                  phoneNo: [{ required: true, message: '请输入手机', trigger: 'blur' } ],
            },
            phone:[],
            operation:false,
            dialogFormVisible:false,
            formLabelWidth:"120px"
        }
    },
 created(){
        this.reLoad()
    },
    methods:{
         // 重载数据
        reLoad(){
            this.loading = true
            api.Search(this.body).then((res) => {
                this.loading = false
                console.log(res)
                let list = res.data.data.records
                // console.log(data)
                this.tableData = list
                this.total = res.data.data.total
            })
        },
        //搜索数据
        Search(){
            this.body.current = 1
            this.reLoad()
        },
        //新增和修改API
        submitForm(){
         
          this.$refs['dataForm'].validate((valid) => {
                  if (valid) {
                    if (!this.operation) {

                    } else {
                      console.log(this.dataForm)
                    //   // 添加
                    let dataForm = this.dataForm
                    let list = []
                    list.push(dataForm)
                      api.add(list).then(response => {
                        if (response.status === 200) {
                          this.$message({
                            type: 'success',
                            message: '操作成功'
                          })
                          this.dialogFormVisible = false
                          this.reLoad()
                        } else {
                          this.$message({
                            type: 'error',
                            message: response.data.msg
                          })
                        }
                      })
                    }
                  }
                })
        },
        //新增弹框
        dataFormAdd(){
            this.operation = true // true:新增, false:编辑
            this.dialogFormVisible = true // 控制弹出框
            this.dataForm = {}
            if(this.$refs['dataForm']){
                 this.$refs['dataForm'].resetFields();
            }
           
        },
        //编辑弹框
        handleEdit(row){
           this.operation = false // true:新增, false:编辑
           this.dialogFormVisible = true // 控制弹出框 
           this.dataForm = JSON.parse(JSON.stringify(row)) 
           if(this.$refs['dataForm']){
               this.$refs['dataForm'].resetFields();
           }
        },
          //删除API
        ModifyDelete(){
            const that = this
            if(this.phone.length > 0){
              that.$confirm('此操作将删除该手机号', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              })
              .then(() => {
                  api.del(this.phone).then((res)=>{
                       if (res.status === 200) {
                          that.$message({
                              type: 'success',
                              message: '删除成功'
                          })
                          that.reLoad()
                       } else {
                          that.$message({
                              type: 'error',
                              message: res.msg
                          })
                       }
                  })
              })    
            }else{
              that.$message({
                  type: 'error',
                  message: "请至少选择一项"
              })
            }
        },
        //多选
        handleSelectionChange(row){
            let arryList = []
            row.map(res=>{
                let phoneNo = res.phoneNo
                arryList.push(phoneNo)
            })
            this.phone = arryList
        },
        ///分页
        handleSizeChange: function(val) {
            this.body.size = val
            this.reLoad()
        },
        handleCurrentChange: function(val) {
            this.body.current = val
            console.log(val)
            this.reLoad()
        }
    }
}
</script>

<style scoped>
    .flex{
     width: 90%;
     display: flex;
     flex-direction: row;
     margin-bottom: 10px;
     /* flex-wrap: wrap; */
     justify-content: flex-start;
     /* margin: 20px auto; */
    }
    .flexend{
    display: flex;
    justify-content: flex-end;
    /* padding-right: 2rem; */
    width: 100%;
    /* margin: 0 auto; */
    padding-bottom: 20px;
    }

    


</style>