所有功能实现

明梦爽

2022-03-02 1861d195f7f3a7364c1099356858c94a6c0741e2

 src/components/Administrator/AdEdit.vue

@@ -1,6 +1,7 @@
<template>
  <div>
    <el-card class="box-card">
      <el-button type="primary" @click="add()" icon="el-icon-circle-plus" class='add'>注册新的管理员账号</el-button>
      <!-- 新闻表格区域 -->
      <el-table 
        :data="tableData"
@@ -22,42 +23,187 @@
          <template slot-scope="scope">
            <!-- {{ scope.row.id }} -->
            <div>
              <el-button type="success" @click="look(scope.row.id)">添加</el-button>
              <el-button type="warning" @click="showEditDialog(scope.row.id)">修改</el-button>
              <el-button type="info" @click="deleteNews(scope.row.id)">删除</el-button>
              <el-button type="primary" @click="showEditDialog(scope.row.id)" icon="el-icon-edit"></el-button>
              <el-button type="danger" @click="deleteAds(scope.row.id)" icon="el-icon-delete"></el-button>
            </div>
          </template>
          
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改账户的对话框 -->
    <el-dialog
      title="修改普通管理员密码"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editClose">
      <!-- rules表单验证规则，ref当前表单的验证对象 -->
      <el-form ref="editFormRef" :model="editForm"  label-width="80px" status-icon>
        <el-form-item label="用户名:">
          <el-input v-model="editForm.username" prefix-icon="iconfont icon-user" placeholder="请输入账号" clearable=""></el-input>
        </el-form-item>
        <el-form-item label="旧密码:">
          <el-input v-model="editForm.oldPassword" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码:">
          <el-input v-model="editForm.password" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="subEdit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加管理员对话框 -->
    <el-dialog
      title="添加普通管理员"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addClose">
      <!-- rules表单验证规则，ref当前表单的验证对象 -->
      <el-form ref="addFormRef" :model="addForm"  label-width="80px" status-icon>
        <el-form-item label="用户名:">
          <el-input v-model="addForm.username" prefix-icon="iconfont icon-user" placeholder="请输入账号" clearable=""></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="addForm.password" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="canceladd">取 消</el-button>
        <el-button type="primary" @click="addEdit()">注 册</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getmain,editAccount } from '../../api/api'
import { getmain,editAccount,deleteAd,addAd } from '../../api/api'
export default {
  data() {
    return {
      tableData:[], //普通管理员列表
      editDialogVisible:false,
      addDialogVisible:false,
      editForm:{ username:'',oldPassword:'',password:'' },  //修改表单对象
      addForm:{ username:'',password:'' }  //添加管理对象
    }
  },
  created(){
    this.ready()
  },
  methods:{
    //获取铺管列表
    ready(){
      getmain().then(res => {
        console.log(res);
        // console.log(res);
        if(res.code == 200){
          this.tableData = res.data
        }
      })
    },
    //展示编辑对话框
    showEditDialog(){
      this.editDialogVisible = true
    },
    editClose(){
      this.editForm.username = '';
      this.editForm.oldPassword = '';
      this.editForm.password = '';
    },
    cancel(){
      this.editForm.username = '';
      this.editForm.oldPassword = '';
      this.editForm.password = '';
      this.editDialogVisible = false
    },
    //编辑确定事件
    subEdit(){
      const data = {
        username:this.editForm.username,
        oldPassword:this.editForm.oldPassword,
        password:this.editForm.password
      }
      editAccount(data).then(res => {
        // console.log(res);
        if(res.code == 200){
          this.$message.success('账户修改成功')
          this.editDialogVisible = false
          this.ready()
        }else{
          this.$message.error('账户修改失败')
        }
      })
    },
    //删除普通管理员
    async deleteAds(id){
      // console.log(id);
      const res = await this.$confirm('此操作将永久删除该管理账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        return err
      })
      //如果用户点击确定则返回confirm
      //如果用户点击取消则返回cancel
      console.log(res);
      if(res !== 'confirm'){
        return this.$message.info('已取消删除~')
      }else{
        // console.log(id);
        const data = {
          id:id
        }
        //参数data 要以对象的形式传入
        deleteAd(data).then(res => {
          // console.log('>>>'+res);
          if(res.code == 200){
            this.$message.success('删除成功！')
            this.ready()
          }else{
            return this.$message.error('删除失败！')
          }
        })
      }
    },
    add(){
      this.addDialogVisible = true
    },
    //注册取消清空
    canceladd(){
      this.addForm.username = '';
      this.addForm.password = '';
      this.addDialogVisible = false
    },
    addClose(){
      this.addForm.username = '';
      this.addForm.password = '';
    },
    //注册提交
    addEdit(){
      const data = {
        username:this.addForm.username,
        password:this.addForm.password
      }
      addAd(data).then(res => {
        if(res.code == 200){
          this.$message.success('注册成功')
          this.addDialogVisible = false
          this.ready()
        }else{
          this.$message.error('注册失败')
        }
      })

    }
  }
}
</script>

<style lang="less" scoped>
.add{
  margin-bottom: 10px;
}

</style>