增加二级路由渲染和跳转,驾驶员列表移到系统管理下、新增用户管理模块和删除二次确认弹窗组件
New file |
| | |
| | | <template> |
| | | <div> |
| | | <el-dialog top="40vh" :visible.sync="show" :show-close="false" :append-to-body="true" :close-on-click-modal="false" |
| | | width="433px"> |
| | | <div class="top-con a-center" slot="title"> |
| | | <div class="left"> |
| | | <img src="@/assets/notice@2x.png" style="width: 24px;height: 24px;margin-right: 14px;" /> |
| | | <div class="title">{{ title }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="lh--32 fs--20"> |
| | | {{ tip }} |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="$emit('close')">取消</el-button> |
| | | <el-button :type="btnType" @click="$emit('confirm')">{{ okText }}</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | components: {}, |
| | | props: { |
| | | show: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | title: { |
| | | type: String, |
| | | default: '确认要删除这条信息吗?', |
| | | }, |
| | | tip: { |
| | | type: String, |
| | | default: '删除后信息将无法找回', |
| | | }, |
| | | okText: { |
| | | type: String, |
| | | default: '确认', |
| | | }, |
| | | btnType: { |
| | | type: String, |
| | | default: 'danger', |
| | | } |
| | | }, |
| | | data() { |
| | | return {}; |
| | | }, |
| | | computed: {}, |
| | | watch: {}, |
| | | created() { }, |
| | | mounted() { }, |
| | | methods: {}, |
| | | }; |
| | | </script> |
| | | <style scoped lang="less"> |
| | | .left { |
| | | display: flex; |
| | | } |
| | | |
| | | ::v-deep .el-dialog { |
| | | border-radius: 12px; |
| | | |
| | | .el-dialog__header { |
| | | padding-top: 28px; |
| | | padding-right: 27px; |
| | | padding-left: 34px; |
| | | padding-bottom: 11px; |
| | | } |
| | | |
| | | .el-dialog__body { |
| | | border-top: unset; |
| | | padding: unset; |
| | | padding-left: 73px; |
| | | padding-right: 20px; |
| | | } |
| | | |
| | | .el-dialog__footer { |
| | | border-top: unset; |
| | | padding-top: 18px; |
| | | padding-right: 27px; |
| | | padding-bottom: 29px; |
| | | } |
| | | } |
| | | |
| | | .bgcolor1 { |
| | | background: rgba(22, 119, 255, 1); |
| | | } |
| | | |
| | | .top-con { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | |
| | | .title { |
| | | font-family: PingFangSC, PingFang SC; |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | color: rgba(0, 0, 0, 1); |
| | | margin-bottom: 13px; |
| | | } |
| | | } |
| | | |
| | | .dialog-footer { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | } |
| | | </style> |
| | |
| | | </div>
|
| | | <div class="menu w100 bgColor1">
|
| | | <div v-for="(item, index) in routesList" :key="index" class="flex a-center h100">
|
| | | <div v-for="(item2, index2) in item.children" :key="index2" class="h100">
|
| | | <div @click="$router.push(item2.path)" v-if="!item2.meta.hide"
|
| | | class="flex a-center j-center h100 w--160 menuItemHover pointer"
|
| | | :class="item2.path == $route.path && 'bgColor2'">
|
| | | <img v-if="item2.meta.icon" :src="require(`@/assets/routerIcon/${item2.meta.icon}.png`)"
|
| | | <div v-if="!item.meta || !item.meta.title" class="h100">
|
| | | <div v-for="(item2, index2) in item.children" :key="index2" class="h100">
|
| | | <div @click="$router.push(item2.path)" v-if="!item2.meta.hide"
|
| | | class="flex a-center j-center h100 w--160 menuItemHover pointer"
|
| | | :class="item2.path == $route.path && 'bgColor2'">
|
| | | <img v-if="item2.meta.icon" :src="require(`@/assets/routerIcon/${item2.meta.icon}.png`)"
|
| | | class="w--15 h--15 mr--12 shrink0" />
|
| | | <div class="color1">
|
| | | {{ item2.meta.title }}
|
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | | <div v-else :class="$route.path.includes('systemManage') && 'bgColor2'"
|
| | | class="h100 w--160 menuItemHover dropdown" @mouseenter="routerDropdown(true)"
|
| | | @mouseleave="routerDropdown(false)">
|
| | | <div class="flex a-center j-center h100">
|
| | | <img :src="require(`@/assets/routerIcon/${item.meta.icon}.png`)"
|
| | | class="w--15 h--15 mr--12 shrink0" />
|
| | | <div class="color1">
|
| | | {{ item.meta.title }}
|
| | | </div>
|
| | | </div>
|
| | | <div v-if="routerIsOpen" class="dropdown-menu positionTwo">
|
| | | <div @click="$router.push(item.path + '/' + item2.path), routerIsOpen = false"
|
| | | class="dropdown-item flex a-center" v-for="(item2, index2) in item.children" :key="index2">
|
| | | {{ item2.meta.title }}
|
| | | </div>
|
| | | </div>
|
| | |
| | | return {
|
| | | routesList: routes,
|
| | | isOpen: false,
|
| | | routerIsOpen: false,
|
| | | menuItems: [
|
| | | { text: '密码设置' },
|
| | | { text: '退出登录' },
|
| | |
| | | methods: {
|
| | | toggleDropdown(state) {
|
| | | this.isOpen = state;
|
| | | },
|
| | | routerDropdown(state) {
|
| | | this.routerIsOpen = state;
|
| | | }
|
| | | }
|
| | | }
|
| | |
| | | cursor: pointer;
|
| | | }
|
| | |
|
| | | .positionTwo {
|
| | | transform: unset !important;
|
| | | width: 160px !important;
|
| | | }
|
| | |
|
| | | .dropdown-menu {
|
| | | position: absolute;
|
| | | top: 100%;
|
| | |
| | | ]
|
| | | },
|
| | | {
|
| | | path: '/driver',
|
| | | component: Layout,
|
| | | children: [
|
| | | {
|
| | | path: '/driver',
|
| | | component: () => import('@/view/driver'),
|
| | | meta: {
|
| | | title: '驾驶员管理',
|
| | | icon: 'driver'
|
| | | }
|
| | | }
|
| | | ]
|
| | | },
|
| | | {
|
| | | path: '/car',
|
| | | component: Layout,
|
| | | children: [
|
| | |
| | | }
|
| | | }
|
| | | ]
|
| | | },
|
| | | {
|
| | | path: '/systemManage',
|
| | | meta: {
|
| | | title: "系统管理",
|
| | | icon: 'sys',
|
| | | },
|
| | | component: Layout,
|
| | | children: [
|
| | | {
|
| | | path: 'driver',
|
| | | component: () => import('@/view/systemManage/driver'),
|
| | | meta: {
|
| | | title: '驾驶员列表',
|
| | | }
|
| | | },
|
| | | {
|
| | | path: 'user',
|
| | | component: () => import('@/view/systemManage/user'),
|
| | | meta: {
|
| | | title: '用户管理',
|
| | | }
|
| | | },
|
| | | ]
|
| | | }
|
| | |
|
| | | ]
|
New file |
| | |
| | | <template> |
| | | <div> |
| | | <el-dialog :visible.sync="dialogVisible" @close="$emit('close')" :title="row.deptId ? '编辑人员' : '添加人员'" |
| | | width="30%"> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
| | | <el-form-item label="姓名" prop="nickName"> |
| | | <el-input v-model="form.nickName" placeholder="请输入" style="width: 50%;"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="联系电话" prop="phonenumber"> |
| | | <el-input v-model="form.phonenumber" placeholder="请输入" style="width: 50%;"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="登陆账号" prop="userName"> |
| | | <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" |
| | | :value="item.roleId"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="登录状态" prop="status"> |
| | | <el-switch v-model="form.status"></el-switch> |
| | | </el-form-item> |
| | | <el-form-item label="备注" prop="remark"> |
| | | <el-input type="textarea" v-model="form.remark" placeholder="请输入" style="width: 50%;"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer"> |
| | | <el-button @click="$emit('close')">关闭</el-button> |
| | | <el-button type="primary" @click="submit">保存</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | props: { |
| | | dialogVisible: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | row: { |
| | | type: Object, |
| | | default: () => { } |
| | | }, |
| | | deptList: { |
| | | type: Array, |
| | | default: () => [] |
| | | }, |
| | | roleList: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | form: { status: true }, |
| | | 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' }], |
| | | } |
| | | }; |
| | | }, |
| | | created() { |
| | | this.form = { status: true } |
| | | if (Object.keys(this.row).length) { |
| | | this.form = { |
| | | userId: this.row.userId, |
| | | nickName: this.row.nickName, |
| | | phonenumber: this.row.phonenumber, |
| | | deptId: this.row.deptId, |
| | | roleId: this.row.roleId, |
| | | userName: this.row.userName, |
| | | remark: this.row.remark, |
| | | status: this.row.status == 0 ? true : false, |
| | | } |
| | | } else { |
| | | this.form = {} |
| | | } |
| | | }, |
| | | mounted() { }, |
| | | methods: { |
| | | |
| | | submit() { |
| | | this.$refs['form'].validate((valid) => { |
| | | if (valid) { |
| | | let obj = { |
| | | ...this.form, |
| | | status: this.form.status ? 0 : 1 |
| | | } |
| | | this.$emit('confirm', obj) |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | <style scoped></style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | <el-dialog :visible.sync="dialogVisible" @close="$emit('close')" title="禁用人员" width="30%"> |
| | | <el-form ref="form" :model="form" label-width="80px"> |
| | | <el-form-item label="姓名" prop="nickName"> |
| | | {{ form.nickName }} |
| | | </el-form-item> |
| | | <el-form-item label="登陆账号" prop="userName"> |
| | | {{ form.userName }} |
| | | </el-form-item> |
| | | <el-form-item label="禁用备注" prop="disableRemark"> |
| | | <el-input type="textarea" v-model="form.disableRemark" placeholder="请输入备注"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer"> |
| | | <el-button @click="$emit('close')">关闭</el-button> |
| | | <el-button type="primary" @click="submit">确定</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | props: { |
| | | dialogVisible: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | row: { |
| | | type: Object, |
| | | default: () => { } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | form: { status: false }, |
| | | }; |
| | | }, |
| | | created() { |
| | | this.form = { status: false } |
| | | if (Object.keys(this.row).length) { |
| | | this.form = { |
| | | ...this.row, |
| | | userId: this.row.userId, |
| | | nickName: this.row.nickName, |
| | | userName: this.row.userName, |
| | | status: 1, |
| | | disableRemark: this.row.disableRemark |
| | | } |
| | | } |
| | | }, |
| | | mounted() { }, |
| | | methods: { |
| | | submit() { |
| | | this.$refs['form'].validate((valid) => { |
| | | if (valid) { |
| | | this.form.deptId = this.row.deptId |
| | | this.form.orderNum = 0 |
| | | this.form.ancestors = 0 |
| | | this.form.parentId = 100 |
| | | this.$emit('confirm', this.form) |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | <style scoped></style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | <el-dialog :visible.sync="dialogVisible" @close="$emit('close')" title="重置密码" |
| | | width="30%"> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
| | | <el-form-item label="姓名" prop="nickName"> |
| | | <el-input :disabled="true" v-model="form.nickName" placeholder="请输入" style="width: 50%;"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="登陆账号" prop="account"> |
| | | <el-input :disabled="true" v-model="form.account" placeholder="请输入" style="width: 50%;"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="新密码" prop="password"> |
| | | <el-input v-model="form.password" placeholder="请输入" style="width: 50%;"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="确认密码" prop="confirmPassword"> |
| | | <el-input v-model="form.confirmPassword" placeholder="请输入" style="width: 50%;"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer"> |
| | | <el-button @click="$emit('close')">关闭</el-button> |
| | | <el-button type="primary" @click="submit">保存</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | props: { |
| | | dialogVisible: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | row: { |
| | | type: Object, |
| | | default: () => { } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | form: { status: true }, |
| | | rules: { |
| | | password: [{ required: true, message: '请新密码', trigger: 'blur' }], |
| | | confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' },{ |
| | | validator: (rule, value, callback) => { |
| | | if (value !== this.form.password) { |
| | | callback(new Error('两次输入密码不一致!')); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }}], |
| | | } |
| | | }; |
| | | }, |
| | | created() { |
| | | this.form = { status: true } |
| | | if (Object.keys(this.row).length) { |
| | | this.form = { |
| | | userId: this.row.userId, |
| | | nickName: this.row.nickName, |
| | | account: this.row.userName, |
| | | } |
| | | } |
| | | }, |
| | | mounted() { }, |
| | | methods: { |
| | | |
| | | 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 |
| | | this.$emit('confirm', this.form) |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | <style scoped></style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | <el-dialog :visible.sync="dialogVisible" @close="$emit('close')" title="禁用信息" width="30%"> |
| | | <el-form ref="form" label-width="80px"> |
| | | <el-form-item label="禁用原因" prop="disableRemark"> |
| | | {{form.disableRemark}} |
| | | </el-form-item> |
| | | <el-form-item label="操作时间" prop="updateTime"> |
| | | {{form.updateTime}} |
| | | </el-form-item> |
| | | <el-form-item label="操作人" prop="updateBy"> |
| | | {{form.updateName }} |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer"> |
| | | <el-button @click="$emit('close')">关闭</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | props: { |
| | | dialogVisible: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | row: { |
| | | type: Object, |
| | | default: () => { } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | form: {}, |
| | | }; |
| | | }, |
| | | created() { |
| | | if (Object.keys(this.row).length) { |
| | | this.form = {...this.row} |
| | | } |
| | | }, |
| | | mounted() { }, |
| | | methods: { |
| | | }, |
| | | }; |
| | | </script> |
| | | <style scoped></style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | <el-card> |
| | | <el-form :inline="true" class="demo-form-inline"> |
| | | <div style="display: flex;justify-content: space-between;"> |
| | | <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.deptId" :label="item.deptName" :value="item.deptId"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="人员角色"> |
| | | <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-select v-model="status" placeholder="请选择(多选)"> |
| | | <el-option |
| | | v-for="item in [{ label: '全部', value: '' }, { label: '启用', value: 0 }, { label: '禁用', value: 1 }]" |
| | | :key="item.value" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <div style="text-align: right;"> |
| | | <el-form-item> |
| | | <el-button @click="reset">重置</el-button> |
| | | <el-button type="primary" @click="onSubmit">查询</el-button> |
| | | </el-form-item> |
| | | </div> |
| | | </el-form> |
| | | </el-card> |
| | | <el-card style="margin-top: 20px;"> |
| | | <div class="add_btn"> |
| | | <el-button @click="dialogVisible = true" type="primary">添加人员</el-button> |
| | | </div> |
| | | <el-table border stripe :data="data"> |
| | | <el-table-column label="序号" type="index" width="50"> |
| | | </el-table-column> |
| | | <el-table-column prop="nickName" label="姓名"></el-table-column> |
| | | <el-table-column prop="phonenumber" label="联系电话"> |
| | | </el-table-column> |
| | | <el-table-column prop="deptName" label="所属部门"> |
| | | <!-- <template slot-scope="{row}"> |
| | | <div>{{ row.children.length }}</div> |
| | | </template> --> |
| | | </el-table-column> |
| | | <el-table-column prop="roleName" label="角色"> |
| | | <!-- <template slot-scope="{row}"> |
| | | <div>{{ row.children.length }}</div> |
| | | </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}"> |
| | | <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> |
| | | </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> |
| | | <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> |
| | | <el-button type="text" @click="detail(row)">重置密码</el-button> |
| | | <el-button type="text" @click="del(row)">删除</el-button> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="pagination"> |
| | | <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"> |
| | | <span>共{{ pagination.total }}条</span> |
| | | </el-pagination> |
| | | </div> |
| | | </el-card> |
| | | |
| | | <AddEdit v-if="dialogVisible" :row="row" :deptList="deptList" :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="确认要删除该人员吗?" |
| | | tip="删除人员后,该人员不可登录。如非必要,系统建议您使用禁用功能。" okText="确定删除" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getList, add, edit, delDept, deptList, roleList, updatePwd } 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, |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogVisible: false, |
| | | passwordVisible: false, |
| | | dialogVisibleView: false, |
| | | disbDialogVisible: false, |
| | | delShow: false, |
| | | data: [], |
| | | nickNameOrPhone: '', |
| | | deptId: [], |
| | | roleId: [], |
| | | status: '', |
| | | roleList: [], |
| | | deptList: [], |
| | | pagination: { |
| | | total: 10, |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | }, |
| | | row: {}, |
| | | rowView: {}, |
| | | disbRow: {}, |
| | | delId: '', |
| | | }; |
| | | }, |
| | | computed: {}, |
| | | watch: {}, |
| | | created() { |
| | | // this.getRoleList() |
| | | // this.getListData() |
| | | // this.getdeptList() |
| | | }, |
| | | mounted() { }, |
| | | methods: { |
| | | getdeptList() { |
| | | deptList({ status: 0 }).then((res) => { |
| | | this.deptList = res |
| | | }) |
| | | }, |
| | | getRoleList() { |
| | | roleList().then((res) => { |
| | | this.roleList = res |
| | | }) |
| | | }, |
| | | delConfirm() { |
| | | delDept(this.delId).then(() => { |
| | | this.delShow = false |
| | | this.disbRow = {} |
| | | this.getListData() |
| | | this.msgsuccess('删除成功') |
| | | }) |
| | | }, |
| | | disbConfirm(form) { |
| | | edit(form).then(() => { |
| | | this.disbDialogVisible = false |
| | | this.msgsuccess('禁用成功') |
| | | this.getListData() |
| | | }) |
| | | }, |
| | | confirm(form) { |
| | | console.log('confirm confirmform form', form); |
| | | |
| | | if (form.userId) { |
| | | edit(form).then(() => { |
| | | this.row = {} |
| | | this.dialogVisible = false |
| | | this.msgsuccess('修改成功') |
| | | this.getListData() |
| | | }) |
| | | } else { |
| | | add(form).then(() => { |
| | | this.row = {} |
| | | this.dialogVisible = false |
| | | this.msgsuccess('添加成功') |
| | | this.getListData() |
| | | }) |
| | | } |
| | | }, |
| | | passwordConfirm(form) { |
| | | console.log('form form', form); |
| | | updatePwd(form).then(() => { |
| | | this.row = {} |
| | | this.passwordVisible = false |
| | | this.msgsuccess('修改密码成功') |
| | | this.getListData() |
| | | }) |
| | | }, |
| | | detail(row) { |
| | | console.log('row row', row); |
| | | this.passwordVisible = true |
| | | this.row = row |
| | | // this.$router.push(`/info/type?deptId=${row.deptId}`) |
| | | }, |
| | | edit(row) { |
| | | this.row = row |
| | | this.dialogVisible = true |
| | | }, |
| | | updateStatus(row, type) { |
| | | console.log('row row', row, 'type', type); |
| | | |
| | | if (type == true) { |
| | | edit({ ...row, status: 0 }).then(() => { |
| | | this.msgsuccess('启用成功') |
| | | this.getListData() |
| | | }) |
| | | } else { |
| | | this.disbRow = row |
| | | this.disbDialogVisible = true |
| | | } |
| | | }, |
| | | del(row) { |
| | | this.delShow = true |
| | | this.delId = row.userId |
| | | }, |
| | | getListData() { |
| | | let obj = { |
| | | ...this.pagination, |
| | | nickNameOrPhone: this.nickNameOrPhone, |
| | | deptId: this.deptId, |
| | | roleIds: this.roleId, |
| | | status: this.status, |
| | | } |
| | | getList(obj).then((res) => { |
| | | this.pagination.total = res.total |
| | | this.data = res.records |
| | | console.log('data data', this.data); |
| | | |
| | | }) |
| | | }, |
| | | reset() { |
| | | this.nickNameOrPhone = '' |
| | | this.roleId = [] |
| | | this.deptId = [] |
| | | this.status = '' |
| | | this.pagination.pageNum = 1 |
| | | this.getListData() |
| | | }, |
| | | onSubmit() { |
| | | this.pagination.pageNum = 1 |
| | | this.getListData() |
| | | }, |
| | | |
| | | handleCurrentChange(e) { |
| | | this.pagination.pageNum = e; |
| | | this.getListData() |
| | | }, |
| | | handleSizeChange(e) { |
| | | this.pagination.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> |
| | | <style lang="less" scoped> |
| | | .green { |
| | | background-color: green; |
| | | } |
| | | |
| | | .red { |
| | | background-color: red; |
| | | } |
| | | |
| | | .demo-form-inline { |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .add_btn { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .pagination { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .status_class { |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | div:nth-child(1) { |
| | | width: 9px; |
| | | height: 9px; |
| | | border-radius: 50%; |
| | | margin-right: 5px; |
| | | } |
| | | |
| | | div:nth-child(2) { |
| | | margin-right: 8px; |
| | | } |
| | | } |
| | | </style> |
New file |
| | |
| | | import axios from '@/utils/request'; |
| | | |
| | | // 列表 |
| | | export const getList = (data) => { |
| | | return axios.post('/system/user/list', { ...data }) |
| | | } |
| | | |
| | | // 添加 |
| | | export const add = (data) => { |
| | | return axios.post('/system/user/add', { ...data }) |
| | | } |
| | | |
| | | // 编辑 |
| | | export const edit = (data) => { |
| | | return axios.post('/system/user/edit', { ...data }) |
| | | } |
| | | |
| | | // 删除 |
| | | export const delDept = (id) => { |
| | | return axios.delete(`/system/user/deleteById/${id}`) |
| | | } |
| | | |
| | | // 部门 |
| | | export const deptList = (data) => { |
| | | return axios.get(`/system/dept/list?status=${data.status}`,{...data}) |
| | | } |
| | | export const roleList = () => { |
| | | return axios.post(`/system/role/listNotPage`) |
| | | } |
| | | // |
| | | export const changeStatus = (data) => { |
| | | return axios.put(`/system/user/changeStatus`,{...data}) |
| | | } |
| | | export const updatePwd = (data) => { |
| | | return axios.post(`/system/user/updatePwd`,{...data}) |
| | | } |