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>
|
||||
<div class="question-box">
|
||||
<div class="title">
|
||||
<!-- <div class="title">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div> -->
|
||||
<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]"
|
||||
:placeholder="`请输入${keyTextObj.descObj.text}`" style="width:90%">
|
||||
</el-input>
|
||||
<el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small"
|
||||
v-if="dataInfo.length > 1">删除
|
||||
</el-button>
|
||||
<!-- <icon class="el-icon-remove" style="color:red;margin-left: 2px;"
|
||||
@click="deleteItem(index)" type="danger" size="small"
|
||||
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-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>
|
||||
</template>
|
||||
|
|
@ -115,6 +134,31 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<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 {
|
||||
.title {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,102 @@
|
|||
<template>
|
||||
<div class="question-box">
|
||||
<div class="title">
|
||||
能力使用步骤
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</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%"
|
||||
:disabled="disabledType">
|
||||
</el-input>
|
||||
|
|
@ -19,16 +107,15 @@
|
|||
<el-button class="add-btn" size="small" v-if="!disabledType && index == dataInfo.length - 1"
|
||||
@click="addItem" type="primary">添加
|
||||
</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="step-box">
|
||||
<!-- <div class="step-box">
|
||||
<el-steps :active="2">
|
||||
<el-step status="finish" :title="item.question || `标题${index + 1}`" v-for="(item, index) in dataInfo"
|
||||
:key="index">
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -36,27 +123,27 @@ export default {
|
|||
props: {
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
default: () => {},
|
||||
},
|
||||
// 是否可编辑
|
||||
disabledType: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataInfo: []
|
||||
}
|
||||
dataInfo: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dataInfo: {
|
||||
handler(newVal) {
|
||||
this.dataInfo = newVal;
|
||||
this.$emit('update', {
|
||||
title: '使用步骤',
|
||||
list: newVal
|
||||
})
|
||||
this.$emit("update", {
|
||||
title: "构建步骤",
|
||||
list: newVal,
|
||||
});
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
|
|
@ -64,70 +151,128 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getDataInfo(dataForm) {
|
||||
let arr = []
|
||||
let arr = [];
|
||||
let fuseAttrList = dataForm.fuseAttrList || [];
|
||||
let obj = fuseAttrList.find(v => v.attrType === '使用步骤') || {}
|
||||
let attrValue = JSON.parse(obj.attrValue || "[]")
|
||||
let obj = fuseAttrList.find((v) => v.attrType === "构建步骤") || {};
|
||||
let attrValue = obj.attrValue || [];
|
||||
|
||||
if (attrValue.length > 0) {
|
||||
attrValue.map(v => {
|
||||
attrValue = JSON.parse(attrValue);
|
||||
|
||||
attrValue.map((v) => {
|
||||
arr.push({
|
||||
question: v.question,
|
||||
answer: v.answer,
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
} else {
|
||||
arr = []
|
||||
arr = [];
|
||||
arr.push({
|
||||
question: "",
|
||||
answer: "",
|
||||
})
|
||||
answer: [{ answer: "" }, { answer: "" }],
|
||||
});
|
||||
}
|
||||
this.dataInfo = arr;
|
||||
},
|
||||
// 新增
|
||||
addItem() {
|
||||
let index = this.dataInfo.length - 1;
|
||||
if (this.dataInfo[index].question === '' || this.dataInfo[index].answer === '') {
|
||||
return this.$message.warning('请填写完整信息！')
|
||||
if (this.dataInfo[index].answer === "") {
|
||||
return this.$message.warning("请填写完整信息！");
|
||||
}
|
||||
if (this.dataInfo.length >= 6) {
|
||||
return this.$message.warning('最多添加6个使用步骤！')
|
||||
return this.$message.warning("最多添加6个使用步骤！");
|
||||
}
|
||||
this.dataInfo.push({
|
||||
question: "",
|
||||
answer: "",
|
||||
})
|
||||
answer: [{ answer: "" }, { answer: "" }],
|
||||
});
|
||||
},
|
||||
addAnswerItem(itemson) {
|
||||
itemson.push({});
|
||||
},
|
||||
// 删除
|
||||
deleteItem(index) {
|
||||
this.$confirm('确认是否删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$confirm("确认是否删除?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.dataInfo.splice(index, 1)
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dataInfo.splice(index, 1);
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.question-box {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 40px;
|
||||
|
||||
.title {
|
||||
.submit1 {
|
||||
display: inline;
|
||||
font-size: 0.14rem;
|
||||
margin-left: 8px;
|
||||
.ant-btn {
|
||||
width: 94px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue