255 lines
6.2 KiB
Vue
255 lines
6.2 KiB
Vue
<template>
|
||
<div class="scenarios">
|
||
<div class="title">
|
||
<div></div>
|
||
<div>{{ props.refData.name }}</div>
|
||
<div></div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="items" v-show="data.length > 0">
|
||
<div class="item" v-for="(val, index) in data" :key="index">
|
||
<p>
|
||
<span>应用场景-{{ index + 1 }}</span>
|
||
<span></span>
|
||
</p>
|
||
<p>
|
||
<span>应用场景名称</span>
|
||
<span>{{ val.name }}</span>
|
||
</p>
|
||
<p>
|
||
<span>应用场景描述</span>
|
||
<span>{{ val.desc }}</span>
|
||
</p>
|
||
<p>
|
||
<span>应用场景图片</span>
|
||
<span>
|
||
<a-image :width="85" :height="60" :src="val.img" />
|
||
</span>
|
||
</p>
|
||
<div class="del">
|
||
<i class="delImg" @click="del(index)"></i>
|
||
<div @click="del(index)">删除</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="add">添加更多算法优势</div>
|
||
<div class="name">
|
||
<span>应用场景名称</span>
|
||
<a-input
|
||
v-model:value="value"
|
||
:maxlength="24"
|
||
placeholder="请填写应用场景名称_应用场景描述热词,不超过24个字符"
|
||
/>
|
||
</div>
|
||
<div class="dec">
|
||
<span>应用场景描述</span>
|
||
<a-textarea
|
||
v-model:value="value2"
|
||
:showCount="true"
|
||
:maxlength="200"
|
||
placeholder="请填写应用场景名称+应用场景场景+应用场景两点+应用场景作用"
|
||
/>
|
||
</div>
|
||
<div class="dec upload" :key="showKey">
|
||
<span>应用场景图片</span>
|
||
<upload
|
||
type="图片"
|
||
btnName="上传图片"
|
||
:maxCount="1"
|
||
:data="value3"
|
||
:list="[]"
|
||
:emitFlag="true"
|
||
tip="支持图片类型，大小不超过100M"
|
||
></upload>
|
||
</div>
|
||
<div class="submit">
|
||
<a-button type="primary" @click="add()">提交</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, defineProps } from 'vue'
|
||
import mybus from '@/myplugins/mybus'
|
||
import { message } from 'ant-design-vue'
|
||
import upload from '@/views/components/upload'
|
||
const props = defineProps({
|
||
refData: { type: Object, default: null },
|
||
dataFrom: { type: Array, default: null },
|
||
})
|
||
const value = ref('')
|
||
const value2 = ref('')
|
||
const value3 = ref({ note1: '' })
|
||
const data = ref([])
|
||
const showKey = ref(0)
|
||
// const fileList = ref([])
|
||
if (props.dataFrom) {
|
||
console.log(props.dataFrom)
|
||
props.dataFrom.infoList.forEach((item) => {
|
||
if (item.attrType === props.refData.name) {
|
||
data.value = JSON.parse(item.attrValue)
|
||
}
|
||
})
|
||
}
|
||
const add = () => {
|
||
if (
|
||
value.value.length > 0 &&
|
||
value2.value.length > 0 &&
|
||
value3.value.note1.length > 0
|
||
) {
|
||
data.value.push({
|
||
name: value.value,
|
||
desc: value2.value,
|
||
img: value3.value.note1,
|
||
})
|
||
mybus.emit('chageDataFrom', {
|
||
attrType: props.refData.name,
|
||
attrValue: JSON.stringify(data.value),
|
||
delFlag: 0,
|
||
})
|
||
value.value = ''
|
||
value2.value = ''
|
||
value3.value.note1 = ''
|
||
showKey.value++
|
||
} else {
|
||
message.warning('请填写完整')
|
||
}
|
||
}
|
||
const del = (index) => {
|
||
data.value.splice(index, 1)
|
||
mybus.emit('chageDataFrom', {
|
||
attrType: props.refData.name,
|
||
attrValue: JSON.stringify(data.value),
|
||
delFlag: 0,
|
||
})
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.scenarios {
|
||
height: 680px;
|
||
overflow: scroll;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 50px 100px 25px;
|
||
& > div {
|
||
width: 100%;
|
||
}
|
||
.title {
|
||
color: #333333;
|
||
font-size: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 25px;
|
||
div:first-child,
|
||
div:last-child {
|
||
width: 265px;
|
||
height: 1px;
|
||
background: #f0f0f0;
|
||
}
|
||
div:nth-child(2) {
|
||
margin: 0 30px;
|
||
}
|
||
}
|
||
.main {
|
||
margin-top: 25px;
|
||
.items {
|
||
background: #fafafa;
|
||
padding: 10px;
|
||
p {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
span:nth-of-type(1) {
|
||
width: 200px;
|
||
}
|
||
span:nth-of-type(2) {
|
||
width: 100%;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
.del {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.delImg {
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 18px;
|
||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||
margin-right: 5px;
|
||
}
|
||
div {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.add {
|
||
margin-top: 10px;
|
||
font-size: 16px;
|
||
color: #007efb;
|
||
}
|
||
.name,
|
||
.dec {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
span {
|
||
width: 120px;
|
||
}
|
||
:deep(.ant-input) {
|
||
resize: none;
|
||
width: 570px;
|
||
}
|
||
:deep(.ant-input-textarea) {
|
||
width: 570px;
|
||
}
|
||
:deep(.ant-radio-group) {
|
||
width: 570px;
|
||
}
|
||
:deep(.ant-input-number) {
|
||
width: 200px;
|
||
}
|
||
.ant-btn {
|
||
width: 100px;
|
||
height: 30px;
|
||
text-align: center;
|
||
background: #d9ebff;
|
||
color: #0087ff;
|
||
border: 1px solid #0087ff;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
.upload span:nth-of-type(2) {
|
||
width: unset;
|
||
}
|
||
.submit {
|
||
margin-top: 40px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.ant-btn {
|
||
width: 80px;
|
||
height: 28px;
|
||
text-align: center;
|
||
background: #d9ebff;
|
||
color: #0087ff;
|
||
border: 1px solid #0087ff;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.ant-image-img) {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
// .scenarios::-webkit-scrollbar {
|
||
// display: none;
|
||
// }
|
||
</style>
|