来源应用
This commit is contained in:
gaoyuanwei
parent
d13fe453ce
commit
0ce6113ffa
|
|
@ -215,3 +215,11 @@ export function selectResourceListByDept(params) {
|
|||
params,
|
||||
})
|
||||
}
|
||||
// 获取来源应用列表
|
||||
export function queryApplicationRelByResourceId(params) {
|
||||
return request({
|
||||
url: '/dataResourceRel/queryApplicationRelByResourceId',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,21 +16,14 @@
|
|||
<template v-if="title.isConfigure">
|
||||
<div class="bottom">
|
||||
<div class="items" v-if="data[title.name].length > 0">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(val, index) in data[title.name]"
|
||||
:key="'key1' + val.name + index"
|
||||
>
|
||||
<div class="item" v-for="(val, index) in data[title.name]" :key="'key1' + val.name + index">
|
||||
<p>
|
||||
<span>{{ title.name }}-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p
|
||||
v-for="attr in props.configure.filter(
|
||||
<p v-for="attr in props.configure.filter(
|
||||
(item, index2) => item.name === title.name
|
||||
)[0].list"
|
||||
:key="'key2' + attr.name + index2"
|
||||
>
|
||||
)[0].list" :key="'key2' + attr.name + index2">
|
||||
<span>{{ attr.name }}</span>
|
||||
<span v-if="attr.type === 'image'">
|
||||
<a-image :width="85" :height="60" :src="val.img" />
|
||||
|
|
@ -44,51 +37,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多{{ title.name }}</div>
|
||||
<div
|
||||
class="form"
|
||||
v-for="(val, index) in props.configure.filter(
|
||||
<div class="form" v-for="(val, index) in props.configure.filter(
|
||||
(item) => item.name === title.name
|
||||
)[0].list"
|
||||
:key="'key3' + val.name + index"
|
||||
>
|
||||
)[0].list" :key="'key3' + val.name + index">
|
||||
<span>{{ val.name }}</span>
|
||||
<a-input
|
||||
v-model:value="val.note1"
|
||||
:maxlength="24"
|
||||
:placeholder="'请填写' + val.name + ',不超过24个字符'"
|
||||
v-if="val.type == 'input'"
|
||||
/>
|
||||
<a-textarea
|
||||
v-model:value="val.note1"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
:placeholder="'请填写' + val.name"
|
||||
v-else-if="val.type == 'textArea'"
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="val.note1"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:step="0.01"
|
||||
string-mode
|
||||
:placeholder="'请填写' + val.name"
|
||||
v-else-if="val.type == 'number'"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-model:value="val.note1"
|
||||
:options="val.options"
|
||||
v-else-if="val.type == 'radio'"
|
||||
/>
|
||||
<upload
|
||||
:key="showKey"
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="val"
|
||||
:list="[]"
|
||||
tip="支持图片类型，大小不超过100M"
|
||||
v-else-if="val.type == 'image'"
|
||||
></upload>
|
||||
<a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
|
||||
v-if="val.type == 'input'" />
|
||||
<a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
|
||||
v-else-if="val.type == 'textArea'" />
|
||||
<a-input-number v-model:value="val.note1" :min="0" :max="9999" :step="0.01" string-mode
|
||||
:placeholder="'请填写' + val.name" v-else-if="val.type == 'number'" />
|
||||
<a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
|
||||
<upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型，大小不超过100M"
|
||||
v-else-if="val.type == 'image'"></upload>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add(title.name)">提交</a-button>
|
||||
|
|
@ -99,110 +60,53 @@
|
|||
<div class="bottom">
|
||||
<div class="form" v-for="item in title.children" :key="item.id">
|
||||
<span>{{ item.name }}</span>
|
||||
<a-input
|
||||
v-if="item.type == 'input'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-else-if="item.type == 'radio'"
|
||||
v-model:value="item.note1"
|
||||
:options="item.options"
|
||||
/>
|
||||
<a-input
|
||||
v-if="item.type == 'text'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
:disabled="true"
|
||||
/>
|
||||
<a-input
|
||||
v-if="item.type == 'text2'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
:disabled="true"
|
||||
/>
|
||||
<a-textarea
|
||||
v-else-if="item.type == 'textArea'"
|
||||
v-model:value="item.note1"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
:placeholder="'请输入' + item.name"
|
||||
/>
|
||||
<upload
|
||||
v-else-if="item.type == 'image'"
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.imgList"
|
||||
tip="支持图片类型，大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.type == 'file' && item.name !== '使用手册'"
|
||||
type="文件"
|
||||
btnName="上传附件"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.fileList"
|
||||
tip="支持文件类型，大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.name == '使用手册'"
|
||||
type="文件"
|
||||
btnName="上传附件"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:busType="2"
|
||||
:list="props.fileList2"
|
||||
tip="支持文件类型，大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.type == 'video'"
|
||||
type="视频"
|
||||
btnName="上传视频"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.videoList"
|
||||
tip="支持视频类型，大小不超过100M"
|
||||
></upload>
|
||||
<a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
|
||||
<a-input v-if="item.type == 'input'" v-model:value="item.note1" :placeholder="'请输入' + item.name" />
|
||||
<a-radio-group v-else-if="item.type == 'radio'" v-model:value="item.note1" :options="item.options" />
|
||||
<a-input v-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
|
||||
:disabled="true" />
|
||||
<a-input v-if="item.type == 'text2'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
|
||||
:disabled="true" />
|
||||
<a-textarea v-else-if="item.type == 'textArea'" v-model:value="item.note1" :showCount="true"
|
||||
:maxlength="200" :placeholder="'请输入' + item.name" />
|
||||
<upload v-else-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
|
||||
:list="props.imgList" tip="支持图片类型，大小不超过100M"></upload>
|
||||
<upload v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
|
||||
:data="item" :list="props.fileList" tip="支持文件类型，大小不超过100M"></upload>
|
||||
<upload v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
|
||||
:list="props.fileList2" tip="支持文件类型，大小不超过100M"></upload>
|
||||
<upload v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :data="item"
|
||||
:list="props.videoList" tip="支持视频类型，大小不超过100M"></upload>
|
||||
<a-button v-else-if="item.type == 'dialog'" @click="sourceClick(title.name)">
|
||||
请选择来源应用
|
||||
</a-button>
|
||||
<a-select
|
||||
v-else-if="item.type == 'select'"
|
||||
style="width: 240px"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请选择' + item.name"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(itemSelect, indexSelect) in item.options"
|
||||
:key="indexSelect"
|
||||
:value="itemSelect.dictLabel"
|
||||
>
|
||||
<a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
|
||||
:placeholder="'请选择' + item.name">
|
||||
<a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
|
||||
:value="itemSelect.dictLabel">
|
||||
{{ itemSelect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<div
|
||||
v-else-if="item.type == 'checkBox'"
|
||||
class="application-Area"
|
||||
id="application-Area"
|
||||
:key="showKey"
|
||||
>
|
||||
<div
|
||||
v-for="(itemson, indexson) in item.options"
|
||||
:key="indexson"
|
||||
class="application-Area-son"
|
||||
@click="ApplicationArea(item, itemson)"
|
||||
:class="
|
||||
<div v-else-if="item.type == 'checkBox'" class="application-Area" id="application-Area" :key="showKey">
|
||||
<div v-for="(itemson, indexson) in item.options" :key="indexson" class="application-Area-son"
|
||||
@click="ApplicationArea(item, itemson)" :class="
|
||||
item.note2.indexOf(itemson.dictLabel) != -1
|
||||
? 'application-Area-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
">
|
||||
{{ itemson.dictLabel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="AssociatedApplication">
|
||||
<a-modal v-model:visible="visibleAssociatedApplication" title="关联应用" @ok="handleOk" @cancel="handleCancel"
|
||||
style="width: 960px">
|
||||
<div>
|
||||
<a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys"
|
||||
:data-source="mockData" :titles="['未关联的应用名称', '已关联的应用名称']" :render="(item) => item.title"
|
||||
@change="handleChange" @selectChange="handleSelectChange" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -213,8 +117,12 @@
|
|||
import mybus from '@/myplugins/mybus'
|
||||
import upload from '@/views/components/upload'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
import {
|
||||
getCategoryTreePage,
|
||||
queryApplicationRelByResourceId,
|
||||
} from '@/api/personalCenter'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const abilityToType = router.currentRoute.value.query.abilityToType
|
||||
const componentTypeValue = router.currentRoute.value.query.componentTypeValue
|
||||
|
|
@ -364,6 +272,7 @@
|
|||
})
|
||||
}
|
||||
const add = (title) => {
|
||||
console.log(title, 'title')
|
||||
let list = props.configure.filter((item) => item.name === title)[0].list
|
||||
let flag = true
|
||||
list.forEach((item) => {
|
||||
|
|
@ -415,7 +324,55 @@
|
|||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
const sourceClick = () => {}
|
||||
// 来源应用
|
||||
const visibleAssociatedApplication = ref(false)
|
||||
const mockData = ref([])
|
||||
|
||||
const sourceClick = (title) => {
|
||||
console.log(title, 'title')
|
||||
visibleAssociatedApplication.value = true
|
||||
queryApplicationRelByResourceId({
|
||||
referenceId: 0,
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
// console.log(val, index)
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
const targetKeys = ref([])
|
||||
const selectedKeys = ref([])
|
||||
|
||||
const handleChange = (nextTargetKeys, direction, moveKeys) => {
|
||||
console.log('targetKeys: ', nextTargetKeys)
|
||||
console.log('direction: ', direction)
|
||||
console.log('moveKeys: ', moveKeys)
|
||||
}
|
||||
|
||||
const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
||||
console.log('targetSelectedKeys: ', targetSelectedKeys)
|
||||
}
|
||||
|
||||
const handleOk = (e) => {
|
||||
console.log(e)
|
||||
visibleAssociatedApplication.value = false
|
||||
// console.log('2222222222222', props.refData)
|
||||
data.value.list.map((item) => {
|
||||
if (item.name === '来源应用') {
|
||||
item.note1 = targetKeys.value + ''
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCancel = (e) => {
|
||||
console.log(e)
|
||||
visibleAssociatedApplication.value = false
|
||||
}
|
||||
|
||||
watch(data.value.list, (newProps, oldProps) => {
|
||||
// console.log(newProps, oldProps)
|
||||
newProps.forEach((val) => {
|
||||
|
|
@ -458,9 +415,11 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
|
||||
&>div {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
|
|
@ -468,40 +427,50 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 245px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 25px;
|
||||
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
p:nth-of-type(1)>span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
|
@ -510,36 +479,45 @@
|
|||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
span:first-child {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
|
|
@ -550,10 +528,12 @@
|
|||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
|
|
@ -566,15 +546,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>div:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.application-Area {
|
||||
width: 570px;
|
||||
display: grid;
|
||||
margin-top: -5px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
|
||||
.application-Area-son {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
|
|
@ -590,14 +573,73 @@
|
|||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.application-Area-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
:deep(.ant-modal) {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list) {
|
||||
width: 39.5%;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-operation) {
|
||||
flex-direction: row-reverse;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn) {
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-footer) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-header) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-title) {
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header-selected) {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header-title) {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue