<template>
<div>
<title>{{$route.name}}</title>
<h1>{{$route.name}}</h1>
<aui-form id="editForm">
<div class="first-field" :class="isShowMore?'showMore':'hideMore'">
<aui-form-item label="版本号" label-width="110px">
<aui-dropdown size="small" v-model="searchForm.planId" :op="planIdOp" place-holder="请选择"></aui-dropdown>
</aui-form-item>
<aui-form-item label="厂区" label-width="110px">
<aui-dropdown size="small" v-model="searchForm.locationCodeStr" :op="siteCodeOp" place-holder="请选择"></aui-dropdown>
</aui-form-item>
<aui-form-item label="部门" label-width="110px">
<aui-dropdown size="small" ref="deptCodeRef" v-model="searchForm.deptNameStr" :op="deptOp" place-holder="请选择"></aui-dropdown>
</aui-form-item>
<aui-form-item label="工序" label-width="110px">
<aui-dropdown size="small" v-model="searchForm.workSerctionStr" :op="workSerctionOp"></aui-dropdown>
</aui-form-item>
<aui-form-item label="产品线" label-width="110px">
<aui-dropdown size="small" ref="prodLineCnNameRef" v-model="searchForm.prodLineCnNameStr" :op="prodLineOp" place-holder="请选择"></aui-dropdown>
</aui-form-item>
<aui-form-item label="产品族" label-width="110px">
<aui-dropdown size="small" ref="prodFamilyEnNameRef" v-model="searchForm.prodFamilyEnNameStr" :op="prodFamilyOp" place-holder="请选择"></aui-dropdown>
</aui-form-item>
<aui-form-item label="产品型号" label-width="110px">
<aui-dropdown size="small" ref="prodModelCodeRef" v-model="searchForm.prodModelCodeStr" :op="prodModelCodeOp" place-holder="请选择"></aui-dropdown>
</aui-form-item>
<aui-form-item label="物料编码" label-width="110px">
<aui-input size="small" ref="itemCodeRef" v-model="searchForm.itemCodeStr" placeholder="连续首字母或者字符可模糊匹配"></aui-input>
</aui-form-item>
<aui-form-item label="类型" label-width="110px">
<aui-dropdown size="small" v-model="searchForm.dataTypeStr" :op="dataTypeOp" place-holder="请选择"></aui-dropdown>
</aui-form-item>
<aui-form-item class="first-field-btn" label-width="0px" style="width: 265px">
<i v-show="isTriangleIconShow" class="hae-icon" :class="isShowMore?'icon-down':'icon-left-o'" @click="isShowMore = !isShowMore "></i>
<aui-button type="primary" size="mini" round @click="findClick">查询</aui-button>
<aui-button type="primary" size="mini" round @click="reset" style="margin-right: 8px">重置</aui-button>
<FormTempBtn style="width:100px;" :form-code="formId" :formData="searchForm" @templateChanged="setFormData"></FormTempBtn>
</aui-form-item>
</div>
</aui-form>
<div class="table-auto">
<aui-
grid height="100%" auto-resize ref="
grid" :auto-load="false" resizable :row-class-name="rowClassName" :pager="pagerConfig" border :span-method="colspanMethod" :fetch-data="fetchData">
<template #toolbar>
<aui-
grid-toolbar id="scheduleSupplyDemand
GridId" :setting="{ showIndex: true, sortable: Sortable, }" ref="auiToolbar" @remote-setting="remoteSetting" @save-setting="saveSetting">
<template #buttons>
<div style="width: 800px; display: inline-block">
<aui-button size="mini" @click="exportData">导出</aui-button>
<aui-button size="mini" @click="showBaseLoggerInfo">版本日志</aui-button>
</div>
</template>
</aui-
grid-toolbar>
</template>
<aui-
grid-column fixed="left" title="版本" field="planId" min-width="100" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="厂区" field="locationName" min-width="100" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="部门" field="deptName" min-width="120" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="产品线" field="prodLineCnName" min-width="80" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="产品族" field="prodFamilyEnName" min-width="80" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="产品型号" field="prodModelCode" min-width="80" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="工序" field="workSerction" min-width="80" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="物料编码" field="itemCode" min-width="90" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="类型" field="dataType" min-width="80" show-overflow header-align="center" align="center"></aui-
grid-column>
<aui-
grid-column fixed="left" title="库存" field="invQty" min-width="80" show-overflow header-align="center" align="center">
<template #default="{ row }">
<div style="color: #189ff0 !important;cursor: pointer;text-decoration: underline;" @click="operateRow(row, 'invQty')">{{ row.invQty }}</div>
</template>
</aui-
grid-column>
<aui-
grid-column fixed="left" title="历史" field="hisQty" min-width="100" show-overflow header-align="center" align="center">
<template #default="{ row }">
<div :class="{
'row-link_click': ['预计供应', '过站供应', '排产需求'].includes(row.dataType),
'row-link-red': String(row.hisQty) && row.hisQty < 0
}" @click="operateRow(row, 'hisQty')">{{ row.hisQty }}</div>
</template>
</aui-
grid-column>
<aui-
grid-column v-for="(item, i) in dateItem" :key="i" :field="item.field" :title="item.title" :renderer="renderFunction" min-width="50" align="center">
<template #default="{ row }">
<a v-if="row.dataType === '排产'" :style="{ textDecoration: 'underline', cursor: 'pointer' }"
@click="plan
CellClick(row, item.field)">{{ row[item.field] }} </a>
<a v-else-if="row.dataType === '排产需求'" :style="{ textDecoration: 'underline', cursor: 'pointer' }"
@click="handleDate
CellClick(row, item.field)">{{ row[item.field] }} </a>
<template v-else>
{{ row[item.field] }}
</template>
</template>
</aui-
grid-column>
</aui-
grid>
</div>
<StockDialog v-if="showStock" :rowData="rowData" @changeDialog="changeDialog"></StockDialog>
<InProcessWorkOrderSchedule v-if="showInProcess" :rowData="rowData" @changeDialog="changeDialog" :dateItem="dateItem"></InProcessWorkOrderSchedule>
<WorkOrderScheduleHistory v-if="showHistory" :rowData="rowData" @changeDialog="changeDialog" :dateItem="dateItem"></WorkOrderScheduleHistory>
<WorkOrdel v-if="showPlan" :rowData="rowData" @changeDialog="changeDialog" :dateItem="dateItem"></WorkOrdel>
<aui-dialog-box title="版本日志" class="history-Info" v-model="isShowBaseLoggerInfo" width="90%" top="8%" :dragable="true" :modal-closable="false">
<base-logger-info v-bind:apiUrl="getLoggerInfoUrl" v-if="isShowBaseLoggerInfo"></base-logger-info>
</aui-dialog-box>
</div>
</template>
<script>
import { Form, FormItem, Dropdown, Hae, $, DialogBox } from '@aurora/ui3'
import {
Grid,
GridColumn, Modal, Pager, Button,
GridToolbar } from '@aurora/vue3'
import { FormTempBtn } from '@mxdesign/ui'
import Sortable from 'sortablejs'
import { remoteSettingFn, saveSettingFn, getCustomConfigsFn } from '@/utils/personSettings'
import StockDialog from '@/components/supplydemandmgt/StockDialog'
import InProcessWorkOrderSchedule from '@/components/supplydemandmgt/InProcessWorkOrderSchedule'
import WorkOrderScheduleHistory from '@/components/supplydemandmgt/WorkOrderScheduleHistory'
import BaseLoggerInfo from '../basedata/BaseLoggerInfo.vue'
import WorkOrdel from '@/components/supplydemandmgt/WorkOrdel'
export default {
components: {
AuiDialogBox: DialogBox,
AuiButton: Button,
AuiForm: Form,
AuiFormItem: FormItem,
AuiDropdown: Dropdown,
Aui
Grid:
Grid,
Aui
GridColumn:
GridColumn,
Aui
GridToolbar:
GridToolbar,
FormTempBtn,
StockDialog,
InProcessWorkOrderSchedule,
WorkOrderScheduleHistory,
BaseLoggerInfo,
WorkOrdel
},
computed: {
tableData() {
return this.$refs.
grid && this.$refs.
grid.getTableData() ? this.$refs.
grid.getTableData().tableData : []
}
},
data() {
return {
Sortable,
isShowBaseLoggerInfo: false,
getLoggerInfoUrl: 'services/supplyRequireItemHeadService/getSupplyRequireLogList/page/{{pageSize}}/{{curPage}}',
formId: 'scheduleSupplyDemandId',
toolBoxShow: false,
isShowMore: true,
isTriangleIconShow: true,
searchForm: {
planId: '', // 版本号
locationCodeStr: '', // 厂区
deptNameStr: '', // 部门
prodLineCnNameStr: '', // 产品线
prodFamilyEnNameStr: '', // 产品族
prodModelCodeStr: '', // 产品型号
workSerctionStr: '', // 工序
itemCodeStr: '', // 编码
dataTypeStr: '' // 类型
},
// 版本号
planIdOp: {
multi: false,
showClearBtn: true,
autoSelect: false,
alwaysLoad: true,
editable: true,
id: 'planId',
validation: { required: true },
textField: 'planId',
valueField: 'planId',
placeHolder: '-----请选择-----',
dataset: {
source: {
type: 'post',
url: 'services/apsSupplyRequireService/getAllPlanIdList'
}
}
},
// 厂区
siteCodeOp: {
multi: true,
id: 'locationCodeId',
showClearBtn: true,
autoSelect: false,
alwaysLoad: true,
editable: true,
textField: 'locationName',
valueField: 'locationCode',
placeHolder: '-----请选择-----',
emptyDataMsg: '-----没有数据-----',
dataset: {
source: {
type: 'post',
url: 'services/apsSupplyRequireService/getAllLocationInfo'
}
}
},
// 部门
deptOp: {
multi: true, // 是否多选
id: 'deptCodeId',
showClearBtn: true,
autoSelect: false,
alwaysLoad: true,
editable: true,
textField: 'deptName',
valueField: 'deptName',
placeHolder: '-----请选择-----',
emptyDataMsg: '-----请选择厂区-----',
dataset: {
source: {
type: 'POST',
url: 'services/apsSupplyRequireService/getDeptInfo'
}
},
cascade: [
{
trigger: '#locationCodeId',
allowEmpty: false, // 是否允许空值参加级联
name: 'locationCodeStr'
}
]
},
// 工序
workSerctionOp: {
id: 'workSerctionId',
multi: true,
showClearBtn: true,
autoSelect: false,
alwaysLoad: true,
editable: true,
placeHolder: '-----请选择-----',
textField: 'valueInfo',
valueField: 'valueInfo',
dataset: {
source: {
type: 'post',
url: 'services/apsSupplyRequireService/getAllWorkSerction'
}
}
},
// 产品线
prodLineOp: {
multi: true,
id: 'prodLineId',
showClearBtn: true,
autoSelect: false,
alwaysLoad: true,
editable: true,
textField: 'prodLineCnName',
valueField: 'prodLineCnName',
placeHolder: '-----请选择-----',
dataset: {
source: {
type: 'post',
url: 'services/apsSupplyRequireService/getProdLineList'
}
}
},
// 产品族(系列)
prodFamilyOp: {
multi: true,
id: 'prodFamilyId',
showClearBtn: true,
autoSelect: false,
alwaysLoad: true,
editable: true,
textField: 'prodSeriesEnName',
valueField: 'prodSeriesEnName',
placeHolder: '-----请选择-----',
dataset: {
source: {
type: 'post',
url: 'services/apsSupplyRequireService/getProdSeriesList'
}
},
cascade: [
{
trigger: '#prodLineId',
allowEmpty: true, // 是否允许空值参加级联
name: 'prodLineCnNameStr'
}
],
emptyDataMsg: '-----请选择产品线-----'
},
// 产品型号
prodModelCodeOp: {
multi: true,
id: 'prodModelId',
showClearBtn: true,
autoSelect: false,
alwaysLoad: true,
editable: true,
textField: 'prodModelCode',
valueField: 'prodModelCode',
placeHolder: '-----请选择-----',
dataset: {
source: {
type: 'post',
url: 'services/apsSupplyRequireService/getAllProdModelList'
}
},
cascade: [
{
trigger: '#prodFamilyId',
allowEmpty: false,
name: 'prodSeriesEnNameStr'
}
],
emptyDataMsg: '-----请选择产品族-----'
},
// 类型
dataTypeOp: {
multi: true,
id: 'dataTypeId',
showClearBtn: true,
autoSelect: false,
editable: true,
textField: 'label',
valueField: 'value',
placeHolder: '-----请选择-----',
dataset: {
value: [
{ value: '排产', label: '排产' },
{ value: '预计供应', label: '预计供应' },
{ value: '过站供应', label: '过站供应' },
{ value: '排产需求', label: '排产需求' },
{ value: '供需匹配', label: '供需匹配' }
]
}
},
pageFlag: false,
pagerConfig: {
component: Pager,
attrs: {
currentPage: 1,
pageSize: 15,
pageSizes: [15, 30, 50, 100],
total: 0,
layout: 'total, sizes, prev, pager, next, jumper'
}
},
dateItem: [],
fetchData: {
api: this.getData
},
clickSearchForm: {},
rowData: {},
showStock: false,
showInProcess: false,
showHistory: false,
showPlan: false,
settingType: 'scheduleSupplyDemand',
setTableColumn: []
}
},
methods: {
showBaseLoggerInfo() {
this.isShowBaseLoggerInfo = true
},
// 导出
exportData() {
let formData = this.searchForm
Hae.
ajax({
url: 'services/exportFileUtilService/exportApsSupplyRequire',
data: formData,
type: 'post',
success: () => {
Hae.confirm('导出任务已开始,你可以进入[我的导入导出>导出查询]中查看任务状态并下载导出文件!', (bool) => {
if (bool) {
window.open('#/ListExport')
}
})
}
})
},
// 行合并
colspanMethod({ row, column, rowIndex, columnIndex }) {
let fields = ['mergerKey', 'invQty']
// 获取当前行的 mergerKey
const currentGroupKey = row.mergerKey
// 获取当前列的 prop
const columnProp = column.property
// 计算相同 mergerKey 的行范围
const groupRows = this.tableData.filter((item) => item.mergerKey === currentGroupKey && currentGroupKey)
const firstGroupRowIndex = this.tableData.findIndex(
(item) => item.mergerKey === currentGroupKey && currentGroupKey
)
const lastGroupRowIndex = firstGroupRowIndex + groupRows.length - 1
// 对于 fields 列，合并相同 mergerKey 的所有行
if (fields.includes(columnProp)) {
if (rowIndex === firstGroupRowIndex) {
return {
rowspan: groupRows.length,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
},
// 行渲染
renderFunction(h, { row, column }) {
if (row.dataType === '排产需求'&& Number(row[column.property]) < 0) {
return <span style={{ color: '#000', fontSize: '12px' }}>{row[column.property]}</span>
}
if (String(row[column.property]) && Number(row[column.property]) < 0) {
return <span style={{ color: '#fe281f', fontSize: '12px' }}>{row[column.property]}</span>
} else {
return <span style={{ color: '#000', fontSize: '12px' }}>{row[column.property]}</span>
}
},
rowClassName({ seq, row, rowIndex, $rowIndex }) {
if (row.dataType === '排产') {
return 'row__word--remarked'
} else {
return ''
}
},
setFormData(data) {
let tempArr = Object.keys(data)
this.resData = data
if (tempArr.length === 0) {
return
}
this.searchForm.planId = data.planId // 版本号
this.searchForm.locationCodeStr = data.locationCodeStr // 厂区
this.searchForm.prodLineCnNameStr = data.prodLineCnNameStr // 产品线
this.searchForm.workSerctionStr = data.workSerctionStr // 工序
this.searchForm.dataTypeStr = data.dataTypeStr // 类型
// 级联关系接口先后执行
setTimeout(() => {
this.$refs.deptCodeRef.widget.setValueByField(data.deptNameStr, 'deptName') // 注意： 第二个参数是下拉的value值，不是v-model的值
}, 500)
setTimeout(() => {
this.$refs.prodFamilyEnNameRef.widget.setValueByField(data.prodFamilyEnNameStr, 'prodSeriesEnName')
}, 800)
setTimeout(() => {
this.$refs.prodModelCodeRef.widget.setValueByField(data.prodModelCodeStr, 'prodModelCode')
}, 1500)
setTimeout(() => {
this.$refs.itemCodeRef.widget.setValueByField(data.itemCodeStr, 'prodItemCode')
}, 2000)
},
operateRow(row, flag) {
this.rowData = row
this.rowData.dialogFlag = flag
if (flag === 'invQty') {
this.showStock = true
} else {
if (['排产需求'].includes(row.dataType)) {
this.showHistory = true
}
if (['预计供应', '过站供应'].includes(row.dataType)) {
this.showInProcess = true
}
}
},
handleDate
CellClick(row, field) {
this.rowData = {
...row,
date: field,
quantity: row[field]
};
this.showHistory = true;
},
plan
CellClick(row, field) {
this.rowData = {
...row,
date: field,
quantity: row[field]
};
this.showPlan=true;
},
changeDialog() {
this.rowData = {}
this.showStock = false
this.showHistory = false
this.showPlan = false
this.showInProcess = false
},
reset() {
// 清空选择
this.searchForm = {
planId: '', // 版本号
locationCodeStr: '', // 厂区
deptNameStr: '', // 部门
prodLineCnNameStr: '', // 产品线
prodFamilyEnNameStr: '', // 产品族
prodModelCodeStr: '', // 产品型号
workSerctionStr: '', // 工序
itemCodeStr: '', // 编码
dataTypeStr: '' // 类型
}
this.clickSearchForm = JSON.parse(JSON.stringify(this.searchForm))
},
// 动态日期列
columnDate() {
this.dateItem = []
let params = {
...this.searchForm
}
this.$service.network.post('services/apsSupplyRequireService/getHeadBucketList', params).then(({ data }) => {
this.pageFlag = false
if (data && data.length) {
data.forEach((element) => {
// 将完整日期转换为月日格式 MM/DD
const dateParts = element.split('-')
const monthDay = dateParts.length >= 3
? `${dateParts[1]}/${dateParts[2]}`
: element
this.dateItem.push({
title: monthDay,
field: element
})
})
}
})
},
findClick() {
Hae.validForm($('#editForm'), (valid) => {
if (valid) {
this.pageFlag = true
this.getCustomConfigs()
this.clickSearchForm = JSON.parse(JSON.stringify(this.searchForm))
setTimeout(() => {
this.$refs.
grid.handleFetch()
}, 500)
}
})
},
// 查询
getData({ page }) {
let { pageSize } = page
if (this.pageFlag) {
page.currentPage = 1
}
let curPage = page.currentPage
return new Promise((resolve, reject) => {
let params = {
...this.clickSearchForm
}
this.$service.network
.post(`services/apsSupplyRequireService/getApsSupplyRequireList/page/${pageSize}/${curPage}`, params)
.then(({ data }) => {
this.pageFlag = false
this.isShowMore = false
this.columnDate()
let totalRows = data.pageVO && data.pageVO.totalRows ? data.pageVO.totalRows : 0
let result = data.result && data.result.length ? data.result : []
resolve({ result, page: { total: totalRows } })
})
})
},
getCustomConfigs() {
let config = {
settingType: this.settingType,
grid: '
grid',
auiToolbar: 'auiToolbar',
setTableColumn: 'setTableColumn',
dragSort: true
}
getCustomConfigsFn.call(this, config)
},
remoteSetting(settings) {
remoteSettingFn.call(this, settings, '
grid')
},
saveSetting() {
let customConfigs = arguments[0].columns
let config = { settingType: this.settingType, customConfigs }
saveSettingFn.call(this, config)
}
},
mounted() {
let that = this
// 判断是否有更多条件
显示隐藏小三角
let editFormHeight = $('.first-field').outerHeight()
that.isTriangleIconShow = !(editFormHeight < 38)
that.isShowMore = false
this.getCustomConfigs()
}
}
</script>
<style scoped src="./../unit/css/newModelPublic.css"></style>
<style scoped>
.first-field {
padding-right: 300px !important;
}
:deep(.table-auto .aui-
grid .aui-
grid-
cell) {
width: 100% !important;
font-size: 12px;
}
.table-auto {
height: calc(100vh - 140px) !important;
}
:deep(.table-auto .aui-
grid__body-wrapper) {
height: calc(100vh - 280px) !important;
}
:deep(.aui-
grid__body-wrapper::-
webkit-scrollbar) {
height: 12px !important;
width: 12px !important;
}
:deep(.aui-
grid__body .aui-
grid-body__column .aui-
grid-
cell .row-link) {
color: #189ff0 !important;
cursor: pointer;
text-decoration: underline;
}
:deep(.aui-
grid-toolbar) {
padding: 5px 0;
}
:deep(.aui-
grid-toolbar .aui-
grid-custom__wrapper) {
height: 24px !important;
width: 24px !important;
}
:deep(.aui-
grid__body .aui-
grid-body__column .aui-
grid-
cell .row-link_click) {
color: #189ff0 !important;
cursor: pointer;
text-decoration: underline;
}
:deep(.aui-
grid__body .aui-
grid-body__column .aui-
grid-
cell .row-link-red) {
color: #fe281f !important;
}
:deep(.aui-
grid.fixed__sticky .row__word--remarked) {
--body-background-color: #ebf1de !important;
}
:deep(.row__word--remarked) {
background-color: #ebf1de !important;
}
:deep(.aui-
grid .aui-pager) {
padding-top: 6px !important;
}
</style>
<style>
/* 隐藏aui3个性化重置按钮 */
.aui-
grid-modal__box .aui-
grid-custom .aui-
grid-custom__footer .aui-button:nth-child(2) {
display: none !important;
}
</style>
这个页面往下拉之后，行距会和列名的行距不一致
错乱效果修复
本文介绍了一个表格布局中出现的错乱效果及其临时解决方案。通过调整工具栏按钮的宽度，可以有效解决错乱问题，实现良好的视觉呈现。
扫一扫
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
