7 changed files with 317 additions and 26 deletions
@ -0,0 +1,215 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-10-28 13:56:34 |
|||
@ 备注: 矩阵选项 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { searchMatrix,matrixCont,martixFieldStruct,matrixInfo } from '@/api/matrixapi/type' |
|||
import { getMatrixList,getMatrixField } from '@/api/matrixapi/index' |
|||
|
|||
|
|||
const props = defineProps({ |
|||
isshow:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
data: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
"matrixid":0, |
|||
"matrixName":"", |
|||
"factorid":0, |
|||
"factorName":"", |
|||
"outcomeid":0, |
|||
"outcomeName":"", |
|||
} |
|||
} |
|||
}, |
|||
}) |
|||
const emits = defineEmits(["update:isshow","change"]); //父级元素 |
|||
const isShow = computed({ |
|||
get: () => props.isshow, |
|||
set: (val) => { |
|||
emits("update:isshow", val); |
|||
}, |
|||
}); |
|||
const loading = ref(true); |
|||
const loadingVal = ref(true); |
|||
const matrixContList = ref<matrixCont[]>(); |
|||
const matrixIsClick = reactive<matrixInfo>({ |
|||
matrixid:0, |
|||
factorid:0, |
|||
outcomeid:0, |
|||
matrixName:"", |
|||
factorName:"", |
|||
outcomeName:"", |
|||
}); |
|||
//执行监听 |
|||
watch(() => props.isshow,(val:any) => { |
|||
if(val){ |
|||
// console.log("执行监听") |
|||
searchMatrixList(); |
|||
|
|||
matrixIsClick.matrixid = props.data.matrixid; |
|||
matrixIsClick.matrixName = props.data.matrixName; |
|||
matrixIsClick.factorid = props.data.factorid; |
|||
matrixIsClick.factorName = props.data.factorName; |
|||
matrixIsClick.outcomeid = props.data.outcomeid; |
|||
matrixIsClick.outcomeName = props.data.outcomeName; |
|||
} |
|||
}) |
|||
//行政组织树对照值 |
|||
const searchArchiveQuery = reactive<searchMatrix>({ |
|||
page:1, |
|||
pagesize:10 |
|||
}) |
|||
const total = ref(0); //总记录数 |
|||
const farstId = ref<number>(0) |
|||
/** |
|||
* 获取矩阵列表 |
|||
*/ |
|||
function searchMatrixList(){ |
|||
loading.value = true |
|||
// console.log("值改变---->",matrixIsClick) |
|||
getMatrixList(searchArchiveQuery) |
|||
.then(({ data })=>{ |
|||
// console.log("获取矩阵列表->",data) |
|||
matrixContList.value = data.list |
|||
total.value = data.total |
|||
if(data.list.length > 0){ |
|||
farstId.val = data.list[0].id*1 |
|||
// matrixIsClick.matrixid = data.list[0].id*1 |
|||
// matrixIsClick.matrixName = data.list[0].name |
|||
} |
|||
}).finally(()=>{ |
|||
loading.value = false |
|||
gainMatrixNeed(farstId.val); |
|||
}) |
|||
} |
|||
const factorList = ref<martixFieldStruct[]>() |
|||
const outcomeList = ref<martixFieldStruct[]>() |
|||
//获取矩阵相关字段 |
|||
const gainMatrixNeed = (val:any) =>{ |
|||
loadingVal.value = true |
|||
getMatrixField({id:val*1}) |
|||
.then(({data})=>{ |
|||
console.log("监听数据---->",data) |
|||
factorList.value = data.factor |
|||
outcomeList.value = data.outcome |
|||
if(data.factor.length>0){ |
|||
// matrixIsClick.factorid = data.factor[0].id*1 |
|||
// matrixIsClick.factorName = data.factor[0].name |
|||
} |
|||
if(data.outcome.length>0){ |
|||
// matrixIsClick.outcomeid = data.outcome[0].id*1 |
|||
// matrixIsClick.outcomeName = data.outcome[0].name |
|||
} |
|||
}) |
|||
.finally(()=>{ |
|||
loadingVal.value = false |
|||
}) |
|||
} |
|||
//选择矩阵 |
|||
const pickmatirval = (val:matrixCont) =>{ |
|||
matrixIsClick.matrixid = val.id*1 |
|||
matrixIsClick.matrixName = val.name |
|||
gainMatrixNeed(val.id*1); |
|||
} |
|||
//选择矩阵值 |
|||
const pickval = (val:martixFieldStruct) =>{ |
|||
matrixIsClick.outcomeid = val.id*1 |
|||
matrixIsClick.outcomeName = val.name |
|||
} |
|||
//选择条件 |
|||
const pickSelect = (val:any) =>{ |
|||
factorList.value.forEach(item=>{ |
|||
if(item.id==val){ |
|||
matrixIsClick.factorid = item.id*1 |
|||
matrixIsClick.factorName = item.name |
|||
} |
|||
}) |
|||
} |
|||
watch(matrixIsClick,(val:any) => { |
|||
// console.log("值改变---->",val) |
|||
emits("change", val); |
|||
}) |
|||
onMounted(()=>{ |
|||
matrixIsClick.matrixid = props.data.matrixid; |
|||
matrixIsClick.matrixName = props.data.matrixName; |
|||
matrixIsClick.factorid = props.data.factorid; |
|||
matrixIsClick.factorName = props.data.factorName; |
|||
matrixIsClick.outcomeid = props.data.outcomeid; |
|||
matrixIsClick.outcomeName = props.data.outcomeName; |
|||
searchMatrixList(); |
|||
|
|||
}) |
|||
</script> |
|||
<template> |
|||
<el-descriptions |
|||
v-if="isShow" |
|||
title="权限矩阵" |
|||
direction="vertical" |
|||
:column="2" |
|||
:size="size" |
|||
border |
|||
> |
|||
<el-descriptions-item label="可用矩阵" width="50%"> |
|||
<el-row v-loading="loading"> |
|||
<el-col :span="24" class="materBody"> |
|||
<ul> |
|||
<li v-for="item in matrixContList" :key="item.id" :class="matrixIsClick.matrixid==item.id?'active':''" @click="pickmatirval(item)"> |
|||
<el-text class="mx-1">{{item.name}}</el-text> <el-text class="mx-1">{{item.orgname}}</el-text> |
|||
</li> |
|||
</ul> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-pagination v-model:total="total" v-model:current-page="searchArchiveQuery.page" small layout="prev, pager, next" :page-size="searchArchiveQuery.pagesize" :pager-count="5" /> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="矩阵选项" width="50%"> |
|||
<el-row v-loading="loadingVal"> |
|||
<el-col :span="24"> |
|||
<el-select v-model="matrixIsClick.factorid" filterable placeholder="Select" style="width:100%" @change="pickSelect"> |
|||
<el-option |
|||
:key="0" |
|||
label="请选择" |
|||
:value="0" |
|||
/> |
|||
<el-option |
|||
v-for="item in factorList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-col> |
|||
<el-col :span="24" class="materBody"> |
|||
<ul> |
|||
<li v-for="item in outcomeList" :key="item.id" :class="matrixIsClick.outcomeid==item.id?'active':''" @click="pickval(item)"> |
|||
<el-text class="mx-1">{{item.name}}</el-text> <el-text class="mx-1">{{}}{{item.pinyin}}</el-text> |
|||
</li> |
|||
</ul> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.materBody{ |
|||
padding:5px 0 5px 0; |
|||
|
|||
li{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
cursor:pointer; |
|||
} |
|||
li.active span { |
|||
color:#409EFF; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue