9 changed files with 1241 additions and 0 deletions
@ -0,0 +1,17 @@ |
|||
//字段类型
|
|||
export const matrixType = [ |
|||
{ |
|||
id:2, |
|||
name:"行政组织" |
|||
}, |
|||
{ |
|||
id:3, |
|||
name:"分部" |
|||
} |
|||
]; |
|||
export const matrixTypes = [ |
|||
{ |
|||
id:1, |
|||
name:"人力资源" |
|||
} |
|||
]; |
|||
@ -0,0 +1,74 @@ |
|||
import request from '@/utils/request'; |
|||
import { AxiosPromise } from 'axios'; |
|||
import { searchMatrix,matrixCont,editMatrixCont,editMatrixInfo,editStatus,chineseInitialFirstWord,sendMatrixField,getMatrixWord } from './type'; |
|||
|
|||
/** |
|||
* 获取矩阵权限分页列表 |
|||
*/ |
|||
export function getMatrixList(queryParams: searchMatrix): AxiosPromise<PageResult<matrixCont[]>> { |
|||
return request({ |
|||
url: '/systemapi/matrix/matrixlist', |
|||
method: 'post', |
|||
data: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 添加矩阵 |
|||
*/ |
|||
export function addMatrixCont(queryParams: editMatrixCont){ |
|||
return request({ |
|||
url: '/systemapi/matrix/addmatrixcont', |
|||
method: 'post', |
|||
data: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 编辑矩阵 |
|||
*/ |
|||
export function editMatrixCont(queryParams: editMatrixInfo){ |
|||
return request({ |
|||
url: '/systemapi/matrix/editmatrixcont', |
|||
method: 'post', |
|||
data: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 编辑矩阵状态 |
|||
*/ |
|||
export function editMatrixStatus(queryParams: editStatus){ |
|||
return request({ |
|||
url: '/systemapi/matrix/editstatuscont', |
|||
method: 'post', |
|||
data: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 获取汉字首字母 |
|||
*/ |
|||
export function getChineseInitial(queryParams: chineseInitialFirstWord){ |
|||
return request({ |
|||
url: '/systemapi/public/chinese_initial', |
|||
method: 'post', |
|||
data: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 提交矩阵字段 |
|||
*/ |
|||
export function sendMatrixField(queryParams: sendMatrixField){ |
|||
return request({ |
|||
url: '/systemapi/matrix/setup_matrix_field', |
|||
method: 'post', |
|||
data: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 获取矩阵字段 |
|||
*/ |
|||
export function getMatrixField(queryParams: getMatrixWord): AxiosPromise<sendMatrixField>{ |
|||
return request({ |
|||
url: '/systemapi/matrix/get_matrix_field', |
|||
method: 'post', |
|||
data: queryParams |
|||
}); |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
export interface searchMatrix extends PageQuery{ |
|||
keywords?:string; //关键字
|
|||
adminorg?:number; //行政组织
|
|||
} |
|||
/** |
|||
* 矩阵类别内容 |
|||
*/ |
|||
export interface matrixCont{ |
|||
id:number; |
|||
name:string; |
|||
center:string; |
|||
org:number; |
|||
orgname:string; |
|||
status:number; |
|||
time:number; |
|||
} |
|||
/** |
|||
* 编辑矩阵内容 |
|||
*/ |
|||
export interface editMatrixCont{ |
|||
name:string; |
|||
center:string; |
|||
org:number|string; |
|||
} |
|||
/** |
|||
* 修改矩阵内容 |
|||
*/ |
|||
export interface editMatrixInfo extends editMatrixCont{ |
|||
id:number; |
|||
} |
|||
/** |
|||
* 编辑状态 |
|||
*/ |
|||
export interface editStatus{ |
|||
id:string[]; |
|||
status:number; |
|||
istrue:boolean; |
|||
} |
|||
|
|||
/** |
|||
* 矩阵字段 |
|||
*/ |
|||
export interface martixFieldStruct{ |
|||
id:number; |
|||
name:string; //骨架名称
|
|||
types:number; //骨架类型（1：人力资源；2：行政组织；2：分部；）
|
|||
condition:number; //骨架取值类型（1：作为条件使用；2：作为取值使用）
|
|||
pinyin:string; //拼音（标识使用）
|
|||
isedit:boolean; //是否可更改
|
|||
pyedit:boolean; //拼音是否可更改
|
|||
} |
|||
/** |
|||
* 矩阵字段列表 |
|||
*/ |
|||
export interface martixFieldList{ |
|||
factor:martixFieldStruct[]; |
|||
outcome:martixFieldStruct[]; |
|||
} |
|||
/** |
|||
* 名称 |
|||
*/ |
|||
export interface chineseInitialFirstWord{ |
|||
name:string; |
|||
} |
|||
/** |
|||
* 提交矩阵字段 |
|||
*/ |
|||
export interface sendMatrixField extends martixFieldList{ |
|||
id:number; |
|||
} |
|||
/** |
|||
* 获取矩阵字段 |
|||
*/ |
|||
export interface getMatrixWord{ |
|||
id:number; |
|||
} |
|||
/** |
|||
* 数据表格矩阵字段 |
|||
*/ |
|||
export interface matrixTable{ |
|||
id:number; |
|||
label:string; |
|||
prop:string |
|||
} |
|||
/** |
|||
* 自定义对象结构体 |
|||
*/ |
|||
export interface objectStruct{ |
|||
[idx: string]: any |
|||
} |
|||
|
After Width: | Height: | Size: 977 B |
@ -0,0 +1,297 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 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> |
|||
@ -0,0 +1,150 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-04 14:51:04 |
|||
@ 备注: 添加矩阵 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { orgInfo } from '@/api/hr/org/type' |
|||
import { editMatrixCont } from '@/api/matrixapi/type' |
|||
import { addMatrixCont } from '@/api/matrixapi/index' |
|||
|
|||
const props = defineProps({ |
|||
addShow:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
orgid:{ |
|||
type:Number, |
|||
default:0 |
|||
}, |
|||
orgtree:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const emits = defineEmits(["update:addShow","restlist"]); //父级元素 |
|||
const addMatrixRef = ref(ElForm); //添加矩阵 |
|||
const addCont = reactive<editMatrixCont>({ |
|||
name:"", |
|||
center:"", |
|||
org:"" |
|||
}) |
|||
const orgTreeProps ={ |
|||
children: 'child', |
|||
label: 'name', |
|||
} //行政组织树对照值 |
|||
/** |
|||
* 弹窗显示控制 |
|||
*/ |
|||
const add_is_Show = computed({ |
|||
get: () => props.addShow, |
|||
set: (val) => { |
|||
emits("update:addShow", val); |
|||
}, |
|||
}); |
|||
const addLoading = ref(false) |
|||
/** |
|||
* 表单验证规则 |
|||
*/ |
|||
const addFormRules = reactive({ |
|||
org: [{ required: true, message: "请选择归属行政组织", trigger: "blur" }], |
|||
name: [{ required: true, message: "请输入矩阵名称", trigger: "blur" }] |
|||
}); |
|||
/** |
|||
* 初始化数据 |
|||
*/ |
|||
function initData(){ |
|||
addCont.name = ""; |
|||
addCont.center = ""; |
|||
addCont.org = ""; |
|||
addLoading.value = false; |
|||
} |
|||
/** |
|||
* 关闭弹窗 |
|||
*/ |
|||
function handleCloseAdd(){ |
|||
emits("update:addShow", false); |
|||
initData() |
|||
} |
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
function submitAddMatrix(){ |
|||
addLoading.value = true; |
|||
addMatrixRef.value.validate((isValid: boolean) => { |
|||
if (isValid) { |
|||
addMatrixCont(addCont) |
|||
.then(() => { |
|||
ElMessage.success("新增成功"); |
|||
handleCloseAdd(); |
|||
emits('restlist'); |
|||
}) |
|||
.finally(() => (addLoading.value = false)); |
|||
}else{ |
|||
addLoading.value = false; |
|||
} |
|||
}); |
|||
} |
|||
/** |
|||
* 监听数据 |
|||
*/ |
|||
watch(() => props.addShow,() => { |
|||
if(!props.addShow){ |
|||
initData(); |
|||
}else{ |
|||
if(props.orgid != 0){ |
|||
addCont.org = props.orgid; |
|||
}else{ |
|||
addCont.org = "" |
|||
} |
|||
|
|||
} |
|||
}); |
|||
|
|||
</script> |
|||
<template> |
|||
<el-dialog v-model="add_is_Show" custom-class="dialog_box" title="编辑矩阵" :before-close="handleCloseAdd" width="400"> |
|||
<el-form |
|||
ref="addMatrixRef" |
|||
:model="addCont" |
|||
:rules="addFormRules" |
|||
label-width="140px" |
|||
> |
|||
<el-form-item label="矩阵名称" prop="name"> |
|||
<el-input v-model="addCont.name" placeholder="请输入矩阵名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="简介" prop="center"> |
|||
<el-input |
|||
v-model="addCont.center" |
|||
:autosize="{ minRows: 2, maxRows: 4 }" |
|||
type="textarea" |
|||
placeholder="请输入矩阵简介" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="归属行政组织" prop="org"> |
|||
<el-tree-select |
|||
ref="orgTreePostRef" |
|||
v-model="addCont.org" |
|||
placeholder="选择归属行政组织" |
|||
:data="props.orgtree" |
|||
node-key="id" |
|||
check-strictly |
|||
:props="orgTreeProps" |
|||
:render-after-expand="false" |
|||
class="orgTree" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" :loading="addLoading" @click="submitAddMatrix" >确 定</el-button> |
|||
<el-button @click="handleCloseAdd">取 消</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,150 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-04 14:51:04 |
|||
@ 备注: 编辑矩阵 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { editMatrixInfo } from '@/api/matrixapi/type' |
|||
import { editMatrixCont } from '@/api/matrixapi/index' |
|||
|
|||
const props = defineProps({ |
|||
editShow:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
matrixcont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
orgtree:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const emits = defineEmits(["update:editShow","restlist"]); //父级元素 |
|||
const editMatrixRef = ref(ElForm); //添加矩阵 |
|||
const editCont = reactive<editMatrixInfo>({ |
|||
id:0, |
|||
name:"", |
|||
center:"", |
|||
org:"" |
|||
}) |
|||
const orgTreeProps ={ |
|||
children: 'child', |
|||
label: 'name', |
|||
} //行政组织树对照值 |
|||
/** |
|||
* 弹窗显示控制 |
|||
*/ |
|||
const edit_is_Show = computed({ |
|||
get: () => props.editShow, |
|||
set: (val) => { |
|||
emits("update:editShow", val); |
|||
}, |
|||
}); |
|||
const editLoading = ref(false) |
|||
/** |
|||
* 表单验证规则 |
|||
*/ |
|||
const editFormRules = reactive({ |
|||
org: [{ required: true, message: "请选择归属行政组织", trigger: "blur" }], |
|||
name: [{ required: true, message: "请输入矩阵名称", trigger: "blur" }] |
|||
}); |
|||
/** |
|||
* 初始化数据 |
|||
*/ |
|||
function initData(){ |
|||
editCont.name = ""; |
|||
editCont.center = ""; |
|||
editCont.org = ""; |
|||
editLoading.value = false; |
|||
} |
|||
/** |
|||
* 关闭弹窗 |
|||
*/ |
|||
function handleCloseAdd(){ |
|||
emits("update:editShow", false); |
|||
initData() |
|||
} |
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
function submitEditMatrix(){ |
|||
editLoading.value = true; |
|||
editMatrixRef.value.validate((isValid: boolean) => { |
|||
if (isValid) { |
|||
editMatrixCont(editCont) |
|||
.then(() => { |
|||
ElMessage.success("编辑成功"); |
|||
handleCloseAdd(); |
|||
emits('restlist'); |
|||
}) |
|||
.finally(() => (editLoading.value = false)); |
|||
}else{ |
|||
editLoading.value = false; |
|||
} |
|||
}); |
|||
} |
|||
/** |
|||
* 监听数据 |
|||
*/ |
|||
watch(() => props.editShow,() => { |
|||
if(!props.editShow){ |
|||
initData(); |
|||
}else{ |
|||
editCont.id = props.matrixcont.id; |
|||
editCont.name = props.matrixcont.name; |
|||
editCont.center = props.matrixcont.center; |
|||
editCont.org = props.matrixcont.org; |
|||
} |
|||
}); |
|||
|
|||
</script> |
|||
<template> |
|||
<el-dialog v-model="edit_is_Show" custom-class="dialog_box" title="编辑矩阵" :before-close="handleCloseAdd" width="400"> |
|||
<el-form |
|||
ref="editMatrixRef" |
|||
:model="editCont" |
|||
:rules="editFormRules" |
|||
label-width="140px" |
|||
> |
|||
<el-form-item label="矩阵名称" prop="name"> |
|||
<el-input v-model="editCont.name" placeholder="请输入矩阵名称" /> |
|||
</el-form-item> |
|||
<el-form-item label="简介" prop="center"> |
|||
<el-input |
|||
v-model="editCont.center" |
|||
:autosize="{ minRows: 2, maxRows: 4 }" |
|||
type="textarea" |
|||
placeholder="请输入矩阵简介" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="归属行政组织" prop="org"> |
|||
<el-tree-select |
|||
ref="orgTreePostRef" |
|||
v-model="editCont.org" |
|||
placeholder="选择归属行政组织" |
|||
:data="props.orgtree" |
|||
node-key="id" |
|||
check-strictly |
|||
:props="orgTreeProps" |
|||
:render-after-expand="false" |
|||
class="orgTree" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" :loading="editLoading" @click="submitEditMatrix" >确 定</el-button> |
|||
<el-button @click="handleCloseAdd">取 消</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,349 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-05 15:02:50 |
|||
@ 备注: 设置矩阵字段 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { getChineseInitial,sendMatrixField,getMatrixField } from '@/api/matrixapi'; |
|||
import { matrixType,matrixTypes } from '@/api/matrixapi/datacont' |
|||
import { martixFieldStruct,martixFieldList } from '@/api/matrixapi/type' |
|||
import JiaHaoYuan from '@/assets/icons/jiahaoyuan.svg' |
|||
const props = defineProps({ |
|||
fieldShow:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
matrixcont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const emits = defineEmits(["update:fieldShow"]); //父级元素 |
|||
//条件与值 |
|||
const tjAndZhi = reactive<martixFieldList>( |
|||
{ |
|||
factor:[{ |
|||
id:0, |
|||
name:"", //骨架名称 |
|||
types:2, //骨架类型（1：人力资源；2：行政组织；2：分部；） |
|||
condition:1, //骨架取值类型（1：作为条件使用；2：作为取值使用） |
|||
pinyin:"", //拼音（标识使用） |
|||
isedit:false, |
|||
pyedit:false, |
|||
}], |
|||
outcome:[{ |
|||
id:0, |
|||
name:"", //骨架名称 |
|||
types:1, //骨架类型（1：人力资源；2：行政组织；2：分部；） |
|||
condition:2, //骨架取值类型（1：作为条件使用；2：作为取值使用） |
|||
pinyin:"", //拼音（标识使用） |
|||
isedit:false, |
|||
pyedit:false, |
|||
}] |
|||
} |
|||
) |
|||
const addFieldLoading = ref(false) |
|||
/** |
|||
* 弹窗显示控制 |
|||
*/ |
|||
const field_is_Show = computed({ |
|||
get: () => props.fieldShow, |
|||
set: (val) => { |
|||
emits("update:fieldShow", val); |
|||
}, |
|||
}); |
|||
/** |
|||
* 关闭弹窗 |
|||
*/ |
|||
function handleCloseBox(){ |
|||
emits("update:fieldShow", false); |
|||
initData() |
|||
} |
|||
/** |
|||
* 初始化数据 |
|||
*/ |
|||
function initData(){ |
|||
tjAndZhi.factor.splice(0,tjAndZhi.factor.length); |
|||
tjAndZhi.outcome.splice(0,tjAndZhi.outcome.length); |
|||
addMatrixField(1); |
|||
addMatrixField(2); |
|||
} |
|||
/** |
|||
* 添加字段 |
|||
*/ |
|||
function addMatrixField(type:number){ |
|||
if(type == 1){ |
|||
tjAndZhi.factor.push({ |
|||
id:0, |
|||
name:"", //骨架名称 |
|||
types:2, //骨架类型（1：人力资源；2：行政组织；2：分部；） |
|||
condition:1, //骨架取值类型（1：作为条件使用；2：作为取值使用） |
|||
pinyin:"", //拼音（标识使用） |
|||
isedit:true, |
|||
pyedit:false, |
|||
}) |
|||
}else{ |
|||
tjAndZhi.outcome.push({ |
|||
id:0, |
|||
name:"", //骨架名称 |
|||
types:1, //骨架类型（1：人力资源；2：行政组织；2：分部；） |
|||
condition:2, //骨架取值类型（1：作为条件使用；2：作为取值使用） |
|||
pinyin:"", //拼音（标识使用） |
|||
isedit:true, |
|||
pyedit:false, |
|||
}) |
|||
} |
|||
} |
|||
//获取拼音 |
|||
function getpinyin(cont:martixFieldStruct){ |
|||
// console.log("获取拼音",cont) |
|||
getChineseInitial({name:cont.name}) |
|||
.then((data)=>{ |
|||
if(data.data!=""){ |
|||
cont.pinyin =data.data |
|||
}else{ |
|||
cont.pinyin =cont.name |
|||
} |
|||
}) |
|||
} |
|||
/** |
|||
* 监听数据 |
|||
*/ |
|||
watch(() => props.fieldShow,() => { |
|||
if(props.fieldShow){ |
|||
getMatrixField({id:props.matrixcont.id}) |
|||
.then(({data})=>{ |
|||
console.log("监听数据---->",data) |
|||
tjAndZhi.factor.splice(0,tjAndZhi.factor.length); |
|||
tjAndZhi.outcome.splice(0,tjAndZhi.outcome.length); |
|||
tjAndZhi.factor = data.factor |
|||
tjAndZhi.outcome = data.outcome |
|||
}); |
|||
} |
|||
}); |
|||
/** |
|||
* 添加矩阵字段 |
|||
*/ |
|||
function submitAddMatrixField(){ |
|||
if(tjAndZhi.factor.length < 1){ |
|||
ElMessage({ |
|||
showClose: true, |
|||
message: '矩阵条件字段不能为空！', |
|||
type: 'error', |
|||
}) |
|||
return false |
|||
} |
|||
if(tjAndZhi.outcome.length < 1){ |
|||
ElMessage({ |
|||
showClose: true, |
|||
message: '矩阵取值字段不能为空！', |
|||
type: 'error', |
|||
}) |
|||
return false |
|||
} |
|||
let factorPinyin = new Array |
|||
let outcomePinyin = new Array |
|||
let factorNull = false; |
|||
tjAndZhi.factor.forEach(item=>{ |
|||
factorPinyin.push(item.pinyin) |
|||
outcomePinyin.push(item.name) |
|||
if(item.pinyin == "" || item.name == "") factorNull = true; |
|||
}) |
|||
if(factorNull){ |
|||
ElMessage({ |
|||
showClose: true, |
|||
message: '矩阵条件字段有未填写的项目！', |
|||
type: 'error', |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
//判断取值 |
|||
|
|||
let outcomeNull = false; |
|||
tjAndZhi.outcome.forEach(item=>{ |
|||
factorPinyin.push(item.pinyin) |
|||
outcomePinyin.push(item.name) |
|||
if(item.pinyin == "" || item.name == "") outcomeNull = true; |
|||
}) |
|||
if(outcomeNull){ |
|||
ElMessage({ |
|||
showClose: true, |
|||
message: '矩阵取值字段有未填写的项目！', |
|||
type: 'error', |
|||
}) |
|||
return false |
|||
} |
|||
let newFactorPinyin = Array.from(new Set(factorPinyin)) |
|||
let newOutcomePinyin = Array.from(new Set(outcomePinyin)) |
|||
if(newOutcomePinyin.length != outcomePinyin.length){ |
|||
ElMessage({ |
|||
showClose: true, |
|||
message: '矩阵字段有重复的名称！', |
|||
type: 'error', |
|||
}) |
|||
return false |
|||
} |
|||
if(newFactorPinyin.length != factorPinyin.length){ |
|||
ElMessage({ |
|||
showClose: true, |
|||
message: '矩阵字段有重复的拼音！', |
|||
type: 'error', |
|||
}) |
|||
return false |
|||
} |
|||
console.log("添加矩阵字段-->",factorPinyin,factorNull,outcomePinyin,outcomeNull,newFactorPinyin,newOutcomePinyin,tjAndZhi) |
|||
sendMatrixField({id:props.matrixcont.id,factor:tjAndZhi.factor,outcome:tjAndZhi.outcome}) |
|||
.then((data)=>{ |
|||
ElMessage.success("编辑成功"); |
|||
handleCloseBox(); |
|||
}) |
|||
} |
|||
/** |
|||
* 删除字段 |
|||
*/ |
|||
function delMatrixField(index:number,type:number){ |
|||
if(type == 1){ |
|||
tjAndZhi.factor.splice(index,1); |
|||
}else{ |
|||
tjAndZhi.outcome.splice(index,1); |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-dialog v-model="field_is_Show" custom-class="dialog_box" title="设置矩阵字段" :before-close="handleCloseBox" width="50%"> |
|||
|
|||
<el-scrollbar> |
|||
<div class="scrollbar-flex-content"> |
|||
<div v-for="(item,index) in tjAndZhi.factor" :key="index" class="scrollbar-demo-item"> |
|||
<div class="form_box"> |
|||
<el-select |
|||
v-model="item.types" |
|||
clearable |
|||
placeholder="用工关系" |
|||
:disabled="item.pyedit" |
|||
> |
|||
<el-option |
|||
v-for="items in matrixType" |
|||
:key="items.id" |
|||
:label="items.name" |
|||
:value="items.id" |
|||
/> |
|||
</el-select> |
|||
|
|||
<el-input v-if="item.pyedit" v-model="item.name" clearable placeholder="请输入字段名称" /> |
|||
<el-input v-else v-model="item.name" clearable placeholder="请输入字段名称" @input="getpinyin(item)" /> |
|||
<el-input v-model="item.pinyin" clearable placeholder="请输入字段拼音" :disabled="item.pyedit" /> |
|||
</div> |
|||
<div v-if="item.isedit" class="form_del" @click="delMatrixField(index,1)"> |
|||
<i-ep-Minus></i-ep-Minus> |
|||
</div> |
|||
</div> |
|||
<div class="scrollbar-demo-item wordecnters"> |
|||
<el-image style="width: 100px; height: 100px; margin-top: 70px; cursor: pointer;" :src="JiaHaoYuan" fit="fill" @click="addMatrixField(1)" /> |
|||
<div class="word_box">此区域用于添加条件字段</div> |
|||
</div> |
|||
<div v-for="(item,index) in tjAndZhi.outcome" :key="index" class="scrollbar-demo-items"> |
|||
<div class="form_box"> |
|||
<el-select |
|||
v-model="item.types" |
|||
clearable |
|||
placeholder="用工关系" |
|||
:disabled="item.pyedit" |
|||
> |
|||
<el-option |
|||
v-for="items in matrixTypes" |
|||
:key="items.id" |
|||
:label="items.name" |
|||
:value="items.id" |
|||
/> |
|||
</el-select> |
|||
|
|||
<el-input v-if="item.pyedit" v-model="item.name" clearable placeholder="请输入字段名称" /> |
|||
<el-input v-else v-model="item.name" clearable placeholder="请输入字段名称" @input="getpinyin(item)" /> |
|||
<el-input v-model="item.pinyin" clearable placeholder="请输入字段拼音" :disabled="item.pyedit" /> |
|||
</div> |
|||
<div v-if="item.isedit" class="form_del" @click="delMatrixField(index,2)"> |
|||
<i-ep-Minus></i-ep-Minus> |
|||
</div> |
|||
</div> |
|||
<div class="scrollbar-demo-items wordecnters"> |
|||
<el-image style="width: 100px; height: 100px; margin-top: 70px; cursor: pointer;" :src="JiaHaoYuan" fit="fill" @click="addMatrixField(2)" /> |
|||
<div class="word_box">此区域用于添加取值字段</div> |
|||
</div> |
|||
</div> |
|||
</el-scrollbar> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" :loading="addFieldLoading" @click="submitAddMatrixField" >确 定</el-button> |
|||
<el-button @click="handleCloseBox">取 消</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.el-dialog__body{ |
|||
padding: 10px; |
|||
} |
|||
.field_box{ |
|||
display: flex; |
|||
width: 100%; |
|||
height: 300px; |
|||
overflow: hidden; |
|||
overflow-x: auto; |
|||
text-align: left; |
|||
.condition{ |
|||
width: 150px; |
|||
height: 300px; |
|||
border: 1px solid #CCCCCC; |
|||
background-color: #FEFEE1; |
|||
} |
|||
} |
|||
.scrollbar-flex-content { |
|||
display: flex; |
|||
} |
|||
.scrollbar-demo-item { |
|||
flex-shrink: 0; |
|||
display: relative; |
|||
width: 150px; |
|||
height: 300px; |
|||
|
|||
background-color: #FEFEE1; |
|||
border: 1px solid #CCCCCC; |
|||
} |
|||
.form_box{ |
|||
height: 263px; |
|||
padding: 5px 2px; |
|||
} |
|||
.scrollbar-demo-items { |
|||
flex-shrink: 0; |
|||
display: relative; |
|||
width: 150px; |
|||
height: 300px; |
|||
background-color: #F2F9FC; |
|||
border: 1px solid #CCCCCC; |
|||
} |
|||
.wordecnters{ |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
} |
|||
.word_box{ |
|||
display: block; |
|||
width: 60%; |
|||
margin: 10px auto 0 auto; |
|||
} |
|||
.form_del{ |
|||
width: 100%; |
|||
height: 35px; |
|||
background-color: #FEF0F0; |
|||
border-top: 1px solid #CCCCCC; |
|||
color: #FF1E1E; |
|||
text-align: center; |
|||
font-size: 27px; |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-05 15:03:42 |
|||
@ 备注: 设置字段值 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { matrixTable,objectStruct } from '@/api/matrixapi/type' |
|||
import { getMatrixField } from '@/api/matrixapi'; |
|||
|
|||
const props = defineProps({ |
|||
userShow:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
matrixcont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const emits = defineEmits(["update:userShow"]); //父级元素 |
|||
const addFieldLoading = ref(false) |
|||
const tabelColumn = reactive<matrixTable[]>([]) |
|||
const tableList = reactive<any[]>([]) |
|||
const loading = ref(false) |
|||
/** |
|||
* 弹窗显示控制 |
|||
*/ |
|||
const field_is_Show = computed({ |
|||
get: () => props.userShow, |
|||
set: (val) => { |
|||
emits("update:userShow", val); |
|||
}, |
|||
}); |
|||
/** |
|||
* 关闭弹窗 |
|||
*/ |
|||
function handleCloseBox(){ |
|||
emits("update:userShow", false); |
|||
initData() |
|||
} |
|||
/** |
|||
* 初始化数据 |
|||
*/ |
|||
function initData(){ |
|||
} |
|||
/** |
|||
* 监听数据 |
|||
*/ |
|||
watch(() => props.userShow,() => { |
|||
if(props.userShow){ |
|||
getMatrixField({id:props.matrixcont.id}) |
|||
.then(({data})=>{ |
|||
console.log("监听数据---->",data) |
|||
data.factor.forEach(item=>{ |
|||
tabelColumn.push({ |
|||
id:item.id, |
|||
label:item.name, |
|||
prop:item.pinyin |
|||
}) |
|||
}) |
|||
data.outcome.forEach(item=>{ |
|||
tabelColumn.push({ |
|||
id:item.id, |
|||
label:item.name, |
|||
prop:item.pinyin |
|||
}) |
|||
}) |
|||
}) |
|||
.finally(()=>{ |
|||
var jks:objectStruct = {} |
|||
tabelColumn.forEach(item=>{ |
|||
jks[item.prop]=1 |
|||
}) |
|||
console.log("监听数据-->",jks) |
|||
}) |
|||
} |
|||
}); |
|||
/** |
|||
* 提交使用人 |
|||
*/ |
|||
function submitAddMatrixUser(){ |
|||
|
|||
} |
|||
</script> |
|||
<template> |
|||
<el-dialog v-model="field_is_Show" custom-class="dialog_box" title="矩阵数据维护" :before-close="handleCloseBox" width="80%"> |
|||
<el-table |
|||
v-loading="loading" |
|||
highlight-current-row |
|||
:data="tableList" |
|||
border |
|||
> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column v-for="(item,index) in tabelColumn" :key="index" align="center"> |
|||
<!-- 自定义表头 --> |
|||
<template #header> |
|||
{{item.label}} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" :loading="addFieldLoading" @click="submitAddMatrixUser" >确 定</el-button> |
|||
<el-button @click="handleCloseBox">取 消</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue