修改login

明梦爽

2022-08-10 27d35a9f1355e4a56aa1e8c1aad9c7f58002ed50

 src/components/Administrator/AdEdit.vue

@@ -1,56 +1,181 @@
<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"
        border 
        style="width: 100%" 
        :header-cell-style="{textAlign: 'center'}" 
        :cell-style="{ textAlign: 'center' }"
      >
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
        <el-table-column type="index" label="序号" width="50">
          <!-- <template slot-scope="scope">
            <span>{{ (currentPage-1)*pageSize+scope.$index+1 }}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="username" label="普通管理员账号" width="" >
        </el-table-column>
        <el-table-column prop="id" label="id" width="">
        </el-table-column>
        <el-table-column prop="username" label="普通管理员账号" width=""> </el-table-column>
        <el-table-column prop="id" label="id" width=""> </el-table-column>
        <el-table-column label="操作" width="">
          <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:[], //普通管理员列表
      tableData: [], //普通管理员列表
      editDialogVisible: false,
      addDialogVisible: false,
      editForm: { username: '', oldPassword: '', password: '' }, //修改表单对象
      addForm: { username: '', password: '' } //添加管理对象
    }
  },
  created(){
  created() {
    this.ready()
  },
  methods:{
    ready(){
  methods: {
    //获取铺管列表
    ready() {
      getmain().then(res => {
        console.log(res);
        if(res.code == 200){
        // 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('注册失败')
        }
      })
    }
@@ -59,5 +184,7 @@
</script>

<style lang="less" scoped>

</style>
.add {
  margin-bottom: 10px;
}
</style>