后台管理代码

zhaoxiaoqiang

2023-09-05 5749770d6d8fc6f98e68868f98e00eeb87b633d2

 src/views/account-management/account-list.vue

@@ -2,7 +2,7 @@
 * @Author: 小明丶
 * @Date: 2020-05-11 17:38:01
 * @LastEditors: zhaoxiaoqiang 287285524@qq.com
 * @LastEditTime: 2023-08-24 15:43:52
 * @LastEditTime: 2023-09-05 17:01:35
 * @Description: 账户管理
 -->
<template>
@@ -15,7 +15,7 @@
        </el-col>
        <el-col :span="18">
          <div style="float:right;">
            <button class="btn-creat" v-if="this.filterBtnById(140201)" @click="showPop(null,1)">+ 新建</button>
            <button class="btn-creat" @click="showPop(null,1)">+ 新建</button>
            <el-input
              v-model="form.keyWord"
              size="small"
@@ -34,38 +34,36 @@
    <!-- 新增弹出层 -->
    <el-dialog :title="title" width="480px" :visible.sync="dialogFormVisible">
      <!-- :rules="rules" -->
      <el-form :model="creatForm"  ref="ruleForm">
        <el-form-item label="用户名称：" :label-width="formLabelWidth" prop="name">
      <el-form :model="creatForm"  ref="ruleForm" size="small"  :label-width="formLabelWidth" >
        <el-form-item label="用户名称：" prop="name">
          <el-input
            v-model.trim="creatForm.name"
            maxlength="20"
            autocomplete="off"
            placeholder="请输入用户名称"
            style="width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户手机号：" :label-width="formLabelWidth" prop="phone">
        <el-form-item label="用户手机号："  prop="phone">
          <el-input
            v-if="isCreat"
            v-model.trim="creatForm.phone"
            maxlength="11"
            autocomplete="off"
            placeholder="请输入用户手机号"
            style="width:200px"
          ></el-input>
          <span v-else>{{creatForm.phone}}</span>
        </el-form-item>
        <el-form-item label="用户角色：" :label-width="formLabelWidth" prop="role">
        <el-form-item label="用户角色："  prop="role">
          <el-select v-model="creatForm.role" placeholder="请选择" style="width:200px">
              <el-option
                v-for="item in roleList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="密码：" :label-width="formLabelWidth" v-show="title !== '编辑账户'" prop="password">
        <el-form-item label="密码："  v-show="title !== '编辑账户'" prop="password">
          <el-input
            type = "password"
            v-if="isCreat"
@@ -73,10 +71,9 @@
            maxlength="20"
            autocomplete="off"
            placeholder="请输入密码"
            style="width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码确认：" :label-width="formLabelWidth" v-show="title !== '编辑账户'" prop="resPassword">
        <el-form-item label="密码确认："  v-show="title !== '编辑账户'" prop="resPassword">
          <el-input
            type = "password"
            v-if="isCreat"
@@ -84,7 +81,6 @@
            maxlength="20"
            autocomplete="off"
            placeholder="再次输入密码"
            style="width:200px"
          ></el-input>
          <span v-else>{{creatForm.resPassword}}</span>
        </el-form-item>
@@ -100,12 +96,8 @@
import md5 from "blueimp-md5";
import Etable from "../../components/table.vue";
import {roleGetRoleList,userAdd,userUpdate,userManageDisabled} from '@/api/user';
// import myTable from "../../components/myTable/myTable";
// import myApi from "../../api/api";
export default {
  components:{
     Etable  
  },
  components:{ Etable  },
  data() {
    return {
      title: '',//弹出层title
@@ -114,9 +106,7 @@
      isCreat: true,
      dialogFormVisible: false,
      formLabelWidth:'120px',
      form: {
        keyWord: null
      },
      form: { keyWord: null},
      creatForm:{
          name:'',
          phone:'',
@@ -126,86 +116,73 @@
      },// 新建用户表单
      defaultVal: {},
      refresh: {},
      // tableData: {
      //   url: "userManageList",
      //   exportExcelUrl: {
      //     url: "hbOrderExport",
      //     fileName: "用户管理表格"
      //   },
      //   exportPower: {
      //     show: false,
      //     btnId: "120102"
      //   },
        column: [
          {
            prop: "userName",
            lable: "用户名称",
            align: "center"
          },
          {
            prop: "userNo",
            lable: "用户手机号",
            align: "center"
          },
          {
            prop: "roleName",
            lable: "用户角色",
            align: "center"
          },
          {
            lable: "停启用",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h("el-switch", {
                  props: {
                    value: params.row.status === 1,
                    "active-color": "#66DD42",
                    "inactive-color": "#eeeeee"
      column: [
        {
          prop: "userName",
          lable: "用户名称",
          align: "center"
        },
        {
          prop: "userNo",
          lable: "用户手机号",
          align: "center"
        },
        {
          prop: "roleName",
          lable: "用户角色",
          align: "center"
        },
        {
          lable: "停启用",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("el-switch", {
                props: {
                  value: params.row.status === 1,
                  "active-color": "#66DD42",
                  "inactive-color": "#eeeeee"
                },
                on: {
                  change: () => {
                    params.row.status = params.row.status === 1 ? 0 : 1;
                    this.updateContract(params);
                  }
                }
              })
            ]);
          }
        },
        {
          key: "",
          name: "操作",
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    "font-size": "12px",
                    "font-family": "Microsoft YaHei",
                    "font-weight": 400,
                    "text-decoration": "underline",
                    color: "rgba(60,142,254,1)",
                    cursor: "pointer",
                  },
                  on: {
                    change: () => {
                      params.row.status = params.row.status === 1 ? 0 : 1;
                      this.updateContract(params);
                    click: () => {
                      this.showPop(params.row,2);
                    }
                  }
                })
              ]);
            }
          },
          {
            key: "",
            name: "操作",
            fixed: "right",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "span",
                  {
                    style: {
                      "font-size": "12px",
                      "font-family": "Microsoft YaHei",
                      "font-weight": 400,
                      "text-decoration": "underline",
                      color: "rgba(60,142,254,1)",
                      cursor: "pointer",
                      display: this.filterBtnById(140202)
                        ? "inline-block"
                        : "none",
                    },
                    on: {
                      click: () => {
                        this.showPop(params.row,2);
                      }
                    }
                  },
                  "编辑"
                )
              ]);
            }
                },
                "编辑"
              )
            ]);
          }
        ]
        }
      ]
      // },// 表格数据
    };
  },
@@ -221,11 +198,11 @@
    // }
  },
  created(){
       roleGetRoleList().then(res => {
          if (res) {
            this.roleList = res.body.roles
          }
        }).catch(err => {})
    roleGetRoleList().then(res => {
      if (res) {
        this.roleList = res.body
      }
    }).catch(err => {})
  },
  methods: {
    // 显示弹出层
@@ -233,8 +210,7 @@
      if (params && item != 1) {
        this.creatForm.phone = params.userNo;
        this.creatForm.role = params.roleId;
         this.$set(this.creatForm,'role',params.roleId)
        // this.creatForm.name = params.userName;;
        this.$set(this.creatForm,'role',params.roleId)
        this.$set(this.creatForm,'name',params.userName)
        this.creatForm.password = params.password;
        this.creatForm.resPassword = params.resPassword;
@@ -245,7 +221,6 @@
      if (item == 1) {
        this.isCreat = true;
        this.title = '新建账户'
        
      }
      this.dialogFormVisible = true;
    },
@@ -322,6 +297,7 @@
      } else if (this.title === '编辑账户') {
        let data = {userName: this.creatForm.name, userId: this.rowsInfo.userId, roleId:this.creatForm.role}
        userUpdate(data).then(res => {
          console.log(res)
          if(res) {
            this.$notify({
              title: '提示',
@@ -329,25 +305,20 @@
              type: 'success'
            })
            this.dialogFormVisible = false
            this.qureys()
            this.qureys();
          }
        }).catch(err => {})
        }).catch(err => {});
      }
      // 提交请求关闭弹窗
       
    },
    /**取消新建、编辑账户**/ 
    cancelCreat(){
      // this.creatForm.name = ''
      // this.creatForm.phone = ''
      this.creatForm = {};
      this.dialogFormVisible = false
    },
    /**更新用户状态**/
    updateContract(params) {
      let data = {
        userId: params.row.userId
      };
      let {userId,status} = params.row;
      let data = { userId,status};
      userManageDisabled(data).then(res => {
          if(res) {
            this.$notify({
@@ -355,7 +326,7 @@
              message: '状态更新成功',
              type: 'success'
            })
            //this.qureys()
            this.qureys()
          }
        }).catch(err => {})
    },