后台挂载

This commit is contained in:
a0049873 2022-07-08 15:51:55 +08:00
parent 08bb99011b
commit 900b3ea26d
7 changed files with 706 additions and 11 deletions

View File

@ -1,8 +1,8 @@
<!--
* @Author: hisense.wuhongjian
* @Date: 2022-04-11 10:11:40
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-29 19:38:17
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-08 14:13:20
* @Description: 告诉大家这是什么
-->
<!DOCTYPE html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -27,6 +27,13 @@
>挂接</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="showPutOnTheShelf()"
>上架</el-button
>
</el-form-item>
<el-form-item>
<el-button
v-if="$hasPermission('ability:bsabilityai:delete')"
@ -126,6 +133,35 @@
></add-or-update>
<relate-application v-if="relateApplicationVisible" ref="relateApplication" :nameArray="['未关联应用名称', '已关联应用名称']" :relateInfo="relateInfo" @isShowRelatePopup="handleIsShowRelatePopup"></relate-application>
</div>
<el-dialog
title="选择组件类型"
:visible.sync="showPutOnTheShelfFlag"
:close-on-click-modal='false'
:close-on-press-escape='false'
:before-close='clear'
width="30%">
<el-radio v-model="radio" label="智能算法">智能算法</el-radio>
<el-radio v-model="radio" label="图层服务">图层服务</el-radio>
<el-radio v-model="radio" label="开发组件">开发组件</el-radio>
<el-radio v-model="radio" label="业务组件">业务组件</el-radio>
<span slot="footer" class="dialog-footer">
<el-button @click="clear"> </el-button>
<el-button type="primary" @click="showPutOnTheShelfVue"> </el-button>
</span>
</el-dialog>
<el-dialog
:title="'上架'+radio"
:visible.sync="showPutOnTheShelfFlag2"
:close-on-click-modal='false'
:close-on-press-escape='false'
:before-close='clear'
width="50%">
<putOnTheShelf :putOnTheShelfList='putOnTheShelfList'></putOnTheShelf>
<span slot="footer" class="dialog-footer">
<el-button @click="clear"> </el-button>
<el-button type="primary" @click="submitData"> </el-button>
</span>
</el-dialog>
</el-card>
</template>
@ -135,10 +171,28 @@ import AddOrUpdate from './bsabilityai-add-or-update'
import dictionaries from '@/utils/dictionaries'
import qs from 'qs'
import RelateApplication from './bsabilityai-relate-application.vue'
import putOnTheShelf from '@/views/modules/putOnTheShelf'
export default {
mixins: [mixinViewModule],
data () {
return {
insertList: [],
putOnTheShelfList: [],
radio: '',
showPutOnTheShelfFlag: false,
showPutOnTheShelfFlag2: false,
submitFrom: {
type: '组件服务',
deptId: '',
delFlag: 0,
infoList: [
{
attrType: '组件类型',
attrValue: '',
delFlag: 0
}
]
},
mixinViewModuleOptions: {
getDataListURL: '/resource/page',
getDataListIsPage: true,
@ -170,7 +224,8 @@ export default {
watch: {},
components: {
AddOrUpdate,
RelateApplication
RelateApplication,
putOnTheShelf
},
created () {
this.dataForm.name = ''
@ -343,6 +398,40 @@ export default {
//
handleIsShowRelatePopup (type) {
this.relateApplicationVisible = type
},
//
clear () {
this.showPutOnTheShelfFlag = false
this.showPutOnTheShelfFlag2 = false
this.radio = ''
this.submitFrom = {
type: '组件服务',
deptId: '',
delFlag: 0,
infoList: [
{
attrType: '组件类型',
attrValue: '',
delFlag: 0
}
]
}
},
showPutOnTheShelf () {
this.showPutOnTheShelfFlag = true
this.$http.get('/category/getCategoryTree').then(res => {
this.insertList = res.data.data.filter(item => item.name === '组件服务一')[0]
})
},
showPutOnTheShelfVue () {
this.showPutOnTheShelfFlag = false
this.showPutOnTheShelfFlag2 = true
this.submitFrom.infoList[0] = this.redio
this.putOnTheShelfList = this.insertList.children.filter(item => item.name === this.radio)[0].children
console.log('radio', this.radio)
},
submitData () {
console.log('表单数据=================>', this.submitFrom, this.putOnTheShelfList)
}
}
}

View File

@ -0,0 +1,138 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-07-08 14:55:19
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-08 15:48:44
* @Description: 告诉大家这是什么
-->
<template>
<a-upload
v-model:file-list="fileList"
:action="`${apiURL}/upload`"
list-type="picture"
class="upload-list-inline"
:maxCount="maxCount"
:before-upload="beforeUpload"
@change="handleChange"
@preview="handlePreview"
@remove="handleRemove"
>
<a-button>
<upload-outlined></upload-outlined>
{{ btnName }}
</a-button>
<span
style="
display: inline-block;
margin-left: 10px;
color: #999999;
font-size: 14px;
"
>
{{ tip }}
</span>
</a-upload>
</template>
<script>
import { message, Upload } from 'ant-design-vue'
export default {
name: '',
components: {
},
props: {
btnName: String,
type: String,
tip: String,
maxCount: Number,
data: Array,
list: Array,
emitFlag: String,
busType: Number
},
data () {
return {
apiURL: window.SITE_CONFIG.apiURL,
fileList: JSON.parse(JSON.stringify(this.list))
}
},
methods: {
beforeUpload (file) {
console.log(file)
const isLt10M = file.size / 1024 / 1024 < 100
let flag
if (this.type === '图片') {
flag =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
} else if (this.type === '视频') {
console.log(file.type === 'video/mp4')
flag =
file.type === 'audio/mpeg' ||
file.type === 'video/mp4' ||
file.type === 'video/mp3'
} else if (this.type === '文件') {
flag =
file.type === 'application/pdf' ||
file.type === 'application/msword' ||
file.type ===
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
}
console.log(flag)
if (!flag) {
message.error(`${file.name} 不是${this.type}类型`)
}
if (!isLt10M) {
message.error(`${file.name} 超出100M的大小`)
}
return flag || Upload.LIST_IGNORE
},
handlePreview (file) {
// console.log(file)
window.open(
window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' +
btoa(encodeURI(file.response.data))
)
},
handleChange (info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList)
}
if (info.file.status === 'done') {
message.success(`${info.file.name}上传成功`)
this.data.note1 = info.file.response.data
console.log(this.data, this.fileList)
if (this.type === '图片') {
if (!this.emitFlag) {
// mybus.emit('chageImgList', fileList.value)
}
} else if (this.type === '文件') {
console.log('busType', this.busType)
if (this.busType == 2) {
console.log('busType', this.busType)
// mybus.emit('chageFileList2', fileList.value)
} else {
// mybus.emit('chageFileList', fileList.value)
}
} else if (this.type === '视频') {
// mybus.emit('chageVideoList', fileList.value)
}
} else if (info.file.status === 'error') {
message.error(`${info.file.name}上传失败`)
}
},
handleRemove (file) {
this.data.note1 = ''
}
}
}
</script>
<style lang='scss' scoped>
.ant-upload-list-item-image {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>

View File

@ -0,0 +1,305 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-07-08 09:54:50
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-08 15:15:02
* @Description: 多条数据特殊处理
-->
<template>
<div class="special">
<div class="top">{{configure.name}}</div>
<div class="bottom">
<div class="items" v-show="data.length > 0">
<div class="item" v-for="(val, index) in data" :key="'key1' + val.name + index">
<p>
<span>{{ configure.name }}-{{ index + 1 }}</span>
<span></span>
</p>
<p v-for="(attr,index2) in configure.list" :key="'key2' + attr.name + index2">
<span>{{ attr.name }}</span>
<span v-if="attr.type === 'image'">
<!-- <a-image :width="85" :height="60" :src="val.img" /> -->
<el-image
style="width: 85px; height: 60px"
:src="val.img"
:preview-src-list="[val.img]">
</el-image>
</span>
<span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
</p>
<div class="del">
<i class="delImg" @click="del( index)"></i>
<div @click="del( index)">删除</div>
</div>
</div>
</div>
<div class="add">添加更多{{ configure.name }}</div>
<div class="form" v-for="(val, index) in configure.list" :key="'key3' + val.name + index">
<span>{{ val.name }}</span>
<a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
v-if="val.type == 'input'"/>
<a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
v-else-if="val.type == 'textArea'"/>
<a-input-number v-model:value="val.note1" :min="0" :max="9999" :step="0.01" string-mode
:placeholder="'请填写' + val.name" v-else-if="val.type == 'number'" />
<a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
<upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型大小不超过100M"
v-else-if="val.type == 'image'"></upload>
<!-- <upload :key="showKey" :child='val' limit='1' accept='.jpg,.png' v-else-if="val.type == 'image'"></upload> -->
</div>
<div class="submit">
<a-button type="primary" @click="add()">提交</a-button>
</div>
</div>
</div>
</template>
<script>
// import upload from '@/views/modules/ability/upload.vue'
import upload from '@/views/modules/components/upload'
export default {
name: '',
components: {
upload
},
props: {
configure: Object
},
data () {
return {
data: [],
showKey: 0
}
},
methods: {
add () {
const list = this.configure.list
let flag = true
list.forEach((item) => {
console.log(item)
if (item.type !== 'number' && !item.note1.length > 0) {
flag = false
} else if (item.type === 'number' && !item.note1 > 0) {
flag = false
}
})
if (flag) {
const obj = {}
list.forEach((item) => {
obj[item.field] = item.note1
})
this.data.push(obj)
// console.log(data.value[title])
// mybus.emit('chageDataFrom', {
// attrType: title,
// attrValue: JSON.stringify(data.value[title]),
// delFlag: 0
// })
list.forEach((item) => {
item.note1 = ''
})
this.showKey++
} else {
this.$message.warning('请填写完整')
}
} // del (title, index) {
// data.value[title].splice(index, 1)
// mybus.emit('chageDataFrom', {
// attrType: title,
// attrValue: JSON.stringify(data.value[title]),
// delFlag: 0
// })
// }
}
}
</script>
<style lang='scss' scoped>
.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/img/putOnTheShelf/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;
align-items: center;
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: 160px;
height: 32px;
text-align: center;
background: #edf4fc;
color: #0087ff;
border: 1px solid #bbd3ef;
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;
}
}
}
::v-deep .el-image__preview {
width: 100%;
height: 100%;
object-fit: contain;
}
::v-deep .ant-modal {
width: 960px;
}
::v-deep .ant-transfer-list {
width: 39.5%;
height: 520px;
}
::v-deep .ant-transfer-operation {
flex-direction: row-reverse;
margin: 0 30px;
}
::v-deep .ant-btn {
// width: 56px;
// height: 40px;
border-radius: 4px;
}
::v-deep .ant-btn:first-child {
margin-left: 4px;
}
::v-deep .ant-modal-footer {
border: 0;
}
::v-deep .ant-modal-header {
border: 0;
}
::v-deep .ant-modal-title {
line-height: 24px;
font-size: 18px;
color: #303133;
}
::v-deep .ant-transfer-list-header {
background: #f5f7fa;
}
::v-deep .ant-transfer-list-header-selected {
display: flex;
width: 90%;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
::v-deep .ant-input-number {
width: 200px;
}
::v-deep .ant-transfer-list-header-title {
font-size: 16px;
color: #303133;
font-weight: 400;
text-align: left;
}
</style>

View File

@ -2,32 +2,195 @@
* @Author: hisense.liangjunhua
* @Date: 2022-07-08 09:48:52
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-08 09:49:12
* @LastEditTime: 2022-07-08 15:50:06
* @Description: 告诉大家这是什么
-->
<template>
<div>
<div class="put-on-the-shelf">
<div v-for="parent in putOnTheShelfList" :key='parent.id'>
<div v-for='child in parent.children' :key='child.id'>
<template v-if='judgmentType.filter(item => item.name==child.name).length === 0'>
<div class="top">{{child.name}}</div>
<div v-for="item in child.children" :key="item.id" class='item'>
<span>{{ item.name }}</span>
<upload :list="[]" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
tip="支持图片类型大小不超过100M"></upload>
<upload :list="[]" v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
:data="item" tip="支持文件类型大小不超过100M"></upload>
<upload :list="[]" v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
tip="支持文件类型大小不超过100M"></upload>
<upload :list="[]" v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :data="item"
tip="支持视频类型大小不超过100M"></upload>
</div>
</template>
<template v-else>
<special :configure='judgmentType.filter(item => item.name==child.name)[0]'></special>
</template>
</div>
</div>
</div>
</template>
<script>
import special from './components/special'
import upload from '@/views/modules/components/upload'
export default {
name: '',
components: {
special,
upload
},
props: {
putOnTheShelfList: Array
},
data () {
return {
judgmentType: [
{
name: '算法优势',
list: [
{
name: '算法优势名称',
field: 'name',
type: 'input',
note1: ''
},
{
name: '算法优势描述',
field: 'desc',
type: 'textArea',
note1: ''
}
]
},
{
name: '应用场景',
list: [
{
name: '应用场景名称',
field: 'name',
type: 'input',
note1: ''
},
{
name: '应用场景描述',
field: 'desc',
type: 'textArea',
note1: ''
},
{
name: '应用场景图片',
field: 'img',
type: 'image',
note1: ''
}
]
},
{
name: '计费标准信息',
list: [
{
name: '计费方式',
field: 'type',
type: 'radio',
options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
note1: ''
},
{
name: '计费标准',
field: 'price',
type: 'number',
company: '元',
note1: ''
},
{
name: '计费标准描述',
field: 'desc',
type: 'textArea',
note1: ''
}
]
},
{
name: '常见问题',
list: [
{
name: '问题',
field: 'question',
type: 'textArea',
note1: ''
},
{
name: '答复',
field: 'answer',
type: 'textArea',
note1: ''
}
]
},
{
name: '功能介绍',
list: [
{
name: '功能名称',
field: 'name',
type: 'input',
note1: ''
},
{
name: '功能描述',
field: 'desc',
type: 'textArea',
note1: ''
},
{
name: '功能图片',
field: 'img',
type: 'image',
note1: ''
}
]
}
]
}
},
methods: {
}
}
</script>
<style lang='scss' scoped>
.put-on-the-shelf {
height: 500px;
padding: 0 50px;
overflow-y: scroll;
}
.put-on-the-shelf::-webkit-scrollbar {
width: 0;
}
.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;
}
}
.item {
display: flex;
align-items: center;
& > span:nth-of-type(1) {
width: 105px;
}
}
</style>