<template>
|
<div class="tasks-of-output-plan-page subpages-containter-box">
|
<search-bar @search="onSearch" @reset="onReset">
|
<el-form :inline="true" class="search-form" label-width="100px">
|
<el-form-item label="计划创建日期">
|
<el-date-picker v-model="query.dateRange1" clearable class="default-form-width" value-format="YYYY-MM-DD" type="daterange"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="预计开始日期">
|
<el-date-picker v-model="query.dateRange" clearable class="default-form-width" value-format="YYYY-MM-DD" type="daterange"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="计划号">
|
<el-input placeholder="请输入..." clearable class="default-form-width" v-model.trim="query.planNo"></el-input>
|
</el-form-item>
|
<el-form-item label="订货号">
|
<el-input placeholder="请输入..." clearable class="default-form-width" v-model.trim="query.orderNo"></el-input>
|
</el-form-item>
|
<el-form-item label="计划类型">
|
<el-select placeholder="请选择..." clearable class="default-form-width" v-model="query.planType">
|
<el-option v-for="(item,index) in selectList.types" :key="'types-'+index" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="计划模式">
|
<el-select placeholder="请选择..." clearable class="default-form-width" v-model="query.outTaskMode">
|
<el-option v-for="(item,index) in selectList.outTypes" :key="'types-'+index" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="执行状态">
|
<el-select placeholder="请选择..." clearable class="default-form-width" v-model="query.planState">
|
<el-option v-for="(item,index) in selectList.status" :key="'status-'+index" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</search-bar>
|
|
<div class="table-header-between-row">
|
<div class="left-aside">
|
<el-button type="primary" @click="onNew">新建</el-button>
|
<upload-button
|
:margin-left="true"
|
:margin-right="true"
|
:accept-list="['.xls','.xlsx']"
|
:size-limit="2*1024*1024"
|
ajax-block="excel"
|
ajax-method="FileUploadForPlanOutList"
|
@callback="onImport"
|
/>
|
<el-button type="primary" @click="onExport">导出</el-button>
|
<el-button type="success" :disabled="allStartDisabled" @click="onStartMul">全部下发</el-button>
|
<el-button type="warning" :disabled="exportMissingMulDisabled" @click="onExportMissing">导出缺料信息</el-button>
|
</div>
|
<div class="right-aside">
|
<el-button type="primary" @click="onDownload">模板下载</el-button>
|
</div>
|
</div>
|
|
<el-table :data="list" border stripe @selection-change="onTableSelect">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column min-width="55" label="序号" fixed>
|
<template #default="scope">{{(queried.page-1)*queried.pageSize+(scope.$index+1)}}</template>
|
</el-table-column>
|
<el-table-column prop="PlanNo" min-width="250" label="计划号" />
|
<el-table-column prop="PlanStateName" label="执行状态" />
|
<el-table-column label="齐套">
|
<template #default="scope">
|
<el-tag :type="scope.row.IsPickFinished?'success':'danger'" size="small">{{scope.row.IsPickFinished?'齐套':'不齐套'}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="StartTime" label="预计开始日期" width="160" />
|
<el-table-column prop="PlanTypeName" label="计划类型" />
|
<el-table-column prop="OutTaskModeName" label="计划模式" width="120" />
|
<el-table-column prop="Qty" label="出库数量" width="100" />
|
<el-table-column prop="Qty_Finish" label="已完成数量" width="100" />
|
<el-table-column prop="Qty_NoFinish" label="未完成数量" width="100" />
|
<el-table-column label="计划进度" width="150">
|
<template #default="scope">
|
<el-progress :text-inside="true" :stroke-width="24" :percentage="scope.row.PlanRate||0" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="IssueTime" label="下发时间" width="160" />
|
<el-table-column prop="CreateTime" label="创建时间" width="160" />
|
<el-table-column prop="ModifyTime" label="修改时间" width="160" />
|
<el-table-column prop="CreateBy" label="创建人" width="100" />
|
<el-table-column prop="ModifyBy" label="修改人" width="100" />
|
<el-table-column label="操作" width="280" align="center" fixed="right">
|
<template #default="scope">
|
<el-button type="primary" size="small" @click="onOpenViewModal(scope.row)">详情</el-button>
|
<el-button type="success" size="small" :disabled="scope.row.PlanState!==0" @click="onStart(scope.row)">下发</el-button>
|
<el-button type="primary" size="small" @click="onOpenModifyModal(scope.row)">编辑</el-button>
|
<el-button type="danger" size="small" :disabled="scope.row.PlanState!==0" @click="onCancel(scope.row.Id)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination-row">
|
<el-pagination :pager-count="5" layout="total, prev, pager, next, jumper" :total="total" @current-change="onPageList" />
|
</div>
|
|
<form-modal
|
v-model:visible="formVisible"
|
:type="formType"
|
:row="actionRow"
|
:select-list="selectList"
|
:import-result="importResult"
|
@submitCallback="onFormSubmitCallback"
|
@infoDelCallback="onFormInfoDelCallback"
|
/>
|
<check-modal v-model:visible="checkVisible" :infos="checkInfos" @submitCallback="confirmStart" />
|
</div>
|
</template>
|
|
<script>
|
import SearchBar from '@/components/SearchBar.vue'
|
import UploadButton from '@/components/UploadButton.vue'
|
import FormModal from './compontents/FormModal.vue'
|
import CheckModal from './compontents/CheckModal.vue'
|
const defaultQuery = {
|
planNo:'',
|
planNo_FilterMode:'1',
|
orderNo:'',
|
orderNo_FilterMode:'1',
|
planState:'',
|
planState_FilterMode:'2',
|
planType:'',
|
planType_FilterMode:'2',
|
dateRange:[],
|
dateRange1:[],
|
startTime:[],
|
createTime:[],
|
outTaskMode:'',
|
outTaskMode_FilterMode:'2'
|
}
|
export default {
|
name:'tasksOfOutputPlanPage',
|
components:{
|
SearchBar,FormModal,CheckModal,UploadButton
|
},
|
data(){
|
return {
|
selectList:{
|
types:[],
|
outTypes:[],
|
status:[]
|
},
|
list:[],
|
total:0,
|
query:{...defaultQuery},
|
queried:{...this.$config.pagination},
|
actionRow:{},
|
formVisible:false,
|
formType:'',
|
selectedEnabledData:[],
|
checkIds:[],
|
checkVisible:false,
|
checkInfos:[],
|
allStartDisabled:true,
|
exportMissingMulDisabled:true,
|
importResult:{
|
OutTaskType:null,
|
plan_OutTaskImportParams:[]
|
}
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
/* 页面初始化 */
|
init(){
|
this.$loading();
|
this.getSelectLists((f)=>{
|
if (f) {
|
this.reset(false,()=>{
|
this.$loading().close();
|
})
|
} else {
|
this.$loading().close();
|
}
|
})
|
},
|
setDefaultDateRange(){
|
let _date = this.$utils.project.dayjs();
|
let _tempArr = [_date.format('YYYY-MM-DD')]
|
_date = _date.subtract(1, 'month').add(1, 'day')
|
_tempArr.unshift(_date.format('YYYY-MM-DD'))
|
this.query.dateRange1 = _tempArr;
|
},
|
/* 搜索按钮 */
|
onSearch(){
|
this.newList()
|
},
|
/* 重置按钮 */
|
onReset(){
|
this.reset()
|
},
|
reset(needLoading=true,callback){
|
this.query = {...defaultQuery}
|
this.setDefaultDateRange()
|
this.newList(needLoading,callback)
|
},
|
/* 翻页功能 */
|
onPageList(page){
|
this.queried.page = page;
|
this.getList();
|
},
|
/* 表格刷新至首页 */
|
newList(needLoading=true,callback){
|
this.queried = {...this.query,...this.$config.pagination}
|
if (this.queried.dateRange && (this.queried.dateRange instanceof Array) && this.queried.dateRange.length===2) {
|
this.queried.startTime[0] = this.queried.dateRange[0] + ' 00:00:00'
|
this.queried.startTime[1] = this.queried.dateRange[1] + ' 23:59:59'
|
} else {
|
this.queried.startTime = []
|
}
|
if (this.queried.dateRange1 && (this.queried.dateRange1 instanceof Array) && this.queried.dateRange1.length===2) {
|
this.queried.createTime[0] = this.queried.dateRange1[0] + ' 00:00:00'
|
this.queried.createTime[1] = this.queried.dateRange1[1] + ' 23:59:59'
|
} else {
|
this.queried.createTime = []
|
}
|
this.getList(callback,needLoading)
|
},
|
/* 删除后的表格刷新 */
|
delRefresh(callback){
|
let len = this.list.length;
|
if (len===1 && this.queried.page>1) {
|
this.queried.page--;
|
}
|
this.getList(callback,false)
|
},
|
/* 更新数据表 */
|
getList(callback,needLoading=true){
|
if (needLoading) {
|
this.$loading();
|
}
|
this.$api.post('Get',this.queried,{block:'outPlan'}).then((d)=>{
|
this.total = d.total;
|
this.list = d.list.map((currentItem)=>{
|
currentItem.StartTime = this.$utils.project.parseTimeStr(currentItem.StartTime,'YYYY-MM-DD')
|
currentItem.IssueTime = this.$utils.project.parseTimeStr(currentItem.IssueTime)
|
currentItem.CreateTime = this.$utils.project.parseTimeStr(currentItem.CreateTime)
|
currentItem.ModifyTime = this.$utils.project.parseTimeStr(currentItem.ModifyTime)
|
return currentItem
|
})
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(true)
|
}).catch((err)=>{
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(false)
|
})
|
},
|
onStart(obj){
|
this.warnMsg = `确定要将出库计划号【${obj.PlanNo}】下发吗？`
|
this.$confirm(this.warnMsg, '出库任务下发').then(()=>{
|
this.checkIds = [obj.Id]
|
this.dealStart()
|
}).catch(()=>{});
|
},
|
getSelectLists(callback){
|
Promise.all([
|
this.$api.get('GetEnumberList',{category:'PlanTypeEnum'},{block:'common'}),
|
this.$api.get('GetEnumberList',{category:'PlanStateEnum'},{block:'common'}),
|
this.$api.get('GetEnumberList',{category:'OutTaskModeEnum'},{block:'common'})
|
]).then((response)=>{
|
this.selectList.types = response[0] || []
|
this.selectList.status = response[1] || []
|
this.selectList.outTypes = response[2] || []
|
callback && callback(true)
|
}).catch((err)=>{
|
callback && callback(false)
|
})
|
},
|
onNew(){
|
this.formType = 'add';
|
this.formVisible = true;
|
},
|
onImport(res){
|
this.formType = 'import';
|
this.importResult = res;
|
this.formVisible = true;
|
},
|
onDownload(){
|
this.$loading();
|
this.$api.downFile('DownExcelTemplete',{filename:'PlanOutListTemplate.xlsx'},{block:'excel'}).then((d)=>{
|
this.$loading().close();
|
this.$utils.project.downLoadFile(d,'出库计划模板.xlsx')
|
}).catch(()=>{
|
this.$loading().close();
|
})
|
},
|
onOpenModifyModal(obj){
|
this.openFormModal(obj,'modify')
|
},
|
onOpenViewModal(obj){
|
this.openFormModal(obj,'info')
|
},
|
openFormModal(obj,type){
|
this.actionRow = obj;
|
this.formType = type;
|
this.formVisible = true;
|
},
|
/* 新增/编辑成功提交后的回调 */
|
onFormSubmitCallback(newId) {
|
if (this.formType==='add') {
|
if (!newId){
|
this.newList()
|
} else {
|
this.checkIds = [newId];
|
this.dealStart(true)
|
}
|
} else {
|
this.getList()
|
}
|
},
|
onFormInfoDelCallback(){
|
this.getList()
|
},
|
onTableSelect(selection){
|
this.selectedEnabledData = [...selection];
|
let f1=true,f2=true;
|
for (let i=0;i<selection.length;i++) {
|
if (selection[i].PlanState===0) {
|
f1 = false;
|
}
|
if (!selection[i].IsPickFinished) {
|
f2 = false;
|
}
|
if (!f1 && !f2) {
|
break;
|
}
|
}
|
this.allStartDisabled = f1;
|
this.exportMissingMulDisabled = f2;
|
},
|
onStartMul(){
|
this.warnMsg = `当前选中${this.selectedEnabledData.length}条出库计划，确定要下发吗？`
|
this.$confirm(this.warnMsg, '出库计划下发').then(()=>{
|
let ids = [];
|
this.selectedEnabledData.forEach((item)=>{
|
if (item.PlanState===0) {
|
ids.push(item.Id)
|
}
|
});
|
this.checkIds = ids;
|
this.dealStart()
|
}).catch(()=>{});
|
},
|
dealStart(immediately=false){
|
this.$loading();
|
this.checkAllIn((f1)=>{
|
if (f1==='error') {
|
/* 检查齐套性出错，如果是新建立即下发，还是需要刷新计划表格 */
|
if (immediately) {
|
this.reset(false,()=>{
|
this.$loading().close();
|
})
|
} else {
|
this.$loading().close();
|
}
|
} else if (f1==='false') {
|
/* 检查齐套性 不齐套 ，如果是新建立即下发，需要刷新计划表格后弹窗，否则直接弹窗*/
|
if (immediately) {
|
this.reset(false,(f4)=>{
|
this.$loading().close();
|
if (f4) {
|
this.checkVisible = true;
|
}
|
})
|
} else {
|
this.$loading().close();
|
this.checkVisible = true;
|
}
|
} else {
|
/* 检查齐套性 齐套 */
|
this.submitStart((f2)=>{
|
if (f2) {
|
/* 下发正常，如果是新建立即下发重置表格，否则刷新表格当前页面 */
|
if (immediately) {
|
this.reset(false,()=>{
|
this.$loading().close();
|
})
|
} else {
|
this.getList(()=>{
|
this.$loading().close();
|
},false)
|
}
|
} else {
|
/* 下发出错，如果是新建立即下发，还是需要刷新计划表格 */
|
if (immediately) {
|
this.reset(false,()=>{
|
this.$loading().close();
|
})
|
} else {
|
this.$loading().close();
|
}
|
}
|
})
|
}
|
})
|
},
|
checkAllIn(callback){
|
this.$api.post('ValidatePickFinished',this.checkIds,{block:'outPlan'}).then((d)=>{
|
if (!d || d.length===0) {
|
callback && callback('true')
|
} else {
|
this.checkInfos = d;
|
callback && callback('false')
|
}
|
}).catch(()=>{
|
callback && callback('error')
|
})
|
},
|
confirmStart(){
|
this.$loading();
|
this.submitStart((f)=>{
|
if (f) {
|
this.getList(()=>{
|
this.$loading().close();
|
},false)
|
} else {
|
this.$loading().close();
|
}
|
})
|
},
|
submitStart(callback){
|
this.$api.put('IssueOutPlanTask',this.checkIds,{block:'outPlan'}).then((d)=>{
|
callback && callback(true)
|
}).catch(()=>{
|
callback && callback(false)
|
})
|
},
|
/* 删除按钮 */
|
onCancel(id){
|
this.$confirm('确定要删除该计划吗？', '删除警示').then(()=>{
|
this.dealCancel(id)
|
}).catch(()=>{});
|
},
|
/* 删除处理事件 */
|
dealCancel(id){
|
this.$loading();
|
this.$api.delete('Delete',{id},{block:'outPlan'}).then(()=>{
|
this.delRefresh(()=>{
|
this.$loading().close();
|
})
|
}).catch((err)=>{
|
this.$loading().close();
|
})
|
},
|
onExportMissing(){
|
this.$loading();
|
let listId = [];
|
this.selectedEnabledData.forEach((arrItem)=>{
|
listId.push(arrItem.Id);
|
})
|
let params = {listId}
|
this.$api.downFile('GetOutTaskDetail_Export',params,{block:'outPlan'},{},'post').then((d)=>{
|
this.$loading().close();
|
this.$utils.project.downLoadFile(d,'出库计划缺料'+new Date().getTime()+'.xls')
|
}).catch(()=>{
|
this.$loading().close();
|
})
|
},
|
onExport(){
|
this.$loading();
|
let params = JSON.parse(JSON.stringify(this.queried))
|
delete params.page;
|
delete params.pageSize;
|
this.$api.downFile('GetOutTask_Export',params,{block:'outPlan'},{},'post').then((d)=>{
|
this.$loading().close();
|
this.$utils.project.downLoadFile(d,'出库计划'+new Date().getTime()+'.xls')
|
}).catch(()=>{
|
this.$loading().close();
|
})
|
},
|
onTest(){
|
//this.checkVisible = true
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.tasks-of-output-plan-page{
|
.children-table-box{
|
padding: 0 16px;
|
}
|
}
|
</style>
|
