Last active
October 25, 2019 16:13
-
-
Save EdwinBetanc0urt/f9986fa995a5a465c34f5dcc08b54df9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<el-table | |
v-loading="isLoaded" | |
:row-key="getterPanel.keyColumn" | |
:data="showTableSearch ? filterResult() : getterDataRecords" | |
:element-loading-text="$t('notifications.loading')" | |
element-loading-background="rgba(255, 255, 255, 0.8)" | |
element-loading-spinner="el-icon-loading" | |
cell-class-name="datatable-max-cell-height" | |
@row-click="handleRowClick" | |
@row-dblclick="handleRowDblClick" | |
@select="handleSelection" | |
@select-all="handleSelectionAll" | |
> | |
<el-table-column | |
v-if="isTableSelection" | |
type="selection" | |
:prop="getterPanel.keyColumn" | |
fixed | |
min-width="50" | |
/> | |
<template v-for="(fieldAttributes, key) in fieldList"> | |
<el-table-column | |
v-if="isDisplayed(fieldAttributes)" | |
:key="key" | |
:label="headerLabel(fieldAttributes)" | |
:column-key="fieldAttributes.columnName" | |
:prop="fieldAttributes.columnName" | |
:fixed="fieldAttributes.isFixedTableColumn" | |
> | |
<template slot-scope="scope"> | |
<template v-if="((!isParent) && scope.row.isEdit && !isReadOnlyCell(scope.row, fieldAttributes) && !isReadOnlyRow(scope.row, fieldAttributes))"> | |
<field-definition | |
:is-data-table="true" | |
:is-show-label="false" | |
:metadata-field="{ | |
...fieldAttributes, | |
parentUuid: parentUuid, | |
displayColumn: scope.row['DisplayColumn_' + fieldAttributes.columnName], | |
keyColumn: getterPanel.keyColumn, | |
recordUuid: scope.row.UUID | |
}" | |
:record-data-fields="scope.row[fieldAttributes.columnName]" | |
@keyup.enter.native="confirmEdit(scope.row)" | |
/> | |
</template> | |
<span v-else> | |
{{ displayedValue(scope.row, fieldAttributes) }} | |
</span> | |
</template> | |
</el-table-column> | |
</template> | |
</el-table> | |
</template> | |
<script> | |
export default { | |
name: 'TableRecords', | |
computed: { | |
getterContextClientId() { | |
return parseInt(this.$store.getters.getContextClientId, 10) | |
} | |
}, | |
methods: { | |
/** | |
* @param {object} row, row data | |
* @param {object} field, field with attributes | |
*/ | |
displayedValue(row, field) { | |
if (typeof row[field.columnName] === 'boolean') { | |
// replace boolean true-false value for 'Yes' or 'Not' | |
return row[field.columnName] ? this.$t('components.switchActiveText') : this.$t('components.switchInactiveText') | |
} else if (field.componentPath === 'FieldDate' || field.componentPath === 'FieldTime') { | |
let cell = row[field.columnName] | |
if (Object.prototype.toString.call(cell) === '[object Date]') { | |
cell = cell.getTime() | |
} | |
// replace number timestamp value for date | |
return formatDate(cell, field.referenceType) | |
} else { | |
return row['DisplayColumn_' + field.columnName] || row[field.columnName] | |
} | |
}, | |
isReadOnlyCell(row, field) { | |
// TODO: Add support to its type fields | |
if (field.componentPath === 'FieldImage' || field.componentPath === 'FieldBinary') { | |
return true | |
} | |
const isUpdateableAllFields = field.isReadOnly || field.isReadOnlyFromLogic | |
if (this.panelType === 'window') { | |
if (field.columnName === this.getterPanel.linkColumnName || | |
field.columnName === this.getterPanel.fieldLinkColumnName) { | |
return true | |
} | |
// edit mode is diferent to create new | |
const editMode = !this.isEmptyValue(row.UUID) | |
return (!field.isUpdateable && editMode) || (isUpdateableAllFields || field.isReadOnlyFromForm) | |
} else if (this.panelType === 'browser') { | |
// browser result | |
return field.isReadOnly | |
} | |
// other type of panels (process/reports) | |
return isUpdateableAllFields | |
}, | |
isReadOnlyRow(row, field) { | |
if (this.panelType === 'window') { | |
if (this.getterContextClientId !== parseInt(row.AD_Client_ID, 10)) { | |
return true | |
} | |
if (fieldIsDisplayed(field)) { | |
// TODO: Add support to isChangedAllRecord columnName: Processed, Processing | |
// columnName: IsActive | |
const fieldReadOnlyForm = FIELD_READ_ONLY_FORM.find(item => { | |
return row.hasOwnProperty(item.columnName) && !item.isChangedAllForm | |
}) | |
if (fieldReadOnlyForm) { | |
var isReadOnlyRow = row[fieldReadOnlyForm.columnName] === fieldReadOnlyForm.valueIsReadOnlyForm && field.columnName !== fieldReadOnlyForm.columnName | |
return isReadOnlyRow | |
} | |
} | |
} | |
return false | |
}, | |
handleRowClick(row, column, event) { | |
if (this.isShowedPanelRecord && this.isParent) { | |
this.$router.push({ query: { | |
...this.$route.query, | |
action: row.UUID | |
}}) | |
} else { | |
if (!row.isEdit) { | |
row.isEdit = true | |
this.inEdited.push(row.UUID) | |
} | |
} | |
}, | |
handleRowDblClick(row, column, event) { | |
row.isEdit = false | |
if (!this.isShowedPanelRecord) { | |
this.confirmEdit(row, null, null) | |
} | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
rowCanBeEdited(scope) {
if (!this.isParent) {
const areRowAndCellEditable = !this.isReadOnlyCell(scope.row, fieldAttributes) && !this.isReadOnlyRow(scope.row, fieldAttributes);
if (areRowAndCellEditable)
if (scope.row.isEdit)
return true
}
return false
}
y en el v-if="rowCanBeEdited(scope)"