|
|
|
@ -14,7 +14,6 @@ |
|
|
|
placeholder="机构名称" |
|
|
|
style="width: 200px;" |
|
|
|
class="filter-item" |
|
|
|
@keyup.enter.native="crud.toQuery" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="form_item"> |
|
|
|
@ -26,13 +25,11 @@ |
|
|
|
placeholder="管理员名称" |
|
|
|
style="width: 200px;" |
|
|
|
class="filter-item" |
|
|
|
@keyup.enter.native="crud.toQuery" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<rrOperation /> |
|
|
|
</el-col> |
|
|
|
<el-col class="page_add" :span="4"> |
|
|
|
<el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button> |
|
|
|
<el-button class="table_add" type="primary" round @click="addDept">新增</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
@ -41,16 +38,21 @@ |
|
|
|
append-to-body |
|
|
|
:close-on-click-modal="false" |
|
|
|
:show-close="false" |
|
|
|
:before-close="crud.cancelCU" |
|
|
|
:visible.sync="addDialogVisible" |
|
|
|
title="新增" |
|
|
|
width="620px" |
|
|
|
:title="layerTitle" |
|
|
|
width="630px" |
|
|
|
> |
|
|
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px"> |
|
|
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px"> |
|
|
|
<el-form-item label="机构名称" prop="name"> |
|
|
|
<el-input v-model="form.name" style="width: 360px;" /> |
|
|
|
<el-input v-model="form.org_name" style="width: 360px;" /> |
|
|
|
<span class="init_password">密码默认：123456</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="管理员名称" prop="name" label-width="100px"> |
|
|
|
<el-input v-model="form.user_name" style="width: 360px;" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="管理员账号" prop="name" label-width="100px"> |
|
|
|
<el-input v-model="form.user_account" style="width: 360px;" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="有效时间" prop="indate"> |
|
|
|
<el-date-picker |
|
|
|
v-model="form.indate" |
|
|
|
@ -71,9 +73,21 @@ |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="权限" prop="permissionAll"> |
|
|
|
<el-checkbox v-model="treeCheckAll" @change="handleCheckedAll">全选</el-checkbox> |
|
|
|
<el-tree |
|
|
|
ref="role" |
|
|
|
:data="roleTree" |
|
|
|
:default-expand-all="true" |
|
|
|
:props="defaultProps" |
|
|
|
show-checkbox |
|
|
|
node-key="id" |
|
|
|
@check-change="handleCheckChange" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">新增</el-button> |
|
|
|
<el-button type="primary" round>新增</el-button> |
|
|
|
<el-button round @click="addDialogVisible=false">关闭</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
@ -99,16 +113,10 @@ |
|
|
|
<el-col> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
v-loading="crud.loading" |
|
|
|
lazy |
|
|
|
:load="getDeptDatas" |
|
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" |
|
|
|
:data="tableData" |
|
|
|
row-key="id" |
|
|
|
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }" |
|
|
|
@select="crud.selectChange" |
|
|
|
@select-all="crud.selectAllChange" |
|
|
|
@selection-change="crud.selectionChangeHandler" |
|
|
|
> |
|
|
|
<el-table-column :selectable="checkboxT" type="selection" width="55" /> |
|
|
|
<el-table-column label="机构名称" align="center" prop="name" /> |
|
|
|
@ -127,12 +135,11 @@ |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="edit_btn" |
|
|
|
@click="editFormData(scope.$index, scope.row)" |
|
|
|
@click="editDept(scope.$index, scope.row)" |
|
|
|
>编辑</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="stop_btn" |
|
|
|
@click="editFormData(scope.$index, scope.row)" |
|
|
|
>停用</el-button> |
|
|
|
<el-button |
|
|
|
type="info" |
|
|
|
@ -143,42 +150,39 @@ |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<!--分页组件--> |
|
|
|
<pagination /> |
|
|
|
<el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getDeptList" @size-change="handleSizeChange" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import crudDept from '@/api/system/dept' |
|
|
|
// import Treeselect from '@riophae/vue-treeselect'; |
|
|
|
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'; |
|
|
|
// import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'; |
|
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
|
import rrOperation from '@crud/RR.operation' |
|
|
|
// import crudOperation from '@crud/CRUD.operation'; |
|
|
|
// import udOperation from '@crud/UD.operation'; |
|
|
|
// import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
import pagination from '@crud/Pagination' |
|
|
|
|
|
|
|
const defaultForm = { |
|
|
|
id: null, |
|
|
|
name: null, |
|
|
|
versions: null, |
|
|
|
indate: [] |
|
|
|
} |
|
|
|
import roleTree from '../role/role2.json' |
|
|
|
export default { |
|
|
|
name: 'Dept', |
|
|
|
components: { rrOperation, pagination }, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}) |
|
|
|
}, |
|
|
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
|
|
// 设置数据字典 |
|
|
|
dicts: ['dept_status'], |
|
|
|
components: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
depts: [], |
|
|
|
layerTitle: '', |
|
|
|
roleTree: null, |
|
|
|
defaultProps: { children: 'children', label: 'label' }, |
|
|
|
treeCheckAll: false, |
|
|
|
tags: [], |
|
|
|
currentChecked: null, |
|
|
|
page: 1, |
|
|
|
size: 10, |
|
|
|
total: 0, |
|
|
|
query: { |
|
|
|
blurry: null |
|
|
|
}, |
|
|
|
form: { |
|
|
|
id: null, |
|
|
|
org_name: null, |
|
|
|
user_name: null, |
|
|
|
user_account: null, |
|
|
|
indate: [], |
|
|
|
versions: null |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }], |
|
|
|
versions: [ |
|
|
|
@ -223,119 +227,70 @@ export default { |
|
|
|
date: '2021-1-1 14:00' |
|
|
|
} |
|
|
|
] |
|
|
|
// permission: { |
|
|
|
// add: ['admin', 'dept:add'], |
|
|
|
// edit: ['admin', 'dept:edit'], |
|
|
|
// del: ['admin', 'dept:del'] |
|
|
|
// }, |
|
|
|
// enabledTypeOptions: [{ key: 'true', display_name: '正常' }, { key: 'false', display_name: '禁用' }] |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.roleTree = roleTree |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getDeptList() { |
|
|
|
|
|
|
|
}, |
|
|
|
// 每条显示数据改变时的事件 |
|
|
|
handleSizeChange(size) { |
|
|
|
// 整理参数 |
|
|
|
this.size = size |
|
|
|
this.getDeptList() |
|
|
|
}, |
|
|
|
addDept() { |
|
|
|
this.addDialogVisible = true |
|
|
|
this.layerTitle = '新增' |
|
|
|
}, |
|
|
|
handleCheckedAll() { |
|
|
|
if (this.treeCheckAll) { |
|
|
|
this.$refs.role.setCheckedNodes(this.roleTree) |
|
|
|
} else { |
|
|
|
this.$refs.role.setCheckedKeys([]) |
|
|
|
} |
|
|
|
}, |
|
|
|
handleCheckChange(data, checked) { |
|
|
|
let childLength = 0 |
|
|
|
this.roleTree.forEach(function(item) { |
|
|
|
childLength += item.children.length |
|
|
|
}, 0) |
|
|
|
const allLength = this.roleTree.length + childLength |
|
|
|
this.form.permissionAll = this.$refs.role.getCheckedKeys().concat(this.$refs.role.getHalfCheckedKeys()) |
|
|
|
this.treeCheckAll = this.form.permissionAll.length == allLength |
|
|
|
this.tags.push(data.label) |
|
|
|
this.currentChecked = checked |
|
|
|
for (var i = 0; i <= this.tags.length; i++) { |
|
|
|
if (this.currentChecked == false) { |
|
|
|
this.tags.splice(this.tags.indexOf(this.i), 1) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
submitForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
console.log(this.form) |
|
|
|
alert('submit!') |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
resetForm(formName) { |
|
|
|
this.$refs[formName].resetFields() |
|
|
|
this.roleFormVisible = false |
|
|
|
}, |
|
|
|
editDept(index, row) { |
|
|
|
this.addDialogVisible = true |
|
|
|
this.layerTitle = '编辑' |
|
|
|
}, |
|
|
|
handleRecord(index, row) { |
|
|
|
this.recordVisible = true |
|
|
|
}, |
|
|
|
getDeptDatas(tree, treeNode, resolve) { |
|
|
|
// const params = { pid: tree.id }; |
|
|
|
// setTimeout(() => { |
|
|
|
// crudDept.getDepts(params).then(res => { |
|
|
|
// resolve(res.content); |
|
|
|
// }); |
|
|
|
// }, 100); |
|
|
|
}, |
|
|
|
// // 新增与编辑前做的操作 |
|
|
|
// [CRUD.HOOK.afterToCU](crud, form) { |
|
|
|
// if (form.pid !== null) { |
|
|
|
// form.isTop = '0'; |
|
|
|
// } else if (form.id !== null) { |
|
|
|
// form.isTop = '1'; |
|
|
|
// } |
|
|
|
// form.enabled = `${form.enabled}`; |
|
|
|
// if (form.id != null) { |
|
|
|
// this.getSupDepts(form.id); |
|
|
|
// } else { |
|
|
|
// this.getDepts(); |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// getSupDepts(id) { |
|
|
|
// crudDept.getDeptSuperior(id).then(res => { |
|
|
|
// const date = res.content; |
|
|
|
// this.buildDepts(date); |
|
|
|
// this.depts = date; |
|
|
|
// }); |
|
|
|
// }, |
|
|
|
// buildDepts(depts) { |
|
|
|
// depts.forEach(data => { |
|
|
|
// if (data.children) { |
|
|
|
// this.buildDepts(data.children); |
|
|
|
// } |
|
|
|
// if (data.hasChildren && !data.children) { |
|
|
|
// data.children = null; |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// }, |
|
|
|
// getDepts() { |
|
|
|
// crudDept.getDepts({ enabled: true }).then(res => { |
|
|
|
// this.depts = res.content.map(function(obj) { |
|
|
|
// if (obj.hasChildren) { |
|
|
|
// obj.children = null; |
|
|
|
// } |
|
|
|
// return obj; |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
// }, |
|
|
|
// // 获取弹窗内部门数据 |
|
|
|
// loadDepts({ action, parentNode, callback }) { |
|
|
|
// if (action === LOAD_CHILDREN_OPTIONS) { |
|
|
|
// crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => { |
|
|
|
// parentNode.children = res.content.map(function(obj) { |
|
|
|
// if (obj.hasChildren) { |
|
|
|
// obj.children = null; |
|
|
|
// } |
|
|
|
// return obj; |
|
|
|
// }); |
|
|
|
// setTimeout(() => { |
|
|
|
// callback(); |
|
|
|
// }, 100); |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// // 提交前的验证 |
|
|
|
// [CRUD.HOOK.afterValidateCU]() { |
|
|
|
// if (this.form.pid !== null && this.form.pid === this.form.id) { |
|
|
|
// this.$message({ |
|
|
|
// message: '上级部门不能为空', |
|
|
|
// type: 'warning' |
|
|
|
// }); |
|
|
|
// return false; |
|
|
|
// } |
|
|
|
// if (this.form.isTop === '1') { |
|
|
|
// this.form.pid = null; |
|
|
|
// } |
|
|
|
// return true; |
|
|
|
// }, |
|
|
|
// // 改变状态 |
|
|
|
// changeEnabled(data, val) { |
|
|
|
// this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '部门, 是否继续？', '提示', { |
|
|
|
// confirmButtonText: '确定', |
|
|
|
// cancelButtonText: '取消', |
|
|
|
// type: 'warning' |
|
|
|
// }) |
|
|
|
// .then(() => { |
|
|
|
// crudDept |
|
|
|
// .edit(data) |
|
|
|
// .then(res => { |
|
|
|
// this.crud.notify(this.dict.label.dept_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS); |
|
|
|
// }) |
|
|
|
// .catch(err => { |
|
|
|
// data.enabled = !data.enabled; |
|
|
|
// console.log(err.response.data.message); |
|
|
|
// }); |
|
|
|
// }) |
|
|
|
// .catch(() => { |
|
|
|
// data.enabled = !data.enabled; |
|
|
|
// }); |
|
|
|
// }, |
|
|
|
checkboxT(row, rowIndex) { |
|
|
|
return row.id !== 1 |
|
|
|
} |
|
|
|
|
