306 lines
8.3 KiB
Vue
306 lines
8.3 KiB
Vue
<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>
|