107 lines
2.7 KiB
Vue
107 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div style="padding: 10px 15px;">
|
||
|
|
<div class="flex align-center just-between" style="width: 100%;">
|
||
|
|
<div class="searchToolTitle">
|
||
|
|
{{ title }}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<el-button type="primary" plain @click="handleClose">关闭</el-button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-for="(item, index) in model" :key="index">
|
||
|
|
<div class="searchTsubTitle">{{ data[item.value] }}</div>
|
||
|
|
<formNewModel v-model="item.model" :formList="item.inputs" ref="elform" :rules="rules" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive, toRaw, computed, watch, nextTick, onMounted,getCurrentInstance } from "vue";
|
||
|
|
import formNewModel from "./formNewModel.vue"
|
||
|
|
import emitter from "@/utils/eventBus.js";
|
||
|
|
const { proxy } = getCurrentInstance()
|
||
|
|
const rules = ref([])
|
||
|
|
const elform = ref()
|
||
|
|
const props = defineProps({
|
||
|
|
listData: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}, title: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
const data = {
|
||
|
|
10: "实体识别分析",
|
||
|
|
20: "事件识别分析",
|
||
|
|
30: "关系识别分析",
|
||
|
|
40: "特征识别分析",
|
||
|
|
}
|
||
|
|
const model = ref()
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
const json =props.listData ;
|
||
|
|
const jsonString = JSON.parse(json);
|
||
|
|
if (jsonString) {
|
||
|
|
const jsonObject = jsonString;
|
||
|
|
console.log(jsonObject);
|
||
|
|
model.value = jsonObject.reduce((acc, cur) => {
|
||
|
|
const key = Object.keys(cur)[0];
|
||
|
|
const prefix = key.substring(0, 2);
|
||
|
|
if (!acc[prefix] && prefix !== '50' && prefix !== '60') {
|
||
|
|
acc[prefix] = {
|
||
|
|
inputs: [],
|
||
|
|
model: {},
|
||
|
|
value: prefix
|
||
|
|
};
|
||
|
|
}
|
||
|
|
if (prefix === '50' || prefix === '60') {
|
||
|
|
acc[10].inputs.push({ label: cur[key].name, prop: key, type: "input", width: "33%" });
|
||
|
|
acc[10].model[key] = cur[key].content? cur[key].content : '-';
|
||
|
|
} else {
|
||
|
|
acc[prefix].inputs.push({ label: cur[key].name, prop: key, type: "input", width: "33%" });
|
||
|
|
acc[prefix].model[key] = cur[key].content=='-'||cur[key].content==''||cur[key].content=='无'? '/':cur[key].content ;
|
||
|
|
}
|
||
|
|
return acc;
|
||
|
|
}, {});
|
||
|
|
} else {
|
||
|
|
model.value = []
|
||
|
|
proxy.$message({ type: "error", message: "解析失败" });
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const handleClose = () => {
|
||
|
|
emitter.emit('showDetails', true)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.searchToolTitle {
|
||
|
|
font-size: 18px;
|
||
|
|
font-family: 'verdana';
|
||
|
|
position: relative;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchToolTitle::after {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0px;
|
||
|
|
left: 0px;
|
||
|
|
width: 80px;
|
||
|
|
border-radius: 5px;
|
||
|
|
height: 4px;
|
||
|
|
background-color: #0386fb;
|
||
|
|
background: linear-gradient(90deg, #0aa1ff 2%, #ffffff 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchTsubTitle {
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: 'verdana';
|
||
|
|
color: #000;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
</style>
|