code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-19 01:15:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

474
manager/src/views/sys/department-manage/departmentManage.vue Normal file
View File

@@ -0,0 +1,474 @@
<template>
<div class="search">
<Card>
<Row class="operation">
<i-switch v-model="strict" size="large" style="margin-right: 5px">
<span slot="open">级联</span>
<span slot="close">单选</span>
</i-switch>
<Button @click="addRoot">添加部门</Button>
<Button @click="add" type="primary">添加子部门</Button>
<Button @click="delAll">批量删除</Button>
<Button @click="getParentList">刷新</Button>
</Row>
<Row type="flex" justify="start">
<Col :md="8" :lg="8" :xl="6">
<Alert show-icon>
当前选择编辑：
<span class="select-title">{{ editTitle }}</span>
<a class="select-clear" v-if="form.id" @click="cancelEdit"
>取消选择</a
>
</Alert>
<!-- <Input
v-model="searchKey"
suffix="ios-search"
@on-change="search"
placeholder="输入部门名搜索"
clearable
/> -->
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
<Tree
ref="tree"
:data="data"
:load-data="loadData"
show-checkbox
@on-check-change="changeSelect"
@on-select-change="selectTree"
:check-strictly="!strict"
></Tree>
<Spin size="large" fix v-if="loading"></Spin>
</div>
</Col>
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
<Form
ref="form"
:model="form"
:label-width="100"
:rules="formValidate"
>
<FormItem label="上级部门" prop="parentTitle">
<div style="display: flex">
<Input
v-model="form.parentTitle"
readonly
style="margin-right: 10px"
/>
<Poptip
transfer
trigger="click"
placement="right-start"
title="选择上级部门"
width="250"
>
<Button icon="md-list">选择部门</Button>
<div
slot="content"
style="position: relative; min-height: 5vh"
>
<Tree
:data="dataEdit"
:load-data="loadData"
@on-select-change="selectTreeEdit"
></Tree>
<Spin size="large" fix v-if="loadingEdit"></Spin>
</div>
</Poptip>
</div>
</FormItem>
<FormItem label="部门名称" prop="title">
<Input v-model="form.title" />
</FormItem>
<FormItem label="选择角色">
<Select
:loading="userLoading"
not-found-text="暂无角色"
v-model="selectedRole"
multiple
>
<Option v-for="item in users" :value="item.id" :key="item.id">{{
item.name
}}</Option>
</Select>
</FormItem>
<FormItem label="排序值" prop="sortOrder">
<Tooltip
trigger="hover"
placement="right"
content="值越小越靠前，支持小数"
>
<InputNumber
:max="1000"
:min="0"
v-model="form.sortOrder"
></InputNumber>
</Tooltip>
</FormItem>
<!-- <FormItem label="是否启用" prop="status">
<i-switch size="large" v-model="form.status" :true-value="0" :false-value="-1">
<span slot="open">启用</span>
<span slot="close">禁用</span>
</i-switch>
</FormItem> -->
<Form-item>
<Button
style="margin-right: 5px"
@click="submitEdit"
:loading="submitLoading"
type="primary"
>修改并保存</Button
>
<Button @click="handleReset">重置</Button>
</Form-item>
</Form>
</Col>
</Row>
</Card>
<Modal
:title="modalTitle"
v-model="modalVisible"
:mask-closable="false"
:width="500"
>
<Form
ref="formAdd"
:model="formAdd"
:label-width="85"
:rules="formValidate"
>
<div v-if="showParent">
<FormItem label="上级部门：">{{ form.title }}</FormItem>
</div>
<FormItem label="部门名称" prop="title">
<Input v-model="formAdd.title" />
</FormItem>
<FormItem label="排序值" prop="sortOrder">
<Tooltip
trigger="hover"
placement="right"
content="值越小越靠前，支持小数"
>
<InputNumber
:max="1000"
:min="0"
v-model="formAdd.sortOrder"
></InputNumber>
</Tooltip>
</FormItem>
<!-- <FormItem label="是否启用" prop="status">
<i-switch size="large" v-model="formAdd.status" :true-value="0" :false-value="-1">
<span slot="open">启用</span>
<span slot="close">禁用</span>
</i-switch>
</FormItem> -->
</Form>
<div slot="footer">
<Button type="text" @click="cancelAdd">取消</Button>
<Button type="primary" :loading="submitLoading" @click="submitAdd"
>提交</Button
>
</div>
</Modal>
</div>
</template>
<script>
import {
initDepartment,
loadDepartment,
addDepartment,
editDepartment,
deleteDepartment,
searchDepartment,
getUserByDepartmentId,
getRoleList,
updateDepartmentRole,
} from "@/api/index";
export default {
name: "department-manage",
data() {
return {
loading: true,
maxHeight: "500px",
strict: true,
userLoading: false,
loadingEdit: true,
modalVisible: false,
selectList: [],
selectCount: 0,
showParent: false,
modalTitle: "",
editTitle: "",
selectedRole: [], //选择的角色
searchKey: "",
form: {
id: "",
title: "",
parentId: "",
parentTitle: "",
sortOrder: 0,
status: 0,
},
formAdd: {},
formValidate: {
title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
sortOrder: [
{
required: true,
type: "number",
message: "排序值不能为空",
trigger: "blur",
},
],
},
submitLoading: false,
data: [],
dataEdit: [],
users: [],
};
},
methods: {
init() {
this.getParentList();
},
getParentList() {
this.loading = true;
initDepartment().then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result;
}
});
},
loadData(item, callback) {
loadDepartment(item.id).then((res) => {
if (res.success) {
/* res.result.forEach(function(e) {
if (e.isParent) {
e.loading = false;
e.children = [];
}
}); */
callback(res.result);
}
});
},
search() {
if (this.searchKey) {
this.loading = true;
searchDepartment({ title: this.searchKey }).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result;
}
});
} else {
this.getParentList();
}
},
// 点击树
selectTree(v) {
if (v.length > 0) {
// 转换null为""
for (let attr in v[0]) {
if (v[0][attr] == null) {
v[0][attr] = "";
}
}
let str = JSON.stringify(v[0]);
let data = JSON.parse(str);
this.editTitle = data.title;
// 加载部门用户数据
this.userLoading = true;
getUserByDepartmentId(data.id).then((res) => {
let way =[]
res.result && res.result.forEach((item) => {
way.push(item.roleId)
})
this.$set(this,'selectedRole',way)
console.warn( this.selectedRole);
});
getRoleList({
pageNumber: 1,
pageSize: 10000,
}).then((res) => {
this.userLoading = false;
console.log(res);
if (res.success) {
this.users = res.result.records;
// 回显
this.form = data;
}
});
} else {
this.cancelEdit();
}
},
cancelEdit() {
let data = this.$refs.tree.getSelectedNodes()[0];
if (data) {
data.selected = false;
}
this.$refs.form.resetFields();
delete this.form.id;
this.editTitle = "";
},
selectTreeEdit(v) {
if (v.length > 0) {
// 转换null为""
for (let attr in v[0]) {
if (v[0][attr] == null) {
v[0][attr] = "";
}
}
let str = JSON.stringify(v[0]);
let data = JSON.parse(str);
this.form.parentId = data.id;
this.form.parentTitle = data.title;
}
},
cancelAdd() {
this.modalVisible = false;
},
handleReset() {
this.$refs.form.resetFields();
this.form.status = 0;
},
submitEdit() {
this.$refs.form.validate((valid) => {
if (valid) {
if (!this.form.id) {
this.$Message.warning("请先点击选择要修改的部门");
return;
}
console.log(this.selectedRole);
let roleWay = [];
this.selectedRole.forEach((item) => {
let role = {
departmentId: this.form.id,
roleId: item,
};
roleWay.push(role);
});
Promise.all([
editDepartment(this.form.id, this.form),
updateDepartmentRole(
this.form.id,
roleWay
),
]).then((res) => {
this.submitLoading = false;
if (res[0].success) {
this.$Message.success("编辑成功");
this.init();
this.modalVisible = false;
}
console.log(res[1]);
});
}
});
},
submitAdd() {
this.$refs.formAdd.validate((valid) => {
if (valid) {
this.submitLoading = true;
addDepartment(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("添加成功");
this.init();
this.modalVisible = false;
}
});
}
});
},
add() {
if (this.form.id == "" || this.form.id == null) {
this.$Message.warning("请先点击选择一个部门");
return;
}
this.modalTitle = "添加子部门";
this.showParent = true;
this.formAdd = {
parentId: this.form.id,
sortOrder: 0,
status: 0,
};
this.modalVisible = true;
},
addRoot() {
this.modalTitle = "添加一级部门";
this.showParent = false;
this.formAdd = {
parentId: 0,
sortOrder: 0,
status: 0,
};
this.modalVisible = true;
},
changeSelect(v) {
console.log(v);
this.selectCount = v.length;
this.selectList = v;
},
delAll() {
if (this.selectCount <= 0) {
this.$Message.warning("您还未勾选要删除的数据");
return;
}
this.$Modal.confirm({
title: "确认删除",
content:
"您确认要删除所选的 " + this.selectCount + " 条数据及其下级所有数据?",
loading: true,
onOk: () => {
let ids = "";
this.selectList.forEach(function (e) {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
deleteDepartment(ids).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除成功");
this.selectList = [];
this.selectCount = 0;
this.cancelEdit();
this.init();
}
});
},
});
},
},
mounted() {
// 计算高度
let height = document.documentElement.clientHeight;
this.maxHeight = Number(height - 287) + "px";
this.init();
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/tree-common.scss";
</style>