Compare commits
4 Commits
69211ab665
...
96993e040f
| Author | SHA1 | Date |
|---|---|---|
a0049873
|
96993e040f | |
|
a0049873
|
b23bd15791 | |
|
a0049873
|
b0c667eb00 | |
|
a0049873
|
f323016e40 |
Binary file not shown.
|
After Width: | Height: | Size: 590 B |
|
|
@ -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>
|
|
||||||
|
|
@ -230,17 +230,13 @@
|
||||||
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
|
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
|
||||||
router.push('/personalCenter')
|
router.push('/personalCenter')
|
||||||
}
|
}
|
||||||
onBeforeUnmount(() => {
|
|
||||||
console.log('卸载getSgcNum========================>')
|
|
||||||
mybus.off('getSgcNum')
|
|
||||||
})
|
|
||||||
const mynoticeNum = ref(0)
|
const mynoticeNum = ref(0)
|
||||||
// 我的消息
|
// 我的消息
|
||||||
const getMynotice = () => {
|
const getMynotice = () => {
|
||||||
mynotice({ page: 1, limit: 999, readStatus: 0 }).then((res) => {
|
mynotice({ page: 1, limit: 3, readStatus: 0 }).then((res) => {
|
||||||
console.log('我的消息', res.data.data)
|
console.log('我的消息', res.data.data)
|
||||||
mynoticeNum.value = res.data.data.total
|
mynoticeNum.value = res.data.data.total
|
||||||
mynoticeData.value = res.data.data.list.splice(0, 3)
|
mynoticeData.value = res.data.data.list
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const goToView = () => {
|
const goToView = () => {
|
||||||
|
|
@ -288,6 +284,13 @@
|
||||||
console.log('申购车总数========================>', res.data.data.count)
|
console.log('申购车总数========================>', res.data.data.count)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
mybus.on('getMynotice', () => {
|
||||||
|
getMynotice()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
mybus.off('getSgcNum')
|
||||||
|
mybus.off('getMynotice')
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,17 @@
|
||||||
* @Author: hisense.liangjunhua
|
* @Author: hisense.liangjunhua
|
||||||
* @Date: 2022-06-21 11:55:07
|
* @Date: 2022-06-21 11:55:07
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.liangjunhua
|
||||||
* @LastEditTime: 2022-06-21 16:52:02
|
* @LastEditTime: 2022-06-22 12:20:59
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="notice-list">
|
<div class="notice-list">
|
||||||
|
<a-breadcrumb>
|
||||||
|
<a-breadcrumb-item>
|
||||||
|
<a @click="goBack('/home')">共享门户</a>
|
||||||
|
</a-breadcrumb-item>
|
||||||
|
<a-breadcrumb-item>消息中心</a-breadcrumb-item>
|
||||||
|
</a-breadcrumb>
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div
|
<div
|
||||||
|
|
@ -19,7 +25,7 @@
|
||||||
<div>{{ nav.title + '(' + nav.num + ')' }}</div>
|
<div>{{ nav.title + '(' + nav.num + ')' }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<!-- <div class="right">
|
||||||
<div style="margin-right: 0.1rem">搜索</div>
|
<div style="margin-right: 0.1rem">搜索</div>
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="userName"
|
v-model:value="userName"
|
||||||
|
|
@ -32,13 +38,13 @@
|
||||||
</a-input>
|
</a-input>
|
||||||
<a-button type="primary" style="margin-right: 0.1rem">搜索</a-button>
|
<a-button type="primary" style="margin-right: 0.1rem">搜索</a-button>
|
||||||
<div class="reset">重置</div>
|
<div class="reset">重置</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<a-select
|
<a-select
|
||||||
ref="select"
|
ref="select"
|
||||||
v-model:value="value1"
|
v-model:value="value"
|
||||||
style="width: 120px"
|
style="width: 120px"
|
||||||
@focus="focus"
|
@focus="focus"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
|
|
@ -48,19 +54,24 @@
|
||||||
<a-select-option value="未读消息">未读消息</a-select-option>
|
<a-select-option value="未读消息">未读消息</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
<div class="check">
|
<div class="check">
|
||||||
<a-checkbox
|
|
||||||
v-model:checked="checked"
|
|
||||||
stlye="margin-right:0.3rem;"
|
|
||||||
></a-checkbox>
|
|
||||||
<div>全选</div>
|
|
||||||
<div>
|
<div>
|
||||||
共
|
共
|
||||||
<span>2</span>
|
<span>{{ total }}</span>
|
||||||
条消息
|
条消息
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">标记为已读</div>
|
<div class="right">
|
||||||
|
<a-checkbox
|
||||||
|
:checked="
|
||||||
|
selectData.length !== 0 && selectData.length === data.length
|
||||||
|
"
|
||||||
|
stlye="margin-right:0.3rem;"
|
||||||
|
@change="changeCheckAll()"
|
||||||
|
></a-checkbox>
|
||||||
|
<div>全选当前页</div>
|
||||||
|
<span @click="read()">标记为已读</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<a-list item-layout="horizontal" :data-source="data">
|
<a-list item-layout="horizontal" :data-source="data">
|
||||||
|
|
@ -69,15 +80,19 @@
|
||||||
<a-list-item-meta description="">
|
<a-list-item-meta description="">
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="left">
|
<div class="left">
|
||||||
{{ item.title }}
|
{{ item.content }}
|
||||||
</div>
|
</div>
|
||||||
<div class="right">{{ '发布时间：' + item.time }}</div>
|
<div class="right">{{ '发布时间：' + item.senderDate }}</div>
|
||||||
</template>
|
</template>
|
||||||
<template #avatar>
|
<template #avatar>
|
||||||
<a-checkbox v-model:checked="checked"></a-checkbox>
|
<a-checkbox
|
||||||
<a-badge dot :offset="[-30, 5]">
|
:checked="item.checked"
|
||||||
|
@change="changeCheckBox(item)"
|
||||||
|
></a-checkbox>
|
||||||
|
<a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0">
|
||||||
<a-avatar :src="item.src" />
|
<a-avatar :src="item.src" />
|
||||||
</a-badge>
|
</a-badge>
|
||||||
|
<a-avatar :src="item.src" v-show="item.readStatus == 1" />
|
||||||
<!-- <a-avatar :src="item.src" /> -->
|
<!-- <a-avatar :src="item.src" /> -->
|
||||||
</template>
|
</template>
|
||||||
</a-list-item-meta>
|
</a-list-item-meta>
|
||||||
|
|
@ -85,12 +100,28 @@
|
||||||
</template>
|
</template>
|
||||||
</a-list>
|
</a-list>
|
||||||
</div>
|
</div>
|
||||||
<a-pagination v-model:current="current" :total="50" show-less-items />
|
<a-pagination
|
||||||
|
v-model:current="pageNum"
|
||||||
|
v-model:pageSize="pageSize"
|
||||||
|
:total="total"
|
||||||
|
show-less-items
|
||||||
|
@change="changePageNum"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { SearchOutlined } from '@ant-design/icons-vue'
|
// import { SearchOutlined } from '@ant-design/icons-vue'
|
||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
|
import mybus from '@/myplugins/mybus'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import { mynotice, mynoticeRead } from '@/api/home'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
const router = useRouter()
|
||||||
|
const total = ref(0)
|
||||||
|
const pageSize = ref(8)
|
||||||
|
const pageNum = ref(1)
|
||||||
|
const value = ref('全部消息')
|
||||||
|
const obj = reactive({ page: pageNum.value, limit: pageSize.value })
|
||||||
const navList = reactive([
|
const navList = reactive([
|
||||||
{
|
{
|
||||||
title: '全部',
|
title: '全部',
|
||||||
|
|
@ -107,38 +138,146 @@
|
||||||
key: 'comment',
|
key: 'comment',
|
||||||
num: 0,
|
num: 0,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '其它',
|
||||||
|
key: 'other',
|
||||||
|
num: 0,
|
||||||
|
},
|
||||||
])
|
])
|
||||||
const selectNav = ref('all')
|
const selectNav = ref('all')
|
||||||
const data = ref([
|
const selectData = ref([])
|
||||||
{
|
const data = ref([])
|
||||||
title: 'Ant Design Title 1',
|
|
||||||
src: require('@/assets/mynoticeView/notice.png'),
|
|
||||||
time: '2020-06-21',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Ant Design Title 2',
|
|
||||||
src: require('@/assets/mynoticeView/notice.png'),
|
|
||||||
time: '2020-06-21',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Ant Design Title 3',
|
|
||||||
src: require('@/assets/mynoticeView/notice.png'),
|
|
||||||
time: '2020-06-21',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Ant Design Title 4',
|
|
||||||
src: require('@/assets/mynoticeView/notice.png'),
|
|
||||||
time: '2020-06-21',
|
|
||||||
},
|
|
||||||
])
|
|
||||||
const changeNav = (nav) => {
|
const changeNav = (nav) => {
|
||||||
selectNav.value = nav.key
|
selectNav.value = nav.key
|
||||||
|
if (nav.key === 'all') {
|
||||||
|
delete obj.from
|
||||||
|
} else {
|
||||||
|
obj.from = nav.title
|
||||||
|
}
|
||||||
|
value.value = '全部消息'
|
||||||
|
delete obj.readStatus
|
||||||
|
init()
|
||||||
}
|
}
|
||||||
|
const changeCheckBox = (item) => {
|
||||||
|
item.checked = !item.checked
|
||||||
|
if (item.checked) {
|
||||||
|
selectData.value.push(item.id)
|
||||||
|
} else {
|
||||||
|
selectData.value = selectData.value.filter((val) => val !== item.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const changeCheckAll = () => {
|
||||||
|
if (selectData.value.length == data.value.length) {
|
||||||
|
selectData.value = []
|
||||||
|
data.value.forEach((val) => {
|
||||||
|
val.checked = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
selectData.value = []
|
||||||
|
data.value.forEach((val) => {
|
||||||
|
val.checked = true
|
||||||
|
selectData.value.push(val.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const changePageNum = (page) => {
|
||||||
|
pageNum.value = page
|
||||||
|
obj.page = pageNum.value
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
const handleChange = () => {
|
||||||
|
pageNum.value = 1
|
||||||
|
obj.page = pageNum.value
|
||||||
|
switch (value.value) {
|
||||||
|
case '全部消息':
|
||||||
|
delete obj.readStatus
|
||||||
|
break
|
||||||
|
case '已读消息':
|
||||||
|
obj.readStatus = 1
|
||||||
|
break
|
||||||
|
case '未读消息':
|
||||||
|
obj.readStatus = 0
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
delete obj.readStatus
|
||||||
|
break
|
||||||
|
}
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
const goBack = (url) => {
|
||||||
|
router.push({
|
||||||
|
path: url,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const read = () => {
|
||||||
|
if (selectData.value.length === 0) {
|
||||||
|
message.error('未选择消息！')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
console.log(selectData.value)
|
||||||
|
let str = ''
|
||||||
|
selectData.value.forEach((val, index) => {
|
||||||
|
str += val
|
||||||
|
if (index < selectData.value.length - 1) {
|
||||||
|
str += ';'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
mynoticeRead(str).then((res) => {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
message.success('操作成功！')
|
||||||
|
mybus.emit('getMynotice')
|
||||||
|
init()
|
||||||
|
} else {
|
||||||
|
message.error('操作失败！')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const init = () => {
|
||||||
|
// from 通知 评论 readStatus 0 未读 1 已读
|
||||||
|
mynotice(obj).then((res) => {
|
||||||
|
console.log('消息=============>', res.data.data)
|
||||||
|
res.data.data.list.forEach((val) => {
|
||||||
|
if (val.from === '通知') {
|
||||||
|
val.src = require('@/assets/mynoticeView/notice.png')
|
||||||
|
} else if (val.from === '评论') {
|
||||||
|
val.src = require('@/assets/mynoticeView/comment.png')
|
||||||
|
} else if (val.from === '其它') {
|
||||||
|
val.src = require('@/assets/mynoticeView/other.png')
|
||||||
|
}
|
||||||
|
val.checked = false
|
||||||
|
})
|
||||||
|
data.value = res.data.data.list
|
||||||
|
total.value = res.data.data.total
|
||||||
|
selectData.value = []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
navList.forEach((val) => {
|
||||||
|
if (val.title === '全部') {
|
||||||
|
mynotice({ page: pageNum.value, limit: pageSize.value }).then((res) => {
|
||||||
|
val.num = res.data.data.total
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
mynotice({
|
||||||
|
page: pageNum.value,
|
||||||
|
limit: pageSize.value,
|
||||||
|
from: val.title,
|
||||||
|
}).then((res) => {
|
||||||
|
val.num = res.data.data.total
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
init()
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.notice-list {
|
.notice-list {
|
||||||
padding: 0.64rem 3.1rem 0.2rem;
|
padding: 0.64rem 0 0;
|
||||||
|
background: #f4f5f8;
|
||||||
|
.ant-breadcrumb {
|
||||||
|
padding: 0.1rem 3.1rem;
|
||||||
|
}
|
||||||
.top {
|
.top {
|
||||||
|
background: #fff;
|
||||||
|
padding: 0.18rem 3.1rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -171,6 +310,10 @@
|
||||||
background: url('~@/assets/mynoticeView/comment.png') no-repeat;
|
background: url('~@/assets/mynoticeView/comment.png') no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
.other {
|
||||||
|
background: url('~@/assets/mynoticeView/other.png') no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.item:nth-of-type(1) {
|
.item:nth-of-type(1) {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
@ -194,6 +337,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn {
|
.btn {
|
||||||
|
background: #fff;
|
||||||
|
margin-top: 0.16rem;
|
||||||
|
padding: 0.14rem 3.1rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.left {
|
.left {
|
||||||
|
|
@ -218,18 +364,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
cursor: pointer;
|
display: flex;
|
||||||
color: #0058e1;
|
justify-content: space-around;
|
||||||
text-align: center;
|
align-items: center;
|
||||||
align-self: center;
|
div {
|
||||||
padding: 0.05rem 0.1rem;
|
margin: 0 0.1rem;
|
||||||
}
|
}
|
||||||
.right:hover {
|
span {
|
||||||
background: rgba(0, 88, 225, 0.1);
|
cursor: pointer;
|
||||||
|
color: #0058e1;
|
||||||
|
text-align: center;
|
||||||
|
align-self: center;
|
||||||
|
padding: 0.05rem 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:hover {
|
||||||
|
background: rgba(0, 88, 225, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.main {
|
.main {
|
||||||
height: 5.67rem;
|
background: #fff;
|
||||||
|
padding: 0 3.1rem;
|
||||||
|
height: 4.75rem;
|
||||||
|
overflow-y: scroll;
|
||||||
:deep(.ant-list-item-meta) {
|
:deep(.ant-list-item-meta) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -256,5 +414,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ant-pagination {
|
||||||
|
background: #fff;
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0.2rem 0 0.2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue