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