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

特殊字段添加编辑功能 上架左侧添加进度条

This commit is contained in:
a0049873 2022-12-21 09:06:36 +08:00
parent bf9898abff
commit 84b0f2eba8
8 changed files with 1184 additions and 1078 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
back/src/assets/img/putOnTheShelf/update.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 523 B

5
back/src/views/modules/ability/bsabilityai.vue
View File

@ -230,7 +230,7 @@
:close-on-press-escape="false" :close-on-press-escape="false"
:destroy-on-close="true" :destroy-on-close="true"
:before-close="clear" :before-close="clear"
width="50%" width="60%"
> >
<putOnTheShelf <putOnTheShelf
ref="putOnTheShelf" ref="putOnTheShelf"
@ -271,6 +271,7 @@ export default {
radio: '', radio: '',
showPutOnTheShelfFlag: false, showPutOnTheShelfFlag: false,
showPutOnTheShelfFlag2: false, showPutOnTheShelfFlag2: false,
routePath: '',
submitFrom: { submitFrom: {
type: '组件服务', type: '组件服务',
deptId: '', deptId: '',
@ -629,6 +630,7 @@ export default {
}, },
// 新上架 // 新上架
clear () { clear () {
this.$router.push(this.routePath)
console.log('清空----------------------------------------') console.log('清空----------------------------------------')
this.notFilled = [] this.notFilled = []
this.showPutOnTheShelfFlag = false this.showPutOnTheShelfFlag = false
@ -659,6 +661,7 @@ export default {
}) })
}, },
showPutOnTheShelfVue () { showPutOnTheShelfVue () {
this.routePath = this.$route.path
this.showPutOnTheShelfFlag = false this.showPutOnTheShelfFlag = false
this.showPutOnTheShelfFlag2 = true this.showPutOnTheShelfFlag2 = true
this.submitFrom.infoList[0].attrValue = this.radio this.submitFrom.infoList[0].attrValue = this.radio

7
back/src/views/modules/ability/bsabilityservice.vue
View File

@ -217,8 +217,8 @@
:close-on-press-escape='false' :close-on-press-escape='false'
:destroy-on-close='true' :destroy-on-close='true'
:before-close='clear' :before-close='clear'
width="50%"> width="60%">
<putOnTheShelf :required="required" :notFilled="notFilled":putOnTheShelfList='putOnTheShelfList' @changeInfoList='changeInfoList' :type='radio' :typeInput='typeInput'></putOnTheShelf> <putOnTheShelf :required="required" :notFilled="notFilled" :putOnTheShelfList='putOnTheShelfList' @changeInfoList='changeInfoList' :type='radio' :typeInput='typeInput'></putOnTheShelf>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="clear">取 消</el-button> <el-button @click="clear">取 消</el-button>
<el-button type="primary" @click="submitData">确 定</el-button> <el-button type="primary" @click="submitData">确 定</el-button>
@ -271,6 +271,7 @@ export default {
insertList: [], insertList: [],
putOnTheShelfList: [], putOnTheShelfList: [],
showPutOnTheShelfFlag2: false, showPutOnTheShelfFlag2: false,
routePath: '',
submitFrom: { submitFrom: {
type: '应用资源', type: '应用资源',
deptId: '', deptId: '',
@ -594,6 +595,7 @@ export default {
}, },
// 新上架 // 新上架
clear () { clear () {
this.$router.push(this.routePath)
this.notFilled = [] this.notFilled = []
this.showPutOnTheShelfFlag2 = false this.showPutOnTheShelfFlag2 = false
this.insertList = [] this.insertList = []
@ -615,6 +617,7 @@ export default {
}, },
// 上架 // 上架
showPutOnTheShelf () { showPutOnTheShelf () {
this.routePath = this.$route.path
this.showPutOnTheShelfFlag2 = true this.showPutOnTheShelfFlag2 = true
this.$http.get('/category/getCategoryTree').then(res => { this.$http.get('/category/getCategoryTree').then(res => {
this.insertList = res.data.data.filter(item => item.name === '应用资源')[0] this.insertList = res.data.data.filter(item => item.name === '应用资源')[0]

1
back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue
View File

@ -86,7 +86,6 @@ js:
<el-date-picker v-model="data.note1" type="date" :placeholder="'选择' + name" value-format="yyyy-MM-dd"> <el-date-picker v-model="data.note1" type="date" :placeholder="'选择' + name" value-format="yyyy-MM-dd">
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>
</template> </template>
<script> <script>

32
back/src/views/modules/putOnTheShelf/components/special.vue
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-07-08 09:54:50 * @Date: 2022-07-08 09:54:50
* @LastEditors: hisense.liangjunhua * @LastEditors: Light
* @LastEditTime: 2022-07-28 20:09:53 * @LastEditTime: 2022-12-20 10:42:37
* @Description: 多条数据特殊处理 * @Description: 多条数据特殊处理
--> -->
<template> <template>
@ -28,7 +28,9 @@
<span v-else>{{ val[attr.field] + (attr.company || '') }}</span> <span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
</p> </p>
<div class="del"> <div class="del">
<i class="delImg" @click="del( index)"></i> <i class="updateImg" @click="update(configure.name, index)"></i>
<div @click="update(configure.name, index)" style="margin-right:10px;">修改</div>
<i class="delImg" @click="del(configure.name, index)"></i>
<div @click="del(configure.name, index)">删除</div> <div @click="del(configure.name, index)">删除</div>
</div> </div>
</div> </div>
@ -171,6 +173,19 @@ export default {
delFlag: 0 delFlag: 0
}) })
}, },
update (title, index) {
const obj = this.data[index]
this.data.splice(index, 1)
const str = this.data.length > 0 ? JSON.stringify(this.data) : ''
this.$emit('changeInfoList', {
attrType: title,
attrValue: str,
delFlag: 0
})
this.configure.list.map(val => {
val.note1 = obj[val.field]
})
},
radioChange (e) { radioChange (e) {
console.log(e, 'wewewe') console.log(e, 'wewewe')
this.numType = e.target.value this.numType = e.target.value
@ -242,12 +257,21 @@ export default {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
.updateImg {
cursor: pointer;
display: inline-block;
width: 16px;
height: 18px;
background: url("~@/assets/img/putOnTheShelf/update.png") no-repeat;
margin-right: 5px;
margin-bottom: 1px;
}
.delImg { .delImg {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 18px; height: 18px;
background: url(~@/assets/img/putOnTheShelf/del.png) no-repeat; background: url("~@/assets/img/putOnTheShelf/del.png") no-repeat;
margin-right: 5px; margin-right: 5px;
} }

29
back/src/views/modules/putOnTheShelf/index.vue
View File

@ -1,13 +1,19 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-07-08 09:48:52 * @Date: 2022-07-08 09:48:52
* @LastEditors: hisense.liangjunhua * @LastEditors: Light
* @LastEditTime: 2022-07-25 15:57:25 * @LastEditTime: 2022-12-20 09:50:01
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<template> <template>
<div class="put-on-the-shelf"> <div class="put-on-the-shelf">
<div v-for="parent in putOnTheShelfList" :key='parent.id'> <div class="left">
<a-anchor>
<a-anchor-link v-for="parent in putOnTheShelfList" :key="parent.id+'left'" :href="'#'+parent.name" :title="parent.name" />
</a-anchor>
</div>
<div class="right">
<div v-for="parent in putOnTheShelfList" :key='parent.id' :id="parent.name">
<div v-for='child in parent.children' :key='child.id'> <div v-for='child in parent.children' :key='child.id'>
<template v-if='judgmentType.filter(item => item.name==child.name).length === 0'> <template v-if='judgmentType.filter(item => item.name==child.name).length === 0'>
<div class="top">{{child.name}}</div> <div class="top">{{child.name}}</div>
@ -59,6 +65,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import inputSelectCheckbox from './components/inputSelectCheckbox' import inputSelectCheckbox from './components/inputSelectCheckbox'
@ -241,13 +248,23 @@ export default {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.put-on-the-shelf { .put-on-the-shelf {
height: 500px; // height: 500px;
display: flex;
padding: 0 50px; padding: 0 50px;
.left {
margin-right: 50px;
}
.right {
height: 500px;
overflow-y: scroll; overflow-y: scroll;
} }
.put-on-the-shelf::-webkit-scrollbar { .right::-webkit-scrollbar {
width: 0; width: 0;
}
} }
// .put-on-the-shelf::-webkit-scrollbar {
// width: 0;
// }
.top { .top {
color: #333333; color: #333333;

BIN
front/src/assets/home/update.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 523 B

446
front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-17 14:11:08 * @Date: 2022-06-17 14:11:08
* @LastEditors: Light * @LastEditors: Light
* @LastEditTime: 2022-10-26 14:57:25 * @LastEditTime: 2022-12-20 11:39:05
* @Description: 上架 * @Description: 上架
--> -->
<template> <template>
@ -10,7 +10,7 @@
<div v-for="title in props.refData.children" :key="title.id"> <div v-for="title in props.refData.children" :key="title.id">
<div class="top"> <div class="top">
<div></div> <div></div>
<div >{{ title.name }}</div> <div>{{ title.name }}</div>
<div></div> <div></div>
</div> </div>
<template v-if="title.isConfigure"> <template v-if="title.isConfigure">
@ -45,22 +45,36 @@
font-size: 16px; font-size: 16px;
display: flex; display: flex;
float: right; float: right;
top:0px; top: 0px;
margin-right: 28px; margin-right: 28px;
" "
> >
<!-- <span>{{ title.name }}-{{ index + 1 }}</span> --> <!-- <span>{{ title.name }}-{{ index + 1 }}</span> -->
<div class="del">
<i class="updateImg" @click="update(title.name, index)"></i>
<div
@click="update(title.name, index)"
style="margin-right: 10px"
>
修改
</div>
<a-popconfirm <a-popconfirm
:title="'是否删除该条' + title.name + '?'" :title="'是否删除该条' + title.name + '?'"
ok-text="是" ok-text="是"
cancel-text="否" cancel-text="否"
@confirm="del(title.name, index)" @confirm="del(title.name, index)"
> >
<div class="del">
<i class="delImg"></i> <i class="delImg"></i>
<div>删除</div>
</div>
</a-popconfirm> </a-popconfirm>
<a-popconfirm
:title="'是否删除该条' + title.name + '?'"
ok-text="是"
cancel-text="否"
@confirm="del(title.name, index)"
>
<div>删除</div>
</a-popconfirm>
</div>
</div> </div>
<div <div
class="form" class="form"
@ -69,10 +83,9 @@
)[0].list" )[0].list"
:key="'key2' + attr.name + index2" :key="'key2' + attr.name + index2"
> >
<span>{{ attr.name }}:</span>
<span >{{ attr.name }}:</span>
<a-input <a-input
style="width:280px" style="width: 280px"
disabled disabled
v-model:value="val[attr.field]" v-model:value="val[attr.field]"
:maxlength="24" :maxlength="24"
@ -81,7 +94,7 @@
/> />
<template v-if="attr.type == 'input2'"> <template v-if="attr.type == 'input2'">
<a-input <a-input
style="width:280px" style="width: 280px"
disabled disabled
:maxLength="1000" :maxLength="1000"
v-model:value="val[attr.field]" v-model:value="val[attr.field]"
@ -90,12 +103,11 @@
</template> </template>
<template v-else-if="attr.type == 'textArea'"> <template v-else-if="attr.type == 'textArea'">
<a-input <a-input
style="width:1120px" style="width: 1120px"
disabled disabled
v-model:value="val[attr.field]" v-model:value="val[attr.field]"
:maxlength="1000" :maxlength="1000"
:placeholder="'请填写' + attr.name + ',不超过1000个字符'" :placeholder="'请填写' + attr.name + ',不超过1000个字符'"
/> />
</template> </template>
<!-- <a-textarea <!-- <a-textarea
@ -113,7 +125,15 @@
<a-image :width="85" :height="60" :src="val.img" /> <a-image :width="85" :height="60" :src="val.img" />
</span> </span>
</div> </div>
<div style="margin-top:24px;height:1px;border-top: 1px dashed #dddee1; width: 1240px;font-size: 18px;"></div> <div
style="
margin-top: 24px;
height: 1px;
border-top: 1px dashed #dddee1;
width: 1240px;
font-size: 18px;
"
></div>
</div> </div>
<!-- <div style="font-size: 0.18rem; font-weight: 600border-top: 1px dashed grey; width: 1240px;font-size: 18px;"> <!-- <div style="font-size: 0.18rem; font-weight: 600border-top: 1px dashed grey; width: 1240px;font-size: 18px;">
@ -126,9 +146,9 @@
)[0].list" )[0].list"
:key="'key3' + val.name + index" :key="'key3' + val.name + index"
> >
<span >{{ val.name }}:</span> <span>{{ val.name }}:</span>
<a-input <a-input
style="width:280px" style="width: 280px"
v-model:value="val.note1" v-model:value="val.note1"
:maxlength="24" :maxlength="24"
:placeholder="'请填写' + val.name + ',不超过24个字符'" :placeholder="'请填写' + val.name + ',不超过24个字符'"
@ -136,7 +156,7 @@
/> />
<template v-if="val.type == 'input2'"> <template v-if="val.type == 'input2'">
<a-input <a-input
style="width:280px" style="width: 280px"
:maxLength="1000" :maxLength="1000"
v-model:value="val.note1" v-model:value="val.note1"
:placeholder="'请填写' + val.name" :placeholder="'请填写' + val.name"
@ -157,12 +177,11 @@
</template> </template>
<template v-else-if="val.type == 'textArea'"> <template v-else-if="val.type == 'textArea'">
<a-input <a-input
style="width:1120px" style="width: 1120px"
:showCount="true" :showCount="true"
v-model:value="val.note1" v-model:value="val.note1"
:maxlength="1000" :maxlength="1000"
:placeholder="'请填写' + val.name + ',不超过1000个字符'" :placeholder="'请填写' + val.name + ',不超过1000个字符'"
/> />
</template> </template>
<!-- <a-textarea <!-- <a-textarea
@ -198,7 +217,7 @@
class="danxuan-Area-son" class="danxuan-Area-son"
@click="radioChangeNew(val, itemSelect)" @click="radioChangeNew(val, itemSelect)"
:class=" :class="
val.note1 && val.note1=== itemSelect val.note1 && val.note1 === itemSelect
? 'danxuan-Area-down' ? 'danxuan-Area-down'
: '' : ''
" "
@ -217,11 +236,19 @@
v-else-if="val.type == 'image'" v-else-if="val.type == 'image'"
></upload> ></upload>
</div> </div>
<div style="margin-top:24px;height:1px;border-top: 1px dashed #dddee1; width: 1240px;font-size: 18px;"></div> <div
style="
margin-top: 24px;
height: 1px;
border-top: 1px dashed #dddee1;
width: 1240px;
font-size: 18px;
"
></div>
<div class="submit"> <div class="submit">
<a-button type="primary" @click="add(title.name)"> <a-button type="primary" @click="add(title.name)">
<img <img
style="height: 12px; width: 12px;margin-top: -2px;" style="height: 12px; width: 12px; margin-top: -2px"
src="../../../assets/home/zhengjia.png" src="../../../assets/home/zhengjia.png"
alt="" alt=""
/> />
@ -261,14 +288,20 @@
<a-input <a-input
:maxLength="1000" :maxLength="1000"
v-model:value="item.note1" v-model:value="item.note1"
:placeholder="'请输入' + placeHolderWords(item.name)+',单位为元'" :placeholder="
'请输入' + placeHolderWords(item.name) + ',单位为元'
"
@change="changeIiem(item.name, item.note1)" @change="changeIiem(item.name, item.note1)"
/> />
<span style="color:red"> (单位为元，*仅用于测算为部门节省资金)</span> <span style="color: red">
(单位为元，*仅用于测算为部门节省资金)
</span>
</div> </div>
<a-input <a-input
:maxLength="1000" :maxLength="1000"
v-else-if="item.type == 'input' && item.name.indexOf('名称') == -1" v-else-if="
item.type == 'input' && item.name.indexOf('名称') == -1
"
v-model:value="item.note1" v-model:value="item.note1"
:placeholder="'请输入' + placeHolderWords(item.name)" :placeholder="'请输入' + placeHolderWords(item.name)"
@change="changeIiem(item.name, item.note1)" @change="changeIiem(item.name, item.note1)"
@ -416,7 +449,6 @@
</div> </div>
</div> </div>
<upload <upload
v-else-if="item.type == 'video'" v-else-if="item.type == 'video'"
type="视频" type="视频"
@ -610,34 +642,34 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import VueTemplateDemo from '@/views/personalCenter/VueTemplateDemo' import VueTemplateDemo from '@/views/personalCenter/VueTemplateDemo'
import { placeHolderWords } from '@/utils/placeHolder' import { placeHolderWords } from '@/utils/placeHolder'
import { import {
ref, ref,
defineProps, defineProps,
watch, watch,
onMounted, onMounted,
defineExpose, defineExpose,
defineEmits, defineEmits,
} from 'vue' } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import upload from '@/views/components/upload' import upload from '@/views/components/upload'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { getUserInfo, getDeptAll } from '@/api/user' import { getUserInfo, getDeptAll } from '@/api/user'
import { import {
getCategoryTreePage, getCategoryTreePage,
queryApplicationRelByResourceId, queryApplicationRelByResourceId,
queryResourceRelByKeyId, queryResourceRelByKeyId,
filesUpload, filesUpload,
} from '@/api/personalCenter' } from '@/api/personalCenter'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const abilityToType = router.currentRoute.value.query.abilityToType const abilityToType = router.currentRoute.value.query.abilityToType
const componentTypeValue = router.currentRoute.value.query.componentTypeValue const componentTypeValue = router.currentRoute.value.query.componentTypeValue
const changeField = ref([]) const changeField = ref([])
//选取的数据 //选取的数据
const chooseField = ref([]) const chooseField = ref([])
const props = defineProps({ const props = defineProps({
// 展示数据 // 展示数据
refData: { type: Object, default: null }, refData: { type: Object, default: null },
// 表单数据 // 表单数据
@ -699,19 +731,19 @@ const props = defineProps({
// } // }
// ] // ]
// }] // }]
}) })
const emit = defineEmits(['next', 'back', 'submit', 'preview']) const emit = defineEmits(['next', 'back', 'submit', 'preview'])
const changeAdd = () => {} const changeAdd = () => {}
const data = ref({ const data = ref({
list: [], list: [],
}) })
const showKey = ref(0) const showKey = ref(0)
const numType = ref('一次性买断') const numType = ref('一次性买断')
const radioChange = (e) => { const radioChange = (e) => {
numType.value = e.target.value numType.value = e.target.value
} }
const radioChangeNew = (item,itemSelect) => { const radioChangeNew = (item, itemSelect) => {
if (item.note1) { if (item.note1) {
if (item.note1 === itemSelect) { if (item.note1 === itemSelect) {
item.note1 = null item.note1 = null
@ -722,9 +754,9 @@ const radioChangeNew = (item,itemSelect) => {
item.note1 = itemSelect item.note1 = itemSelect
} }
numType.value =itemSelect numType.value = itemSelect
} }
const changeIiem = (name, value) => { const changeIiem = (name, value) => {
if (value && value !== '' && changeField.value.indexOf(name) == -1) { if (value && value !== '' && changeField.value.indexOf(name) == -1) {
changeField.value.push(name) changeField.value.push(name)
} else if (!value || value == '') { } else if (!value || value == '') {
@ -732,9 +764,9 @@ const changeIiem = (name, value) => {
changeField.value.splice(changeField.value.indexOf(name), 1) changeField.value.splice(changeField.value.indexOf(name), 1)
} }
} }
} }
props.refData.children.map((item) => { props.refData.children.map((item) => {
if (item.name == '基本信息') { if (item.name == '基本信息') {
item.children.map((val) => { item.children.map((val) => {
if (val.name == '能力类型') { if (val.name == '能力类型') {
@ -754,8 +786,8 @@ props.refData.children.map((item) => {
} else { } else {
item.isConfigure = false item.isConfigure = false
} }
}) })
let arr = props.refData.children.filter((item) => { let arr = props.refData.children.filter((item) => {
if (props.configure) { if (props.configure) {
if (!item.isConfigure) { if (!item.isConfigure) {
return item return item
@ -763,10 +795,10 @@ let arr = props.refData.children.filter((item) => {
} else { } else {
return item return item
} }
}) })
data.value.list = [] data.value.list = []
// 获取字典数据 // 获取字典数据
arr.forEach((val) => { arr.forEach((val) => {
val.children.forEach((item) => { val.children.forEach((item) => {
if (item.isLinkToDic === 'true' && item.linkValue) { if (item.isLinkToDic === 'true' && item.linkValue) {
getCategoryTreePage({ getCategoryTreePage({
@ -850,8 +882,8 @@ arr.forEach((val) => {
data.value.list.push(item) data.value.list.push(item)
} }
}) })
}) })
if (props.dataFrom) { if (props.dataFrom) {
props.dataFrom.infoList.forEach((item) => { props.dataFrom.infoList.forEach((item) => {
if ( if (
props.configure && props.configure &&
@ -871,17 +903,17 @@ if (props.dataFrom) {
// item.note1 = item.attrValue.split(';') // item.note1 = item.attrValue.split(';')
} }
}) })
} }
//显示富文本 //显示富文本
let showText = ref(false) let showText = ref(false)
const showTextFunction = () => { const showTextFunction = () => {
showText.value = true showText.value = true
} }
mybus.on('showTextFunctionEmit', (show) => { mybus.on('showTextFunctionEmit', (show) => {
showText.value = show showText.value = show
}) })
mybus.off('func') mybus.off('func')
const add = (title, addFlag, type) => { const add = (title, addFlag, type) => {
let list = props.configure.filter((item) => item.name === title)[0].list let list = props.configure.filter((item) => item.name === title)[0].list
let flag = true let flag = true
list.forEach((item) => { list.forEach((item) => {
@ -961,23 +993,40 @@ const add = (title, addFlag, type) => {
} }
} }
} }
} }
const del = (title, index) => { const del = (title, index) => {
data.value[title].splice(index, 1) data.value[title].splice(index, 1)
mybus.emit('chageDataFrom', { mybus.emit('chageDataFrom', {
attrType: title, attrType: title,
attrValue: JSON.stringify(data.value[title]), attrValue: JSON.stringify(data.value[title]),
delFlag: 0, delFlag: 0,
}) })
} }
const ApplicationArea = (item, itemson) => { const update = (title, index) => {
const obj = data.value[title][index]
data.value[title].splice(index, 1)
mybus.emit('chageDataFrom', {
attrType: title,
attrValue: JSON.stringify(data.value[title]),
delFlag: 0,
})
props.configure
.filter((item) => item.name === title)[0]
.list.map((val) => {
val.note1 = obj[val.field]
})
}
const ApplicationArea = (item, itemson) => {
if (item.note2.indexOf(itemson.dictLabel) === -1) { if (item.note2.indexOf(itemson.dictLabel) === -1) {
item.note2.push(itemson.dictLabel) item.note2.push(itemson.dictLabel)
} else { } else {
item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1) item.note2.splice(item.note2.indexOf(itemson.dictLabel), 1)
} }
// 多选判断是否为空 // 多选判断是否为空
if (item.note2.length !== 0 && changeField.value.indexOf('应用领域') == -1) { if (
item.note2.length !== 0 &&
changeField.value.indexOf('应用领域') == -1
) {
changeField.value.push('应用领域') changeField.value.push('应用领域')
} else if (item.note2.length == 0) { } else if (item.note2.length == 0) {
if (changeField.value.indexOf('应用领域') > -1) { if (changeField.value.indexOf('应用领域') > -1) {
@ -989,8 +1038,8 @@ const ApplicationArea = (item, itemson) => {
attrValue: item.note2.join(';'), attrValue: item.note2.join(';'),
delFlag: 0, delFlag: 0,
}) })
} }
const danxuanArea = (item, itemSelect, indexSelect) => { const danxuanArea = (item, itemSelect, indexSelect) => {
if (item.note1) { if (item.note1) {
if (item.note1 === indexSelect) { if (item.note1 === indexSelect) {
item.note1 = null item.note1 = null
@ -1002,8 +1051,8 @@ const danxuanArea = (item, itemSelect, indexSelect) => {
} }
changeIiem(itemSelect, indexSelect) changeIiem(itemSelect, indexSelect)
} }
const danxuanRadio= (item, itemSelect) => { const danxuanRadio = (item, itemSelect) => {
if (item.note1) { if (item.note1) {
if (item.note1 === itemSelect) { if (item.note1 === itemSelect) {
item.note1 = null item.note1 = null
@ -1015,20 +1064,20 @@ const danxuanRadio= (item, itemSelect) => {
} }
changeIiem(item.name, item.note1) changeIiem(item.name, item.note1)
} }
// 来源应用 // 来源应用
const visibleAssociatedApplication = ref(false) const visibleAssociatedApplication = ref(false)
const visibleAssociatedApplicationOther = ref(false) const visibleAssociatedApplicationOther = ref(false)
const mockData = ref([]) const mockData = ref([])
const mockDataOther = ref([]) const mockDataOther = ref([])
const titles = ref(['未关联的应用名称', '已关联的应用名称']) const titles = ref(['未关联的应用名称', '已关联的应用名称'])
const titleName = ref('来源应用') const titleName = ref('来源应用')
const targetKeys = ref([]) const targetKeys = ref([])
const targetKeysOther = ref([]) const targetKeysOther = ref([])
// 上一步关联数据 // 上一步关联数据
// const targetKeysBack = ref([]) // const targetKeysBack = ref([])
// 来源应用-back // 来源应用-back
const sourceClick = () => { const sourceClick = () => {
mockData.value = [] mockData.value = []
visibleAssociatedApplication.value = true visibleAssociatedApplication.value = true
props.dataFrom.infoList.forEach((val) => { props.dataFrom.infoList.forEach((val) => {
@ -1062,9 +1111,9 @@ const sourceClick = () => {
}) })
} }
}) })
} }
// 关联组件 // 关联组件
const componentsClick = () => { const componentsClick = () => {
titles.value = ['未关联的组件名称', '已关联的组件名称'] titles.value = ['未关联的组件名称', '已关联的组件名称']
titleName.value = '关联组件' titleName.value = '关联组件'
visibleAssociatedApplicationOther.value = true visibleAssociatedApplicationOther.value = true
@ -1104,24 +1153,24 @@ const componentsClick = () => {
}) })
} }
}) })
} }
const selectedKeys = ref([]) const selectedKeys = ref([])
const selectedKeysOther = ref([]) const selectedKeysOther = ref([])
const handleChange = (nextTargetKeys, direction, moveKeys) => { const handleChange = (nextTargetKeys, direction, moveKeys) => {
if (direction === 'right') { if (direction === 'right') {
targetKeys.value = moveKeys.filter((item, index) => index === 0) targetKeys.value = moveKeys.filter((item, index) => index === 0)
} }
} }
const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {} const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {}
const handleChangeOther = (nextTargetKeys, direction, moveKeys) => {} const handleChangeOther = (nextTargetKeys, direction, moveKeys) => {}
const handleSelectChangeOther = (sourceSelectedKeys, targetSelectedKeys) => {} const handleSelectChangeOther = (sourceSelectedKeys, targetSelectedKeys) => {}
const filterOptionTransfer = (inputValue, option) => { const filterOptionTransfer = (inputValue, option) => {
return option.description.indexOf(inputValue) > -1 return option.description.indexOf(inputValue) > -1
} }
const handleOk = (e) => { const handleOk = (e) => {
visibleAssociatedApplicationOther.value = false visibleAssociatedApplicationOther.value = false
visibleAssociatedApplication.value = false visibleAssociatedApplication.value = false
@ -1132,19 +1181,19 @@ const handleOk = (e) => {
item.note1 = targetKeysOther.value + '' item.note1 = targetKeysOther.value + ''
} }
}) })
} }
const handleCancel = (e) => { const handleCancel = (e) => {
visibleAssociatedApplicationOther.value = false visibleAssociatedApplicationOther.value = false
visibleAssociatedApplication.value = false visibleAssociatedApplication.value = false
} }
const showType = ref('') const showType = ref('')
const showTypeClick = (e) => { const showTypeClick = (e) => {
showType.value = e showType.value = e
} }
showTypeClick('调用接口') showTypeClick('调用接口')
watch(data.value.list, (newProps, oldProps) => { watch(data.value.list, (newProps, oldProps) => {
newProps.forEach((val) => { newProps.forEach((val) => {
if ( if (
props.configure && props.configure &&
@ -1189,34 +1238,34 @@ watch(data.value.list, (newProps, oldProps) => {
} }
} }
}) })
}) })
const applicationsChange = (value) => { const applicationsChange = (value) => {
data.value.list.map((item) => { data.value.list.map((item) => {
if (item.name === '来源应用') { if (item.name === '来源应用') {
item.note1 = value item.note1 = value
} }
}) })
} }
const handleBlur = () => {} const handleBlur = () => {}
const applicationsBlur = () => {} const applicationsBlur = () => {}
const handleFocus = () => {} const handleFocus = () => {}
const applicationsFocus = () => {} const applicationsFocus = () => {}
const filterOption = (input, option) => { const filterOption = (input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
} }
defineExpose({ defineExpose({
add, add,
}) })
const applicationsOption = (input, option) => { const applicationsOption = (input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
} }
</script> </script>
<style></style> <style></style>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.upload-list-inline .ant-upload .ant-btn) { :deep(.upload-list-inline .ant-upload .ant-btn) {
height: 150px; height: 150px;
width: 218px; width: 218px;
border: 1px solid rgba(198, 198, 198, 0.5); border: 1px solid rgba(198, 198, 198, 0.5);
@ -1224,38 +1273,38 @@ const applicationsOption = (input, option) => {
background: rgba(0, 88, 225, 0.05); background: rgba(0, 88, 225, 0.05);
color: #0087ff; color: #0087ff;
font-size: 14px; font-size: 14px;
} }
:deep(.upload-list-inline .ant-upload .ant-btn > span) { :deep(.upload-list-inline .ant-upload .ant-btn > span) {
background: url('~@/assets/home/yuanjia.png') no-repeat; background: url('~@/assets/home/yuanjia.png') no-repeat;
color: #666666; color: #666666;
background-position: center; background-position: center;
text-align: center; text-align: center;
line-height: 120px; line-height: 120px;
height: 50px; height: 50px;
} }
// 箭头大小以及位置 // 箭头大小以及位置
:deep(.ant-select-arrow) { :deep(.ant-select-arrow) {
background: url('~@/assets/home/huixia.png') no-repeat; background: url('~@/assets/home/huixia.png') no-repeat;
cursor: pointer; cursor: pointer;
margin-top: -4px; margin-top: -4px;
margin-right: -4px; margin-right: -4px;
} }
// 隐藏三角 // 隐藏三角
:deep(.ant-select-arrow .anticon) { :deep(.ant-select-arrow .anticon) {
vertical-align: top; vertical-align: top;
transition: transform 0.3s; transition: transform 0.3s;
display: none; display: none;
} }
// :deep(.ant-select-arrow :focus) { // :deep(.ant-select-arrow :focus) {
// background:url('~@/assets/home/huishang.png') no-repeat ; // background:url('~@/assets/home/huishang.png') no-repeat ;
// cursor: pointer; // cursor: pointer;
// margin-top: -4px; // margin-top: -4px;
// margin-right: -4px; // margin-right: -4px;
// } // }
.put-on-the-shelf { .put-on-the-shelf {
margin: 0.15rem 2rem; margin: 0.15rem 2rem;
background: rgb(246, 247, 249, 0.8); background: rgb(246, 247, 249, 0.8);
height: 846px; height: 846px;
@ -1347,7 +1396,7 @@ const applicationsOption = (input, option) => {
align-items: center; align-items: center;
span:first-child { span:first-child {
width: 1.0rem; width: 1rem;
} }
:deep(.ant-input-textarea) { :deep(.ant-input-textarea) {
@ -1394,15 +1443,15 @@ const applicationsOption = (input, option) => {
border-radius: 2px; border-radius: 2px;
font-size: 14px; font-size: 14px;
} }
.ant-btn:hover{ .ant-btn:hover {
background: #fff; background: #fff;
color: #0558e1; color: #0558e1;
opacity: 0.8; opacity: 0.8;
} }
.ant-btn:active{ .ant-btn:active {
background: #fff; background: #fff;
color: #0558e1; color: #0558e1;
opacity: 0.8 opacity: 0.8;
} }
} }
} }
@ -1411,11 +1460,11 @@ const applicationsOption = (input, option) => {
& > div:nth-of-type(1) { & > div:nth-of-type(1) {
margin-top: 0; margin-top: 0;
} }
} }
.danxuan-Area { .danxuan-Area {
display: grid; display: grid;
margin-top: -0.05rem; margin-top: -0.05rem;
grid-template-columns: auto auto auto auto auto auto auto auto ; grid-template-columns: auto auto auto auto auto auto auto auto;
border-left: 1px #0558e1 solid; border-left: 1px #0558e1 solid;
.danxuan-Area-son { .danxuan-Area-son {
cursor: pointer; cursor: pointer;
@ -1441,9 +1490,9 @@ const applicationsOption = (input, option) => {
color: #fff; color: #fff;
// border: 1px #0558e1 solid; // border: 1px #0558e1 solid;
} }
} }
.application-Area { .application-Area {
display: grid; display: grid;
margin-top: -0.05rem; margin-top: -0.05rem;
grid-template-columns: auto auto auto auto auto auto; grid-template-columns: auto auto auto auto auto auto;
@ -1492,84 +1541,92 @@ const applicationsOption = (input, option) => {
background: url('~@/assets/home/duihao.png') no-repeat; background: url('~@/assets/home/duihao.png') no-repeat;
} }
} }
} }
:deep(.ant-image-img) { :deep(.ant-image-img) {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
:deep(.ant-modal) { :deep(.ant-modal) {
width: 9.6rem; width: 9.6rem;
} }
:deep(.ant-transfer-list) { :deep(.ant-transfer-list) {
width: 39.5%; width: 39.5%;
height: 5.2rem; height: 5.2rem;
} }
:deep(.ant-transfer-operation) { :deep(.ant-transfer-operation) {
flex-direction: row-reverse; flex-direction: row-reverse;
margin: 0 0.3rem; margin: 0 0.3rem;
} }
:deep(.ant-btn) { :deep(.ant-btn) {
width: 0.56rem; width: 0.56rem;
height: 0.4rem; height: 0.4rem;
border-radius: 0.04rem; border-radius: 0.04rem;
} }
:deep(.ant-btn:first-child) { :deep(.ant-btn:first-child) {
margin-left: 0.04rem; margin-left: 0.04rem;
} }
:deep(.ant-modal-footer) { :deep(.ant-modal-footer) {
border: 0; border: 0;
} }
:deep(.ant-modal-header) { :deep(.ant-modal-header) {
border: 0; border: 0;
} }
:deep(.ant-modal-title) { :deep(.ant-modal-title) {
line-height: 0.24rem; line-height: 0.24rem;
font-size: 0.18rem; font-size: 0.18rem;
color: #303133; color: #303133;
} }
:deep(.ant-transfer-list-header) { :deep(.ant-transfer-list-header) {
background: #f5f7fa; background: #f5f7fa;
} }
:deep(.ant-transfer-list-header-selected) { :deep(.ant-transfer-list-header-selected) {
display: flex; display: flex;
width: 90%; width: 90%;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
:deep(.ant-transfer-list-header-title) { :deep(.ant-transfer-list-header-title) {
font-size: 0.16rem; font-size: 0.16rem;
color: #303133; color: #303133;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
} }
:deep(.ant-transfer-list-header .ant-checkbox-wrapper) { :deep(.ant-transfer-list-header .ant-checkbox-wrapper) {
display: none !important; display: none !important;
} }
:deep(.ant-upload-list-item-name) { :deep(.ant-upload-list-item-name) {
width: 1rem; width: 1rem;
} }
.del { .del {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
font-size: 0.14rem; font-size: 0.14rem;
margin-left: 0.2rem; margin-left: 0.2rem;
.updateImg {
cursor: pointer;
display: inline-block;
width: 16px;
height: 18px;
background: url('~@/assets/home/update.png') no-repeat;
margin-right: 5px;
margin-bottom: 1px;
}
.delImg { .delImg {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -1578,12 +1635,15 @@ const applicationsOption = (input, option) => {
background: url(~@/assets/home/sf_del.png) no-repeat; background: url(~@/assets/home/sf_del.png) no-repeat;
margin-right: 0.05rem; margin-right: 0.05rem;
} }
& > span {
display: flex;
}
div { div {
cursor: pointer; cursor: pointer;
} }
} }
.item { .item {
position: relative; position: relative;
span:first-child { span:first-child {
width: unset; width: unset;
@ -1636,5 +1696,5 @@ const applicationsOption = (input, option) => {
bottom: -20px; bottom: -20px;
left: 110px; left: 110px;
} }
} }
</style> </style>