no message
This commit is contained in:
a0049873
parent
b23bd15791
commit
96993e040f
|
|
@ -1,214 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="advantage">
|
|
||||||
<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>
|
|
||||||
<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">
|
|
||||||
<span>算法优势图标</span>
|
|
||||||
<div>
|
|
||||||
<a-image :src=""></a-image>
|
|
||||||
</div>
|
|
||||||
</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'
|
|
||||||
const props = defineProps({
|
|
||||||
refData: { type: Object, default: null },
|
|
||||||
dataFrom: { type: Array, default: null },
|
|
||||||
})
|
|
||||||
const value = ref('')
|
|
||||||
const value2 = ref('')
|
|
||||||
const data = 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) {
|
|
||||||
data.value.push({
|
|
||||||
name: value.value,
|
|
||||||
desc: value2.value,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: props.refData.name,
|
|
||||||
attrValue: JSON.stringify(data.value),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
value.value = ''
|
|
||||||
value2.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>
|
|
||||||
.advantage {
|
|
||||||
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: 150px;
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .advantage::-webkit-scrollbar {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,426 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="deployment-use">
|
|
||||||
<div class="first" v-for="title in props.refData.children" :key="title.id">
|
|
||||||
<div class="top">
|
|
||||||
<div></div>
|
|
||||||
<div>{{ title.name }}</div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<template v-if="title.name == '使用方式'">
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="form" v-for="item in title.children" :key="item.id">
|
|
||||||
<span>{{ item.name }}</span>
|
|
||||||
<a-input
|
|
||||||
v-if="item.type == 'input'"
|
|
||||||
v-model:value="item.note1"
|
|
||||||
:placeholder="'请输入' + item.name"
|
|
||||||
/>
|
|
||||||
<a-radio-group
|
|
||||||
v-else-if="item.type == 'radio'"
|
|
||||||
v-model:value="item.note1"
|
|
||||||
:options="item.options"
|
|
||||||
/>
|
|
||||||
<a-textarea
|
|
||||||
v-else-if="item.type == 'textArea'"
|
|
||||||
v-model:value="item.note1"
|
|
||||||
:showCount="true"
|
|
||||||
:maxlength="200"
|
|
||||||
placeholder="请输入试用描述"
|
|
||||||
/>
|
|
||||||
<upload
|
|
||||||
v-else-if="item.type == 'image'"
|
|
||||||
type="图片"
|
|
||||||
btnName="上传图片"
|
|
||||||
:maxCount="1"
|
|
||||||
:data="item"
|
|
||||||
:list="props.imgList"
|
|
||||||
tip="支持图片类型，大小不超过100M"
|
|
||||||
></upload>
|
|
||||||
<upload
|
|
||||||
v-else-if="item.type == 'file'"
|
|
||||||
type="文件"
|
|
||||||
btnName="上传附件"
|
|
||||||
:maxCount="1"
|
|
||||||
:data="item"
|
|
||||||
:list="props.fileList"
|
|
||||||
tip="支持文件类型，大小不超过100M"
|
|
||||||
></upload>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="title.name == '计费标准信息'">
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="items" v-show="data.freightBasis.length > 0">
|
|
||||||
<div
|
|
||||||
class="item"
|
|
||||||
v-for="(val, index) in data.freightBasis"
|
|
||||||
:key="'计费标准信息' + index"
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
<span>计费标准信息-{{ index + 1 }}</span>
|
|
||||||
<span></span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span>计费方式</span>
|
|
||||||
<span>{{ val.type }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span>计费标准</span>
|
|
||||||
<span>{{ val.price + '元' }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span>计费标准描述</span>
|
|
||||||
<span>{{ val.desc }}</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="form">
|
|
||||||
<span>计费方式</span>
|
|
||||||
<a-radio-group v-model:value="type" :options="plainOptions" />
|
|
||||||
</div>
|
|
||||||
<div class="form">
|
|
||||||
<span>计费标准</span>
|
|
||||||
<!-- :formatter="limitNumber"
|
|
||||||
:parser="limitNumber" -->
|
|
||||||
<a-input-number
|
|
||||||
v-model:value="price"
|
|
||||||
:min="0"
|
|
||||||
:max="9999"
|
|
||||||
:step="0.01"
|
|
||||||
string-mode
|
|
||||||
placeholder="请填写计费标准，单位为元"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form">
|
|
||||||
<span>计费标准描述</span>
|
|
||||||
<a-textarea
|
|
||||||
v-model:value="desc"
|
|
||||||
:showCount="true"
|
|
||||||
:maxlength="200"
|
|
||||||
placeholder="请填写计费标准描述"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="submit">
|
|
||||||
<a-button type="primary" @click="add()">提交</a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="title.name == '常见问题'">
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="items" v-show="data.commonProblem.length > 0">
|
|
||||||
<div
|
|
||||||
class="item"
|
|
||||||
v-for="(val, index) in data.commonProblem"
|
|
||||||
:key="'常见问题' + index"
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
<span>常见问题-{{ index + 1 }}</span>
|
|
||||||
<span></span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span>问题</span>
|
|
||||||
<span>{{ val.question }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span>答复</span>
|
|
||||||
<span>{{ val.answer }}</span>
|
|
||||||
</p>
|
|
||||||
<div class="del">
|
|
||||||
<i class="delImg" @click="del2(index)"></i>
|
|
||||||
<div @click="del2(index)">删除</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="add">添加更多常见问题</div>
|
|
||||||
<div class="form">
|
|
||||||
<span>问题</span>
|
|
||||||
<a-textarea
|
|
||||||
v-model:value="question"
|
|
||||||
:showCount="true"
|
|
||||||
:maxlength="200"
|
|
||||||
placeholder="请输入问题"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form">
|
|
||||||
<span>答复</span>
|
|
||||||
<a-textarea
|
|
||||||
v-model:value="answer"
|
|
||||||
:showCount="true"
|
|
||||||
:maxlength="200"
|
|
||||||
placeholder="请输入答复"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="submit">
|
|
||||||
<a-button type="primary" @click="add2()">提交</a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, defineProps, watch } from 'vue'
|
|
||||||
import mybus from '@/myplugins/mybus'
|
|
||||||
import upload from '@/views/components/upload'
|
|
||||||
import { message } from 'ant-design-vue'
|
|
||||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
|
||||||
// import { baseURL } from '@/config'
|
|
||||||
const props = defineProps({
|
|
||||||
refData: { type: Object, default: null },
|
|
||||||
dataFrom: { type: Array, default: null },
|
|
||||||
fileList: { type: Array, default: null },
|
|
||||||
imgList: { type: Array, default: null },
|
|
||||||
})
|
|
||||||
const data = ref({
|
|
||||||
list: [],
|
|
||||||
freightBasis: [],
|
|
||||||
commonProblem: [],
|
|
||||||
})
|
|
||||||
let arr = props.refData.children.filter((item) => item.name !== '常见问题')
|
|
||||||
data.value.list = []
|
|
||||||
arr.forEach((val) => {
|
|
||||||
val.children.forEach((item) => {
|
|
||||||
if (item.isLinkToDic === 'true' && item.linkValue) {
|
|
||||||
getCategoryTreePage({
|
|
||||||
page: 1,
|
|
||||||
limit: 20,
|
|
||||||
dictTypeId: item.linkValue,
|
|
||||||
deFlage: 0,
|
|
||||||
}).then((res) => {
|
|
||||||
// console.log(res.data.data)
|
|
||||||
if (item.type === 'radio') {
|
|
||||||
item.options = res.data.data.list.map((radio) => radio.dictLabel)
|
|
||||||
}
|
|
||||||
data.value.list.push(item)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
data.value.list.push(item)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
if (props.dataFrom) {
|
|
||||||
console.log(props.dataFrom, data.value.list)
|
|
||||||
props.dataFrom.infoList.forEach((item) => {
|
|
||||||
if (item.attrType === '计费标准信息') {
|
|
||||||
data.value.freightBasis = JSON.parse(item.attrValue)
|
|
||||||
} else if (item.attrType === '常见问题') {
|
|
||||||
data.value.commonProblem = JSON.parse(item.attrValue)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const type = ref('')
|
|
||||||
const price = ref('')
|
|
||||||
const desc = ref('')
|
|
||||||
const question = ref('')
|
|
||||||
const answer = ref('')
|
|
||||||
const plainOptions = ['一次性买断', '按调用次数', '按并发路数', '按年计费']
|
|
||||||
// const limitNumber = (value) => {
|
|
||||||
// if (typeof value === 'string') {
|
|
||||||
// return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
|
|
||||||
// } else if (typeof value === 'number') {
|
|
||||||
// return !isNaN(value) ? String(value).replace(/\./g, '') : 0
|
|
||||||
// } else {
|
|
||||||
// return 0
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
const add = () => {
|
|
||||||
if (type.value.length > 0 && price.value > 0 && desc.value.length > 0) {
|
|
||||||
data.value.freightBasis.push({
|
|
||||||
type: type.value,
|
|
||||||
price: price.value,
|
|
||||||
desc: desc.value,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: '计费标准信息',
|
|
||||||
attrValue: JSON.stringify(data.value.freightBasis),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
type.value = ''
|
|
||||||
price.value = ''
|
|
||||||
desc.value = ''
|
|
||||||
} else {
|
|
||||||
message.warning('请填写完整')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const add2 = () => {
|
|
||||||
if (question.value.length > 0 && answer.value.length > 0) {
|
|
||||||
data.value.commonProblem.push({
|
|
||||||
question: question.value,
|
|
||||||
answer: answer.value,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: '常见问题',
|
|
||||||
attrValue: JSON.stringify(data.value.commonProblem),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
question.value = ''
|
|
||||||
answer.value = ''
|
|
||||||
} else {
|
|
||||||
message.warning('请填写完整')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const del = (index) => {
|
|
||||||
data.value.freightBasis.splice(index, 1)
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: '计费标准信息',
|
|
||||||
attrValue: JSON.stringify(data.value.freightBasis),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const del2 = (index) => {
|
|
||||||
data.value.commonProblem.splice(index, 1)
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: '常见问题',
|
|
||||||
attrValue: JSON.stringify(data.value.commonProblem),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
watch(data.value.list, (newProps, oldProps) => {
|
|
||||||
console.log(newProps, oldProps)
|
|
||||||
newProps.forEach((val) => {
|
|
||||||
// console.log('数据发生改变==========>', val)
|
|
||||||
if (val.name === '服务接口' || val.name === '接口请求方式') {
|
|
||||||
mybus.emit('chageDataFromDwon', {
|
|
||||||
attrType: val.name,
|
|
||||||
attrValue: val.note1,
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: val.name,
|
|
||||||
attrValue: val.note1,
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.deployment-use {
|
|
||||||
height: 680px;
|
|
||||||
overflow: scroll;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 50px 100px 25px;
|
|
||||||
& > div {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 60px;
|
|
||||||
.top {
|
|
||||||
color: #333333;
|
|
||||||
font-size: 22px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
div:first-child,
|
|
||||||
div:last-child {
|
|
||||||
width: 245px;
|
|
||||||
height: 1px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
div:nth-child(2) {
|
|
||||||
margin: 0 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.form {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
span:first-child {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
:deep(.ant-input-textarea) {
|
|
||||||
width: 570px;
|
|
||||||
}
|
|
||||||
:deep(.ant-radio-group) {
|
|
||||||
width: 570px;
|
|
||||||
}
|
|
||||||
:deep(.ant-input-number) {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
:deep(.ant-input) {
|
|
||||||
resize: none;
|
|
||||||
width: 570px;
|
|
||||||
}
|
|
||||||
.ant-btn {
|
|
||||||
width: 100px;
|
|
||||||
height: 32px;
|
|
||||||
text-align: center;
|
|
||||||
background: #d9ebff;
|
|
||||||
color: #0087ff;
|
|
||||||
border: 1px solid #0087ff;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > div:nth-of-type(1) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .deployment-use::-webkit-scrollbar {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,452 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="essential-information">
|
|
||||||
<div class="title">
|
|
||||||
<div></div>
|
|
||||||
<div>基本信息</div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<div class="ceshi-class">
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in dataList"
|
|
||||||
:key="item.attrType"
|
|
||||||
:style="styleFunction(item.type, item.attrType)"
|
|
||||||
>
|
|
||||||
<a-form-item :label="item.attrType" v-if="item.type == 'input'">
|
|
||||||
<a-input
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="item.type == 'select' && item.attrType == '服务商'"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="item.type == 'select' && item.attrType == '服务商联系人'"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="
|
|
||||||
item.type == 'select' &&
|
|
||||||
item.attrType != '服务商' &&
|
|
||||||
item.attrType != '服务商联系人'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<a-select
|
|
||||||
style="width: 240px"
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
placeholder="请选择功能类型"
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
v-for="(itemSelect, indexSelect) in item.children"
|
|
||||||
:key="indexSelect"
|
|
||||||
:value="itemSelect.dictLabel"
|
|
||||||
>
|
|
||||||
{{ itemSelect.dictLabel }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item :label="item.attrType" v-if="item.type == 'radio'">
|
|
||||||
<a-radio-group v-model:value="dataList[index].attrValue">
|
|
||||||
<a-radio :value="'是'">是</a-radio>
|
|
||||||
<a-radio :value="'否'">否</a-radio>
|
|
||||||
</a-radio-group>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="item.type == 'checkBox' && item.attrType != '关联应用'"
|
|
||||||
:key="showKey"
|
|
||||||
>
|
|
||||||
<div class="application-Area" id="application-Area">
|
|
||||||
<div
|
|
||||||
v-for="(itemson, indexson) in item.children"
|
|
||||||
:key="indexson"
|
|
||||||
class="application-Area-son"
|
|
||||||
@click="ApplicationArea(itemson, index)"
|
|
||||||
:class="
|
|
||||||
applicationDataList.indexOf(itemson.dictLabel) != -1
|
|
||||||
? 'application-Area-down'
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ itemson.dictLabel }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item :label="item.attrType" v-if="item.type == 'textArea'">
|
|
||||||
<a-textarea
|
|
||||||
style="
|
|
||||||
width: 680px;
|
|
||||||
height: 100px;
|
|
||||||
max-height: 100px;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
"
|
|
||||||
show-count
|
|
||||||
:maxlength="200"
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
:placeholder="`请填写${item.attrType}`"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item :label="item.attrType" v-if="item.type == 'video'">
|
|
||||||
<upload
|
|
||||||
type="视频"
|
|
||||||
btnName="上传视频"
|
|
||||||
:maxCount="1"
|
|
||||||
:data="item"
|
|
||||||
:list="props.videoList"
|
|
||||||
tip="支持视频类型，大小不超过100M"
|
|
||||||
></upload>
|
|
||||||
</a-form-item>
|
|
||||||
<div
|
|
||||||
class="associated-application"
|
|
||||||
v-if="item.type == 'checkBox' && item.attrType == '关联应用'"
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
<span>关联应用</span>
|
|
||||||
<span>(可多选)</span>
|
|
||||||
：
|
|
||||||
</p>
|
|
||||||
<a-checkbox-group
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
name="checkboxgroup"
|
|
||||||
:options="plainOptions"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
|
||||||
import mybus from '@/myplugins/mybus'
|
|
||||||
import { ref, defineProps, watch } from 'vue'
|
|
||||||
import upload from '@/views/components/upload'
|
|
||||||
let dataList = ref([])
|
|
||||||
let applicationDataList = ref([])
|
|
||||||
let indexSwitch = ref()
|
|
||||||
//样式修改
|
|
||||||
function styleFunction(type, attrType) {
|
|
||||||
if (type == 'select' || type == 'radio') {
|
|
||||||
if (attrType == '服务商' || attrType == '服务商联系人') {
|
|
||||||
if (attrType == '服务商联系人') {
|
|
||||||
return 'display: inline-block;width: 45%;margin-left: 30px;'
|
|
||||||
} else {
|
|
||||||
return 'display: inline-block;width: 45%;'
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return 'display: inline-block;width: 50%;'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const props = defineProps({
|
|
||||||
refData: { type: Object, default: null },
|
|
||||||
videoList: { type: Array, default: null },
|
|
||||||
dataFrom: { type: Object, default: null },
|
|
||||||
})
|
|
||||||
//初始化字段
|
|
||||||
let showKey = ref(0)
|
|
||||||
console.log('props.refData', props.refData)
|
|
||||||
props.refData.children[0].children.map((item) => {
|
|
||||||
let object = ref({
|
|
||||||
attrType: item.name,
|
|
||||||
attrValue: '',
|
|
||||||
type: item.type,
|
|
||||||
children: [],
|
|
||||||
isLinkToDic: item.isLinkToDic,
|
|
||||||
linkValue: item.linkValue,
|
|
||||||
note1: item.note1,
|
|
||||||
})
|
|
||||||
dataList.value.push(object.value)
|
|
||||||
if (props.dataFrom.name) {
|
|
||||||
props.dataFrom.infoList.map((item) => {
|
|
||||||
dataList.value.map((itemson, index) => {
|
|
||||||
if (
|
|
||||||
item.attrType == itemson.attrType &&
|
|
||||||
itemson.attrType != '应用领域' &&
|
|
||||||
itemson.attrType != '关联应用' &&
|
|
||||||
itemson.attrType != '算法介绍视频'
|
|
||||||
) {
|
|
||||||
dataList.value[index].attrValue = item.attrValue
|
|
||||||
}
|
|
||||||
if (itemson.attrType == '算法介绍视频') {
|
|
||||||
dataList.value[index].attrValue = item.note1
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
item.attrType == itemson.attrType &&
|
|
||||||
itemson.attrType == '关联应用'
|
|
||||||
) {
|
|
||||||
dataList.value[index].attrValue = item.attrValue.split(';')
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
item.attrType == itemson.attrType &&
|
|
||||||
itemson.attrType == '应用领域'
|
|
||||||
) {
|
|
||||||
dataList.value[index].attrValue = item.attrValue.split(';')
|
|
||||||
console.log('1111111111111', dataList.value[index].attrValue)
|
|
||||||
applicationDataList.value = item.attrValue.split(';')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
dataList.value.map((item, index) => {
|
|
||||||
if (item.attrType.indexOf('名称') != -1) {
|
|
||||||
dataList.value[index].attrValue = props.dataFrom.name
|
|
||||||
}
|
|
||||||
if (item.attrType.indexOf('描述') != -1) {
|
|
||||||
dataList.value[index].attrValue = props.dataFrom.description
|
|
||||||
}
|
|
||||||
if (item.attrType.indexOf('共享条件') != -1) {
|
|
||||||
dataList.value[index].attrValue = props.dataFrom.shareCondition
|
|
||||||
}
|
|
||||||
if (item.attrType.indexOf('共享类型') != -1) {
|
|
||||||
dataList.value[index].attrValue = props.dataFrom.shareType
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
showKey.value++
|
|
||||||
console.log('dataList', dataList.value)
|
|
||||||
}
|
|
||||||
//筛选出下拉列表
|
|
||||||
})
|
|
||||||
dataList.value.map((item2, index) => {
|
|
||||||
if (item2.isLinkToDic == 'true') {
|
|
||||||
const params = {
|
|
||||||
page: 1,
|
|
||||||
limit: 20,
|
|
||||||
dictTypeId: item2.linkValue,
|
|
||||||
deFlage: 0,
|
|
||||||
}
|
|
||||||
getCategoryTreePage(params).then((res) => {
|
|
||||||
dataList.value[index].children = res.data.data.list
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
console.log('props', dataList.value)
|
|
||||||
const plainOptions = ['关联应用1', '关联应用2', '关联应用3']
|
|
||||||
//视频上传限制格式
|
|
||||||
//应用领域点击时间
|
|
||||||
function ApplicationArea(item, indexfather) {
|
|
||||||
console.log()
|
|
||||||
indexSwitch.value = applicationDataList.value.indexOf(item.dictLabel)
|
|
||||||
if (indexSwitch.value != -1) {
|
|
||||||
applicationDataList.value.splice(indexSwitch.value, 1)
|
|
||||||
dataList.value[indexfather].attrValue = applicationDataList.value
|
|
||||||
} else {
|
|
||||||
applicationDataList.value.push(item.dictLabel)
|
|
||||||
dataList.value[indexfather].attrValue = applicationDataList.value
|
|
||||||
console.log('applicationDataList.value2', applicationDataList.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
watch(
|
|
||||||
dataList,
|
|
||||||
() => {
|
|
||||||
dataList.value.map((item, index) => {
|
|
||||||
if (
|
|
||||||
(item.attrValue || item.note1) &&
|
|
||||||
item.attrType.indexOf('名称') == -1 &&
|
|
||||||
item.attrType.indexOf('描述') == -1 &&
|
|
||||||
item.attrType.indexOf('共享条件') == -1 &&
|
|
||||||
item.attrType.indexOf('共享类型') == -1
|
|
||||||
) {
|
|
||||||
if (item.attrType == '应用领域' || item.attrType == '关联应用') {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: item.attrType,
|
|
||||||
attrValue: item.attrValue.join(';'),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', datain.value)
|
|
||||||
} else if (item.attrType == '算法介绍视频') {
|
|
||||||
dataList.value[index].attrValue = item.note1
|
|
||||||
let datain = ref({
|
|
||||||
attrType: item.attrType,
|
|
||||||
attrValue: item.note1,
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', datain.value)
|
|
||||||
} else {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: item.attrType,
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', datain.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (item.attrValue && item.attrType.indexOf('名称') != -1) {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: '名称',
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFromDwon', datain.value)
|
|
||||||
}
|
|
||||||
if (item.attrValue && item.attrType.indexOf('描述') != -1) {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: '描述',
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFromDwon', datain.value)
|
|
||||||
}
|
|
||||||
if (item.attrValue && item.attrType.indexOf('共享条件') != -1) {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: '共享条件',
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFromDwon', datain.value)
|
|
||||||
}
|
|
||||||
if (item.attrValue && item.attrType.indexOf('共享类型') != -1) {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: '共享类型',
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFromDwon', datain.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.essential-information {
|
|
||||||
:deep(textarea) {
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
width: 100%;
|
|
||||||
height: 700px;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 50px;
|
|
||||||
.title {
|
|
||||||
color: #333333;
|
|
||||||
font-size: 22px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
div:first-child,
|
|
||||||
div:last-child {
|
|
||||||
width: 320px;
|
|
||||||
height: 1px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
div:nth-child(2) {
|
|
||||||
margin: 0 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
:deep(.ant-radio-wrapper) {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.ceshi-class {
|
|
||||||
// display: flex;
|
|
||||||
}
|
|
||||||
.overall-arrangement {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
:deep(.ant-radio-wrapper) {
|
|
||||||
width: unset;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
:deep(.ant-form-item-control-input) {
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.application-Area {
|
|
||||||
display: grid;
|
|
||||||
margin-top: -5px;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
||||||
.application-Area-son {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
width: 90px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 13px;
|
|
||||||
color: #333333;
|
|
||||||
background: #f5f5f5;
|
|
||||||
border: 1px #cccccc solid;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.application-Area-down {
|
|
||||||
background: #0087ff;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.upload-list-inline {
|
|
||||||
button {
|
|
||||||
height: 30px;
|
|
||||||
width: 100px;
|
|
||||||
border: 1px solid #bbd3ef;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #edf4fc;
|
|
||||||
color: #0087ff;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.associated-application {
|
|
||||||
p {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666666;
|
|
||||||
span:last-child {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(label) {
|
|
||||||
width: 140px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
// :deep(.ant-form-item-label) {
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// }
|
|
||||||
:deep(input) {
|
|
||||||
height: 44px;
|
|
||||||
border: 1px #d9d9d9 solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.ant-form-item {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
:deep(.ant-select-selector) {
|
|
||||||
height: 44px;
|
|
||||||
border: 1px #d9d9d9 solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 16px;
|
|
||||||
span {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(input::-webkit-input-placeholder) {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #cccccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .essential-information::-webkit-scrollbar {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,254 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,247 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="application-associated-components">
|
|
||||||
<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>{{ val.url }}</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>
|
|
||||||
<a-input
|
|
||||||
v-model:value="value3"
|
|
||||||
:maxlength="50"
|
|
||||||
placeholder="请填写关联组件地址,不超过50个字符"
|
|
||||||
/>
|
|
||||||
</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'
|
|
||||||
const props = defineProps({
|
|
||||||
refData: { type: Object, default: null },
|
|
||||||
dataFrom: { type: Array, default: null },
|
|
||||||
})
|
|
||||||
const value = ref('')
|
|
||||||
const value2 = ref('')
|
|
||||||
const value3 = ref('')
|
|
||||||
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.length > 0
|
|
||||||
) {
|
|
||||||
data.value.push({
|
|
||||||
name: value.value,
|
|
||||||
desc: value2.value,
|
|
||||||
url: value3.value,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: props.refData.name,
|
|
||||||
attrValue: JSON.stringify(data.value),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
value.value = ''
|
|
||||||
value2.value = ''
|
|
||||||
value3.value = ''
|
|
||||||
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>
|
|
||||||
.application-associated-components {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
// .application-associated-components::-webkit-scrollbar {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,305 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="deployment-use">
|
|
||||||
<div class="first" v-for="title in props.refData.children" :key="title.id">
|
|
||||||
<div class="top">
|
|
||||||
<div></div>
|
|
||||||
<div>{{ title.name }}</div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<template
|
|
||||||
v-if="
|
|
||||||
title.name == '部署' || title.name == '安全' || title.name == '服务商'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="form" v-for="item in title.children" :key="item.id">
|
|
||||||
<span>{{ item.name }}</span>
|
|
||||||
<a-input
|
|
||||||
v-if="item.type == 'input' || item.name === '服务商'"
|
|
||||||
v-model:value="item.note1"
|
|
||||||
:placeholder="'请输入' + item.name"
|
|
||||||
/>
|
|
||||||
<a-radio-group
|
|
||||||
v-else-if="item.type == 'radio'"
|
|
||||||
v-model:value="item.note1"
|
|
||||||
:options="item.options"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="title.name == '常见问题'">
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="items" v-show="data.commonProblem.length > 0">
|
|
||||||
<div
|
|
||||||
class="item"
|
|
||||||
v-for="(val, index) in data.commonProblem"
|
|
||||||
:key="'常见问题' + index"
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
<span>常见问题-{{ index + 1 }}</span>
|
|
||||||
<span></span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span>问题</span>
|
|
||||||
<span>{{ val.question }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span>答复</span>
|
|
||||||
<span>{{ val.answer }}</span>
|
|
||||||
</p>
|
|
||||||
<div class="del">
|
|
||||||
<i class="delImg" @click="del2(index)"></i>
|
|
||||||
<div @click="del2(index)">删除</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="add">添加更多常见问题</div>
|
|
||||||
<div class="form">
|
|
||||||
<span>问题</span>
|
|
||||||
<a-textarea
|
|
||||||
v-model:value="question"
|
|
||||||
:showCount="true"
|
|
||||||
:maxlength="200"
|
|
||||||
placeholder="请输入问题"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form">
|
|
||||||
<span>答复</span>
|
|
||||||
<a-textarea
|
|
||||||
v-model:value="answer"
|
|
||||||
:showCount="true"
|
|
||||||
:maxlength="200"
|
|
||||||
placeholder="请输入答复"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="submit">
|
|
||||||
<a-button type="primary" @click="add2()">提交</a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, defineProps, watch } from 'vue'
|
|
||||||
import mybus from '@/myplugins/mybus'
|
|
||||||
import { message } from 'ant-design-vue'
|
|
||||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
|
||||||
// import { baseURL } from '@/config'
|
|
||||||
const props = defineProps({
|
|
||||||
refData: { type: Object, default: null },
|
|
||||||
dataFrom: { type: Array, default: null },
|
|
||||||
fileList: { type: Array, default: null },
|
|
||||||
imgList: { type: Array, default: null },
|
|
||||||
})
|
|
||||||
const data = ref({
|
|
||||||
list: [],
|
|
||||||
freightBasis: [],
|
|
||||||
commonProblem: [],
|
|
||||||
})
|
|
||||||
let arr = props.refData.children.filter((item) => item.name !== '常见问题')
|
|
||||||
data.value.list = []
|
|
||||||
arr.forEach((val) => {
|
|
||||||
val.children.forEach((item) => {
|
|
||||||
if (item.isLinkToDic === 'true' && item.linkValue) {
|
|
||||||
getCategoryTreePage({
|
|
||||||
page: 1,
|
|
||||||
limit: 20,
|
|
||||||
dictTypeId: item.linkValue,
|
|
||||||
deFlage: 0,
|
|
||||||
}).then((res) => {
|
|
||||||
// console.log(res.data.data)
|
|
||||||
if (item.type === 'radio') {
|
|
||||||
item.options = res.data.data.list.map((radio) => radio.dictLabel)
|
|
||||||
}
|
|
||||||
data.value.list.push(item)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
data.value.list.push(item)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// console.log('1111111111111111111111111', props.refData, data.value.list)
|
|
||||||
if (props.dataFrom) {
|
|
||||||
console.log(props.dataFrom, data.value.list)
|
|
||||||
props.dataFrom.infoList.forEach((item) => {
|
|
||||||
if (item.attrType === '常见问题') {
|
|
||||||
data.value.commonProblem = JSON.parse(item.attrValue)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const question = ref('')
|
|
||||||
const answer = ref('')
|
|
||||||
const add2 = () => {
|
|
||||||
if (question.value.length > 0 && answer.value.length > 0) {
|
|
||||||
data.value.commonProblem.push({
|
|
||||||
question: question.value,
|
|
||||||
answer: answer.value,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: '常见问题',
|
|
||||||
attrValue: JSON.stringify(data.value.commonProblem),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
question.value = ''
|
|
||||||
answer.value = ''
|
|
||||||
} else {
|
|
||||||
message.warning('请填写完整')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const del2 = (index) => {
|
|
||||||
data.value.commonProblem.splice(index, 1)
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: '常见问题',
|
|
||||||
attrValue: JSON.stringify(data.value.commonProblem),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
watch(data.value.list, (newProps, oldProps) => {
|
|
||||||
console.log(newProps, oldProps)
|
|
||||||
newProps.forEach((val) => {
|
|
||||||
console.log('数据发生改变==========>', val)
|
|
||||||
if (
|
|
||||||
val.name === '共享条件' ||
|
|
||||||
val.name === '共享类型' ||
|
|
||||||
val.name === '访问地址'
|
|
||||||
) {
|
|
||||||
mybus.emit('chageDataFromDwon', {
|
|
||||||
attrType: val.name,
|
|
||||||
attrValue: val.note1,
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
mybus.emit('chageDataFrom', {
|
|
||||||
attrType: val.name,
|
|
||||||
attrValue: val.note1,
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.deployment-use {
|
|
||||||
height: 680px;
|
|
||||||
overflow: scroll;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 50px 100px 25px;
|
|
||||||
& > div {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 60px;
|
|
||||||
.top {
|
|
||||||
color: #333333;
|
|
||||||
font-size: 22px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
div:first-child,
|
|
||||||
div:last-child {
|
|
||||||
width: 245px;
|
|
||||||
height: 1px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
div:nth-child(2) {
|
|
||||||
margin: 0 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.form {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
span:first-child {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
:deep(.ant-input-textarea) {
|
|
||||||
width: 570px;
|
|
||||||
}
|
|
||||||
:deep(.ant-radio-group) {
|
|
||||||
width: 570px;
|
|
||||||
}
|
|
||||||
:deep(.ant-input-number) {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
:deep(.ant-input) {
|
|
||||||
resize: none;
|
|
||||||
width: 570px;
|
|
||||||
}
|
|
||||||
.ant-btn {
|
|
||||||
width: 100px;
|
|
||||||
height: 32px;
|
|
||||||
text-align: center;
|
|
||||||
background: #d9ebff;
|
|
||||||
color: #0087ff;
|
|
||||||
border: 1px solid #0087ff;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > div:nth-of-type(1) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .deployment-use::-webkit-scrollbar {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,491 +0,0 @@
|
||||||
<!--
|
|
||||||
* @Author: hisense.liangjunhua
|
|
||||||
* @Date: 2022-06-13 10:22:27
|
|
||||||
* @LastEditors: hisense.liangjunhua
|
|
||||||
* @LastEditTime: 2022-06-13 14:31:19
|
|
||||||
* @Description: 应用上架-基本信息
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="application-essential-information">
|
|
||||||
<div class="title">
|
|
||||||
<div></div>
|
|
||||||
<div>基本信息</div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<div class="ceshi-class">
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in dataList"
|
|
||||||
:key="item.attrType"
|
|
||||||
:style="styleFunction(item.type, item.attrType)"
|
|
||||||
>
|
|
||||||
<a-form-item :label="item.attrType" v-if="item.type == 'input'">
|
|
||||||
<a-input
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="item.type == 'select' && item.attrType == '归属部门'"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model:value="deptName"
|
|
||||||
disabled
|
|
||||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="item.type == 'select' && item.attrType == '部门联系人'"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="
|
|
||||||
item.type == 'select' &&
|
|
||||||
item.attrType != '归属部门' &&
|
|
||||||
item.attrType != '部门联系人'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<a-select
|
|
||||||
style="width: 240px"
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
placeholder="请选择功能类型"
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
v-for="(itemSelect, indexSelect) in item.children"
|
|
||||||
:key="indexSelect"
|
|
||||||
:value="itemSelect.dictLabel"
|
|
||||||
>
|
|
||||||
{{ itemSelect.dictLabel }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="item.type == 'checkBox' && item.attrType != '发布端'"
|
|
||||||
:key="showKey"
|
|
||||||
>
|
|
||||||
<div class="application-Area" id="application-Area">
|
|
||||||
<div
|
|
||||||
v-for="(itemson, indexson) in item.children"
|
|
||||||
:key="indexson"
|
|
||||||
class="application-Area-son"
|
|
||||||
@click="ApplicationArea(itemson, index)"
|
|
||||||
:class="
|
|
||||||
applicationDataList.indexOf(itemson.dictLabel) != -1
|
|
||||||
? 'application-Area-down'
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
>
|
|
||||||
{{ itemson.dictLabel }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label="item.attrType"
|
|
||||||
v-if="item.type == 'checkBox' && item.attrType == '发布端'"
|
|
||||||
:key="showKey"
|
|
||||||
>
|
|
||||||
<a-checkbox-group
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
name="checkboxgroup"
|
|
||||||
:options="plainOptions"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item :label="item.attrType" v-if="item.type == 'textArea'">
|
|
||||||
<a-textarea
|
|
||||||
style="
|
|
||||||
width: 680px;
|
|
||||||
height: 100px;
|
|
||||||
max-height: 100px;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
"
|
|
||||||
show-count
|
|
||||||
:maxlength="200"
|
|
||||||
v-model:value="dataList[index].attrValue"
|
|
||||||
:placeholder="`请填写${item.attrType}`"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item :label="item.attrType" v-if="item.type == 'video'">
|
|
||||||
<upload
|
|
||||||
type="视频"
|
|
||||||
btnName="上传视频"
|
|
||||||
:maxCount="1"
|
|
||||||
:data="item"
|
|
||||||
:list="props.videoList"
|
|
||||||
tip="支持视频类型，大小不超过100M"
|
|
||||||
></upload>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item :label="item.attrType" v-if="item.type == 'image'">
|
|
||||||
<upload
|
|
||||||
type="图片"
|
|
||||||
btnName="上传图片"
|
|
||||||
:maxCount="1"
|
|
||||||
:data="item"
|
|
||||||
:list="props.imgList"
|
|
||||||
tip="支持图片类型，大小不超过100M"
|
|
||||||
></upload>
|
|
||||||
</a-form-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
|
||||||
import mybus from '@/myplugins/mybus'
|
|
||||||
import { ref, defineProps, watch } from 'vue'
|
|
||||||
import upload from '@/views/components/upload'
|
|
||||||
import { getUser, getUserInfo } from '@/api/home'
|
|
||||||
let dataList = ref([])
|
|
||||||
let applicationDataList = ref([])
|
|
||||||
let indexSwitch = ref()
|
|
||||||
let plainOptions = ref([])
|
|
||||||
//样式修改
|
|
||||||
function styleFunction(type, attrType) {
|
|
||||||
if (type == 'select' || type == 'radio') {
|
|
||||||
if (attrType == '部门联系人' || attrType == '归属部门') {
|
|
||||||
if (attrType == '部门联系人') {
|
|
||||||
return 'display: inline-block;width: 45%;margin-left: 30px;'
|
|
||||||
} else {
|
|
||||||
return 'display: inline-block;width: 45%;'
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return 'display: inline-block;width: 50%;'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const props = defineProps({
|
|
||||||
refData: { type: Object, default: null },
|
|
||||||
videoList: { type: Array, default: null },
|
|
||||||
dataFrom: { type: Object, default: null },
|
|
||||||
imgList: { type: Array, default: null },
|
|
||||||
})
|
|
||||||
//初始化字段
|
|
||||||
let showKey = ref(0)
|
|
||||||
console.log('props.refData', props.imgList)
|
|
||||||
props.refData.children[0].children.map((item) => {
|
|
||||||
let object = ref({
|
|
||||||
attrType: item.name,
|
|
||||||
attrValue: '',
|
|
||||||
type: item.type,
|
|
||||||
children: [],
|
|
||||||
isLinkToDic: item.isLinkToDic,
|
|
||||||
linkValue: item.linkValue,
|
|
||||||
note1: item.note1,
|
|
||||||
})
|
|
||||||
dataList.value.push(object.value)
|
|
||||||
// console.log('dataList', dataList.value)
|
|
||||||
if (props.dataFrom.name) {
|
|
||||||
props.dataFrom.infoList.map((item) => {
|
|
||||||
dataList.value.map((itemson, index) => {
|
|
||||||
if (
|
|
||||||
item.attrType == itemson.attrType &&
|
|
||||||
itemson.attrType != '应用领域' &&
|
|
||||||
itemson.attrType != '发布端' &&
|
|
||||||
itemson.attrType != '应用展示视频' &&
|
|
||||||
itemson.attrType != '应用图片'
|
|
||||||
) {
|
|
||||||
dataList.value[index].attrValue = item.attrValue
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
itemson.attrType == '应用展示视频' ||
|
|
||||||
itemson.attrType == '应用图片'
|
|
||||||
) {
|
|
||||||
dataList.value[index].attrValue = item.note1
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
item.attrType == itemson.attrType &&
|
|
||||||
itemson.attrType == '发布端'
|
|
||||||
) {
|
|
||||||
dataList.value[index].attrValue = item.attrValue.split(';')
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
item.attrType == itemson.attrType &&
|
|
||||||
itemson.attrType == '应用领域'
|
|
||||||
) {
|
|
||||||
dataList.value[index].attrValue = item.attrValue.split(';')
|
|
||||||
console.log('1111111111111', dataList.value[index].attrValue)
|
|
||||||
applicationDataList.value = item.attrValue.split(';')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
dataList.value.map((item, index) => {
|
|
||||||
if (item.attrType.indexOf('名称') != -1) {
|
|
||||||
dataList.value[index].attrValue = props.dataFrom.name
|
|
||||||
}
|
|
||||||
if (item.attrType.indexOf('描述') != -1) {
|
|
||||||
dataList.value[index].attrValue = props.dataFrom.description
|
|
||||||
}
|
|
||||||
if (item.attrType == '部门联系人') {
|
|
||||||
dataList.value[index].attrValue = props.dataFrom.deptContacts
|
|
||||||
debugger
|
|
||||||
}
|
|
||||||
if (item.attrType == '部门联系人电话') {
|
|
||||||
dataList.value[index].attrValue = props.dataFrom.deptPhone
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
showKey.value++
|
|
||||||
}
|
|
||||||
//筛选出下拉列表
|
|
||||||
})
|
|
||||||
dataList.value.map((item2, index) => {
|
|
||||||
if (item2.isLinkToDic == 'true') {
|
|
||||||
const params = {
|
|
||||||
page: 1,
|
|
||||||
limit: 20,
|
|
||||||
dictTypeId: item2.linkValue,
|
|
||||||
deFlage: 0,
|
|
||||||
}
|
|
||||||
getCategoryTreePage(params).then((res) => {
|
|
||||||
dataList.value[index].children = res.data.data.list
|
|
||||||
if (item2.attrType == '发布端') {
|
|
||||||
dataList.value[index].children.map((item3) => {
|
|
||||||
plainOptions.value.push(item3.dictLabel)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
console.log('props', dataList.value)
|
|
||||||
//视频上传限制格式
|
|
||||||
//应用领域点击时间
|
|
||||||
function ApplicationArea(item, indexfather) {
|
|
||||||
indexSwitch.value = applicationDataList.value.indexOf(item.dictLabel)
|
|
||||||
if (indexSwitch.value != -1) {
|
|
||||||
applicationDataList.value.splice(indexSwitch.value, 1)
|
|
||||||
dataList.value[indexfather].attrValue = applicationDataList.value
|
|
||||||
} else {
|
|
||||||
applicationDataList.value.push(item.dictLabel)
|
|
||||||
dataList.value[indexfather].attrValue = applicationDataList.value
|
|
||||||
console.log('applicationDataList.value2', applicationDataList.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
watch(
|
|
||||||
dataList,
|
|
||||||
() => {
|
|
||||||
dataList.value.map((item, index) => {
|
|
||||||
if (
|
|
||||||
(item.attrValue || item.note1) &&
|
|
||||||
item.attrType.indexOf('名称') == -1 &&
|
|
||||||
item.attrType.indexOf('描述') == -1 &&
|
|
||||||
item.attrType.indexOf('部门联系人') == -1 &&
|
|
||||||
item.attrType.indexOf('部门联系人电话') == -1
|
|
||||||
) {
|
|
||||||
if (item.attrType == '应用领域' || item.attrType == '发布端') {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: item.attrType,
|
|
||||||
attrValue: item.attrValue.join(';'),
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', datain.value)
|
|
||||||
} else if (
|
|
||||||
item.attrType == '应用展示视频' ||
|
|
||||||
item.attrType == '应用图片'
|
|
||||||
) {
|
|
||||||
dataList.value[index].attrValue = item.note1
|
|
||||||
let datain = ref({
|
|
||||||
attrType: item.attrType,
|
|
||||||
attrValue: item.note1,
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', datain.value)
|
|
||||||
} else {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: item.attrType,
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
delFlag: 0,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFrom', datain.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (item.attrValue && item.attrType.indexOf('名称') != -1) {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: '名称',
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFromDwon', datain.value)
|
|
||||||
}
|
|
||||||
if (item.attrValue && item.attrType.indexOf('描述') != -1) {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: '描述',
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFromDwon', datain.value)
|
|
||||||
}
|
|
||||||
if (item.attrValue && item.attrType == '部门联系人') {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: '部门联系人',
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFromDwon', datain.value)
|
|
||||||
}
|
|
||||||
if (item.attrValue && item.attrType == '部门联系人电话') {
|
|
||||||
let datain = ref({
|
|
||||||
attrType: '部门联系人电话',
|
|
||||||
attrValue: item.attrValue,
|
|
||||||
})
|
|
||||||
mybus.emit('chageDataFromDwon', datain.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
//获取用户信息
|
|
||||||
let deptName = ref('')
|
|
||||||
const userxin = () => {
|
|
||||||
getUser().then((res) => {
|
|
||||||
getUserInfo(res.data.data.id).then((resson) => {
|
|
||||||
deptName.value = resson.data.data.deptName
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
userxin()
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.application-essential-information {
|
|
||||||
:deep(textarea) {
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
:deep(.ant-checkbox-inner) {
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
:deep(.ant-form-item-control) {
|
|
||||||
width: calc(100% - 140px);
|
|
||||||
}
|
|
||||||
width: 100%;
|
|
||||||
height: 700px;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 50px;
|
|
||||||
.title {
|
|
||||||
color: #333333;
|
|
||||||
font-size: 22px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
div:first-child,
|
|
||||||
div:last-child {
|
|
||||||
width: 320px;
|
|
||||||
height: 1px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
}
|
|
||||||
div:nth-child(2) {
|
|
||||||
margin: 0 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
:deep(.ant-radio-wrapper) {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.ceshi-class {
|
|
||||||
// display: flex;
|
|
||||||
}
|
|
||||||
.overall-arrangement {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
:deep(.ant-radio-wrapper) {
|
|
||||||
width: unset;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
:deep(.ant-form-item-control-input) {
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.application-Area {
|
|
||||||
display: grid;
|
|
||||||
margin-top: -5px;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
||||||
.application-Area-son {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
width: 90px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 13px;
|
|
||||||
color: #333333;
|
|
||||||
background: #f5f5f5;
|
|
||||||
border: 1px #cccccc solid;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.application-Area-down {
|
|
||||||
background: #0087ff;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.upload-list-inline {
|
|
||||||
button {
|
|
||||||
height: 30px;
|
|
||||||
width: 100px;
|
|
||||||
border: 1px solid #bbd3ef;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #edf4fc;
|
|
||||||
color: #0087ff;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.associated-application {
|
|
||||||
p {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666666;
|
|
||||||
span:last-child {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(label) {
|
|
||||||
width: 140px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
// :deep(.ant-form-item-label) {
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// }
|
|
||||||
:deep(input) {
|
|
||||||
height: 44px;
|
|
||||||
border: 1px #d9d9d9 solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.ant-form-item {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
:deep(.ant-select-selector) {
|
|
||||||
height: 44px;
|
|
||||||
border: 1px #d9d9d9 solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 16px;
|
|
||||||
span {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(input::-webkit-input-placeholder) {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #cccccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.essential-information::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,254 +0,0 @@
|
||||||
<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>
|
|
||||||
Loading…
Reference in New Issue