wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

赋能案例--数据资源

This commit is contained in:
gaoyuanwei 2022-08-26 18:55:19 +08:00
parent ca51b29fbc
commit 244123dd74
2 changed files with 329 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
back/src/views/modules/ability/assignedScene/add-update-scene.vue
View File

@ -94,24 +94,38 @@
</template> </template>
<script> <script>
import debounce from "lodash/debounce"; import debounce from 'lodash/debounce'
import qs from "qs"; import qs from 'qs'
import SceneUseStep from './components/scene-use-step.vue'; import SceneUseStep from './components/scene-use-step.vue'
import SceneOneInput from './components/scene-one-input.vue'; import SceneOneInput from './components/scene-one-input.vue'
import CombineAbility from '../components/combine-ability.vue'; import CombineAbility from '../components/combine-ability.vue'
import CommonQuestion from '../components/common-question.vue'; import CommonQuestion from '../components/common-question.vue'
import InfrastructureModal from './components/infrastructure-modal.vue' import InfrastructureModal from './components/infrastructure-modal.vue'
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import upload from '@/views/modules/components/upload' import upload from '@/views/modules/components/upload'
let btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤'] const btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
// 数据资源\组件服务 // 数据资源\组件服务
export const getJson = (type) => { export const getJson = (type) => {
return { if (type === '组件服务') {
methods: 'get', return {
url: '/census/center/selectResourceListByType', methods: 'get',
postData: { url: '/census/center/selectResourceListByType',
type 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: { descObj: {
text: `${text}描述`, text: `${text}描述`,
key: 'description' key: 'description'
}, }
} }
} }
// 弹框的方法 // 弹框的方法
export const getListParams = { export const getListParams = {
'数据资源': getJson('数据资源'), 数据资源: getJson('数据资源'),
'组件服务': getJson('组件服务'), 组件服务: getJson('组件服务'),
'基础设施': '' 基础设施: ''
} }
// 模态框标题 // 模态框标题
export const modalTypeText = { export const modalTypeText = {
@ -136,13 +150,13 @@ export const modalTypeText = {
} }
export const getFuseResourceList = (abilityListObj) => { export const getFuseResourceList = (abilityListObj) => {
let arr = [] const arr = []
let length = 0 let length = 0
for (const key in abilityListObj) { for (const key in abilityListObj) {
if (Object.hasOwnProperty.call(abilityListObj, key)) { if (Object.hasOwnProperty.call(abilityListObj, key)) {
const itemArray = abilityListObj[key]; const itemArray = abilityListObj[key]
itemArray.map((v, i) => { itemArray.map((v, i) => {
let index = (i + 1) + length const index = (i + 1) + length
arr.push({ arr.push({
resourceId: v, resourceId: v,
type: key, type: key,
@ -162,9 +176,9 @@ export default {
SceneOneInput, SceneOneInput,
upload, upload,
CommonQuestion, CommonQuestion,
InfrastructureModal, InfrastructureModal
}, },
data() { data () {
return { return {
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload', fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
moreKeyTextObj: { moreKeyTextObj: {
@ -172,80 +186,80 @@ export default {
text: '能力名称', text: '能力名称',
key: 'name' key: 'name'
}, },
...getDescJson('能力'), ...getDescJson('能力')
}, },
painKeyTextObj: getDescJson('痛点'), painKeyTextObj: getDescJson('痛点'),
solutionKeyTextObj: getDescJson('方案'), solutionKeyTextObj: getDescJson('方案'),
dataForm: { dataForm: {
"name": "", name: '',
"applicationArea": "", applicationArea: '',
"description": "", description: '',
"fuseAttrList": [ fuseAttrList: [
{ {
"attrType": "使用步骤", attrType: '使用步骤',
"attrValue": [{ question: "", answer: "" }], attrValue: [{ question: '', answer: '' }]
}, },
{ {
"attrType": "更多能力", attrType: '更多能力',
"attrValue": [{ name: "", description: "" }], attrValue: [{ name: '', description: '' }]
}, },
{ {
"attrType": "场景痛点", attrType: '场景痛点',
"attrValue": [{ description: "" }], attrValue: [{ description: '' }]
}, },
{ {
"attrType": "解决方案", attrType: '解决方案',
"attrValue": [{ description: "" }], attrValue: [{ description: '' }]
}, },
{ {
"attrType": "服务图片", attrType: '服务图片',
"attrValue": "", attrValue: ''
}, }
], ],
"fuseResourceList": [], fuseResourceList: []
}, },
rules: { rules: {
name: [ name: [
{ {
required: true, required: true,
message: "请输入名称", message: '请输入名称',
trigger: "change", trigger: 'change'
}, }
], ],
description: [ description: [
{ {
required: true, required: true,
message: "请输入描述", message: '请输入描述',
trigger: "change", trigger: 'change'
}, }
], ]
}, },
checkList: JSON.parse(JSON.stringify(btnArray)), checkList: JSON.parse(JSON.stringify(btnArray)),
btnList: JSON.parse(JSON.stringify(btnArray)), btnList: JSON.parse(JSON.stringify(btnArray)),
addOrUpdateVisibleCopy: this.addOrUpdateVisible, addOrUpdateVisibleCopy: this.addOrUpdateVisible,
displayInfo: { displayInfo: {
'name': '名称', name: '名称',
'description': '描述', description: '描述'
}, },
modalTypeText: modalTypeText, modalTypeText: modalTypeText,
refsParseArray: { refsParseArray: {
'sceneUseUpDom': '使用步骤', sceneUseUpDom: '使用步骤',
'moreAbilityDom': '更多能力', moreAbilityDom: '更多能力',
'scenePainDom': '场景痛点', scenePainDom: '场景痛点',
'solutionDom': '解决方案', solutionDom: '解决方案',
'zjfwDom': '组件服务', zjfwDom: '组件服务',
'sjzyDom': '数据资源', sjzyDom: '数据资源',
'jcssDom': '基础设施', jcssDom: '基础设施'
}, },
getListParams: getListParams, getListParams: getListParams,
abilityListObj: {}, abilityListObj: {},
imgData: [], imgData: [],
// 限定图片 // 限定图片
handleExceed() { handleExceed () {
this.$message({ type: 'error', message: '最多支持一张图片上传' }) this.$message({ type: 'error', message: '最多支持一张图片上传' })
}, },
imageUrl: '', imageUrl: ''
}; }
}, },
props: { props: {
modalType: { modalType: {
@ -259,47 +273,47 @@ export default {
}, },
watch: { watch: {
dataForm: { dataForm: {
handler(newVal) { handler (newVal) {
this.dataForm = newVal this.dataForm = newVal
}, },
deep: true, deep: true,
immediate: true, immediate: true
}, },
addOrUpdateVisible: { addOrUpdateVisible: {
handler(newVal) { handler (newVal) {
this.addOrUpdateVisibleCopy = newVal; this.addOrUpdateVisibleCopy = newVal
if (this.modalType == 'add' && newVal) { if (this.modalType == 'add' && newVal) {
localStorage.setItem('InfrastructureSearchData', JSON.stringify({})) localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
this.getDetail(this.dataForm) this.getDetail(this.dataForm)
} }
}, },
immediate: true, immediate: true
} }
}, },
methods: { methods: {
clearForm() { clearForm () {
this.$refs.dataForm && this.$refs.dataForm.resetFields(); this.$refs.dataForm && this.$refs.dataForm.resetFields()
}, },
closeModal() { closeModal () {
this.$emit('closeModal') this.$emit('closeModal')
}, },
// 更新表单 // 更新表单
updateDataForm(data) { updateDataForm (data) {
if (Object.keys(this.getListParams).includes(data.title)) { if (Object.keys(this.getListParams).includes(data.title)) {
this.abilityListObj[data.title] = data.list; this.abilityListObj[data.title] = data.list
} else { } else {
// 更多能力、使用步骤 // 更多能力、使用步骤
this.operateFuseAttrList(data.title, data) this.operateFuseAttrList(data.title, data)
} }
}, },
getFuseResourceList() { getFuseResourceList () {
return getFuseResourceList(this.abilityListObj) return getFuseResourceList(this.abilityListObj)
}, },
operateFuseAttrList(title, data) { operateFuseAttrList (title, data) {
if (this.dataForm.fuseAttrList.every(v => v.attrType !== title)) { if (this.dataForm.fuseAttrList.every(v => v.attrType !== title)) {
this.dataForm.fuseAttrList.push({ this.dataForm.fuseAttrList.push({
'attrType': title, attrType: title,
'attrValue': JSON.stringify(data.list) attrValue: JSON.stringify(data.list)
}) })
} else { } else {
this.dataForm.fuseAttrList.map(v => { this.dataForm.fuseAttrList.map(v => {
@ -310,71 +324,71 @@ export default {
} }
}, },
// 改变按钮状态 // 改变按钮状态
changeBtn(data) { changeBtn (data) {
this.checkList = data; this.checkList = data
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce( dataFormSubmitHandle: debounce(
function () { function () {
this.$refs.dataForm.validate((valid) => { this.$refs.dataForm.validate((valid) => {
if (!valid) { if (!valid) {
this.$message.error("请检查表单是否填写完整"); this.$message.error('请检查表单是否填写完整')
return false; return false
} }
let methodsObj = { const methodsObj = {
'add': 'post', add: 'post',
'update': 'put' update: 'put'
} }
this.dataForm.fuseResourceList = this.getFuseResourceList() this.dataForm.fuseResourceList = this.getFuseResourceList()
if (this.imageUrl == '') { if (this.imageUrl == '') {
this.$message.error("请上传图片！"); this.$message.error('请上传图片！')
return; return
} }
this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''; this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || ''
let _obj = Object.assign({}, this.dataForm, { const _obj = Object.assign({}, this.dataForm, {
type: '赋能场景' type: '赋能场景'
}) })
console.log('this.dataForm------表单提交------>', this.dataForm); console.log('this.dataForm------表单提交------>', this.dataForm)
this.$http this.$http
[methodsObj[this.modalType]]("/fuse", _obj) [methodsObj[this.modalType]]('/fuse', _obj)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.$message({ this.$message({
message: this.$t("prompt.success"), message: this.$t('prompt.success'),
type: "success", type: 'success',
duration: 500, duration: 500,
onClose: () => { onClose: () => {
this.$refs.dataForm && this.$refs.dataForm.resetFields(); this.$refs.dataForm && this.$refs.dataForm.resetFields()
this.$emit("refreshDataList"); this.$emit('refreshDataList')
this.$emit("closeModal"); this.$emit('closeModal')
}, }
}); })
}) })
.catch((err) => { .catch((err) => {
this.$message.error(err) this.$message.error(err)
}); })
}); })
}, },
1000, 1000,
{ leading: true, trailing: false } { leading: true, trailing: false }
), ),
// 详情 // 详情
getDetail(data) { getDetail (data) {
console.log('data---详情--------->', data); console.log('data---详情--------->', data)
this.dataForm = data; this.dataForm = data
this.$nextTick(() => { this.$nextTick(() => {
for (const key in this.refsParseArray) { for (const key in this.refsParseArray) {
this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data) this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
} }
let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}; const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
this.imageUrl = _imgObj.attrValue; this.imageUrl = _imgObj.attrValue
// 组合能力--特殊处理 // 组合能力--特殊处理
Object.keys(this.getListParams).map(k => { Object.keys(this.getListParams).map(k => {
let arr = data.fuseResourceList.filter(v => v.type == k); const arr = data.fuseResourceList.filter(v => v.type == k)
let arr2 = []; const arr2 = []
arr.map(v => { arr.map(v => {
arr2.push(v.resourceId) arr2.push(v.resourceId)
}) })
@ -382,13 +396,13 @@ export default {
}) })
}) })
}, },
handleAvatarSuccess(res, file) { handleAvatarSuccess (res, file) {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
} }
this.imageUrl = res.data this.imageUrl = res.data
}, },
beforeAvatarUpload(file) { beforeAvatarUpload (file) {
const isImage = const isImage =
file.type === 'image/jpeg' || file.type === 'image/jpeg' ||
file.type === 'image/jpg' || file.type === 'image/jpg' ||
@ -398,11 +412,11 @@ export default {
} }
return isImage return isImage
}, },
addUploadRemoveFile(file, fileList) { addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles() this.$refs.addUpload.clearFiles()
this.imageUrl = '' this.imageUrl = ''
}, },
editBeforeAvatarUpload(file) { editBeforeAvatarUpload (file) {
const isImage = const isImage =
file.type === 'image/jpeg' || file.type === 'image/jpeg' ||
file.type === 'image/jpg' || file.type === 'image/jpg' ||
@ -413,21 +427,21 @@ export default {
} }
return isImage return isImage
}, },
editUploadRemoveFile(file, fileList) { editUploadRemoveFile (file, fileList) {
this.$refs.editUpload.clearFiles() this.$refs.editUpload.clearFiles()
this.imageUrl = '' this.imageUrl = ''
}, },
eidtHandleAvatarSuccess(res, file) { eidtHandleAvatarSuccess (res, file) {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
} }
this.imageUrl = res.data this.imageUrl = res.data
}, }
}, },
beforeDestroy() { beforeDestroy () {
this.clearForm() this.clearForm()
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -466,10 +480,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.mod-sys__menu { .mod-sys__menu {
.menu-list, .menu-list,
.icon-list { .icon-list {
.el-input__inner, .el-input__inner,
.el-input__suffix { .el-input__suffix {
cursor: pointer; cursor: pointer;
@ -493,11 +505,11 @@ export default {
padding: 0; padding: 0;
margin: -8px 0 0 -8px; margin: -8px 0 0 -8px;
>.el-button { > .el-button {
padding: 8px; padding: 8px;
margin: 8px 0 0 8px; margin: 8px 0 0 8px;
>span { > span {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 18px; width: 18px;

286
back/src/views/modules/ability/components/combine-ability.vue
View File

@ -2,19 +2,41 @@
<div class="ability-box"> <div class="ability-box">
<div class="top"> <div class="top">
<div class="type">{{ type }}</div> <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> </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> :close-on-press-escape="false" :key="showKey" append-to-body>
<div class="relate-application-content"> <div class="relate-application-content" v-if="type==='组件服务'">
<el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称" <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="{ :titles="nameArray" :props="{
key: 'id', key: 'id',
label: 'name', label: 'name',
}" :data="transferData"> }" :data="transferData">
</el-transfer> </el-transfer>
<el-input
v-model="searchValue"
placeholder="请输入名称"
></el-input>
<el-button @click="rest" class="restClick">重置</el-button>
</div> </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"> <template slot="footer">
<el-button @click="showModal = false">{{ $t("cancel") }}</el-button> <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="confirmSubmitHandle()">{{ <el-button type="primary" @click="confirmSubmitHandle()">{{
@ -173,7 +195,11 @@ export default {
transferData: [], transferData: [],
selectedArray: [], selectedArray: [],
allData: [], allData: [],
displayList: [] // 用于展示的list displayList: [], // 用于展示的list
total: 0,
currentPage: 1,
newNum: 1,
searchValue: ''
} }
}, },
watch: { watch: {
@ -181,6 +207,18 @@ export default {
if (newVal) { if (newVal) {
this.getData() 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: { methods: {
@ -212,28 +250,55 @@ export default {
if (this.getDataParams.url === '') { if (this.getDataParams.url === '') {
return return
} }
this.$http[this.getDataParams.methods](this.getDataParams.url, { if (this.type === '组件服务') {
params: this.getDataParams.postData this.$http[this.getDataParams.methods](this.getDataParams.url, {
}).then(res => { params: this.getDataParams.postData
console.log('res.data----获取列表-------->', res.data) }).then(res => {
if (res.data.code !== 0) { console.log('res.data----获取列表-------->', res.data)
return this.$message.error(res.msg) if (res.data.code !== 0) {
} return this.$message.error(res.msg)
this.transferData = [] }
this.allData = []; this.transferData = []
(res.data.data || []).map(v => { this.allData = [];
this.transferData.push({ (res.data.data || []).map(v => {
type: this.type, this.transferData.push({
id: v[keyObj[this.type].idKey], type: this.type,
name: v[keyObj[this.type].nameKey] || '--' 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)) } else if (this.type === '数据资源') {
}).catch(err => { this.getDataParams.postData.pageNum = this.newNum
this.$message.error(err) 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) { filterMethod (query, item) {
console.log('1111111111111111111111111')
return item.name && item.name.indexOf(query) > -1 return item.name && item.name.indexOf(query) > -1
}, },
confirmSubmitHandle () { confirmSubmitHandle () {
@ -261,97 +326,150 @@ export default {
this.selectedArray = [] this.selectedArray = []
this.allData = [] this.allData = []
this.transferData = [] 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ability-box { .ability-box {
margin-bottom: 10px; margin-bottom: 10px;
.show-box { .show-box {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.top { .top {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
.type { .type {
padding-right: 12px; padding-right: 12px;
font-size: 14px; font-size: 14px;
color: #606266; color: #606266;
width: 100px; width: 100px;
box-sizing: border-box; box-sizing: border-box;
text-align: right; text-align: right;
line-height: 40px; line-height: 40px;
height: 40px; height: 40px;
} }
.list-box { .list-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: 100px; margin-left: 100px;
} }
.list-item { .list-item {
font-size: 14px; font-size: 14px;
color: #606266; color: #606266;
width: 380px; width: 380px;
text-align: left; text-align: left;
margin-right: 10px; margin-right: 10px;
line-height: 40px; line-height: 40px;
height: 40px; height: 40px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.icon-input ::v-deep .el-input__inner { .icon-input ::v-deep .el-input__inner {
cursor: pointer; cursor: pointer;
} }
::v-deep .el-dialog__body { ::v-deep .el-dialog__body {
height: 580px; height: 580px;
overflow: auto; overflow: auto;
} }
::v-deep .el-checkbox-button__inner { ::v-deep .el-checkbox-button__inner {
width: 130px; width: 130px;
margin: 0 10px 5px; margin: 0 10px 5px;
border-left: unset !important; border-left: unset !important;
border-radius: unset !important; border-radius: unset !important;
border: 1px solid #dcdfe6 !important; border: 1px solid #dcdfe6 !important;
} }
.relate-application-content { .relate-application-content {
height: 100%;
::v-deep .el-transfer {
height: 100%; height: 100%;
}
::v-deep .el-transfer { ::v-deep .el-transfer-panel {
height: 100%; width: 39.5%;
} height: 100%;
}
::v-deep .el-transfer-panel { ::v-deep .el-transfer-panel__body {
width: 39.5%; height: 100%;
height: 100%; }
}
::v-deep .el-transfer-panel__body { ::v-deep .el-transfer-panel__list.is-filterable {
height: 100%; height: calc(100% - 102px);
} }
}
.dataTransfer {
position: relative;
height: 100%;
::v-deep .el-transfer {
height: 100%;
}
::v-deep .el-transfer-panel__list.is-filterable { ::v-deep .el-transfer-panel {
height: calc(100% - 102px); 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> </style>