mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-13 15:15:53 +08:00
930 lines
32 KiB
Vue
930 lines
32 KiB
Vue
<template>
|
|
<div
|
|
v-if="isLoaded"
|
|
key="window-loaded"
|
|
>
|
|
<el-container style="height: 86vh;">
|
|
<Split>
|
|
<SplitArea :size="!show ? 100 : 50" :min-size="100">
|
|
<el-aside width="100%">
|
|
<split-pane :min-percent="10" :default-percent="defaultPorcentSplitPane" split="vertical">
|
|
<template>
|
|
<!-- this slot is 'paneL' (with 'L' in uppercase) do not change -->
|
|
<div slot="paneL" class="left-container">
|
|
<el-aside v-show="isShowedRecordNavigation" width="100%">
|
|
<div class="small-4 columns">
|
|
<div class="w">
|
|
<div class="open-left" />
|
|
<div class="open-datatable-aside">
|
|
<el-button
|
|
v-show="!isPanel"
|
|
:icon="iconIsShowedRecordNavigation"
|
|
circle
|
|
style="margin-left: 10px;"
|
|
class="el-button-window"
|
|
@click="handleChangeShowedRecordNavigation()"
|
|
/>
|
|
<el-button
|
|
v-show="!isPanel"
|
|
:icon="iconIsShowedAside"
|
|
circle
|
|
class="el-button-window"
|
|
@click="handleChangeShowedPanel()"
|
|
/>
|
|
</div>
|
|
<data-table
|
|
:parent-uuid="windowUuid"
|
|
:container-uuid="windowMetadata.currentTab.uuid"
|
|
:table-name="windowMetadata.currentTab.tableName"
|
|
:is-showed-panel-record="true"
|
|
:is-parent="true"
|
|
/>
|
|
<div class="close-datatable">
|
|
<el-button
|
|
v-show="isPanel"
|
|
icon="el-icon-caret-left"
|
|
circle
|
|
class="el-button-window"
|
|
@click="handleChangeShowedPanel()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<i
|
|
v-if="isMobile"
|
|
class="el-icon-close"
|
|
style="position: fixed;padding-top: 15px; color: #000000;font-size: 121%;font-weight: 615!important;padding-left: 9px;"
|
|
@click="handleChangeShowedRecordNavigation()"
|
|
/>
|
|
</el-aside>
|
|
</div>
|
|
</template>
|
|
<template slot="paneR">
|
|
<el-container style="height: 86vh;">
|
|
<Split v-shortkey="['f8']" direction="vertical" @onDrag="onDrag" @shortkey.native="handleChangeShowedRecordNavigation">
|
|
<SplitArea :size="sizeAreaStyle" :style="splitAreaStyle">
|
|
<el-header style="height: 39px;">
|
|
<context-menu
|
|
v-show="!isShowedRecordPanel"
|
|
:menu-parent-uuid="$route.meta.parentUuid"
|
|
:parent-uuid="windowUuid"
|
|
:container-uuid="windowMetadata.currentTabUuid"
|
|
:panel-type="panelType"
|
|
:is-insert-record="getterIsInsertRecord"
|
|
/>
|
|
</el-header>
|
|
<el-main :style="styleMainIsShowedTabChildren">
|
|
<tab-parent
|
|
:window-uuid="windowUuid"
|
|
:tabs-list="windowMetadata.tabsListParent"
|
|
class="tab-window"
|
|
/>
|
|
<div style="right: 0%;top: 40%;position: absolute;">
|
|
<el-button v-show="!show" type="info" icon="el-icon-info" circle style="float: right;" class="el-button-window" @click="conteInfo" />
|
|
</div>
|
|
<div class="small-4 columns">
|
|
<div class="wrapper">
|
|
<div
|
|
v-show="windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length"
|
|
class="open-detail"
|
|
/>
|
|
<el-button
|
|
v-if="windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length &&
|
|
(isMobile && !isShowedRecordNavigation || !isMobile)"
|
|
v-show="!isShowedTabChildren"
|
|
icon="el-icon-caret-top"
|
|
:class="classIsMobile"
|
|
circle
|
|
type="primary"
|
|
@click="handleChangeShowedTabChildren()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<modal-dialog
|
|
:parent-uuid="windowUuid"
|
|
:container-uuid="windowMetadata.currentTabUuid"
|
|
/>
|
|
<div class="small-4 columns">
|
|
<div class="w">
|
|
<div class="open-left" />
|
|
<el-button
|
|
v-show="!isShowedRecordNavigation"
|
|
:icon="iconIsShowedRecordNavigation"
|
|
class="open-navegation"
|
|
circle
|
|
type="primary"
|
|
@click="handleChangeShowedRecordNavigation()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
</SplitArea>
|
|
<SplitArea v-show="isShowedTabChildren" :size="50">
|
|
<el-header
|
|
v-if="isShowedTabChildren && windowMetadata.tabsListChildren && windowMetadata.tabsListChildren.length"
|
|
style="height: auto; padding-right: 35px !important;padding-bottom: 33px;"
|
|
>
|
|
<div class="w-33">
|
|
<div class="center">
|
|
<el-button
|
|
icon="el-icon-caret-bottom"
|
|
circle
|
|
class="el-button-window"
|
|
@click="handleChangeShowedTabChildren()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<tab-children
|
|
:window-uuid="windowUuid"
|
|
:tabs-list="windowMetadata.tabsListChildren"
|
|
:first-tab-uuid="windowMetadata.firstTabUuid"
|
|
:style="{ 'height': getHeightPanelBottom + 'vh' }"
|
|
/>
|
|
</el-header>
|
|
</SplitArea>
|
|
</Split>
|
|
</el-container>
|
|
</template>
|
|
</split-pane>
|
|
</el-aside>
|
|
</SplitArea>
|
|
<SplitArea :size="show ? 50 : 0">
|
|
<el-main>
|
|
<div style="top: 40%;position: absolute;">
|
|
<el-button v-show="show" type="info" icon="el-icon-info" circle style="float: right;" class="el-button-window" @click="conteInfo" />
|
|
</div>
|
|
<div id="example-1">
|
|
<transition name="slide-fade">
|
|
<p v-if="show">
|
|
<el-card class="box-card">
|
|
<el-tabs v-model="activeInfo" @tab-click="handleClick">
|
|
<el-tab-pane
|
|
name="listChatEntries"
|
|
>
|
|
<span slot="label"><i class="el-icon-s-comment" /> {{ $t('window.containerInfo.notes') }} </span>
|
|
<div
|
|
v-if="getIsChat"
|
|
>
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>{{ $t('window.containerInfo.notes') }}</span>
|
|
</div>
|
|
<el-scrollbar wrap-class="scroll-window-log-chat">
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(chats, key) in gettersLischat"
|
|
:key="key"
|
|
:timestamp="translateDate(chats.logDate)"
|
|
placement="top"
|
|
>
|
|
<el-card shadow="hover">
|
|
<div>
|
|
<span>{{ chats.userName }}</span>
|
|
<span>{{ chats.characterData }}</span>
|
|
</div>
|
|
</el-card>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-scrollbar>
|
|
</el-card>
|
|
</div>
|
|
<div>
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
{{ $t('window.containerInfo.logWorkflow.addNote') }}
|
|
</div>
|
|
<el-input
|
|
v-model="chatNote"
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="Please input"
|
|
/>
|
|
<el-button icon="el-icon-circle-check" type="text" style="float: right" @click="sendComment(chatNote)" />
|
|
</el-card>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane
|
|
name="listRecordLogs"
|
|
>
|
|
<span slot="label"><svg-icon icon-class="tree-table" /> {{ $t('window.containerInfo.changeLog') }} </span>
|
|
<div
|
|
v-if="getIsChangeLog"
|
|
>
|
|
<el-scrollbar wrap-class="scroll-window-log-change">
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(listLogs, key) in gettersListRecordLogs"
|
|
:key="key"
|
|
:timestamp="translateDate(listLogs.logDate)"
|
|
placement="top"
|
|
color="#008fd3"
|
|
>
|
|
<el-card shadow="hover" class="clearfix">
|
|
<div>
|
|
{{ listLogs.userName }}
|
|
<el-link type="primary" style="float: right;" @click="showkey(key)"> {{ $t('window.containerInfo.changeDetail') }} </el-link>
|
|
</div>
|
|
<br>
|
|
<el-collapse-transition>
|
|
<div v-show="(currentKey === key)">
|
|
<span v-for="(list, index) in listLogs.changeLogs" :key="index">
|
|
<p v-if="list.columnName === 'DocStatus'"><b> {{ list.displayColumnName }} :</b> <strike> <el-tag :type="tagStatus(list.oldValue)"> {{ list.oldDisplayValue }} </el-tag> </strike> <el-tag :type="tagStatus(list.newValue)"> {{ list.newDisplayValue }} </el-tag> </p>
|
|
<p v-else><b> {{ list.displayColumnName }} :</b> <strike> <el-link type="danger"> {{ list.oldDisplayValue }} </el-link> </strike> <el-link type="success"> {{ list.newDisplayValue }} </el-link> </p>
|
|
</span>
|
|
</div>
|
|
</el-collapse-transition>
|
|
</el-card>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-scrollbar>
|
|
</div>
|
|
<div
|
|
v-else
|
|
v-loading="true"
|
|
:element-loading-text="$t('notifications.loading')"
|
|
element-loading-spinner="el-icon-loading"
|
|
element-loading-background="rgba(255, 255, 255, 0.8)"
|
|
class="loading-window"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane
|
|
v-if="getIsWorkflowLog"
|
|
name="listWorkflowLogs"
|
|
>
|
|
<span slot="label"><i class="el-icon-s-help" /> {{ $t('window.containerInfo.workflowLog') }} </span>
|
|
<div
|
|
v-if="getIsWorkflowLog"
|
|
>
|
|
<el-card
|
|
class="box-card"
|
|
>
|
|
<el-scrollbar wrap-class="scroll-window-log-workflow">
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(workflow,index) in gettersListWorkflow"
|
|
:key="index"
|
|
:timestamp="translateDate(workflow.logDate)"
|
|
placement="top"
|
|
>
|
|
<el-card shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span> {{ workflow.workflowName }} </span>
|
|
</div>
|
|
<div>
|
|
<el-steps
|
|
:active="workflow.workflowEventsList.length"
|
|
align-center
|
|
finish-status="success"
|
|
>
|
|
<el-step
|
|
v-for="(nodeList, key) in workflow.workflowEventsList"
|
|
:key="key"
|
|
>
|
|
<span slot="title">
|
|
<el-popover
|
|
placement="top-start"
|
|
width="400"
|
|
trigger="hover"
|
|
>
|
|
<p><b> {{ $t('login.userName') }}:</b> {{ nodeList.userName }} </p>
|
|
<p v-if="!isEmptyValue(nodeList.textMessage)"><b> {{ $t('window.containerInfo.logWorkflow.message') }}:</b> {{ nodeList.textMessage }} </p>
|
|
<p><b> {{ $t('window.containerInfo.logWorkflow.responsible') }}:</b> {{ nodeList.responsibleName }} </p>
|
|
<p><b> {{ $t('window.containerInfo.logWorkflow.workflowName') }}:</b> {{ nodeList.workflowStateName }} </p>
|
|
<p><b> {{ $t('window.containerInfo.logWorkflow.timeElapsed') }}:</b> {{ nodeList.timeElapsed }} </p>
|
|
<el-button slot="reference" type="text"> {{ nodeList.nodeName }} </el-button>
|
|
</el-popover>
|
|
</span>
|
|
</el-step>
|
|
</el-steps>
|
|
</div>
|
|
</el-card>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-scrollbar>
|
|
</el-card>
|
|
</div>
|
|
<div
|
|
v-else
|
|
v-loading="true"
|
|
:element-loading-text="$t('notifications.loading')"
|
|
element-loading-spinner="el-icon-loading"
|
|
element-loading-background="rgba(255, 255, 255, 0.8)"
|
|
class="loading-window"
|
|
/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
</p>
|
|
</transition>
|
|
</div>
|
|
</el-main>
|
|
</SplitArea>
|
|
</Split>
|
|
</el-container>
|
|
</div>
|
|
<div
|
|
v-else
|
|
key="window-loading"
|
|
v-loading="!isLoaded"
|
|
:element-loading-text="$t('notifications.loading')"
|
|
element-loading-spinner="el-icon-loading"
|
|
element-loading-background="rgba(255, 255, 255, 0.8)"
|
|
class="loading-window"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import TabParent from '@/components/ADempiere/Tab'
|
|
import TabChildren from '@/components/ADempiere/Tab/tabChildren'
|
|
// When supporting the processes, smart browser and reports,
|
|
// the submenu and sticky must be placed in the layout
|
|
import ContextMenu from '@/components/ADempiere/ContextMenu'
|
|
import ModalDialog from '@/components/ADempiere/Dialog'
|
|
import DataTable from '@/components/ADempiere/DataTable'
|
|
import splitPane from 'vue-splitpane'
|
|
|
|
export default {
|
|
name: 'WindowView',
|
|
components: {
|
|
TabParent,
|
|
TabChildren,
|
|
ContextMenu,
|
|
DataTable,
|
|
splitPane,
|
|
ModalDialog
|
|
},
|
|
data() {
|
|
return {
|
|
windowMetadata: {},
|
|
windowUuid: this.$route.meta.uuid,
|
|
panelType: 'window',
|
|
isLoaded: false,
|
|
isPanel: false,
|
|
activeInfo: 'listChatEntries',
|
|
show: false,
|
|
chatNote: '',
|
|
typeAction: 0,
|
|
isLoadingFromServer: false,
|
|
listRecordNavigation: 0,
|
|
currentKey: 100,
|
|
isShowedTabChildren: true,
|
|
isShowedRecordPanel: false,
|
|
isShowedRecordNavigation: this.$route.query.action === 'advancedQuery'
|
|
}
|
|
},
|
|
beforeRouteUpdate(to, from, next) {
|
|
// this.activeName = this.$t('window.containerInfo.changeLog')
|
|
this.$store.dispatch('setWindowOldRoute', {
|
|
path: from.path,
|
|
fullPath: from.fullPath,
|
|
params: {
|
|
...from.params
|
|
},
|
|
query: {
|
|
...from.query
|
|
}
|
|
})
|
|
next()
|
|
},
|
|
computed: {
|
|
defaultPorcentSplitPane() {
|
|
if (this.isShowedRecordPanel) {
|
|
if (this.isShowedRecordNavigation) {
|
|
return 100
|
|
}
|
|
return 50
|
|
}
|
|
if (this.isShowedRecordNavigation) {
|
|
if (this.isMobile) {
|
|
return 100
|
|
}
|
|
return 50
|
|
}
|
|
return -1
|
|
},
|
|
isMobile() {
|
|
return this.$store.state.app.device === 'mobile'
|
|
},
|
|
// convert ternary operator into computed property
|
|
classIsMobile() {
|
|
if (this.isMobile) {
|
|
return 'open-table-detail-mobile'
|
|
} else {
|
|
return 'open-table-detail'
|
|
}
|
|
},
|
|
getterIsShowedRecordNavigation() {
|
|
return this.$store.getters.getIsShowedRecordNavigation(this.windowUuid)
|
|
},
|
|
iconIsShowedRecordNavigation() {
|
|
if (this.isShowedRecordNavigation) {
|
|
return 'el-icon-caret-left'
|
|
} else {
|
|
return 'el-icon-caret-right'
|
|
}
|
|
},
|
|
iconIsShowedAside() {
|
|
if (this.isShowedRecordPanel) {
|
|
return 'el-icon-caret-left'
|
|
} else {
|
|
return 'el-icon-caret-right'
|
|
}
|
|
},
|
|
styleMainIsShowedTabChildren() {
|
|
if (this.isShowedTabChildren) {
|
|
return { height: 'initial', overflow: 'auto' }
|
|
} else {
|
|
return { height: 'initial', overflow: 'hidden' }
|
|
}
|
|
},
|
|
splitAreaStyle() {
|
|
if (this.isShowedTabChildren) {
|
|
return { overflow: 'auto' }
|
|
} else {
|
|
return { overflow: 'hidden' }
|
|
}
|
|
},
|
|
sizeAreaStyle() {
|
|
if (this.isShowedTabChildren) {
|
|
return 50
|
|
} else {
|
|
return 100
|
|
}
|
|
},
|
|
//
|
|
getterWindow() {
|
|
return this.$store.getters.getWindow(this.windowUuid)
|
|
},
|
|
getHeightPanelTop() {
|
|
return this.$store.getters.getSplitHeightTop
|
|
},
|
|
getHeightPanelBottom() {
|
|
return this.$store.getters.getSplitHeight - 11
|
|
},
|
|
getterRecordList() {
|
|
return this.$store.getters.getDataRecordsList(this.windowMetadata.currentTabUuid).length
|
|
},
|
|
getterIsInsertRecord() {
|
|
const tab = this.$store.getters.getCurrentTab(this.windowUuid)
|
|
if (tab) {
|
|
return tab.isInsertRecord
|
|
}
|
|
return false
|
|
},
|
|
gettersListRecordLogs() {
|
|
const changeLog = this.$store.getters.getRecordLogs.recorLogs
|
|
if (this.isEmptyValue(changeLog)) {
|
|
return changeLog
|
|
}
|
|
changeLog.sort((a, b) => {
|
|
var c = new Date(a.logDate)
|
|
var d = new Date(b.logDate)
|
|
return d - c
|
|
})
|
|
return changeLog
|
|
},
|
|
getIsChangeLog() {
|
|
if (this.isEmptyValue(this.gettersListRecordLogs)) {
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
getIsWorkflowLog() {
|
|
if (this.isEmptyValue(this.gettersListWorkflow)) {
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
getIsChat() {
|
|
return this.$store.getters.getIsNote
|
|
},
|
|
getTypeLogs() {
|
|
const groupLog = this.gettersListRecordLogs.reduce((groupLog, item) => {
|
|
if (!groupLog.includes(item.logId)) {
|
|
groupLog.push(item.logId)
|
|
}
|
|
return groupLog
|
|
}, [])
|
|
.map(log => {
|
|
// agrup for logId
|
|
return {
|
|
logs: this.gettersListRecordLogs.filter(change => change.logId === log),
|
|
logId: log
|
|
}
|
|
})
|
|
return groupLog
|
|
},
|
|
gettersLischat() {
|
|
return this.$store.getters.getChatEntries.chatEntriesList
|
|
},
|
|
// gettersLisRecordChats() {
|
|
// return this.$store.getters.getListRecordChats[0].description
|
|
// },
|
|
isNote() {
|
|
return this.$store.getters.getIsNote
|
|
},
|
|
gettersListWorkflow() {
|
|
return this.$store.getters.getWorkflow
|
|
},
|
|
gettersrecorCount() {
|
|
return 1
|
|
},
|
|
language() {
|
|
return this.$store.getters.language
|
|
},
|
|
getterShowContainerInfo() {
|
|
return this.$store.getters.getShowContainerInfo
|
|
}
|
|
},
|
|
watch: {
|
|
$route(value) {
|
|
if (this.show) {
|
|
if (value.query.action === 'create-new') {
|
|
this.$store.dispatch('isNote', false)
|
|
}
|
|
this.refres(this.activeInfo)
|
|
}
|
|
},
|
|
'this.$route.params'(newValue, oldValue) {
|
|
if (!this.isEmptyValue(newValue)) {
|
|
this.getIsRecordLocked()
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getWindow()
|
|
},
|
|
methods: {
|
|
sendComment(comment) {
|
|
this.$store.dispatch('createChatEntry', {
|
|
tableName: this.$route.params.tableName,
|
|
recordId: this.$route.params.recordId,
|
|
comment: comment
|
|
})
|
|
this.chatNote = ''
|
|
// this.$store.dispatch('listChatEntries', {
|
|
// tableName: this.$route.params.tableName,
|
|
// recordId: this.$route.params.recordId
|
|
// })
|
|
},
|
|
showkey(key, index) {
|
|
if (key === this.currentKey && index === this.typeAction) {
|
|
this.currentKey = 1000
|
|
} else {
|
|
this.currentKey = key
|
|
this.typeAction = index
|
|
}
|
|
},
|
|
changeField(log) {
|
|
this.$store.dispatch('notifyPanelChange', {
|
|
newValues: log.oldDisplayValue,
|
|
isSendToServer: false,
|
|
isSendCallout: false,
|
|
isPrivateAccess: false
|
|
})
|
|
},
|
|
translateDate(value) {
|
|
return this.$d(new Date(value), 'long', this.language)
|
|
},
|
|
conteInfo() {
|
|
this.show = !this.show
|
|
this.$store.dispatch('listWorkflowLogs', {
|
|
tableName: this.$route.params.tableName,
|
|
recordId: this.$route.params.recordId
|
|
})
|
|
this.$store.dispatch('listChatEntries', {
|
|
tableName: this.$route.params.tableName,
|
|
recordId: this.$route.params.recordId
|
|
})
|
|
this.$store.dispatch('showContainerInfo', !this.getterShowContainerInfo)
|
|
},
|
|
handleClick(tab, event) {
|
|
this.$store.dispatch(tab.name, {
|
|
tableName: this.$route.params.tableName,
|
|
recordId: this.$route.params.recordId
|
|
})
|
|
},
|
|
refres(tabInfo) {
|
|
this.$store.dispatch(tabInfo, {
|
|
tableName: this.$route.params.tableName,
|
|
recordId: this.$route.params.recordId
|
|
})
|
|
},
|
|
// callback new size
|
|
onDrag(size) {
|
|
var bottomPanel = size[1]
|
|
var topPanel = size[0]
|
|
this.$store.dispatch('setSplitHeightTop', {
|
|
splitHeightTop: topPanel
|
|
})
|
|
this.$store.dispatch('setSplitHeight', {
|
|
splitHeight: bottomPanel
|
|
})
|
|
},
|
|
// get window from vuex store or server
|
|
getWindow() {
|
|
if (this.getterWindow) {
|
|
this.generateWindow()
|
|
this.isLoadingFromServer = true
|
|
} else {
|
|
this.$store.dispatch('getWindowFromServer', {
|
|
windowUuid: this.windowUuid,
|
|
routeToDelete: this.$route
|
|
})
|
|
.then(response => {
|
|
this.generateWindow()
|
|
this.isLoadingFromServer = true
|
|
})
|
|
.finally(() => {
|
|
this.isLoaded = true
|
|
})
|
|
}
|
|
},
|
|
generateWindow() {
|
|
this.windowMetadata = this.getterWindow
|
|
if (this.getterIsShowedRecordNavigation === undefined) {
|
|
this.listRecordNavigation = this.getterRecordList
|
|
if (this.windowMetadata.windowType === 'Q' || this.windowMetadata.windowType === 'M' && this.listRecordNavigation >= 10) {
|
|
this.isShowedRecordNavigation = true
|
|
} else if (this.windowMetadata.windowType === 'T') {
|
|
this.isShowedRecordNavigation = false
|
|
}
|
|
} else {
|
|
this.isShowedRecordNavigation = this.getterIsShowedRecordNavigation
|
|
}
|
|
|
|
this.isShowedTabChildren = this.windowMetadata.isShowedDetail
|
|
this.isLoaded = true
|
|
this.changeShowedRecordNavigation()
|
|
},
|
|
handleChangeShowedRecordNavigation(value) {
|
|
this.isShowedRecordNavigation = !this.isShowedRecordNavigation
|
|
this.changeShowedRecordNavigation()
|
|
},
|
|
handleChangeShowedPanel(value) {
|
|
this.isPanel = !this.isPanel
|
|
this.isShowedRecordPanel = !this.isShowedRecordPanel
|
|
},
|
|
changeShowedRecordNavigation() {
|
|
this.$store.dispatch('changeShowedRecordWindow', {
|
|
parentUuid: this.windowUuid,
|
|
containerUuid: this.windowMetadata.currentTab.uuid, // act as parentUuid
|
|
isShowedRecordNavigation: this.isShowedRecordNavigation
|
|
})
|
|
},
|
|
handleChangeShowedTabChildren() {
|
|
this.isShowedTabChildren = !this.isShowedTabChildren
|
|
this.$store.dispatch('changeShowedDetail', {
|
|
panelType: this.panelType,
|
|
containerUuid: this.windowUuid, // act as parentUuid
|
|
isShowedDetail: this.isShowedTabChildren
|
|
})
|
|
},
|
|
getIsRecordLocked() {
|
|
if (this.$store.getters.getRecordPrivateAccess(this.$route.params.tableName, this.$route.params.recordId)) {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scroll {
|
|
max-height: 60vh;
|
|
}
|
|
/* Enter and leave animations can use different */
|
|
/* durations and timing functions. */
|
|
.slide-fade-enter-active {
|
|
transition: all .2s ease;
|
|
}
|
|
.slide-fade-leave-active {
|
|
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
|
}
|
|
.slide-fade-enter, .slide-fade-leave-to
|
|
/* .slide-fade-leave-active below version 2.1.8 */ {
|
|
transform: translateX(10px);
|
|
opacity: 0;
|
|
}
|
|
.el-tabs__content {
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding-top: 0px !important;
|
|
padding-right: 15px !important;
|
|
padding-bottom: 0px !important;
|
|
padding-left: 15px !important;
|
|
}
|
|
.el-header {
|
|
background-color: #fff;
|
|
color: #333;
|
|
line-height: 21px;
|
|
}
|
|
|
|
.el-aside {
|
|
height: 100%;
|
|
color: #333;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
}
|
|
aside {
|
|
background: #fff;
|
|
padding: 0px;
|
|
margin-bottom: 0px;
|
|
border-radius: 2px;
|
|
display: block;
|
|
line-height: 32px;
|
|
font-size: 16px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
color: #2c3e50;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.el-main {
|
|
display: block;
|
|
-webkit-box-flex: 1;
|
|
flex: 1;
|
|
flex-basis: auto;
|
|
overflow: hidden;
|
|
height: 90vh;
|
|
box-sizing: border-box;
|
|
padding-top: 0px !important;
|
|
padding-right: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
padding-left: 0px !important;
|
|
}
|
|
.center{
|
|
text-align: center;
|
|
}
|
|
.close{
|
|
text-align: right;
|
|
}
|
|
.w-33 {
|
|
width: 100%;
|
|
background-color: transparent;
|
|
}
|
|
.open-table-detail-mobile {
|
|
position: absolute;
|
|
right: 50%;
|
|
bottom: 4%;
|
|
}
|
|
.open-table-detail {
|
|
position: absolute;
|
|
right: 50%;
|
|
bottom: 4%;
|
|
display: none;
|
|
}
|
|
.open-navegation {
|
|
position: fixed;
|
|
top: 50%;
|
|
display: none;
|
|
z-index: 5;
|
|
}
|
|
.open-datatable-aside {
|
|
position: absolute;
|
|
top: 41%;
|
|
display: none;
|
|
z-index: 5;
|
|
right: 1%!important;
|
|
}
|
|
.close-datatable {
|
|
position: absolute;
|
|
top: 45%;
|
|
display: none;
|
|
z-index: 5;
|
|
right: 0%!important;
|
|
}
|
|
.button {
|
|
display: none;
|
|
}
|
|
.wrapper:hover .open-table-detail {
|
|
display: inline-block;
|
|
}
|
|
.w:hover .open-navegation {
|
|
display: inline-block;
|
|
}
|
|
.w:hover .open-datatable-aside {
|
|
display: grid;
|
|
}
|
|
.w:hover .close-datatable {
|
|
display: inline-block;
|
|
}
|
|
.open-detail {
|
|
width: 100%;
|
|
height: 20px;
|
|
position: absolute;
|
|
bottom: 5%;
|
|
}
|
|
.open-left {
|
|
width: 5%;
|
|
height: 97%;
|
|
position: absolute;
|
|
top: 2%;
|
|
left: 1%;
|
|
}
|
|
.el-button-window {
|
|
cursor: pointer;
|
|
background: #FFFFFF;
|
|
border: 1px solid #DCDFE6;
|
|
border-color: #DCDFE6;
|
|
color: white;
|
|
background: #008fd3;
|
|
}
|
|
.vertical-panes {
|
|
width: 100%;
|
|
height: 85vh;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.vertical-panes > .pane {
|
|
text-align: left;
|
|
padding: 15px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
}
|
|
.vertical-panes > .pane ~ .pane {
|
|
border-left: 1px solid #ccc;
|
|
}
|
|
.loading-window {
|
|
padding: 100px 100px;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<style>
|
|
.scroll-window-log-change {
|
|
max-height: 74vh !important;
|
|
}
|
|
.scroll-window-log-workflow {
|
|
max-height: 68vh !important;
|
|
}
|
|
.scroll-window-log-chat {
|
|
max-height: 45vh !important;
|
|
}
|
|
.el-card__header {
|
|
background: rgba(245, 247, 250, 0.75);
|
|
padding: 18px 20px;
|
|
border-bottom: 1px solid #f5f7fa;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.split {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
height: 102%;
|
|
width: 100%;
|
|
}
|
|
.components-container {
|
|
position: relative;
|
|
height: 100vh;
|
|
}
|
|
|
|
.left-container {
|
|
background-color: #ffffff;
|
|
height: 100%;
|
|
}
|
|
|
|
.right-container {
|
|
background-color: #ffffff;
|
|
height: 200px;
|
|
}
|
|
|
|
.top-container {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bottom-container {
|
|
width: 100%;
|
|
background-color: #95E1D3;
|
|
height: 100%;
|
|
}
|
|
.splitter-pane-resizer.vertical {
|
|
width: 9px !important;
|
|
height: 100%;
|
|
margin-left: -10px;
|
|
border-left: 5px solid hsla(0,0%,100%,0);
|
|
border-right: 5px solid hsla(0,0%,100%,0);
|
|
cursor: col-resize;
|
|
}
|
|
.splitter-pane.vertical.splitter-paneR {
|
|
position: absolute;
|
|
right: 0;
|
|
height: 100%;
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|
|
<style>
|
|
.splitter-pane-resizer.vertical {
|
|
width: 11px;
|
|
height: 100%;
|
|
background: gray!important;
|
|
margin-left: -5px;
|
|
border-left: 5px solid hsla(0,0%,100%,0);
|
|
border-right: 5px solid hsla(0,0%,100%,0);
|
|
cursor: col-resize;
|
|
}
|
|
</style>
|