<template>
<div>
<title>{{$route.name}}</title>
<h1>{{$route.name}}</h1>
<a
ui-form id="editForm">
<div class="first
-field" :class="isShowMore?'showMore':'hideMore'">
<a
ui-form
-item label="版本号" label
-width="110px">
<a
ui-dropdown size="small" v
-model="searchForm.planId" :op="planIdOp" place
-holder="请选择"></a
ui-dropdown>
</a
ui-form
-item>
<a
ui-form
-item label="厂区" label
-width="110px">
<a
ui-dropdown size="small" v
-model="searchForm.locationCodeStr" :op="siteCodeOp" place
-holder="请选择"></a
ui-dropdown>
</a
ui-form
-item>
<a
ui-form
-item label="部门" label
-width="110px">
<a
ui-dropdown size="small" ref="deptCodeRef" v
-model="searchForm.deptNameStr" :op="deptOp" place
-holder="请选择"></a
ui-dropdown>
</a
ui-form
-item>
<a
ui-form
-item label="工序" label
-width="110px">
<a
ui-dropdown size="small" v
-model="searchForm.workSerctionStr" :op="workSerctionOp"></a
ui-dropdown>
</a
ui-form
-item>
<a
ui-form
-item label="产品线" label
-width="110px">
<a
ui-dropdown size="small" ref="prodLineCnNameRef" v
-model="searchForm.prodLineCnNameStr" :op="prodLineOp" place
-holder="请选择"></a
ui-dropdown>
</a
ui-form
-item>
<a
ui-form
-item label="产品族" label
-width="110px">
<a
ui-dropdown size="small" ref="prodFamilyEnNameRef" v
-model="searchForm.prodFamilyEnNameStr" :op="prodFamilyOp" place
-holder="请选择"></a
ui-dropdown>
</a
ui-form
-item>
<a
ui-form
-item label="产品型号" label
-width="110px">
<a
ui-dropdown size="small" ref="prodModelCodeRef" v
-model="searchForm.prodModelCodeStr" :op="prodModelCodeOp" place
-holder="请选择"></a
ui-dropdown>
</a
ui-form
-item>
<a
ui-form
-item label="物料编码" label
-width="110px">
<a
ui-input size="small" ref="itemCodeRef" v
-model="searchForm.itemCodeStr" placeholder="连续首字母或者字符可模糊匹配"></a
ui-input>
</a
ui-form
-item>
<a
ui-form
-item label="类型" label
-width="110px">
<a
ui-dropdown size="small" v
-model="searchForm.dataTypeStr" :op="dataTypeOp" place
-holder="请选择"></a
ui-dropdown>
</a
ui-form
-item>
<a
ui-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>
<a
ui-button type="primary" size="mini" round @click="findClick">查询</a
ui-button>
<a
ui-button type="primary" size="mini" round @click="reset" style="margin
-right: 8px">重置</a
ui-button>
<FormTempBtn style="width:100px;" :form
-code="formId" :formData="searchForm" @templateChanged="setFormData"></FormTempBtn>
</a
ui-form
-item>
</div>
</a
ui-form>
<div class="table
-auto">
<a
ui-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>
<a
ui-grid-toolbar id="scheduleSupplyDemand
GridId" :setting="{ showIndex: true, sortable: Sortable, }" ref="a
uiToolbar" @remote
-setting="remoteSetting" @save
-setting="saveSetting">
<template #buttons>
<div style="width: 800px; display: inline
-block">
<a
ui-button size="mini" @click="exportData">导出</a
ui-button>
<a
ui-button size="mini" @click="showBaseLoggerInfo">版本日志</a
ui-button>
</div>
</template>
</a
ui-grid-toolbar>
</template>
<a
ui-grid-column fixed="left" title="版本" field="planId" min
-width="100" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-grid-column fixed="left" title="厂区" field="locationName" min
-width="100" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-grid-column fixed="left" title="部门" field="deptName" min
-width="120" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-grid-column fixed="left" title="产品线" field="prodLineCnName" min
-width="80" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-grid-column fixed="left" title="产品族" field="prodFamilyEnName" min
-width="80" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-grid-column fixed="left" title="产品型号" field="prodModelCode" min
-width="80" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-grid-column fixed="left" title="工序" field="workSerction" min
-width="80" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-grid-column fixed="left" title="物料编码" field="itemCode" min
-width="90" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-grid-column fixed="left" title="类型" field="dataType" min
-width="80" show
-overflow header
-align="center" align="center"></a
ui-grid-column>
<a
ui-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>
</a
ui-grid-column>
<a
ui-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>
</a
ui-grid-column>
<a
ui-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="planCellClick(row, item.field)">{{ row[item.field] }} </a>
<a v
-else
-if="row.dataType === '排产需求'" :style="{ textDecoration: 'underline', cursor: 'pointer' }"
@click="handleDateCellClick(row, item.field)">{{ row[item.field] }} </a>
<template v
-else>
{{ row[item.field] }}
</template>
</template>
</a
ui-grid-column>
</a
ui-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>
<a
ui-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>
</a
ui-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: {
A
uiDialogBox: DialogBox,
A
uiButton: Button,
A
uiForm: Form,
A
uiFormItem: FormItem,
A
uiDropdown: Dropdown,
A
uiGrid:
Grid,
A
uiGridColumn:
GridColumn,
A
uiGridToolbar:
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/supplyReq
uireItemHeadService/getSupplyReq
uireLogList/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: { req
uired: true },
textField: 'planId',
valueField: 'planId',
placeHolder: '
-----请选择
-----',
dataset: {
source: {
type: 'post',
url: 'services/apsSupplyReq
uireService/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/apsSupplyReq
uireService/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/apsSupplyReq
uireService/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/apsSupplyReq
uireService/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/apsSupplyReq
uireService/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/apsSupplyReq
uireService/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/apsSupplyReq
uireService/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/exportApsSupplyReq
uire',
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
}
}
},
handleDateCellClick(row, field) {
this.rowData = {
...row,
date: field,
quantity: row[field]
};
this.showHistory = true;
},
planCellClick(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/apsSupplyReq
uireService/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/apsSupplyReq
uireService/getApsSupplyReq
uireList/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',
a
uiToolbar: 'a
uiToolbar',
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 .a
ui-grid .a
ui-grid-cell) {
width: 100% !important;
font
-size: 12px;
}
.table
-auto {
height: calc(100vh
- 140px) !important;
}
:deep(.table
-auto .a
ui-grid__body
-wrapper) {
height: calc(100vh
- 280px) !important;
}
:deep(.a
ui-grid__body
-wrapper::
-webkit
-scrollbar) {
height: 12px !important;
width: 12px !important;
}
:deep(.a
ui-grid__body .a
ui-grid-body__column .a
ui-grid-cell .row
-link) {
color: #189ff0 !important;
cursor: pointer;
text
-decoration: underline;
}
:deep(.a
ui-grid-toolbar) {
padding: 5px 0;
}
:deep(.a
ui-grid-toolbar .a
ui-grid-custom__wrapper) {
height: 24px !important;
width: 24px !important;
}
:deep(.a
ui-grid__body .a
ui-grid-body__column .a
ui-grid-cell .row
-link_click) {
color: #189ff0 !important;
cursor: pointer;
text
-decoration: underline;
}
:deep(.a
ui-grid__body .a
ui-grid-body__column .a
ui-grid-cell .row
-link
-red) {
color: #fe281f !important;
}
:deep(.a
ui-grid.fixed__sticky .row__word
--remarked) {
--body
-background
-color: #ebf1de !important;
}
:deep(.row__word
--remarked) {
background
-color: #ebf1de !important;
}
:deep(.a
ui-grid .a
ui-pager) {
padding
-top: 6px !important;
}
</style>
<style>
/* 隐藏a
ui3个性化重置按钮 */
.a
ui-grid-modal__box .a
ui-grid-custom .a
ui-grid-custom__footer .a
ui-button:nth
-child(2) {
display: none !important;
}
</style>
这个页面往下拉之后，行距会和列名的行距不一致
本文介绍了如何通过cellTemplate属性自定义UI Grid中的列内容，并利用CSS进行样式调整的方法。此外，还分享了一个案例：如何使用CSS绝对定位在UI Grid中添加缓存图标。
扫一扫
4583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
