herenshan112
7 months ago
3 changed files with 261 additions and 5 deletions
@ -0,0 +1,243 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-04-23 16:03:59 |
|||
@ 备注: 矩阵数据处理 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { |
|||
searchMatrix, |
|||
matrixCont, |
|||
martixFieldStruct, |
|||
matrixInfo, |
|||
} from "@/api/matrixapi/type"; |
|||
import { getMatrixList, getMatrixField } from "@/api/matrixapi/index"; |
|||
|
|||
const props = defineProps({ |
|||
data: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
matrixid: 0, |
|||
matrixName: "", |
|||
factorid: 0, |
|||
factorName: "", |
|||
outcomeid: 0, |
|||
outcomeName: "", |
|||
list: [], |
|||
}; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
const emits = defineEmits(["update:data"]); //父级元素 |
|||
const infor = computed({ |
|||
get: () => props.data, |
|||
set: (val) => { |
|||
emits("update:data", val); |
|||
}, |
|||
}); |
|||
//搜索矩阵参数 |
|||
const searchArchiveQuery = reactive<searchMatrix>({ |
|||
page: 1, |
|||
pagesize: 10, |
|||
}); |
|||
const total = ref(0); //总记录数 |
|||
const farstId = ref<number>(0); |
|||
const loading = ref(true); |
|||
const loadingVal = ref(true); |
|||
const matrixContList = ref<matrixCont[]>(); |
|||
const factorList = ref<martixFieldStruct[]>(); |
|||
const outcomeList = ref<martixFieldStruct[]>(); |
|||
/** |
|||
* 获取矩阵列表 |
|||
*/ |
|||
const searchMatrixList = () => { |
|||
loading.value = true; |
|||
getMatrixList(searchArchiveQuery) |
|||
.then(({ data }) => { |
|||
console.log("获取矩阵列表->", data); |
|||
matrixContList.value = data.list; |
|||
total.value = data.total; |
|||
if (data.list.length > 0) { |
|||
farstId.value = data.list[0].id * 1; |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
loading.value = false; |
|||
if (infor.value.matrix.matrixid != 0) { |
|||
gainMatrixNeed(infor.value.matrix.matrixid); |
|||
} else { |
|||
infor.value.matrix.matrixid = farstId.value; |
|||
gainMatrixNeed(farstId.value); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
//获取矩阵相关字段 |
|||
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) { |
|||
if (infor.value.matrix.factorid == 0) { |
|||
infor.value.matrix.factorid = data.factor[0].id * 1; |
|||
infor.value.matrix.factorName = data.factor[0].name; |
|||
} |
|||
} |
|||
if (data.outcome.length > 0) { |
|||
if (infor.value.matrix.outcomeid == 0) { |
|||
infor.value.matrix.outcomeid = data.outcome[0].id * 1; |
|||
infor.value.matrix.outcomeName = data.outcome[0].name; |
|||
} |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
loadingVal.value = false; |
|||
}); |
|||
}; |
|||
|
|||
//选择矩阵 |
|||
const pickmatirval = (val: matrixCont) => { |
|||
infor.value.matrix.matrixid = val.id * 1; |
|||
infor.value.matrix.matrixName = val.name; |
|||
infor.value.matrix.list = []; |
|||
// emits("change", matrixIsClick); |
|||
gainMatrixNeed(val.id * 1); |
|||
}; |
|||
onMounted(() => { |
|||
console.log("初始数据加载---->", infor); |
|||
searchMatrixList(); |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-04-23 13:22:57 |
|||
@ 功能: 判断当前选择的内容 |
|||
*/ |
|||
const judgeIsTrue = (val: number) => { |
|||
let isTrue = false; |
|||
if (infor.value.matrix.list && infor.value.matrix.list.length > 0) { |
|||
infor.value.matrix.list.forEach((item: any) => { |
|||
if (item.outcomeid == val) { |
|||
isTrue = true; |
|||
} |
|||
}); |
|||
} |
|||
return isTrue; |
|||
}; |
|||
|
|||
//选择矩阵值 |
|||
const pickval = (val: martixFieldStruct) => { |
|||
infor.value.matrix.outcomeid = val.id * 1; |
|||
infor.value.matrix.outcomeName = val.name; |
|||
let isAdd = true; |
|||
infor.value.matrix.list.forEach((item: any, index: number) => { |
|||
if (item.outcomeid == val.id * 1) { |
|||
isAdd = false; |
|||
infor.value.matrix.list.splice(index, 1); |
|||
} |
|||
}); |
|||
if (isAdd) { |
|||
infor.value.matrix.list.push({ |
|||
outcomeid: val.id * 1, |
|||
outcomeName: val.name, |
|||
}); |
|||
} |
|||
// emits("change", infor.value.matrix); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-divider content-position="left">矩阵选项</el-divider> |
|||
<el-descriptions |
|||
title="" |
|||
direction="vertical" |
|||
:column="2" |
|||
:size="size" |
|||
border |
|||
class="suojin" |
|||
> |
|||
<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="infor.matrix.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="infor.matrix.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="judgeIsTrue(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> |
|||
</div> |
|||
</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; |
|||
} |
|||
} |
|||
.suojin { |
|||
padding: 0px 20px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue