You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
298 lines
8.2 KiB
298 lines
8.2 KiB
2 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2023-07-04 09:30:56
|
||
|
|
@ 备注: 权限矩阵
|
||
|
|
-->
|
||
|
|
<script lang='ts' setup>
|
||
|
|
import { orgInfo } from '@/api/hr/org/type'
|
||
|
|
import { getOrgTreeList } from '@/api/hr/org/index'
|
||
|
|
import { searchMatrix,matrixCont } from '@/api/matrixapi/type'
|
||
|
|
import { getMatrixList,editMatrixStatus } from '@/api/matrixapi/index'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 引入页面
|
||
|
|
*/
|
||
|
|
import MatrixContAdd from '@/views/matrix/matrixcont/matrixcontadd.vue'
|
||
|
|
import MatrixContEdit from '@/views/matrix/matrixcont/matrixcontedit.vue'
|
||
|
|
import SetupMatrixField from '@/views/matrix/matrixcont/setupmatrixfield.vue'
|
||
|
|
import SetupMatrixUser from '@/views/matrix/matrixcont/setupmatrixuser.vue'
|
||
|
|
|
||
|
|
const ids = ref<number[]>([]); //批量删除的ID
|
||
|
|
const queryFormRef = ref(ElForm); //查询表单
|
||
|
|
const orgTreeLoading = ref(false); //加载行政组织树
|
||
|
|
const orgTreeRef = ref(ElTree); //行政组织树
|
||
|
|
const orgTreeList = ref<orgInfo[]>(); //行政组织树数据
|
||
|
|
const orgTreeProps ={
|
||
|
|
children: 'child',
|
||
|
|
label: 'name',
|
||
|
|
} //行政组织树对照值
|
||
|
|
const searchArchiveQuery = reactive<searchMatrix>({
|
||
|
|
page:1,
|
||
|
|
pagesize:10
|
||
|
|
})
|
||
|
|
|
||
|
|
const loading = ref(false);
|
||
|
|
const matrixContList = ref<matrixCont[]>(); //
|
||
|
|
const editCont = ref<matrixCont>()
|
||
|
|
const total = ref(0); //总记录数
|
||
|
|
|
||
|
|
const matrixAddBox = ref(false); //添加矩阵弹窗
|
||
|
|
const matrixEditBox = ref(false); //编辑矩阵弹窗
|
||
|
|
const matrixSetFieldBox = ref(false); //设置矩阵字段
|
||
|
|
const matrixSetUserBox = ref(false); //设置矩阵取值
|
||
|
|
|
||
|
|
/**用工关系（1:临时工 , 2:编外人员 ;3:实习&实习生;4：试用员工；5：待分配；6：待岗；7：临时调入；8：正式员工；9：长期病假；10：停薪留职；11：退休；12：辞职；13：辞退；14：离职）',
|
||
|
|
`company` bigint(20) unsigned NOT NULL DEFAULT '0' COMMENT '入职公司',
|
||
|
|
* 获取行政组织数据
|
||
|
|
*/
|
||
|
|
function haveOrgTreeInfo(){
|
||
|
|
orgTreeLoading.value = true;
|
||
|
|
getOrgTreeList({})
|
||
|
|
.then(({ data })=>{
|
||
|
|
orgTreeList.value = data
|
||
|
|
}).finally(()=>{orgTreeLoading.value = false;})
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 选中行政组织树节点
|
||
|
|
*/
|
||
|
|
const handleOrgTreeNodeClick = (data: orgInfo) => {
|
||
|
|
// console.log(data)
|
||
|
|
searchArchiveQuery.adminorg = data.id
|
||
|
|
searchMatrixList();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 重置选中行政组织
|
||
|
|
*/
|
||
|
|
function resetChecked() {
|
||
|
|
orgTreeRef.value!.setCheckedKeys([], false)
|
||
|
|
searchArchiveQuery.adminorg = 0
|
||
|
|
searchMatrixList()
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 查询重置
|
||
|
|
*/
|
||
|
|
function resetQuery() {
|
||
|
|
queryFormRef.value.resetFields();
|
||
|
|
searchMatrixList()
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 获取矩阵列表
|
||
|
|
*/
|
||
|
|
function searchMatrixList(){
|
||
|
|
loading.value = true
|
||
|
|
getMatrixList(searchArchiveQuery)
|
||
|
|
.then(({ data })=>{
|
||
|
|
console.log("获取矩阵列表->",data)
|
||
|
|
matrixContList.value = data.list
|
||
|
|
total.value = data.total
|
||
|
|
}).finally(()=>{loading.value = false})
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 打开角色新增页面
|
||
|
|
*/
|
||
|
|
function openAddRoleDialog(){
|
||
|
|
matrixAddBox.value = true;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 删除
|
||
|
|
*/
|
||
|
|
function handleDelete(delId?:number){
|
||
|
|
const delRoleIds = [delId || ids.value].join(",");
|
||
|
|
if (!delRoleIds) {
|
||
|
|
ElMessage.warning("请勾选删除项");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let dictTypeIdAry = delRoleIds.split(",")
|
||
|
|
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
|
||
|
|
confirmButtonText: "确定",
|
||
|
|
cancelButtonText: "取消",
|
||
|
|
type: "warning",
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
editMatrixStatus({id:dictTypeIdAry,status:3,istrue:false}).then(() => {
|
||
|
|
ElMessage.success("删除成功");
|
||
|
|
searchMatrixList();
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => ElMessage.info("已取消删除"));
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 行checkbox change事件
|
||
|
|
*/
|
||
|
|
function handleSelectionChange(selection: any) {
|
||
|
|
ids.value = selection.map((item: any) => item.id);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 设置矩阵字段
|
||
|
|
*/
|
||
|
|
function openSetupFrameDialog(cont:matrixCont){
|
||
|
|
editCont.value = cont
|
||
|
|
matrixSetFieldBox.value = true;
|
||
|
|
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 设置矩阵关系
|
||
|
|
*/
|
||
|
|
function openSetupUsersDialog(cont:matrixCont){
|
||
|
|
editCont.value = cont
|
||
|
|
matrixSetUserBox.value = true;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 编辑矩阵
|
||
|
|
*/
|
||
|
|
function openEditMatriexDialog(cont:matrixCont){
|
||
|
|
editCont.value = cont
|
||
|
|
matrixEditBox.value = true;
|
||
|
|
}
|
||
|
|
//加载数据
|
||
|
|
onMounted(() => {
|
||
|
|
haveOrgTreeInfo();
|
||
|
|
searchMatrixList();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<el-container>
|
||
|
|
<el-aside width="340px" style="padding: 10px 10px;">
|
||
|
|
<el-card :body-style="{ height: '100%',padding:'0px 5px' }">
|
||
|
|
<el-button type="primary" style="width: 100%; margin: 10px 0;" @click="resetChecked">查看全部</el-button>
|
||
|
|
<el-tree
|
||
|
|
ref="orgTreeRef"
|
||
|
|
v-loading="orgTreeLoading"
|
||
|
|
node-key="id"
|
||
|
|
class="orgTree"
|
||
|
|
:data="orgTreeList"
|
||
|
|
:props="orgTreeProps"
|
||
|
|
:expand-on-click-node="false"
|
||
|
|
:check-on-click-node="true"
|
||
|
|
:check-strictly="true"
|
||
|
|
:default-expand-all="false"
|
||
|
|
@node-click="handleOrgTreeNodeClick"
|
||
|
|
/>
|
||
|
|
</el-card>
|
||
|
|
</el-aside>
|
||
|
|
<el-main style="padding: 10px 10px 10px 0px;">
|
||
|
|
<div class="app-container" style="margin:0">
|
||
|
|
<div class="search">
|
||
|
|
<el-form ref="queryFormRef" :model="searchArchiveQuery" :inline="true">
|
||
|
|
<el-form-item label="关键字" prop="keywords">
|
||
|
|
<el-input
|
||
|
|
v-model="searchArchiveQuery.keywords"
|
||
|
|
placeholder="角色名称"
|
||
|
|
clearable
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="searchMatrixList"
|
||
|
|
><template #icon><i-ep-search /></template>搜索</el-button
|
||
|
|
>
|
||
|
|
<el-button @click="resetQuery">
|
||
|
|
<template #icon><i-ep-refresh /></template>
|
||
|
|
重置</el-button
|
||
|
|
>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-card shadow="never">
|
||
|
|
<template #header>
|
||
|
|
<el-button type="success" @click="openAddRoleDialog()" ><i-ep-plus />新增</el-button>
|
||
|
|
<el-button
|
||
|
|
type="danger"
|
||
|
|
:disabled="ids.length === 0"
|
||
|
|
@click="handleDelete()"
|
||
|
|
>
|
||
|
|
<i-ep-delete />删除</el-button>
|
||
|
|
</template>
|
||
|
|
<el-table
|
||
|
|
v-loading="loading"
|
||
|
|
highlight-current-row
|
||
|
|
:data="matrixContList"
|
||
|
|
border
|
||
|
|
@selection-change="handleSelectionChange"
|
||
|
|
>
|
||
|
|
<el-table-column type="selection" width="55" align="center" />
|
||
|
|
<el-table-column label="矩阵名称" prop="name" width="150" />
|
||
|
|
<el-table-column label="描述" prop="center" />
|
||
|
|
<el-table-column label="归属行政组织" width="300" prop="orgname" />
|
||
|
|
<el-table-column fixed="right" label="操作" align="center" width="350" >
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button
|
||
|
|
v-hasPerm="['124067026950959104']"
|
||
|
|
type="warning"
|
||
|
|
link
|
||
|
|
size="small"
|
||
|
|
@click.stop="openSetupFrameDialog(scope.row)"
|
||
|
|
>
|
||
|
|
<i-ep-Setting />配置字段
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
v-hasPerm="['124067108593086464']"
|
||
|
|
type="success"
|
||
|
|
link
|
||
|
|
size="small"
|
||
|
|
@click.stop="openSetupUsersDialog(scope.row)"
|
||
|
|
>
|
||
|
|
<i-ep-User />配置矩阵关系
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
v-hasPerm="['124066883237326848']"
|
||
|
|
type="primary"
|
||
|
|
link
|
||
|
|
size="small"
|
||
|
|
@click.stop="openEditMatriexDialog(scope.row)"
|
||
|
|
>
|
||
|
|
<i-ep-edit />编辑
|
||
|
|
</el-button>
|
||
|
|
<el-button
|
||
|
|
v-hasPerm="['124066956029472768']"
|
||
|
|
type="danger"
|
||
|
|
link
|
||
|
|
size="small"
|
||
|
|
@click.stop="handleDelete(scope.row.id)"
|
||
|
|
>
|
||
|
|
<i-ep-delete />删除
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<pagination
|
||
|
|
v-if="total > 0"
|
||
|
|
v-model:total="total"
|
||
|
|
v-model:page="searchArchiveQuery.page"
|
||
|
|
v-model:limit="searchArchiveQuery.pagesize"
|
||
|
|
@pagination="searchMatrixList"
|
||
|
|
/>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<!--添加矩阵-->
|
||
|
|
<MatrixContAdd v-model:addShow="matrixAddBox" :orgid="searchArchiveQuery.adminorg" :orgtree="orgTreeList" @restlist="searchMatrixList" />
|
||
|
|
<!--编辑矩阵-->
|
||
|
|
<MatrixContEdit v-model:editShow="matrixEditBox" :matrixcont="editCont" :orgtree="orgTreeList" @restlist="searchMatrixList" />
|
||
|
|
<!--设置矩阵字段-->
|
||
|
|
<SetupMatrixField v-model:fieldShow="matrixSetFieldBox" :matrixcont="editCont" />
|
||
|
|
<!--设置字段使用人-->
|
||
|
|
<SetupMatrixUser v-model:userShow="matrixSetUserBox" :matrixcont="editCont" />
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</template>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.common-layout{
|
||
|
|
height: calc(100% - 60px);
|
||
|
|
background-color: aqua;
|
||
|
|
|
||
|
|
}
|
||
|
|
.el-container {
|
||
|
|
height: calc(100vh - 84px);
|
||
|
|
.el-card.is-always-shadow{
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.cardBody{
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.orgTree{
|
||
|
|
padding:5px 0;
|
||
|
|
}
|
||
|
|
</style>
|