zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

账户管理增加type编辑

This commit is contained in:
曹前明 2022-09-07 18:34:08 +08:00
parent b29f3cc295
commit cd07f46cb9
2 changed files with 274 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/sys/user.vue
View File

@ -34,19 +34,20 @@
v-auth="'user.create'" v-auth="'user.create'"
@click="add" @click="add"
></el-button> ></el-button>
<!-- <el-button <el-select
type="danger" v-model="query.type"
plain placeholder="账号类型"
icon="el-icon-delete" @change="handleQuery"
:disabled="selection.length == 0" clearable
@click="batch_del" style="margin-left: 2px"
></el-button> --> >
<!-- <el-button <el-option
type="primary" v-for="item in userTypeOptions2"
plain :key="item.value"
:disabled="selection.length == 0" :label="item.label"
>密码重置 :value="item.value"
</el-button> --> ></el-option>
</el-select>
</div> </div>
<div class="right-panel"> <div class="right-panel">
<div class="right-panel-search"> <div class="right-panel-search">
@ -172,6 +173,16 @@
label-width="100px" label-width="100px"
label-position="left" label-position="left"
> >
<el-form-item label="账户类型：" prop="type">
<el-select v-model="addForm.type" placeholder="账号类型">
<el-option
v-for="item in userTypeOptions2"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="登录账号" prop="username"> <el-form-item label="登录账号" prop="username">
<el-input <el-input
v-model="addForm.username" v-model="addForm.username"
@ -244,19 +255,19 @@ export default {
}, },
//表单数据 //表单数据
addForm: { addForm: {
id: "",
username: "", username: "",
name: "", name: "",
// email: "", // email: "",
phone: "", phone: null,
// belong_dept: [], // belong_dept: [],
is_active: true, is_active: true,
type: "employee"
}, },
//验证规则 //验证规则
rules: { rules: {
username: [{ required: true, message: "请输入登录账号" }], username: [{ required: true, message: "请输入登录账号" }],
name: [{ required: true, message: "请输入真实姓名" }], name: [{ required: true, message: "请输入真实姓名" }],
group: [{ required: true, message: "请选择所属角色" }], type: [{ required: true, message: "请选择所属账号类型" }],
}, },
//所需数据选项 //所需数据选项
groups: [], groups: [],
@ -287,6 +298,12 @@ export default {
'visitor': '访客', 'visitor': '访客',
'driver':'司机' 'driver':'司机'
}, },
userTypeOptions2: [
{label:"正式员工", value:"employee"},
{label:"相关方", value:"remployee"},
{label:"访客", value:"visitor"},
{label:"货车司机", value:"driver"}
],
idArr: [] idArr: []
}; };
}, },
@ -330,6 +347,7 @@ export default {
this.addForm.username = row.username; this.addForm.username = row.username;
this.addForm.phone = row.phone; this.addForm.phone = row.phone;
this.addForm.is_active = row.is_active; this.addForm.is_active = row.is_active;
this.addForm.type = row.type;
}, },
formSetting(row) { formSetting(row) {
this.dialog.save = true; this.dialog.save = true;

449
src/views/sys/user_form.vue
View File

@ -1,222 +1,253 @@
<template> <template>
<el-drawer <el-drawer
title="用户岗位关系" title="用户岗位关系"
v-model="visible" v-model="visible"
:size="1000" :size="1000"
destroy-on-close destroy-on-close
@closed="closeDrawer" @closed="closeDrawer"
> >
<el-container v-loading="loading"> <el-container v-loading="loading">
<!--<sc-title title="详细信息"></sc-title>--> <!--<sc-title title="详细信息"></sc-title>-->
<el-main style="padding: 0 20px 20px 20px"> <el-main style="padding: 0 20px 20px 20px">
<el-form <el-form
ref="dialogForm" ref="dialogForm"
:model="form" :model="form"
:rules="rules" :rules="rules"
label-width="120px" label-width="120px"
> >
<el-row> <el-row>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="姓名：" prop="name"> <el-form-item label="姓名：" prop="name">
<span>{{form.name}}</span> <span>{{ form.name }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="登录账号：" prop="name"> <el-form-item label="登录账号：" prop="name">
<span>{{form.username}}</span> <span>{{ form.username }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="手机号：" prop="phone"> <el-form-item label="手机号：" prop="phone">
<span>{{form.phone}}</span> <span>{{ form.phone }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<el-form-item label="是否启用："> <el-form-item label="是否启用：">
<span>{{job_states[form.is_active]}}</span> <span>{{ job_states[form.is_active] }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<!--drag-sort --> <!--drag-sort -->
<sc-form-table v-model="userPostForm.list" :addTemplate="addTemplate" placeholder="暂无数据"> <sc-form-table
<!-- <el-table-column prop="val" label="名称" min-width="150"> v-model="userPostForm.list"
:addTemplate="addTemplate"
placeholder="暂无数据"
>
<!-- <el-table-column prop="val" label="名称" min-width="150">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.id">{{scope.row.name}}</span> <span v-if="scope.row.id">{{scope.row.name}}</span>
<el-input v-else v-model="scope.row.name" placeholder="名称"></el-input> <el-input v-else v-model="scope.row.name" placeholder="名称"></el-input>
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column prop="val" label="排序" min-width="80"> <el-table-column prop="val" label="排序" min-width="80">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.id">{{scope.row.sort}}</span> <span v-if="scope.row.id">{{ scope.row.sort }}</span>
<el-input v-else v-model="scope.row.sort" placeholder="请输入内容"></el-input> <el-input
</template> v-else
</el-table-column> v-model="scope.row.sort"
<el-table-column prop="time" label="部门" min-width="150"> placeholder="请输入内容"
<template #default="scope"> ></el-input>
<span v-if="scope.row.id&&scope.row.dept_">{{scope.row.dept_.name}}</span> </template>
<el-cascader </el-table-column>
v-else <el-table-column prop="time" label="部门" min-width="150">
v-model="scope.row.dept" <template #default="scope">
:options="group" <span v-if="scope.row.id && scope.row.dept_">{{
:props="groupsProps" scope.row.dept_.name
:show-all-levels="false" }}</span>
clearable <el-cascader
style="width: 100%" v-else
@change="groupsProps" v-model="scope.row.dept"
></el-cascader> :options="group"
</template> :props="groupsProps"
</el-table-column> :show-all-levels="false"
<el-table-column prop="type" label="岗位" min-width="150"> clearable
<template #default="scope"> style="width: 100%"
<span v-if="scope.row.id">{{scope.row.post_.name}}</span> @change="groupsProps"
<el-select v-else v-model="scope.row.post" filterable placeholder="请选择所在岗位"> ></el-cascader>
<el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id"></el-option> </template>
</el-select> </el-table-column>
</template> <el-table-column prop="type" label="岗位" min-width="150">
</el-table-column> <template #default="scope">
<el-table-column prop="open" label="操作" width="80" align="center"> <span v-if="scope.row.id">{{ scope.row.post_.name }}</span>
<template #default="scope"> <el-select
<el-button v-if="scope.row.id" text type="danger" size="small" @click="userPostDel(scope.row.id)">删除</el-button> v-else
<el-button v-else text type="primary" size="small" @click="createUserPost(scope.row)">添加</el-button> v-model="scope.row.post"
</template> filterable
</el-table-column> placeholder="请选择所在岗位"
</sc-form-table> >
</el-main> <el-option
</el-container> v-for="item in postOptions"
</el-drawer> :key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="open" label="操作" width="80" align="center">
<template #default="scope">
<el-button
v-if="scope.row.id"
text
type="danger"
size="small"
@click="userPostDel(scope.row.id)"
>删除</el-button
>
<el-button
v-else
text
type="primary"
size="small"
@click="createUserPost(scope.row)"
>添加</el-button
>
</template>
</el-table-column>
</sc-form-table>
</el-main>
</el-container>
</el-drawer>
</template> </template>
<script> <script>
import {genTree} from "@/utils/verificate"; import { genTree } from "@/utils/verificate";
export default { export default {
emits: ["success", "closed"], emits: ["success", "closed"],
data() { data() {
return { return {
addTemplate: { addTemplate: {
name: '', name: "",
sort: '', sort: "",
user: '', user: "",
post: "", post: "",
dept: "", dept: "",
}, },
userPostForm: { userPostForm: {
title: "用户/岗位关系", title: "用户/岗位关系",
list: [] list: [],
}, },
loading: false, loading: false,
job_states: { true: "启用",false: "禁用"}, job_states: { true: "启用", false: "禁用" },
visible: false, visible: false,
isSaveing: false, isSaveing: false,
form: {}, form: {},
addForm: { addForm: {
name: "", name: "",
sort: "", sort: "",
user: "", user: "",
post: "", post: "",
dept: [], dept: [],
}, },
groupsProps: { groupsProps: {
// value: "id", // value: "id",
multiple: false, multiple: false,
emitPath: false, emitPath: false,
checkStrictly: true, checkStrictly: true,
}, },
group: [], group: [],
postOptions: [], postOptions: [],
selectionFilters: [], selectionFilters: [],
filtersAddTemplate: { filtersAddTemplate: {
text: "", text: "",
value: "", value: "",
}, },
setFiltersVisible: false, setFiltersVisible: false,
}; };
}, },
mounted() { mounted() {
this.getPosts(); this.getPosts();
this.getGroup(); this.getGroup();
},
methods: {
getPosts() {
this.$API.system.post.list.req({ page: 0 }).then((res) => {
if (res.err_msg) {
this.$message.error(res.err_msg);
} else {
this.postOptions = res;
}
});
},
//加载树数据
async getGroup() {
let res = await this.$API.system.dept.list.req({ page: 0 });
this.group = genTree(res);
},
//显示
open(mode) {
this.mode = mode;
this.visible = true;
return this;
},
//表单注入数据
setData(data) {
debugger;
Object.assign(this.form, data);
this.getUserPostList();
},
closeDrawer() {
this.visible = false;
this.$emit("closed");
},
handleChange(value) {
debugger;
console.log(value);
console.log(this.addForm.parent);
},
}, //设置过滤项
methods: { setFilters(filters) {
getPosts(){ this.selectionFilters = filters;
this.$API.system.post.list.req({page:0}).then(res=>{ this.setFiltersVisible = true;
if(res.err_msg){ },
this.$message.error(res.err_msg) /////
}else{ //用户岗位关系列表
this.postOptions = res; getUserPostList() {
} debugger;
}) console.log(this.form.id);
}, let obj = { user: this.form.id, page: 0 };
//加载树数据 this.$API.system.userPost.list.req(obj).then((res) => {
async getGroup() { this.userPostForm.list = res;
let res = await this.$API.system.dept.list.req({page: 0}); });
this.group =genTree(res); },
}, //新增用户岗位关系
//显示 createUserPost(row) {
open(mode) { debugger;
this.mode = mode; console.log(row);
this.visible = true; this.isSaveing = true;
return this; row.user = this.form.id;
}, this.$API.system.userPost.create.req(row).then((res) => {
//表单注入数据 this.getUserPostList();
setData(data) { this.$message.success("操作成功");
debugger; });
Object.assign(this.form, data); },
this.getUserPostList(); //用户岗位关系删除
}, userPostDel(id) {
closeDrawer() { this.$confirm(`确定删除该岗位关系吗？`, "提示", {
this.visible = false; type: "warning",
this.$emit('closed'); confirmButtonText: "删除",
}, confirmButtonClass: "el-button--danger",
handleChange(value) { }).then(() => {
debugger; this.$API.system.userPost.delete.req(id).then((res) => {
console.log(value); this.getUserPostList();
console.log(this.addForm.parent); this.$message.success("操作成功");
}, });
});
//设置过滤项 },
setFilters(filters) { },
this.selectionFilters = filters; };
this.setFiltersVisible = true;
},
/////
//用户岗位关系列表
getUserPostList(){
debugger;
console.log(this.form.id);
let obj = {user:this.form.id, page:0};
this.$API.system.userPost.list.req(obj).then(res=>{
this.userPostForm.list=res;
})
},
//新增用户岗位关系
createUserPost(row){
debugger;
console.log(row);
this.isSaveing = true;
row.user = this.form.id;
this.$API.system.userPost.create.req(row).then(res=>{
this.getUserPostList();
this.$message.success("操作成功");
})
},
//用户岗位关系删除
userPostDel(id){
this.$confirm(`确定删除该岗位关系吗？`, '提示', {
type: 'warning',
confirmButtonText: '删除',
confirmButtonClass: 'el-button--danger'
}).then(() => {
this.$API.system.userPost.delete.req(id).then(res=>{
this.getUserPostList();
this.$message.success("操作成功");
})
})
},
},
};
</script> </script>
<style> <style>