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

dept

This commit is contained in:
shijing 2022-06-17 16:59:39 +08:00
parent b3c99be0fa
commit 940782989b
8 changed files with 784 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -60,7 +60,9 @@
"no-tabs": 0, "no-tabs": 0,
"no-mixed-spaces-and-tabs": 0, "no-mixed-spaces-and-tabs": 0,
"vue/no-unused-components": 0, "vue/no-unused-components": 0,
"vue/multi-word-component-names": 0 "vue/multi-word-component-names": 0,
"no-debugger": "off",
"no-console": "off"
} }
}, },
"browserslist": [ "browserslist": [

16
src/api/model/hrm.js
View File

@ -10,6 +10,14 @@ export default {
return await http.get(this.url, data); return await http.get(this.url, data);
} }
}, },
create: {
name: "新增员工",
req: async function(data){
return await http.post(
`${config.API_URL}/hrm/employee/`,
data);
}
},
update: { update: {
name: "更新员工信息", name: "更新员工信息",
req: async function(id, data){ req: async function(id, data){
@ -17,6 +25,12 @@ export default {
`${config.API_URL}/hrm/employee/${id}/`, `${config.API_URL}/hrm/employee/${id}/`,
data); data);
} }
},
delete: {
name: "删除员工",
req: async function(id){
return await http.delete(`${config.API_URL}/hrm/employee/${id}/`);
}
} }
}, },
} }

184
src/api/model/system.js
View File

@ -18,29 +18,144 @@ export default {
} }
} }
}, },
dic: { dept: {
tree: {
url: `${config.API_URL}/system/dic/tree`,
name: "获取字典树",
get: async function(){
return await http.get(this.url);
}
},
list: { list: {
url: `${config.API_URL}/system/dic/list`, url: `${config.API_URL}/system/dept/`,
name: "字典明细", name: "获取部门列表",
get: async function(params){ req: async function(data){
return await http.get(this.url, params); return await http.get(this.url, data);
} }
}, },
get: { create: {
url: `${config.API_URL}/system/dic/get`, url: `${config.API_URL}/system/dept/`,
name: "获取字典数据", name: "新增部门",
get: async function(params){ req: async function(data){
return await http.get(this.url, params); return await http.post(this.url,data);
}
},
update: {
name: "更新部门信息",
req: async function(id, data){
return await http.put(
`${config.API_URL}/system/dept/${id}/`,
data
);
}
},
delete: {
name: "删除部门",
req: async function(id){
return await http.delete(`${config.API_URL}/hrm/employee/${id}/`);
} }
} }
}, },
dicttype: {
list: {
url: `${config.API_URL}/system/dicttype/`,
name: "获取字典类型列表",
req: async function(data){
return await http.get(this.url, data);
}
},
create: {
url: `${config.API_URL}/system/dicttype/`,
name: "新增字典类型",
req: async function(data){
return await http.post(this.url,data);
}
},
update: {
name: "更新字典类型",
req: async function(id, data){
return await http.put(
`${config.API_URL}/system/dicttype/${id}/`,
data
);
}
},
delete: {
name: "删除字典类型",
req: async function(id){
return await http.delete(`${config.API_URL}/system/dicttype/${id}/`);
}
}
},
dict: {
list: {
url: `${config.API_URL}/system/dict/`,
name: "获取字典列表",
req: async function(data){
return await http.get(this.url, data);
}
},
create: {
url: `${config.API_URL}/system/dict/`,
name: "新增字典",
req: async function(data){
return await http.post(this.url,data);
}
},
update: {
name: "更新字典",
req: async function(id, data){
return await http.put(
`${config.API_URL}/system/dict/${id}/`,
data
);
}
},
delete: {
name: "删除字典",
req: async function(id){
return await http.delete(`${config.API_URL}/system/dict/${id}/`);
}
}
},
permission:{
list: {
url: `${config.API_URL}/system/permission/`,
name: "获取菜单权限列表",
req: async function(data){
return await http.get(this.url, data);
}
},
codes: {
url: `${config.API_URL}/system/permission/codes/`,
name: "获取全部权限标识",
req: async function(data){
return await http.get(this.url, data);
}
},
create: {
url: `${config.API_URL}/system/permission/`,
name: "新增菜单权限",
req: async function(data){
return await http.post(this.url,data);
}
},
update: {
name: "更新菜单权限",
req: async function(id, data){
return await http.put(
`${config.API_URL}/system/permission/${id}/`,
data
);
}
},
delete: {
name: "删除菜单权限",
req: async function(id){
return await http.delete(`${config.API_URL}/system/permission/${id}/`);
}
},
deletes: {
name: "批量删除菜单权限",
url: `${config.API_URL}/system/permission/deletes/`,
req: async function(data){
return await http.post(this.url,data);
}
},
},
role: { role: {
list: { list: {
url: `${config.API_URL}/system/role/list2`, url: `${config.API_URL}/system/role/list2`,
@ -50,15 +165,7 @@ export default {
} }
} }
}, },
dept: {
list: {
url: `${config.API_URL}/system/dept/list`,
name: "获取部门列表",
get: async function(params){
return await http.get(this.url, params);
}
}
},
user: { user: {
list: { list: {
url: `${config.API_URL}/system/user/list`, url: `${config.API_URL}/system/user/list`,
@ -68,15 +175,6 @@ export default {
} }
} }
}, },
app: {
list: {
url: `${config.API_URL}/system/app/list`,
name: "应用列表",
get: async function(){
return await http.get(this.url);
}
}
},
log: { log: {
list: { list: {
url: `${config.API_URL}/system/log/list`, url: `${config.API_URL}/system/log/list`,
@ -86,20 +184,4 @@ export default {
} }
} }
}, },
table: {
list: {
url: `${config.API_URL}/system/table/list`,
name: "表格列管理列表",
get: async function(params){
return await http.get(this.url, params);
}
},
info: {
url: `${config.API_URL}/system/table/info`,
name: "表格列管理详情",
get: async function(params){
return await http.get(this.url, params);
}
}
}
} }

53
src/components/scTable/index.vue
View File

@ -264,6 +264,7 @@ export default {
}, },
//获取数据 //获取数据
async getData() { async getData() {
debugger;
this.loading = true; this.loading = true;
var reqData = { var reqData = {
[config.request.page]: this.currentPage, [config.request.page]: this.currentPage,
@ -277,14 +278,22 @@ export default {
// delete reqData[config.request.pageSize] // delete reqData[config.request.pageSize]
} }
Object.assign(reqData, this.tableParams); Object.assign(reqData, this.tableParams);
debugger;
try { try {
var res = await this.apiObj.req(reqData); var res = await this.apiObj.req(reqData);
if (this.hidePagination) { if (this.hidePagination) {
this.tableData = res;
if (res.length == 0) { if (res.length == 0) {
this.emptyText = "暂无数据"; this.emptyText = "暂无数据";
} }
if(this.$route.path==='/sys/dept'||this.$route.path==='/sys/perm'){
this.tableData = this.redata(res);
debugger;
console.log(this.tableData)
}else{
this.tableData = res || [];
}
// this.tableData = res;
this.loading = false; this.loading = false;
this.$refs.scTable.setScrollTop(0); this.$refs.scTable.setScrollTop(0);
this.$emit("dataChange", res, this.tableData); this.$emit("dataChange", res, this.tableData);
@ -296,18 +305,28 @@ export default {
} }
try { try {
var response = config.parseData(res); var response = config.parseData(res);
if (response.total == 0) { if (response.total === 0) {
this.emptyText = "暂无数据"; this.emptyText = "暂无数据";
} }
let dataList = null;
if (this.hidePagination) { if (this.hidePagination) {
this.tableData = response.data || []; dataList = response.data || [];
} else { } else {
this.tableData = response.rows || []; dataList = response.rows || [];
} }
if(this.$route.path==='/sys/dept'||this.$route.path==='/sys/perm'){
this.tableData = this.redata(dataList);
debugger;
console.log(this.tableData)
}else{
this.tableData = dataList || [];
}
this.total = response.total || 0; this.total = response.total || 0;
this.summary = response.summary || {}; this.summary = response.summary || {};
this.loading = false; this.loading = false;
this.$refs.scTable.setScrollTop(0); this.$refs.scTable.setScrollTop(0);
this.$emit("dataChange", res, this.tableData); this.$emit("dataChange", res, this.tableData);
} catch (error) { } catch (error) {
this.loading = false; this.loading = false;
@ -315,6 +334,30 @@ export default {
return false; return false;
} }
}, },
redata(postList){
let posts = [];
postList.forEach(item => {
let obj = new Object();
obj = {...item};
obj.parentId = item.parent;
posts.push(obj)
});
let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
let arr = [];
for (let item of posts) {
//debugger;
if (item.parentId == null) {
arr.push(item);
continue
}
let parent = obj[item.parentId];
parent.children = parent.children ? parent.children : [];
parent.children.push(item);
}
debugger;
console.log(arr);
return arr;
},
//分页点击 //分页点击
paginationChange() { paginationChange() {
this.getData(); this.getData();

2
src/config/select.js
View File

@ -3,7 +3,7 @@ import API from "@/api";
//字典选择器配置 //字典选择器配置
export default { export default {
dicApiObj: API.system.dic.get, //获取字典接口对象 dicApiObj: API.system.dict.list, //获取字典接口对象
parseData: function (res) { parseData: function (res) {
return { return {
data: res.data, //分析行数据字段结构 data: res.data, //分析行数据字段结构

40
src/views/hrm/employee.vue
View File

@ -2,7 +2,8 @@
<el-container> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<!-- <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> <el-button type="primary" icon="el-icon-plus" @click="handleForm('add')"></el-button>
<!--
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button> <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button> --> <el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button> -->
</div> </div>
@ -31,8 +32,8 @@
<el-table-column label="操作" fixed="right" align="right" width="170"> <el-table-column label="操作" fixed="right" align="right" width="170">
<template #default="scope"> <template #default="scope">
<el-button-group> <el-button-group>
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button> <el-button text type="primary" size="small" @click="handleForm('show',scope.row)">查看</el-button>
<el-button text type="warning" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button> <el-button text type="warning" size="small" @click="handleForm('edit',scope.row)">编辑</el-button>
<!-- <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)"> <!-- <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
<template #reference> <template #reference>
<el-button text type="danger" size="small">删除</el-button> <el-button text type="danger" size="small">删除</el-button>
@ -70,6 +71,19 @@
}, },
methods: { methods: {
//添加 //添加
handleForm(type,row) {
this.dialog.save = true;
this.$nextTick(() => {
if(type==='add'){
this.$refs.saveDialog.open(type).setData({})
}else{
this.$refs.saveDialog.open(type).setData(row)
}
})
},
/*//添加
add(){ add(){
this.dialog.save = true this.dialog.save = true
this.$nextTick(() => { this.$nextTick(() => {
@ -89,7 +103,7 @@
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.saveDialog.open('show').setData(row) this.$refs.saveDialog.open('show').setData(row)
}) })
}, },*/
//权限设置 //权限设置
permission(){ permission(){
this.dialog.permission = true this.dialog.permission = true
@ -99,14 +113,14 @@
}, },
//删除 //删除
async table_del(row){ async table_del(row){
var reqData = {id: row.id} await this.$API.hrm.employee.create.req(row.id).then(res=>{
var res = await this.$API.demo.post.post(reqData); if(res.err_msg){
if(res.code == 200){ this.$message.error(res.err_msg);
this.$refs.table.refresh() }else{
this.$message.success("删除成功") this.$refs.table.refresh();
}else{ this.$message.success("删除成功")
this.$alert(res.message, "提示", {type: 'error'}) }
} });
}, },
//批量删除 //批量删除
async batch_del(){ async batch_del(){
@ -168,4 +182,4 @@
} }
} }
} }
</script> </script>

457
src/views/hrm/ep_form.vue
View File

@ -1,155 +1,316 @@
<template> <template>
<el-drawer <el-drawer
:title="titleMap[mode]" :title="titleMap[mode]"
v-model="visible" v-model="visible"
:size="1000" :size="1000"
destroy-on-close destroy-on-close
@closed="$emit('closed')" @closed="$emit('closed')"
> >
<el-container v-loading="loading"> <el-container v-loading="loading">
<el-main style="padding: 0 20px 20px 20px"> <!--<sc-title title="详细信息"></sc-title>-->
<el-form <el-main style="padding: 0 20px 20px 20px">
ref="dialogForm" <el-form
:model="form" ref="dialogForm"
:rules="rules" :model="form"
:disabled="mode=='show'" :rules="rules"
label-width="80px" :disabled="mode==='show'"
> label-width="120px"
<sc-title title="详细信息"></sc-title> >
<el-row> <el-row>
<el-col :md="8" :sm="12" :xs="24"> <el-col :md="12" :sm="24">
<el-form-item label="姓名"> <el-form-item label="姓名" prop="name">
<el-input v-model="form.name" type="text" clearable :disabled="true"></el-input> <el-input v-model="form.name" placeholder="请输入真实姓名" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="8" :sm="12" :xs="24"> <el-col :md="12" :sm="24">
<el-form-item label="工号"> <el-form-item label="手机号" prop="phone">
<el-input v-model="form.number" type="text" clearable></el-input> <el-input v-model="form.phone" placeholder="请输入手机号" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="8" :sm="12" :xs="24"> <el-col :md="12" :sm="24">
<el-form-item label="手机号"> <el-form-item label="身份证号" prop="id_number">
<el-input v-model="form.phone" type="text" clearable></el-input> <el-input v-model="form.id_number" placeholder="请输入身份证号" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="邮箱号"> <el-col :md="12" :sm="24">
<el-input v-model="form.email" type="text" clearable></el-input> <el-form-item label="人员编号" prop="number">
</el-form-item> <el-input v-model="form.number" placeholder="请输入人员编号" clearable></el-input>
</el-col> </el-form-item>
<el-col :md="8" :sm="12" :xs="24"> </el-col>
<el-form-item label="身份证号"> <el-col :md="12" :sm="24">
<el-input v-model="form.id_number" type="text" clearable></el-input> <el-form-item label="所属部门">
</el-form-item> <el-cascader
</el-col> v-model="form.dept"
<el-col :md="8" :sm="12" :xs="24"> :options="depts"
<el-form-item label="学历"> :props="deptsProps"
<el-input v-model="form.qualification" type="text" clearable></el-input> clearable
</el-form-item> style="width: 100%;">
</el-col> </el-cascader>
</el-row> </el-form-item>
</el-form> </el-col>
<el-row> <el-col :md="12" :sm="24">
<el-col :md="8" :sm="12" :xs="24"> <el-form-item label="在职状态">
<el-form-item label="证件照" label-width="80px"> <el-select v-model="form.job_state" style="width: 100%">
<sc-upload v-model="form.photo" title="头像"></sc-upload> <el-option
</el-form-item> v-for="item in job_states"
</el-col> :key="item.id"
</el-row> :label="item.name"
</el-main> :value="item.id"
<el-footer> />
<el-button type="primary" :loading="isSaveing" @click="submit" </el-select>
>保存</el-button </el-form-item>
> </el-col>
<el-button @click="visible = false">取消</el-button> <el-col :md="12" :sm="24">
</el-footer> <el-form-item label="系统账号">
</el-container> <el-input v-model="form.user" placeholder="请输入系统账号" clearable></el-input>
</el-drawer> </el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="邮箱">
<el-input v-model="form.email" placeholder="请输入邮箱" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="学历">
<el-input v-model="form.qualification" placeholder="学历" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="生日">
<el-date-picker
v-model="form.birthday"
type="date"
placeholder="生日"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="在岗状态展示">
<el-switch v-model="form.show_atwork"/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="男" size="large" >男</el-radio>
<el-radio label="女" size="large">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="证件照">
<sc-upload v-model="form.photo" :modelValue="form.photo" title="证件照"></sc-upload>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="签名照">
<sc-upload v-model="form.signature" title="签名照"></sc-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!--<el-row>
<el-row>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="姓名">
<el-input v-model="form.name" type="text" clearable :disabled="true"></el-input>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="工号">
<el-input v-model="form.number" type="text" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="手机号">
<el-input v-model="form.phone" type="text" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="邮箱号">
<el-input v-model="form.email" type="text" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="身份证号">
<el-input v-model="form.id_number" type="text" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="学历">
<el-input v-model="form.qualification" type="text" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="证件照" label-width="80px">
<sc-upload v-model="form.photo" title="头像"></sc-upload>
</el-form-item>
</el-col>
</el-row>-->
</el-main>
<el-footer>
<el-button
type="primary"
:loading="isSaveing"
@click="submit"
>
保存
</el-button>
<el-button @click="visible = false">取消</el-button>
</el-footer>
</el-container>
</el-drawer>
</template> </template>
<script> <script>
export default { const defaultForm = {
emits: ["success", "closed"], id: null,
data() { phone: '',
return { name: '',
loading: false, email: '',
mode: "add", number: '',
titleMap: { photo: '',
add: "新增", id_number: '',
edit: "编辑", gender: '男',
show: "查看", signature: '',
}, birthday: null,
form: {}, qualification: '',
rules: { job_state: 10,
name: [{ required: true, message: "请输入表格名称", trigger: "blur" }], show_atwork: true,
code: [{ required: true, message: "请输入唯一标识", trigger: "blur" }], belong_dept: '',
}, user: '',
addTemplate: { };
label: "", export default {
prop: "", emits: ["success", "closed"],
width: "100", data() {
hide: false, return {
sortable: false, loading: false,
fixed: false, mode: "add",
filters: [], titleMap: {
}, add: '新增员工',
visible: false, edit: '员工信息编辑',
isSaveing: false, show: '员工信息查看'
selectionFilters: [], },
filtersAddTemplate: { job_states: [
text: "", {id: 10, name: "在职"},
value: "", {id: 20, name: "离职"},
}, ],
setFiltersVisible: false, visible: false,
}; isSaveing: false,
}, form: defaultForm,
mounted() {},
methods: { //验证规则
//显示 rules: {
open(mode = "add") { phone: [
this.mode = mode; {required: true, message: '请输入手机号'}
this.visible = true; ],
console.log(this.mode) name: [
return this; {required: true, message: '请输入姓名'}
}, ],
//表单提交方法 number: [
submit() { {required: true, message: '请输入人员编号'}
this.$refs.dialogForm.validate(async (valid) => { ],
if (valid) { photo: [
this.isSaveing = true; {required: true, message: '请上传证件照'}
this.$API.hrm.employee.update.req(this.form.id, this.form).then(res=>{ ],
this.isSaveing = false; id_number: [
this.visible = false; {required: true, message: '请输入身份证号', trigger: 'blur'},
this.$emit("success", this.form, this.mode); {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确'},
this.$message.success("操作成功"); /*{
return res validator: (rule, value, callback) => {
}).catch(err=>{ if (this.form.id_number.length !== 18) {
this.isSaveing = false; callback(new Error('请输入正确的身份证号!'));
return err }
}) callback();
} }
}); }*/
}, ],
//表单注入数据 },
setData(data) { addTemplate: {
// this.loading = true label: "",
// const params = { prop: "",
// id: data.id width: "100",
// } hide: false,
// setTimeout(async ()=>{ sortable: false,
// var res = await this.$API.system.table.info.get(params) fixed: false,
// this.loading = false filters: [],
// this.form = res.data },
// },400) depts: [],
Object.assign(this.form, data); deptsProps: {
}, value: "id",
//设置过滤项 checkStrictly: true
setFilters(filters) { },
this.selectionFilters = filters; selectionFilters: [],
this.setFiltersVisible = true; filtersAddTemplate: {
}, text: "",
}, value: "",
}; },
setFiltersVisible: false,
};
},
mounted() {
},
methods: {
//显示
open(mode) {
this.mode = mode;
this.visible = true;
return this;
},
//表单提交方法
submit() {
debugger;
this.$refs.dialogForm.validate((valid) => {
debugger;
if (valid) {
debugger;
this.isSaveing = true;
if (this.mode === 'add') {
debugger;
this.$API.hrm.employee.create.req(this.form)
.then(res => {
this.isSaveing = false;
this.visible = false;
this.$emit("success", this.form, this.mode);
this.$message.success("操作成功");
return res
}).catch(err => {
this.isSaveing = false;
return err
})
} else {
this.$API.hrm.employee.update.req(this.form.id, this.form)
.then(res => {
this.isSaveing = false;
this.visible = false;
this.$emit("success", this.form, this.mode);
this.$message.success("操作成功");
return res
}).catch(err => {
this.isSaveing = false;
return err
})
}
}
});
},
//表单注入数据
setData(data) {
debugger;
console.log(defaultForm);
// this.form = defaultForm;
Object.assign(this.form, data);
},
//设置过滤项
setFilters(filters) {
this.selectionFilters = filters;
this.setFiltersVisible = true;
},
},
};
</script> </script>
<style> <style>

248
src/views/sys/dept.vue
View File

@ -0,0 +1,248 @@
<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="addDept"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input v-model="search.keyword" placeholder="部门名称"></el-input>
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery" >
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="部门名称" prop="name" min-width="200"></el-table-column>
<el-table-column label="部门类型" prop="type" min-width="200"></el-table-column>
<el-table-column label="创建日期" prop="create_time" min-width="200"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="200">
<template #default="scope">
<el-button type="text" size="small" @click="editDept(scope.row, scope.$index)">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-popconfirm title="确定删除吗？" @confirm="delDept(scope.row, scope.$index)">
<template #reference>
<el-button type="text" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-dialog :title="titleMap[type]" v-model="limitedVisible" :width="600">
<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" label-position="left">
<el-form-item label="部门名称" prop="name">
<el-input v-model="addForm.name" clearable></el-input>
</el-form-item>
<el-form-item label="上级部门">
<el-cascader
v-model="addForm.parent"
:options="group"
:props="groupsProps"
:show-all-levels="false"
clearable
style="width: 100%"
@change="handleChange"
></el-cascader>
<!--<el-input v-model="addForm.parent" clearable></el-input>-->
</el-form-item>
<el-form-item label="类型">
<el-select v-model="addForm.type" placeholder="Select" style="width: 100%;">
<el-option label="公司" value="10"></el-option>
<el-option label="部门" value="20"></el-option>
</el-select>
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="addForm.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="limitedVisible=false" >取 消</el-button>
<el-button type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
name: 'dept',
data() {
return {
dialog: {
save: false,
permission: false
},
apiObj: this.$API.system.dept.list,
selection: [],
search: {
keyword: null
},
params:{
page:0
},
isSaving: false,
limitedVisible : false,
type: "add",
titleMap: {
add: '新增',
edit: '编辑',
},
//表单数据
addForm: {
id:"",
name: "",
type: "10",
sort: 1,
parent: "",
},
//验证规则
rules: {
name: [
{required: true, message: '请输入部门名称'}
],
},
groupsProps: {
value: "id",
multiple: false,
checkStrictly: true,
},
group: [],
postList: [],
temp:[]
}
},
mounted() {
this.getGroup();
},
methods: {
handleChange(value) {
// this.menu.checked = check.checkedKeys;
debugger;
console.log(value);
console.log(this.addForm.parent);
},
//加载树数据
async getGroup() {
var res = await this.$API.system.dept.list.req({page: 0});
let postList = res;
this.postList = res;
let posts = [];
postList.forEach(item => {
let obj = new Object();
obj.id = item.id;
obj.sort = item.sort;
obj.label = item.name;
obj.type = item.type;
obj.parent = item.parent;
obj.create_time = item.create_time;
posts.push(obj)
});
let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
let arr = [];
for (let item of posts) {
// debugger;
if (item.parent == null) {
arr.push(item);
continue
}
let parent = obj[item.parent];
parent.children = parent.children ? parent.children : [];
parent.children.push(item);
}
this.group = arr;
},
//添加
addDept(){
this.type='add';
this.limitedVisible = true;
},
//编辑
editDept(row){
debugger;
this.temp = [];
this.type='edit';
this.addForm.id=row.id;
this.addForm.name=row.name;
let parent = this.findParents(this.postList,row.parent);
this.addForm.parent=parent.reverse();
this.addForm.type=row.type+"";
this.addForm.sort=row.sort;
this.limitedVisible = true;
},
findParents(arr,parent){
let that = this;
arr.forEach(item=>{
if(item.id===parent){
that.temp.push(item.id);
if(item.parent!==null){
this.findParents(arr,item.parent)
}else{
return that.temp
}
}
});
return that.temp
},
//删除
delDept(row){
var id = row.id;
var res = this.$API.system.deptDel.delete(id);
if(res.code == 200){
this.$refs.table.refresh();
this.$message.success("删除成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
},
submitHandle(){
let that = this;
debugger;
console.log(this.addForm.parent);
debugger;
this.addForm.parent = this.addForm.parent!==null?this.addForm.parent[0]?this.addForm.parent[0]:'':'';
this.$refs.addForm.validate( (valid) => {
debugger;
if (valid) {
this.isSaveing = true;
var res;
if(this.type==='add'){
res = this.$API.system.deptAdd.post(that.addForm);
}else{
res = this.$API.system.deptEdit.put(that.addForm.id,that.addForm);
}
this.isSaveing = false;
this.limitedVisible = false;
this.$refs.table.refresh();
console.log(res);
debugger;
}
})
},
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
//搜索
upsearch(){
},
//本地更新数据
handleSaveSuccess(data, mode){
if(mode=='add'){
this.$refs.table.refresh()
}else if(mode=='edit'){
this.$refs.table.refresh()
}
}
}
}
</script>
<style>
</style>