<template>
<div>
<c-draggable-div :needDraggable="needDraggable" w="auto" :h="tableHeight" ref="drgDiv" @onResize="onResize">
<!-- show-footer -->
<vxe-grid
@scroll="onScroll"
:stripe="needStripe"
row-key
:round="roundBorder"
column-key
show-overflow
:row-config="{ isCurrent: true, isHover: true }"
ref="xGrid"
id="vxeTable"
header-align="center"
:urlData="urlData"
:height="tableHeight"
:columns="myColumns"
:custom-config="{ storage: true }"
:data="loadingDataSource"
:menu-config="tableMenu"
:mouse-config="{ selected: true }"
:keyboard-config="{ isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true }"
:scroll-x="{ enabled: mergeRowParams.length > 0 ? (allRowsMerged ? false : true) : true, gt: 10, oSize: 15 }"
:scroll-y="{
enabled: mergeRowParams.length > 0 ? (allRowsMerged ? false : true) : true,
gt: 10,
oSize: 15,
mode: 'wheel',
}"
:sort-config="sortConfig"
:span-method="!this.allRowsMerged && this.mergeRowParams.length == 0 ? undefined : mergeRowMethod"
@current-change="currentChange"
@cell-click="rowClick"
@cell-dblclick="rowDbClick"
@checkbox-change="checkboxChange"
@radio-change="radioChangeEvent"
:loading="loading"
v-bind="gridOptions"
:editStateData="editStateData"
:IsShowTools="IsShowTools"
:selectionBox="selectionBox"
:Isshuttle="Isshuttle"
:Isversion="Isversion"
:Istransfer="Istransfer"
:onlyCreate="onlyCreate"
:cellEdit="cellEdit"
:edit-config="{ enabled: false, showIcon: false }"
:checkbox-config="checkboxConfig"
:radio-config="radioConfig"
:row-style="rowStyle"
:cell-style="underlineInfo == undefined ? cellStyle : setUnderline"
:tableId="tableId"
@checkbox-all="checkAllData"
@cell-menu="cellMenu"
:auto-resize="true"
:tree-config="treeConfig"
:filter-config="{
iconNone: 'vxe-icon--search',
iconMatch: 'vxe-icon--search',
remote: true,
}"
>
<template #empty>
<div style="text-align: center">
<c-icon icon="empty" style="font-size: 20px; width: 64px; height: 41px" />
<p v-if="isneedShowNull" style="color: rgba(0, 0, 0, 0.25)">{{ $t('No Data') }}</p>
<p v-else style="color: rgba(0, 0, 0, 0.25)">{{ $t('Data Not Found') }}</p>
</div>
</template>
<template v-slot:toolbarButtons>
<c-icon v-if="explain" icon="titleicon" style="float: left; position: relative; top: 5px; margin-left: 5px" />
<custom-header
v-if="explain"
:title="`${$t(tableName)}`"
style="float: left; font-size: 14px; background: transparent; position: relative; bottom: 3px"
/>
<a-popconfirm
v-show='needLock'
placement="topLeft"
@confirm="lock()"
>
<template slot="title">
<p>{{'Are you sure to ' + (islock == 'lock' ? 'unlock' : 'lock') + ' ?'}}</p>
</template>
<a-button
style="
width: 24px;
height: 24px;
padding: 7px 0px 0px 5px;
background: none;
text-align: left;
border: none;
"
>
<a-icon :style="[{fontSize: '17px'}, {color: (islock == 'lock' ? '#F44F2B':'#DBD6D5')}]" :type="islock == 'lock' ? 'lock':'unlock'" />
<b style="color: #E74C3C" >{{lockuser}}</b>
</a-button>
</a-popconfirm>
<a-button
style="
width: 24px;
height: 24px;
padding: 10px 0px 0px 10px;
background: none;
text-align: left;
border: none;
"
v-show='needHide'
@click="hideButtonClick"
>
<a-icon :style="[{fontSize: '15px'}]" :type="hideTable ? 'forward':'backward'" />
</a-button>
<div style="float: right; padding-top: 1px; height: 100%">
<a-button
v-has="'user:transfer'"
type="primary"
:id="finalyTableName"
:disabled="enableTransfer"
@click="transferShowModal"
size="small"
class="btnAdd"
>
<a-icon type="plus-circle" />
{{ $t('Transfer') }}
</a-button>
<slot name="headerBtn"></slot>
<a-modal
v-model="tableTransferVisible"
v-drag-modal
:destroyOnClose="true"
title="Factory Relationship"
:width="modalWidth"
@ok="transferModalOk"
>
<div
style="height: 30px; margin-top: -12px; font-size: 16px"
v-show="modalDivContent == '' ? false : true"
>
{{ modalDivContent + modalDivSuffix }}
</div>
<TableTransfer
ref="xTranfer"
:needMoveup="false"
:needModeDown="false"
:needSelectExistData="false"
:commonTransfer="commonTransfer"
:tranferData="transferData"
:titleleft="titleleft"
:titleright="titleright"
:height="600"
:needSeq="needTransferSeq"
></TableTransfer>
</a-modal>
<a-button
v-has="'user:shuttle'"
type="primary"
v-show="!shuttleDisable"
:id="finalyTableName"
@click="showModal"
size="small"
class="btnAdd"
>
<a-icon type="plus-circle" />
{{ $t('Transfer') }}
</a-button>
<a-modal
v-model="visible"
v-drag-modal
:destroyOnClose="true"
title="Capalility"
@ok="handleOk"
@cancel="cancel"
width="1333px"
>
<Transfer
:datalist="bindData"
:Params="{ machinename: machinename, factoryname: factoryname }"
@rowData="rowData"
v-model:value="capability"
ref="Transfers"
></Transfer>
</a-modal>
<a-button
v-has="'user:copy'"
size="small"
type="primary"
class="btnAdd"
:id="finalyTableName"
:disabled="copyDisabled"
@click="copy"
>
<a-icon type="copy" style="background: transparent" />
{{ $t('Copy') }}
</a-button>
<a-button
v-has="'user:create'"
type="primary"
:id="finalyTableName"
@click="addRowClickEvent"
size="small"
class="btnAdd"
:disabled="btnDisabled || createDisabled"
v-if="whetherCreate"
>
<a-icon type="plus" style="background: transparent" />
{{ $t('create') }}
</a-button>
<!-- for POWIPMapping -->
<a-button
v-has="'user:machcopy'"
:id="finalyTableName"
type="primary"
:disabled="copyDisabled"
size="small"
@click="showMachineCopyModal"
class="btnAdd"
>
<a-icon type="plus" style="background: transparent" />
{{ $t('Machine Copy') }}
</a-button>
<a-button
v-has="'user:opercopy'"
:id="finalyTableName"
type="primary"
:disabled="copyDisabled"
size="small"
@click="showOperCopyModal"
class="btnAdd"
>
<a-icon type="plus" style="background: transparent" />
{{ $t('Operation Copy') }}
</a-button>
<a-button
v-has="'user:modify'"
type="primary"
:id="finalyTableName"
@click="allowEdit"
size="small"
class="btnAdd"
:disabled="btnDisabled"
>
<a-icon type="edit" theme="filled" />
{{ $t('Modify') }}
</a-button>
<a-button
v-has="'user:save'"
type="primary"
:id="finalyTableName"
:loading="saveloading"
@click="save"
size="small"
class="btnAdd"
:disabled="btnDisabled || cancelDisabled"
>
<a-icon type="save" />
{{ $t('Save') }}
</a-button>
<a-button
v-has="'user:cancel'"
type="primary"
:id="finalyTableName"
@click="closeEdit"
size="small"
class="btnAdd"
:disabled="cancelDisabled"
>
{{ $t('Cancel') }}
</a-button>
<a-button
v-has="'user:clear'"
:id="finalyTableName"
type="danger"
style="margin: 0px 4px 6px 0px; height: 27px; border: none; float: left"
size="small"
@click="clear"
:disabled="btnDisabled"
>
<c-icon icon="clearData" style="width: 16px; height: 14px; margin-right: 4px"></c-icon>
{{ $t('clearData') }}
</a-button>
<a-button
v-has="'user:delete'"
type="danger"
:id="finalyTableName"
@click="batchDel"
:disabled="btnDisabled || removeDisabled"
v-if="needRemove"
size="small"
style="margin-right: 4px; height: 27px; border: none; float: left"
:loading="deleteLoading"
>
<a-icon type="delete" theme="filled" />
{{ $t('remove') }}
</a-button>
<!-- <a-button-->
<!-- v-has="'user:version'"-->
<!-- type="primary"-->
<!-- :id="finalyTableName"-->
<!-- :disabled="enableVersion"-->
<!-- @click="updateVersion"-->
<!-- size="small"-->
<!-- class="btnAdd btnVersion"-->
<!-- >{{ $t('Version Upgrade') }}-->
<!-- </a-button>-->
<a-button
v-has="'user:filter'"
:id="finalyTableName"
:disabled="filterPerDisabled"
type="primary"
class="btnAdd"
size="small"
@click="selectAuthorizeData"
:title="`${$t('filter')}`"
>
<c-icon icon="filter" style="margin-right: 4px" />
{{ $t('filter') }}
</a-button>
<!--数据权限按钮-->
<!-- 吴总要求，变更按钮图标0119 -->
<a-button
v-has="'user:access'"
:id="finalyTableName"
:disabled="lockDisabled"
type="primary"
class="btnAdd"
size="small"
@click="showModalForAccess"
:title="`${$t('authorize')}`"
>
<c-icon icon="UnBind" style="margin-right: 4px" />
{{ $t('bind') }}
</a-button>
<a-button
v-has="'user:access'"
:id="finalyTableName"
:disabled="showNoUnlock"
style="margin-right: 4px; height: 27px; border: none; float: left"
type="danger"
size="small"
@click="unlockData"
:title="`${$t('UnAuthorizeD')}`"
>
<c-icon icon="Bind" style="margin-right: 4px" />
{{ $t('unbind') }}
</a-button>
<a-button
v-has="'user:refresh'"
:id="finalyTableName"
@click="loadData(true)"
size="small"
class="btnIcon"
:title="`${$t('refresh')}`"
>
<c-icon icon="reset" />
</a-button>
<!-- History按钮 -->
<a-button
v-show='needHistory'
@click="showHistory"
size="default"
class="btnIcon"
:title="`${$t('History')}`"
>
<a-icon :style="{ fontSize: '20px', color: '#08c'}" type="history"/>
</a-button>
<!--自定义按钮以及名字-->
<a-button
v-if='needCustomizedButton'
@click="customizedButtonClick"
size="default"
type="primary"
:disabled="customizedButtonDisabled"
:title="`${$t(customizedButtonName)}`"
>
{{customizedButtonName}}
</a-button>
<a-upload
name='file'
:showUploadList='false'
:multiple='false'
:headers='tokenHeader'
:action='importExcelUrl'
@change='handleImportExcel'
style='float: left'
v-show='needImport'
>
<a-button size='small' v-has="'user:import'"
:id="finalyTableName" @mouseenter="mouseenter" class='btnIconex' :title="`${$t('import')}`" style='background: transparent'>
<c-icon icon='import' />
</a-button>
</a-upload>
<a-button
:title="`${$t('export')}`"
:disabled="exportDisabled()"
class='btnIcon'
size='small'
v-has="'user:export'"
:id="finalyTableName"
style='background: transparent'
@click='handleExportXls'
v-show='needExport'
>
<c-icon ref="excelIcon" icon='exportDisabled' />
</a-button>
<a-row v-if='needAutoRefersh'>
<a-col :span="12">
<a-switch checked-children="refresh" un-checked-children="refresh" v-model="isChecked" @change="onChange"
style="margin-left: 10px;margin-top: 2px;margin-right:20px"
:disabled="switchDisabled"/>
</a-col>
<a-col :span="12">
<a-statistic-countdown
:value="deadline"
format="mm:ss"
v-if='!switchDisabled'
@finish="onFinish"
style="margin-left: 10px;margin-top: 4px;margin-right:5px"
/>
</a-col>
</a-row>
<a-dropdown v-has="'user:dropdown'" :id="finalyTableName">
<a-button class="btnmore">
<c-icon icon="more"></c-icon>
</a-button>
<a-menu slot="overlay" @click="handleMenuClick" class="bitch">
<a-menu-item key="1" v-has="'user:fullscreen'" :id="finalyTableName">
<!-- 放大 -->
<a-button
@click="$refs.xGrid.zoom()"
@mouseup="fullScreen ? (fullScreen = false) : (fullScreen = true)"
class="btnIcon"
size="small"
:title="!fullScreen ? `${$t('fullscreen')}` : `${$t('revert')}`"
style="background: transparent"
>
<c-icon v-if="!fullScreen" icon="amplify" />
<c-icon v-else icon="amplify" style="transform: rotate(180deg); transform-origin: center center" />
</a-button>
</a-menu-item>
<a-menu-item key="2" v-has="'user:print'" :id="finalyTableName">
<a-button
:title="`${$t('print')}`"
size="small"
@click="printEvent"
class="btnIcon"
style="background: transparent"
>
<c-icon icon="print" />
</a-button>
</a-menu-item>
</a-menu>
<a-button>
Actions
<a-icon type="down" />
</a-button>
</a-dropdown>
<vxe-toolbar
v-show="myColumns.length > 0"
ref="xToolbar1"
custom
class="btnIcon"
v-has="'user:chooseColumns'"
:id="finalyTableName"
style="background: none; margin-left: -8px; margin-top: 1px"
></vxe-toolbar>
<slot style="width: 100%" name="titleArea"></slot>
</div>
</template>
<template #headerText="{ column }">
<div>
<!-- 表格列标题多选框 通过needCheckbox开启 -->
<span v-for="mycol in myColumns.filter((item) => item.field == column.property)" :key="mycol.field">
<a-checkbox
v-if="mycol.needCheckbox"
:indeterminate="mycol.indeterminate"
:checked="mycol.checked"
@change="
(event) => {
headerCheckBoxChange(column, event, true)
}
"
:disabled="checkBoxSlotAble"
>
</a-checkbox>
</span>
{{ column.title }}
</div>
</template>
<template #filters="{ column, columnIndex }">
<div>
<span
v-if="
column.property != undefined &&
myColumns[columnIndex].isDuration == undefined &&
(column.property.toLowerCase().indexOf('time') > -1 ||
column.property.toLowerCase().indexOf('date') > -1)
"
>
<a-range-picker
style="width: 200px"
:ref="column.property"
v-model.lazy="filterValue[column.property]"
@pressEnter="filter(column.property)"
/>
</span>
<span v-else>
<div style="padding: 8px">
<a-input
style="width: 193px; margin-bottom: 8px; height: 24px !important"
v-model.lazy="filterValue[column.property]"
:ref="column.property"
@pressEnter="filter(column.property)"
></a-input>
<br />
<a-button
type="primary"
@click="filter(column.property,column.title)"
style="width: 90px; height: 24px; font-size: 13px"
>
<c-icon icon="magnifyingglass" style="margin-right: 4px; margin-bottom: 1px; width: 12px" />
{{ $t('search') }}
</a-button>
<a-button
@click="filterClear(column.property,column.title)"
style="margin-left: 1em; width: 90px; height: 24px; font-size: 13px"
>
<a-icon type="redo" style="margin-right: 4px; margin-bottom: 1px; width: 12px; height: 12px" />
{{ $t('reset') }}
</a-button>
</div>
</span>
</div>
</template>
<template v-slot:contextFilter="{ column, row, columnIndex, rowIndex }">
<span
v-if="
myColumns.filter((item) => item.field == column.property)[0] != undefined &&
myColumns.filter((item) => item.field == column.property)[0].type != undefined &&
myColumns.filter((item) => item.field == column.property)[0].type == 'checkBox'
"
>
<a-checkbox
@change="
(event) => {
headerCheckBoxChange(column, event, false)
}
"
v-model:value="row[column.property]"
:disabled="checkBoxSlotAble"
></a-checkbox>
</span>
<span v-else style="cursor: pointer">
{{ row[column.property] }}
</span>
</template>
<template v-slot:timeSlot="{ column, row, columnIndex, rowIndex }">
<span
v-if="checkSlot(row, column) && compareData(row, column, ComputationTime(row, column, 'ms'))"
style="color: red"
>
{{ ComputationTime(row, column, 'hour') }}
</span>
<span v-else-if="checkSlot(row, column) && !compareData(row, column, ComputationTime(row, column, 'ms'))">
{{ ComputationTime(row, column, 'hour') }}
</span>
<span v-else> </span>
</template>
<template v-slot:bgColor="{ column, row, columnIndex, rowIndex }">
<div
v-if="
myColumns.filter((colItem) => colItem.field == column.property)[0].paintParam != undefined &&
row[column.property] ==
myColumns.filter((colItem) => colItem.field == column.property)[0].paintParam.condition
"
:style="{
background: myColumns.filter((colItem) => colItem.field == column.property)[0].paintParam.color,
width: '148px',
height: '100%',
marginLeft: '-5px',
padding: '0px 5px 0px 5px',
}"
>
{{ row[column.property] }}
</div>
<div v-else>
{{ row[column.property] }}
</div>
</template>
<template v-slot:action="{ column, row, columnIndex, rowIndex }">
<span v-if="actionSlot != undefined && actionSlot.length > 0">
<span v-for="(actionItem, actionIndex) in actionSlot" :key="actionItem.key">
<a-popconfirm
v-if="actionItem.showType == 'switch'"
placement="topLeft"
:ok-text="`${$t('ok')}`"
:cancel-text="`${$t('cancel')}`"
@confirm="lockConfirm(row)"
>
<template slot="title">
<p>{{ $t('areyousuretolock') + '?' }}</p>
</template>
<a-button
style="
width: 24px;
height: 24px;
padding: 0px 0px 0px 0px;
background: none;
text-align: left;
border: none;
"
>
<a-icon :style="[{fontSize: '15px'}, {color: (row.islock == 'lock' ? 'red':'black')}]" :type="row.islock == 'lock' ? 'lock':'unlock'" />
<b>{{row.lockuser}}</b>
</a-button>
</a-popconfirm>
<a
v-else-if="actionItem.showType == 'font'"
style="
width: 9%;
height: 24px;
padding: 0px 0px 0px 0px;
background: none;
text-align: left;
border: none;
"
@click="actionCallBack(column, row, actionItem.key)"
>
{{ actionItem.label }}
</a>
<a-popconfirm
v-else-if="actionItem.showType == 'delete'"
placement="topLeft"
:ok-text="`${$t('ok')}`"
:cancel-text="`${$t('cancel')}`"
@confirm="delConfirm(row)"
>
<template slot="title">
<p>{{ $t('areyousuretodelete') + '?' }}</p>
</template>
<a-button
style="
width: 24px;
height: 24px;
padding: 0px 0px 0px 0px;
background: none;
text-align: left;
border: none;
"
>
<a-icon style="font-size: 15px; color: red" type="delete" />
</a-button>
</a-popconfirm>
<a
v-else-if="actionItem.showType == 'modal'"
style="width: 18%; height: 24px; background: none; text-align: left; border: none"
@click="modalClick(column, row, actionItem.url, actionItem.modalConfig)"
>
{{ actionItem.label != undefined ? $t(actionItem.label) : $t('modal') }}
</a>
<a
v-else-if="actionItem.showType == 'route'"
style="
width: 9%;
height: 24px;
padding: 0px 0px 0px 0px;
background: none;
text-align: left;
border: none;
"
@click="
routeClick(
column,
row,
row.url == undefined
? this.actionRouteUrl == undefined
? actionItem.url
: row[this.actionRouteUrl]
: row.url
)
"
>
{{ actionItem.label != undefined ? $t(actionItem.label) : $t('route') }}
</a>
<a-button
v-else
@click="actionCallBack(column, row, actionItem.key)"
style="
width: 24px;
height: 20px;
padding: 0px 0px 0px 0px;
background: none;
text-align: left;
border: none;
"
>
<a-icon
style="font-size: 15px"
:type="actionItem.iconType == undefined ? 'edit' : actionItem.iconType"
/>
</a-button>
<span
style="font-size: 14px; color: #e8e8e8"
v-if="actionSlot != undefined && actionIndex + 1 != actionSlot.length"
>|</span
>
</span>
</span>
</template>
<template v-slot:headerComponent="{ column, columnIndex, $columnIndex, _columnIndex, $rowIndex }">
<!-- 这里只是提供参考 -->
<a-input size="small" placeholder="small size" />
</template>
<!-- 增加图片 fsk -->
<template v-slot:imgUrl="{ row }">
<span
v-if="row.IMGURL ? row.IMGURL : row.imgUrl"
style="width: 100px; height: 20px; display: table-cell; vertical-align: middle; text-align: center"
>
<img
:src="require('../../../assets/icons/' + (row.IMGURL ? row.IMGURL : row.imgUrl) + '')"
style="width: 20px; height: 20px"
/>
</span>
<span v-else></span>
</template>
<template #default="{ row, column, columnIndex }">
<template v-if="myColumns[columnIndex].hyperLink">
<a :href="row[column.property]" :target="row[column.property]">{{ row[column.property] }}</a>
</template>
<template v-else-if="myColumns[columnIndex].TypeInfo">
<template v-if="myColumns[columnIndex].TypeInfo.Type == 'button'">
<a-button
:style="myColumns[columnIndex].TypeInfo.style"
:type="myColumns[columnIndex].TypeInfo.type"
@click="tableHandleChange({ row, column, columnIndex })"
>{{ row[column.property] }}</a-button
>
</template>
</template>
<template v-else>
{{ row[column.property] }}
</template>
</template>
</vxe-grid>
</c-draggable-div>
<custom-modal
ref="customModal"
:customUrl="customUrl"
:historySQLName="historySQLName"
@customModalOk="customModalOk"
@calBackModal="calBackModal"
:customHeight="customModalHeight"
:layColsCount="layColsCount"
:heightColsCount="heightColsCount"
></custom-modal>
</div>
</template>
<script>
import Sortable from 'sortablejs/modular/sortable.complete.esm.js'
import XEUtils from 'xe-utils'
import arrayMethods from 'xe-utils/array'
import {
downFile,
getAction,
getActionForSystem,
postAction,
postActionForSystem,
putAction,
putActionForSystem,
sendPutAction,
} from '@/api/manage'
import CustomHeader from '../../../components/tools/CustomHeader'
import Transfer from '@views/modeler/factory/components/machineCapability/Transfer'
import '@/assets/less/round.scss'
import { VXETable, VxeTablePropTypes } from 'vxe-table'
import TableTransfer from '@/components/oic/TableTransfer/TableTransfer'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import moment from 'moment'
// 创建一个简单的输入框筛选
VXETable.renderer.add('FilterInput', {
// 筛选模板
renderFilter(h, renderOpts, params) {
return [<filter-input params={params}></filter-input>]
},
// 重置数据方法
filterResetMethod({ options }) {
options.forEach((option) => {
option.data = ''
})
},
// 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
filterRecoverMethod({ option }) {
option.data = ''
},
// 筛选方法
filterMethod({ option, row, column }) {
const { data } = option
const cellValue = row[column.property]
if (cellValue) {
return cellValue.indexOf(data) > -1
}
return false
},
})
VXETable.menus.add('Delete', (params, event) => {
menusDelete(params, event)
})
VXETable.menus.add('Update', (params, event) => {
menusUpdate(params, event)
})
VXETable.menus.add('MoveUp', (params, event) => {
menusMoveUp(params, event)
})
VXETable.menus.add('MoveDown', (params, event) => {
menusMoveDown(params, event)
})
export default {
name: 'DataTable',
components: { CustomHeader, Transfer, TableTransfer },
props: {
// 使用baseUrl，从数据量查询数据
isSourceSearch:{
type: Boolean,
default: true,
},
needHistory:{
type: Boolean,
default: false,
},
needCustomizedButton:{
type: Boolean,
default: false,
},
customizedButtonDisabled:{
type: Boolean,
default: false,
},
customizedButtonName:{
type: String,
default: 'Inhibit Info',
},
needImport:{
type: Boolean,
default: false,
},
needLock:{
type: Boolean,
default: false,
},
islock:{
type: String,
default: 'unlock',
},
lockuser:{
type: String,
default: '',
},
needHide:{
type: Boolean,
default: false,
},
hideTable:{
type: Boolean,
default: false,
},
needExport:{
type: Boolean,
default: false,
},
isChecked:{
type: Boolean,
default: true,
},
needAutoRefersh:{
type: Boolean,
default: false,
},
switchDisabled:{
type: Boolean,
default: false,
},
// deadline:{
// type: Number,
// default: Date.now(),
// },
whetherCreate:{
type: Boolean,
default: true,
},
//所有行合并
allRowsMerged: {
type: Boolean,
default: false,
},
//合并行参数
mergeRowParams: {
type: Array,
default() {
return []
},
},
needCalc: {
type: Boolean,
default: false,
},
customModalHeight: {
type: Number,
},
historySQLName: {
type: String,
default: '',
},
attributeParameter: {
type: Array,
default: undefined,
},
needMenuDel: {
type: Boolean,
default: false,
},
needMenuUpdate: {
type: Boolean,
default: false,
},
isLazyLoad: {
type: Boolean,
default: false,
},
needStripe: {
type: Boolean,
default: true,
},
//操作列 -> 路由跳转按钮取指定行数据某个字段的值进行跳转
actionRouteUrl: undefined,
allowDrag: {
type: Boolean,
default: false,
},
treeConfig: {
type: Object,
default: undefined,
},
//OIC 是否开启表头filter插槽
isHeaderFilter: {
type: Boolean,
default: true,
},
needRowClick: {
type: Boolean,
default: true,
},
//是否开启 行点击事件改变行原有颜色
isClickChangeRowColor: {
type: Boolean,
default: false,
},
//控制表格多选框默认不可编辑
checkBoxFirstDisabled: {
type: Boolean,
default: false,
},
//是否执行首次加载
isFirstLoad: {
type: Boolean,
default: true,
},
//表头插槽 绑定到具体某一个字段 字符数组
headerCptData: {
type: Array,
default() {
return []
},
},
needDraggable: {
type: Boolean,
default: false,
},
actionSlot: {
type: Array,
default() {
return []
},
},
commonTransfer: {
type: Boolean,
default: false,
},
transferData: {
type: Object,
default() {
return {}
},
},
tableMenu: {
type: Object,
default() {
return {
header: {
options: [
[
{ code: 'HIDDEN_COLUMN', name: '隐藏' },
{ code: 'RESET_COLUMN', name: '取消隐藏' },
{ code: 'FIXED_LEFT_COLUMN', name: '固定到左侧' },
{ code: 'FIXED_RIGHT_COLUMN', name: '固定到右侧' },
{ code: 'RESET_ALL', name: '重置个性化数据', prefixIcon: 'fa fa-undo' },
],
],
},
body: {
options: [
[
{ code: 'MoveUp', name: 'MoveUp', visible: true },
{ code: 'MoveDown', name: 'MoveDown', visible: true },
{ code: 'Delete', name: '删除', visible: this.needMenuDel },
{ code: 'Update', name: '修改', visible: this.needMenuUpdate },
],
[
{ code: 'FILTER_CELL', name: '筛选' },
{ code: 'CLEAR_FILTER', name: '清除筛选' },
{ code: 'CLEAR_ALL_FILTER', name: '清除所有筛选' },
{ code: 'COPY_DATA', name: '复制' },
{ code: 'EXPORT_ALL', name: '导出.csv', prefixIcon: 'fa fa-download', params: { type: 'csv' } },
],
],
},
footer: {
options: [
[
{
code: 'EXPORT_ALL',
name: '导出.xml',
prefixIcon: 'fa fa-download',
params: { columns: [{ field: 'name' }, { field: 'role' }, { field: 'sex' }], type: 'xml' },
},
{
code: 'PRINT_ALL',
name: '打印',
prefixIcon: 'fa fa-print',
params: { columns: [{ field: 'name' }, { field: 'role' }, { field: 'sex' }] },
},
],
],
},
}
},
},
btnDisabled: {
type: Boolean,
default: false,
},
roundBorder: {
typeof: Boolean,
default: true,
},
tableId: '',
dataName: {
typeof: String,
default: '',
},
cellEdit: false,
//判断 首列为单选按钮列还是多选按钮列
selectionBox: {
type: String,
default: undefined,
},
modalWidth: {
type: String,
default: '1000px',
},
modalDivContent: '',
modalDivSuffix: {
type: String,
default: '',
},
explain: {
typeof: Boolean,
default: true,
},
titleleft: '',
titleright: '',
onlyCreate: false,
Isshuttle: false,
Isversion: false,
Istransfer: false,
editStateData: {},
parentData: {},
tableName: '',
areaNode: {},
ActionNeed: {},
urlData: {},
columns: {},
dataSource: {},
isEditor: {},
title: {},
parent: {},
queryid: {},
version: {},
params: {},
isShowMenu: {},
totalOnly: {},
mydata: [],
height: 0,
IsShowTools: {
type: Boolean,
default: true,
},
bindData: {
type: Array,
},
machinename: {
type: String,
},
factoryname: {
type: String,
},
accessDataList: {
type: Array,
},
isPageDelete: {
type: Boolean,
default: false,
},
isRadioDelete: {
type: Boolean,
default: false,
},
checkboxConfig: {
type: Object,
default() {
return { highlight: true }
},
},
radioConfig: {
type: Object,
default() {
return { highlight: true }
},
},
cellStyle: {
type: Function,
default:function({ row,column, rowIndex ,columnIndex}){
if(column.type=='seq'){
column.title='No.'
return 'text-align:center'
}
}
},
//是否需要添加下划线
underlineInfo: {
type: Object,
default: undefined,
},
rowStyle: {
type: Function,
},
needSeq: {
type: Boolean,
default: true,
},
needTransferSeq: {
type: Boolean,
default: true,
},
radioCancel: {
type: Boolean,
default: true,
},
radioDeselect: {
type: Boolean,
default: false,
},
whetherDelete: {
type: Boolean,
default: true,
},
isColumnDrop: {
type: Boolean,
default: true,
},
needImportExcelLoadData:{
type: Boolean,
default: true,
},
isfixed:{
type: Boolean,
default: true,
}
},
data() {
return {
deadline: Date.now(),
tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
deleteLoading: false,
menuClick: true,
createDisabled: false,
removeDisabled: true,
needRemove: false,
lazyLoad: this.isLazyLoad,
isScrollTop: true,
copyDisabled: true,
filterPerDisabled: false,
cancelDisabled: true,
lockDisabled: false,
dataRuleId: undefined,
cacheDataSource: [],
customUrl: '',
layColsCount: 3,
heightColsCount: 70,
checkBoxSlotAble: false,
isCheckBoxClick: false,
tableTransferVisible: false,
authorizeType: ['UserName', 'UserGroup', 'UserRole', 'UserDepart'],
authorizeObject: [],
selectAuthorizeType: '',
selectAuthorizeObj: '',
dataAccessForm: {},
shuttleDisable: true,
enableVersion: true,
enableTransfer: true,
isTrue: true,
editConfig: undefined,
ActionNeedData: {},
baseUrl: '',
oicParam: {},
myColumns: [],
savedparentData: {},
PageOptions: {
currentPage: -1,
pageSize: -1,
totalResult: 0,
pageCount: 0,
data: [],
},
capability: [], //this.bindData.map(item=>item.capabilityname),
visible: false,
visibleForAccess: false,
visibleForUnlock: false,
showNoUnlock: true,
tableHeight: this.height - 12,
loading: false,
pageLoading: false,
//token header
// tokenHeader: {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)},
//记录是新建还是修改
opration: '',
oprationRecord: {},
filterName: '', //全表搜索的数据
cachData: [],
rules: {},
selectObj: {},
primaryKey: [],
noModifyColumn: [],
gridOptions: {
size: 'mini',
border: true, // 边框显示
resizable: true, // 是否可变化宽度
showHeaderOverflow: true, // 头部是否显示省略
showOverflow: true, // 是否显示省略
highlightHoverRow: true, // 高亮
highlightCurrentRow: true, // 高亮行
highlightCurrentColumn: true, // 高亮列
toolbar: {
// custom: this.IsShowTools,
slots: {
buttons: 'toolbarButtons',
},
}, // 工具栏
data: [], // 表数据
keepSource: false,
// pagerConfig: {
// autoHidden: false, // 行数少时是否关闭分页
// total: 5,
// currentPage: 1,
// pageSize: 3,
// align: 'right',
// pageSizes: [3, 5, 10, 20, 30],
// perfect: true,
// },
tooltipConfig: {
theme: 'light',
enterable: true,
},
},
condition: {},
filterValue: {},
selectRowData: [],
scrollLoad: false,
sortConfig: { remote: false },
loadCount: 0,
loadingDataSource: [],
currentRow: undefined,
// pagerConfig: {
// currentPage: 1,
// pageSize: 50,
// total: 3,
// },
machineData: [],
rowSelectType: '',
capabilityData: [],
fullScreen: false,
saveloading: false,
isneedShowNull: true,
needShowToast:false,
searchField:{},
}
},
created() {
//根据字符长度计算宽度,th字体固定14px
String.prototype.pxWidth = function () {
let font = 'normal 14px Robot'
var canvas =
String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement('canvas')),
context = canvas.getContext('2d')
font && (context.font = font)
var metrics = context.measureText(this.replace(/\s*/g, ''))
let width = parseInt(metrics.width) + 5
return width
}
if (this.allowDrag) {
this.treeDrop()
}
this.$watch('height', () => {
this.tableHeight = this.height - 12
})
if (this.isFirstLoad) {
this.loadAtFirst()
}
if (this.checkBoxFirstDisabled) {
this.checkBoxSlotAble = true
}
//注册鼠标右键方法
window.menusDelete = this.menusDelete
window.menusUpdate = this.menusUpdate
window.menusMoveUp = this.menusMoveUp
window.menusMoveDown = this.menusMoveDown
var _this = this
//监听表格数据
this.$watch('loadingDataSource', () => {
//loadTranlate 为加载国际化方法 并且赋值给columns
if (
JSON.stringify(this.loadingDataSource) != '{}' &&
this.loadingDataSource != null &&
this.loadingDataSource != undefined &&
this.loadingDataSource.length > 0
) {
this.$refs.excelIcon.changeIcon('excel')
this.loadTranlate()
this.$emit('data-source', this.loadingDataSource)
this.tblLinkAge(this.loadingDataSource, this.selectRowData)
}else{
this.$refs.excelIcon.changeIcon('exportDisabled')
}
if (document.getElementsByClassName('vxe-button type--button size--mini is--circle')[0] != undefined) {
document.getElementsByClassName('vxe-button type--button size--mini is--circle')[0].title =
this.$t('Column settings')
document.getElementsByClassName('vxe-checkbox--label')[0].innerText = this.$t('All')
document.getElementsByClassName('btn--confirm')[0].innerText = this.$t('confirm')
document.getElementsByClassName('btn--reset')[0].innerText = this.$t('reset')
}
VXETable.renderer.add('TDButton',{
renderDefault(renderOpts,params,{row,column,columnIndex,$columnIndex}){
let {type} = params
let width = column.width-10
return [
<a-button
type={type}
style={{
width:width+'px',
height:'21px',
padding:'5px',
padding:type==='link'? '0px':'0 15px 0 15px',
}}
onClick={()=>{
debugger
_this.$emit('TDButtonClick',{row ,column,columnIndex,$columnIndex})
}}
>
{row[column.property]}
</a-button>
]
}
})
_this.$nextTick(() => {
if (_this.loadingDataSource != undefined && _this.loadingDataSource.length > 0 && _this.radioConfig.checkMethod != undefined) {
for (var k = 0; k < _this.loadingDataSource.length; k++) {
var disableFlag = _this.radioConfig.checkMethod({ row: _this.loadingDataSource[k] })
if (!disableFlag) {
var tBody = _this.$refs.xGrid.$el.getElementsByClassName('vxe-table--body')
if (tBody[0] != undefined)
tBody[0].getElementsByClassName('vxe-body--row')[k].setAttribute('style', 'background-color:#f3f3f3')
if (tBody[1] != undefined)
tBody[1].getElementsByClassName('vxe-body--row')[k].setAttribute('style', 'background-color:#f3f3f3')
if (tBody[2] != undefined)
tBody[2].getElementsByClassName('vxe-body--row')[k].setAttribute('style', 'background-color:#f3f3f3')
}
}
}
})
})
this.$watch('parentData', () => {
this.savedparentData = this.parentData
this.loadData()
this.isneedShowNull = false
})
this.$watch('editStateData', () => {
if (this.editStateData.opration != undefined) {
postAction(this.editStateData.url, this.editStateData.data).then((res) => {
this.loadData()
})
}
})
this.$watch('bindData', (res) => {
this.capability = res.map((item) => item.capabilityname)
this.capabilityData = JSON.parse(JSON.stringify(this.capability))
// this.$refs.xGrid.loadingDataSource=this.bindData;
})
// this.queryData()
this.$watch('areaNode', () => {
//解析接口需要的参数
this.bindCondition()
//查询数据并赋值绑定
this.queryData()
})
this.$watch('ActionNeed', () => {
//ActionNeed为接口需要的参数对象
//判断当前需要的访问的端 是哪个(OIC,Moduler)
if (this.ActionNeed.urlData.type != undefined && this.ActionNeed.urlData.type.toLowerCase() == 'moduler') {
//Moduler 接口需要url 这里获取
this.baseUrl = this.ActionNeed.urlData.Moduler.baseUrl
//判断当前请求方式
switch (this.ActionNeed.action) {
case 'insert':
postAction(this.baseUrl + '/add', this.ActionNeed.row).then((res) => {
//刷新表格数据方法 res:返回结果 baseUrl :刷新请求的路径 parentData 为接口参数
this.reloadTable(res, this.ActionNeed.baseUrl, this.ActionNeed.parentData)
})
break
//update
case 'update':
putAction(this.baseUrl + '/edit', this.ActionNeed.row).then((res) => {
//刷新表格数据方法 res:返回结果 baseUrl :刷新请求的路径 parentData 为接口参数
this.reloadTable(res, this.ActionNeed.baseUrl, this.ActionNeed.parentData)
})
break
//delete
case 'delete':
putAction(this.baseUrl + '/delete', this.ActionNeed.row).then((res) => {
//刷新表格数据方法 res:返回结果 baseUrl :刷新请求的路径 parentData 为接口参数
this.reloadTable(res, this.ActionNeed.baseUrl, this.ActionNeed.parentData)
})
break
case 'query':
getAction(this.baseUrl + '/list', {
pageNo: this.PageOptions.currentPage,
pageSize: this.PageOptions.pageSize,
}).then((res) => {
this.loadingDataSource = res.result.records
this.loadTranlate()
})
break
}
} else if (this.ActionNeed.urlData.type != undefined && this.ActionNeed.urlData.type.toLowerCase() == 'system') {
//Moduler 接口需要url 这里获取
this.baseUrl = this.ActionNeed.urlData.System.baseUrl
//判断当前请求方式
switch (this.ActionNeed.action) {
case 'insert':
postActionForSystem(this.baseUrl + '/add', this.ActionNeed.row).then((res) => {
//刷新表格数据方法 res:返回结果 baseUrl :刷新请求的路径 parentData 为接口参数
this.reloadTable(res, this.ActionNeed.baseUrl, this.ActionNeed.parentData, this.ActionNeed.urlData)
})
break
//update
case 'update':
putActionForSystem(this.baseUrl + '/edit', this.ActionNeed.row).then((res) => {
//刷新表格数据方法 res:返回结果 baseUrl :刷新请求的路径 parentData 为接口参数
this.reloadTable(res, this.ActionNeed.baseUrl, this.ActionNeed.parentData, this.ActionNeed.urlData)
})
break
//delete
case 'delete':
putActionForSystem(this.baseUrl + '/delete', this.ActionNeed.row).then((res) => {
//刷新表格数据方法 res:返回结果 baseUrl :刷新请求的路径 parentData 为接口参数
this.reloadTable(res, this.ActionNeed.baseUrl, this.ActionNeed.parentData, this.ActionNeed.urlData)
})
break
}
}
})
this.$watch('selectionBox', () => {
this.loadTranlate()
})
if(this.isColumnDrop){
this.columnDrop()
}
this.loadTranlate()
},
beforeDestroy() {
if (this.allowDrag) {
if (this.sortable2) {
this.sortable2.destroy()
}
}
},
methods: {
//特殊处理 表头列标题多选框 全选方法 modify by zx 2022-01-12
headerCheckBoxChange(column, event, isHeader) {
try {
var checkedRow = this.loadingDataSource.filter((item) => item[column.property]),
currentCol = this.myColumns.filter((item) => item.field == column.property)
if (isHeader) {
var mapData = this.loadingDataSource.map((item) => {
return { ...item, [column.property]: event.target.checked }
})
this.loadingDataSource = mapData
this.$set(currentCol[0], 'indeterminate', false)
this.$set(currentCol[0], 'checked', event.target.checked)
} else {
if (checkedRow.length != 0 && checkedRow.length < this.loadingDataSource.length) {
this.$set(currentCol[0], 'indeterminate', true)
} else if (checkedRow.length == this.loadingDataSource.length) {
this.$set(currentCol[0], 'indeterminate', false)
this.$set(currentCol[0], 'checked', true)
} else {
this.$set(currentCol[0], 'indeterminate', false)
this.$set(currentCol[0], 'checked', false)
}
}
} catch (error) {
console.log(error)
}
},
onScroll(param) {
if (this.lazyLoad) {
this.$nextTick(() => {
if (param.isY) {
var el = param.$table.$el.querySelector('.vxe-table--body-wrapper')
var scrollTop = el.scrollTop
var offsetHeight = el.offsetHeight
var scrollHeight = el.scrollHeight
var pageIndex = this.PageOptions.currentPage
var pageSize = this.PageOptions.pageSize
var pageCount = this.PageOptions.pageCount
if (offsetHeight + scrollTop >= scrollHeight && this.isScrollTop) {
// 需要执行的代码
if (pageIndex + 1 > pageCount) {
// this.$message.warning('last page !')
} else {
this.getData(pageIndex + 1, pageSize, true, el.scrollTop)
this.isScrollTop = false
}
// this.getData()
// 调用list 原本的数据请求函数
} else if (scrollTop == 0) {
}
}
})
}
},
treeDrop() {
this.$nextTick(() => {
const xTable = this.$refs.xGrid
this.sortable2 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
handle: '.drag-btn',
onEnd: ({ item, oldIndex }) => {
const options = { children: 'children' }
const targetTrElem = item
const wrapperElem = targetTrElem.parentNode
const prevTrElem = targetTrElem.previousElementSibling
const tableTreeData = this.loadingDataSource
const selfRow = xTable.getRowNode(targetTrElem).item
const selfNode = XEUtils.findTree(tableTreeData, (row) => row === selfRow, options)
if (prevTrElem) {
// 移动到节点
const prevRow = xTable.getRowNode(prevTrElem).item
const prevNode = XEUtils.findTree(tableTreeData, (row) => row === prevRow, options)
if (XEUtils.findTree(selfRow[options.children], (row) => prevRow === row, options)) {
// 错误的移动
const oldTrElem = wrapperElem.children[oldIndex]
wrapperElem.insertBefore(targetTrElem, oldTrElem)
return
this.$XModal.message({ content: '不允许自己给自己拖动！', status: 'error' })
}
const currRow = selfNode.items.splice(selfNode.index, 1)[0]
if (xTable.isTreeExpandByRow(prevRow)) {
// 移动到当前的子节点
prevRow[options.children].splice(0, 0, currRow)
} else {
// 移动到相邻节点
prevNode.items.splice(prevNode.index + (selfNode.index < prevNode.index ? 0 : 1), 0, currRow)
}
} else {
// 移动到第一行
const currRow = selfNode.items.splice(selfNode.index, 1)[0]
tableTreeData.unshift(currRow)
}
// 如果变动了树层级，需要刷新数据
this.loadingDataSource = [...tableTreeData]
},
})
})
},
routeClick(column, row, url = undefined) {
if (url == undefined || (url != undefined && url.length == 0)) {
this.$message.error(this.$t('Please enter url!!'))
return
}
this.$router.push(url)
},
showMachineCopyModal() {
this.$emit('showMachineCopyModal')
},
copy() {
this.$emit('copy')
},
hideButtonClick() {
this.$emit('hideButtonClick')
},
showOperCopyModal() {
this.$emit('showOperCopyModal')
},
modalClick(column, row, url = undefined, config = undefined) {
if (url == undefined) {
this.$message.error(this.$t('Please enter url!'))
return
}
if (url.indexOf('/') == 0) {
this.$message.error(this.$t('Please remove the first "/" symbol'))
return
}
if (config != undefined) {
this.$refs.customModal.okText = config.okText == undefined ? 'ok' : config.okText
this.$refs.customModal.cancelText = config.cancelText == undefined ? 'cancel' : config.cancelText
this.layColsCount = config.layColsCount == undefined ? 3 : config.layColsCount
this.$refs.customModal.modalTitle = config.modalTitle == undefined ? 'Basic Modal' : config.modalTitle
this.$refs.customModal.delaySeconds = config.delaySeconds == undefined ? 0 : config.delaySeconds
this.$refs.customModal.isNeedCancel = config.isNeedCancel == undefined ? true : config.isNeedCancel
this.$refs.customModal.isNeedOk = config.isNeedOk == undefined ? true : config.isNeedOk
this.heightColsCount = config.heightColsCount == undefined ? 70 : config.heightColsCount
}
if (url == 'system/CHistoryTable.vue') {
this.$refs.customModal.isNeedOk = false
}
this.$refs.customModal.visible = true
let columns = this.columns
this.$refs.customModal.modalData = { row, columns, tableName: this.tableName }
this.$nextTick(() => {
this.customUrl = url
})
},
onResize(x, y, width, height) {
this.tableHeight = height
},
save() {
//调用此方法需要业务页面 使用 this.$refs.xGrid.saveloading = false 改变状态
this.saveloading = true
this.$emit('saveMapping')
this.checkBoxSlotAble = true
},
// 过滤出来被授权的数据
selectAuthorizeData() {
this.$refs.customModal.visible = true
this.layColsCount = 0.5
this.heightColsCount = 12
this.$refs.customModal.modalTitle = 'Filter Rule'
this.$refs.customModal.modalData = { tableName: this.tableName }
this.$nextTick(() => {
this.customUrl = 'modeler/components/DataFilter.vue'
})
},
customModalOk(value, refs) {
if (value.tableName == 'PushFunctionConfig') {
return
}
if (value.key == undefined || value.tableName == undefined) {
this.$message.warning('No Select Data')
return
}
//缓存获取到的ruleuuid
this.dataRuleId = value.key
// this.lockDisabled = true
this.showNoUnlock = false
this.filterPerDisabled = true
var param = {}
param.tableName = value.tableName
param.dataRuleId = value.key
param.dataUuids = this.loadingDataSource.map((item) => item['uuid'])
//这个是公共控件,需要在DataTable中进行过滤查询
postAction('/fabmodeler/datapermission/queryDataPermissionByRule', param).then((res) => {
if (res.success) {
//处理只匹配上的数据
this.loadingDataSource = res.result
this.$message.success(res.message)
} else {
this.$message.warning(res.message)
}
})
},
calBackModal(value, refs) {
this.$emit('calBackModal', value, refs)
},
//清空多选 单选选中数据的方法
clearSelectedRow() {
try {
//清空多选 单选选中数据
this.$refs.xGrid.clearCheckboxRow()
this.$refs.xGrid.clearRadioRow()
} catch (error) {
this.$message.error(this.$t('table error'))
}
},
actionCallBack(column, row, method) {
this.$emit('actionCallBack', column, row, method)
},
//Transfer Modal完全关闭后的回调
cancel(e) {
this.$nextTick(() => {
this.capability = this.capabilityData
})
},
delConfirm(row) {
this.$emit('delConfirm', row)
},
lockConfirm(row) {
this.$emit('lockConfirm', row)
},
cellMenu(data) {
this.$emit('cell-menu', data)
},
compareData(row, column, compareObj) {
var result = false
var checkUndefind = this.myColumns.filter((colItem) => colItem.field == column.property)
if (checkUndefind.length > 0 && checkUndefind[0].compareObject != undefined) {
checkUndefind = checkUndefind[0].compareObject
if (typeof row[checkUndefind] == 'string') {
compareObj = compareObj.endsWith('ms') ? compareObj.substr(0, compareObj.indexOf('ms')) : compareObj
result = parseInt(compareObj) > row[checkUndefind]
}
}
return result
},
ComputationTime(row, column, Units = undefined) {
return this.difference(
row[this.myColumns.filter((colItem) => colItem.field == column.property)[0].computedParam],
this.getCurrentTime(),
Units
)
},
convertTime(date) {
var year = date.substring(0, 4)
date = date.substring(4)
var month = date.substring(0, 2)
date = date.substring(2)
var day = date.substring(0, 2)
date = date.substring(2)
var hour = date.substring(0, 2)
date = date.substring(2)
var minute = date.substring(0, 2)
date = date.substring(2)
var seconds = date.substring(0, 2)
date = date.substring(2)
var ms = date.substring(0, 3)
date = date.substring(3)
var result = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + seconds + ':' + ms
return result
},
difference(beginTime, endTime, Units = undefined) {
if (beginTime.indexOf('-') < 0 && beginTime.indexOf('/') < 0) {
beginTime = this.convertTime(beginTime)
}
if (endTime.indexOf('-') < 0 && endTime.indexOf('/') < 0) {
endTime = this.convertTime(endTime)
}
var dateBegin = new Date(beginTime)
var dateEnd = new Date(endTime)
var dateDiff = dateEnd.getTime() - dateBegin.getTime() //时间差的毫秒数
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出相差天数
var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
//计算相差秒数
var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000)
// return (dayDiff * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60) * 1000 + leave3 + 'ms'
if (Units != undefined && Units.toLowerCase() == 'ms')
return (dayDiff * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60) * 1000 + leave3 + 'ms'
else if (Units != undefined && Units.toLowerCase() == 'hour') return dayDiff * 24 + hours + '小时'
else return dayDiff + '天' + hours + '小时'
// return dayDiff + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'
},
getCurrentTime() {
//获取当前时间并打印
let yy = new Date().getFullYear()
let mm = new Date().getMonth() + 1
let dd = new Date().getDate()
let hh = new Date().getHours()
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
let ms = new Date().getMilliseconds()
return yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss + ':' + ms
},
checkSlot(row, column) {
var result = true
var computedData = this.myColumns.filter((colItem) => colItem.field == column.property)
if (computedData != undefined && computedData[0] != undefined && computedData[0].computedField != undefined) {
computedData = computedData[0].computedField
computedData.forEach((cItem) => {
if (cItem.condition != undefined && cItem.condition.includes(row[cItem.field].toString())) {
result = false
}
})
}
return result
},
widthcroll() {
// if (
// document.getElementsByClassName('vxe-table--body-wrapper body--wrapper')[0].offsetWidth <=
// document.getElementsByClassName('vxe-table--body')[0].offsetWidth
// ) {
// console.log(document.getElementsByClassName('vxe-table--header-wrapper body--wrapper')[0])
// // document.getElementsByClassName('vxe-table--body-wrapper body--wrapper')[0].style.overflow = 'hidden'
// }
},
guid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()
},
handleMenuClick(e) {
console.log('click', e)
},
//初始化数据加载
loadAtFirst() {
if (this.cellEdit) {
this.editConfig = { trigger: 'click', mode: 'cell' }
}
if (this.urlData != undefined) {
this.bindCondition()
switch (this.urlData.type.toLowerCase()) {
case 'oic':
sendPutAction(this.oicParam.url, this.oicParam.queryid, this.oicParam.version, this.oicParam.bindv).then(
(res) => {
this.loadingDataSource = res
this.loadTranlate()
}
)
break
case 'moduler':
break
default:
break
}
}
},
//国际化方法(表头)
loadTranlate() {
var lastCols = []
//判断展示 单选按钮列还是多选按钮
if (this.selectionBox == undefined || this.selectionBox.length == 0) {
// lastCols.push({ type: 'seq', width: 30 })
} else {
switch (this.selectionBox.toLowerCase()) {
case 'checkbox': {
lastCols.push({ type: 'checkbox', width: 31 }, { type: 'seq', width: 31, title: 'No.', field: 'seq' })
this.rowSelectType = 'checkbox'
break
}
case 'radio': {
lastCols.push(
{ type: 'radio', width: 31, fixed: 'left' },
{ type: 'seq', width: 40, title: 'No.', field: 'seq' }
)
this.rowSelectType = 'radio'
break
}
default:
lastCols.push({ type: 'seq', width: 40, title: 'No.', field: 'seq' })
break
}
}
var language = undefined
//读取本地存储的国家化数据 en指英文 ko为韩文 zh为中文
// if (JSON.parse(localStorage.getItem('lang')) != undefined) {
// language = JSON.parse(localStorage.getItem('lang'))[
// localStorage.getItem('currentLanguage') == null ? 'en' : localStorage.getItem('currentLanguage').substr(0, 2)
// ]
// }
//兼容OIC ， Moduler 判断是否需要解析loadingDataSource
var computingWidth = true
this.myColumns = []
if (this.columns != undefined && JSON.stringify(this.columns) != '{}') {
lastCols = JSON.parse(JSON.stringify(this.columns))
this.columns.forEach((item) => {
if (!['checkbox', 'radio', 'seq'].includes(item.type)) {
if (item.slots == undefined) {
item.slots = {}
}
if (this.isHeaderFilter) {
this.$set(item.slots, 'filter', 'filters')
}
}
})
} else if (this.myColumns != undefined && this.myColumns.length == 0) {
//防止篡改原数据
var editField = undefined
if (this.loadingDataSource && this.loadingDataSource != undefined && this.loadingDataSource.length > 0) {
var tempData = JSON.parse(JSON.stringify(this.loadingDataSource))
if (this.urlData != undefined && this.urlData.editField != undefined) {
editField = this.urlData.editField
} else if (
this.ActionNeed != undefined &&
this.ActionNeed.urlData != undefined &&
this.ActionNeed.urlData.editField != undefined
) {
editField = this.ActionNeed.urlData.editField
}
var tempCols = Object.keys(tempData[0]),
slotsMsg = { default: 'contextFilter' }
if (this.isHeaderFilter) {
this.$set(slotsMsg, 'filter', 'filters')
}
tempCols.forEach((colItem) => {
lastCols.push({
field: colItem,
title: this.$t(colItem),
slots: slotsMsg,
sortable: true,
editRender: {
name: 'input',
attrs: {
type: 'text',
disabled:
editField == undefined
? false
: editField.filter((item) => item == colItem)[0] == undefined
? true
: false,
},
},
//默认宽度 后期调整自适应
width: this.$t(colItem) == undefined ? 150 : this.needCalc ? this.$t(colItem).pxWidth() : 150,
})
})
computingWidth = false
//获取key值
}
//attributeParameter 列属性参数
if (this.attributeParameter != undefined && this.attributeParameter.length != 0) {
this.attributeParameter.forEach((item) => {
lastCols.filter((key) => {
if (item.field == key.field) {
key.fixed = item.fixed
}
})
})
}
}
if (this.myColumns != undefined && this.myColumns.length == 0) {
//标识列与多选框列宽度设置
lastCols.forEach((item) => {
let title =
item.title == undefined ? (item.field == undefined ? '' : this.$t(item.field)) : this.$t(item.title)
if (item['type'] == 'checkbox' || item['type'] == 'radio') {
item.width = 31
item.fixed = 'left'
this.rowSelectType = item['type']
} else if (item['type'] == 'seq') {
item.width = 40
if(this.isfixed){
item.fixed = 'left'
}
} else {
if (item.width != undefined) {
if (item.width == 'calc') {
item.width = this.$t(title).pxWidth()
} else if (typeof item.width == 'string') {
item.width = parseInt(item.width) + 30
} else if (typeof item.width == 'number' && computingWidth) {
item.width = item.width + 30
} else {
item.width = item.width
}
} else if (this.needCalc) {
item.width = this.$t(title).pxWidth()
}
}
item.title = title
if (item.slots != undefined) {
// item.slots = JSON.parse(JSON.stringify(item.slots).replace(/header/g, 'default'))
// item.slots = JSON.parse(JSON.stringify(item.slots).replace(/filter/g, 'contextFilter'))
}
//根据headerCptData 绑定表头插槽
if (this.headerCptData.length != 0 && this.headerCptData.includes(item.field)) {
item.slots = { header: 'headerComponent' }
}
if (item.slots != undefined && item.slots.default != 'action') {
item.slots = item.slots.length == 0 ? undefined : item.slots
if (item.slots != undefined && Object.values(item.slots).includes('filter')) {
Object.assign(item.slots, { filter: 'filters' })
}
Object.assign(item.slots, { header: 'headerText' })
item.filters = [{ data: '' }]
}
// if (item.field == 'action') {
// if (item.fixed == false) {
// item.fixed = undefined
// } else {
// item.fixed = 'right'
// }
// }
})
//表头数据绑定
if (!this.needSeq) {
lastCols = lastCols.filter((item) => {
return item['type'] != 'seq'
})
}
this.myColumns = lastCols
if (this.allowDrag && this.myColumns[0].type != 'allowDrag') {
this.myColumns.unshift({
align: 'left',
type: 'allowDrag',
width: 60,
slots: {
default: () => {
return [
<span class="drag-btn">
<i class="vxe-icon--menu"></i>
</span>,
]
},
header: () => {
return [
<vxe-tooltip content="按住后可以上下拖动排序！" enterable>
<i class="vxe-icon--question"></i>
</vxe-tooltip>,
]
},
},
})
}
this.$nextTick(() => {
// 手动将表格和工具栏进行关联
this.$refs.xGrid.connect(this.$refs.xToolbar1)
})
}
},
//暂时废弃 但是不要删除
updateVersion() {
if (this.currentRow.length == 0) {
//友好提示
this.$warning({
title: this.$t('Warning'),
content: this.$t('Please check the data that needs to be upgraded!'),
onCancel() {
return
},
})
// } else if (this.selectRowData.filter((item) => item.checkstate == 'CheckOut').length != 0) {
} else if (this.currentRow.checkstate == 'CheckOut') {
//友好提示
this.$warning({
title: this.$t('Warning'),
content: this.$t('No upgrade version!'),
onCancel() {
return
},
})
} else {
this.$emit('editState', {
url: this.urlData.Moduler.baseUrl + '/editVersion',
data: this.currentRow,
opration: 'edit_start',
})
}
},
showModalForAccess() {
if (!this.$refs.xGrid.getCheckboxRecords().length) {
this.$message.warning('No data selected')
return
}
this.layColsCount = 1
this.heightColsCount = 50
this.$refs.customModal.visible = true
this.$refs.customModal.modalTitle = 'Data Rule'
let uuid = []
uuid = this.$refs.xGrid.getCheckboxRecords().map((item) => item.uuid)
this.$refs.customModal.modalData = { tableName: this.tableName, uuid }
this.$nextTick(() => {
this.customUrl = 'modeler/components/DataAccess.vue'
})
// this.visibleForAccess = true
},
unlockData() {
// 判断有没有选中的数据,没有就直接返回
if (!this.$refs.xGrid.getCheckboxRecords().length || this.dataRuleId == undefined || this.dataRuleId == '') {
this.$message.warning('No data selected')
return
}
//提示是否删除
this.$confirm({
title: 'Are you sure to delete ' + this.$refs.xGrid.getCheckboxRecords().length + ' count of data',
okType: 'danger',
onOk: () => {
//获取选中的数据
let params = {}
params.dataUuids = this.$refs.xGrid.getCheckboxRecords().map((item) => item['uuid'])
params.dataRuleId = this.dataRuleId
params.tablename = this.tableName
//解锁数据
// this.$emit('unAuthorizeData', DelDataRadio)
postAction('/fabmodeler/datapermission/removeDataPermissionByRule', params).then((res) => {
if (res.success) {
//处理只匹配上的数据
this.loadingDataSource = res.result
this.$message.success(res.message)
this.loadData()
} else {
this.$message.warning(res.message)
}
})
},
})
},
showModal() {
this.visible = true
},
rowData(data) {
this.machineData = data
},
//tableTransfer点击Ok事件
transferModalOk(e) {
this.$emit('tableTransferData')
this.tableTransferVisible = false
},
//穿梭框点击Ok事件
handleOk(e) {
this.visible = false
const data = this.machineData.map((item) => {
return {
factoryname: item.factoryname,
capabilityname: item.capabilityname,
machinename: this.machinename,
priority: item.priority,
capabilityusage: item.capabilityusage,
}
})
this.capabilityData = data.map((item) => item.capabilityname)
//接口参数序列化
var str = JSON.stringify(data)
let param = { machincapabilitys: str, factoryname: this.factoryname, machinename: this.machinename }
//更新穿梭框数据
postAction('/fabmodeler/machinecapability/addBatch', param).then((res) => {
//子给父传参
this.$emit('newData', data)
})
},
transferShowModal() {
this.tableTransferVisible = true
this.$emit('transferShowModal')
},
//刷新数据
reloadTable(data, url, parentData, urlData = undefined) {
//判断是否请求成功
if (data.code == '200') {
this.$emit('whetherToDisable', false)
//友好提示
this.$message.success(`${this.$t(data.result)}`)
//刷新表格数据源
this.queryData(parentData, url, null, urlData)
} else {
//错误提示
if (data.message === 'The record already exists in the database') this.$emit('whetherToDisable', true)
this.$message.error(data.result == undefined ? `${this.$t(data.message)}` : data.result)
}
//清除选中行数据
this.clearSelectedRow()
},
//添加按钮点击事件
addRowClickEvent() {
// this.$store.state.app.infoState = true
//通过rowClick响应infoComponent 提供参数
this.rowClick({ row: { state: 'insert', baseUrl: this.baseUrl, tableName: this.tableName } })
},
addRowEvent(row) {
//开启动画
this.loading = true
postAction(this.baseUrl + '/add', row)
.then((res) => {
if (res.success) {
this.$message.success(res.result)
//this.$refs.xGrid.insert(row)
this.loadData()
} else {
this.$message.warning(res.result)
}
})
.finally(() => {
//关闭动画
this.loading = false
})
},
editRowEvent(row) {
this.loading = true
putAction(this.baseUrl + '/edit', row)
.then((res) => {
if (res.success) {
// Object.assign(this.cacheRecord, row)
this.loadData()
this.$message.success(res.result)
} else {
this.$message.warning(res.result)
}
})
.finally(() => {
//关闭动画
this.loading = false
})
},
removeRowEvent(row) {
var that = this
//开启动画
that.loading = true
putAction(that.baseUrl + '/delete', row)
.then((res) => {
if (res.success) {
that.loadData()
// that.$refs.xGrid.remove(row)
that.$message.success(res.result)
} else {
this.$message.warning(res.result)
}
})
.finally(() => {
//关闭动画
that.loading = false
})
},
//统一获取OIC,Moduler两方接口需要的参数
bindCondition() {
if ((this.baseUrl == undefined || this.baseUrl.length == 0) && this.urlData.type != undefined) {
//获取每一方的接口需要的参数
switch (this.urlData.type.toLowerCase()) {
case 'oic':
this.oicParam = this.urlData.OIC
break
case 'moduler':
this.baseUrl = this.urlData.Moduler.baseUrl
break
default:
break
}
}
},
clear() {
var obj = this
if (this.selectionBox != undefined && this.selectionBox.toLowerCase() === 'radio') {
console.log(this.selectionBox)
//判断有没有选中的数据,没有就直接返回
if (!this.$refs.xGrid.getRadioRecord().length == '{}') {
this.$message.warning('No data selected')
return
}
if (this.isRadioDelete) {
//获取选中的数据
var DelDataRadio = this.$refs.xGrid.getRadioRecord()
console.log(this.isRadioDelete)
//提示是否删除
this.$confirm({
title: 'Are you sure to clear some columns in selected rows',
okType: 'danger',
onOk: () => {
obj.$emit('clearData', DelDataRadio)
// this.loadingDataSource = this.loadingDataSource.filter(
// (item) => this.$refs.xGrid.getRadioRecord()._XID.indexOf(item._XID) < 0
// )
//清除选中行数据
obj.clearSelectedRow()
},
})
}
} else {
//判断有没有选中的数据,没有就直接返回
if (!this.$refs.xGrid.getCheckboxRecords().length) {
this.$message.warning('No data selected')
return
}
if (this.isPageDelete) {
//提示是否删除
this.$confirm({
title:
'Are you sure to clear some columns in selected ' +
obj.$refs.xGrid.getCheckboxRecords().length +
' items?',
okType: 'danger',
onOk: () => {
// this.loadingDataSource = this.loadingDataSource.filter(
// (item) =>
// this.$refs.xGrid
// .getCheckboxRecords()
// .map((a) => a._XID)
// .indexOf(item._XID) < 0
// )
obj.$emit('clearData', this.$refs.xGrid.getCheckboxRecords())
//清除选中行数据
obj.clearSelectedRow()
},
})
} else {
//获取全部选中的数据
var DelData = this.$refs.xGrid.getCheckboxRecords()
if (DelData && DelData.length > 0) {
if (DelData[0].isParent && DelData[0].isParent == true) {
DelData.shift()
}
}
//防止接口参数丢失
this.bindCondition()
//多选下拉的数据格式为数组 而后端接收为string 这里转换一下
this.columns.forEach((itemCol) => {
DelData.forEach((itemDel) => {
if (obj.baseUrl == '/fabmodeler/posqueuetime') {
itemDel.conditionid =
itemDel.factoryname +
'_' +
itemDel.productspecname +
'_' +
itemDel.processflowname +
'_' +
itemDel.processflowversion +
'_' +
itemDel.processoperationname
}
if (itemCol.type == 'multipleSelect' && typeof itemDel[itemCol.field] == 'object') {
itemDel[itemCol.field] = itemDel[itemCol.field] == null ? '' : itemDel[itemCol.field].toString()
}
})
})
//提示是否删除
this.$confirm({
title: 'Are you sure to delete these ' + obj.$refs.xGrid.getCheckboxRecords().length + ' items?',
okType: 'danger',
onOk() {
/*删除文件*/
obj.$emit('clearData', DelData)
// putAction(obj.baseUrl + '/deleteBatch', DelData).then((res) => {
// //删除事件回调
// obj.$emit('deleteRevoke', DelData)
// //提示成功
// obj.$message.success(res.result)
// //刷新表格数据
// obj.loadData()
// //清楚选中行数据
// obj.clearSelectedRow()
// })
},
})
}
}
},
batchDel() {
var obj = this
obj.deleteLoading = true
if (this.selectionBox != undefined && this.selectionBox.toLowerCase() === 'radio') {
//判断有没有选中的数据,没有就直接返回
if (
this.$refs.xGrid.getRadioRecord() == undefined ||
!this.$refs.xGrid.getRadioRecord().length == '{}' ||
this.$refs.xGrid.getRadioRecord().length == 0
) {
this.$message.warning('No data selected')
obj.deleteLoading = false
return
}
if (this.isRadioDelete) {
//获取选中的数据
var DelDataRadio = this.$refs.xGrid.getRadioRecord()
//提示是否删除
this.$confirm({
title: 'Are you sure to delete ',
okType: 'danger',
onOk: () => {
obj.$emit('removeData', DelDataRadio)
this.$nextTick(() => {
if (!this.whetherDelete) {
obj.deleteLoading = false
return
} else {
this.loadingDataSource = this.loadingDataSource.filter(
(item) => this.$refs.xGrid.getRadioRecord()._XID.indexOf(item._XID) < 0
)
//清除选中行数据
obj.clearSelectedRow()
obj.deleteLoading = false
}
})
},
onCancel: () => {
obj.clearSelectedRow()
obj.deleteLoading = false
},
})
}
} else {
//判断有没有选中的数据,没有就直接返回
if (!this.$refs.xGrid.getCheckboxRecords().length) {
this.$message.warning('No data selected')
obj.deleteLoading = false
return
}
if (this.isPageDelete) {
//提示是否删除
this.$confirm({
title: 'Are you sure to delete these ' + obj.$refs.xGrid.getCheckboxRecords().length + ' items?',
okType: 'danger',
onOk: () => {
this.loadingDataSource = this.loadingDataSource.filter(
(item) =>
this.$refs.xGrid
.getCheckboxRecords()
.map((a) => a._XID)
.indexOf(item._XID) < 0
)
obj.$emit('deleteRevoke', this.$refs.xGrid.getCheckboxRecords())
//清除选中行数据
obj.clearSelectedRow()
obj.deleteLoading = false
},
})
} else {
//获取全部选中的数据
var DelData = this.$refs.xGrid.getCheckboxRecords()
if (DelData && DelData.length > 0) {
if (DelData[0].isParent && DelData[0].isParent == true) {
DelData.shift()
}
}
//防止接口参数丢失
this.bindCondition()
//多选下拉的数据格式为数组 而后端接收为string 这里转换一下
this.columns.forEach((itemCol) => {
DelData.forEach((itemDel) => {
if (obj.baseUrl == '/fabmodeler/posqueuetime') {
itemDel.conditionid =
itemDel.factoryname +
'_' +
itemDel.productspecname +
'_' +
itemDel.processflowname +
'_' +
itemDel.processflowversion +
'_' +
itemDel.processoperationname
}
if (itemCol.type == 'multipleSelect' && typeof itemDel[itemCol.field] == 'object') {
itemDel[itemCol.field] = itemDel[itemCol.field] == null ? '' : itemDel[itemCol.field].toString()
}
})
})
//提示是否删除
this.$confirm({
title: 'Are you sure to delete these ' + obj.$refs.xGrid.getCheckboxRecords().length + ' items?',
okType: 'danger',
onOk() {
if (obj.tableName == 'Action List') {
/*删除文件*/
obj.$emit('revokeBatchDel', DelData)
putAction('/alarm/alarmAction/deleteBatch', DelData).then((res) => {
//删除事件回调
obj.$emit('deleteRevoke', DelData)
//提示成功
obj.$message.success(res.result)
//刷新表格数据
obj.loadData()
//清楚选中行数据
obj.clearSelectedRow()
obj.deleteLoading = false
})
} else {
/*删除文件*/
obj.$emit('revokeBatchDel', DelData)
putAction(obj.baseUrl + '/deleteBatch', DelData).then((res) => {
//删除事件回调
obj.$emit('deleteRevoke', DelData)
//提示成功
obj.$message.success(res.result)
//刷新表格数据
obj.loadData()
//清楚选中行数据
obj.clearSelectedRow()
obj.deleteLoading = false
})
}
},
})
}
}
},
saveRowEvent(row) {
this.$refs.xGrid.clearActived()
//开启动画
this.loading = true
if (this.opration === 'insert') {
postAction(this.baseUrl + '/add', row)
.then((res) => {
if (res.success) {
this.$message.success(res.result)
this.$refs.xGrid.insert(row)
} else {
this.$message.warning(res.result)
}
})
.finally(() => {
//关闭动画
this.loading = false
})
} else if (this.opration === 'update') {
putAction(this.baseUrl + '/edit', row)
.then((res) => {
if (res.success) {
// Object.assign(this.cacheRecord, row)
//this.loadData()
this.$message.success(res.result)
} else {
this.$message.warning(res.result)
}
})
.finally(() => {
//关闭动画
this.loading = false
})
}
this.opration = ''
this.oprationRecord = {}
},
cancelRowEvent(row) {
this.$refs.xGrid.clearActived()
this.$refs.xGrid.revertData(row)
},
handleChange(value) {
this.selectAuthorizeObj = value
},
handleBlur() {
console.log('blur')
},
handleFocus() {
console.log('focus')
},
lock(){
this.$emit('lock')
},
mouseenter(){
this.needShowToast = false;
},
/* 导入Excel */
handleImportExcel(info) {
if(!this.needImportExcelLoadData && this.needShowToast==false){
// this.$message.warning("Please wait for a while before uploading");
const hide = this.$message.loading('Please wait for a while before uploading', 0);
this.needShowToast = true;
}
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList)
}
if (info.file.status === 'done') {
if (info.file.response.success) {
// this.$message.success(`${info.file.name} 文件上传成功`);
if (info.file.response.code === 201) {
let {
message,
result: { msg, fileUrl, fileName },
} = info.file.response
let href = window._CONFIG['MODELER'] + fileUrl
this.$warning({
title: message,
content: (
<div>
<span>{msg}</span>
<br />
<span>
具体详情请{' '}
<a href={href} target="_blank" download={fileName}>
点击下载
</a>{' '}
</span>
</div>
),
})
} else {
this.$message.destroy()
this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
}
if(this.needImportExcelLoadData){
this.loadData()
}
} else {
this.$message.destroy()
this.$message.error(`${info.file.name} ${info.file.response.message} `)
}
} else if (info.file.status === 'error') {
this.$message.destroy()
this.$message.error(`Failed to upload files: ${info.file.msg} `)
}
},
/*导出Excel*/
handleExportXls() {
var exportUrl = this.baseUrl + '/exportXls'
var split = this.baseUrl.split('/')
var fileName = split[split.length - 1]
fileName = fileName + "_" + this.$moment(new Date()).format('YYYYMMDDHHmm')
// 用该属性过滤导出数据
downFile(exportUrl, this.condition.exportInfo).then((data) => {
if (!data) {
this.$message.warning('Failed to upload files.')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
} else {
let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) //下载完成移除元素
window.URL.revokeObjectURL(url) //释放掉blob对象
}
})
},
//开关
onChange(checked) {
this.$emit('onChange', checked)
},
onFinish(){
this.$emit('onFinish')
},
tableHandleChange({ row, column, columnIndex }) {
this.$emit('tableHandleChange', { row, column, columnIndex })
},
showHistory(){
this.$emit('showHistory')
},
customizedButtonClick(){
this.$emit('customizedButtonClick')
},
exportDisabled(){
if(this.loadingDataSource == null || this.loadingDataSource == undefined || this.loadingDataSource.length==0){
return true
}
return false
},
rgbTohexadecimal(rgb) {
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
//转换为十六进制方法
function colorHex(string) {
if (/^(rgb|RGB)/.test(string)) {
var aColor = string.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
var strHex = '#'
for (var i = 0; i < aColor.length; i++) {
var hex = Number(aColor[i]).toString(16)
if (hex === '0') {
hex += hex
}
strHex += hex
}
if (strHex.length !== 7) {
strHex = string
}
return strHex
} else if (reg.test(string)) {
var aNum = string.replace(/#/, '').split('')
if (aNum.length === 6) {
return string
} else if (aNum.length === 3) {
var numHex = '#'
for (var i = 0; i < aNum.length; i += 1) {
numHex += aNum[i] + aNum[i]
}
return numHex
}
} else {
return string
}
}
return colorHex(rgb)
},
changeRowColor(row) {
try {
var obj = { '#ea7a7a': '#dc143c', '#a7c8ff': '#4169e1', '#dc143c': '#ea7a7a', '#4169e1': '#a7c8ff' }
var currentRowDom = document.querySelectorAll(`[rowid=${row._XID}]`)
if (currentRowDom[0].style.backgroundColor.indexOf('rgb' > -1)) {
var color = this.rgbTohexadecimal(currentRowDom[0].style.backgroundColor),
returnDom = document.querySelectorAll('#clickcolor')
if (returnDom.length != 0) {
returnDom.forEach((item) => {
if (item.getAttribute('rowid') != row._XID) {
item.id = ''
var tempColor = this.rgbTohexadecimal(item.style.backgroundColor)
item.style.backgroundColor = obj[tempColor] == undefined ? item.style.backgroundColor : obj[tempColor]
}
})
}
if (currentRowDom[1] != undefined) {
var checkboxDom = currentRowDom[1].children[0],
seqDom = currentRowDom[1].children[1]
if (checkboxDom.className.indexOf('checkbox') > -1) {
if (checkboxDom.id.indexOf('clickcolor') == -1) {
checkboxDom.style.backgroundColor = obj[color] == undefined ? color : obj[color]
}
checkboxDom.setAttribute('rowid', row._XID)
checkboxDom.id = 'clickcolor'
}
if (seqDom.className.indexOf('seq') > -1) {
if (seqDom.id.indexOf('clickcolor') == -1) {
seqDom.style.backgroundColor = obj[color] == undefined ? color : obj[color]
}
seqDom.setAttribute('rowid', row._XID)
seqDom.id = 'clickcolor'
}
}
if (currentRowDom[0].id != 'clickcolor') {
currentRowDom[0].style.backgroundColor = obj[color] == undefined ? color : obj[color]
}
currentRowDom[0].id = 'clickcolor'
}
} catch (error) {}
},
rowDbClick({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }) {
this.$emit('rowDbClick', {
row: row,
rowIndex: rowIndex,
column: column,
columnIndex: columnIndex
})
},
rowClick({ row, $event }) {
if (
$event !== undefined &&
($event.currentTarget.getElementsByClassName('vxe-tree--node-btn vxe-icon--caret-right rotate90')[0] !==
undefined ||
$event.currentTarget.getElementsByClassName('vxe-tree--node-btn vxe-icon--caret-right')[0] !== undefined)
) {
return
}
//行点击时 绑定多选框选中状态
if (this.needRowClick && this.rowSelectType == 'checkbox') {
if (!this.isCheckBoxClick) {
if (this.$refs.xGrid.getCheckboxRecords().filter((item) => item._XID == row._XID).length > 0) {
this.$refs.xGrid.setCheckboxRow(row, false)
} else {
this.$refs.xGrid.setCheckboxRow(row, true)
this.menuClick = false
}
this.$emit('checkbox-change', {
records: this.$refs.xGrid.getCheckboxRecords(),
row: row,
data: this.loadingDataSource,
})
}
}
this.isCheckBoxClick = false
this.changeRowColor(row)
this.currentRow = row
var infoObj
var columns = JSON.parse(JSON.stringify(this.myColumns))
columns = columns.filter((item) => item.field != undefined)
columns.forEach((colItem) => {
colItem.rules = this.myColumns.filter((item) => item.field == colItem.field)[0].rules
})
//行点击事件 获取当前行数据 , 判断是否为添加操作
if (row.state != undefined && row.state == 'insert') {
infoObj = {
row: row,
urlData: this.urlData,
primaryKey: this.primaryKey,
columns: columns,
selectObj: this.selectObj,
tableName: this.tableName == undefined ? row.tableName : this.tableName,
noModifyColumn: this.noModifyColumn,
Action: row.state,
}
//子给父传参 这里为添加操作需要的数据
this.$emit('rowClick', infoObj)
} else {
infoObj = {
row: row,
columns: columns,
}
this.$emit('rowClick', infoObj, $event.currentTarget.parentNode.rowIndex + 1)
//非添加操作 则只传递显示需要的行数据
//Furnace Side Monitor Spec页面info组件中的datable添加多选框
if (
row.Header != undefined ||
(this.baseUrl == '/fabmodeler/furnacesidemonitorspec' && row.sidemonitorflag != undefined)
)
setTimeout(() => {
this.$emit('rowClick', infoObj)
}, 0)
}
if (this.radioCancel && this.rowSelectType == 'radio') {
var spans = event.currentTarget.getElementsByTagName('span')
for (var i = 0; i < spans.length - 1; i++) {
if (event.target.className == 'vxe-radio--icon vxe-radio--checked-icon') {
spans[i].className = spans[i].className.replace('checked', 'unchecked')
this.selectRowData = []
} else {
spans[i].className = spans[i].className.replace('unchecked', 'checked')
this.selectRowData = [row]
}
}
if (
this.radioDeselect &&
this.$refs.xGrid.isCheckedByRadioRow(row) &&
$event.target._prevClass != 'vxe-radio--icon vxe-radio--unchecked-icon'
) {
this.$refs.xGrid.clearRadioRow()
this.selectRowData = []
} else {
this.$refs.xGrid.setRadioRow(row)
this.selectRowData = [row]
}
if (this.$refs.xGrid.getRadioRecord() == undefined) {
this.selectRowData = []
}
this.$emit('radioCancelRevoke', this.selectRowData)
}
let that = this
let mergeColumn = []
this.myColumns.filter((item) => {
if (item.visible == undefined || item.visible == true) {
mergeColumn.push(item.field)
}
})
if (this.allRowsMerged) {
mergeColumn.forEach((item, index) => {
let tdArray = that.$refs.xGrid.$el.getElementsByTagName('tr')[1].getElementsByTagName('td')[index]
if (tdArray.rowSpan != undefined && tdArray.rowSpan > 1 && tdArray.textContent == row[item]) {
if (tdArray.getAttribute('style') == 'background:unset' || tdArray.getAttribute('style') == undefined) {
tdArray.setAttribute('style', 'background:#c0ebff')
}
} else if (tdArray.rowSpan != undefined && tdArray.rowSpan > 1) {
tdArray.setAttribute('style', 'background:unset')
}
})
} else if (this.mergeRowParams.length > 0) {
this.mergeRowParams.forEach((item) => {
let index = mergeColumn.indexOf(item)
if (index != -1) {
let tdArray = that.$refs.xGrid.$el.getElementsByTagName('tr')[1].getElementsByTagName('td')[index]
if (tdArray.textContent == row[item]) {
if (tdArray.getAttribute('style') == 'background:unset' || tdArray.getAttribute('style') == undefined) {
tdArray.setAttribute('style', 'background:#c0ebff')
}
} else {
tdArray.setAttribute('style', 'background:unset')
}
}
})
}
// this.$bus.$emit('info_event', infoObj)
},
// /*====================================================================更改表头的默认宽度============================================*/
// /* var tem = JSON.parse(JSON.stringify(this.gridOptions.columns))//ARR
// var column = this.$refs.xGrid.$children[0].collectColumn
// new Promise((resolve, reject) => {
// for (const item of column) {
// var arr = tem.filter(res => item.own.field == res.field)
// arr[0].width = item.renderWidth
// }
// })
// console.log(JSON.stringify(tem))*/
// /*===============================================================================================================================*/
// },
doubleCilck({ row }) {
//this.editRowEvent(row)
},
headerClick() {
// console.log('头部被点击')
},
//打印方法
printEvent() {
this.$refs.xGrid.print({
data: this.$refs.xGrid.loadingDataSource,
})
},
//表头排序方法
sortChange({ column, property, order, sortBy, sortList }) {
var sort = {}
sort[property] = order
this.condition.sort = sort
this.loadData()
},
/*列拖动*/
columnDrop() {
this.$nextTick(() => {
let xGrid = this.$refs.xGrid
this.sortable = Sortable.create(xGrid.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'), {
handle: '.vxe-header--column:not(.col--fixed)',
onEnd: ({ item, newIndex, oldIndex }) => {
let { fullColumn, tableColumn } = xGrid.getTableColumn()
let targetThElem = item
let wrapperElem = targetThElem.parentNode
let newColumn = fullColumn[newIndex]
if (newColumn.fixed) {
// 错误的移动
if (newIndex > oldIndex) {
wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex])
} else {
wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
}
return this.$XModal.message({ message: 'Fixed column not allowed to drag!', status: 'error' })
}
// 转换真实索引
let oldColumnIndex = xGrid.getColumnIndex(tableColumn[oldIndex])
let newColumnIndex = xGrid.getColumnIndex(tableColumn[newIndex])
// 移动到目标列
let currRow = fullColumn.splice(oldColumnIndex, 1)[0]
fullColumn.splice(newColumnIndex, 0, currRow)
xGrid.loadColumn(fullColumn)
},
})
})
},
//全局查找
async onSearch(value) {
if (value == '') {
delete this.condition.globalSearch
} else {
this.condition.globalSearch = value
}
await this.loadData()
//显示高亮
{
for (var index in this.gridOptions.data) {
for (let column of this.columnsArr) {
if (this.gridOptions.data[index][column]) {
this.gridOptions.data[index][column] = this.gridOptions.data[index][column]
.toString()
.replace(
new RegExp(value, 'gi'),
'<span style="color: #000;background-color: #FFFF00;">' + value + '</span>'
)
}
}
}
}
},
/*筛选功能*/
filter(val,title) {
this.searchField[title] = title
//1.判断筛选条件里面是否已经存在filterInfo属性（没有就创建）..
this.condition.filterInfo = this.condition.filterInfo ? this.condition.filterInfo : {}
//2.将input绑定的值加入到condition中
if (!this.filterValue[val]) {
// delete this.condition.filterInfo[val]
// this.condition = JSON.parse(JSON.stringify(this.condition))
// return
this.condition.filterInfo[val] = ''
} else {
if (
typeof this.filterValue[val] == 'object' &&
this.filterValue[val].length != undefined &&
this.filterValue[val].length == 2
) {
this.filterValue[val][0] =
this.filterValue[val][0].subtract(3, 'month').format('YYYY-MM-DD').toString() + ' 00:00:00'
this.filterValue[val][1] =
this.filterValue[val][1].subtract(3, 'month').format('YYYY-MM-DD').toString() + ' 23:59:59'
} else {
this.condition.filterInfo[val] = this.filterValue[val]
}
}
this.loadData().then((res)=>{}).finally((res)=>{
setTimeout(() => {
let dom = document.getElementsByClassName('vxe-cell c--tooltip')
for(let i=0;i<dom.length;i++){
if(this.searchField[dom[i].getElementsByClassName('vxe-cell--title')[0].innerText] != undefined){
dom[i].getElementsByClassName('vxe-filter--btn vxe-icon--search')[0].setAttribute('style','color:red')
}
}
}, 1000)
})
// this.condition = JSON.parse(JSON.stringify(this.condition))
},
filterClear(val,title) {
if (Object.keys(this.condition.filterInfo ? this.condition.filterInfo : {}).length) {
if (this.savedparentData != undefined && this.savedparentData.data != undefined) {
Object.keys(this.savedparentData.data).forEach((item) => {
if (this.condition.filterInfo[val] == this.savedparentData.data[item]) {
delete this.savedparentData.data[item]
}
})
}
delete this.condition.filterInfo[val]
}
delete this.filterValue[val]
this.searchField[title] = undefined
this.filterValue = JSON.parse(JSON.stringify(this.filterValue))
this.condition = JSON.parse(JSON.stringify(this.condition))
this.loadData().then((res)=>{}).finally((res)=>{
setTimeout(() => {
let dom = document.getElementsByClassName('vxe-cell c--tooltip')
for(let i=0;i<dom.length;i++){
if(this.searchField[dom[i].getElementsByClassName('vxe-cell--title')[0].innerText] != undefined){
dom[i].getElementsByClassName('vxe-filter--btn vxe-icon--search')[0].setAttribute('style','color:red')
}
}
}, 1000)
})
},
//获取当前登录用户名，如果获取不到就从本地获取
getLoginUsername() {
if (this.$store.state.user.username !== '') {
this.username = this.$store.state.user.username
} else {
this.username = this.$ls.get(USER_NAME).toString()
}
},
//静态表头搜索
async staticLoadData(time = undefined) {
if (this.loadingDataSource.length != 0) {
var filterDataSource = []
if (this.cacheDataSource.length == 0) {
this.cacheDataSource = JSON.parse(JSON.stringify(this.loadingDataSource))
}
if (this.condition != undefined && this.condition.filterInfo != undefined) {
Object.keys(this.condition.filterInfo).forEach((item) => {
if (filterDataSource.length == 0) {
if (this.condition.filterInfo[item].trimStart().trimEnd().length != 0) {
filterDataSource = this.cacheDataSource.filter(
(filterItem) => filterItem[item].indexOf(this.condition.filterInfo[item]) > -1
)
}
} else {
if (this.condition.filterInfo[item].trimStart().trimEnd().length != 0) {
filterDataSource = filterDataSource.filter(
(filterItem) => filterItem[item].indexOf(this.condition.filterInfo[item]) > -1
)
}
}
})
}
setTimeout(
() => {
if (filterDataSource.length == 0) {
filterDataSource = JSON.parse(JSON.stringify(this.cacheDataSource))
}
this.loadingDataSource = filterDataSource
},
time == undefined ? 1000 : time
)
}
},
async loadData(isClick) {
try {
this.lockDisabled = false
this.showNoUnlock = true
this.filterPerDisabled = false
this.PageOptions.currentPage = 1
this.$refs.xGrid.clearScroll()
if (this.lazyLoad || this.isLazyLoad) {
this.PageOptions.pageSize = this.PageOptions.pageSize == -1 ? 1000 : this.PageOptions.pageSize
}
//防止Moduler 请求接口参数丢失
if (this.baseUrl == undefined || this.baseUrl.length == 0) {
if (this.urlData != undefined && this.urlData.Moduler != undefined) {
this.baseUrl = this.urlData.Moduler.baseUrl
} else if (this.urlData != undefined && this.urlData.Simulator != undefined) {
this.baseUrl = this.urlData.Simulator.baseUrl
}
}
//加载动画打开
this.loading = true
if (JSON.stringify(this.savedparentData) != '{}') {
if (
this.savedparentData.data != undefined &&
this.condition != undefined &&
this.condition.filterInfo != undefined
) {
this.savedparentData.data.filterInfo = {}
Object.keys(this.condition.filterInfo).forEach((item) => {
// 待改造 范围查询
this.$set(this.savedparentData.data.filterInfo, item, this.condition.filterInfo[item])
// if (this.condition.filterInfo[item].length > 1) {
// this.$set(this.savedparentData.data, item+'_begin', this.condition.filterInfo[item][0])
// this.$set(this.savedparentData.data, item+'_end', this.condition.filterInfo[item][1])
// } else {
// this.$set(this.savedparentData.data.filterInfo, item, this.condition.filterInfo[item])
// }
})
}
if (this.savedparentData.url == undefined) {
this.$emit('reloadTable')
} else {
if (isClick == undefined) {
if (this.savedparentData.data != undefined) {
this.$set(this.savedparentData.data, 'pageSize', this.PageOptions.pageSize)
this.$set(t,his.savedparentData.data, 'pageNo', this.PageOptions.currentPage)
}
if (
this.savedparentData.RequestMethod == undefined ||
this.savedparentData.RequestMethod.toLowerCase() == 'post'
) {
postAction(this.savedparentData.url, this.savedparentData.data).then((res) => {
if (res.result != undefined) {
this.loadingDataSource = res.result.records
} else {
this.loadingDataSource = res
}
})
} else {
if (
this.savedparentData.urlData != undefined &&
this.savedparentData.urlData.type != undefined &&
this.savedparentData.urlData.type.toLowerCase() == 'system'
) {
this.refreshDataForSystem(this.savedparentData)
} else {
getAction(this.savedparentData.url, this.savedparentData.data).then((res) => {
if (res != undefined && res.result != undefined && res.result.pages != undefined) {
this.PageOptions.pageCount = res.result.pages
}
if (res != undefined && res.result != undefined && res.result.records != undefined)
this.loadingDataSource = res.result.records
else this.loadingDataSource = []
this.loadTranlate()
})
}
}
} else {
this.$set(this.savedparentData.data, 'pageSize', this.PageOptions.pageSize)
this.$set(this.savedparentData.data, 'pageNo', this.PageOptions.currentPage)
if (this.baseUrl != undefined && this.baseUrl.length != 0)
getAction(this.baseUrl + '/list', this.savedparentData.data).then((res) => {
this.loadingDataSource = res.result.records
})
}
}
setTimeout(() => {
this.loading = false
}, 500)
return
}
//获取条件
let param = { pageNo: this.PageOptions.currentPage, pageSize: this.PageOptions.pageSize }
if (this.areaNode != undefined) {
Object.entries(this.areaNode).forEach((areaItem) => {
this.$set(param, areaItem[0], areaItem[1])
})
}
if (this.condition != undefined && this.condition.filterInfo != undefined) {
Object.keys(this.condition.filterInfo).forEach((item) => {
this.$set(param, item, this.condition.filterInfo[item])
})
}
if (this.baseUrl != undefined && this.baseUrl.length != 0 && this.isSourceSearch)
await getAction(this.baseUrl + '/list', param).then((res) => {
if (res.result != undefined) {
this.loadingDataSource = res.result.records
}
})
this.cachData = JSON.parse(JSON.stringify(this.gridOptions.data))
//解决全局查找时，翻页时不能高亮显示
if (this.condition.globalSearch) {
for (var index in this.gridOptions.data) {
for (let column of this.columnsArr) {
if (this.gridOptions.data[index][column]) {
this.gridOptions.data[index][column] = this.gridOptions.data[index][column]
.toString()
.replace(
new RegExp(this.condition.globalSearch, 'gi'),
'<span style="color: #000;background-color: #FFFF00;">' + this.condition.globalSearch + '</span>'
)
}
}
}
}
if (
this.urlData == undefined || (this.urlData != undefined &&
this.urlData.type != undefined &&
this.urlData.type.toLowerCase() != 'moduler') || !this.isSourceSearch
) {
var filterDataSource = []
if (this.cacheDataSource.length == 0) {
this.cacheDataSource = JSON.parse(JSON.stringify(this.loadingDataSource))
}
if (
this.condition != undefined &&
this.condition.filterInfo != undefined &&
JSON.stringify(this.condition.filterInfo) != '{}'
) {
let _this = this
Object.keys(this.condition.filterInfo).forEach((item) => {
if (filterDataSource.length == 0) {
if (_this.condition.filterInfo[item].trimStart().trimEnd().length != 0) {
filterDataSource = _this.cacheDataSource.filter(
(filterItem) => {
if(filterItem[item] == null){
return false
}else{
return filterItem[item].indexOf(_this.condition.filterInfo[item]) > -1
}
}
)
}
} else {
if (_this.condition.filterInfo[item].trimStart().trimEnd().length != 0) {
filterDataSource = filterDataSource.filter(
(filterItem) => filterItem[item].indexOf(_this.condition.filterInfo[item]) > -1
)
}
}
})
}
setTimeout(() => {
if (filterDataSource.length == 0 && JSON.stringify(this.condition.filterInfo) == '{}') {
filterDataSource = JSON.parse(JSON.stringify(this.cacheDataSource))
}
this.loadingDataSource = filterDataSource
}, 1000)
}
//清除选中行数据
this.clearSelectedRow()
setTimeout(() => {
// //加载动画关闭
this.loading = false
}, 1000)
} catch (error) {
this.loading = false
this.$message.error(this.$t('LoadData Faild'))
}
},
handlePageChange({ currentPage, pageSize }) {
let that = this
that.PageOptions.currentPage = currentPage
that.PageOptions.pageSize = pageSize
let end = 0
if (currentPage * pageSize > that.loadingDataSource.length) {
end = that.loadingDataSource.length
} else {
end = currentPage * pageSize
}
that.loadingDataSource = arrayMethods.slice(that.loadingDataSource, (currentPage - 1) * pageSize, end)
},
//拖拽列方法
columnDrop() {
this.$nextTick(() => {
// var _this = this
const xTable = this.$refs.xGrid
this.sortable1 = Sortable.create(
xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
{
handle: '.vxe-header--column:not(.col--fixed)',
onEnd: ({ item, newIndex, oldIndex }) => {
const { fullColumn, tableColumn } = xTable.getTableColumn()
// var _vueObj = _this
// var ar1 = _vueObj.myColumns.map((a)=>a.children).filter((item) => item != undefined)
// if(ar1.length > 0){
// // 父列标题与其他列标题
// var temp = fullColumn[oldIndex]
// var curCol
// if(temp.subTitle == undefined){
// curCol = _vueObj.myColumns.filter((item) => item.field == fullColumn[oldIndex].property)[0]
// }else{
// // 拖动重复的标题名称,使用subTitle判断
// curCol = _vueObj.myColumns.filter((item) => item.subTitle == fullColumn[oldIndex].subTitle)[0]
// }
// if(curCol == undefined){
// return
// }else{
// _vueObj.myColumns.splice(oldIndex,1)
// _vueObj.myColumns.splice(newIndex,0,curCol)
// }
// }else{
const targetThElem = item
const wrapperElem = targetThElem.parentNode
const newColumn = fullColumn[newIndex]
if (newColumn.fixed) {
// 错误的移动
if (newIndex > oldIndex) {
wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex])
} else {
wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
}
return this.$XModal.message({ message: 'Fixed column not allowed to drag!', status: 'error' })
}
// 转换真实索引
const oldColumnIndex = xTable.getColumnIndex(tableColumn[oldIndex])
const newColumnIndex = xTable.getColumnIndex(tableColumn[newIndex])
// 移动到目标列
const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
fullColumn.splice(newColumnIndex, 0, currRow)
xTable.loadColumn(fullColumn)
}
},
// }
)
})
},
currentChange(row) {
// this.$emit('rowClick', row.row)
},
checkboxChange(records) {
this.isCheckBoxClick = true
this.selectRowData = records.records
this.currentRow = records.records.length > 0 ? records.records[0] : undefined
this.$emit('checkbox-change', records)
this.$emit('selectRows', Object.assign({}, records, this.$refs.xGrid.getSelectedCell()))
},
checkAllData(records) {
this.selectRowData = records.records
this.$emit('checkall-data', records)
},
radioChangeEvent(records) {
this.selectRowData = records.visibleData
this.currentRow = records.visibleData.length > 0 ? records.visibleData[0] : undefined
this.$emit('radio-change', records)
this.$emit('selectRows', Object.assign({}, records, this.$refs.xGrid.getSelectedCell()))
},
//加载表格数据源
queryData(data = null, url = null, must = null, urlData = undefined) {
//zx
data = JSON.parse(JSON.stringify(data))
if (this.isLazyLoad && data != undefined && data.data != undefined) {
this.PageOptions.currentPage = 1
this.$refs.xGrid.clearScroll()
data.data.pageNo = this.PageOptions.currentPage
}
if (urlData != undefined && urlData.type != undefined && urlData.type.toLowerCase() == 'system') {
this.refreshDataForSystem(
urlData,
this.PageOptions.currentPage,
this.PageOptions.pageSize,
true,
this.savedparentData
)
return
}
if (data != undefined && data != null && JSON.stringify(data) != '{}') {
data = JSON.parse(JSON.stringify(data))
}
if (data != null && data.url != undefined) {
if (data.RequestMethod == undefined || data.RequestMethod.toLowerCase() == 'post') {
postAction(data.url, data.data).then((res) => {
this.loadingDataSource = res
})
} else {
data.url = data.url.endsWith('/list') ? data.url.substr(0, data.url.indexOf('/list')) : data.url
getAction(data.isList == undefined ? data.url + '/list' : data.url, data.data).then((res) => {
this.loadingDataSource = res.result.records
})
return
}
}
if (this.queryid != null && this.version != null && this.dataSource == null) {
sendPutAction(null, this.queryid, this.version, this.queryParams ? this.queryParams : {}).then((res) => {
this.dataSource = res
})
//zx 获取Moduler 表格联动数据
} else if (this.queryid == null || this.version == null) {
if (this.areaNode == 'Root') {
this.getData()
} else {
if (this.areaNode != undefined) {
this.$set(this.areaNode, 'pageNo', this.PageOptions.currentPage)
this.$set(this.areaNode, 'pageSize', this.PageOptions.pageSize)
}
}
if (
JSON.stringify(this.areaNode) != '{}' &&
(data == undefined || data.url == undefined) &&
this.baseUrl != undefined
) {
if (urlData == undefined) this.getData()
}
}
if (must == 'action') {
this.$emit('reloadData', { node: this.areaNode, url: this.baseUrl })
}
//清除选中行数据
this.clearSelectedRow()
},
getData(pageIndex = 0, pageSize = 0, isScrollTop = undefined, scrollTop = undefined) {
var tempNode = {}
if (this.areaNode != undefined) {
tempNode = JSON.parse(JSON.stringify(this.areaNode))
}
if (this.areaNode == 'Root') {
tempNode = {}
this.$set(tempNode, 'pageNo', this.PageOptions.currentPage)
this.$set(tempNode, 'pageSize', this.PageOptions.pageSize)
}
if (pageIndex + pageSize != 0) {
this.$set(tempNode, 'pageNo', pageIndex)
this.$set(tempNode, 'pageSize', pageSize)
// this.loading = true
}
if (JSON.stringify(tempNode) == '{}') {
this.$set(tempNode, 'pageNo', this.PageOptions.currentPage)
this.$set(tempNode, 'pageSize', this.PageOptions.pageSize)
}
if (pageIndex + pageSize != 0 && this.lazyLoad) {
tempNode.pageSize = tempNode.pageSize == -1 ? 100 : tempNode.pageSize
}
if (this.savedparentData.data != undefined && this.savedparentData.url != undefined) {
this.savedparentData.data.pageSize = tempNode.pageSize
this.savedparentData.data.pageNo = tempNode.pageNo
if (this.savedparentData.urlData != undefined) {
this.refreshDataForSystem(this.savedparentData, pageIndex, pageSize, isScrollTop)
return
}
if (this.savedparentData.RequestMethod == 'get') {
getAction(this.savedparentData.url, this.savedparentData.data).then((res) => {
this.onScrollRefreshData(res, pageIndex, pageSize, isScrollTop)
})
} else {
postAction(this.savedparentData.url, this.savedparentData.data).then((res) => {
this.onScrollRefreshData(res, pageIndex, pageSize, isScrollTop)
})
}
} else {
getAction(this.baseUrl + '/list', tempNode).then((res) => {
this.onScrollRefreshData(res, pageIndex, pageSize, isScrollTop)
})
}
//清除选中行数据
this.clearSelectedRow()
},
onScrollRefreshData(res, pageIndex, pageSize, isScrollTop) {
if (res.result != undefined) {
res.result.current ? (this.PageOptions.currentPage = res.result.current) : (this.PageOptions.currentPage = 1)
this.PageOptions.totalResult = res.result.total
this.PageOptions.pageCount = res.result.pages
}
if (pageIndex + pageSize != 0) {
//zx
res.result.records.forEach((item) => {
this.loadingDataSource.push(item)
})
if (isScrollTop != undefined && isScrollTop) {
// this.$refs.xGrid.scrollTo(0, 1700)
// this.$refs.xGrid.scrollToRow(res.result.records[0])
this.isScrollTop = true
}
} else {
this.loadingDataSource = res.result.records
this.loadTranlate() //z
}
},
refreshDataForSystem(urlData, pageIndex = 0, pageSize = 0, isScrollTop = undefined, parentData = undefined) {
var param = { pageNo: this.PageOptions.currentPage, pageSize: this.PageOptions.pageSize }
if (parentData != undefined && parentData.data != undefined) {
param = Object.assign(param, parentData.data)
}
if (urlData.urlData != undefined) {
getActionForSystem(this.savedparentData.url, this.savedparentData.data).then((res) => {
if (res != undefined && res.result != undefined && res.result.pages != undefined) {
this.PageOptions.pageCount = res.result.pages
}
if (res != undefined && res.result != undefined && res.result.records != undefined)
this.onScrollRefreshData(res, pageIndex, pageSize, isScrollTop)
else this.loadingDataSource = []
})
} else {
getActionForSystem(urlData.System.baseUrl + '/list', param).then((res) => {
if (res != undefined && res.result != undefined && res.result.records != undefined) {
this.loadingDataSource = res.result.records
} else {
this.loadingDataSource == []
}
})
}
},
//获取单选选中的数据=>radio
getRadioRecords() {
return this.$refs.xGrid.getRadioRecord()
},
//获取选中的数据=>checkbox复选框勾选的数据
getCheckedRecords() {
return this.$refs.xGrid.getCheckboxRecords()
},
getTableData() {
return this.$refs.xGrid.getTableData()
},
clearCheckboxRow() {
this.$refs.xGrid.clearCheckboxRow()
},
clearData(rows, field) {
this.$refs.xGrid.clearData(rows, field)
},
loadList(pageSize) {
let that = this
this.loading = true
this.findList(pageSize, this.loadCount).then((data) => {
that.loadingDataSource = that.loadingDataSource.concat(data) // 局部追加并保存所有数据
that.$refs.xGrid.loadData(this.loadingDataSource)
that.loading = false
that.scrollLoad = true
})
},
findList(pageSize, loadCount) {
let that = this
return new Promise((resolve) => {
setTimeout(() => {
let length = that.dataSource.length
let list
if (length > pageSize * (loadCount + 1)) {
list = arrayMethods.slice(that.dataSource, pageSize * loadCount, pageSize * (loadCount + 1))
} else {
list = arrayMethods.slice(that.dataSource, pageSize * loadCount, length)
}
this.loadCount++
resolve(list)
}, 250)
})
},
scroll(type) {
if (this.dataSource.length <= this.loadingDataSource.length) {
return
}
this.loadList(this.pageSize)
},
addSortConfig(columns) {
columns.forEach((col) => {
if (col.sortable != 'undefined') {
col.sortable = true
col.sortBy = col.field
}
})
this.sortColumns = columns
this.$refs.xGrid.loadColumn(this.sortColumns)
},
isNumber(obj) {
return typeof obj === 'number' && !isNaN(obj)
},
tblLinkAge(allRows, selectedRows, currentRow) {
var resParam = { allRows: allRows, selectedRows: selectedRows, currentRow: currentRow }
this.$emit('tblChange', JSON.parse(JSON.stringify(resParam)))
},
allowEdit() {
this.cancelDisabled = false
this.checkBoxSlotAble = false
},
closeEdit() {
var that = this
this.$confirm({
title: 'Are you sure to cancel editing?',
content: 'When you click Confirm, the data you edited will not be recorded.',
okText: 'Yes',
okType: 'danger',
cancelText: 'No',
onOk() {
that.checkBoxSlotAble = true
that.cancelDisabled = true
},
})
},
//设置下划线
// lotUnderlineInfo: {
// needUnderline:true,
// judgeField:'LOTPROCESSSTATE'//判断的字段
// },
setUnderline({ row, rowIndex }) {
if (this.underlineInfo != undefined) {
if (this.underlineInfo.needUnderline) {
if (this.loadingDataSource[rowIndex + 1] != undefined) {
let that = this
if (Array.isArray(that.underlineInfo.judgeField)) {
let lineBold = this.underlineInfo.judgeField
let isBold = false
for (let i = 0; i <= lineBold.length - 1; i++) {
if (row[lineBold[i]] != this.loadingDataSource[rowIndex + 1][lineBold[i]]) {
isBold = true
break
} else {
isBold = false
}
}
if (isBold) {
return { ...this.cellStyle, borderBottom: '2px solid #000' }
} else {
return this.cellStyle
}
} else if (
row[this.underlineInfo.judgeField] != this.loadingDataSource[rowIndex + 1][this.underlineInfo.judgeField]
) {
return { ...this.cellStyle, borderBottom: '2px solid #000' }
} else {
return this.cellStyle
}
}
} else {
return this.cellStyle
}
} else {
return this.cellStyle
}
},
//鼠标右键删除方法
menusDelete(params, event) {
this.batchDel()
},
//鼠标右键修改方法
menusUpdate(params, event) {},
//鼠标右键上移方法
menusMoveUp(params, event) {
let index = ''
if (params.row == undefined) {
index = this.loadingDataSource.indexOf(params)
} else {
index = this.loadingDataSource.indexOf(params.row)
}
if (index != 0) {
let temp = this.loadingDataSource[index - 1]
Vue.set(this.loadingDataSource, index - 1, this.loadingDataSource[index])
Vue.set(this.loadingDataSource, index, temp)
}
},
//鼠标右键下移方法
menusMoveDown(params, event) {
let index = ''
if (params.row == undefined) {
index = this.loadingDataSource.indexOf(params)
} else {
index = this.loadingDataSource.indexOf(params.row)
}
if (index != this.loadingDataSource.length - 1) {
let temp = this.loadingDataSource[index + 1]
Vue.set(this.loadingDataSource, index + 1, this.loadingDataSource[index])
Vue.set(this.loadingDataSource, index, temp)
}
},
//表格合并行
mergeRowMethod({ row, _rowIndex, column, visibleData }) {
//zp rowspan
const cellValue = row[column.property]
let needAllRowsMerged = false
if (this.allRowsMerged) {
needAllRowsMerged = true
} else {
needAllRowsMerged = this.mergeRowParams.includes(column.property)
}
if (cellValue && needAllRowsMerged) {
const prevRow = visibleData[_rowIndex - 1]
let nextRow = visibleData[_rowIndex + 1]
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
let countRowSpan = 1
while (nextRow && nextRow[column.property] === cellValue) {
nextRow = visibleData[++countRowSpan + _rowIndex]
}
if (countRowSpan > 1) {
return { rowspan: countRowSpan, colspan: 1 }
}
}
}
},
},
mounted() {
// this.$nextTick(() => {
// // 滚动的容器
// const el = this.$el.querySelector('.vxe-table--body-wrapper')
// el.onscroll = () => {
// const scrollTop = el.scrollTop
// const offsetHeight = el.offsetHeight
// const scrollHeight = el.scrollHeight
// var pageIndex = this.PageOptions.currentPage
// var pageSize = this.PageOptions.pageSize
// var pageCount = this.PageOptions.pageCount
// if (offsetHeight + scrollTop == scrollHeight) {
// // 需要执行的代码
// if (pageIndex + 1 > pageCount) {
// // return;
// } else {
// // this.getData(pageIndex + 1, pageSize,scrollTop)
// }
// // this.getData()
// // 调用list 原本的数据请求函数
// } else if (scrollTop == 0) {
// }
// }
// })
this.widthcroll()
},
watch: {
dataSource: function (newVal, oldVal) {
this.loadingDataSource = []
this.loadCount = 0
// this.loadList(this.pageSize)
let that = this
if (newVal == null) {
this.loadingDataSource = null
return
}
that.loadingDataSource = arrayMethods.slice(
newVal,
(that.pagerConfig.currentPage - 1) * that.pagerConfig.pageSize,
that.pagerConfig.currentPage * that.pagerConfig.pageSize
)
that.pagerConfig.total = newVal.length
},
},
computed: {
finalyTableName() {
return this.tableId != undefined && this.tableId.length > 0
? this.tableId
: (this.tableName != undefined && this.tableName.length > 0
? this.tableName
: this.guid())
},
// 根据表格的size设置自定义按钮的class
// toolbarClass() {
// return 'toolbar vxe-button type--button size--' + this.gridOptions.size + ' is--circle'
// },
importExcelUrl: function () {
if(!this.needImportExcelLoadData){
return `${window.ipConfigUrl.baseURL}${'/rcjcost' + '/importExcel'}`
}else{
return `${window.ipConfigUrl.baseURL}${this.baseUrl + '/importExcel'}`
}
},
//表名首字符大写
upperTableName() {
// return this.tableName.slice(0, 1).toUpperCase() + this.tableName.slice(1)
},
columnsArr() {
var arr = []
for (const index in this.gridOptions.columns) {
if (this.gridOptions.columns[index]['title']) {
arr.push(this.gridOptions.columns[index]['title'])
}
}
return arr
},
getHeight() {
var multipage = 0
if (this.$store.state.app.multipage) {
multipage = 52
}
return document.body.clientHeight - 59 - multipage - 10 //10:外边距为5 59顶部导航栏高度
},
startIndex() {
return this.gridOptions.pagerConfig.pageSize * (this.gridOptions.pagerConfig.currentPage - 1)
},
tableBodyHeight: function () {
let bodyHeight =
this.$refs.xGrid.$children[1]._data.parentHeight - this.$refs.xGrid.$children[1]._data.rowHeight + 1 //1为Bord
return bodyHeight
},
tableCellHeight() {
let cellHeight = this.$refs.xGrid.$children[1]._data.rowHeight
return cellHeight
},
pageSize: function () {
return parseInt(this.tableBodyHeight / this.tableCellHeight) + 1 // 多加载一条数据才能显示Scroll
},
setting() {
var setting = {}
var that = this
if (that.isShowMenu != 'false') {
setting.toolbarConfig = {
zoom: true,
custom: true,
perfect: true,
import: true,
export: true,
print: true,
refresh: true,
slots: {
buttons: 'toolbar_buttons',
},
}
}
return setting
},
},
}
</script>
<style>
.table {
height: 5rem;
}
.ant-popover-inner-content {
padding: 8px !important;
}
.ant-popover-arrow,
.ant-popover-content {
/* position: relative; */
right: 25px;
bottom: 12px;
}
</style>
<style lang='less' scoped>
::v-deep .vxe-table--fixed-right-wrapper,
::v-deep .vxe-table--fixed-left-wrapper {
height: calc(100% - 10px) !important;
overflow: hidden !important;
}
// ::v-deep .vxe-table--render-default .vxe-table--body-wrapper.fixed-right--wrapper {
// height: calc(100% - 25px) !important;
// }
// ::v-deep .vxe-table--render-default .vxe-table--body-wrapper.fixed-left--wrapper {
// height: calc(100% - 25px) !important;
// }
// ::v-deep .vxe-table--render-default .vxe-table--body-wrapper,
// ::v-deep .vxe-table--render-default .vxe-table--footer-wrapper {
// background: unset;
// }
::v-deep .ant-modal-close-x {
line-height: 44px;
}
::v-deep .ant-modal-title {
color: white !important;
}
::v-deep .vxe-table--render-default .vxe-body--row.row--current {
background-color: #c0ebff !important;
// & > td > div {
// color: rgba(0, 0, 0, 0.65);
// }
}
::v-deep .vxe-toolbar .vxe-custom--wrapper {
margin-left: 4px;
}
.btnAdd {
background: #1890ff;
border: none;
margin-right: 4px;
margin-bottom: 9px;
height: 27px;
float: left;
}
.ant-dropdown-menu-item {
height: 40px;
line-height: 40px;
}
.btnAdd:hover,
.btnAdd:focus {
background: #40a9ff;
color: #fff;
i {
background: #40a9ff;
}
}
.btnVersion:disabled {
border: none;
margin-right: 4px;
height: 27px;
background-color: #f5f5f5;
}
.btnVersion:not(:disabled) {
background: #1890ff;
border: none;
margin-right: 4px;
height: 27px;
color: #fff;
}
.btnVersion:hover:disabled {
color: rgba(0, 0, 0, 0.25) !important;
}
.btnVersion:hover:not(:disabled),
.btnVersion:focus:not(:disabled) {
background: #40a9ff;
}
.btnCopy:not(:disabled) {
background: #ffc118;
border: none;
margin-right: 4px;
height: 27px;
color: rgb(255, 255, 255);
width: 120px;
}
.btnIcon {
color: #98a6ad;
width: 30px;
float: left;
border: none;
padding: 0px;
padding-top: 2px;
}
.btnIconex {
color: #98a6ad;
width: 30px;
float: left;
border: none;
padding: 0px;
padding-top: 4px;
}
.btnmore {
background: white;
border: none;
width: 25px;
padding: 0px;
padding-top: 2px;
}
::v-deep .vxe-table--body {
cursor: pointer;
}
::v-deep .ant-btn .ant-dropdown-trigger {
width: unset !important;
}
.ant-btn-icon-only {
padding-bottom: 1px;
}
::v-deep .vxe-button {
background: white;
border: none;
i {
margin-bottom: 5px;
}
}
::v-deep .vxe-button.type--button.is--circle {
padding: 0 0.5em;
min-width: 34px;
border-radius: unset;
}
::v-deep .vxe-button > i {
font-size: 16px;
color: #98a6ad;
}
.vxe-button:not(.is--disabled) .vxe-button--icon.vxe-icon--zoomin {
border-color: #fff;
width: 30px;
}
::v-deep .vxe-icon--zoomin:hover {
background-color: #40a9ff !important;
}
::v-deep .vxe-button:not(.is--disabled) .vxe-button--icon.vxe-icon--zoomin,
::v-deep .vxe-button.type--button:not(.is--disabled):active .vxe-button--icon.vxe-icon--zoomin,
::v-deep .vxe-button.type--button:not(.is--disabled):active .vxe-button--icon.vxe-icon--zoomout:after,
::v-deep .vxe-button.type--button:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin,
::v-deep .vxe-button.type--button:not(.is--disabled):active,
::v-deep vxe-button--icon vxe-icon--menu {
border-color: #fff;
}
::v-deep .vxe-toolbar.is--perfect {
background: #fff !important;
border: none !important;
margin-top: -5px !important;
}
::v-deep .vxe-table--render-default {
color: rgba(0, 0, 0, 0.65);
}
::v-deep .vxe-toolbar .is--perfect > ::v-deep .vxe-button--wrapper > div {
background: #fff;
}
::v-deep .vxe-header--row > th {
font-family: San Jose, CA;
font-weight: unset;
color: black;
height: 25px !important;
background: #edf2f9 !important;
}
::v-deep .vxe-button.type--button:not(.is--disabled).vxe-button.type--button:not(.is--disabled):active,
::v-deep .vxe-button.type--button {
border-color: unset;
}
::v-deep .body--wrapper .vxe-body--row td,
::v-deep .vxe-table--render-wrapper .vxe-table--main-wrapper .body--wrapper .vxe-header--row th {
&:not(:last-of-type) {
height: 25px !important;
background-image: none;
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-collapse: collapse;
}
&:last-of-type {
background-image: none;
border-bottom: 1px solid #e8e8e8;
}
}
::v-deep .fixed-left--wrapper .vxe-header--row th {
border-right: 1px solid #e8e8e8;
}
::v-deep .vxe-cell--sort,
::v-deep .anticon-filter,
::v-deep .anticon-search,
::v-deep .vxe-icon--funnel {
display: block !important;
}
::v-deep .vxe-header--column,
::v-deep .vxe-cell--title {
margin-top: -2px;
}
::v-deep .vxe-cell--filter,
.vxe-filter--btn {
display: block !important;//此处 将display 改成 none 搜索图标就不见了
padding: 0 0.05em 0 0.25em;
}
//隐藏vxe自带搜索按钮
::v-deep .vxe-table--filter-footer {
display: none;
}
::v-deep .vxe-header--row > th:hover .anticon-search {
position: relative;
top: 3px;
display: block !important;
}
::v-deep .vxe-header--row > th:hover .vxe-cell--filter,
.vxe-filter--btn {
display: block !important;
}
::v-deep .vxe-header--row > th:hover .vxe-cell--sort {
display: block !important;
}
::v-deep .vxe-header--row > th:hover .vxe-icon--funnel {
display: inline-block !important;
}
::v-deep .vxe-header--row > th:hover .anticon-filter {
display: inline-block !important;
}
::v-deep .vxe-table--render-default .vxe-cell {
padding-left: 5px;
padding-right: 0px;
}
::v-deep .vxe-button.size--mini.type--button {
height: 27px;
border: none;
}
::v-deep .vxe-tools--operate {
margin-top: -1px;
}
::v-deep .vxe-table--footer-wrapper.body--wrapper {
display: none;
}
::v-deep button[class='vxe-button type--button size--mini is--circle'] {
background: unset;
box-shadow: 0 0 0.25em 0 #fff;
}
::v-deep .vxe-button.type--button:not(.is--disabled) {
&:focus,
&:active {
background: unset;
box-shadow: 0 0 0.25em 0 #fff;
}
}
::v-deep .vxe-header--gutter.col--gutter {
display: none !important;
}
::v-deep button[disabled='disabled']:hover,
button[disabled='disabled'] {
background-color: #f5f5f5;
color: rgba(0, 0, 0, 0.25) !important;
}
.drag-btn {
cursor: move;
font-size: 12px;
}
.vxe-body--row.sortable-ghost,
.vxe-body--row.sortable-chosen {
background-color: #dfecfb;
}
[ant-click-animating-without-extra-node='true']::after {
border-color: #e8e8e8 !important;
--antd-wave-shadow-color: #fff !important;
}
// ::v-deep .vxe-table--render-default:not(.is--empty).is--footer.is--scroll-x .vxe-table--body-wrapper {
// overflow: auto;
// }
::v-deep .vxe-button--wrapper {
height: 30px;
}
</style>
扫一扫
10-13
6744
6744
10-31
521
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
