用户管理，角色管理

hejianhao

2025-04-07 1bf074bf5703c93e9dafd600ee0c35eefd720188

用户管理，角色管理

 src/main.js

@@ -6,6 +6,9 @@
import ElementUI from 'element-ui';

import cookies from 'vue-cookies'

import apiConfig from './utils/baseurl'

import {

  Message

} from 'element-ui'



Vue.use(ElementUI)

Vue.prototype.$cookies = cookies;

@@ -27,6 +30,33 @@
  return height

}



Vue.prototype.msgsuccess = function (msg) {

  Message({

    message: msg,

    type: "success"

  });

}



Vue.prototype.msgerror = function (msg) {

  Message({

    message: msg,

    type: "error"

  });

}



Vue.prototype.msgwarning = function (msg) {

  Message({

    message: msg,

    type: "warning"

  });

}



Vue.prototype.msginfo = function (msg) {

  Message({

    message: msg,

  });

}



new Vue({

  router,

  store,


 src/view/complaint/index.vue

@@ -35,7 +35,7 @@
                @click="exportExcell">导出</el-button>
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height" :element-loading-text="'正在加载...'">
                <el-table-column type="index" width="55" label="序号"></el-table-column>
                <el-table-column prop="carName" label="车辆名称"></el-table-column>
                <el-table-column prop="vehicleNumber" label="车牌号码"></el-table-column>

 src/view/order/index.vue

@@ -49,7 +49,8 @@
                @click="exportExcell">导出</el-button>
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height"
                :element-loading-text="'正在加载...'">
                <el-table-column type="index" width="55" label="序号" />
                <el-table-column prop="code" label="订单编号" />
                <el-table-column prop="vehicleNumber" label="车牌号" />

 src/view/systemManage/driver/index.vue

@@ -25,7 +25,7 @@
            </div>
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height" :element-loading-text="'正在加载...'">
                <el-table-column type="index" width="55" label="序号"></el-table-column>
                <el-table-column prop="driverName" label="机动车驾驶员姓名"></el-table-column>
                <el-table-column prop="enterpriseName" label="车辆所属公司"></el-table-column>

 src/view/systemManage/role/addEdit.vue

@@ -110,20 +110,20 @@
  computed: {},
  watch: {},
  created() {
    // roleInfoFromUserId({ userId: 1 }).then(res => {
    //   if (this.$route.query.roleId) {
    //     getRoleInfo({ roleId: this.$route.query.roleId }).then(resp => {
    //       this.menu = this.setSelectedIds(res.data.data, resp.data.data.menus || []);
    //       this.form = {
    //         roleName: resp.data.data.roleName,
    //         remark: resp.data.data.remark,
    //         roleId: resp.data.data.roleId
    //       }
    //     })
    //   } else {
    //     this.menu = res.data.data
    //   }
    // })
    roleInfoFromUserId().then(res => {
      if (this.$route.query.roleId) {
        getRoleInfo({ id: this.$route.query.roleId }).then(resp => {
          this.menu = this.setSelectedIds(res.data.data, resp.data.data.menus || []);
          this.form = {
            roleName: resp.data.data.roleName,
            remark: resp.data.data.remark,
            roleId: resp.data.data.roleId
          }
        })
      } else {
        this.menu = res.data.data
      }
    })
  },
  mounted() { },
  methods: {

 src/view/systemManage/role/detail.vue

@@ -66,12 +66,6 @@
              <el-form-item label="人员搜索">
                <el-input v-model="nickNameOrPhone" placeholder="请输入姓名/联系电话"></el-input>
              </el-form-item>
              <el-form-item label="所属部门">
                <el-select v-model="deptId" placeholder="请选择（多选）" multiple>
                  <el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="登陆状态">
                <el-select v-model="status" placeholder="请选择">
                  <el-option
@@ -95,11 +89,6 @@
            <el-table-column prop="nickName" label="姓名"></el-table-column>
            <el-table-column prop="phonenumber" label="联系电话">
            </el-table-column>
            <el-table-column prop="deptList" label="所属部门">
              <template slot-scope="{ row }">
                <el-tag v-for="(item, index) in row.deptList" :key="index">{{ item }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="roleName" label="角色">
            </el-table-column>
            <el-table-column prop="userName" label="登陆账号">
@@ -119,7 +108,7 @@
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
          </el-table>
          <div class="pagination">
          <div class="pagination  flex j-end">
            <el-pagination layout="slot,sizes,prev,pager,next,jumper" :page-size="pagination.pageSize"
              :current-page="pagination.pageNum" @current-change="handleCurrentChange" @size-change="handleSizeChange"
              :total="pagination.total">
@@ -128,6 +117,10 @@
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="btn_box">
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
    </el-card>
    <ViewData v-if="dialogVisibleView" :row="rowView" :dialogVisible="dialogVisibleView"
      @close="dialogVisibleView = false, rowView = {}" />
@@ -135,7 +128,7 @@
</template>

<script>
import { getRoleInfo, roleInfoFromUserId, getUserList, getDeptList } from './service.js'
import { getRoleInfo, roleInfoFromUserId, getUserList } from './service.js'
import ViewData from '../user/components/viewData.vue'
export default {
  components: {
@@ -149,8 +142,6 @@
      menu: [],
      data: [],
      nickNameOrPhone: '',
      deptId: [],
      deptList: [],
      status: '',
      pagination: {
        total: 10,
@@ -171,8 +162,8 @@
  },
  watch: {},
  created() {
    roleInfoFromUserId({ userId: 1 }).then(res => {
      getRoleInfo({ roleId: this.$route.query.roleId }).then(resp => {
    roleInfoFromUserId().then(res => {
      getRoleInfo({ id: this.$route.query.roleId }).then(resp => {
        this.menu = this.setSelectedIds(res.data.data, resp.data.data.menus);
        this.form = {
          roleName: resp.data.data.roleName,
@@ -181,9 +172,6 @@
      })
    })
    this.getListData()
    getDeptList().then((res) => {
      this.deptList = res.data.data
    })
  },
  mounted() { },
  methods: {
@@ -191,12 +179,11 @@
      let obj = {
        ...this.pagination,
        nickNameOrPhone: this.nickNameOrPhone,
        deptIds: this.deptId,
        status: this.status,
        roleIds: [this.$route.query.roleId]
        roleId: this.$route.query.roleId
      }
      this.listLoading = true
      const { data: { data: { records, total } } } = await getUserList(obj)
      const { records, total } = await getUserList(obj)
      this.data = records
      this.pagination.total = total
      this.timeOutID = setTimeout(() => {
@@ -215,7 +202,6 @@
    },
    reset() {
      this.nickNameOrPhone = ''
      this.deptId = []
      this.status = ''
      this.pagination.pageNum = 1
      this.getListData()
@@ -251,6 +237,11 @@
  }
}

.btn_box {
  margin-top: 40px;
  text-align: center;
}

.row,
.header {
  display: flex;

 src/view/systemManage/role/index.vue

@@ -13,11 +13,10 @@
    </el-card>
    <el-card style="margin-top: 20px;">
      <div class="add_btn">
        <el-button  icon="el-icon-plus" @click="add"
          type="primary">添加角色</el-button>
        <el-button icon="el-icon-plus" @click="add" type="primary">添加角色</el-button>
      </div>
      <el-table ref="tableSort" v-loading="listLoading" stripe :data="data" :element-loading-text="elementLoadingText"
        >
      <el-table ref="tableSort" v-loading="listLoading" :height="height" stripe :data="data"
        :element-loading-text="elementLoadingText">
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
@@ -25,12 +24,10 @@
        <el-table-column label="操作" width="300">
          <template slot-scope="{row}">
            <div>
              <el-button  type="text"
              <el-button type="text"
                @click="$router.push(`/systemManage/role-detail?roleId=${row.roleId}`)">详情</el-button>
              <el-button  type="text"
                @click="$router.push(`/systemManage/add-role?roleId=${row.roleId}`)">编辑</el-button>
              <el-button  type="text"
                @click="del(row)">删除</el-button>
              <el-button type="text" @click="$router.push(`/systemManage/add-role?roleId=${row.roleId}`)">编辑</el-button>
              <el-button type="text" @click="del(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
@@ -71,9 +68,9 @@
    };
  },
  computed: {
    // height() {
    //   // return this.$baseTableHeight()
    // },
    height() {
      return this.$baseTableHeight()
    },
  },
  watch: {},
  created() {
@@ -103,9 +100,9 @@
        pageSize: this.pagination.pageSize
      }
      this.listLoading = true
      // const { data: { data: { records, total } } } = await getList(obj)
      // this.data = records
      this.pagination.total = 10||total
      const { records, total } = await getList(obj)
      this.data = records
      this.pagination.total = 10 || total
      this.timeOutID = setTimeout(() => {
        this.listLoading = false
      }, 500)

 src/view/systemManage/role/service.js

@@ -1,28 +1,28 @@
import axios from '@/utils/request';

// 列表
export const getList = (data) => {
  return axios.post('/system/role/list', { ...data })
export const getList = (params) => {
  return axios.get('/system/role/listPage', { params })
}

// 添加
export const add = (data) => {
  return axios.post('/system/role/add', { ...data })
  return axios.post('/system/role/roleAdd', { ...data })
}

// 编辑
export const edit = (data) => {
  return axios.put('/system/role', { ...data })
  return axios.post('/system/role/roleUpdate', { ...data })
}

// 删除
export const delRole = (id) => {
  return axios.delete(`/system/role/deleteById/${id}`)
  return axios.delete(`/system/role/${id}`)
}

// 获取菜单树
export const roleInfoFromUserId = (params) => {
  return axios.get(`/system/role/roleInfoFromUserId`, { params })
export const roleInfoFromUserId = () => {
  return axios.get(`/system/menu/list`)
}

// 获取角色详情
@@ -30,12 +30,7 @@
  return axios.get(`/system/role/roleInfo`, { params })
}


// 列表
export const getUserList = (data) => {
  return axios.post('/system/user/list', { ...data })
}

export const getDeptList = (params) => {
  return axios.post('/t-dept/listAll')
export const getUserList = (params) => {
  return axios.get('/system/user/list', { params })
}

 src/view/systemManage/user/components/addEdit.vue

@@ -13,13 +13,6 @@
                    <el-input v-model="form.userName" :disabled="form.userId" placeholder="请输入"
                        style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" prop="deptId">
                    <el-select v-model="form.deptId" placeholder="请选择">
                        <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName"
                            :value="item.deptId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <el-select v-model="form.roleId" placeholder="请选择">
                        <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
@@ -53,10 +46,6 @@
            type: Object,
            default: () => { }
        },
        deptList: {
            type: Array,
            default: () => []
        },
        roleList: {
            type: Array,
            default: () => []
@@ -68,7 +57,6 @@
            rules: {
                nickName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                phonenumber: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
                deptId: [{ required: true, message: '请选择所属部门', trigger: 'blur' }],
                roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
                userName: [{ required: true, message: '请输入登陆账号', trigger: 'blur' }],
            }
@@ -81,8 +69,7 @@
                userId: this.row.userId,
                nickName: this.row.nickName,
                phonenumber: this.row.phonenumber,
                deptId: this.row.deptId,
                roleId: this.row.roleId,
                roleId: this.row.roleIds[0],
                userName: this.row.userName,
                remark: this.row.remark,
                status: this.row.status == 0 ? true : false,
@@ -101,6 +88,7 @@
                        ...this.form,
                        status: this.form.status ? 0 : 1
                    }
                    obj.roleIds = [this.form.roleId]
                    this.$emit('confirm', obj)
                }
            })

 src/view/systemManage/user/components/disb.vue

@@ -46,7 +46,7 @@
                nickName: this.row.nickName,
                userName: this.row.userName,
                status: 1,
                disableRemark: this.row.disableRemark
                disableRemark: this.row.forbiddenRemark
            }
        }
    },

 src/view/systemManage/user/components/resetPassWord.vue

@@ -68,9 +68,6 @@
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.row.deptId) {
                        this.form.deptId = this.row.deptId
                    }
                    this.form.orderNum = 0
                    this.form.ancestors = 0
                    this.form.parentId = 100

 src/view/systemManage/user/components/viewData.vue

File was deleted

 src/view/systemManage/user/index.vue

@@ -3,16 +3,16 @@
    <div class="form flex a-center j-between mt--23">
      <div class="form-left ml--30">
        <el-form :inline="true">
          <el-form-item label="人员搜索">
          <el-form-item label="人员搜索" style="margin-right: 100px;">
            <el-input v-model="nickNameOrPhone" placeholder="请输入姓名/联系电话"></el-input>
          </el-form-item>
          <el-form-item label="人员角色">
          <el-form-item label="人员角色" style="margin-right: 100px;">
            <el-select v-model="roleId" placeholder="请选择（多选）" multiple>
              <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态">
          <el-form-item label="账号状态" style="margin-right: 100px;">
            <el-select v-model="status" placeholder="请选择">
              <el-option
                v-for="item in [{ label: '全部', value: '' }, { label: '启用', value: 0 }, { label: '禁用', value: 1 }]"
@@ -22,7 +22,7 @@
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: right;">
      <div class="form-right mr--24 mb--22 shrink0">
        <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small"
          @click="onSubmit">查询</el-button>
        <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14"
@@ -32,34 +32,40 @@
    <div class="table-box-btn mt--23 ml--30">
      <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-plus" type="primary" size="small"
        @click="dialogVisible = true">添加</el-button>
      <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-delete" type="danger" size="small"
        @click="dialogVisible = true">删除</el-button>
      <!-- <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-delete" type="danger" size="small"
        @click="dialogVisible = true">删除</el-button> -->
    </div>
    <div class="table-box ml--30 mt--23 mr--30">
      <el-table :data="tableData" border stripe style="width: 100%" :height="height">
      <el-table :data="data" border stripe style="width: 100%" :height="height" :element-loading-text="'正在加载...'">
        <el-table-column prop="nickName" label="姓名"></el-table-column>
        <el-table-column prop="phonenumber" label="联系电话">
        </el-table-column>
        <el-table-column prop="roleName" label="角色"></el-table-column>
        <el-table-column prop="roleName" label="角色">
          <template #default="{ row }">
            {{ row.roleNames[0] }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="登陆账号">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="status" label="账号状态">
          <template slot-scope="{row}">
          <template #default="{ row }">
            <div class="status_class">
              <div :class="row.status == 0 ? 'green' : 'red'"></div>
              <div>{{ row.status == 0 ? '正常' : '停用' }}</div>
              <div v-if="row.status == 1" style="cursor: pointer;" @click="dialogVisibleView = true, rowView = row">
                <i class="el-icon-warning"></i>
              <div v-if="row.status == 1" style="cursor: pointer;">
                <el-tooltip class="item" effect="dark" :content="`禁用原因：${row.forbiddenRemark}`" placement="top-start">
                  <i class="el-icon-warning"></i>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="{row}">
            <div>
          <template #default="{ row }">
            <div v-if="row.userId != 1">
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button v-if="row.status != 0" type="text" @click="updateStatus(row, true)">启用</el-button>
              <el-button v-if="row.status == 0" type="text" @click="updateStatus(row, false)">禁用</el-button>
@@ -77,12 +83,10 @@
      </div>
    </div>

    <AddEdit v-if="dialogVisible" :row="row" :deptList="deptList" :roleList="roleList" :dialogVisible="dialogVisible"
    <AddEdit v-if="dialogVisible" :row="row" :roleList="roleList" :dialogVisible="dialogVisible"
      @close="dialogVisible = false, row = {}" @confirm="confirm" />
    <ResetPassword v-if="passwordVisible" :row="row" :dialogVisible="passwordVisible"
      @close="passwordVisible = false, row = {}" @confirm="passwordConfirm" />
    <ViewData v-if="dialogVisibleView" :row="rowView" :dialogVisible="dialogVisibleView"
      @close="dialogVisibleView = false, rowView = {}" />
    <Disb v-if="disbDialogVisible" :row="disbRow" :dialogVisible="disbDialogVisible"
      @close="disbDialogVisible = false, disbRow = {}" @confirm="disbConfirm" />
    <ShowDelConfirm :show="delShow" @close="delShow = false" @confirm="delConfirm" title="确认要删除该人员吗？"
@@ -91,16 +95,14 @@
</template>

<script>
import { getList, add, edit, delDept, deptList, roleList, updatePwd } from './service'
import { getList, add, edit, delDept, roleList, updatePwd, changeStatus } from './service'
import AddEdit from './components/addEdit.vue'
import ViewData from './components/viewData.vue'
import Disb from './components/disb.vue'
import ResetPassword from './components/resetPassWord.vue'
import ShowDelConfirm from '@/components/ShowDelConfirm'
export default {
  components: {
    AddEdit,
    ViewData,
    Disb,
    ResetPassword,
    ShowDelConfirm,
@@ -109,7 +111,6 @@
    return {
      dialogVisible: false,
      passwordVisible: false,
      dialogVisibleView: false,
      disbDialogVisible: false,
      delShow: false,
      data: [],
@@ -118,7 +119,6 @@
      roleId: [],
      status: '',
      roleList: [],
      deptList: [],
      searchForm: {
        total: 0,
        pageNum: 1,
@@ -137,32 +137,29 @@
  },
  watch: {},
  created() {
    // this.getRoleList()
    // this.getListData()
    // this.getdeptList()
    this.getRoleList()
    this.getListData()
  },
  mounted() { },
  methods: {
    getdeptList() {
      deptList({ status: 0 }).then((res) => {
        this.deptList = res
      })
    },
    getRoleList() {
      roleList().then((res) => {
        this.roleList = res
        this.roleList = res.records
      })
    },
    delConfirm() {
      delDept(this.delId).then(() => {
        this.delShow = false
        this.disbRow = {}
        this.getListData()
        this.msgsuccess('删除成功')
        this.getListData()
      })
    },
    disbConfirm(form) {
      edit(form).then(() => {
      changeStatus({
        remark: form.disableRemark,
        userId: form.userId
      }).then(res => {
        this.disbDialogVisible = false
        this.msgsuccess('禁用成功')
        this.getListData()
@@ -203,7 +200,10 @@
    },
    updateStatus(row, type) {
      if (type == true) {
        edit({ ...row, status: 0 }).then(() => {
        changeStatus({
          userId: row.userId
        }).then(res => {
          this.disbDialogVisible = false
          this.msgsuccess('启用成功')
          this.getListData()
        })
@@ -218,14 +218,13 @@
    },
    getListData() {
      let obj = {
        ...this.pagination,
        ...this.searchForm,
        nickNameOrPhone: this.nickNameOrPhone,
        deptId: this.deptId,
        roleIds: this.roleId,
        status: this.status,
      }
      getList(obj).then((res) => {
        this.pagination.total = res.total
        this.searchForm.total = res.total
        this.data = res.records
      })
    },
@@ -234,30 +233,22 @@
      this.roleId = []
      this.deptId = []
      this.status = ''
      this.pagination.pageNum = 1
      this.searchForm.pageNum = 1
      this.getListData()
    },
    onSubmit() {
      this.pagination.pageNum = 1
      this.searchForm.pageNum = 1
      this.getListData()
    },

    handleCurrentChange(e) {
      this.pagination.pageNum = e;
      this.searchForm.pageNum = e;
      this.getListData()
    },
    handleSizeChange(e) {
      this.pagination.pageSize = e
      this.searchForm.pageSize = e
      this.getListData()
    },
    // paginate(data, pageSize, currentPage) {
    //   if (data.length === 0) {
    //     return [];
    //   }
    //   const start = (currentPage - 1) * pageSize;
    //   const end = start + pageSize;
    //   return data.slice(start, end);
    // }
  },
};
</script>

 src/view/systemManage/user/service.js

@@ -1,8 +1,8 @@
import axios from '@/utils/request';

// 列表
export const getList = (data) => {
    return axios.post('/system/user/list', { ...data })
export const getList = (params) => {
    return axios.get('/system/user/list', { params })
}

// 添加
@@ -12,25 +12,25 @@

// 编辑
export const edit = (data) => {
    return axios.post('/system/user/edit', { ...data })
    return axios.put('/system/user/update', { ...data })
}

// 删除
export const delDept = (id) => {
    return axios.delete(`/system/user/deleteById/${id}`)
    return axios.delete(`/system/user/${id}`)
}

// 部门
export const deptList = (data) => {
    return axios.get(`/system/dept/list?status=${data.status}`,{...data})
}
// 角色
export const roleList = () => {
    return axios.post(`/system/role/listNotPage`)
    return axios.get(`/system/role/listPage`, { pageCurr: 1, pageSize: 9999 })
}
// 

// 禁用、启用
export const changeStatus = (data) => {
    return axios.put(`/system/user/changeStatus`,{...data})
    return axios.post(`/system/user/shopUserStart`, { ...data })
}

// 重置密码
export const updatePwd = (data) => {
    return axios.post(`/system/user/updatePwd`,{...data})
    return axios.put(`/system/user/resetPwd`, { ...data })
}