砂糖
b94b7823e5
1. 重构盘库流程的步骤与状态映射，调整流程节点顺序与名称 2. 拆分通用盘库详情组件PlanDetailPanel，复用各流程页面 3. 新增计划审批、盘库执行页面，完善差异审批页面 4. 为排产单明细添加增删改查API与前端操作功能 5. 为排产日期添加格式化注解，完善参数接收格式
95 lines
5.5 KiB
Vue
95 lines
5.5 KiB
Vue
<template>
|
|
<div class="app-container count-container">
|
|
<DragResizePanel :initialSize="280" :minSize="280" :maxSize="600">
|
|
<template #panelA>
|
|
<div class="left-panel">
|
|
<div class="panel-header">
|
|
<div class="header-title"><i class="el-icon-s-check"></i><span>计划审批</span><el-button size="mini" type="text" icon="el-icon-refresh" @click="getList" style="margin-left:4px;" title="刷新列表" /></div>
|
|
</div>
|
|
<div class="search-row"><el-input v-model="queryParams.planCode" placeholder="搜索计划编号..." clearable prefix-icon="el-icon-search" size="small" @keyup.enter.native="handleQuery" @clear="handleQuery" /></div>
|
|
<div v-loading="loading" class="list-body">
|
|
<div v-for="item in dataList" :key="item.planId" class="list-item" :class="{ active: currentRow && currentRow.planId === item.planId }" @click="handleRowClick(item)">
|
|
<div class="item-main"><span class="item-title">{{ item.planCode }}</span><span class="item-sub">{{ item.planName }}</span></div>
|
|
<div class="item-meta"><el-tag size="mini">计划待审批</el-tag></div>
|
|
</div>
|
|
<div v-if="dataList.length === 0 && !loading" class="list-empty"><i class="el-icon-folder-opened"></i><span>暂无待审批盘库计划</span></div>
|
|
</div>
|
|
<div class="list-footer"><pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /></div>
|
|
</div>
|
|
</template>
|
|
<template #panelB>
|
|
<div class="right-panel">
|
|
<PlanDetailPanel ref="detailPanel"
|
|
:planId="currentRow ? currentRow.planId : null"
|
|
subtitle="Plan Approval"
|
|
emptyText="请在左侧列表中选择一条盘库计划进行审批"
|
|
@approve="handleApprove"
|
|
@reject="handleReject"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</DragResizePanel>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listCountPlan, updateCountPlan } from "@/api/flow/countPlan";
|
|
import DragResizePanel from "@/components/DragResizePanel/index.vue";
|
|
import PlanDetailPanel from "./components/PlanDetailPanel.vue";
|
|
import { parseTime } from '@/utils/klp'
|
|
|
|
export default {
|
|
name: "InvCountPlanApproval",
|
|
components: { DragResizePanel, PlanDetailPanel },
|
|
data() {
|
|
return {
|
|
loading: false, total: 0,
|
|
dataList: [], currentRow: null,
|
|
queryParams: { pageNum: 1, pageSize: 10, planCode: undefined, planStatus: 1 }
|
|
};
|
|
},
|
|
created() { this.getList(); },
|
|
methods: {
|
|
parseTime,
|
|
getList() { var self = this; this.loading = true; listCountPlan(this.queryParams).then(function(r) { self.dataList = r.rows; self.total = r.total; }).finally(function() { self.loading = false; }); },
|
|
handleQuery() { this.queryParams.pageNum = 1; this.getList(); },
|
|
handleRowClick(row) { this.currentRow = row; },
|
|
handleApprove() {
|
|
var self = this;
|
|
this.$modal.confirm('确认通过"' + this.currentRow.planCode + '"的计划审批？通过后进入盘库执行阶段。').then(function() {
|
|
return updateCountPlan({ planId: self.currentRow.planId, planStatus: 2 });
|
|
}).then(function() { self.$modal.msgSuccess("审批通过，已进入盘库执行"); self.currentRow = null; self.getList(); });
|
|
},
|
|
handleReject() {
|
|
var self = this;
|
|
this.$prompt('请输入驳回原因', '驳回审批', { inputType: 'textarea', inputValidator: function(v) { return v ? true : '驳回原因不能为空'; } }).then(function({ value }) {
|
|
return updateCountPlan({ planId: self.currentRow.planId, planStatus: 0, remark: value });
|
|
}).then(function() { self.$modal.msgSuccess("已驳回至草稿"); self.currentRow = null; self.getList(); });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.count-container { height: calc(100vh - 84px); }
|
|
.left-panel { display: flex; flex-direction: column; height: 100%; background: #f5f7fa; border-right: 1px solid #e4e7ed; }
|
|
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; background: #f5f7fa; }
|
|
.header-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #303133; }
|
|
.header-title i { color: #409eff; font-size: 16px; }
|
|
.search-row { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; background: #f5f7fa; }
|
|
.list-body { flex: 1; overflow-y: auto; padding: 0 6px; }
|
|
.list-item { display: flex; align-items: center; padding: 10px 12px; margin-bottom: 2px; cursor: pointer; border-radius: 6px; transition: all 0.15s; }
|
|
.list-item:hover { background: #ebeef5; }
|
|
.list-item.active { background: #d9ecff; }
|
|
.list-item.active .item-title { color: #409eff; font-weight: 600; }
|
|
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
|
.item-title { font-size: 13px; font-weight: 500; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.item-sub { font-size: 12px; color: #909399; }
|
|
.item-meta { flex-shrink: 0; margin: 0 8px; }
|
|
.list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; color: #c0c4cc; font-size: 13px; gap: 8px; }
|
|
.list-empty i { font-size: 32px; }
|
|
.list-footer { border-top: 1px solid #e4e7ed; padding: 2px 8px 0; background: #f5f7fa; }
|
|
.right-panel { height: 100%; overflow-y: auto; padding: 12px 16px; background: #faf8f5; }
|
|
.empty-tip { display: flex; align-items: center; justify-content: center; height: 100%; color: #909399; font-size: 14px; gap: 8px; }
|
|
</style>
|