<template>
<div>
<title>{{$route
.name}}</title>
<h1>{{$route
.name}}</h1>
<aui-
form id="edit
Form">
<div class="first-field" :class="isShowMore?'showMore':'hideMore'">
<aui-
form-item label="版本号" label-width="110px">
<aui-dropdown size="small" v-model="search
Form.planId" :op="planIdOp" place-holder="请选择"></aui-dropdown>
</aui-
form-item>
<aui-
form-item label="厂区" label-width="110px">
<aui-dropdown size="small" v-model="search
Form.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="search
Form.deptNameStr" :op="deptOp" place-holder="请选择"></aui-dropdown>
</aui-
form-item>
<aui-
form-item label="工序" label-width="110px">
<aui-dropdown size="small" v-model="search
Form.workSerctionStr" :op="workSerctionOp"></aui-dropdown>
</aui-
form-item>
<aui-
form-item label="产品线" label-width="110px">
<aui-dropdown size="small" ref="prodLineCnNameRef" v-model="search
Form.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="search
Form.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="search
Form.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="search
Form.itemCodeStr" placeholder="连续首字母或者字符可模糊匹配"></aui-input>
</aui-
form-item>
<aui-
form-item label="类型" label-width="110px">
<aui-dropdown size="small" v-model="search
Form.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="search
Form" @templateChanged="set
FormData"></
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="scheduleSupplyDemandGridId" :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">
</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 BaseLoggerInfo from '
../basedata/BaseLoggerInfo
.vue'
export default {
components: {
AuiDialogBox: DialogBox,
AuiButton: Button,
Aui
Form:
Form,
Aui
FormItem:
FormItem,
AuiDropdown: Dropdown,
AuiGrid: Grid,
AuiGridColumn: GridColumn,
AuiGridToolbar: 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,
search
Form: {
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
},
clickSearch
Form: {},
rowData: {},
showStock: false,
showInProcess: false,
showHistory: false,
settingType: 'scheduleSupplyDemand',
setTableColumn: []
}
},
methods: {
showBaseLoggerInfo
() {
this.isShowBaseLoggerInfo = true
},
// 导出
exportData
() {
let
formData =
this.search
Form
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 ''
}
},
set
FormData(data) {
let tempArr = Object
.keys(data)
this.resData = data
if (tempArr
.length === 0) {
return
}
this.search
Form.planId = data
.planId // 版本号
this.search
Form.locationCodeStr = data
.locationCodeStr // 厂区
this.search
Form.prodLineCnNameStr = data
.prodLineCnNameStr // 产品线
this.search
Form.workSerctionStr = data
.workSerctionStr // 工序
this.search
Form.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
}
}
},
handleProducti
onClick(row,flag){
this.rowData = row
this.rowData
.dialogFlag = flag
if(['排产需求']
.includes(row
.dataType)){
this.showHistory=true
}
},
changeDialog
() {
this.rowData = {}
this.showStock = false
this.showHistory = false
this.showInProcess = false
},
reset() {
// 清空选择
this.search
Form = {
planId: '', // 版本号
locationCodeStr: '', // 厂区
deptNameStr: '', // 部门
prodLineCnNameStr: '', // 产品线
prodFamilyEnNameStr: '', // 产品族
prodModelCodeStr: '', // 产品型号
workSerctionStr: '', // 工序
itemCodeStr: '', // 编码
dataTypeStr: '' // 类型
}
this.clickSearch
Form = JSON
.parse(JSON
.stringify(
this.search
Form))
},
// 动态日期列
columnDate
() {
this.dateItem = []
let params = {
...this.search
Form
}
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
.valid
Form($('#edit
Form'), (valid) => {
if (valid) {
this.pageFlag = true
this.getCustomConfigs
()
this.clickSearch
Form = JSON
.parse(JSON
.stringify(
this.search
Form))
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.clickSearch
Form
}
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 edit
FormHeight = $('
.first-field')
.outerHeight
()
that
.isTriangleIconShow = !(edit
FormHeight < 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页面，
本文介绍如何在HTML表单中使用图片作为取消按钮，并通过JavaScript阻止默认提交行为的方法。原本尝试直接使用form的reset方法未能生效，最终通过添加return false解决该问题。
扫一扫
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
