This commit is contained in:
parent
359115ccf8
commit
35b85eab73
Binary file not shown.
|
After Width: | Height: | Size: 554 B |
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
Binary file not shown.
|
After Width: | Height: | Size: 532 B |
|
|
@ -0,0 +1,561 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog custom-class="customClass" :visible.sync="areaVisibleCopy" :title="modalTypeText[modalType]"
|
||||||
|
@close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 挂载和修改 -->
|
||||||
|
<div class="right">
|
||||||
|
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
|
||||||
|
:label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<div class="scrollBox" id="anchor1">
|
||||||
|
|
||||||
|
<div class="baseInner">
|
||||||
|
<el-form-item label="所属区市:" prop="unit">
|
||||||
|
<el-select v-model="dataForm.area" placeholder="请选择">
|
||||||
|
<el-option v-for="item in areas" :key="item.data" :label="item.name"
|
||||||
|
:value="item.name"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="赋能领域:" prop="unit">
|
||||||
|
<el-select v-model="dataForm.applicationArea" placeholder="请选择">
|
||||||
|
<el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label"
|
||||||
|
:value="item.dict_value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="场景名称:" prop="name">
|
||||||
|
<el-input v-model="dataForm.name" placeholder="请输入名称" style="width:90%"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="场景描述:" prop="description">
|
||||||
|
<el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述"
|
||||||
|
style="width:90%">
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="场景入口:">
|
||||||
|
<el-input v-model="dataForm.sceneUrl" placeholder="请输入场景入口" style="width:90%"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="场景图片:">
|
||||||
|
<el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
|
||||||
|
:on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1"
|
||||||
|
:file-list="[]" :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
|
||||||
|
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
|
||||||
|
<div class="button-new">
|
||||||
|
<div>点击上传</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<template slot="footer">
|
||||||
|
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
|
||||||
|
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import debounce from 'lodash/debounce'
|
||||||
|
import qs from 'qs'
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
import upload from '@/views/modules/components/upload'
|
||||||
|
|
||||||
|
// 模态框标题
|
||||||
|
export const modalTypeText = {
|
||||||
|
add: '场景挂接',
|
||||||
|
update: '场景修改'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
upload
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
dataForm: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.dataForm = newVal
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
areaVisible: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.getSceneArea()
|
||||||
|
this.getArea()
|
||||||
|
this.areaVisibleCopy = newVal
|
||||||
|
if (this.modalType == 'add' && newVal) {
|
||||||
|
this.getDetail(this.dataForm)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
modalType: {
|
||||||
|
type: String,
|
||||||
|
default: 'add'
|
||||||
|
},
|
||||||
|
areaVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
areas:[],//所属区市
|
||||||
|
sceneAreas:[],
|
||||||
|
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||||
|
dataForm: {
|
||||||
|
district: 1,//0市级，1基层
|
||||||
|
area: '',//所属区市
|
||||||
|
infrastructureCount: null,
|
||||||
|
dataSourceCount: null,
|
||||||
|
componentCount: null,
|
||||||
|
name: '',
|
||||||
|
applicationArea: '',//赋能领域
|
||||||
|
description: '',
|
||||||
|
sceneUrl: '',
|
||||||
|
fuseAttrList: [
|
||||||
|
{
|
||||||
|
attrType: '构建步骤',
|
||||||
|
attrValue: [{ question: '', answer: [{ 'answer': '' }, { 'answer': '' }] }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '基础设施',
|
||||||
|
attrValue: [{ name: '', type: '', dept: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '组件服务',
|
||||||
|
attrValue: [{ name: '', type: '', dept: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '数据资源',
|
||||||
|
attrValue: [{ name: '', type: '', dept: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '场景痛点',
|
||||||
|
attrValue: [{ description: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '解决方案',
|
||||||
|
attrValue: [{ description: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '服务图片',
|
||||||
|
attrValue: ''
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入名称',
|
||||||
|
trigger: 'change'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
description: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入描述',
|
||||||
|
trigger: 'change'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
areaVisibleCopy: this.areaVisible,
|
||||||
|
displayInfo: {
|
||||||
|
name: '名称',
|
||||||
|
description: '描述'
|
||||||
|
},
|
||||||
|
modalTypeText: modalTypeText,
|
||||||
|
|
||||||
|
abilityListObj: {},
|
||||||
|
imgData: [],
|
||||||
|
// 限定图片
|
||||||
|
handleExceed() {
|
||||||
|
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||||
|
},
|
||||||
|
imageUrl: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//获取所属区市
|
||||||
|
getArea(){
|
||||||
|
const params = {
|
||||||
|
pid: '250000'
|
||||||
|
}
|
||||||
|
this.$http
|
||||||
|
.get('/sys/region/list/', {
|
||||||
|
params
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.areas = res.data.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//获取赋能场景
|
||||||
|
getSceneArea() {
|
||||||
|
const params = {
|
||||||
|
topCategoryName: '应用资源'
|
||||||
|
}
|
||||||
|
this.$http
|
||||||
|
.get('/category/getAllFilterCriteriaByTopCategory/', {
|
||||||
|
params
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.sceneAreas = res.data.data[0].typeList
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
clearForm() {
|
||||||
|
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||||
|
},
|
||||||
|
closeModal() {
|
||||||
|
this.$emit('closeModal')
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 表单提交
|
||||||
|
dataFormSubmitHandle: debounce(
|
||||||
|
function () {
|
||||||
|
|
||||||
|
this.$refs.dataForm.validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
this.$message.error('请检查表单是否填写完整')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const methodsObj = {
|
||||||
|
add: 'post',
|
||||||
|
update: 'put'
|
||||||
|
}
|
||||||
|
|
||||||
|
// if (this.imageUrl == '') {
|
||||||
|
// this.$message.error('请上传图片！')
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
|
||||||
|
const _obj = Object.assign({}, this.dataForm, {
|
||||||
|
type: '赋能场景'
|
||||||
|
})
|
||||||
|
|
||||||
|
this.dataForm.fuseAttrList.forEach(item => {
|
||||||
|
if(item.attrType!=='服务图片'){
|
||||||
|
item.attrValue = JSON.stringify(item.attrValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
this.$http
|
||||||
|
[methodsObj[this.modalType]]('/fuse', _obj)
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
this.$message({
|
||||||
|
message: this.$t('prompt.success'),
|
||||||
|
type: 'success',
|
||||||
|
duration: 500,
|
||||||
|
onClose: () => {
|
||||||
|
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||||
|
this.$emit('refreshDataList')
|
||||||
|
this.$emit('closeModal')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.$message.error(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
1000,
|
||||||
|
{ leading: true, trailing: false }
|
||||||
|
),
|
||||||
|
// 详情
|
||||||
|
getDetail(data) {
|
||||||
|
this.dataForm = data
|
||||||
|
},
|
||||||
|
handleAvatarSuccess(res, file) {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
this.imageUrl = res.data
|
||||||
|
},
|
||||||
|
beforeAvatarUpload(file) {
|
||||||
|
const isImage =
|
||||||
|
file.type === 'image/jpeg' ||
|
||||||
|
file.type === 'image/jpg' ||
|
||||||
|
file.type === 'image/png'
|
||||||
|
if (!isImage) {
|
||||||
|
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||||
|
}
|
||||||
|
return isImage
|
||||||
|
},
|
||||||
|
addUploadRemoveFile(file, fileList) {
|
||||||
|
this.$refs.addUpload.clearFiles()
|
||||||
|
this.imageUrl = ''
|
||||||
|
},
|
||||||
|
editBeforeAvatarUpload(file) {
|
||||||
|
const isImage =
|
||||||
|
file.type === 'image/jpeg' ||
|
||||||
|
file.type === 'image/jpg' ||
|
||||||
|
file.type === 'image/png'
|
||||||
|
|
||||||
|
if (!isImage) {
|
||||||
|
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||||
|
}
|
||||||
|
return isImage
|
||||||
|
},
|
||||||
|
editUploadRemoveFile(file, fileList) {
|
||||||
|
this.$refs.editUpload.clearFiles()
|
||||||
|
this.imageUrl = ''
|
||||||
|
},
|
||||||
|
eidtHandleAvatarSuccess(res, file) {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
this.imageUrl = res.data
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.clearForm()
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fixed {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 10012;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -9.56rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-new {
|
||||||
|
height: 90px;
|
||||||
|
width: 128px;
|
||||||
|
border: 1px dashed rgba(198, 198, 198, 0.5);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #e9eff8;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-new div {
|
||||||
|
background: url('~@/assets/img/uploadAdd.png') no-repeat;
|
||||||
|
color: #666666;
|
||||||
|
background-position: center;
|
||||||
|
text-align: center;
|
||||||
|
height: 90px;
|
||||||
|
padding-top: 41px;
|
||||||
|
background-position-y: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 770px;
|
||||||
|
margin-left: 100px;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
|
||||||
|
.info-inner {
|
||||||
|
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseInfo {
|
||||||
|
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseTitle {
|
||||||
|
padding-left: 20px;
|
||||||
|
color: #212121;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 32px;
|
||||||
|
background: url("~@/assets/img/biaoti.png") no-repeat;
|
||||||
|
background-position-y: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseInner {
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
|
padding: 24px 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseInner1 {
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
|
padding: 24px 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__header {
|
||||||
|
background: #0058e1;
|
||||||
|
// height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__title {
|
||||||
|
line-height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-upload {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__body {
|
||||||
|
padding: 0px;
|
||||||
|
height: 580px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-input ::v-deep .el-input__inner {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detial-form ::v-deep {
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__label {
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__content {
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-checkbox-button__inner {
|
||||||
|
width: 130px;
|
||||||
|
margin: 0 10px 5px;
|
||||||
|
border-left: unset !important;
|
||||||
|
border-radius: unset !important;
|
||||||
|
border: 1px solid #dcdfe6 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mod-sys__menu {
|
||||||
|
|
||||||
|
.menu-list,
|
||||||
|
.icon-list {
|
||||||
|
|
||||||
|
.el-input__inner,
|
||||||
|
.el-input__suffix {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon-popover {
|
||||||
|
width: 458px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon-inner {
|
||||||
|
width: 478px;
|
||||||
|
max-height: 258px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon-list {
|
||||||
|
width: 458px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
|
||||||
|
>.el-button {
|
||||||
|
padding: 8px;
|
||||||
|
margin: 8px 0 0 8px;
|
||||||
|
|
||||||
|
>span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.previewImg {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-align: right;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 12px 0 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 32px;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-left: 132px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-title {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,839 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog custom-class="customClass" :visible.sync="cityVisibleCopy" :title="modalTypeText[modalType]"
|
||||||
|
@close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-process">
|
||||||
|
<!-- <el-steps direction="vertical" :active="activeStep">
|
||||||
|
<el-step :key=index v-for="(item, index) in steps" :title=item @click.native="handleStep(index)"></el-step>
|
||||||
|
</el-steps> -->
|
||||||
|
<div class="li1" v-for="(item, index) in steps" :key="index" @click="handleStep(item, index)">
|
||||||
|
<div v-if="index == activeStepIndex">
|
||||||
|
<div class="node node1">{{ item.name }}</div>
|
||||||
|
<div class="borderLeft borderLeft1"></div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="node">{{ item.name }}</div>
|
||||||
|
<div class="borderLeft"></div>
|
||||||
|
</div>
|
||||||
|
<div class="advice"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 挂载和修改 -->
|
||||||
|
<div class="right">
|
||||||
|
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
|
||||||
|
:label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<div class="scrollBox" id="anchor1">
|
||||||
|
<div class="baseTitle">
|
||||||
|
基本信息
|
||||||
|
</div>
|
||||||
|
<div class="baseInner">
|
||||||
|
<el-form-item label="赋能领域:" prop="unit">
|
||||||
|
<el-select v-model="dataForm.applicationArea" placeholder="请选择">
|
||||||
|
<el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label"
|
||||||
|
:value="item.dict_value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="场景名称:" prop="name">
|
||||||
|
<el-input v-model="dataForm.name" placeholder="请输入名称" style="width:90%"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="场景描述:" prop="description">
|
||||||
|
<el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述"
|
||||||
|
style="width:90%">
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="场景入口:">
|
||||||
|
<el-input v-model="dataForm.sceneUrl" placeholder="请输入场景入口" style="width:90%"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="场景图片:">
|
||||||
|
<el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
|
||||||
|
:on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1"
|
||||||
|
:file-list="[]" :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
|
||||||
|
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
|
||||||
|
<div class="button-new">
|
||||||
|
<div>点击上传</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 场景痛点 -->
|
||||||
|
<div class="scrollBox" id="anchor2">
|
||||||
|
<div class="baseTitle">
|
||||||
|
场景痛点
|
||||||
|
</div>
|
||||||
|
<div class="baseInner">
|
||||||
|
<scene-one-input :dataForm="dataForm" title="场景痛点" @update="updateDataForm" ref="scenePainDom"
|
||||||
|
:keyTextObj="painKeyTextObj"></scene-one-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 解决方案 -->
|
||||||
|
<div class="scrollBox" id="anchor3">
|
||||||
|
<div class="baseTitle">
|
||||||
|
解决方案
|
||||||
|
</div>
|
||||||
|
<div class="baseInner">
|
||||||
|
<scene-one-input :dataForm="dataForm" title="解决方案" @update="updateDataForm" ref="solutionDom"
|
||||||
|
:keyTextObj="solutionKeyTextObj"></scene-one-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 使用能力 -->
|
||||||
|
<div class="scrollBox" id="anchor4">
|
||||||
|
<div class="baseTitle">
|
||||||
|
使用能力
|
||||||
|
</div>
|
||||||
|
<div class="baseInner1">
|
||||||
|
<div class="info-inner">
|
||||||
|
<ability-add :dataForm="dataForm" @update="updateDataForm" @updateCount="updateCount" ref="abilityAdd1"
|
||||||
|
title="基础设施" :typeList="baseTypeList"></ability-add>
|
||||||
|
</div>
|
||||||
|
<div style="border-bottom: 1px dashed #d3d3d3;margin-bottom: 23px;"></div>
|
||||||
|
<div class="info-inner">
|
||||||
|
<ability-add :dataForm="dataForm" @update="updateDataForm" @updateCount="updateCount" ref="abilityAdd2"
|
||||||
|
title="组件服务" :typeList="componetTypeList"></ability-add>
|
||||||
|
</div>
|
||||||
|
<div style="border-bottom: 1px dashed #d3d3d3;margin-bottom: 23px;"></div>
|
||||||
|
<div class="info-inner">
|
||||||
|
<ability-add :dataForm="dataForm" @update="updateDataForm" @updateCount="updateCount" ref="abilityAdd3"
|
||||||
|
title="数据资源" :typeList="dataTypeList"></ability-add>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
|
||||||
|
:modalType="modalType" ref="jcssDom"></InfrastructureModal>
|
||||||
|
<el-form-item label="基础设施总数" >
|
||||||
|
<el-input v-model="dataForm.infrastructureCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
|
||||||
|
:getDataParams="getListParams['数据资源']"></combine-ability>
|
||||||
|
<el-form-item label="数据资源总数" >
|
||||||
|
<el-input v-model="dataForm.dataSourceCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
|
||||||
|
:getDataParams="getListParams['组件服务']"></combine-ability>
|
||||||
|
<el-form-item label="组件服务总数" >
|
||||||
|
<el-input v-model="dataForm.componentCount" onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
|
||||||
|
</el-form-item> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 构建步骤 -->
|
||||||
|
<div class="scrollBox" id="anchor5">
|
||||||
|
<div class="baseTitle">
|
||||||
|
构建步骤
|
||||||
|
</div>
|
||||||
|
<div class="baseInner1">
|
||||||
|
<scene-use-step :dataForm="dataForm" @update="updateDataForm" ref="sceneUseUpDom">
|
||||||
|
</scene-use-step>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<template slot="footer">
|
||||||
|
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
|
||||||
|
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import debounce from 'lodash/debounce'
|
||||||
|
import qs from 'qs'
|
||||||
|
import SceneUseStep from './components/scene-use-step.vue'
|
||||||
|
import SceneOneInput from './components/scene-one-input.vue'
|
||||||
|
import AbilityAdd from './components/ability-add.vue'
|
||||||
|
import CombineAbility from '../components/combine-ability.vue'
|
||||||
|
import CommonQuestion from '../components/common-question.vue'
|
||||||
|
import InfrastructureModal from './components/infrastructure-modal.vue'
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
import upload from '@/views/modules/components/upload'
|
||||||
|
|
||||||
|
|
||||||
|
export const getDescJson = (text) => {
|
||||||
|
return {
|
||||||
|
descObj: {
|
||||||
|
text: `${text}描述`,
|
||||||
|
key: 'description'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模态框标题
|
||||||
|
export const modalTypeText = {
|
||||||
|
add: '场景挂接',
|
||||||
|
update: '场景修改'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
SceneUseStep,
|
||||||
|
CombineAbility,
|
||||||
|
SceneOneInput,
|
||||||
|
upload,
|
||||||
|
CommonQuestion,
|
||||||
|
InfrastructureModal,
|
||||||
|
AbilityAdd
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
dataForm: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.dataForm = newVal
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
cityVisible: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.getSceneArea()
|
||||||
|
this.cityVisibleCopy = newVal
|
||||||
|
if (this.modalType == 'add' && newVal) {
|
||||||
|
// localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
|
||||||
|
this.getDetail(this.dataForm)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
modalType: {
|
||||||
|
type: String,
|
||||||
|
default: 'add'
|
||||||
|
},
|
||||||
|
cityVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
domArr: [],
|
||||||
|
scrollTop: 0,
|
||||||
|
selectNow: '',
|
||||||
|
activeStepIndex: 0,//选择的步骤
|
||||||
|
activeStepIndexs: 0,
|
||||||
|
baseTypeList: [{ value: '视频资源', label: '视频资源' }, { value: '云资源', label: '云资源' }, { value: '其他', label: '其他' }],
|
||||||
|
componetTypeList: [{ value: '智能算法', label: '智能算法' }, { value: ' 图层服务', label: ' 图层服务' },
|
||||||
|
{ value: '开发组件', label: '开发组件' }, { value: '业务组件', label: '业务组件' }],
|
||||||
|
dataTypeList: [{ value: '数据', label: '数据' }],
|
||||||
|
sceneAreas: [],//赋能领域
|
||||||
|
|
||||||
|
steps: [{ 'name': '基本信息', 'id': "anchor1" },
|
||||||
|
{ 'name': '场景痛点', 'id': "anchor2" },
|
||||||
|
{ 'name': '解决方案', 'id': "anchor3" },
|
||||||
|
{ 'name': '使用能力', 'id': "anchor4" },
|
||||||
|
{ 'name': '构建步骤', 'id': "anchor5" }],
|
||||||
|
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||||
|
|
||||||
|
painKeyTextObj: getDescJson('痛点'),
|
||||||
|
solutionKeyTextObj: getDescJson('方案'),
|
||||||
|
dataForm: {
|
||||||
|
district: 0,//市级
|
||||||
|
area: '',//所属区市
|
||||||
|
infrastructureCount: null,
|
||||||
|
dataSourceCount: null,
|
||||||
|
componentCount: null,
|
||||||
|
name: '',
|
||||||
|
applicationArea: '',//赋能领域
|
||||||
|
description: '',
|
||||||
|
sceneUrl: '',
|
||||||
|
fuseAttrList: [
|
||||||
|
{
|
||||||
|
attrType: '构建步骤',
|
||||||
|
attrValue: [{ question: '', answer: [{ 'answer': '' }, { 'answer': '' }] }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '基础设施',
|
||||||
|
attrValue: [{ name: '', type: '', dept: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '组件服务',
|
||||||
|
attrValue: [{ name: '', type: '', dept: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '数据资源',
|
||||||
|
attrValue: [{ name: '', type: '', dept: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '场景痛点',
|
||||||
|
attrValue: [{ description: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '解决方案',
|
||||||
|
attrValue: [{ description: '' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attrType: '服务图片',
|
||||||
|
attrValue: ''
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入名称',
|
||||||
|
trigger: 'change'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
description: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入描述',
|
||||||
|
trigger: 'change'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
checkList: ['基本信息', '场景痛点', '解决方案', '使用能力', '构建步骤'],
|
||||||
|
cityVisibleCopy: this.cityVisible,
|
||||||
|
displayInfo: {
|
||||||
|
name: '名称',
|
||||||
|
description: '描述'
|
||||||
|
},
|
||||||
|
modalTypeText: modalTypeText,
|
||||||
|
refsParseArray: {
|
||||||
|
sceneUseUpDom: '构建步骤',
|
||||||
|
moreAbilityDom: '更多能力',
|
||||||
|
scenePainDom: '场景痛点',
|
||||||
|
solutionDom: '解决方案',
|
||||||
|
abilityAdd1: '基础设施',
|
||||||
|
abilityAdd2: '组件服务',
|
||||||
|
abilityAdd3: '数据资源'
|
||||||
|
},
|
||||||
|
|
||||||
|
abilityListObj: {},
|
||||||
|
imgData: [],
|
||||||
|
// 限定图片
|
||||||
|
handleExceed() {
|
||||||
|
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||||
|
},
|
||||||
|
imageUrl: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
handleStep(item, index) {
|
||||||
|
this.activeStepIndex = index
|
||||||
|
this.selectNow = item.id // 设置选中的锚点为当前点击的
|
||||||
|
let top = document.querySelector('#' + item.id).offsetTop - 100
|
||||||
|
document.querySelectorAll(".customClass .el-dialog__body")[0].scrollTop = top
|
||||||
|
|
||||||
|
},
|
||||||
|
//获取赋能场景
|
||||||
|
getSceneArea() {
|
||||||
|
const params = {
|
||||||
|
topCategoryName: '应用资源'
|
||||||
|
}
|
||||||
|
this.$http
|
||||||
|
.get('/category/getAllFilterCriteriaByTopCategory/', {
|
||||||
|
params
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.sceneAreas = res.data.data[0].typeList
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
clearForm() {
|
||||||
|
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||||
|
},
|
||||||
|
closeModal() {
|
||||||
|
this.$emit('closeModal')
|
||||||
|
},
|
||||||
|
// 更新表单
|
||||||
|
updateDataForm(data) {
|
||||||
|
this.dataForm.fuseAttrList.map(v => {
|
||||||
|
if (v.attrType === data.title) {
|
||||||
|
v.attrValue = data.list
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
//更新数量
|
||||||
|
updateCount(data) {
|
||||||
|
if (data.title === '基础设施') {
|
||||||
|
this.dataForm.infrastructureCount = data.count
|
||||||
|
}
|
||||||
|
if (data.title === '组件服务') {
|
||||||
|
this.dataForm.componentCount = data.count
|
||||||
|
}
|
||||||
|
if (data.title === '数据资源') {
|
||||||
|
this.dataForm.dataSourceCount = data.count
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// 表单提交
|
||||||
|
dataFormSubmitHandle: debounce(
|
||||||
|
function () {
|
||||||
|
|
||||||
|
this.$refs.dataForm.validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
this.$message.error('请检查表单是否填写完整')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const methodsObj = {
|
||||||
|
add: 'post',
|
||||||
|
update: 'put'
|
||||||
|
}
|
||||||
|
|
||||||
|
// if (this.imageUrl == '') {
|
||||||
|
// this.$message.error('请上传图片！')
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
|
||||||
|
const _obj = Object.assign({}, this.dataForm, {
|
||||||
|
type: '赋能场景'
|
||||||
|
})
|
||||||
|
this.dataForm.fuseAttrList.forEach(item => {
|
||||||
|
if(item.attrType!=='服务图片'){
|
||||||
|
item.attrValue = JSON.stringify(item.attrValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
this.$http
|
||||||
|
[methodsObj[this.modalType]]('/fuse', _obj)
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
this.$message({
|
||||||
|
message: this.$t('prompt.success'),
|
||||||
|
type: 'success',
|
||||||
|
duration: 500,
|
||||||
|
onClose: () => {
|
||||||
|
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||||
|
this.$emit('refreshDataList')
|
||||||
|
this.$emit('closeModal')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.$message.error(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
1000,
|
||||||
|
{ leading: true, trailing: false }
|
||||||
|
),
|
||||||
|
// 详情
|
||||||
|
getDetail(data) {
|
||||||
|
this.dataForm = data
|
||||||
|
this.$nextTick(() => {
|
||||||
|
for (const key in this.refsParseArray) {
|
||||||
|
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
|
||||||
|
}
|
||||||
|
const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
|
||||||
|
this.imageUrl = _imgObj.attrValue
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
handleAvatarSuccess(res, file) {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
this.imageUrl = res.data
|
||||||
|
},
|
||||||
|
beforeAvatarUpload(file) {
|
||||||
|
const isImage =
|
||||||
|
file.type === 'image/jpeg' ||
|
||||||
|
file.type === 'image/jpg' ||
|
||||||
|
file.type === 'image/png'
|
||||||
|
if (!isImage) {
|
||||||
|
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||||
|
}
|
||||||
|
return isImage
|
||||||
|
},
|
||||||
|
addUploadRemoveFile(file, fileList) {
|
||||||
|
this.$refs.addUpload.clearFiles()
|
||||||
|
this.imageUrl = ''
|
||||||
|
},
|
||||||
|
editBeforeAvatarUpload(file) {
|
||||||
|
const isImage =
|
||||||
|
file.type === 'image/jpeg' ||
|
||||||
|
file.type === 'image/jpg' ||
|
||||||
|
file.type === 'image/png'
|
||||||
|
|
||||||
|
if (!isImage) {
|
||||||
|
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||||
|
}
|
||||||
|
return isImage
|
||||||
|
},
|
||||||
|
editUploadRemoveFile(file, fileList) {
|
||||||
|
this.$refs.editUpload.clearFiles()
|
||||||
|
this.imageUrl = ''
|
||||||
|
},
|
||||||
|
eidtHandleAvatarSuccess(res, file) {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
this.imageUrl = res.data
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const that = this;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
document.querySelector(".el-dialog__body").onscroll = function () {
|
||||||
|
|
||||||
|
let top = document.querySelectorAll(".customClass .el-dialog__body")[0].scrollTop - 100
|
||||||
|
|
||||||
|
if (top < document.querySelector('#anchor1').offsetTop - 100) {
|
||||||
|
that.activeStepIndexs = 0
|
||||||
|
}
|
||||||
|
else if (top < document.querySelector('#anchor2').offsetTop - 100) {
|
||||||
|
that.activeStepIndexs = 1
|
||||||
|
}
|
||||||
|
else if (top < document.querySelector('#anchor3').offsetTop - 100) {
|
||||||
|
that.activeStepIndexs = 2
|
||||||
|
}
|
||||||
|
else if (top < document.querySelector('#anchor4').offsetTop - 100) {
|
||||||
|
that.activeStepIndexs = 3
|
||||||
|
}
|
||||||
|
else if (top < document.querySelector('#anchor5').offsetTop - 100) {
|
||||||
|
that.activeStepIndexs = 4
|
||||||
|
} else {
|
||||||
|
that.activeStepIndexs = 0
|
||||||
|
}
|
||||||
|
if (that.activeStepIndex !== that.activeStepIndexs) {
|
||||||
|
that.activeStepIndex = that.activeStepIndexs;
|
||||||
|
that.$forceUpdate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.clearForm()
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fixed {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 10012;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -9.56rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-new {
|
||||||
|
height: 90px;
|
||||||
|
width: 128px;
|
||||||
|
border: 1px dashed rgba(198, 198, 198, 0.5);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #e9eff8;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-new div {
|
||||||
|
background: url('~@/assets/img/uploadAdd.png') no-repeat;
|
||||||
|
color: #666666;
|
||||||
|
background-position: center;
|
||||||
|
text-align: center;
|
||||||
|
height: 90px;
|
||||||
|
padding-top: 41px;
|
||||||
|
background-position-y: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 135px;
|
||||||
|
height: 650px;
|
||||||
|
position: fixed;
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
|
|
||||||
|
.left-process {
|
||||||
|
height: 300px;
|
||||||
|
position: fixed;
|
||||||
|
padding-left: 18px;
|
||||||
|
padding-top: 24px;
|
||||||
|
|
||||||
|
.li1 {
|
||||||
|
list-style: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderLeft {
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #1160e2;
|
||||||
|
position: absolute;
|
||||||
|
top: 11.225px;
|
||||||
|
bottom: 0;
|
||||||
|
left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderLeft1 {
|
||||||
|
background-color: #1160e2;
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node::before {
|
||||||
|
z-index: 1;
|
||||||
|
content: "";
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #1160e2;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: 0;
|
||||||
|
top: 11.225px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22.5px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node1 {
|
||||||
|
color: #0058e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node1::before {
|
||||||
|
width: 16px;
|
||||||
|
|
||||||
|
height: 16px;
|
||||||
|
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
border: 4px solid #1160e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.advice {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #1160e2;
|
||||||
|
padding-bottom: 46px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li1:last-child .borderLeft {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 770px;
|
||||||
|
margin-left: 157px;
|
||||||
|
margin-top: -5px;
|
||||||
|
|
||||||
|
|
||||||
|
.info-inner {
|
||||||
|
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseInfo {
|
||||||
|
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseTitle {
|
||||||
|
padding-left: 20px;
|
||||||
|
color: #212121;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 32px;
|
||||||
|
background: url("~@/assets/img/biaoti.png") no-repeat;
|
||||||
|
background-position-y: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseInner {
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
|
padding: 24px 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseInner1 {
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
|
padding: 24px 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__header {
|
||||||
|
background: #0058e1;
|
||||||
|
// height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__title {
|
||||||
|
line-height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-upload {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__body {
|
||||||
|
padding: 0px;
|
||||||
|
height: 580px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-input ::v-deep .el-input__inner {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detial-form ::v-deep {
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__label {
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__content {
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-checkbox-button__inner {
|
||||||
|
width: 130px;
|
||||||
|
margin: 0 10px 5px;
|
||||||
|
border-left: unset !important;
|
||||||
|
border-radius: unset !important;
|
||||||
|
border: 1px solid #dcdfe6 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mod-sys__menu {
|
||||||
|
|
||||||
|
.menu-list,
|
||||||
|
.icon-list {
|
||||||
|
|
||||||
|
.el-input__inner,
|
||||||
|
.el-input__suffix {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon-popover {
|
||||||
|
width: 458px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon-inner {
|
||||||
|
width: 478px;
|
||||||
|
max-height: 258px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon-list {
|
||||||
|
width: 458px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
|
||||||
|
>.el-button {
|
||||||
|
padding: 8px;
|
||||||
|
margin: 8px 0 0 8px;
|
||||||
|
|
||||||
|
>span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.previewImg {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-align: right;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 12px 0 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 32px;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-left: 132px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-title {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,239 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="info-title">{{ title }}</div>
|
||||||
|
|
||||||
|
<el-form :inline="true">
|
||||||
|
<el-form-item label="使用总数">
|
||||||
|
<el-input
|
||||||
|
v-model="count"
|
||||||
|
onkeyup="value=value.replace(/[^\d]/g,0)"
|
||||||
|
placeholder="请输入总数"
|
||||||
|
style="width: 320px"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<div class="submit">
|
||||||
|
<a-button type="primary" @click="addBaseInfo">
|
||||||
|
<img
|
||||||
|
style="height: 12px; width: 12px; margin-top: -2px"
|
||||||
|
src="~@/assets/img/jiahao.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span style="margin-left: 4px">添加实例数据</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div style="margin-bottom: 20px">
|
||||||
|
<el-table v-if="dataInfo.length > 0" :data="dataInfo" border>
|
||||||
|
<el-table-column label="序号" width="55">
|
||||||
|
<template slot-scope="scope">{{
|
||||||
|
scope.$index + 1 > 9 ? scope.$index + 1 : "0" + (scope.$index + 1)
|
||||||
|
}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="数据名称" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-input
|
||||||
|
v-model="scope.row.name"
|
||||||
|
placeholder="请输入数据名称"
|
||||||
|
></el-input>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="类型" width="200">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-select :ref="scope.row.id" v-model="scope.row.type">
|
||||||
|
<el-option
|
||||||
|
v-for="item in typeList"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
:key="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="来源部门" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-input
|
||||||
|
v-model="scope.row.dept"
|
||||||
|
placeholder="请输入来源部门"
|
||||||
|
></el-input>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span
|
||||||
|
style="color: #0058e1"
|
||||||
|
@click="handleDelete(scope.$index, scope.row)"
|
||||||
|
>删除</span
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
dataForm: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
typeList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dataInfo: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.dataInfo = newVal;
|
||||||
|
this.$emit("update", {
|
||||||
|
title: this.title,
|
||||||
|
list: newVal,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
count: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.count = newVal;
|
||||||
|
this.$emit("updateCount", {
|
||||||
|
title: this.title,
|
||||||
|
count: newVal,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
count: "",
|
||||||
|
dataInfo: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
addBaseInfo() {
|
||||||
|
let data = {
|
||||||
|
name: "",
|
||||||
|
type: "",
|
||||||
|
dept: "",
|
||||||
|
};
|
||||||
|
this.dataInfo.push(data);
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
this.dataInfo.splice(row, 1);
|
||||||
|
},
|
||||||
|
getDataInfo(dataForm) {
|
||||||
|
let arr = [];
|
||||||
|
if (dataForm && (dataForm.id || dataForm.id === 0)) {
|
||||||
|
if (this.title === "基础设施") {
|
||||||
|
this.count = dataForm.infrastructureCount;
|
||||||
|
}
|
||||||
|
if (this.title === "组件服务") {
|
||||||
|
this.count = dataForm.componentCount;
|
||||||
|
}
|
||||||
|
if (this.title === "数据资源") {
|
||||||
|
this.count = dataForm.dataSourceCount;
|
||||||
|
}
|
||||||
|
|
||||||
|
let fuseAttrList = dataForm.fuseAttrList || [];
|
||||||
|
let obj = fuseAttrList.find((v) => v.attrType === this.title) || {};
|
||||||
|
let attrValue = JSON.parse(obj.attrValue || "[]");
|
||||||
|
if (attrValue.length > 0) {
|
||||||
|
attrValue.map((v) => {
|
||||||
|
arr.push(v);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
arr = [];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
arr = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dataInfo = arr;
|
||||||
|
},
|
||||||
|
// 新增
|
||||||
|
addItem() {
|
||||||
|
let index = this.dataInfo.length - 1;
|
||||||
|
if (this.dataInfo[index][this.keyTextObj.descObj.key] === "") {
|
||||||
|
return this.$message.warning("请填写完整信息！");
|
||||||
|
}
|
||||||
|
this.dataInfo.push({
|
||||||
|
[this.keyTextObj.descObj.key]: "",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
deleteItem(index) {
|
||||||
|
this.$confirm("确认是否删除?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$message({
|
||||||
|
type: "success",
|
||||||
|
message: "删除成功!",
|
||||||
|
});
|
||||||
|
this.dataInfo.splice(index, 1);
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep .el-table thead {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table th {
|
||||||
|
font-weight: normal;
|
||||||
|
background-color: #e3e4e5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
.ant-btn {
|
||||||
|
width: 128px;
|
||||||
|
height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
border: 1px solid #0558e1;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn:hover {
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn:active {
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,20 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="question-box">
|
<div class="question-box">
|
||||||
<div class="title">
|
<!-- <div class="title">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div> -->
|
||||||
<div v-for="(item, index) in dataInfo" :key="index">
|
<div v-for="(item, index) in dataInfo" :key="index">
|
||||||
<el-form-item :label="keyTextObj.descObj.text">
|
<el-form-item :label=keyTextObj.descObj.text+(index+1)>
|
||||||
<el-input type="textarea" :rows="2" v-model="item[keyTextObj.descObj.key]"
|
<el-input type="textarea" :rows="2" v-model="item[keyTextObj.descObj.key]"
|
||||||
:placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
|
:placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
|
<!-- <icon class="el-icon-remove" style="color:red;margin-left: 2px;"
|
||||||
v-if="dataInfo.length > 1">删除
|
@click="deleteItem(index)" type="danger" size="small"
|
||||||
</el-button>
|
v-if="dataInfo.length > 1"></icon> -->
|
||||||
|
<img
|
||||||
|
style="color:red;margin-left: 6px;"
|
||||||
|
@click="deleteItem(index)" type="danger" size="small"
|
||||||
|
v-if="dataInfo.length > 1"
|
||||||
|
src="~@/assets/img/deleteRed.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<!-- <el-button style="margin-left:10px" >删除
|
||||||
|
</el-button> -->
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-button class="add-btn" size="small" v-if="index == dataInfo.length - 1" @click="addItem" type="primary">
|
<!-- <el-button class="add-btn" icon="el-icon-circle-plus-outline" size="small" v-if="index == dataInfo.length - 1" @click="addItem" type="primary">
|
||||||
添加
|
添加
|
||||||
</el-button>
|
</el-button> -->
|
||||||
|
<div class="submit">
|
||||||
|
<a-button type="primary" v-if="index == dataInfo.length - 1" @click="addItem" >
|
||||||
|
<img
|
||||||
|
style="height: 12px; width: 12px;margin-top: -2px;"
|
||||||
|
src="~@/assets/img/jiahao.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span style="margin-left: 4px">添加{{keyTextObj.descObj.text}}</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -115,6 +134,31 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.submit {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
margin-left: 100px;
|
||||||
|
.ant-btn {
|
||||||
|
width: 386px;
|
||||||
|
height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
border: 1px solid #0558e1;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.ant-btn:hover{
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.ant-btn:active{
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
opacity: 0.8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.question-box {
|
.question-box {
|
||||||
.title {
|
.title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,102 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="question-box">
|
<div>
|
||||||
<div class="title">
|
|
||||||
能力使用步骤
|
|
||||||
</div>
|
|
||||||
<div v-for="(item, index) in dataInfo" :key="index">
|
<div v-for="(item, index) in dataInfo" :key="index">
|
||||||
<el-form-item label="标题" prop="question">
|
<div class="question-box">
|
||||||
|
<span>步骤标题{{ index + 1 }}: </span>
|
||||||
|
<el-input
|
||||||
|
v-model="item.question"
|
||||||
|
placeholder="请输入标题"
|
||||||
|
style="width: 200px"
|
||||||
|
:disabled="disabledType"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<img
|
||||||
|
style="color: red; margin-left: 6px"
|
||||||
|
@click="deleteItem(index)"
|
||||||
|
type="danger"
|
||||||
|
size="small"
|
||||||
|
v-if="!disabledType && dataInfo.length > 1"
|
||||||
|
src="~@/assets/img/deleteRed.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="question-box1">
|
||||||
|
<div
|
||||||
|
class="question-box-right"
|
||||||
|
v-for="(itemson, index) in item.answer"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<span>步骤小节: </span>
|
||||||
|
<el-input
|
||||||
|
v-if="index != item.answer.length - 1"
|
||||||
|
v-model="itemson.answer"
|
||||||
|
placeholder="请输入步骤小节"
|
||||||
|
style="width: 200px"
|
||||||
|
:disabled="disabledType"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<div v-else style="display: inline">
|
||||||
|
<el-input
|
||||||
|
v-model="itemson.answer"
|
||||||
|
placeholder="请输入步骤小节"
|
||||||
|
style="width: 200px"
|
||||||
|
:disabled="disabledType"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
<div class="submit1">
|
||||||
|
<a-button type="primary" @click="addAnswerItem(item.answer)">
|
||||||
|
<img
|
||||||
|
style="height: 12px; width: 12px; margin-top: -2px"
|
||||||
|
src="~@/assets/img/jiahao.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span style="margin-left: 4px">添加小节</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <a-button type="primary" v-if="!disabledType && index == dataInfo.length - 1"
|
||||||
|
@click="addItem">
|
||||||
|
<img
|
||||||
|
style="height: 12px; width: 12px;margin-top: -2px;"
|
||||||
|
src="~@/assets/img/jiahao.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span style="margin-left: 4px">添加小节</span>
|
||||||
|
</a-button> -->
|
||||||
|
<!-- <div class="question-box-right">
|
||||||
|
<span>步骤小节: </span>
|
||||||
|
<el-input v-model="itemson.answer" placeholder="请输入步骤小节" style="width:200px"
|
||||||
|
:disabled="disabledType">
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="submit">
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
v-if="!disabledType && index == dataInfo.length - 1"
|
||||||
|
@click="addItem"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style="height: 12px; width: 12px; margin-top: -2px"
|
||||||
|
src="~@/assets/img/jiahao.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span style="margin-left: 4px">添加步骤</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="question-box">
|
||||||
|
|
||||||
|
<div v-for="(item, index) in dataInfo" :key="index">
|
||||||
|
<el-form-item label="步骤标题" prop="question">
|
||||||
<el-input v-model="item.question" placeholder="请输入标题" style="width:90%" :disabled="disabledType">
|
<el-input v-model="item.question" placeholder="请输入标题" style="width:90%" :disabled="disabledType">
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="解释说明" prop="question">
|
<el-form-item label="步骤" prop="question">
|
||||||
<el-input type="textarea" :rows="3" v-model="item.answer" placeholder="请输入解释说明" style="width:90%"
|
<el-input type="textarea" :rows="3" v-model="item.answer" placeholder="请输入解释说明" style="width:90%"
|
||||||
:disabled="disabledType">
|
:disabled="disabledType">
|
||||||
</el-input>
|
</el-input>
|
||||||
|
|
@ -19,16 +107,15 @@
|
||||||
<el-button class="add-btn" size="small" v-if="!disabledType && index == dataInfo.length - 1"
|
<el-button class="add-btn" size="small" v-if="!disabledType && index == dataInfo.length - 1"
|
||||||
@click="addItem" type="primary">添加
|
@click="addItem" type="primary">添加
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div class="step-box">
|
<!-- <div class="step-box">
|
||||||
<el-steps :active="2">
|
<el-steps :active="2">
|
||||||
<el-step status="finish" :title="item.question || `标题${index + 1}`" v-for="(item, index) in dataInfo"
|
<el-step status="finish" :title="item.question || `标题${index + 1}`" v-for="(item, index) in dataInfo"
|
||||||
:key="index">
|
:key="index">
|
||||||
</el-step>
|
</el-step>
|
||||||
</el-steps>
|
</el-steps>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -36,27 +123,27 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
dataForm: {
|
dataForm: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => { }
|
default: () => {},
|
||||||
},
|
},
|
||||||
// 是否可编辑
|
// 是否可编辑
|
||||||
disabledType: {
|
disabledType: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dataInfo: []
|
dataInfo: [],
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
dataInfo: {
|
dataInfo: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
this.dataInfo = newVal;
|
this.dataInfo = newVal;
|
||||||
this.$emit('update', {
|
this.$emit("update", {
|
||||||
title: '使用步骤',
|
title: "构建步骤",
|
||||||
list: newVal
|
list: newVal,
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true,
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
|
@ -64,70 +151,128 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getDataInfo(dataForm) {
|
getDataInfo(dataForm) {
|
||||||
let arr = []
|
let arr = [];
|
||||||
let fuseAttrList = dataForm.fuseAttrList || [];
|
let fuseAttrList = dataForm.fuseAttrList || [];
|
||||||
let obj = fuseAttrList.find(v => v.attrType === '使用步骤') || {}
|
let obj = fuseAttrList.find((v) => v.attrType === "构建步骤") || {};
|
||||||
let attrValue = JSON.parse(obj.attrValue || "[]")
|
let attrValue = obj.attrValue || [];
|
||||||
|
|
||||||
if (attrValue.length > 0) {
|
if (attrValue.length > 0) {
|
||||||
attrValue.map(v => {
|
attrValue = JSON.parse(attrValue);
|
||||||
|
|
||||||
|
attrValue.map((v) => {
|
||||||
arr.push({
|
arr.push({
|
||||||
question: v.question,
|
question: v.question,
|
||||||
answer: v.answer,
|
answer: v.answer,
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
arr = []
|
arr = [];
|
||||||
arr.push({
|
arr.push({
|
||||||
question: "",
|
question: "",
|
||||||
answer: "",
|
answer: [{ answer: "" }, { answer: "" }],
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
this.dataInfo = arr;
|
this.dataInfo = arr;
|
||||||
},
|
},
|
||||||
// 新增
|
// 新增
|
||||||
addItem() {
|
addItem() {
|
||||||
let index = this.dataInfo.length - 1;
|
let index = this.dataInfo.length - 1;
|
||||||
if (this.dataInfo[index].question === '' || this.dataInfo[index].answer === '') {
|
if (this.dataInfo[index].answer === "") {
|
||||||
return this.$message.warning('请填写完整信息！')
|
return this.$message.warning("请填写完整信息！");
|
||||||
}
|
}
|
||||||
if (this.dataInfo.length >= 6) {
|
if (this.dataInfo.length >= 6) {
|
||||||
return this.$message.warning('最多添加6个使用步骤！')
|
return this.$message.warning("最多添加6个使用步骤！");
|
||||||
}
|
}
|
||||||
this.dataInfo.push({
|
this.dataInfo.push({
|
||||||
question: "",
|
question: "",
|
||||||
answer: "",
|
answer: [{ answer: "" }, { answer: "" }],
|
||||||
})
|
});
|
||||||
|
},
|
||||||
|
addAnswerItem(itemson) {
|
||||||
|
itemson.push({});
|
||||||
},
|
},
|
||||||
// 删除
|
// 删除
|
||||||
deleteItem(index) {
|
deleteItem(index) {
|
||||||
this.$confirm('确认是否删除?', '提示', {
|
this.$confirm("确认是否删除?", "提示", {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: "确定",
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: "取消",
|
||||||
type: 'warning'
|
type: "warning",
|
||||||
}).then(() => {
|
})
|
||||||
|
.then(() => {
|
||||||
this.$message({
|
this.$message({
|
||||||
type: 'success',
|
type: "success",
|
||||||
message: '删除成功!'
|
message: "删除成功!",
|
||||||
});
|
});
|
||||||
this.dataInfo.splice(index, 1)
|
this.dataInfo.splice(index, 1);
|
||||||
}).catch(() => {
|
})
|
||||||
});
|
.catch(() => {});
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.question-box {
|
.submit1 {
|
||||||
margin-bottom: 20px;
|
display: inline;
|
||||||
margin-top: 40px;
|
font-size: 0.14rem;
|
||||||
|
margin-left: 8px;
|
||||||
.title {
|
.ant-btn {
|
||||||
|
width: 94px;
|
||||||
|
height: 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 600;
|
background: #fff;
|
||||||
font-size: 18px;
|
color: #0558e1;
|
||||||
margin-bottom: 10px;
|
border: 1px solid #0558e1;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
.ant-btn:hover {
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.ant-btn:active {
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
margin-left: 180px;
|
||||||
|
.ant-btn {
|
||||||
|
width: 370px;
|
||||||
|
height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
border: 1px solid #0558e1;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.ant-btn:hover {
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.ant-btn:active {
|
||||||
|
background: #fff;
|
||||||
|
color: #0558e1;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.question-box {
|
||||||
|
float: left;
|
||||||
|
width: 42%;
|
||||||
|
}
|
||||||
|
.question-box1 {
|
||||||
|
float: left;
|
||||||
|
width: 56%;
|
||||||
|
border-left: 1px solid #dfdfdf;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.question-box-right {
|
||||||
|
margin-left: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-box {
|
.step-box {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue