add:赋能场景基础设施弹框
This commit is contained in:
parent
2bcc93b0d6
commit
f161ca967a
|
|
@ -2,12 +2,7 @@
|
|||
<div>
|
||||
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<div style="
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
">
|
||||
<div class="first-title">
|
||||
填写字段
|
||||
</div>
|
||||
<el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
|
||||
|
|
@ -369,4 +364,12 @@ export default {
|
|||
.input-box {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
||||
.first-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,7 @@
|
|||
<div>
|
||||
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<div style="
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
">
|
||||
<div class="first-title">
|
||||
填写字段
|
||||
</div>
|
||||
<el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
|
||||
|
|
@ -36,6 +31,11 @@
|
|||
<el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述" style="width:90%">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="img">
|
||||
<upload :key="1" type="图片" btnName="上传图片" :maxCount="1" :data="imgData" :list="[]" tip="支持图片类型，大小不超过100M">
|
||||
</upload>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 场景痛点 -->
|
||||
|
|
@ -55,8 +55,10 @@
|
|||
<div class="title">
|
||||
组合能力
|
||||
</div>
|
||||
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
|
||||
:getDataParams="getListParams['基础设施']"></combine-ability>
|
||||
<!-- <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
|
||||
:getDataParams="getListParams['基础设施']"></combine-ability> -->
|
||||
<InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
|
||||
ref="jcssDom"></InfrastructureModal>
|
||||
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
|
||||
:getDataParams="getListParams['数据资源']"></combine-ability>
|
||||
<combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
|
||||
|
|
@ -93,12 +95,16 @@ import qs from "qs";
|
|||
import SceneUseStep from './components/scene-use-step.vue';
|
||||
import SceneOneInput from './components/scene-one-input.vue';
|
||||
import CombineAbility from '../components/combine-ability.vue';
|
||||
import IntegratedCombineAbility from '../components/integrated-combine-ability.vue';
|
||||
import Cookies from 'js-cookie'
|
||||
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'
|
||||
|
||||
|
||||
|
||||
let btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
|
||||
|
||||
// 数据资源\组件服务
|
||||
export const getJson = (type) => {
|
||||
return {
|
||||
methods: 'get',
|
||||
|
|
@ -117,18 +123,13 @@ export const getDescJson = (text) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 弹框的方法
|
||||
export const getListParams = {
|
||||
'基础设施': {
|
||||
methods: 'get',
|
||||
url: '',
|
||||
postData: {
|
||||
|
||||
}
|
||||
},
|
||||
'数据资源': getJson('数据资源'),
|
||||
'组件服务': getJson('组件服务'),
|
||||
}
|
||||
|
||||
// 模态框标题
|
||||
export const modalTypeText = {
|
||||
add: '挂接',
|
||||
update: '修改'
|
||||
|
|
@ -157,10 +158,11 @@ export const getFuseResourceList = (abilityListObj) => {
|
|||
export default {
|
||||
components: {
|
||||
SceneUseStep,
|
||||
IntegratedCombineAbility,
|
||||
CommonQuestion,
|
||||
CombineAbility,
|
||||
SceneOneInput,
|
||||
upload,
|
||||
CommonQuestion,
|
||||
InfrastructureModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -175,6 +177,7 @@ export default {
|
|||
painKeyTextObj: getDescJson('痛点'),
|
||||
solutionKeyTextObj: getDescJson('方案'),
|
||||
dataForm: {
|
||||
"name": "",
|
||||
"applicationArea": "",
|
||||
"description": "",
|
||||
"fuseAttrList": [
|
||||
|
|
@ -201,12 +204,6 @@ export default {
|
|||
"sequence": ""
|
||||
}
|
||||
],
|
||||
"mobile": "",
|
||||
"name": "",
|
||||
"provider": "",
|
||||
"providerMobile": "",
|
||||
"providerUser": "",
|
||||
"deptUser": "",
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
|
|
@ -242,7 +239,8 @@ export default {
|
|||
'jcssDom': '基础设施',
|
||||
},
|
||||
getListParams: getListParams,
|
||||
abilityListObj: {}
|
||||
abilityListObj: {},
|
||||
imgData: []
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
|
@ -362,6 +360,9 @@ export default {
|
|||
console.log('this.dataForm----详情-------->', this.dataForm);
|
||||
})
|
||||
},
|
||||
changeInfoList() {
|
||||
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearForm()
|
||||
|
|
@ -403,7 +404,7 @@ export default {
|
|||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.mod-sys__menu {
|
||||
|
||||
.menu-list,
|
||||
|
|
@ -478,4 +479,11 @@ export default {
|
|||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.first-title {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,436 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="top flex-row-start">
|
||||
<div class="type">{{ type }}</div>
|
||||
<el-button type="primary" size="small" @click="showModal = true">添加</el-button>
|
||||
</div>
|
||||
<el-dialog class="modal-box" :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false" :key="showKey" append-to-body>
|
||||
<div class="infrastructure-box">
|
||||
<div class="search-box">
|
||||
<div class="flex-row-start" style="margin-bottom:10px">
|
||||
<div class="left-text">设施类型</div>
|
||||
<div class="flex-row-start btn-list">
|
||||
<div class="btn-text" v-for="(item) in btnList" :key="item"
|
||||
:class="{ 'active-btn': item === activeBtn }" @click="changeBtn(item)">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
|
||||
<div class="left-text" style="margin-top: 8px;">{{ showText[activeBtn] }}</div>
|
||||
<div style="flex:1;">
|
||||
<el-button v-if="activeBtn == '视频资源'" type="primary"
|
||||
style="margin-left:10px;margin-bottom:10px" size="small" @click="clearVideo">清空
|
||||
</el-button>
|
||||
<div class="flex-row-start btn-list video-btn-list">
|
||||
<div class="btn-text" v-for="(item) in currentList" :key="item.labelCode"
|
||||
:class="{ 'active-btn': checkList.includes(item.labelCode) }"
|
||||
@click="changeVideoBtn(item)">
|
||||
{{ item.labelName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
|
||||
<div class="left-text" style="margin-top: 10px;">关键词</div>
|
||||
<el-input style="margin-left:10px;width: 200px;" v-model="cameraName" placeholder="名称"
|
||||
clearable>
|
||||
</el-input>
|
||||
<el-button type="primary" style="margin-left:10px;margin-top:4px" size="small" @click="getData">
|
||||
搜索
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tree-table-box">
|
||||
<InfrastructureTree @changeParentId="changeParentId"></InfrastructureTree>
|
||||
<div class="table-box">
|
||||
<el-table v-loading="dataListLoading" :data="dataList" border
|
||||
@selection-change="dataListSelectionChangeHandle"
|
||||
style="width: 95%;margin: 0 auto 10px auto" size="mini">
|
||||
<el-table-column type="selection" header-align="center" align="center" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column prop="channelName" label="名称" header-align="center" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="nodeName" label="归属" header-align="center" align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination style="justify-content: center;display: flex;" :current-page="pageData.page"
|
||||
:page-sizes="[10, 20, 50, 100]" :page-size="pageData.limit" :total="pageData.total"
|
||||
layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
|
||||
@current-change="pageCurrentChangeHandle">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template slot="footer">
|
||||
<el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
|
||||
<el-button type="primary" @click="confirmSubmitHandle()">{{
|
||||
$t("confirm")
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InfrastructureTree from './infrastructure-tree.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InfrastructureTree,
|
||||
},
|
||||
props: {
|
||||
// 最多选择的数据个数
|
||||
maxNum: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "基础设施"
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const getYunList = () => {
|
||||
let yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP'];
|
||||
let arr = []
|
||||
yunList.map(v => arr.push({ labelCode: v, labelName: v }))
|
||||
return arr
|
||||
}
|
||||
return {
|
||||
showKey: 0,
|
||||
showModal: false,
|
||||
transferData: [], // 穿梭框所有数据
|
||||
selectedArray: [], // 已选择的数据id
|
||||
allData: [],
|
||||
displayList: [], // 用于展示的list
|
||||
btnList: ['视频资源', '云资源', '感知资源'],
|
||||
showText: {
|
||||
'视频资源': '视频标签',
|
||||
'云资源': '云资源分类',
|
||||
'感知资源': '感知资源分类',
|
||||
},
|
||||
tabData: [
|
||||
{
|
||||
tabName: '视频资源',
|
||||
list: []
|
||||
},
|
||||
{
|
||||
tabName: '云资源',
|
||||
list: getYunList()
|
||||
},
|
||||
{
|
||||
tabName: '感知资源',
|
||||
list: []
|
||||
},
|
||||
],
|
||||
activeBtn: '视频资源',
|
||||
checkList: [],
|
||||
currentList: [],
|
||||
dataListLoading: false,
|
||||
dataList: [],
|
||||
pageData: {
|
||||
limit: 10,
|
||||
page: 1,
|
||||
total: 0,
|
||||
},
|
||||
cameraName: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showModal(newVal) {
|
||||
if (newVal) {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获取视频资源
|
||||
this.getVideoBtn()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
handleShowModal() {
|
||||
this.showModal = true;
|
||||
},
|
||||
// 点击复选框
|
||||
dataListSelectionChangeHandle(data) {
|
||||
this.selectedArray = data;
|
||||
},
|
||||
pageCurrentChangeHandle(page) {
|
||||
this.pageData.page = page;
|
||||
this.getData()
|
||||
},
|
||||
pageSizeChangeHandle(limit) {
|
||||
this.pageData.limit = limit;
|
||||
this.getData()
|
||||
},
|
||||
changeBtn(btn) {
|
||||
this.activeBtn = btn;
|
||||
this.checkList = [];
|
||||
this.cameraName = '';
|
||||
this.getData()
|
||||
this.currentList = this.tabData.find(v => v.tabName == btn).list || []
|
||||
},
|
||||
// 获取视频标签列表
|
||||
getVideoBtn(btn) {
|
||||
this.$http.get('/api/project/selectAllLabel', {}).then(res => {
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.tabData[0].list = res.data.data || [];
|
||||
|
||||
this.changeBtn(this.activeBtn)
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
// 视频-清空标签
|
||||
clearVideo() {
|
||||
this.checkList = []
|
||||
this.getData()
|
||||
},
|
||||
// 切换视频
|
||||
changeVideoBtn(item) {
|
||||
let _index = this.checkList.findIndex(v => item.labelCode == v)
|
||||
if (_index > -1) {
|
||||
this.checkList.splice(_index, 1)
|
||||
} else {
|
||||
this.checkList.push(item.labelCode)
|
||||
}
|
||||
},
|
||||
// 获取列表
|
||||
getData(parentId = '') {
|
||||
this.allData = [];
|
||||
let postData = {
|
||||
parentId: parentId,
|
||||
cameraName: this.cameraName,
|
||||
checkStatus: 1,
|
||||
pageNum: this.pageData.page,
|
||||
pageSize: this.pageData.limit,
|
||||
gpsX: '',
|
||||
gpsY: '',
|
||||
radius: '',
|
||||
labelCodes: '',
|
||||
}
|
||||
this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.dataList = res.data.data || []
|
||||
this.pageData.total = res.data.count || 0;
|
||||
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
changeParentId(parentId) {
|
||||
this.getData(parentId)
|
||||
},
|
||||
confirmSubmitHandle() {
|
||||
if (this.selectedArray.length > this.maxNum) {
|
||||
return this.$message.error('最多选择十条数据！');
|
||||
}
|
||||
this.showModal = false;
|
||||
this.displayList = []
|
||||
this.dataList.map(v => {
|
||||
if (this.selectedArray.includes(v.id)) {
|
||||
this.displayList.push(v)
|
||||
}
|
||||
})
|
||||
this.$emit('update', {
|
||||
title: this.type,
|
||||
list: this.selectedArray
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.showModal = false;
|
||||
this.cameraName = ''
|
||||
this.selectedArray = [];
|
||||
this.allData = [];
|
||||
this.transferData = [];
|
||||
this.$emit('closeModal');
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ability-box {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.show-box {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.type {
|
||||
padding-right: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
width: 100px;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
width: 380px;
|
||||
text-align: left;
|
||||
margin-right: 10px;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-row-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
.btn-list {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left-text {
|
||||
width: 90px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
// width: 80px;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #ccc;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
|
||||
.active-btn {
|
||||
background: #0058e1;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border: 1px solid #0058e1;
|
||||
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.video-btn-list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.type {
|
||||
padding-right: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
width: 100px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-table-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-box {
|
||||
width: calc(100% - 400px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.icon-input ::v-deep .el-input__inner {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
height: 580px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
.relate-application-content {
|
||||
height: 100%;
|
||||
|
||||
::v-deep .el-transfer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel {
|
||||
width: 39.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel__body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel__list.is-filterable {
|
||||
height: calc(100% - 102px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="wrapper-title-left-tree" :key="showKey">
|
||||
<div v-for="item in treeData" :key="item.id" class="primaryNode">
|
||||
<div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
|
||||
{{ item.name }}
|
||||
({{ item.channelCount }})
|
||||
<i class="el-icon-arrow-down" v-show="!item.show"></i>
|
||||
<i class="el-icon-arrow-top" v-show="item.show"></i>
|
||||
</div>
|
||||
<div class="bottom" v-show="item.show">
|
||||
<div v-for="val in item.children" :key="val.id" class="item">
|
||||
<div class="up" :class="selectId == val.id ? 'select' : ''"
|
||||
@click="showDown(item, val), onSelect(item, val)">
|
||||
<div>
|
||||
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="25px" height="25px"
|
||||
v-show="selectId == val.id">
|
||||
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157"
|
||||
fill="#0058e1"></path>
|
||||
</svg>
|
||||
<span class="name">{{ val.name }}({{ val.channelCount }})</span>
|
||||
</div>
|
||||
<span v-if="item.children.length < 0">{{ val.total }}</span>
|
||||
<span v-else>
|
||||
<i class="el-icon-arrow-down" v-show="!val.show"></i>
|
||||
<i class="el-icon-arrow-top" v-show="val.show"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="down" v-show="val.show">
|
||||
<div v-for="child in val.children" :key="child.id" class="child"
|
||||
:class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
|
||||
<div>
|
||||
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="25px" height="25px"
|
||||
v-show="selectId == child.id">
|
||||
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157"
|
||||
fill="#0058e1"></path>
|
||||
</svg>
|
||||
<span class="name">
|
||||
{{ child.name }}
|
||||
</span>
|
||||
</div>
|
||||
<span>{{ child.channelCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedKeys: [],
|
||||
checkedKeys: [],
|
||||
showKey: 0,
|
||||
treeData: [],
|
||||
selectId: '',
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkedKeys(val) {
|
||||
if (val.checked.length > 1) {
|
||||
val.checked.halfChecked = val.checked.shift()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
getCameraAllOrgan(params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('/api/project/selectSubOrganNew', { params }).then(res => {
|
||||
resolve(res)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
init() {
|
||||
this.treeData = []
|
||||
this.getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
|
||||
(res) => {
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.treeData = res.data.data
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
onSelect(item, val, child) {
|
||||
// mybus.emit('getListByParentId', val.id)
|
||||
this.getCameraAllOrgan({ parentId: val.id }).then((res) => {
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.treeData.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
this.treeData[index].children.map((childItem, childIndex) => {
|
||||
if (childItem.id == val.id) {
|
||||
this.treeData[index].children[childIndex].children =
|
||||
res.data.data;
|
||||
this.$nextTick(() => {
|
||||
this.treeData = this.treeData.splice(0)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
if (child) {
|
||||
this.selectId = child.id
|
||||
}
|
||||
},
|
||||
showBottom(item) {
|
||||
item.show = !item.show;
|
||||
this.getCameraAllOrgan({ parentId: item.id }).then((res) => {
|
||||
if (res.data.code !== 1) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.treeData.map((treeDataItem, index) => {
|
||||
if (item.id == treeDataItem.id) {
|
||||
this.treeData[index].children = res.data.data || []
|
||||
this.$nextTick(() => {
|
||||
this.treeData = this.treeData.splice(0)
|
||||
console.log('this.treeData.[index]', this.treeData[index])
|
||||
})
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$message.error(err);
|
||||
})
|
||||
},
|
||||
showDown(item, val) {
|
||||
console.log('showDown', val)
|
||||
if (item.children) {
|
||||
val.show = !val.show
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
margin-right: 20px;
|
||||
width: 300px;
|
||||
|
||||
|
||||
.primaryNode {
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgba(0, 135, 225, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.top:hover {
|
||||
cursor: pointer;
|
||||
// 0058e1 透明度 0.5
|
||||
background: rgba(0, 88, 225, 0.8);
|
||||
color: white;
|
||||
|
||||
:deep(.anticon) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.topSelect {
|
||||
background: #0058e1;
|
||||
color: white;
|
||||
|
||||
:deep(.anticon) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
padding: 0 10px;
|
||||
|
||||
.up {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 0 10px;
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.up:hover {
|
||||
.name {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
padding: 0 0.1rem 0 0;
|
||||
|
||||
.name {
|
||||
width: 190px;
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-of-type(1) .up {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.down {
|
||||
width: 100%;
|
||||
|
||||
.child {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.child:hover {
|
||||
.name {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.select2 {
|
||||
.name {
|
||||
width: 190px;
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,12 +21,9 @@
|
|||
</el-form>
|
||||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
|
||||
style="width: 100%" :height="qp ? '810px' : '650px'">
|
||||
|
||||
<el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
|
||||
|
||||
<el-table-column prop="description" label="描述" header-align="center" align="center"></el-table-column>
|
||||
|
||||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="300" right="0">
|
||||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="240" right="0">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
|
||||
@click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,15 @@
|
|||
<el-button type="primary" size="small" @click="showModal = true">添加</el-button>
|
||||
</div>
|
||||
|
||||
<el-dialog :visible.sync="showModal" title="关联应用" @close="close" :close-on-click-modal="false"
|
||||
<el-dialog :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false" :key="showKey" append-to-body>
|
||||
<div class="relate-application-content">
|
||||
<el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
|
||||
:titles="nameArray" :props="{
|
||||
key: 'id',
|
||||
label: 'name',
|
||||
}" :data="transferData"></el-transfer>
|
||||
}" :data="transferData">
|
||||
</el-transfer>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
|
||||
|
|
@ -38,6 +39,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import InfrastructureModal from '../assignedScene/components/infrastructure-modal.vue'
|
||||
|
||||
|
||||
let sjzyArray = [
|
||||
{
|
||||
|
|
@ -146,17 +149,13 @@ let keyObj = {
|
|||
idKey: 'zycode',
|
||||
nameKey: 'zyname'
|
||||
},
|
||||
'基础设施': {
|
||||
idKey: 'zycode',
|
||||
nameKey: 'zyname'
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: ""
|
||||
},
|
||||
nameArray: {
|
||||
type: Array,
|
||||
|
|
@ -171,10 +170,10 @@ export default {
|
|||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
methods: 'get',
|
||||
url: '',
|
||||
methods: "get",
|
||||
url: "",
|
||||
postData: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -182,24 +181,24 @@ export default {
|
|||
return {
|
||||
showKey: 0,
|
||||
showModal: false,
|
||||
transferData: [], // 穿梭框所有数据
|
||||
selectedArray: [], // 已选择的数据id
|
||||
transferData: [],
|
||||
selectedArray: [],
|
||||
allData: [],
|
||||
displayList: [], // 用于展示的list
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showModal(newVal) {
|
||||
if (newVal) {
|
||||
this.getData()
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getDataInfo(dataForm) {
|
||||
await this.getData()
|
||||
let arr = []
|
||||
let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
|
||||
await this.getData();
|
||||
let arr = [];
|
||||
let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
|
||||
if (attrValue.length > 0) {
|
||||
attrValue.map(val => {
|
||||
let item = this.allData.find(v => v.id == val.resourceId) || {};
|
||||
|
|
@ -207,17 +206,17 @@ export default {
|
|||
type: val.type,
|
||||
id: val.resourceId,
|
||||
name: item.name
|
||||
}
|
||||
arr.push(_obj)
|
||||
})
|
||||
};
|
||||
arr.push(_obj);
|
||||
});
|
||||
}
|
||||
// 展示
|
||||
this.displayList = JSON.parse(JSON.stringify(arr));
|
||||
// 已选中
|
||||
this.selectedArray = arr.map(v => v.id);
|
||||
this.$nextTick(() => {
|
||||
console.log(999, this.displayList)
|
||||
})
|
||||
console.log(999, this.displayList);
|
||||
});
|
||||
},
|
||||
// 获取列表
|
||||
getData() {
|
||||
|
|
@ -231,21 +230,19 @@ export default {
|
|||
// }
|
||||
// this.transferData = res.data.data || [] // allData
|
||||
// this.allData = res.data.data || []
|
||||
|
||||
// }).catch(err => {
|
||||
// this.$message.error(err);
|
||||
// })
|
||||
this.allData = []
|
||||
this.transferData = []
|
||||
this.allData = [];
|
||||
this.transferData = [];
|
||||
let arr = JSON.parse(JSON.stringify(sjzyArray));
|
||||
|
||||
arr.map(v => {
|
||||
this.transferData.push({
|
||||
type: this.type,
|
||||
id: v[keyObj[this.type].idKey],
|
||||
name: v[keyObj[this.type].nameKey] || '--'
|
||||
})
|
||||
})
|
||||
name: v[keyObj[this.type].nameKey] || "--"
|
||||
});
|
||||
});
|
||||
this.allData = JSON.parse(JSON.stringify(this.transferData));
|
||||
},
|
||||
filterMethod(query, item) {
|
||||
|
|
@ -253,30 +250,33 @@ export default {
|
|||
},
|
||||
confirmSubmitHandle() {
|
||||
if (this.selectedArray.length > this.maxNum) {
|
||||
return this.$message.error('最多选择十条数据！');
|
||||
return this.$message.error("最多选择十条数据！");
|
||||
}
|
||||
this.showModal = false;
|
||||
this.displayList = []
|
||||
this.displayList = [];
|
||||
this.allData.map(v => {
|
||||
if (this.selectedArray.includes(v.id)) {
|
||||
this.displayList.push(v)
|
||||
this.displayList.push(v);
|
||||
}
|
||||
})
|
||||
this.displayList = this.displayList.concat(this.displayList)
|
||||
this.$emit('update', {
|
||||
});
|
||||
this.$emit("update", {
|
||||
title: this.type,
|
||||
list: this.selectedArray
|
||||
})
|
||||
});
|
||||
},
|
||||
getDisplay(displayList) {
|
||||
this.displayList = []
|
||||
this.displayList = displayList
|
||||
},
|
||||
close() {
|
||||
// this.$emit("isShowRelatePopup", false);
|
||||
this.showModal = false;
|
||||
this.selectedArray = []
|
||||
this.allData = []
|
||||
this.transferData = []
|
||||
this.selectedArray = [];
|
||||
this.allData = [];
|
||||
this.transferData = [];
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
components: { InfrastructureModal }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -131,38 +131,6 @@
|
|||
treeData.value = res.data.data
|
||||
}
|
||||
)
|
||||
// selectDeptList({ type: select }).then((res) => {
|
||||
// // console.log('区划数据=========================>', res.data.data)
|
||||
// res.data.data.forEach((val) => {
|
||||
// if (val.type !== '全部能力目录') {
|
||||
// let obj = {
|
||||
// title: val.type,
|
||||
// total: val.total,
|
||||
// show: val.type === '市级' ? true : false,
|
||||
// select: false,
|
||||
// key: val.type,
|
||||
// children: [],
|
||||
// }
|
||||
// switch (val.type) {
|
||||
// case '市级':
|
||||
// case '其他':
|
||||
// generateChildren(val, obj)
|
||||
// break
|
||||
// case '区级':
|
||||
// generateChildren2(val, obj)
|
||||
// break
|
||||
// }
|
||||
// treeData.value.push(obj)
|
||||
// }
|
||||
// })
|
||||
// // 排序
|
||||
// const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
|
||||
// treeData.value.sort((a, b) => {
|
||||
// return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
|
||||
// })
|
||||
// console.log('左侧树结构数据======================>', treeData.value)
|
||||
// showKey.value++
|
||||
// })
|
||||
}
|
||||
}
|
||||
mybus.on('getDeptList', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue