231 lines
9.2 KiB
Vue
231 lines
9.2 KiB
Vue
<template>
|
|
<el-container
|
|
v-if="isLoadPanel"
|
|
label-position="top"
|
|
style="height: inherit;"
|
|
class="data-table-component"
|
|
>
|
|
<el-main style="padding: 0px !important; overflow: hidden;">
|
|
<el-container style="height: 100%;">
|
|
<el-header :style="tableHeaderStyle">
|
|
<el-collapse
|
|
v-if="isParent"
|
|
v-model="activeName"
|
|
v-shortkey="shorcutKey"
|
|
@shortkey.native="actionAdvancedQuery()"
|
|
>
|
|
<el-collapse-item :title="$t('table.dataTable.advancedQuery')" name="PanelAdvancedQuery">
|
|
<main-panel
|
|
v-if="isLoadedPanel || !isEmptyValue(activeName) && activeName[0] === 'PanelAdvancedQuery'"
|
|
v-show="!isEmptyValue(activeName) && activeName[0] === 'PanelAdvancedQuery'"
|
|
:container-uuid="'table_' + containerUuid"
|
|
:parent-uuid="'table_' + parentUuid"
|
|
:metadata="panelMetadata"
|
|
panel-type="table"
|
|
is-advanced-query
|
|
class="collapse_item_wrap"
|
|
/>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
<div v-if="!isMobile">
|
|
<table-main-menu
|
|
:container-uuid="containerUuid"
|
|
:parent-uuid="parentUuid"
|
|
:panel-type="panelType"
|
|
:is-parent="isParent"
|
|
:is-panel-window="isPanelWindow"
|
|
:process-menu="getMenuTable"
|
|
:is-mobile="isMobile"
|
|
:panel-metadata="panelMetadata"
|
|
/>
|
|
<el-button
|
|
v-if="!isParent && isPanelWindow"
|
|
type="text"
|
|
:icon="(newRecordsQuantity <= 0) ? 'el-icon-circle-plus' : 'el-icon-remove'"
|
|
style="float: right; padding-top: 8px; font-size: larger; padding-left: 6px; color: gray;"
|
|
:disabled="newRecordsQuantity <= 0 ? isDisabledAddNew : false"
|
|
@click="(newRecordsQuantity <= 0) ? addNewRow() : callOffNewRecord()"
|
|
/>
|
|
<icon-element icon="el-icon-news">
|
|
<fixed-columns
|
|
:container-uuid="containerUuid"
|
|
:panel-type="panelType"
|
|
class="header-search-input"
|
|
/>
|
|
</icon-element>
|
|
<filter-columns
|
|
v-if="isShowOptionalColumns"
|
|
:container-uuid="containerUuid"
|
|
:panel-type="panelType"
|
|
class="field-optional"
|
|
/>
|
|
<div :class="{ show: showTableSearch }" class="local-search-container">
|
|
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
|
|
<el-input
|
|
ref="headerSearchInput"
|
|
v-model="searchTable"
|
|
size="mini"
|
|
:placeholder="$t('table.dataTable.search')"
|
|
class="header-search-input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- <div v-else>
|
|
<div v-if="!isParent">
|
|
<div :class="{ show: showTableSearch }" class="local-search-container">
|
|
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
|
|
<el-input
|
|
ref="headerSearchInput"
|
|
v-model="searchTable"
|
|
size="mini"
|
|
:placeholder="$t('table.dataTable.search')"
|
|
class="header-search-input"
|
|
clearable
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-else class="panel-expand">
|
|
<el-button
|
|
v-show="isPanelWindow && getDataSelection.length"
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
style="color: black; font-size: 17px; font-weight: 605 !important;"
|
|
@click="deleteSelection()"
|
|
/>
|
|
</div>
|
|
</div> -->
|
|
</el-header>
|
|
|
|
<el-main style="padding: 0px !important; overflow: hidden;">
|
|
<div v-if="isEmptyValue(activeName) && isParent" :class="{ show: showTableSearch }" class="local-search-container">
|
|
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
|
|
<el-input
|
|
ref="headerSearchInput"
|
|
v-model="searchTable"
|
|
size="mini"
|
|
:placeholder="$t('table.dataTable.search')"
|
|
class="header-search-input"
|
|
clearable
|
|
/>
|
|
</div>
|
|
<table-context-menu
|
|
v-show="isShowedContextMenu"
|
|
:style="{ left: leftContextualMenu + 'px', top: topContextualMenu + 'px' }"
|
|
class="contextual-menu"
|
|
:container-uuid="containerUuid"
|
|
:parent-uuid="parentUuid"
|
|
:panel-type="panelType"
|
|
:current-row="currentRowMenu"
|
|
:is-panel-window="isPanelWindow"
|
|
:process-menu="getMenuTable"
|
|
:is-mobile="isMobile"
|
|
:panel-metadata="panelMetadata"
|
|
/>
|
|
|
|
<el-table
|
|
ref="multipleTable"
|
|
v-loading="!isCreateNewRoute && isLoaded"
|
|
:height="getHeigthTable"
|
|
style="width: 100%"
|
|
border
|
|
:row-key="panelMetadata.keyColumn"
|
|
reserve-selection
|
|
highlight-current-row
|
|
:row-style="rowStyle"
|
|
:data="showTableSearch ? filterResult() : recordsData"
|
|
:element-loading-text="$t('notifications.loading')"
|
|
element-loading-background="rgba(255, 255, 255, 0.8)"
|
|
cell-class-name="datatable-max-cell-height"
|
|
:show-summary="isShowedTotals"
|
|
:row-class-name="tableRowClassName"
|
|
:summary-method="getSummaries"
|
|
@row-click="handleRowClick"
|
|
@row-dblclick="handleRowDblClick"
|
|
@select="handleSelection"
|
|
@select-all="handleSelectionAll"
|
|
@row-contextmenu="rowMenu"
|
|
@contextmenu.prevent.native="block"
|
|
>
|
|
<el-table-column
|
|
v-if="isTableSelection"
|
|
type="selection"
|
|
:prop="panelMetadata.keyColumn"
|
|
fixed
|
|
min-width="50"
|
|
/>
|
|
<template v-for="(fieldAttributes, key) in fieldsList">
|
|
<el-table-column
|
|
v-if="isDisplayed(fieldAttributes)"
|
|
:key="key"
|
|
:label="headerLabel(fieldAttributes)"
|
|
:column-key="fieldAttributes.columnName"
|
|
:prop="fieldAttributes.columnName"
|
|
sortable
|
|
min-width="200"
|
|
:class-name="cellClass(fieldAttributes)"
|
|
:fixed="fieldAttributes.isFixedTableColumn"
|
|
>
|
|
<template slot-scope="scope">
|
|
<template v-if="rowCanBeEdited(scope.row, fieldAttributes)">
|
|
<field-definition
|
|
:is-data-table="true"
|
|
:is-show-label="false"
|
|
:in-table="true"
|
|
:metadata-field="{
|
|
...fieldAttributes,
|
|
displayColumn: scope.row[fieldAttributes.displayColumnName],
|
|
tableIndex: scope.$index,
|
|
rowKey: scope.row[panelMetadata.keyColumn],
|
|
keyColumn: panelMetadata.keyColumn,
|
|
recordUuid: scope.row.UUID
|
|
}"
|
|
:record-data-fields="scope.row[fieldAttributes.columnName]"
|
|
size="mini"
|
|
@keyup.enter.native="confirmEdit(scope.row)"
|
|
/>
|
|
</template>
|
|
<template
|
|
v-else
|
|
>
|
|
<el-tag
|
|
v-if="['DocStatus', 'O_DocStatus'].includes(fieldAttributes.columnName)"
|
|
:style="getFieldDefinition(fieldAttributes.fieldDefinition, scope.row)"
|
|
:type="tagStatus(scope.row[fieldAttributes.columnName])"
|
|
disable-transitions
|
|
>
|
|
{{ displayedValue(scope.row, fieldAttributes) }}
|
|
</el-tag>
|
|
<span v-else :style="getFieldDefinition(fieldAttributes.fieldDefinition, scope.row)">
|
|
{{ displayedValue(scope.row, fieldAttributes) }}
|
|
</span>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</el-table>
|
|
|
|
<custom-pagination
|
|
:total="totalRecords"
|
|
:current-page="pageNumber"
|
|
:selection="getDataSelection.length"
|
|
:handle-change-page="handleChangePage"
|
|
/>
|
|
</el-main>
|
|
</el-container>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script src="./dataTables-Script.js" >
|
|
// if you use separate component files like this, the script.js should not
|
|
// be named 'index.js' as you would have to specify the '/index.vue' suffix
|
|
// on your import for every import where this component is used, otherwise
|
|
// you might have problems with the template compiler similar to:
|
|
// [Vue warn]: Failed to mount component: template or render function not defined.
|
|
</script>
|
|
|
|
<style lang="scss" src="./dataTables-StyleGlobal.scss">
|
|
</style>
|
|
<style lang="scss" scoped src="./dataTables-StyleScoped.scss">
|
|
</style>
|