<template>
|
<section>
|
<el-container>
|
<el-aside width="400px" style="flex: none">
|
<LTree
|
ref="LTree"
|
@OnClick="OnTreeClick"
|
@OnMove="OnTreeMove"
|
@OnDelete="OnTreeDelete"
|
@OnAdd="OnTreeAdd"
|
@OnEdit="OnTreeEdit"
|
></LTree>
|
</el-aside>
|
<el-main>
|
<!--工具条-->
|
<toolbar
|
:buttonList="buttonList"
|
@callFunction="callFunction"
|
></toolbar>
|
|
<!--列表-->
|
<el-table
|
:data="department"
|
highlight-current-row
|
v-loading="listLoading"
|
@current-change="selectCurrentRow"
|
@selection-change="selsChange"
|
style="width: 100%"
|
>
|
<el-table-column type="selection" width="50"></el-table-column>
|
<el-table-column type="index" width="80"></el-table-column>
|
<el-table-column
|
prop="Id"
|
label="主键"
|
width
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="Type"
|
label="部门类型"
|
width
|
:formatter="formatType"
|
></el-table-column>
|
<el-table-column
|
prop="Name"
|
label="部门名称"
|
width
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="CreatedTime"
|
label="创建时间"
|
:formatter="formatCreateTime"
|
width
|
sortable
|
></el-table-column>
|
<el-table-column prop="Status" label="状态" width="140" sortable>
|
<template slot-scope="scope">
|
<el-tag
|
:type="scope.row.Status ? 'success' : 'danger'"
|
disable-transitions
|
>{{ scope.row.Status ? "启用" : "禁用" }}</el-tag
|
>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="SortById"
|
label="排序"
|
width
|
sortable
|
></el-table-column>
|
<el-table-column
|
prop="CreatedName"
|
label="创建人"
|
width
|
sortable
|
></el-table-column>
|
<el-table-column prop="Remark" label="备注" width></el-table-column>
|
</el-table>
|
|
<!--工具条-->
|
<el-col :span="24" class="toolbar">
|
<el-pagination
|
layout="prev, pager, next"
|
@current-change="handleCurrentChange"
|
:page-size="20"
|
:total="total"
|
style="float: right"
|
></el-pagination>
|
</el-col>
|
</el-main>
|
</el-container>
|
|
<!--编辑界面-->
|
<el-dialog
|
title="编辑"
|
:visible.sync="editFormVisible"
|
v-model="editFormVisible"
|
:close-on-click-modal="false"
|
>
|
<el-form
|
:model="editForm"
|
label-width="80px"
|
:rules="editFormRules"
|
ref="editForm"
|
>
|
<el-form-item label="部门名称" prop="Name">
|
<el-input v-model="editForm.Name" auto-complete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="状态" prop="Status">
|
<el-select v-model="editForm.Status" placeholder="请选择角色状态">
|
<el-option
|
v-for="item in statusList"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注" prop="Remark">
|
<el-input
|
v-model="editForm.Description"
|
auto-complete="off"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="editFormVisible = false">取消</el-button>
|
<el-button
|
type="primary"
|
@click.native="editSubmit"
|
:loading="editLoading"
|
>提交</el-button
|
>
|
</div>
|
</el-dialog>
|
|
<!--新增界面-->
|
<el-dialog
|
title="新增"
|
:visible.sync="addFormVisible"
|
v-model="addFormVisible"
|
:close-on-click-modal="false"
|
>
|
<el-form
|
:model="addForm"
|
label-width="80px"
|
:rules="addFormRules"
|
ref="addForm"
|
>
|
<el-form-item label="Code" prop="Code">
|
<el-input v-model="addForm.Code" auto-complete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="部门名称" prop="Name">
|
<el-input v-model="addForm.Name" auto-complete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="部门简称" prop="ShortName">
|
<el-input v-model="addForm.ShortName" auto-complete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="类型">
|
<el-radio-group v-model="addForm.Type">
|
<el-radio class="radio" :label="1">公司</el-radio>
|
<el-radio class="radio" :label="2">部门</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-radio-group v-model="addForm.Status">
|
<el-radio class="radio" :label="1">启用</el-radio>
|
<el-radio class="radio" :label="0">未启用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="排序" prop="Sorter">
|
<el-input
|
v-model="addForm.Sorter"
|
auto-complete="off"
|
min="0"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="备注" prop="Remark">
|
<el-input
|
v-model="addForm.Description"
|
auto-complete="off"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="addFormVisible = false">取消</el-button>
|
<el-button
|
type="primary"
|
@click.native="addSubmit"
|
:loading="addLoading"
|
>提交</el-button
|
>
|
</div>
|
</el-dialog>
|
</section>
|
</template>
|
|
<script>
|
import LTree from "./LTree";
|
import util from "../../../util/date";
|
import {
|
getDepartmentListPage,
|
addDepartment,
|
editDepartment,
|
removeDepartment,
|
moveDepartment,
|
} from "../../api/api";
|
import { getButtonList } from "../../promissionRouter";
|
import Toolbar from "../../components/Toolbar";
|
|
export default {
|
components: { LTree, Toolbar },
|
data() {
|
return {
|
filters: {
|
Name: "",
|
},
|
buttonList: [],
|
department: [],
|
statusList: [
|
{ name: "启用", value: 1 },
|
{ name: "未启用", value: 0 },
|
],
|
total: 0,
|
page: 1,
|
listLoading: false,
|
sels: [], //列表选中列
|
currentRow: null,
|
addDialogFormVisible: false,
|
editFormVisible: false, //编辑界面是否显示
|
editLoading: false,
|
editFormRules: {
|
Name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
Status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
},
|
//编辑界面数据
|
editForm: {
|
Id: 0,
|
CreateBy: "",
|
Name: "",
|
Enabled: false,
|
},
|
|
addFormVisible: false, //新增界面是否显示
|
addLoading: false,
|
addFormRules: {
|
Code: [{ required: true, message: "请输入Code", trigger: "blur" }],
|
Name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
ShortName: [{ required: true, message: "请输入简称", trigger: "blur" }],
|
Type: [{ required: true, message: "请选择类型", trigger: "blur" }],
|
},
|
//新增界面数据
|
addForm: {
|
CreateBy: "",
|
CreateId: "",
|
Name: "",
|
Status: -1,
|
Type: -1,
|
Sorter: 0,
|
},
|
IsLoadTree: false,
|
};
|
},
|
methods: {
|
selectCurrentRow(val) {
|
this.currentRow = val;
|
},
|
callFunction(item) {
|
this.filters = {
|
Name: item.search,
|
};
|
this[item.Func].apply(this, item);
|
},
|
//类型显示转换
|
formatType: function (row, column) {
|
return row.Type ? "公司" : "部门";
|
},
|
formatCreateTime: function (row, column) {
|
return !row.CreatedTime || row.CreatedTime == ""
|
? ""
|
: util.formatDate.format(new Date(row.CreatedTime), "yyyy-MM-dd");
|
},
|
handleCurrentChange(val) {
|
this.page = val;
|
this.getDepartments();
|
},
|
//获取部门列表
|
getDepartments(Model) {
|
let _this = this;
|
let para = {
|
page: 1,
|
};
|
if (Model != undefined) {
|
para.ParentId = Model.Id;
|
}
|
if (!this.IsLoadTree) {
|
para.PageSize = 99999;
|
}
|
this.listLoading = true;
|
//NProgress.start();
|
getDepartmentListPage(para).then((res) => {
|
this.total = res.data.response.dataCount;
|
let lst = res.data.response.data;
|
this.department = lst.slice(0, 20);
|
this.listLoading = false;
|
if (!this.IsLoadTree) {
|
this.IsLoadTree = true;
|
this.$refs.LTree.LoadList(lst);
|
}
|
//NProgress.done();
|
});
|
},
|
//删除
|
handleDel() {
|
let row = this.currentRow;
|
if (!row) {
|
this.$message({
|
message: "请选择要编辑的一行数据！",
|
type: "error",
|
});
|
|
return;
|
}
|
this.$confirm("确认删除该记录吗?", "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
this.listLoading = true;
|
//NProgress.start();
|
let para = { id: row.Id };
|
removeDepartment(para).then((res) => {
|
if (util.isEmt.format(res)) {
|
this.listLoading = false;
|
return;
|
}
|
this.listLoading = false;
|
//NProgress.done();
|
if (res.data.success) {
|
this.$message({
|
message: "删除成功",
|
type: "success",
|
});
|
} else {
|
this.$message({
|
message: res.data.msg,
|
type: "error",
|
});
|
}
|
|
this.getDepartments();
|
});
|
})
|
.catch(() => {});
|
},
|
//显示编辑界面
|
handleEdit() {
|
let row = this.currentRow;
|
if (!row) {
|
this.$message({
|
message: "请选择要编辑的一行数据！",
|
type: "error",
|
});
|
|
return;
|
}
|
|
this.editFormVisible = true;
|
this.editForm = Object.assign({}, row);
|
this._FnAddCallBack = undefined;
|
},
|
//显示新增界面
|
handleAdd() {
|
this.addFormVisible = true;
|
this.addForm = {
|
CreateBy: "",
|
Name: "",
|
Status: 1,
|
Sorter: 0,
|
Type: 2,
|
};
|
this._FnAddCallBack = undefined;
|
},
|
//编辑
|
editSubmit: function () {
|
this.$refs.editForm.validate((valid) => {
|
if (valid) {
|
this.$confirm("确认提交吗？", "提示", {}).then(() => {
|
this.editLoading = true;
|
//NProgress.start();
|
let para = Object.assign({}, this.editForm);
|
|
para.birth =
|
!para.birth || para.birth == ""
|
? util.formatDate.format(new Date(), "yyyy-MM-dd")
|
: util.formatDate.format(new Date(para.birth), "yyyy-MM-dd");
|
|
editDepartment(para).then((res) => {
|
if (util.isEmt.format(res)) {
|
this.editLoading = false;
|
return;
|
}
|
|
if (res.data.success) {
|
this.editLoading = false;
|
//NProgress.done();
|
this.$message({
|
message: res.data.msg,
|
type: "success",
|
});
|
this._FnEditCallBack(res.data.response);
|
this.$refs["editForm"].resetFields();
|
this.editFormVisible = false;
|
this.getDepartments();
|
} else {
|
this.$message({
|
message: res.data.msg,
|
type: "error",
|
});
|
}
|
});
|
});
|
}
|
});
|
},
|
//新增
|
addSubmit: function () {
|
let _this = this;
|
this.$refs.addForm.validate((valid) => {
|
if (valid) {
|
this.$confirm("确认提交吗？", "提示", {}).then(() => {
|
this.addLoading = true;
|
//NProgress.start();
|
let para = Object.assign({}, this.addForm);
|
|
var user = JSON.parse(window.localStorage.user);
|
|
if (user && user.uID > 0) {
|
para.CreatedBy = user.uID;
|
para.CreatedName = user.uRealName;
|
} else {
|
this.$message({
|
message: "用户信息为空，先登录",
|
type: "error",
|
});
|
_this.$router.replace(
|
_this.$route.query.redirect ? _this.$route.query.redirect : "/"
|
);
|
}
|
|
addDepartment(para).then((res) => {
|
if (util.isEmt.format(res)) {
|
this.addLoading = false;
|
return;
|
}
|
if (res.data.success) {
|
this.addLoading = false;
|
//NProgress.done();
|
this.$message({
|
message: res.data.msg,
|
type: "success",
|
});
|
_this._FnAddCallBack(res.data.response);
|
this.addFormVisible = false;
|
this.$refs["addForm"].resetFields();
|
this.getDepartments();
|
} else {
|
this.$message({
|
message: res.data.msg,
|
type: "error",
|
});
|
}
|
});
|
});
|
}
|
});
|
},
|
selsChange: function (sels) {
|
this.sels = sels;
|
},
|
//批量删除
|
batchRemove: function () {
|
this.$message({
|
message: "该功能未开放",
|
type: "warning",
|
});
|
},
|
getButtonList2(routers) {
|
let _this = this;
|
routers.forEach((element) => {
|
let path = this.$route.path.toLowerCase();
|
if (element.path && element.path.toLowerCase() == path) {
|
_this.buttonList = element.children;
|
return;
|
} else if (element.children) {
|
_this.getButtonList(element.children);
|
}
|
});
|
},
|
OnTreeClick(Model) {
|
this.getDepartments(Model);
|
},
|
OnTreeMove(Model, BeforeId) {
|
Model.MoveId = BeforeId;
|
moveDepartment(Model).then((res) => {
|
if (res.data.success) {
|
this.$message({
|
message: res.data.msg || "操作完成",
|
type: "success",
|
});
|
} else {
|
this.$message({
|
message: res.data.msg || "操作失败",
|
type: "error",
|
});
|
}
|
});
|
},
|
OnTreeDelete(Model, CallBack) {
|
let para = { Id: Model.Id };
|
removeDepartment(para).then((res) => {
|
CallBack && CallBack(res.data.success);
|
if (res.data.success) {
|
this.$message({
|
message: "删除成功",
|
type: "success",
|
});
|
} else {
|
this.$message({
|
message: res.data.msg,
|
type: "error",
|
});
|
}
|
});
|
},
|
OnTreeAdd(Model, CallBack) {
|
let self = this;
|
self.addFormVisible = true;
|
self.addForm = Object.assign(Model, {
|
CreateBy: "",
|
Name: "",
|
Status: 1,
|
Sorter: 0,
|
Type: 2,
|
});
|
self._FnAddCallBack = function (Row) {
|
CallBack(Row);
|
};
|
},
|
OnTreeEdit(Model, CallBack) {
|
let self = this;
|
self.editFormVisible = true;
|
self.editForm = Model;
|
self._FnEditCallBack = function (Row) {
|
CallBack(Row);
|
};
|
},
|
},
|
mounted() {
|
this.getDepartments();
|
|
let routers = window.localStorage.router
|
? JSON.parse(window.localStorage.router)
|
: [];
|
//第一种写法，每个页面都需要写方法，但是可以做特性化处理
|
// this.getButtonList(routers);
|
|
//第二种写法，封装到 permissionRouter.js 中
|
this.buttonList = getButtonList(this.$route.path, routers);
|
},
|
};
|
</script>
|
|
<style>
|
.fl {
|
float: left;
|
width: 30%;
|
position: relative;
|
}
|
.fr {
|
float: right;
|
width: 69%;
|
}
|
</style>
|
