<!--
@ 作者: 秦东
@ 时间: 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 { getOrgChiled } from '@/api/displayboardapi/indexapi'
/**
 * 引入页面
 */
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>
