<
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="aui
Toolbar" @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="handleDateCellClick(row, item
.field)">{{ row[item
.field] }} </a>
</
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>
<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 WorkOrderScheduleHistoryCopy from '
./WorkOrderScheduleHistory copy
.vue'
import BaseLoggerInfo from '
../basedata/BaseLoggerInfo
.vue'
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
},
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,
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
}
}
},
handleDateCellClick(row, field) {
this
.rowData = {
...row,
date: field,
quantity: row[field]
};
this
.showHistory = true;
},
changeDialog() {
this
.rowData = {}
this
.showStock = false
this
.showHistory = 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',
aui
Toolbar: 'aui
Toolbar',
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>
中在dataItem动态生成的日期列中对应的数值类型是排产需求的点击数值展示WorkOrderScheduleHistory页面，如果为排产则跳转为WorkOrderScheduleHistory2页面
本文提供了 KendoUI 中 Grid 组件的详细示例链接，包括工具栏模板的使用方法，并附上了中文网站入口。
扫一扫
14
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
