|
@@ -10,7 +10,7 @@
|
|
|
|
|
|
<!--表格内容 start------------------------------------------------------------>
|
|
|
<div class="layerBox">
|
|
|
- <tableTitle :name="tableDivTitle"/>
|
|
|
+ <tableTitle :name="tableDivTitle" />
|
|
|
<el-row>
|
|
|
<template>
|
|
|
<el-table :data="tableData" style="width: 100%">
|
|
@@ -19,7 +19,8 @@
|
|
|
<el-table-column fixed="right" label="操作" width="200" header-align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="listBtnBox">
|
|
|
- <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-edit-outline"></i>删除</div>
|
|
|
+ <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-edit-outline"></i>删除
|
|
|
+ </div>
|
|
|
<div class="listEditBtn" @click="editRow(scope.row.id)"><i class="el-icon-edit-outline"></i>编辑</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -33,7 +34,9 @@
|
|
|
<div class="alignBox">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
- <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
|
|
|
+ <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
|
|
|
+ :total="allCount"></el-pagination>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
@@ -43,11 +46,11 @@
|
|
|
<!--弹出框 start------------------------------------------------------------>
|
|
|
<el-dialog :title="editId ? '编辑职能部门' : '添加职能部门'" :visible.sync="windowStatus" :close-on-click-modal="false">
|
|
|
<el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
|
|
|
- <div class="formDiv">
|
|
|
+ <!-- <div class="formDiv">
|
|
|
<el-form-item label="选择上级部门" :label-width="formLabelWidth" prop="pid" class="custom-align-right">
|
|
|
<el-cascader :key="searchDepartmentKey" v-model="form.pid" placeholder="请选择上级部门" :props="searchDepartmentData" filterable clearable></el-cascader>
|
|
|
</el-form-item>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="formDiv">
|
|
|
<el-form-item label="部门名称:" :label-width="formLabelWidth" prop="name" class="custom-align-right">
|
|
|
<el-input v-model="form.name" autocomplete="off" placeholder="请输入职能部门名称"></el-input>
|
|
@@ -57,7 +60,7 @@
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<div>
|
|
|
<el-button @click="closeWindow">取 消</el-button>
|
|
|
- <el-button type="primary" @click="addData" v-if="editId==0">提交</el-button>
|
|
|
+ <el-button type="primary" @click="addData" v-if="editId == 0">提交</el-button>
|
|
|
<el-button type="primary" @click="editData" v-else>修改</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -80,14 +83,14 @@ export default {
|
|
|
data() {
|
|
|
//0.全局操作 start ------------------------------------------------------------>
|
|
|
//表单验证
|
|
|
- const validateEmpty = (rule,value,callback) => {
|
|
|
+ const validateEmpty = (rule, value, callback) => {
|
|
|
if (!value || value.trim() === "") {
|
|
|
callback(new Error('该项不能为空!'));
|
|
|
} else {
|
|
|
callback();
|
|
|
}
|
|
|
}
|
|
|
- const validateArray = (rule,value,callback) => {
|
|
|
+ const validateArray = (rule, value, callback) => {
|
|
|
if (value.length == 0) {
|
|
|
callback(new Error('该项不能为空!'))
|
|
|
} else {
|
|
@@ -99,21 +102,21 @@ export default {
|
|
|
|
|
|
return {
|
|
|
//1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
- tableDivTitle:"职能部门管理",
|
|
|
+ tableDivTitle: "职能部门管理",
|
|
|
tableData: [],//列表
|
|
|
- allCount:0,//总条数
|
|
|
- editId:0,//要修改的网站id
|
|
|
- getApiData:{
|
|
|
- search:"",//职能部门名称
|
|
|
- page:1,//当前是第几页
|
|
|
- pageSize:10,//一共多少条
|
|
|
+ allCount: 0,//总条数
|
|
|
+ editId: 0,//要修改的网站id
|
|
|
+ getApiData: {
|
|
|
+ search: "",//职能部门名称
|
|
|
+ page: 1,//当前是第几页
|
|
|
+ pageSize: 10,//一共多少条
|
|
|
},
|
|
|
//行政职能部门
|
|
|
- searchDepartmentKey:0,
|
|
|
+ searchDepartmentKey: 0,
|
|
|
searchDepartmentData: {
|
|
|
checkStrictly: true,
|
|
|
lazy: true,
|
|
|
- async lazyLoad (node, resolve) {
|
|
|
+ async lazyLoad(node, resolve) {
|
|
|
const { level, data } = node;
|
|
|
if (data && data.children && data.children.length !== 0) {
|
|
|
return resolve(node)
|
|
@@ -121,9 +124,9 @@ export default {
|
|
|
console.log(level)
|
|
|
let parentId = level == 0 ? 0 : data.value
|
|
|
let parames = {
|
|
|
- 'pid':parentId
|
|
|
+ 'pid': parentId
|
|
|
}
|
|
|
- self.$store.dispatch('public/getAllDepartment',parames).then(res=> {
|
|
|
+ self.$store.dispatch('public/getAllDepartment', parames).then(res => {
|
|
|
if (res.data) {
|
|
|
const nodes = res.data.map(item => ({
|
|
|
value: item.id,
|
|
@@ -140,7 +143,7 @@ export default {
|
|
|
|
|
|
//2.弹出框设置 start ------------------------------------------------------------>
|
|
|
//是否显示弹出窗口
|
|
|
- windowStatus:false,
|
|
|
+ windowStatus: false,
|
|
|
formLabelWidth: '120px',
|
|
|
//弹出框设置 end ------------------------------------------------------------>
|
|
|
|
|
@@ -150,16 +153,16 @@ export default {
|
|
|
//3.弹出框中的表单设置 start ------------------------------------------------------------>
|
|
|
//3.1 表单收集的数据
|
|
|
form: {
|
|
|
- pid:"",
|
|
|
- name:""
|
|
|
+ pid: 0,
|
|
|
+ name: ""
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
//3.2表单验证规则
|
|
|
formRules: {
|
|
|
//角色名称不能为空
|
|
|
- pid:[{required:true,trigger:'blur',validator:validateArray}],
|
|
|
+ // pid:[{required:true,trigger:'blur',validator:validateArray}],
|
|
|
//职能描述不能为空
|
|
|
- name:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
},
|
|
|
//弹出框中的表单设置 end ------------------------------------------------------------>
|
|
|
}
|
|
@@ -167,8 +170,8 @@ export default {
|
|
|
methods: {
|
|
|
//1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
//1.1 获取内容
|
|
|
- getData(){
|
|
|
- this.$store.dispatch('public/getDepartmentList',this.getApiData).then(res=> {
|
|
|
+ getData() {
|
|
|
+ this.$store.dispatch('public/getDepartmentList', this.getApiData).then(res => {
|
|
|
console.log(res)
|
|
|
this.tableData = res.data.rows;
|
|
|
this.allCount = res.data.count;
|
|
@@ -191,14 +194,14 @@ export default {
|
|
|
this.getData();
|
|
|
},
|
|
|
//1.4 删除职能部门
|
|
|
- deleteRow(id){
|
|
|
+ deleteRow(id) {
|
|
|
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
console.log("当前删除:" + id)
|
|
|
- this.$store.dispatch('public/delDepartment',{id:id}).then(res=> {
|
|
|
+ this.$store.dispatch('public/delDepartment', { id: id }).then(res => {
|
|
|
this.getData();
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
@@ -227,29 +230,28 @@ export default {
|
|
|
//this.$refs.form.clearValidate();
|
|
|
},
|
|
|
//2.2 关闭弹出框
|
|
|
- closeWindow(){
|
|
|
+ closeWindow() {
|
|
|
this.windowStatus = false;
|
|
|
this.clearToServe();
|
|
|
this.$refs.form.clearValidate();
|
|
|
},
|
|
|
//2.3 清空提交窗口
|
|
|
- clearToServe(){
|
|
|
+ clearToServe() {
|
|
|
this.editId = 0;
|
|
|
- this.form.pid = [];
|
|
|
+ this.form.pid = 0;
|
|
|
this.form.name = "";
|
|
|
},
|
|
|
//弹出框设置 end ------------------------------------------------------------>
|
|
|
|
|
|
//4.添加 start ------------------------------------------------------------>
|
|
|
- addData(){
|
|
|
- if(this.form.pid.length!=0){
|
|
|
- const lastPicValue = this.form.pid[this.form.pid.length - 1];
|
|
|
- this.form.pid = String(lastPicValue);
|
|
|
+ addData() {
|
|
|
+ if (this.form.pid.length != 0) {
|
|
|
+ this.form.pid = 0
|
|
|
}
|
|
|
this.$refs.form.validate(valid => {
|
|
|
if (valid) {
|
|
|
- this.$store.dispatch('public/addDepartment',this.form).then(res=> {
|
|
|
- if(res.code == 200){
|
|
|
+ this.$store.dispatch('public/addDepartment', this.form).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: '已成功添加职能部门!'
|
|
@@ -257,7 +259,7 @@ export default {
|
|
|
console.log(res)
|
|
|
this.closeWindow();
|
|
|
this.getData();
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
message: res.message
|
|
@@ -279,11 +281,11 @@ export default {
|
|
|
|
|
|
//4.编辑 start ------------------------------------------------------------>
|
|
|
//回显数据
|
|
|
- editRow(id){
|
|
|
+ editRow(id) {
|
|
|
this.openWindow();
|
|
|
//设置要编辑的id
|
|
|
this.editId = id;
|
|
|
- this.$store.dispatch('public/getDepartmentMain',{id:id}).then(res=> {
|
|
|
+ this.$store.dispatch('public/getDepartmentMain', { id: id }).then(res => {
|
|
|
console.log(res)
|
|
|
this.form.name = res.data.name;
|
|
|
this.form.pid = res.data.pid;
|
|
@@ -314,7 +316,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
//回显职能部门
|
|
|
- async loadCascaderPath(path,type) {
|
|
|
+ async loadCascaderPath(path, type) {
|
|
|
for (let i = 0; i < path.length; i++) {
|
|
|
const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
|
|
|
const level = i; // 当前层级的索引
|
|
@@ -333,16 +335,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//提交编辑
|
|
|
- editData(){
|
|
|
+ editData() {
|
|
|
this.form.id = this.editId;
|
|
|
- if(this.form.pid.length!=0){
|
|
|
+ if (this.form.pid.length != 0) {
|
|
|
const lastPicValue = this.form.pid[this.form.pid.length - 1];
|
|
|
this.form.pid = String(lastPicValue);
|
|
|
- }
|
|
|
+ }
|
|
|
//获取选中的节点
|
|
|
this.$refs.form.validate(valid => {
|
|
|
if (valid) {
|
|
|
- this.$store.dispatch('public/upDepartment',this.form).then(res=> {
|
|
|
+ this.$store.dispatch('public/upDepartment', this.form).then(res => {
|
|
|
console.log(res)
|
|
|
this.closeWindow();
|
|
|
this.$message({
|
|
@@ -362,12 +364,12 @@ export default {
|
|
|
//编辑 end ------------------------------------------------------------>
|
|
|
|
|
|
},
|
|
|
- mounted(){
|
|
|
+ mounted() {
|
|
|
//获取页面列表
|
|
|
this.getData();
|
|
|
//获取菜单树
|
|
|
//this.getAllMenuList();
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -375,19 +377,26 @@ export default {
|
|
|
.layerBoxNoBg {
|
|
|
padding: 30px 0 0 0;
|
|
|
}
|
|
|
+
|
|
|
//表单微调 start------------------------------------------------------------>*/
|
|
|
-::v-deep .custom-form-item > .el-form-item__label {
|
|
|
+::v-deep .custom-form-item>.el-form-item__label {
|
|
|
line-height: 140px !important;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .custom-textarea .el-textarea__inner {
|
|
|
- resize: none; /* 禁止用拖拽调整大小 */
|
|
|
+ resize: none;
|
|
|
+ /* 禁止用拖拽调整大小 */
|
|
|
}
|
|
|
+
|
|
|
::v-deep .custom-align-right .el-form-item__label {
|
|
|
- text-align: right; /* 设置标签文字右对齐 */
|
|
|
+ text-align: right;
|
|
|
+ /* 设置标签文字右对齐 */
|
|
|
}
|
|
|
+
|
|
|
::v-deep .el-select-group__title {
|
|
|
color: #909399;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .el-select {
|
|
|
width: 100% !important;
|
|
|
}
|