|
|
@@ -1,70 +1,84 @@
|
|
|
<template>
|
|
|
- <tr :style="{'background-color':warningColor}" :class="{'warning':isSelected}">
|
|
|
- <td>{{ serialNumber }}</td>
|
|
|
- <td class="text-center">
|
|
|
- <input
|
|
|
- v-model="isSelected"
|
|
|
- autocomplete="off"
|
|
|
- type="checkbox"
|
|
|
- @click="clickModelData(modelData)"
|
|
|
- />
|
|
|
+ <tr v-if="showTabGridTitleFields" height="40px" :style="{ 'background-color': warningColor }" :class="{ 'warning': isSelected }">
|
|
|
+ <td rowspan="2">{{ serialNumber }}</td>
|
|
|
+ <td rowspan="2" class="text-center">
|
|
|
+ <input v-model="isSelected" autocomplete="off" type="checkbox" @click="clickModelData(modelData)" />
|
|
|
</td>
|
|
|
|
|
|
- <td v-if="isShowEdit == undefined || isShowEdit">
|
|
|
+ <td v-if="isShowEdit == undefined || isShowEdit" rowspan="2">
|
|
|
<template v-if="showEditButton">
|
|
|
- <span
|
|
|
- class="operation-delete"
|
|
|
- aria-hidden="true"
|
|
|
- @click="editRecord"
|
|
|
- >
|
|
|
- <i
|
|
|
- class="fa"
|
|
|
- :class="{'fa-pencil': !modelData.editMode, 'fa-check': modelData.editMode}"
|
|
|
- />
|
|
|
+ <span class="operation-delete" aria-hidden="true" @click="editRecord">
|
|
|
+ <i class="fa" :class="{ 'fa-pencil': !modelData.editMode, 'fa-check': modelData.editMode }" />
|
|
|
</span>
|
|
|
- <span
|
|
|
- class="operation-edit"
|
|
|
- aria-hidden="true"
|
|
|
- @click="deleteRecord"
|
|
|
- >
|
|
|
+ <span class="operation-edit" aria-hidden="true" @click="deleteRecord">
|
|
|
<i class="fa fa-remove" />
|
|
|
</span>
|
|
|
</template>
|
|
|
</td>
|
|
|
|
|
|
- <template v-for="(gridFieldItem, index) in tabGridFields" :key="'TabGridField_' + gridFieldItem.fieldName + '_' + index">
|
|
|
- <td
|
|
|
-
|
|
|
- v-if="!modelData.editMode"
|
|
|
- v-show="gridFieldItem.visible"
|
|
|
-
|
|
|
- @click="clickRecord"
|
|
|
- >
|
|
|
+ <td :colspan="tabGridFields.length + 1" style="text-align: left; padding-left: 2rem;">
|
|
|
+ <a-space align="center">
|
|
|
+ <div v-for="tabGridTitleField in tabGridTitleFields" @click="clickRecord">
|
|
|
+ <a-space align="center">
|
|
|
+ <span style="font-weight: normal;">{{ Language.getDisplayNameTrl($i18n.locale, tabGridTitleField) }}</span>
|
|
|
+ <CellTextItem
|
|
|
+ v-if="!modelData.editMode" :grid-field-item="tabGridTitleField" :model-data="modelData"
|
|
|
+ :class-name="className" style="display: inline-block; font-weight: normal; padding-top: 3px;"
|
|
|
+ @execute-callout="executeCallout(tabGridTitleField)"
|
|
|
+ />
|
|
|
+ <CellItem
|
|
|
+ v-else :ref="'cellItem' + index" :scroll-object="scrollObject" :field-item="tabGridTitleField"
|
|
|
+ :model-data="modelData" :parent-model-data="parentModelData" :class-name="className" :window-no="windowNo"
|
|
|
+ :tab-index="tabIndex" style="display: inline-block;"
|
|
|
+ :class="{ 'table-cell-searchwidget': fieldUtil.isSearchType(tabGridTitleField) }"
|
|
|
+ @value-changed="valueChanged($event, tabGridTitleField)"
|
|
|
+ @execute-callout="executeCallout(tabGridTitleField)"
|
|
|
+ />
|
|
|
+ </a-space>
|
|
|
+ </div>
|
|
|
+ </a-space>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr :style="{ 'background-color': warningColor }" :class="{ 'warning': isSelected }" height="40px">
|
|
|
+ <template v-if="!showTabGridTitleFields">
|
|
|
+ <td>{{ serialNumber }}</td>
|
|
|
+ <td class="text-center">
|
|
|
+ <input v-model="isSelected" autocomplete="off" type="checkbox" @click="clickModelData(modelData)" />
|
|
|
+ </td>
|
|
|
+
|
|
|
+ <td v-if="isShowEdit == undefined || isShowEdit">
|
|
|
+ <template v-if="showEditButton">
|
|
|
+ <span class="operation-delete" aria-hidden="true" @click="editRecord">
|
|
|
+ <i class="fa" :class="{ 'fa-pencil': !modelData.editMode, 'fa-check': modelData.editMode }" />
|
|
|
+ </span>
|
|
|
+ <span class="operation-edit" aria-hidden="true" @click="deleteRecord">
|
|
|
+ <i class="fa fa-remove" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </td>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <template
|
|
|
+ v-for="(gridFieldItem, index) in tabGridFields"
|
|
|
+ :key="'TabGridField_' + gridFieldItem.fieldName + '_' + index"
|
|
|
+ >
|
|
|
+ <td v-if="!modelData.editMode" v-show="gridFieldItem.visible" @click="clickRecord">
|
|
|
<div>
|
|
|
<CellTextItem
|
|
|
- :grid-field-item="gridFieldItem"
|
|
|
- :model-data="modelData"
|
|
|
- :class-name="className"
|
|
|
+ :grid-field-item="gridFieldItem" :model-data="modelData" :class-name="className"
|
|
|
@execute-callout="executeCallout(gridFieldItem)"
|
|
|
/>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td
|
|
|
- v-else
|
|
|
- v-show="gridFieldItem.visible"
|
|
|
- :class="{'table-cell-searchwidget' : fieldUtil.isSearchType(gridFieldItem)}"
|
|
|
- @click="clickRecord"
|
|
|
+ v-else v-show="gridFieldItem.visible"
|
|
|
+ :class="{ 'table-cell-searchwidget': fieldUtil.isSearchType(gridFieldItem) }" @click="clickRecord"
|
|
|
>
|
|
|
<CellItem
|
|
|
- :ref="'cellItem' + index"
|
|
|
- :scroll-object="scrollObject"
|
|
|
- :field-item="gridFieldItem"
|
|
|
- :model-data="modelData"
|
|
|
- :parent-model-data="parentModelData"
|
|
|
- :class-name="className"
|
|
|
- :window-no="windowNo"
|
|
|
- :tab-index="tabIndex"
|
|
|
- @value-changed="valueChanged($event, gridFieldItem)"
|
|
|
+ :ref="'cellItem' + index" :scroll-object="scrollObject" :field-item="gridFieldItem"
|
|
|
+ :model-data="modelData" :parent-model-data="parentModelData" :class-name="className" :window-no="windowNo"
|
|
|
+ :tab-index="tabIndex" @value-changed="valueChanged($event, gridFieldItem)"
|
|
|
@execute-callout="executeCallout(gridFieldItem)"
|
|
|
/>
|
|
|
</td>
|
|
|
@@ -82,16 +96,17 @@ import Common from '../../common/Common.js';
|
|
|
|
|
|
import Context from '../common/Context.js';
|
|
|
import JsUtil from '../../common/JsUtil.js';
|
|
|
+import Language from '../../common/Language.js';
|
|
|
import { Notify, Uuid } from 'pc-component-v3';
|
|
|
export default {
|
|
|
|
|
|
components: {
|
|
|
- CellItem, CellTextItem,
|
|
|
+ CellItem, CellTextItem,
|
|
|
},
|
|
|
|
|
|
-
|
|
|
+
|
|
|
props: {
|
|
|
-
|
|
|
+
|
|
|
windowNo: {
|
|
|
type: String,
|
|
|
default: null,
|
|
|
@@ -100,21 +115,29 @@ export default {
|
|
|
type: Number,
|
|
|
default: null,
|
|
|
},
|
|
|
+ /** 表格标题字段 */
|
|
|
+ tabGridTitleFields: {
|
|
|
+ type: Array,
|
|
|
+ default: function () {
|
|
|
+ return null;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ /** 表格字段 */
|
|
|
tabGridFields: {
|
|
|
type: Array,
|
|
|
- default : function(){
|
|
|
+ default: function () {
|
|
|
return null;
|
|
|
},
|
|
|
},
|
|
|
modelData: {
|
|
|
type: Object,
|
|
|
- default : function(){
|
|
|
+ default: function () {
|
|
|
return null;
|
|
|
},
|
|
|
},
|
|
|
parentModelData: {
|
|
|
type: Object,
|
|
|
- default : function(){
|
|
|
+ default: function () {
|
|
|
return null;
|
|
|
},
|
|
|
},
|
|
|
@@ -124,7 +147,7 @@ export default {
|
|
|
},
|
|
|
isShowEdit: {
|
|
|
type: Boolean,
|
|
|
- default : false,
|
|
|
+ default: false,
|
|
|
},
|
|
|
scrollObject: {
|
|
|
type: Object,
|
|
|
@@ -147,10 +170,11 @@ export default {
|
|
|
tabGridFields1: this.tabGridFields,
|
|
|
lastClickTime: 0,
|
|
|
fieldUtil: FieldUtil,
|
|
|
+ Language: Language,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- modelDataCopy: function(){
|
|
|
+ modelDataCopy: function () {
|
|
|
return JSON.parse(JSON.stringify(this.modelData));
|
|
|
},
|
|
|
|
|
|
@@ -165,13 +189,13 @@ export default {
|
|
|
/**
|
|
|
* 获取报警颜色
|
|
|
*/
|
|
|
- warningColor:function(){
|
|
|
+ warningColor: function () {
|
|
|
if (this.modelData.data['warningColor'] != undefined && this.modelData.data['warningColor'].displayValue.length > 0) {
|
|
|
return this.modelData.data['warningColor'].displayValue[0];
|
|
|
} else {
|
|
|
return 'none';
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -180,54 +204,65 @@ export default {
|
|
|
showEditButton: function () {
|
|
|
if (this.isShowEdit == undefined || this.isShowEdit) {
|
|
|
if (this.modelData != undefined
|
|
|
- && this.modelData.data != undefined
|
|
|
- && this.modelData.data['documentStatus'] != undefined
|
|
|
- && this.modelData.data['documentStatus'].displayValue != undefined
|
|
|
- && (this.modelData.data['documentStatus'].displayValue[0] == 'APPROVED'
|
|
|
- || this.modelData.data['documentStatus'].displayValue[0] == 'REJECTED'
|
|
|
- || this.modelData.data['documentStatus'].displayValue[0] == 'PROCESSING')) {
|
|
|
+ && this.modelData.data != undefined
|
|
|
+ && this.modelData.data['documentStatus'] != undefined
|
|
|
+ && this.modelData.data['documentStatus'].displayValue != undefined
|
|
|
+ && (this.modelData.data['documentStatus'].displayValue[0] == 'APPROVED'
|
|
|
+ || this.modelData.data['documentStatus'].displayValue[0] == 'REJECTED'
|
|
|
+ || this.modelData.data['documentStatus'].displayValue[0] == 'PROCESSING')) {
|
|
|
return false;
|
|
|
}
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 是否显示标题行
|
|
|
+ */
|
|
|
+ showTabGridTitleFields: function () {
|
|
|
+ if (this.tabGridTitleFields == null || this.tabGridTitleFields.length == 0) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
'parentModelData': {
|
|
|
deep: true,
|
|
|
handler(curVal, oldVal) {
|
|
|
var _self = this;
|
|
|
- for(let index = 0; index < _self.tabGridFields.length; index ++){
|
|
|
+ for (let index = 0; index < _self.tabGridFields.length; index++) {
|
|
|
const tabGridField = _self.tabGridFields[index];
|
|
|
let oldTabGridFieldString = JSON.stringify(tabGridField);
|
|
|
|
|
|
const columnShowLogical = tabGridField.columnShowLogical;
|
|
|
- if(columnShowLogical != null && columnShowLogical.length > 0){
|
|
|
+ if (columnShowLogical != null && columnShowLogical.length > 0) {
|
|
|
let functionName = tabGridField.fieldName.replace('.', '_') + '_showLogical';
|
|
|
|
|
|
- let executeFunction = function(){
|
|
|
+ let executeFunction = function () {
|
|
|
let parentCtx = new _self.getContext(_self.parentModelData);
|
|
|
- try{
|
|
|
+ try {
|
|
|
tabGridField.visible = _self[functionName](null, parentCtx.modelData);
|
|
|
- }catch(e){
|
|
|
+ } catch (e) {
|
|
|
console.error('js代码 %s 执行异常 %o', columnShowLogical, e);
|
|
|
tabGridField.visible = true;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- if(_self[functionName] == null){
|
|
|
+ if (_self[functionName] == null) {
|
|
|
// 执行服务端的脚本
|
|
|
const jsUrl = _self.jsUrl;
|
|
|
- if(jsUrl == null || jsUrl == undefined){
|
|
|
+ if (jsUrl == null || jsUrl == undefined) {
|
|
|
Notify.error('数据字典定义异常', '【' + tabGridField.fieldName + '】列显示逻辑的JS文件不存在,请联系管理员检查数据字典是否JS文件。', false);
|
|
|
return;
|
|
|
}
|
|
|
let promise = JsUtil.dynamicLoadJsFunction(jsUrl, columnShowLogical);
|
|
|
- promise.then(dynamicFunction => {
|
|
|
+ promise.then(dynamicFunction => {
|
|
|
let targetFunction = dynamicFunction;
|
|
|
-
|
|
|
- if(targetFunction == null){
|
|
|
+
|
|
|
+ if (targetFunction == null) {
|
|
|
Notify.error('数据字典定义异常', '【' + tabGridField.fieldName + '】列显示逻辑定义异常,请联系管理员检查数据字典的定义。', false);
|
|
|
return;
|
|
|
}
|
|
|
@@ -237,11 +272,11 @@ export default {
|
|
|
executeFunction();
|
|
|
}, errorData => {
|
|
|
console.error(errorData);
|
|
|
- });
|
|
|
- }else{
|
|
|
+ });
|
|
|
+ } else {
|
|
|
executeFunction();
|
|
|
}
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
tabGridField.visible = true;
|
|
|
}
|
|
|
|
|
|
@@ -249,8 +284,8 @@ export default {
|
|
|
|
|
|
// bug fixed by jack 2022-01-17
|
|
|
// 只有当数据发生改变以后,才重新设置数据,解决当子表数据量很打的时候,输入卡顿的问题。
|
|
|
- if(oldTabGridFieldString != newTabGridFieldString){
|
|
|
- _self.tabGridFields[index]=tabGridField;
|
|
|
+ if (oldTabGridFieldString != newTabGridFieldString) {
|
|
|
+ _self.tabGridFields[index] = tabGridField;
|
|
|
}
|
|
|
}
|
|
|
console.log(_self.tabGridFields);
|
|
|
@@ -263,8 +298,8 @@ export default {
|
|
|
/**
|
|
|
* 获取Context
|
|
|
*/
|
|
|
- getContext : Context,
|
|
|
-
|
|
|
+ getContext: Context,
|
|
|
+
|
|
|
deleteRecord: function () {
|
|
|
this.$emit('deleteRecord');
|
|
|
},
|
|
|
@@ -327,7 +362,7 @@ export default {
|
|
|
},
|
|
|
success: function (data) {
|
|
|
if (data != undefined) {
|
|
|
- item.keyValues=data.keyValues;
|
|
|
+ item.keyValues = data.keyValues;
|
|
|
}
|
|
|
},
|
|
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
|
|
@@ -368,32 +403,32 @@ export default {
|
|
|
|
|
|
<style scoped>
|
|
|
.table-cell-text {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
/** 搜索框,自动提示表格, */
|
|
|
-.table-cell-searchwidget{
|
|
|
- position: relative;
|
|
|
+.table-cell-searchwidget {
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.text-center {
|
|
|
- text-align: center;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
-.warning{
|
|
|
- background-color: #fcf8e3 !important;
|
|
|
+.warning {
|
|
|
+ background-color: #fcf8e3 !important;
|
|
|
}
|
|
|
|
|
|
.operation-delete {
|
|
|
- margin-left: 10px;
|
|
|
- margin-right: 5px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
.operation-edit {
|
|
|
- margin-left: 5px;
|
|
|
- margin-right: 10px;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|