赋能案例--数据资源
This commit is contained in:
gaoyuanwei
parent
ca51b29fbc
commit
244123dd74
|
|
@ -94,24 +94,38 @@
|
|||
</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 CombineAbility from '../components/combine-ability.vue';
|
||||
import CommonQuestion from '../components/common-question.vue';
|
||||
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 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'
|
||||
|
||||
let btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
|
||||
const btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
|
||||
// 数据资源\组件服务
|
||||
export const getJson = (type) => {
|
||||
return {
|
||||
methods: 'get',
|
||||
url: '/census/center/selectResourceListByType',
|
||||
postData: {
|
||||
type
|
||||
if (type === '组件服务') {
|
||||
return {
|
||||
methods: 'get',
|
||||
url: '/census/center/selectResourceListByType',
|
||||
postData: {
|
||||
type
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
methods: 'post',
|
||||
url: '/resource/getDataResource',
|
||||
postData: {
|
||||
serviceName: '', // 资源名称
|
||||
orderField: 'fbrq', // 排序字段
|
||||
orderType: 'desc',
|
||||
pageNum: 1, // 页码
|
||||
pageSize: 15 // 分页大小
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -120,14 +134,14 @@ export const getDescJson = (text) => {
|
|||
descObj: {
|
||||
text: `${text}描述`,
|
||||
key: 'description'
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
// 弹框的方法
|
||||
export const getListParams = {
|
||||
'数据资源': getJson('数据资源'),
|
||||
'组件服务': getJson('组件服务'),
|
||||
'基础设施': ''
|
||||
数据资源: getJson('数据资源'),
|
||||
组件服务: getJson('组件服务'),
|
||||
基础设施: ''
|
||||
}
|
||||
// 模态框标题
|
||||
export const modalTypeText = {
|
||||
|
|
@ -136,13 +150,13 @@ export const modalTypeText = {
|
|||
}
|
||||
|
||||
export const getFuseResourceList = (abilityListObj) => {
|
||||
let arr = []
|
||||
const arr = []
|
||||
let length = 0
|
||||
for (const key in abilityListObj) {
|
||||
if (Object.hasOwnProperty.call(abilityListObj, key)) {
|
||||
const itemArray = abilityListObj[key];
|
||||
const itemArray = abilityListObj[key]
|
||||
itemArray.map((v, i) => {
|
||||
let index = (i + 1) + length
|
||||
const index = (i + 1) + length
|
||||
arr.push({
|
||||
resourceId: v,
|
||||
type: key,
|
||||
|
|
@ -162,9 +176,9 @@ export default {
|
|||
SceneOneInput,
|
||||
upload,
|
||||
CommonQuestion,
|
||||
InfrastructureModal,
|
||||
InfrastructureModal
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
moreKeyTextObj: {
|
||||
|
|
@ -172,80 +186,80 @@ export default {
|
|||
text: '能力名称',
|
||||
key: 'name'
|
||||
},
|
||||
...getDescJson('能力'),
|
||||
...getDescJson('能力')
|
||||
},
|
||||
painKeyTextObj: getDescJson('痛点'),
|
||||
solutionKeyTextObj: getDescJson('方案'),
|
||||
dataForm: {
|
||||
"name": "",
|
||||
"applicationArea": "",
|
||||
"description": "",
|
||||
"fuseAttrList": [
|
||||
name: '',
|
||||
applicationArea: '',
|
||||
description: '',
|
||||
fuseAttrList: [
|
||||
{
|
||||
"attrType": "使用步骤",
|
||||
"attrValue": [{ question: "", answer: "" }],
|
||||
attrType: '使用步骤',
|
||||
attrValue: [{ question: '', answer: '' }]
|
||||
},
|
||||
{
|
||||
"attrType": "更多能力",
|
||||
"attrValue": [{ name: "", description: "" }],
|
||||
attrType: '更多能力',
|
||||
attrValue: [{ name: '', description: '' }]
|
||||
},
|
||||
{
|
||||
"attrType": "场景痛点",
|
||||
"attrValue": [{ description: "" }],
|
||||
attrType: '场景痛点',
|
||||
attrValue: [{ description: '' }]
|
||||
},
|
||||
{
|
||||
"attrType": "解决方案",
|
||||
"attrValue": [{ description: "" }],
|
||||
attrType: '解决方案',
|
||||
attrValue: [{ description: '' }]
|
||||
},
|
||||
{
|
||||
"attrType": "服务图片",
|
||||
"attrValue": "",
|
||||
},
|
||||
attrType: '服务图片',
|
||||
attrValue: ''
|
||||
}
|
||||
],
|
||||
"fuseResourceList": [],
|
||||
fuseResourceList: []
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入名称",
|
||||
trigger: "change",
|
||||
},
|
||||
message: '请输入名称',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
description: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入描述",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
message: '请输入描述',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
checkList: JSON.parse(JSON.stringify(btnArray)),
|
||||
btnList: JSON.parse(JSON.stringify(btnArray)),
|
||||
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
|
||||
displayInfo: {
|
||||
'name': '名称',
|
||||
'description': '描述',
|
||||
name: '名称',
|
||||
description: '描述'
|
||||
},
|
||||
modalTypeText: modalTypeText,
|
||||
refsParseArray: {
|
||||
'sceneUseUpDom': '使用步骤',
|
||||
'moreAbilityDom': '更多能力',
|
||||
'scenePainDom': '场景痛点',
|
||||
'solutionDom': '解决方案',
|
||||
'zjfwDom': '组件服务',
|
||||
'sjzyDom': '数据资源',
|
||||
'jcssDom': '基础设施',
|
||||
sceneUseUpDom: '使用步骤',
|
||||
moreAbilityDom: '更多能力',
|
||||
scenePainDom: '场景痛点',
|
||||
solutionDom: '解决方案',
|
||||
zjfwDom: '组件服务',
|
||||
sjzyDom: '数据资源',
|
||||
jcssDom: '基础设施'
|
||||
},
|
||||
getListParams: getListParams,
|
||||
abilityListObj: {},
|
||||
imgData: [],
|
||||
// 限定图片
|
||||
handleExceed() {
|
||||
handleExceed () {
|
||||
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||
},
|
||||
imageUrl: '',
|
||||
};
|
||||
imageUrl: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modalType: {
|
||||
|
|
@ -259,47 +273,47 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
dataForm: {
|
||||
handler(newVal) {
|
||||
handler (newVal) {
|
||||
this.dataForm = newVal
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
immediate: true
|
||||
},
|
||||
addOrUpdateVisible: {
|
||||
handler(newVal) {
|
||||
this.addOrUpdateVisibleCopy = newVal;
|
||||
handler (newVal) {
|
||||
this.addOrUpdateVisibleCopy = newVal
|
||||
if (this.modalType == 'add' && newVal) {
|
||||
localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
|
||||
this.getDetail(this.dataForm)
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearForm() {
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields();
|
||||
clearForm () {
|
||||
this.$refs.dataForm && this.$refs.dataForm.resetFields()
|
||||
},
|
||||
closeModal() {
|
||||
closeModal () {
|
||||
this.$emit('closeModal')
|
||||
},
|
||||
// 更新表单
|
||||
updateDataForm(data) {
|
||||
updateDataForm (data) {
|
||||
if (Object.keys(this.getListParams).includes(data.title)) {
|
||||
this.abilityListObj[data.title] = data.list;
|
||||
this.abilityListObj[data.title] = data.list
|
||||
} else {
|
||||
// 更多能力、使用步骤
|
||||
this.operateFuseAttrList(data.title, data)
|
||||
}
|
||||
},
|
||||
getFuseResourceList() {
|
||||
getFuseResourceList () {
|
||||
return getFuseResourceList(this.abilityListObj)
|
||||
},
|
||||
operateFuseAttrList(title, data) {
|
||||
operateFuseAttrList (title, data) {
|
||||
if (this.dataForm.fuseAttrList.every(v => v.attrType !== title)) {
|
||||
this.dataForm.fuseAttrList.push({
|
||||
'attrType': title,
|
||||
'attrValue': JSON.stringify(data.list)
|
||||
attrType: title,
|
||||
attrValue: JSON.stringify(data.list)
|
||||
})
|
||||
} else {
|
||||
this.dataForm.fuseAttrList.map(v => {
|
||||
|
|
@ -310,71 +324,71 @@ export default {
|
|||
}
|
||||
},
|
||||
// 改变按钮状态
|
||||
changeBtn(data) {
|
||||
this.checkList = data;
|
||||
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 || '';
|
||||
let _obj = Object.assign({}, this.dataForm, {
|
||||
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
|
||||
const _obj = Object.assign({}, this.dataForm, {
|
||||
type: '赋能场景'
|
||||
})
|
||||
console.log('this.dataForm------表单提交------>', this.dataForm);
|
||||
console.log('this.dataForm------表单提交------>', this.dataForm)
|
||||
this.$http
|
||||
[methodsObj[this.modalType]]("/fuse", _obj)
|
||||
[methodsObj[this.modalType]]('/fuse', _obj)
|
||||
.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) {
|
||||
console.log('data---详情--------->', data);
|
||||
this.dataForm = data;
|
||||
getDetail (data) {
|
||||
console.log('data---详情--------->', data)
|
||||
this.dataForm = data
|
||||
this.$nextTick(() => {
|
||||
for (const key in this.refsParseArray) {
|
||||
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)
|
||||
})
|
||||
|
|
@ -382,13 +396,13 @@ export default {
|
|||
})
|
||||
})
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
handleAvatarSuccess (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.imageUrl = res.data
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
beforeAvatarUpload (file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
|
|
@ -398,11 +412,11 @@ export default {
|
|||
}
|
||||
return isImage
|
||||
},
|
||||
addUploadRemoveFile(file, fileList) {
|
||||
addUploadRemoveFile (file, fileList) {
|
||||
this.$refs.addUpload.clearFiles()
|
||||
this.imageUrl = ''
|
||||
},
|
||||
editBeforeAvatarUpload(file) {
|
||||
editBeforeAvatarUpload (file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
|
|
@ -413,21 +427,21 @@ export default {
|
|||
}
|
||||
return isImage
|
||||
},
|
||||
editUploadRemoveFile(file, fileList) {
|
||||
editUploadRemoveFile (file, fileList) {
|
||||
this.$refs.editUpload.clearFiles()
|
||||
this.imageUrl = ''
|
||||
},
|
||||
eidtHandleAvatarSuccess(res, file) {
|
||||
eidtHandleAvatarSuccess (res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.imageUrl = res.data
|
||||
},
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeDestroy () {
|
||||
this.clearForm()
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -466,10 +480,8 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.mod-sys__menu {
|
||||
|
||||
.menu-list,
|
||||
.icon-list {
|
||||
|
||||
.el-input__inner,
|
||||
.el-input__suffix {
|
||||
cursor: pointer;
|
||||
|
|
@ -493,11 +505,11 @@ export default {
|
|||
padding: 0;
|
||||
margin: -8px 0 0 -8px;
|
||||
|
||||
>.el-button {
|
||||
> .el-button {
|
||||
padding: 8px;
|
||||
margin: 8px 0 0 8px;
|
||||
|
||||
>span {
|
||||
> span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
|
|
|
|||
|
|
@ -2,19 +2,41 @@
|
|||
<div class="ability-box">
|
||||
<div class="top">
|
||||
<div class="type">{{ type }}</div>
|
||||
<el-button type="primary" size="small" @click="showModal = true">添加</el-button>
|
||||
<el-button type="primary" size="small" @click="clickOpen">添加</el-button>
|
||||
</div>
|
||||
|
||||
<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="请输入名称"
|
||||
<div class="relate-application-content" v-if="type==='组件服务'">
|
||||
<el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
|
||||
:titles="nameArray" :props="{
|
||||
key: 'id',
|
||||
label: 'name',
|
||||
}" :data="transferData">
|
||||
</el-transfer>
|
||||
</div>
|
||||
<div v-else-if="type==='数据资源'" class="dataTransfer">
|
||||
<el-transfer v-model="selectedArray" filter-placeholder="请输入名称"
|
||||
:titles="nameArray" :props="{
|
||||
key: 'id',
|
||||
label: 'name',
|
||||
}" :data="transferData">
|
||||
</el-transfer>
|
||||
<el-input
|
||||
v-model="searchValue"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
<el-button @click="rest" class="restClick">重置</el-button>
|
||||
</div>
|
||||
<el-pagination
|
||||
v-if="type==='数据资源'"
|
||||
:current-page="currentPage"
|
||||
:page-size="15"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="pageCurrentChangeHandle"
|
||||
>
|
||||
</el-pagination>
|
||||
<template slot="footer">
|
||||
<el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
|
||||
<el-button type="primary" @click="confirmSubmitHandle()">{{
|
||||
|
|
@ -173,7 +195,11 @@ export default {
|
|||
transferData: [],
|
||||
selectedArray: [],
|
||||
allData: [],
|
||||
displayList: [] // 用于展示的list
|
||||
displayList: [], // 用于展示的list
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
newNum: 1,
|
||||
searchValue: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -181,6 +207,18 @@ export default {
|
|||
if (newVal) {
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
newNum (newVal) {
|
||||
if (newVal) {
|
||||
this.getDataParams.postData.pageNum = newVal
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
searchValue (newVal) {
|
||||
if (newVal) {
|
||||
this.getDataParams.postData.serviceName = newVal
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -212,28 +250,55 @@ export default {
|
|||
if (this.getDataParams.url === '') {
|
||||
return
|
||||
}
|
||||
this.$http[this.getDataParams.methods](this.getDataParams.url, {
|
||||
params: this.getDataParams.postData
|
||||
}).then(res => {
|
||||
console.log('res.data----获取列表-------->', res.data)
|
||||
if (res.data.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.transferData = []
|
||||
this.allData = [];
|
||||
(res.data.data || []).map(v => {
|
||||
this.transferData.push({
|
||||
type: this.type,
|
||||
id: v[keyObj[this.type].idKey],
|
||||
name: v[keyObj[this.type].nameKey] || '--'
|
||||
if (this.type === '组件服务') {
|
||||
this.$http[this.getDataParams.methods](this.getDataParams.url, {
|
||||
params: this.getDataParams.postData
|
||||
}).then(res => {
|
||||
console.log('res.data----获取列表-------->', res.data)
|
||||
if (res.data.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.transferData = []
|
||||
this.allData = [];
|
||||
(res.data.data || []).map(v => {
|
||||
this.transferData.push({
|
||||
type: this.type,
|
||||
id: v[keyObj[this.type].idKey],
|
||||
name: v[keyObj[this.type].nameKey] || '--'
|
||||
})
|
||||
})
|
||||
this.allData = JSON.parse(JSON.stringify(this.transferData))
|
||||
console.log(this.allData, 'this.transferData')
|
||||
}).catch(err => {
|
||||
this.$message.error(err)
|
||||
})
|
||||
this.allData = JSON.parse(JSON.stringify(this.transferData))
|
||||
}).catch(err => {
|
||||
this.$message.error(err)
|
||||
})
|
||||
} else if (this.type === '数据资源') {
|
||||
this.getDataParams.postData.pageNum = this.newNum
|
||||
this.$http[this.getDataParams.methods](this.getDataParams.url,
|
||||
this.getDataParams.postData
|
||||
).then(res => {
|
||||
console.log('res.data----获取列表-------->', res.data)
|
||||
this.total = Number(res.data.data.rows)
|
||||
if (res.data.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.transferData = []
|
||||
this.allData = [];
|
||||
(res.data.data.data || []).map(v => {
|
||||
this.transferData.push({
|
||||
type: this.type,
|
||||
id: v.guid,
|
||||
name: v.zyname || '--'
|
||||
})
|
||||
})
|
||||
this.allData = JSON.parse(JSON.stringify(this.transferData))
|
||||
}).catch(err => {
|
||||
this.$message.error(err)
|
||||
})
|
||||
}
|
||||
},
|
||||
filterMethod (query, item) {
|
||||
console.log('1111111111111111111111111')
|
||||
return item.name && item.name.indexOf(query) > -1
|
||||
},
|
||||
confirmSubmitHandle () {
|
||||
|
|
@ -261,97 +326,150 @@ export default {
|
|||
this.selectedArray = []
|
||||
this.allData = []
|
||||
this.transferData = []
|
||||
},
|
||||
pageCurrentChangeHandle (val) {
|
||||
console.log(this.newNum, val, 'wowowo')
|
||||
this.newNum = val
|
||||
},
|
||||
clickOpen () {
|
||||
this.searchValue = ''
|
||||
this.getDataParams.postData.serviceName = ''
|
||||
this.currentPage = 1
|
||||
this.showModal = true
|
||||
this.getData()
|
||||
},
|
||||
rest () {
|
||||
this.currentPage = 1
|
||||
this.searchValue = ''
|
||||
this.getDataParams.postData.serviceName = ''
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
components: { InfrastructureModal, DisplayList }
|
||||
components: { InfrastructureModal, DisplayList },
|
||||
mounted () {
|
||||
console.log(this.type, 'this.type')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ability-box {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.show-box {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.show-box {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: 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;
|
||||
}
|
||||
.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-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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-input ::v-deep .el-input__inner {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
height: 580px;
|
||||
overflow: auto;
|
||||
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;
|
||||
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 {
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-transfer-panel {
|
||||
width: 39.5%;
|
||||
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__body {
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-transfer-panel__list.is-filterable {
|
||||
height: calc(100% - 102px);
|
||||
}
|
||||
}
|
||||
.dataTransfer {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
::v-deep .el-transfer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel__list.is-filterable {
|
||||
height: calc(100% - 102px);
|
||||
}
|
||||
::v-deep .el-transfer-panel {
|
||||
width: 39.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-transfer-panel__body {
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-transfer-panel__list {
|
||||
height: calc(100% - 102px);
|
||||
margin-top: 4rem;
|
||||
}
|
||||
::v-deep .el-input {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
top: 52px;
|
||||
left: 12px;
|
||||
}
|
||||
.restClick {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 284px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue