UI修改
This commit is contained in:
a0049873
parent
593998ccab
commit
146bb7b403
|
|
@ -1,29 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<div class="first-title">
|
||||
填写字段
|
||||
<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>
|
||||
<el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
|
||||
<el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
|
||||
<!-- 挂载和修改 -->
|
||||
<div key="1">
|
||||
<div class="right">
|
||||
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
|
||||
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
|
||||
:label-width="$i18n.locale === 'en-US' ? '150px' : '130px'">
|
||||
<!-- 基本信息 -->
|
||||
<div style="margin-bottom:20px" v-show="checkList.includes('基本信息')">
|
||||
<div style="
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
">
|
||||
<div class="scrollBox" id="anchor1">
|
||||
<div class="baseTitle">
|
||||
基本信息
|
||||
</div>
|
||||
<div class="baseInner">
|
||||
<el-form-item label="融合服务名称" prop="name">
|
||||
<el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
|
||||
</el-form-item>
|
||||
|
|
@ -37,22 +45,29 @@
|
|||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片">
|
||||
<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">
|
||||
<el-button size="small" type="primary" class="button-new">点击上传</el-button>
|
||||
: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="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
|
||||
<div class="title">
|
||||
<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> -->
|
||||
<InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
|
||||
:modalType="modalType" ref="jcssDom"></InfrastructureModal>
|
||||
<el-form-item label="基础设施总数" >
|
||||
|
|
@ -69,59 +84,128 @@
|
|||
<el-input v-model="dataForm.componentCount" placeholder="请输入组件服务总数"></el-input>
|
||||
</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>
|
||||
<el-button type="primary" @click="dataFormSubmitHandle()">{{
|
||||
$t("confirm")
|
||||
}}</el-button>
|
||||
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from "lodash/debounce";
|
||||
import qs from "qs";
|
||||
import CommonQuestion from './components/common-question.vue';
|
||||
import IntegratedCombineAbility from './components/integrated-combine-ability.vue';
|
||||
import CombineAbility from './components/combine-ability.vue';
|
||||
import Cookies from 'js-cookie'
|
||||
import { tableColumns } from './IntegratedServices.vue';
|
||||
import { getFuseResourceList, getListParams, modalTypeText } from "./assignedScene/add-update-scene.vue";
|
||||
import debounce from 'lodash/debounce'
|
||||
import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
|
||||
import CombineAbility from './components/combine-ability.vue'
|
||||
import { getFuseResourceList, getListParams } from './assignedScene/add-update-scene.vue'
|
||||
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: {
|
||||
CommonQuestion,
|
||||
IntegratedCombineAbility,
|
||||
CombineAbility,
|
||||
InfrastructureModal,
|
||||
InfrastructureModal
|
||||
// SceneUseStep,
|
||||
// CombineAbility,
|
||||
// SceneOneInput,
|
||||
// upload,
|
||||
// CommonQuestion,
|
||||
// InfrastructureModal,
|
||||
// AbilityAdd
|
||||
},
|
||||
watch: {
|
||||
|
||||
dataForm: {
|
||||
handler (newVal) {
|
||||
this.dataForm = newVal
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
cityVisible: {
|
||||
handler (newVal) {
|
||||
this.cityVisible = newVal
|
||||
if (this.modalType == 'add' && newVal) {
|
||||
this.getDetail(this.dataForm)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modalType: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
cityVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
domArr: [],
|
||||
scrollTop: 0,
|
||||
selectNow: '',
|
||||
areaList: [],
|
||||
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' }],
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
|
||||
painKeyTextObj: getDescJson('痛点'),
|
||||
solutionKeyTextObj: getDescJson('方案'),
|
||||
dataForm: {
|
||||
"infrastructureCount":null,
|
||||
"dataSourceCount":null,
|
||||
"componentCount":null,
|
||||
"name": "",
|
||||
"applicationArea": "",
|
||||
"description": "",
|
||||
"fuseAttrList": [
|
||||
infrastructureCount: null,
|
||||
dataSourceCount: null,
|
||||
componentCount: null,
|
||||
name: '',
|
||||
applicationArea: '',
|
||||
description: '',
|
||||
fuseAttrList: [
|
||||
{
|
||||
"attrType": "服务图片",
|
||||
"attrValue": "",
|
||||
},
|
||||
attrType: '服务图片',
|
||||
attrValue: ''
|
||||
}
|
||||
],
|
||||
// 选择的能力
|
||||
"fuseResourceList": [
|
||||
fuseResourceList: [
|
||||
{
|
||||
"resourceId": 0,
|
||||
"sequence": ""
|
||||
resourceId: 0,
|
||||
sequence: ''
|
||||
}
|
||||
],
|
||||
type: '打包模式'
|
||||
|
|
@ -130,185 +214,192 @@ export default {
|
|||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入融合服务名称",
|
||||
trigger: "change",
|
||||
},
|
||||
message: '请输入名称',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
description: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入融合服务描述",
|
||||
trigger: "change",
|
||||
message: '请输入描述',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
btnList: ['基本信息', '组合能力'],
|
||||
checkList: ['基本信息', '组合能力'],
|
||||
areaList: [],
|
||||
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
|
||||
displayInfo: tableColumns,
|
||||
getListParams: getListParams,
|
||||
refsParseArray: {
|
||||
'zjfwDom': '组件服务',
|
||||
'sjzyDom': '数据资源',
|
||||
'jcssDom': '基础设施',
|
||||
checkList: ['基本信息', '场景痛点', '解决方案', '使用能力', '构建步骤'],
|
||||
cityVisibleCopy: this.cityVisible,
|
||||
displayInfo: {
|
||||
name: '名称',
|
||||
description: '描述'
|
||||
},
|
||||
modalTypeText: modalTypeText,
|
||||
getListParams: getListParams,
|
||||
refsParseArray: {
|
||||
zjfwDom: '组件服务',
|
||||
sjzyDom: '数据资源',
|
||||
jcssDom: '基础设施'
|
||||
},
|
||||
|
||||
abilityListObj: {},
|
||||
imgData: [],
|
||||
// 限定图片
|
||||
handleExceed () {
|
||||
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||
},
|
||||
imageUrl: ''
|
||||
};
|
||||
},
|
||||
props: {
|
||||
modalType: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataForm: {
|
||||
handler(newVal) {
|
||||
this.dataForm = newVal
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
handler(newVal) {
|
||||
this.addOrUpdateVisibleCopy = newVal;
|
||||
if (this.modalType == 'add' && newVal) {
|
||||
this.getDetail(this.dataForm)
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 获取应用领域
|
||||
this.getAreaInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
handleStep (item, index) {
|
||||
this.activeStepIndex = index
|
||||
this.selectNow = item.id // 设置选中的锚点为当前点击的
|
||||
const 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();
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||
},
|
||||
closeModal () {
|
||||
this.$emit('closeModal')
|
||||
},
|
||||
// 获取应用领域
|
||||
getAreaInfo() {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 99,
|
||||
dictTypeId: "1513712507692818433",
|
||||
};
|
||||
this.$http
|
||||
.get("/sys/dict/data/page" + "?" + qs.stringify(params))
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
res.data.list.map((item) => {
|
||||
this.areaList.push({
|
||||
label: item.dictLabel,
|
||||
value: item.dictLabel
|
||||
});
|
||||
});
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
// 更新表单
|
||||
updateDataForm (data) {
|
||||
if (Object.keys(this.getListParams).includes(data.title)) {
|
||||
this.abilityListObj[data.title] = data.list;
|
||||
this.abilityListObj[data.title] = 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
|
||||
}
|
||||
},
|
||||
getFuseResourceList () {
|
||||
return getFuseResourceList(this.abilityListObj)
|
||||
},
|
||||
// 改变按钮状态
|
||||
changeBtn(data) {
|
||||
this.checkList = data;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmitHandle: debounce(
|
||||
function () {
|
||||
this.$refs.dataForm.validate((valid) => {
|
||||
if (!valid) {
|
||||
this.$message.error("请检查表单是否填写完整");
|
||||
return false;
|
||||
this.$message.error('请检查表单是否填写完整')
|
||||
return false
|
||||
}
|
||||
let methodsObj = {
|
||||
'add': 'post',
|
||||
'update': 'put'
|
||||
const methodsObj = {
|
||||
add: 'post',
|
||||
update: 'put'
|
||||
}
|
||||
this.dataForm.fuseResourceList = this.getFuseResourceList()
|
||||
if (this.imageUrl == '') {
|
||||
this.$message.error("请上传图片！");
|
||||
return;
|
||||
this.$message.error('请上传图片！')
|
||||
return
|
||||
}
|
||||
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
|
||||
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
|
||||
this.$http
|
||||
[methodsObj[this.modalType]]("/fuse", this.dataForm)
|
||||
[methodsObj[this.modalType]]('/fuse', this.dataForm)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.$message({
|
||||
message: this.$t("prompt.success"),
|
||||
type: "success",
|
||||
message: this.$t('prompt.success'),
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields();
|
||||
this.$emit("refreshDataList");
|
||||
this.$emit("closeModal");
|
||||
},
|
||||
});
|
||||
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.dataForm = data
|
||||
this.$nextTick(() => {
|
||||
for (const key in this.refsParseArray) {
|
||||
console.log('11111111111', data)
|
||||
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
|
||||
}
|
||||
let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
|
||||
this.imageUrl = _imgObj.attrValue;
|
||||
const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
|
||||
this.imageUrl = _imgObj.attrValue
|
||||
|
||||
// 组合能力
|
||||
Object.keys(this.getListParams).map(k => {
|
||||
let arr = data.fuseResourceList.filter(v => v.type == k);
|
||||
let arr2 = [];
|
||||
const arr = data.fuseResourceList.filter(v => v.type == k)
|
||||
const arr2 = []
|
||||
arr.map(v => {
|
||||
arr2.push(v.resourceId)
|
||||
})
|
||||
this.abilityListObj[k] = arr2
|
||||
})
|
||||
|
||||
console.log('this.dataForm----详情-------->', this.dataForm);
|
||||
console.log('this.dataForm----详情-------->', this.dataForm)
|
||||
})
|
||||
},
|
||||
// 获取应用领域
|
||||
getAreaInfo () {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 99,
|
||||
dictTypeId: '1513712507692818433'
|
||||
}
|
||||
this.$http
|
||||
.get('/sys/dict/data/page' + '?' + qs.stringify(params))
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
res.data.list.map((item) => {
|
||||
this.areaList.push({
|
||||
label: item.dictLabel,
|
||||
value: item.dictLabel
|
||||
})
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$message.error(err)
|
||||
})
|
||||
},
|
||||
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 格式!')
|
||||
}
|
||||
|
|
@ -323,6 +414,7 @@ export default {
|
|||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||
}
|
||||
|
|
@ -337,18 +429,217 @@ export default {
|
|||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.imageUrl = res.data
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 获取应用领域
|
||||
this.getAreaInfo()
|
||||
const that = this
|
||||
this.$nextTick(() => {
|
||||
document.querySelector('.el-dialog__body').onscroll = function () {
|
||||
const 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 {
|
||||
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 {
|
||||
|
|
@ -379,7 +670,7 @@ export default {
|
|||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.mod-sys__menu {
|
||||
|
||||
.menu-list,
|
||||
|
|
@ -448,19 +739,14 @@ export default {
|
|||
line-height: 32px;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
||||
.first-title {
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
.first-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,474 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<div class="first-title">
|
||||
填写字段
|
||||
</div>
|
||||
<el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
|
||||
<el-checkbox-button v-for="(item) in btnList" :label="item" :key="item">{{ item }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
|
||||
<!-- 挂载和修改-->
|
||||
<div key="1">
|
||||
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
|
||||
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
|
||||
<!-- 基本信息 -->
|
||||
<div style="margin-bottom:20px" v-show="checkList.includes('基本信息')">
|
||||
<div style="
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
">
|
||||
基本信息
|
||||
</div>
|
||||
<el-form-item label="融合服务名称" prop="name">
|
||||
<el-input class="input-box" v-model="dataForm.name" placeholder="请输入融合服务名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="融合服务描述" prop="description">
|
||||
<el-input type="textarea" :rows="3" class="input-box" v-model="dataForm.description"
|
||||
placeholder="请输入融合服务描述"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用领域" prop="applicationArea">
|
||||
<el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
|
||||
<el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</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">
|
||||
<el-button size="small" type="primary" class="button-new">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 组合能力 -->
|
||||
<div class="" style="marigin-bottom:40px" v-show="checkList.includes('组合能力')">
|
||||
<div class="title">
|
||||
组合能力
|
||||
</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" placeholder="请输入组件服务总数"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template slot="footer">
|
||||
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmitHandle()">{{
|
||||
$t("confirm")
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from 'lodash/debounce'
|
||||
import qs from 'qs'
|
||||
import CommonQuestion from './components/common-question.vue'
|
||||
import IntegratedCombineAbility from './components/integrated-combine-ability.vue'
|
||||
import CombineAbility from './components/combine-ability.vue'
|
||||
import Cookies from 'js-cookie'
|
||||
import { tableColumns } from './IntegratedServices.vue'
|
||||
import { getFuseResourceList, getListParams, modalTypeText } from './assignedScene/add-update-scene.vue'
|
||||
import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CommonQuestion,
|
||||
IntegratedCombineAbility,
|
||||
CombineAbility,
|
||||
InfrastructureModal
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
dataForm: {
|
||||
infrastructureCount: null,
|
||||
dataSourceCount: null,
|
||||
componentCount: null,
|
||||
name: '',
|
||||
applicationArea: '',
|
||||
description: '',
|
||||
fuseAttrList: [
|
||||
{
|
||||
attrType: '服务图片',
|
||||
attrValue: ''
|
||||
}
|
||||
],
|
||||
// 选择的能力
|
||||
fuseResourceList: [
|
||||
{
|
||||
resourceId: 0,
|
||||
sequence: ''
|
||||
}
|
||||
],
|
||||
type: '打包模式'
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入融合服务名称',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
description: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入融合服务描述',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
btnList: ['基本信息', '组合能力'],
|
||||
checkList: ['基本信息', '组合能力'],
|
||||
areaList: [],
|
||||
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
|
||||
displayInfo: tableColumns,
|
||||
getListParams: getListParams,
|
||||
refsParseArray: {
|
||||
zjfwDom: '组件服务',
|
||||
sjzyDom: '数据资源',
|
||||
jcssDom: '基础设施'
|
||||
},
|
||||
modalTypeText: modalTypeText,
|
||||
abilityListObj: {},
|
||||
// 限定图片
|
||||
handleExceed () {
|
||||
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||
},
|
||||
imageUrl: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modalType: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataForm: {
|
||||
handler (newVal) {
|
||||
this.dataForm = newVal
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
handler (newVal) {
|
||||
this.addOrUpdateVisibleCopy = newVal
|
||||
if (this.modalType == 'add' && newVal) {
|
||||
this.getDetail(this.dataForm)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 获取应用领域
|
||||
this.getAreaInfo()
|
||||
},
|
||||
methods: {
|
||||
clearForm () {
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||
},
|
||||
closeModal () {
|
||||
this.$emit('closeModal')
|
||||
},
|
||||
// 获取应用领域
|
||||
getAreaInfo () {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 99,
|
||||
dictTypeId: '1513712507692818433'
|
||||
}
|
||||
this.$http
|
||||
.get('/sys/dict/data/page' + '?' + qs.stringify(params))
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
res.data.list.map((item) => {
|
||||
this.areaList.push({
|
||||
label: item.dictLabel,
|
||||
value: item.dictLabel
|
||||
})
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$message.error(err)
|
||||
})
|
||||
},
|
||||
// 更新表单
|
||||
updateDataForm (data) {
|
||||
if (Object.keys(this.getListParams).includes(data.title)) {
|
||||
this.abilityListObj[data.title] = data.list
|
||||
}
|
||||
},
|
||||
getFuseResourceList () {
|
||||
return getFuseResourceList(this.abilityListObj)
|
||||
},
|
||||
// 改变按钮状态
|
||||
changeBtn (data) {
|
||||
this.checkList = data
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmitHandle: debounce(
|
||||
function () {
|
||||
this.$refs.dataForm.validate((valid) => {
|
||||
if (!valid) {
|
||||
this.$message.error('请检查表单是否填写完整')
|
||||
return false
|
||||
}
|
||||
const methodsObj = {
|
||||
add: 'post',
|
||||
update: 'put'
|
||||
}
|
||||
this.dataForm.fuseResourceList = this.getFuseResourceList()
|
||||
if (this.imageUrl == '') {
|
||||
this.$message.error('请上传图片！')
|
||||
return
|
||||
}
|
||||
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
|
||||
this.$http
|
||||
[methodsObj[this.modalType]]('/fuse', this.dataForm)
|
||||
.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
|
||||
|
||||
// 组合能力
|
||||
Object.keys(this.getListParams).map(k => {
|
||||
const arr = data.fuseResourceList.filter(v => v.type == k)
|
||||
const arr2 = []
|
||||
arr.map(v => {
|
||||
arr2.push(v.resourceId)
|
||||
})
|
||||
this.abilityListObj[k] = arr2
|
||||
})
|
||||
|
||||
console.log('this.dataForm----详情-------->', this.dataForm)
|
||||
})
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearForm()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__body {
|
||||
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">
|
||||
.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;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.first-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,10 +38,9 @@
|
|||
layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
</el-pagination>
|
||||
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
|
||||
:addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
|
||||
:cityVisible="addOrUpdateVisible" :addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
|
||||
</add-or-update>
|
||||
|
||||
</div>
|
||||
|
|
@ -49,15 +48,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import AddOrUpdate from "./IntegratedServices-add";
|
||||
import qs from "qs";
|
||||
import { type } from "os";
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import AddOrUpdate from './IntegratedServices-add'
|
||||
// import AddOrUpdate from './IntegratedServices-add_back'
|
||||
import qs from 'qs'
|
||||
import { type } from 'os'
|
||||
|
||||
export const tableColumns = {
|
||||
'name': '名称',
|
||||
'description': '描述',
|
||||
'applicationArea': '应用领域',
|
||||
name: '名称',
|
||||
description: '描述',
|
||||
applicationArea: '应用领域'
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -68,28 +68,28 @@ export default {
|
|||
tableColumns: tableColumns,
|
||||
tableData: [],
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: "/fuse/page",
|
||||
exportURL: "/ability/bsabilityai/export",
|
||||
deleteURL: "/fuse/delete",
|
||||
getDataListURL: '/fuse/page',
|
||||
exportURL: '/ability/bsabilityai/export',
|
||||
deleteURL: '/fuse/delete',
|
||||
getDataListIsPage: true,
|
||||
deleteIsBatch: false,
|
||||
deleteIsBatch: false
|
||||
},
|
||||
dataForm: {
|
||||
name: "",
|
||||
name: '',
|
||||
order: 'desc',
|
||||
orderField: 'create_date',
|
||||
type: '打包模式'
|
||||
},
|
||||
qp: false,
|
||||
modalType: 'add',
|
||||
};
|
||||
modalType: 'add'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
AddOrUpdate
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener("resize", this.a);
|
||||
this.fullScreen();
|
||||
window.addEventListener('resize', this.a)
|
||||
this.fullScreen()
|
||||
},
|
||||
methods: {
|
||||
deleteRow (id) {
|
||||
|
|
@ -103,21 +103,21 @@ export default {
|
|||
}).then(res => {
|
||||
console.log('删除成功', res)
|
||||
if (res.data.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: "success",
|
||||
type: 'success',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
this.query()
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
this.$message.error(err)
|
||||
})
|
||||
}).catch(() => {
|
||||
});
|
||||
})
|
||||
},
|
||||
// 查询
|
||||
searchData () {
|
||||
|
|
@ -125,13 +125,13 @@ export default {
|
|||
},
|
||||
// 重置
|
||||
reset () {
|
||||
this.dataForm.name = "";
|
||||
this.dataForm.name = ''
|
||||
this.query()
|
||||
},
|
||||
// 修改
|
||||
handleUpdate (val) {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.modalType = 'update';
|
||||
this.addOrUpdateVisible = true
|
||||
this.modalType = 'update'
|
||||
const cloneVal = JSON.parse(JSON.stringify(val))
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.getDetail(cloneVal)
|
||||
|
|
@ -140,10 +140,10 @@ export default {
|
|||
// 挂接
|
||||
addServe () {
|
||||
this.addOrUpdateVisible = true
|
||||
this.modalType = 'add';
|
||||
this.modalType = 'add'
|
||||
},
|
||||
closeModal () {
|
||||
this.addOrUpdateVisible = false;
|
||||
this.addOrUpdateVisible = false
|
||||
},
|
||||
// 详情
|
||||
showDetail (val) {
|
||||
|
|
@ -161,24 +161,24 @@ export default {
|
|||
if (window.outerHeight === screen.availHeight) {
|
||||
if (window.outerWidth === screen.availWidth) {
|
||||
console.log(
|
||||
"全屏1",
|
||||
);
|
||||
this.qp = false;
|
||||
'全屏1'
|
||||
)
|
||||
this.qp = false
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏2",
|
||||
);
|
||||
this.qp = true;
|
||||
'不是全屏2'
|
||||
)
|
||||
this.qp = true
|
||||
}
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏3",
|
||||
);
|
||||
this.qp = true;
|
||||
'不是全屏3'
|
||||
)
|
||||
this.qp = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-tooltip__popper {
|
||||
|
|
|
|||
|
|
@ -80,14 +80,13 @@
|
|||
}}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<DisplayList :displayList="displayList" showKey="channelName"></DisplayList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InfrastructureTree from './infrastructure-tree.vue'
|
||||
import DisplayList from './display-list.vue';
|
||||
import DisplayList from './display-list.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -102,7 +101,7 @@ export default {
|
|||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "基础设施"
|
||||
default: '基础设施'
|
||||
},
|
||||
modalType: {
|
||||
type: String,
|
||||
|
|
@ -111,8 +110,8 @@ export default {
|
|||
},
|
||||
data () {
|
||||
const getYunList = () => {
|
||||
let yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP'];
|
||||
let arr = []
|
||||
const yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP']
|
||||
const arr = []
|
||||
yunList.map(v => arr.push({ labelCode: v, labelName: v }))
|
||||
return arr
|
||||
}
|
||||
|
|
@ -124,9 +123,9 @@ export default {
|
|||
displayList: [], // 用于展示的list
|
||||
btnList: ['视频资源', '云资源', '感知资源'],
|
||||
showText: {
|
||||
'视频资源': '视频标签',
|
||||
'云资源': '云资源分类',
|
||||
'感知资源': '感知资源分类',
|
||||
视频资源: '视频标签',
|
||||
云资源: '云资源分类',
|
||||
感知资源: '感知资源分类'
|
||||
},
|
||||
tabData: [
|
||||
{
|
||||
|
|
@ -140,13 +139,13 @@ export default {
|
|||
{
|
||||
tabName: '感知资源',
|
||||
list: []
|
||||
},
|
||||
}
|
||||
],
|
||||
currentList: [],
|
||||
dataListLoading: false,
|
||||
dataList: [],
|
||||
pageData: {
|
||||
total: 0,
|
||||
total: 0
|
||||
},
|
||||
cameraName: '',
|
||||
postData: {},
|
||||
|
|
@ -181,7 +180,7 @@ export default {
|
|||
methods: {
|
||||
selectCheckbox () {
|
||||
if (this.selectedArray.length > 0) {
|
||||
let list = []
|
||||
const list = []
|
||||
this.dataList.forEach((item) => {
|
||||
this.selectedArray.forEach(val => {
|
||||
if (val === item.idtCameraChannel) {
|
||||
|
|
@ -197,29 +196,29 @@ export default {
|
|||
}
|
||||
},
|
||||
showAction () {
|
||||
this.showModal = true;
|
||||
this.showModal = true
|
||||
},
|
||||
// 详情
|
||||
async getDataInfo (dataForm) {
|
||||
this.modalType == 'edit'
|
||||
this.dataFormCopy = dataForm;
|
||||
await this.getVideoBtn();
|
||||
let arr = [];
|
||||
let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
|
||||
this.dataFormCopy = dataForm
|
||||
await this.getVideoBtn()
|
||||
const arr = []
|
||||
const attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
|
||||
if (attrValue.length > 0) {
|
||||
attrValue.map(val => {
|
||||
let _obj = Object.assign({}, val, val.resource)
|
||||
arr.push(_obj);
|
||||
});
|
||||
const _obj = Object.assign({}, val, val.resource)
|
||||
arr.push(_obj)
|
||||
})
|
||||
}
|
||||
// 展示
|
||||
this.displayList = JSON.parse(JSON.stringify(arr));
|
||||
this.displayList = JSON.parse(JSON.stringify(arr))
|
||||
// 已选中
|
||||
this.selectedArray = arr.map(v => v.idtCameraChannel);
|
||||
this.selectedArrayCopy = JSON.parse(JSON.stringify(arr));
|
||||
this.selectedArray = arr.map(v => v.idtCameraChannel)
|
||||
this.selectedArrayCopy = JSON.parse(JSON.stringify(arr))
|
||||
|
||||
this.dataList = JSON.parse(JSON.stringify(arr));
|
||||
this.pageData.total = arr.length;
|
||||
this.dataList = JSON.parse(JSON.stringify(arr))
|
||||
this.pageData.total = arr.length
|
||||
// 默认选中复选框
|
||||
this.$nextTick(() => {
|
||||
this.selectCheckbox()
|
||||
|
|
@ -227,21 +226,21 @@ export default {
|
|||
},
|
||||
// 点击复选框
|
||||
dataListSelectionChangeHandle (data) {
|
||||
this.selectedArray = data;
|
||||
this.selectedArray = data
|
||||
},
|
||||
pageCurrentChangeHandle (pageNum) {
|
||||
this.searchData.pageNum = pageNum;
|
||||
this.searchData.pageNum = pageNum
|
||||
this.getData()
|
||||
},
|
||||
pageSizeChangeHandle (pageSize) {
|
||||
this.searchData.pageSize = pageSize;
|
||||
this.searchData.pageSize = pageSize
|
||||
this.getData()
|
||||
},
|
||||
changeBtn (btn) {
|
||||
this.activeBtn = btn;
|
||||
this.currentList = this.tabData.find(v => v.tabName == btn).list || [];
|
||||
this.checkList = [];
|
||||
this.searchData.cameraName = '';
|
||||
this.activeBtn = btn
|
||||
this.currentList = this.tabData.find(v => v.tabName == btn).list || []
|
||||
this.checkList = []
|
||||
this.searchData.cameraName = ''
|
||||
this.getData()
|
||||
},
|
||||
// 获取视频标签列表
|
||||
|
|
@ -250,22 +249,21 @@ export default {
|
|||
this.$http.get('/api/project/selectAllLabel', {}).then(res => {
|
||||
resolve(res)
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.tabData[0].list = res.data.data || [];
|
||||
this.tabData[0].list = res.data.data || []
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || [];
|
||||
this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || []
|
||||
if (this.modalType == 'add') {
|
||||
this.clear()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
this.$message.error(err);
|
||||
this.$message.error(err)
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
// 视频-清空标签
|
||||
clearVideo () {
|
||||
|
|
@ -274,7 +272,7 @@ export default {
|
|||
},
|
||||
// 切换视频
|
||||
changeVideoBtn (item) {
|
||||
let _index = this.checkList.findIndex(v => item.labelCode == v)
|
||||
const _index = this.checkList.findIndex(v => item.labelCode == v)
|
||||
if (_index > -1) {
|
||||
this.checkList.splice(_index, 1)
|
||||
} else {
|
||||
|
|
@ -286,29 +284,29 @@ export default {
|
|||
},
|
||||
// 获取列表
|
||||
getData () {
|
||||
let postData = Object.assign({}, {
|
||||
const postData = Object.assign({}, {
|
||||
checkStatus: 1,
|
||||
gpsX: '',
|
||||
gpsY: '',
|
||||
radius: '',
|
||||
labelCodes: this.checkList.join(),
|
||||
}, this.searchData);
|
||||
labelCodes: this.checkList.join()
|
||||
}, this.searchData)
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
|
||||
resolve(res)
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataList = res.data.data || []
|
||||
this.pageData.total = res.data.count || 0;
|
||||
this.pageData.total = res.data.count || 0
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
this.$message.error(err);
|
||||
this.$message.error(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
changeParentId (parentId) {
|
||||
this.searchData.parentId = parentId;
|
||||
this.searchData.parentId = parentId
|
||||
this.getData(parentId)
|
||||
},
|
||||
clearSelectArray () {
|
||||
|
|
@ -318,41 +316,40 @@ export default {
|
|||
},
|
||||
confirmSubmitHandle () {
|
||||
// 新选择的
|
||||
let idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
|
||||
const idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
|
||||
// 选过的
|
||||
let newIdArray = this.selectedArrayCopy.map(v => v.idtCameraChannel)
|
||||
let idArray = [...new Set(newIdArray.concat(idtCameraChannelArray))]
|
||||
const newIdArray = this.selectedArrayCopy.map(v => v.idtCameraChannel)
|
||||
const idArray = [...new Set(newIdArray.concat(idtCameraChannelArray))]
|
||||
if (idArray.length > this.maxNum) {
|
||||
return this.$message.error('最多选择十条数据！');
|
||||
return this.$message.error('最多选择十条数据！')
|
||||
}
|
||||
|
||||
let listArray = [].concat(this.selectedArrayCopy, this.dataList);
|
||||
this.displayList = [];
|
||||
const listArray = [].concat(this.selectedArrayCopy, this.dataList)
|
||||
this.displayList = []
|
||||
idArray.map(v => {
|
||||
let obj = listArray.find(k => k.idtCameraChannel === v)
|
||||
const obj = listArray.find(k => k.idtCameraChannel === v)
|
||||
if (obj) {
|
||||
this.displayList.push({
|
||||
channelName: obj.channelName
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
this.$emit('update', {
|
||||
title: this.type,
|
||||
list: idArray,
|
||||
list: idArray
|
||||
})
|
||||
this.showModal = false;
|
||||
this.showModal = false
|
||||
},
|
||||
close () {
|
||||
this.showModal = false;
|
||||
this.showModal = false
|
||||
this.searchData.cameraName = ''
|
||||
// this.selectedArray = [];
|
||||
this.$emit('closeModal');
|
||||
this.$emit('closeModal')
|
||||
},
|
||||
clear () {
|
||||
this.changeBtn('视频资源')
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue