|
|
|
@ -33,7 +33,16 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<el-table class="data-table" :data="dataList" :height="tableHeight" border highlight-current-row v-loading="dataListLoading" style="width: 100%"> |
|
|
|
<el-table |
|
|
|
ref="orderTable" |
|
|
|
class="data-table" |
|
|
|
:data="dataList" |
|
|
|
:height="tableHeight" |
|
|
|
border |
|
|
|
highlight-current-row |
|
|
|
v-loading="dataListLoading" |
|
|
|
style="width: 100%" |
|
|
|
@current-change="onCurrentRowChange"> |
|
|
|
<el-table-column type="index" label="#" width="50" align="center"></el-table-column> |
|
|
|
<el-table-column prop="taskNo" label="任务单号" width="140" align="center"></el-table-column> |
|
|
|
<el-table-column prop="taskType" label="任务类型" width="100" align="center"> |
|
|
|
@ -82,6 +91,61 @@ |
|
|
|
style="margin-top: 20px; text-align: right"> |
|
|
|
</el-pagination> |
|
|
|
|
|
|
|
<div class="detail-tabs-wrap"> |
|
|
|
<el-tabs v-model="detailTabName" type="border-card"> |
|
|
|
<el-tab-pane label="节点状态和日志" name="statusLogs"> |
|
|
|
<div v-if="selectedOrder.orderNo" class="two-column-layout"> |
|
|
|
<div class="stages-column"> |
|
|
|
<div class="column-header"> |
|
|
|
<i class="el-icon-s-order"></i> |
|
|
|
<span>节点流程</span> |
|
|
|
<span class="progress-badge">{{ selectedOrderProgressPercent }}%</span> |
|
|
|
</div> |
|
|
|
<div class="stages-list"> |
|
|
|
<div |
|
|
|
v-for="(stage, index) in selectedOrderNodeList" |
|
|
|
:key="stage.nodeCode || index" |
|
|
|
class="stage-item" |
|
|
|
:class="'stage-' + getStageClass(stage.status)"> |
|
|
|
<div class="stage-icon"> |
|
|
|
<i :class="getStageIcon(stage.status)"></i> |
|
|
|
</div> |
|
|
|
<div class="stage-content"> |
|
|
|
<div class="stage-name">{{ stage.nodeName }}</div> |
|
|
|
<div class="stage-meta"> |
|
|
|
<el-tag :type="getStageTagType(stage.status)" size="mini" effect="plain">{{ stage.status || '未开始' }}</el-tag> |
|
|
|
<span class="stage-owner">负责人：{{ stage.assigneeUserName || '-' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="logs-column"> |
|
|
|
<div class="column-header"> |
|
|
|
<i class="el-icon-tickets"></i> |
|
|
|
<span>操作日志</span> |
|
|
|
<span class="logs-count">{{ selectedOrderLogList.length }}条</span> |
|
|
|
</div> |
|
|
|
<div class="logs-table-wrapper"> |
|
|
|
<el-table :data="selectedOrderLogList" border size="small" class="detail-table" v-loading="detailLogLoading" height="300px"> |
|
|
|
<el-table-column prop="logTime" label="时间" width="160" align="center"></el-table-column> |
|
|
|
<el-table-column prop="action" label="操作" width="95" align="center"></el-table-column> |
|
|
|
<el-table-column prop="nodeName" label="节点" width="130" align="center"> |
|
|
|
<template slot-scope="scope">{{ scope.row.nodeName || scope.row.nodeCode || '-' }}</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="operatorName" label="操作人" width="100" align="center"></el-table-column> |
|
|
|
<el-table-column prop="comment" label="备注" min-width="220" show-overflow-tooltip> |
|
|
|
<template slot-scope="scope">{{ scope.row.comment || '-' }}</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-empty v-else description="请先选择一条任务记录"></el-empty> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-dialog :title="saveHeaderData.orderNo ? '修改线缆/COP自制任务单' : '新增线缆/COP自制任务单'" :visible.sync="setUp.reviewFlag" width="550px" :close-on-click-modal="false" v-drag> |
|
|
|
<el-form |
|
|
|
ref="editForm" |
|
|
|
@ -151,8 +215,8 @@ |
|
|
|
<el-button plain class="search-btn" :loading="setUp.reportButton" @click="submitNodeReport">提交报工</el-button> |
|
|
|
</el-footer> |
|
|
|
</el-dialog> |
|
|
|
<el-dialog title="节点负责人分配" :visible.sync="setUp.assignFlag" width="700px" :close-on-click-modal="false" v-drag> |
|
|
|
<el-table :data="assignNodeList" border> |
|
|
|
<el-dialog title="节点负责人分配" :visible.sync="setUp.assignFlag" width="500px" :close-on-click-modal="false" v-drag> |
|
|
|
<el-table :data="assignNodeList" border class="data-table"> |
|
|
|
<el-table-column prop="nodeName" label="节点" width="180"></el-table-column> |
|
|
|
<el-table-column label="负责人"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
@ -171,7 +235,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { deleteCableCopTask, getCableCopTaskList, getNodeAssigneeList, getNodeAssigneeUsers, reportCableCopTaskNode, saveCableCopTask, saveNodeAssignee } from '@/api/longchuang/productionPlan' |
|
|
|
import { deleteCableCopTask, finishCableCopTask, getCableCopTaskList, getNodeAssigneeList, getNodeAssigneeUsers, getReportLogList, reportCableCopTaskNode, saveCableCopTask, saveNodeAssignee } from '@/api/longchuang/productionPlan' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'ProductionPlanCableCopTask', |
|
|
|
@ -185,11 +249,15 @@ export default { |
|
|
|
dataList: [], |
|
|
|
currentAssignOrder: { orderNo: '', orderType: 'CABLE_COP' }, |
|
|
|
assignNodeList: [], |
|
|
|
selectedOrder: {}, |
|
|
|
detailTabName: 'statusLogs', |
|
|
|
selectedOrderLogList: [], |
|
|
|
detailLogLoading: false, |
|
|
|
pageIndex: 1, |
|
|
|
pageSize: 20, |
|
|
|
totalPage: 0, |
|
|
|
dataListLoading: false, |
|
|
|
tableHeight: 520 |
|
|
|
tableHeight: (window.innerHeight - 320) / 2 |
|
|
|
} |
|
|
|
}, |
|
|
|
activated() { |
|
|
|
@ -206,6 +274,7 @@ export default { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.dataList = (data.page.list || []).map(this.normalizeRow) |
|
|
|
this.totalPage = data.page.totalCount || 0 |
|
|
|
this.syncSelectedOrder() |
|
|
|
} else this.loadMockData() |
|
|
|
}).catch(() => { |
|
|
|
this.dataListLoading = false |
|
|
|
@ -259,6 +328,47 @@ export default { |
|
|
|
} |
|
|
|
].map(this.normalizeRow) |
|
|
|
this.totalPage = this.dataList.length |
|
|
|
this.syncSelectedOrder() |
|
|
|
}, |
|
|
|
syncSelectedOrder() { |
|
|
|
if (!this.dataList.length) { |
|
|
|
this.selectedOrder = {} |
|
|
|
this.selectedOrderLogList = [] |
|
|
|
return |
|
|
|
} |
|
|
|
const selectedOrderNo = this.selectedOrder && this.selectedOrder.orderNo |
|
|
|
const matched = selectedOrderNo ? this.dataList.find(item => item.orderNo === selectedOrderNo) : null |
|
|
|
const current = matched || this.dataList[0] |
|
|
|
this.selectedOrder = current |
|
|
|
this.$nextTick(() => { |
|
|
|
if (this.$refs.orderTable && current) { |
|
|
|
this.$refs.orderTable.setCurrentRow(current) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.loadSelectedOrderLogList(current) |
|
|
|
}, |
|
|
|
onCurrentRowChange(row) { |
|
|
|
if (!row || !row.orderNo) { |
|
|
|
this.selectedOrder = {} |
|
|
|
this.selectedOrderLogList = [] |
|
|
|
return |
|
|
|
} |
|
|
|
this.selectedOrder = row |
|
|
|
this.loadSelectedOrderLogList(row) |
|
|
|
}, |
|
|
|
loadSelectedOrderLogList(row) { |
|
|
|
if (!row || !row.orderNo) { |
|
|
|
this.selectedOrderLogList = [] |
|
|
|
return |
|
|
|
} |
|
|
|
this.detailLogLoading = true |
|
|
|
getReportLogList({ orderNo: row.orderNo, orderType: 'CABLE_COP' }).then(({ data }) => { |
|
|
|
this.detailLogLoading = false |
|
|
|
this.selectedOrderLogList = data && data.code === 0 ? (data.rows || []) : [] |
|
|
|
}).catch(() => { |
|
|
|
this.detailLogLoading = false |
|
|
|
this.selectedOrderLogList = [] |
|
|
|
}) |
|
|
|
}, |
|
|
|
resetQuery() { |
|
|
|
this.searchData = { taskNo: '', taskType: '', sourceProjectNo: '', status: '', planStartDate: '', planEndDate: '', page: 1, limit: 20 } |
|
|
|
@ -270,6 +380,7 @@ export default { |
|
|
|
}, |
|
|
|
saveTask() { |
|
|
|
if (!this.saveHeaderData.taskNo || !this.saveHeaderData.taskType) return this.$message.warning('请先填写任务单号和任务类型') |
|
|
|
this.saveHeaderData.projectNo = this.saveHeaderData.taskNo |
|
|
|
this.setUp.saveButton = true |
|
|
|
saveCableCopTask(this.saveHeaderData).then(({data}) => { |
|
|
|
this.setUp.saveButton = false |
|
|
|
@ -376,13 +487,20 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
finishTask(row) { |
|
|
|
row.status = '已完成' |
|
|
|
row.finishDate = this.dayjs().format('YYYY-MM-DD') |
|
|
|
row.reportQty = row.taskQty |
|
|
|
row.nodeList = row.nodeList.map(item => ({ ...item, status: '已完成' })) |
|
|
|
row.currentNode = '全部完成' |
|
|
|
row.nodeDoneCount = row.nodeTotalCount |
|
|
|
this.$message.success('已标记为完工') |
|
|
|
finishCableCopTask({ orderNo: row.orderNo }).then(({data}) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.$message.success(data.msg || '完工成功') |
|
|
|
this.searchTable() |
|
|
|
} else this.$message.error(data.msg || '完工失败') |
|
|
|
}).catch(() => { |
|
|
|
row.status = '已完成' |
|
|
|
row.finishDate = this.dayjs().format('YYYY-MM-DD') |
|
|
|
row.reportQty = row.taskQty |
|
|
|
row.nodeList = row.nodeList.map(item => ({ ...item, status: '已完成' })) |
|
|
|
row.currentNode = '全部完成' |
|
|
|
row.nodeDoneCount = row.nodeTotalCount |
|
|
|
this.$message.success('后端未完成，已在前端演示完工') |
|
|
|
}) |
|
|
|
}, |
|
|
|
deleteTask(row) { |
|
|
|
this.$confirm('确定删除该任务单吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { |
|
|
|
@ -402,6 +520,21 @@ export default { |
|
|
|
const map = { 已排产: 'info', 进行中: 'warning', 已完成: 'success' } |
|
|
|
return map[status] || 'info' |
|
|
|
}, |
|
|
|
getStageClass(status) { |
|
|
|
if (status === '已完成') return 'done' |
|
|
|
if (status === '进行中') return 'processing' |
|
|
|
return 'pending' |
|
|
|
}, |
|
|
|
getStageIcon(status) { |
|
|
|
if (status === '已完成') return 'el-icon-check' |
|
|
|
if (status === '进行中') return 'el-icon-loading' |
|
|
|
return 'el-icon-time' |
|
|
|
}, |
|
|
|
getStageTagType(status) { |
|
|
|
if (status === '已完成') return 'success' |
|
|
|
if (status === '进行中') return 'warning' |
|
|
|
return 'info' |
|
|
|
}, |
|
|
|
sizeChangeHandle(val) { |
|
|
|
this.pageSize = val |
|
|
|
this.pageIndex = 1 |
|
|
|
@ -411,6 +544,19 @@ export default { |
|
|
|
this.pageIndex = val |
|
|
|
this.searchTable() |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
selectedOrderNodeList() { |
|
|
|
return (this.selectedOrder && this.selectedOrder.nodeList) ? this.selectedOrder.nodeList : [] |
|
|
|
}, |
|
|
|
selectedOrderProgressPercent() { |
|
|
|
const total = this.selectedOrderNodeList.length |
|
|
|
if (!total) { |
|
|
|
return 0 |
|
|
|
} |
|
|
|
const done = this.selectedOrderNodeList.filter(item => item.status === '已完成').length |
|
|
|
return Math.round((done * 100) / total) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -420,7 +566,10 @@ export default { |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.data-table >>> .cell { |
|
|
|
line-height: 20px; |
|
|
|
height: 20px; |
|
|
|
} |
|
|
|
.data-table >>> .el-table__header-wrapper th, |
|
|
|
.data-table >>> .el-table__fixed-header-wrapper th { |
|
|
|
background-color: #f5f7fa !important; |
|
|
|
@ -520,4 +669,130 @@ export default { |
|
|
|
margin-left: 5px; |
|
|
|
margin-top: -5px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-tabs-wrap { |
|
|
|
margin-top: 12px; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-table { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-table >>> .el-table__header-wrapper th, |
|
|
|
.detail-table >>> .el-table__fixed-header-wrapper th { |
|
|
|
background-color: #f5f7fa !important; |
|
|
|
color: #333; |
|
|
|
font-weight: 600; |
|
|
|
border-color: #ebeef5; |
|
|
|
} |
|
|
|
|
|
|
|
.two-column-layout { |
|
|
|
display: flex; |
|
|
|
gap: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.stages-column { |
|
|
|
width: 38%; |
|
|
|
min-width: 320px; |
|
|
|
border: 1px solid #ebeef5; |
|
|
|
border-radius: 4px; |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.logs-column { |
|
|
|
flex: 1; |
|
|
|
border: 1px solid #ebeef5; |
|
|
|
border-radius: 4px; |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.column-header { |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 6px; |
|
|
|
padding: 0 12px; |
|
|
|
border-bottom: 1px solid #ebeef5; |
|
|
|
font-weight: 600; |
|
|
|
color: #303133; |
|
|
|
} |
|
|
|
|
|
|
|
.progress-badge, |
|
|
|
.logs-count { |
|
|
|
margin-left: auto; |
|
|
|
color: #409eff; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.stages-list { |
|
|
|
max-height: 300px; |
|
|
|
overflow-y: auto; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-item { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
gap: 10px; |
|
|
|
padding: 4px 8px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-item + .stage-item { |
|
|
|
margin-top: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-item.stage-done { |
|
|
|
background: #f0f9eb; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-item.stage-processing { |
|
|
|
background: #fdf6ec; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-item.stage-pending { |
|
|
|
background: #f5f7fa; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-icon { |
|
|
|
width: 22px; |
|
|
|
height: 22px; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-size: 13px; |
|
|
|
background: #fff; |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
color: #606266; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-content { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-name { |
|
|
|
font-size: 13px; |
|
|
|
color: #303133; |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-meta { |
|
|
|
margin-top: 6px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-owner { |
|
|
|
color: #606266; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.logs-table-wrapper { |
|
|
|
padding: 8px; |
|
|
|
} |
|
|
|
</style> |
