Commit bc36d729 authored by wangdanlei's avatar wangdanlei

新UI更新(我的空间,收藏,容器)

parent 3ff12a8b
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>切换上下文</title>
<g id="页面-1" stroke="none" stroke-width="1">
<g id="文档中心-搜索某条件备份" transform="translate(-228.000000, -431.000000)">
<g id="编组-20" transform="translate(4.000000, 68.000000)">
<g id="cengji" transform="translate(224.000000, 363.000000)">
<path d="M8.02779038,9.55555556 C7.94184001,9.55555556 7.85803839,9.53714109 7.77853429,9.50235822 L0.343826717,6.22663026 C0.133248294,6.13455796 -0.00212354885,5.93199889 0,5.71102536 C0,5.49005183 0.137545813,5.28953881 0.348124236,5.19746651 L3.22746185,3.95142133 C3.52613941,3.8225201 3.87853595,3.94732923 4.0139078,4.23173034 C4.14927964,4.51613146 4.01820532,4.85168386 3.71952776,4.98058508 L2.01985906,5.71716351 L8.03423666,8.36884586 L14.0099366,5.86243315 L7.86233591,3.18824423 L6.92977432,3.59131632 C6.63109676,3.72021754 6.27870022,3.59540842 6.14332838,3.30896125 C6.00795653,3.02456014 6.13903086,2.68900774 6.43770842,2.56010652 L7.61522858,2.05063977 C7.77208801,1.98312008 7.9525838,1.98312008 8.10944324,2.05063977 L15.7074565,5.3570585 C15.9201837,5.4491308 16.0555556,5.65373592 16.0555556,5.8767555 C16.0534068,6.09977508 15.9158862,6.3002881 15.7010103,6.39031435 L8.26845144,9.50849638 C8.1910961,9.5412332 8.10944324,9.55555556 8.02779038,9.55555556 L8.02779038,9.55555556 Z" id="路径"></path>
<path d="M5.03744136,4.22429962 C4.81181126,4.22429962 4.5947766,4.0943253 4.49592912,3.87336895 C4.36055107,3.57226177 4.49163141,3.21699863 4.79032268,3.07835935 L4.96652904,2.99820852 C5.26522031,2.86173548 5.61763303,2.99387604 5.75515995,3.29498322 C5.890538,3.5960904 5.75945766,3.95135354 5.46076639,4.08999282 L5.28456003,4.17014365 C5.20505228,4.20696971 5.11909796,4.22429962 5.03744136,4.22429962 Z" id="形状"></path>
<path d="M7.77078881,16.1091109 L0.33788878,12.5662309 C0.0413463683,12.4255389 -0.0832873991,12.0738089 0.0585372328,11.7796348 C0.200361865,11.4854606 0.554923444,11.3618222 0.851465857,11.5025142 L7.77078881,14.7781206 C7.77078881,15.6654475 7.77078881,16.1091109 7.77078881,16.1091109 Z" id="路径"></path>
<path d="M7.77078881,13.2757775 L0.33788878,9.73289753 C0.0413463683,9.59220554 -0.0832873991,9.24047558 0.0585372328,8.94630143 C0.200361865,8.65212728 0.554923444,8.52848887 0.851465857,8.66918085 L7.77078881,11.9447873 C7.77078881,12.8321141 7.77078881,13.2757775 7.77078881,13.2757775 Z" id="路径备份"></path>
<path d="M8.5,11.517094 L9.44444444,10.4709402 L10.9083333,8.61111111 L11.475,9.30854701 L10.5777778,10.4128205 L17,10.4128205 L17,11.517094 L9.68055556,11.517094 L8.5,11.517094 Z M15.8666667,13.2606838 L17,13.2606838 L16.0555556,14.3649573 L14.5916667,16.1666667 L14.025,15.4692308 L14.9222222,14.3649573 L8.5,14.3649573 L8.5,13.2606838 L15.8666667,13.2606838 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -12,3 +12,7 @@ export function collectObject(params) {
export function unCollectObject(params) {
return post('/ObjectFavoriteLog/unCollect', params)
}
// 获取容器的最近访问记录
export function getContextRecentRecords(params) {
return post('/UserSpace/findLogPage', params)
}
/**
* @Description:
* @author cxg
* @date 2023/05/16
*/
<template>
<div class="ViewKeySelect-com">
<el-select v-model="bindValue" placeholder="请选择" @change="selectType">
<el-option
v-for="item in options"
:key="item.layoutType"
:label="item.componentName"
:value="item.layoutType"
/>
</el-select>
</div>
</template>
<script>
export default {
components: {},
props: {
form: {
type: Object,
default: () => {}
},
value: {
type: String,
default: () => {}
}
},
data() {
return {
bindValue: '',
options: []
}
},
computed: {},
watch: {
'form.modelName.name': {
handler: function(val) {
if (val) {
const params = {
'pageFrom': 1,
'pageSize': 10,
'searchItems': {
'items': [
{
'fieldName': 'typeKey',
'operator': 'EQ',
'value': val
},
{
'fieldName': 'layType',
'operator': 'EQ',
'value': 'table'
}
],
'operator': 'AND'
},
'sortItem': [
{
'fieldName': 'modifyTime',
'sortOrder': 'desc'
}
]
}
this.$api.searchApi('DxModelComponent', params).then(res => {
this.options = res.items.content
})
}
},
immediate: true,
deep: true
},
'value': {
handler: function(val) {
if (val !== this.bindValue) {
this.bindValue = val
}
},
immediate: true,
deep: true
}
},
mounted() {},
methods: {
selectType(val) {
this.$emit('input', val)
}
}
}
</script>
<style lang='scss'>
</style>
/**
* @Description:容器容器
* @author wx
* @date 2023/07/12
*/
<template>
<div class="contextContainer-com">
<dee-form
:form="dxContextForm"
:form-data="dxContextFormData"
/>
<dee-as-com
ref="ContextContainerTree"
:lay-config="{
typeName:'DxFolder',
layKey:'defaultTree'
}"
:basic-data="dxContextData"
@nodeClick="nodeClick"
/>
<dee-dialog
:dialog-visible="dialogVisible"
title="选择容器"
width="1080px"
@handleClose="handleClose"
>
<dee-as-com
style="height:414px"
:lay-config="{
typeName: 'DxContext',
layKey: 'defaultResult'
}"
@row-click="handleRowClick"
@on-selectDxContext="selectDxContext"
/>
</dee-dialog>
</div>
</template>
<script>
import { getContextRecentRecords } from '@/api/collect'
export default {
name: 'ContextContainer',
components: {},
props: {
componentProp: {
type: Object,
default: null
}
},
data() {
return {
dialogVisible: false,
dxContextForm: {},
dxContextOptions: [{
label: '全部',
value: '全部'
}],
dxContextData: null
}
},
computed: {
dxContextFormData() {
return [
{
split: 1,
data: [
{
key: 'dxContextId',
title: '',
component: {
name: 'el-select',
options: this.dxContextOptions
},
handler: {
change: (val) => {
this.changeDxContext(val)
}
}
}
]
}
]
}
},
watch: {
},
created() {
this.getOptions()
},
mounted() {
},
methods: {
getOptions() {
const params = {
pageIndex: 1,
pageSize: 9999,
type: 0,
modelViews: [{
'modelName': 'DxContextProject',
'viewIds': []
}]
}
getContextRecentRecords(params).then(res => {
const arr = res.items && res.items.content ? res.items.content.map(r => {
return {
label: r.idVO.name,
value: r.idVO.id,
data: r.idVO
}
}) : []
this.dxContextOptions = arr.concat([{
label: '全部',
value: '全部'
}])
if (arr.length) {
this.$set(this.dxContextForm, 'dxContextId', arr[0].value)
this.changeDxContext(arr[0].data)
}
})
},
changeDxContext(val) {
if (val === '全部') {
this.dialogVisible = true
} else {
const data = val.id ? val : this.dxContextOptions.find(r => r.value === val).data
data.children = []
this.dxContextData = data
this.$nextTick(() => {
this.$refs.ContextContainerTree && this.$refs.ContextContainerTree.$refs.asCom && this.$refs.ContextContainerTree.$refs.asCom.getTreeData()
})
}
},
selectDxContext(val) {
this.handleRowClick({ row: val })
},
handleRowClick(row) {
const data = row.row
// 增加容器的最近访问记录
const serverParams = {
pageFrom: 1,
pageSize: 1,
searchItems: {
items: [
{ fieldName: 'id', operator: 'EQ', value: data.id }
]
},
sortItem: [{ fieldName: 'modifyTime', sortOrder: 'asc' }]
}
if (this.configOpenPropObj) {
serverParams.openProps = JSON.parse(this.configOpenPropObj)
}
serverParams.DEX_FORM_DETAILS = true
this.$api.searchApi('DxContext', serverParams).then(res => {
this.$nextTick(() => {
this.$refs.ContextContainerTree.$refs.asCom.getTreeData()
})
this.handleClose()
setTimeout(() => {
this.getOptions()
}, 600)
})
},
handleClose() {
this.dialogVisible = false
},
nodeClick(data) {
this.$emit('typeSearch', 'contextContainerSearch', { data: data.data, componentProp: this.componentProp, componentName: 'ContextContainer' }, '容器')
}
}
}
</script>
<style lang='scss'>
.contextContainer-com{
.el-form-item{
margin-bottom: 0!important;
}
}
</style>
/**
* @Description:我的收藏夹
* @author wx
* @date 2023/07/12
*/
<template>
<div class="myFavorites-com">
<dee-as-com
ref="MyFavoritesTree"
:lay-config="{
typeName:'DxFavoriteFolder',
layKey:'defaultTree'
}"
@nodeClick="nodeClick"
/>
<dee-dialog
:dialog-visible="dialogVisible"
title="我的收藏夹配置"
width="430px"
@handleClose="handleClose"
>
<dee-as-com
:lay-config="{
typeName:'DxFavoriteFolder',
layKey:'fcfc6b21-bcc7-49ab-a380-ce6738603659'
}"
/>
</dee-dialog>
</div>
</template>
<script>
export default {
name: 'MyFavorites',
components: {},
props: {
componentProp: {
type: Object,
default: null
}
},
data() {
return {
evenList: [
{
even: 'nodeClick',
name: '节点被点击时的回调'
}
],
dialogVisible: false
}
},
computed: {},
mounted() {},
methods: {
setFavorites() {
this.dialogVisible = true
},
handleClose() {
this.dialogVisible = false
this.$refs.MyFavoritesTree.$refs.asCom.getTreeData()
},
nodeClick(data) {
this.$emit('typeSearch', 'collectedSearch', { data: data.data, componentProp: this.componentProp, componentName: 'MyFavorites' }, '我的收藏')
}
}
}
</script>
<style lang='scss'>
</style>
/**
* @Description:我的空间
* @author wx
* @date 2023/07/11
*/
<template>
<div class="tl">
<div v-for="(x,i) in evenList" :key="i" :class="{'dee-active-row-background': curItemName(x.name)}" class="dee-row-item" @click.stop="typeSearch(x.even,x)">
<img :src="x.icon" alt="">
{{ x.name }}
</div>
</div>
</template>
<script>
export default {
name: 'MySpace',
componentName: '我的空间',
components: {},
props: {
componentProp: {
type: Object,
default: null
}
},
data() {
return {
evenList: []
}
},
computed: {
pageId() {
return this.$route.path
}
},
watch: {
'componentProp.spaceSearchList': {
immediate: true,
deep: true,
handler: function(val) {
if (val && val.length) {
this.evenList = val
}
}
}
},
mounted() {
if (this.evenList.length) {
this.typeSearch(this.evenList[0].even, { ...this.evenList[0], componentName: 'MySpace' }, this.componentProp.title)
}
},
methods: {
typeSearch(data, item) {
this.$emit('typeSearch', data, { ...item, componentName: 'MySpace' }, this.componentProp.title)
},
curItemName(name) {
const visitePath = this.$store.state.breadcrumb.visitePath[this.pageId] || []
return !!(visitePath.length >= 2 && name === visitePath[1])
}
}
}
</script>
<style lang='scss'>
</style>
import searchSetting from './searchSetting'
// import mySpace from './components/mySpace'
// import myFavorites from './components/myFavorites'
// import contextContainer from './components/contextContainer'
export default {
props: {},
layoutConfigData: [
{
title: '功能组件',
data: [
{
key: 'componentList',
title: '',
component: {
name: searchSetting,
defaultValue: [{
'title': '我的空间',
'componentName': 'MySpace',
'show': true,
'clickFun': '',
'clickIcon': '',
// 'foldStatus': true,
'isDefault': true,
'hiddenIcon': true,
'spaceSearchList': [{
show: true,
even: 'recentSearch',
name: '最近访问',
icon: '/icons/recent.png',
seachCondition: 'seachCondition = []'
}, {
show: true,
even: 'modifySearch',
name: '我修改的',
icon: '/icons/modify.png',
seachCondition: 'seachCondition = [{"fieldName": "modifierId","operator": "EQ","value": localStorage.getItem("userId")}]'
},
{
show: true,
even: 'createSearch',
name: '我创建的',
icon: '/icons/create.png',
seachCondition: 'seachCondition = [{"fieldName": "creatorId","operator": "EQ","value": localStorage.getItem("userId")}]'
},
{
show: true,
even: 'checkoutSearch',
name: '我检出的',
icon: '/icons/checkout.png',
seachCondition: 'seachCondition = [{"fieldName": "lockerId","operator": "EQ","value": localStorage.getItem("userId")}]'
},
{
show: true,
even: 'conditionSearch',
name: '查询过滤',
icon: '/icons/searchFilter.png',
seachCondition: 'seachCondition = []'
}]
}, {
'title': '我的收藏夹',
'componentName': 'MyFavorites',
'show': true,
'clickFun': 'setFavorites',
'clickIcon': 'setFavorites',
// 'foldStatus': true,
'isDefault': true
}, {
'title': '容器',
'componentName': 'ContextContainer',
'show': true,
'clickFun': '',
'clickIcon': '',
// 'foldStatus': true,
'isDefault': true
}, {
'title': '目录导航',
'componentName': 'CatalogNavigation',
'show': false,
'comType': 'privateComponent',
'webServerName': 'dee-doc',
'codePath': '/CatalogNavigation/index.vue',
'clickFun': 'openDialog',
'clickIcon': 'qiehuanrongqi',
// 'foldStatus': true,
'isDefault': false
}]
}
}
]
}
],
data() {
return {
}
},
created() {
},
computed: {
},
methods: {
}
}
/**
* @Description:筛选区-固定
* @author wx
* @date 2023/07/10
*/
<template>
<div class="deeFilterAreaFixed-com">
<div v-for="(item, y) in showLists" :key="y" class="content-item">
<div class="titile-wrap flex-s">
<div class="flex-start cursor" @click="changeFoldStatus(item)">
<i class="title-icon" :class="item.defaultFoldStatus || item.foldStatus ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" />
<span class="title">{{ item.title }}</span>
</div>
<img v-if="item.clickIcon && item.clickIcon.indexOf('.') > -1" :src="item.clickIcon" alt="" @click="clickNode(item)">
<svg-icon
v-else-if="item.clickIcon"
class="click-icon"
:icon-class="item.clickIcon"
@click="clickNode(item)"
/>
</div>
<div v-show="item.defaultFoldStatus || item.foldStatus">
<my-space
v-if="item && (item.componentName ==='MySpace' || item.componentName.name ==='MySpace')"
ref="MySpace"
:component-prop="{...item}"
@typeSearch="typeSearch"
/>
<my-favorites
v-if="item && (item.componentName ==='MyFavorites' || item.componentName.name ==='MyFavorites')"
ref="MyFavorites"
:component-prop="{...item}"
@typeSearch="typeSearch"
/>
<context-container
v-if="item && (item.componentName ==='ContextContainer' || item.componentName.name ==='ContextContainer')"
ref="ContextContainer"
:component-prop="{...item}"
@typeSearch="typeSearch"
/>
<dee-as-com
v-if="item && item.comType && item.comType === 'privateComponent'"
:ref="item.componentName"
:component-prop="{...item, selfComponentPath: item.codePath}"
:lay-config="{
component: {
registrationType: 'custom',
codeApp: item.webServerName,
codePath: item.codePath
}
}"
@typeSearch="typeSearch"
/>
<component
:is="item.componentName"
v-if="item && item.comType && item.comType === 'globalComponents'"
:ref="item.componentName"
:component-prop="{...item, selfComponentPath: item.codePath}"
@typeSearch="typeSearch"
/>
</div>
</div>
</div>
</template>
<script>
import mySpace from './components/mySpace'
import myFavorites from './components/myFavorites'
import contextContainer from './components/contextContainer'
import config from './config'
export default {
name: 'DeeFilterAreaFixed',
componentName: '筛选区',
// import引入的组件需要注入到对象中才能使用
components: { mySpace, myFavorites, contextContainer },
mixins: [config],
props: {
layConfig: {
type: Object,
default: null
},
controlOtherLayout: {
type: Array,
default: () => []
}
},
data() {
// 这里存放数据
return {
controlOtherLayoutConfig: [
{
value: 'recentSearch',
label: '最近访问',
isDefault: true
},
{
value: 'collectedSearch',
label: '收藏',
isDefault: true
},
{
value: 'conditionSearch',
label: '查询过滤',
isDefault: true
},
{
value: 'modifySearch',
label: '我修改的',
isDefault: true
},
{
value: 'createSearch',
label: '我创建的',
isDefault: true
},
{
value: 'checkoutSearch',
label: '我检出的',
isDefault: true
},
{
value: 'contextContainerSearch',
label: '容器搜索',
isDefault: true
}
// {
// value: 'catalogNavigationSearch',
// label: '目录导航',
// isDefault: false
// }
]
}
},
// 监听属性 类似于data概念
computed: {
showLists() {
if (this.layConfig) {
return this.layConfig && this.layConfig.componentList ? this.layConfig.componentList.filter(r => r.show) : []
} else {
return []
}
},
pageId() {
return this.$route.path
},
evenList() {
return this.controlOtherLayout.map(r => {
return {
name: r.label,
even: r.value
}
})
},
modelName() {
return this.layConfig.modelName && this.layConfig.modelName.name ? this.layConfig.modelName.name : ''
}
},
// 监控data中的数据变化
watch: {},
// 生命周期 - 创建完成(可以访问当前this实例)
created() {
},
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
// const data = this.showLists.length && this.showLists[0].evenList.length ? this.showLists[0].evenList[0] : null
// data && this.typeSearch(data.even, data, data.title)
},
activated() {
},
// 方法集合
methods: {
changeFoldStatus(item) {
this.$set(item, 'defaultFoldStatus', false)
this.$set(item, 'foldStatus', !item.foldStatus)
this.$forceUpdate()
},
typeSearch(data, item, title) {
this.$emit('emitLayoutChange', data)
this.$emit(data, { ...item, itemTitle: title })
this.updateVisitePath(item, title)
item.componentName && this.setTreeComCurrentKey(item.componentName)
},
setTreeComCurrentKey(name) {
this.showLists.forEach(item => {
const compName = item.componentName.name || item.componentName
if (compName !== name && this.$refs[compName] && this.$refs[compName][0] && this.$refs[compName][0].$refs[`${compName}Tree`] && this.$refs[compName][0].$refs[`${compName}Tree`].$refs.asCom && this.$refs[compName][0].$refs[`${compName}Tree`].$refs.asCom.$refs.tree) {
this.$refs[compName][0].$refs[`${compName}Tree`].$refs.asCom.$refs.tree.setCurrentKey(null)
}
})
},
clickNode(item) {
if (item.clickFun) {
if (item.isDefault) {
const compName = item.componentName.name || item.componentName
this.$refs[compName][0][item.clickFun]()
} else {
this.$refs[item.componentName][0].$refs.asCom[item.clickFun]()
}
}
},
updateVisitePath(item, title, arr = []) {
const visitePath = this.$store.state.breadcrumb.visitePath
title && arr.push(title)
item && arr.push(item.name)
this.$set(visitePath, this.pageId, arr)
this.$store.dispatch('breadcrumb/updatavisitePath', visitePath)
},
curItemName(name) {
const visitePath = this.$store.state.breadcrumb.visitePath[this.pageId] || []
return !!(visitePath.length >= 2 && name === visitePath[1])
}
}
}
</script>
<style lang='scss'>
.deeFilterAreaFixed-com{
height: 100%;
.flex-s{
display: flex;
justify-content: space-between;
}
.tl{
text-align: left;
}
.click-icon{
font-size: 18px;
}
.titile-wrap{
// position: sticky;
// top: 0;
background: #fff;
padding: 6px 12px 6px 0;
.title-icon{
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
color: #A1A1A1;
}
.title{
font-size: 13px;
color: #343434;
font-weight: 600;
}
}
.cursor{
cursor: pointer;
}
.dee-row-item{
display: flex;
font-size: 14px;
color: #232323;
line-height: 34px;
padding: 0 14px 0 24px;
cursor: pointer;
img{
width: 18px;
display: block;
margin: auto 6px auto 0;
}
}
.content-item{
border-bottom: 1px solid #F3F3F3;
padding-bottom: 10px;
margin-bottom: 10px;
&:last-child{
border-bottom: none;
}
}
}
</style>
/**
* @Description:
* @author cxg
* @date 2022/03/08
*/
<template>
<div class="select-model-com">
<div class="select-model-form">
<dee-form
:form="modelForm"
:form-data="propFormData"
/>
<el-button type="primary" @click="changeModelList">添加</el-button>
</div>
<div>
<div class="dee-h3 active-text">待选模型</div>
<div class="model-list-content">
<dee-up-table
index-row
:columns="communicationTableColumns"
:data="tableData || []"
/>
</div>
</div>
<span style="display:flex;justify-content: center;margin-top: 12px;">
<el-button
type="primary"
class="searchBtn"
@click="handleSubmit"
>确定</el-button>
<el-button
class="searchBtn"
@click="handleClose"
>取消</el-button>
</span>
</div>
</template>
<script>
export default {
components: {},
props: {
value: {
type: Array,
default: () => []
}
},
data() {
return {
modelApps: [],
modelForm: {},
modelsTreeData: [],
tableData: [],
selectionRow: [],
viewOptions: []
}
},
computed: {
propFormData() {
const propFormData = [
{
split: 2,
data: [
{
key: 'app',
title: '选择应用',
width: 1,
component: {
name: 'el-select',
options: this.modelApps
}
},
{
key: 'model',
title: '选择模型',
width: 1,
component: {
dicType: '2',
name: 'DeeUpdataCascader',
options: this.modelsTreeData,
labelTemplateWord: '{{displayName}}({{name}})',
valueKey: 'id',
labelWord: 'displayName',
checkStrictly: true,
isBindObj: true
}
}
]
}
]
return propFormData
},
communicationTableColumns() {
return [
{
title: '名称',
key: 'modelDisplayName',
align: 'center'
},
{
title: '视图',
key: 'viewIds',
align: 'center',
component: {
name: 'tableCellFormCheck',
show: true,
props: {
bindKey: 'viewIds',
component: {
name: 'el-select',
multiple: true,
options: this.viewOptions
}
},
handler: {
changeForm: (valObj) => {
this.tableDataChange(valObj)
}
}
}
},
{
title: '操作',
key: 'type',
align: 'center',
component: {
show: true,
name: 'EditTableRow',
props: {
btns: [
{
operation: '删除',
handleClick: (row, index) => {
this.handleRemove(row, index)
}
}]
}
}
}
]
}
},
watch: {
'modelForm.app': {
deep: true,
handler: function(val) {
if (val) {
const serverParams = {
searchItems: {
'operator': 'AND',
'items': [
{
'fieldName': 'id',
'operator': 'EQ',
'value': val
}
]
},
sortItem: [{ fieldName: 'modifyTime', sortOrder: 'asc' }],
'openProps': [
{
'name': 'sourceDxAppModelDefLink',
'openProps': [
{
'name': 'target'
}
]
}
]
}
this.$api.searchApi('DxApplication', serverParams).then(res => {
let modelData = []
if (res.items.content[0].sourceDxAppModelDefLink) {
modelData = res.items.content[0].sourceDxAppModelDefLink.map(el => {
return el.target
})
}
const POData = []
modelData.filter(el => {
if (el && el.modelDefinitionType === 'PO') {
const findP = POData.find((item) => {
return item.id === el.id
})
if (!findP) {
POData.push(el)
}
}
})
const VOData = modelData.filter(el => {
return el && el.modelDefinitionType === 'VO'
})
this.modelsTreeData = [
{
displayName: 'PO',
id: 'PO',
name: 'PO',
disabled: true,
children: this.$utils.generateTree(this.$utils._clonedeep(POData), { id: 'id', pid: 'parentId' })
},
{
displayName: 'VO',
id: 'VO',
name: 'VO',
disabled: true,
children: VOData
}
]
})
}
},
immediate: true
},
value: {
immediate: true,
handler: function(val) {
if (!this.tableData.length) {
this.tableData = val.map(r => {
r.show = true
return r
})
}
}
}
},
created() {
this.$api.searchApi('DxApplication',
{
'searchItems': {
'operator': 'AND',
'items': [
{
'fieldName': 'isDisable',
'operator': 'EQ',
'value': false
}
] }}
).then(res => {
this.$set(this, 'modelApps', res.items.content.filter(el => { return el })).map(el => {
el.label = el.name
el.value = el.id
return el
})
})
this.getViewOptions()
},
methods: {
getViewOptions() {
const params = {
'pageFrom': 1,
'pageSize': 9999,
'searchItems': {
'children': [{}],
'items': [
{ 'fieldName': 'id', 'operator': 'NEQ', 'value': '0' }
],
'operator': 'AND'
}
}
this.$api.searchApi('DxView', params).then(res => {
this.viewOptions = res.items.content.map(r => {
return {
label: r.name,
value: r.id
}
})
})
},
handleRemove(row, index) {
this.tableData = this.tableData.filter(el => {
return el.modelName !== row.modelName
})
this.$utils.showMessageSuccess('删除成功!')
},
tableDataChange(valObj) {
const { index, val, key } = valObj
this.$set(this.tableData[index], key, val)
},
changeModelList() {
console.log('modelForm', this.modelForm)
if (this.modelForm.model) {
this.tableData.push({
model: this.modelForm.model,
modelName: this.modelForm.model.name,
modelDisplayName: this.modelForm.model.displayName,
viewIds: []
})
}
},
handleClose() {
this.$emit('handleClose')
},
handleSubmit() {
this.$emit('choose', this.tableData)
}
}
}
</script>
<style lang='scss'>
.select-model-com{
.model-list-content{
height: 360px;
}
.select-model-form{
display: flex;
.el-button{
margin:4px 10px;
}
}
}
</style>
<template>
<div class="model-select-com">
<div class="model-select-btn" @click="changeModel">
<div v-if="value.length" class="model-select-box">
<span>{{ valueLabel }}</span>
<svg-icon icon-class="switchover" />
</div>
<div v-else class="model-select-remind">点击选择模型</div>
</div>
<dee-dialog
:dialog-visible="selectModelDia"
title="选择模型"
width="1080px"
@handleClose="handleClose"
>
<select-model
:value="value"
@choose="choose"
@handleClose="handleClose"
/>
</dee-dialog>
</div>
</template>
<script>
import selectModel from './components/selectModel'
export default {
name: 'ModelSelect',
components: { selectModel },
props: {
value: {
type: Array,
default: () => []
}
},
data() {
return {
selectModelDia: false
}
},
computed: {
valueLabel() {
return this.value.length ? this.value.map(x => x.modelDisplayName).join(',') : ''
}
},
mounted() {
},
methods: {
choose(data) {
this.$emit('input', data)
this.handleClose()
},
changeModel() {
this.selectModelDia = true
},
handleClose() {
this.selectModelDia = false
}
}
}
</script>
<style lang="scss">
.model-select-com{
.model-select-btn {
padding: 6px 10px;
cursor: pointer;
line-height: 18px;
}
.model-select-box{
display: flex;
justify-content: space-between;
line-height: 18px;
}
.model-select-remind{
text-align: center;
}
}
</style>
/**
* @Description:筛选区的配置
* @author wx
* @date 2023/03/23
*/
<template>
<div class="search-setting-com">
<draggable
class="vacant-draggable-area"
:list="value"
group="subfieldForm"
>
<div
v-for="(element, itemDataIndex) in value"
:key="itemDataIndex"
class="list-drag-item"
>
<span>{{ element.title!=='标签项' && element.name ? element.name : element.title }}</span>
<span>
<el-checkbox v-model="element.show" />&nbsp;&nbsp;
<i
slot="reference"
title="编辑"
class="el-icon-edit-outline form-item-handle subfield-form-icon"
@click="editItem(element,itemDataIndex)"
>&nbsp;</i>
<i
v-show="!element.isDefault"
title="删除"
class="el-icon-delete form-item-handle subfield-form-icon"
@click="deleteItem(element,itemDataIndex)"
>&nbsp;</i>
</span>
</div>
</draggable>
<el-button type="primary" style="width:100%" @click="addItem">添加一项</el-button>
<dee-dialog
title="表单配置"
:dialog-visible="dialogVisible"
width="580px"
@handleClose="handleClose"
>
<dee-form
ref="elementForm"
:form="elementForm"
:form-data="elementData"
form-btn-position="center"
:inline="true"
label-width="110px"
>
<span style="display:flex">
<el-button
type="primary"
class="searchBtn"
@click="handleSubmit"
>确定</el-button>
<el-button
class="searchBtn"
@click="handleClose"
>取消</el-button>
</span>
</dee-form>
</dee-dialog>
</div>
</template>
<script>
import Draggable from 'vuedraggable'
import modelSelect from '../modelSelect'
import spaceSearchSetting from '../spaceSearchSetting'
export default {
componentName: '搜索表单配置项',
name: 'SearchSetting',
components: { Draggable },
props: {
value: {
type: Array,
default: () => []
},
configItem: {
type: Object,
default: null
}
},
data() {
return {
dialogVisible: false,
elementForm: {},
editIndex: ''
}
},
computed: {
elementData() {
return [
{
split: 1,
data: [
{
key: 'title',
title: '标题',
component: {
name: 'el-input'
}
},
{
key: 'spaceSearchList',
title: '扩展项',
component: {
obscure: this.elementForm.isDefault && !this.elementForm.spaceSearchList,
name: spaceSearchSetting
}
},
{
key: 'clickIcon',
title: '标题可点击图标',
component: {
obscure: this.elementForm.hiddenIcon,
name: 'IconSelect',
iconType: 'svg'
}
},
{
key: 'clickFun',
title: '标题点击事件',
component: {
obscure: this.elementForm.isDefault || (!this.elementForm.isDefault && this.elementForm.hiddenIcon),
name: 'el-input'
}
},
{
key: 'componentName',
title: '组件名',
component: {
obscure: this.elementForm.isDefault,
name: 'el-input'
}
},
{
key: 'webServerName',
title: '微前端',
component: {
name: 'el-select',
obscure: this.elementForm.isDefault,
options: this.$microModules.map(r => {
return {
label: r,
value: r
}
})
}
},
{
key: 'codePath',
title: '代码路径',
component: {
name: 'el-input',
obscure: this.elementForm.isDefault,
placeholder: '当前微前端privateComponent文件夹的相对路径'
}
}, {
key: 'modelNames',
title: '访问对象',
component: {
obscure: this.elementForm.componentName === 'MySpace' || (this.elementForm.componentName && this.elementForm.componentName.name === 'MySpace'),
name: modelSelect
}
}, {
key: 'defaultFoldStatus',
title: '默认展开',
component: {
name: 'el-checkbox'
}
}]
}
]
}
},
mounted() {
},
methods: {
handleClose() {
this.dialogVisible = false
},
editItem(element, itemDataIndex) {
console.log('element', element)
this.elementForm = element
this.editIndex = itemDataIndex
this.dialogVisible = true
},
addItem() {
this.value.push(
{
title: '标签项',
fieldId: this.$utils.guid(),
comType: 'privateComponent',
show: true
}
)
},
deleteItem(element, itemDataIndex) {
this.value.splice(itemDataIndex, 1)
},
editRelationItem(element) {
this.$emit('editRelationItem', element)
},
handleSubmit() {
this.$set(this.value, this.editIndex, this.elementForm)
this.handleClose()
}
}
}
</script>
<style lang='scss'>
.search-setting-popover-form-item{
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
label{
width: 100px;
text-align: right;
}
}
.search-setting-com{
.list-drag-item{
margin-bottom: 8px;
padding: 0px 8px;
border:solid 1px #d9d9d9;
display: flex;
font-size: 12px;
justify-content: space-between;
cursor: pointer;
.subfield-form-icon{
font-size: 16px
}
}
}
</style>
/**
* @Description:筛选区的配置
* @author wx
* @date 2023/03/23
*/
<template>
<div class="search-setting-com">
<draggable
class="vacant-draggable-area"
:list="value"
group="subfieldForm"
>
<div
v-for="(element, itemDataIndex) in value"
:key="itemDataIndex"
class="list-drag-item"
>
<span>{{ element.title!=='标签项' && element.name ? element.name : element.title }}</span>
<span>
<el-checkbox v-model="element.show" />&nbsp;&nbsp;
<i
slot="reference"
title="编辑"
class="el-icon-edit-outline form-item-handle subfield-form-icon"
@click="editItem(element,itemDataIndex)"
>&nbsp;</i>
<i
v-show="!element.isDefault"
title="删除"
class="el-icon-delete form-item-handle subfield-form-icon"
@click="deleteItem(element,itemDataIndex)"
>&nbsp;</i>
</span>
</div>
</draggable>
<el-button type="primary" style="width:100%" @click="addItem">添加一项</el-button>
<dee-dialog
title="表单配置"
:dialog-visible="dialogVisible"
width="580px"
@handleClose="handleClose"
>
<dee-form
ref="elementForm"
:form="elementForm"
:form-data="elementData"
form-btn-position="center"
:inline="true"
label-width="110px"
>
<span style="display:flex">
<el-button
type="primary"
class="searchBtn"
@click="handleSubmit"
>确定</el-button>
<el-button
class="searchBtn"
@click="handleClose"
>取消</el-button>
</span>
</dee-form>
</dee-dialog>
</div>
</template>
<script>
import Draggable from 'vuedraggable'
import modelSelect from '../modelSelect'
export default {
componentName: '搜索表单配置项',
name: 'SpaceSearchSetting',
components: { Draggable },
props: {
value: {
type: Array,
default: () => []
},
configItem: {
type: Object,
default: null
}
},
data() {
return {
dialogVisible: false,
elementForm: {},
editIndex: ''
}
},
computed: {
elementData() {
return [
{
split: 1,
data: [
{
key: 'name',
title: '名称',
component: {
name: 'el-input'
}
},
{
key: 'icon',
title: '图标',
component: {
name: 'IconSelect'
}
},
{
key: 'even',
title: '事件名称',
component: {
name: 'el-input'
}
},
{
key: 'seachCondition',
title: '查询条件',
component: {
name: 'btnCodeEdit',
remindText: `配置方式:seachCondition为查询参数变量,该变量必须有值<br/>
配置参考:seachCondition = [{"fieldName":"modifierId","operator":"EQ","value":localStorage.getItem('userId')}]`,
codemirrorProps: {
mode: 'application/json'
}
}
},
{
key: 'modelNames',
title: '访问对象',
component: {
name: modelSelect
}
}]
}
]
}
},
mounted() {
},
methods: {
handleClose() {
this.dialogVisible = false
},
editItem(element, itemDataIndex) {
this.elementForm = element
this.editIndex = itemDataIndex
this.dialogVisible = true
},
addItem() {
this.value.push(
{
title: '标签项',
fieldId: this.$utils.guid(),
comType: 'privateComponent',
show: true
}
)
},
deleteItem(element, itemDataIndex) {
this.value.splice(itemDataIndex, 1)
},
editRelationItem(element) {
this.$emit('editRelationItem', element)
},
handleSubmit() {
this.$set(this.value, this.editIndex, this.elementForm)
this.handleClose()
}
}
}
</script>
<style lang='scss'>
.search-setting-popover-form-item{
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
label{
width: 100px;
text-align: right;
}
}
.search-setting-com{
.list-drag-item{
margin-bottom: 8px;
padding: 0px 8px;
border:solid 1px #d9d9d9;
display: flex;
font-size: 12px;
justify-content: space-between;
cursor: pointer;
.subfield-form-icon{
font-size: 16px
}
}
}
</style>
export default {
props: {},
layoutConfigData: [
{
title: '高级组件配置',
data: [
{
key: 'layKey',
title: '绑定列表组件key',
component: {
name: 'el-input'
}
}
]
}
],
data() {
return {
}
},
created() {
},
computed: {
},
methods: {
}
}
/**
* @Description:
* @author wx
* @date 2023/07/10
*/
<template>
<div class="resultLayout-com">
<svg-icon class="modelName-select-svg" icon-class="qiehuanmoxing" />
<el-select
v-model="bindValue"
class="modelName-select"
:options="options"
@change="handleChange"
>
<el-option
v-for="(option,index) in options"
:key="index"
:label="option.modelDisplayName"
:value="option.modelName"
/>
</el-select>
<dee-as-com
:key="resultKey"
style="height:calc(100% - 40px)"
:lay-config="{
typeName: bindValue,
layKey: layConfig.layKey || 'searchResult'
}"
/>
</div>
</template>
<script>
import config from './config'
export default {
name: 'ResultLayout',
componentName: '搜索结果布局',
components: {},
mixins: [config],
props: {
layConfig: {
type: Object,
default: null
}
},
data() {
return {
resultKey: 0,
bindValue: '',
options: [{ name: 'DxDocument', displayName: '文档' }],
emitMethods: [
{
methods: 'getModelName',
methodsName: '获取访问对象'
}
]
}
},
computed: {},
mounted() {
},
methods: {
getModelName(data) {
if (data.modelNames) {
this.options = data.modelNames || []
this.bindValue = this.options.length ? this.options[0].modelName : ''
}
},
handleChange() {
this.resultKey++
}
}
}
</script>
<style lang='scss'>
.resultLayout-com{
.modelName-select{
.el-input__inner{
font-weight: 600;
border:none;
padding-left: 5px;
}
.el-input__suffix{
display: none;
}
}
.search-record-wrap{
width: 400px;
position: absolute;
top: -38px;
right: 0;
z-index: 109;
background: #fff;
height: 158px;
}
}
</style>
......@@ -23,6 +23,8 @@ import SymbolSetting from './components/SymbolOfTolerance/SymbolSetting'
import StateSelect from './components/StateSelect/index'
import DeeUserProfile from './components/DeeUserProfile'
import DeeFilterAreaFixed from './components/DeeFilterAreaFixed'
import ResultLayout from './components/ResultLayout'
Vue.component(SymbolSetting.name, SymbolSetting) // eslint-disable-line
Vue.component(FlowFileUpload.name, FlowFileUpload) // eslint-disable-line
Vue.component(DeeUploadTable.name, DeeUploadTable) // eslint-disable-line
......@@ -46,3 +48,5 @@ Vue.component(LazyLoadTreeSelect.name, LazyLoadTreeSelect) // eslint-disable-li
Vue.component(SymbolOfTolerance.name, SymbolOfTolerance) // eslint-disable-line
Vue.component(StateSelect.name, StateSelect) // eslint-disable-line
Vue.component(DeeUserProfile.name, DeeUserProfile) // eslint-disable-line
Vue.component(DeeFilterAreaFixed.name, DeeFilterAreaFixed) // eslint-disable-line
Vue.component(ResultLayout.name, ResultLayout) // eslint-disable-line
\ No newline at end of file
const containerComponents = [ // 容器组件
'DeeInjectionRuleTemp'
'DeeInjectionRuleTemp',
'DeeFilterArea',
'DeeFilterAreaFixed',
'ResultLayout'
]
const formListComponents = [ // form组件
'DeeInjectionRuleTemp',
......
......@@ -23,6 +23,9 @@
.sub-components-com .svg-icon{
color: $themeColor;
}
.is-active-text{
color: $themeColor;
}
.orgTree-forPost-com .acticve-node, .result-tree .tree .checked {
background: $themeTintColor;
color: $themeColor;
......@@ -342,6 +345,44 @@
.workflow-theme-row{
background-color: $commonLightBackColor;
}
.view-item:hover{
color: $themeColor!important;
}
.breadcrumb-com{
background-color: $commonLightBackColor;
}
.click-icon{
color: $themeColor;
}
.documentOverview-com{
.toPage-btn{
.el-button{
background-color: $themeColor !important;
}
}
}
.isMain-tool-item-button{
background-color: $themeColor;
&:hover {
background-color: $themeLightColor!important;
}
}
.resultLayout-com{
.modelName-select{
.el-input__inner{
color: $themeColor;
}
}
.modelName-select-svg{
color: $themeColor;
}
}
.list-line-radio{
.el-radio-button__orig-radio:checked + .el-radio-button__inner{
background-color: $themeColor;
border-color: $themeColor;
}
}
// .app-center .app-center-tabs .el-tabs__item.is-active{
// }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment