| | |
| | | <basic-container> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <div style="height:80vh;"> |
| | | <avue-crud :data="tableData" ref="crud" :option="option" :span-method="spanMethod" |
| | | <div style="height:80vh;padding: 0px 10px;"> |
| | | <avue-crud |
| | | :data="tableData" |
| | | ref="crud" |
| | | :option="option" |
| | | :span-method="spanMethod" |
| | | @refresh-change="getData" |
| | | @current-change="handleCurrentChange" |
| | | @size-change="handleSizeChange" |
| | | :page="page" |
| | | @selection-change="selectionRow" |
| | | :table-loading="loading"> |
| | | <template #menu="{ row, index }"> |
| | | <el-button type="text" icon="el-icon-edit" size="small" @click="editHandle(row, index)">编辑</el-button> |
| | | <el-button type="text" icon="el-icon-delete" size="small" @click="deleteHandle(row, index)">删除</el-button> |
| | | </template> |
| | | </avue-crud> |
| | |
| | | <el-card> |
| | | <div slot="header" class="clearfix"> |
| | | <span>调度时间线</span> |
| | | <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
| | | <el-button v-if="scheduleList.length>0" @click="openEditDialog" style="float: right; padding: 3px 0" type="text">编辑</el-button> |
| | | </div> |
| | | <div style="height:70vh;overflow-y: scroll;"> |
| | | <el-timeline reverse> |
| | | <el-timeline> |
| | | <el-timeline-item |
| | | placement="top" |
| | | v-for="(item, index) in scheduleList" |
| | | :key="index" |
| | | :timestamp="item.planTime"> |
| | | <el-card style="width:95%;margin: 0;padding: 0px 0px;"> |
| | | <p style="font-weight: bold;">{{item.title}}</p> |
| | | <p>实际时间: {{ item.actualTime }}</p> |
| | | :timestamp="item.title"> |
| | | <el-card shadow="hover" :body-style="{margin: '0',padding:'0px 20px 0px 20px'}" style="width:90%;"> |
| | | <p> |
| | | <span style="font-weight: bold;">计划时间: </span> |
| | | {{item.planTime}} |
| | | </p> |
| | | <p> |
| | | <span style="font-weight: bold;">实际时间: </span> |
| | | {{ item.actualTime }}</p> |
| | | </el-card> |
| | | </el-timeline-item> |
| | | </el-timeline> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | </basic-container> |
| | | <el-dialog |
| | | title="编辑时间线" |
| | | :visible.sync="dialogVisible" |
| | | top="5vh" |
| | | width="50%" |
| | | :before-close="handleClose"> |
| | | <div style="height:60vh;overflow-y: scroll;"> |
| | | <el-timeline> |
| | | <el-timeline-item |
| | | placement="top" |
| | | v-for="(item, index) in scheduleEditList" |
| | | :key="index" |
| | | :timestamp="item.title"> |
| | | <el-card shadow="hover" style="width:90%" :body-style="{padding:'20px 20px 5px 20px'}"> |
| | | <el-row> |
| | | <el-col :span="3"> |
| | | <p style="font-weight: bold;line-height: 50%;">计划时间: </p> |
| | | </el-col> |
| | | <el-col :span="21"> |
| | | <el-date-picker |
| | | style="width:100%" |
| | | v-model="item.planTime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="datetime" |
| | | placeholder="选择日期时间"> |
| | | </el-date-picker> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="3"> |
| | | <p style="font-weight: bold;line-height: 50%;">实际时间: </p> |
| | | </el-col> |
| | | <el-col :span="21"> |
| | | <el-date-picker |
| | | style="width:100%" |
| | | v-model="item.actualTime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="datetime" |
| | | placeholder="选择日期时间"> |
| | | </el-date-picker> |
| | | </el-col> |
| | | </el-row> |
| | | </el-card> |
| | | </el-timeline-item> |
| | | </el-timeline> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="confirmEditSchedul">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <el-dialog |
| | | title="编辑" |
| | | :visible.sync="editDialogVisible" |
| | | width="50%"> |
| | | <el-form :model="editForm" label-width="120px"> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="生产情况:"> |
| | | <el-input style="width:100%" placeholder="请输入生产情况" type="textarea" :row="2" v-model="editForm.productionStatus"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="生产程度:"> |
| | | <el-input style="width:100%" placeholder="请输入生产程度" type="textarea" :row="2" v-model="editForm.productionRoutine"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="editDialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="confirmEdit()">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import { |
| | | fetchScheduleList, |
| | | fetchScheduleById, |
| | | fillTime, |
| | | deleteSchedul, |
| | | updateSchedul |
| | | } from '@/api//plan/productionschedul' |
| | | import TableForm from './template-form' |
| | | import ttable from '@/views/common/ztt-table.vue' |
| | | import { mapGetters } from 'vuex' |
| | | export default { |
| | | data() { |
| | | return { |
| | | editForm:{ |
| | | id: null, |
| | | productionRoutine: null, |
| | | productionStatus: null, |
| | | }, |
| | | editDialogVisible: false, |
| | | dialogVisible: false, |
| | | scheduleList: [], |
| | | scheduleEditList: [], |
| | | typeOptions: [], |
| | | multipleSelection: [], |
| | | loading: true, |
| | |
| | | page: { |
| | | total: 10, |
| | | currentPage: 1, |
| | | pageSize: 10 |
| | | pageSize: 10, |
| | | pagerCount: 5 |
| | | }, |
| | | option: { |
| | | height: 'auto', |
| | | height: 400, |
| | | selection: true, |
| | | columnBtn: false, |
| | | index: true, |
| | | rowKey: 'product', |
| | | indexFixed: false, |
| | | selectionFixed: false, |
| | | rowKey: 'mid', |
| | | indexLabel: '序号', |
| | | menuAlign: 'center', |
| | | menuWidth: 100, |
| | | menuWidth: 130, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | addBtn: false, |
| | |
| | | }, |
| | | components: { |
| | | ttable, |
| | | TableForm, |
| | | }, |
| | | computed: { |
| | | ...mapGetters(['permissions']) |
| | | ...mapGetters(['permissions']), |
| | | }, |
| | | created(){ |
| | | this.loading = true |
| | |
| | | this.rowCalc() |
| | | }, |
| | | watch:{ |
| | | |
| | | editDialogVisible(newVal){ |
| | | if(!newVal){ |
| | | this.editForm = { |
| | | id: null, |
| | | productionRoutine: null, |
| | | productionStatus: null, |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | |
| | |
| | | beforeDestroy() { |
| | | }, |
| | | methods: { |
| | | confirmEdit(){ |
| | | const _than = this |
| | | updateSchedul(this.editForm).then(res=>{ |
| | | if(res.status===200){ |
| | | _than.$message.success("更新成功") |
| | | _than.editDialogVisible = false |
| | | _than.getData() |
| | | } |
| | | }).catch(error=>{ |
| | | console.error(error); |
| | | }) |
| | | }, |
| | | editHandle(row,index){ |
| | | if(row){ |
| | | this.editForm.id = row.mid |
| | | this.editForm.productionRoutine = row.productionRoutine |
| | | this.editForm.productionStatus = row.productionStatus |
| | | this.editDialogVisible = true |
| | | } |
| | | }, |
| | | openEditDialog(){ |
| | | this.scheduleEditList = JSON.parse(JSON.stringify(this.scheduleList)) |
| | | this.dialogVisible = true |
| | | }, |
| | | confirmEditSchedul(){ |
| | | let data = this.scheduleEditList |
| | | let orderObj = this.multipleSelection[0] |
| | | let obj = { |
| | | "documentActualTime": data[0].actualTime, |
| | | "documentPlanTime": data[0].planTime, |
| | | "bomActualTime": data[1].actualTime, |
| | | "bomPlanTime": data[1].planTime, |
| | | "contractActualTime": data[2].actualTime, |
| | | "contractPlanTime": data[2].planTime, |
| | | "arrivalActualTime": data[3].actualTime, |
| | | "arrivalPlanTime": data[3].planTime, |
| | | "checkActualTime": data[4].actualTime, |
| | | "checkPlanTime": data[4].planTime, |
| | | "productActualTime": data[5].actualTime, |
| | | "productPlanTime": data[5].planTime, |
| | | "id": orderObj.id, |
| | | "contractNo": orderObj.contractNo, |
| | | "customerName": orderObj.customerName, |
| | | "deliveryDate": orderObj.deliveryDate, |
| | | "orderTime": orderObj.orderTime, |
| | | "productType": orderObj.productType, |
| | | "projectName": orderObj.projectName |
| | | } |
| | | fillTime(obj).then(res=>{ |
| | | if(res.status===200){ |
| | | this.$message.success("更新成功") |
| | | }else{ |
| | | this.$message.error("更新失败") |
| | | } |
| | | this.getScheduleById(orderObj.id) |
| | | this.dialogVisible = false |
| | | }).catch(error=>{ |
| | | console.log(error); |
| | | }) |
| | | |
| | | }, |
| | | handleClose(done){ |
| | | done() |
| | | }, |
| | | initTimeLine(data){ |
| | | this.scheduleList = [] |
| | | if(data){ |
| | |
| | | }, |
| | | selectionRow(val){ |
| | | if (val.length > 1) { |
| | | const preVal = val.shift(); |
| | | this.$refs.crud.toggleRowSelection(preVal, false); |
| | | } |
| | | this.getScheduleById(val[0].id) |
| | | const preVal = val.shift(); |
| | | this.$refs.crud.toggleRowSelection(preVal, false); |
| | | } |
| | | else{ |
| | | this.scheduleList=[] |
| | | } |
| | | this.multipleSelection = val |
| | | this.getScheduleById(val[0].id) |
| | | }, |
| | | formatDate(row, cellValue){ |
| | | if (cellValue) { |
| | |
| | | } |
| | | return '' |
| | | }, |
| | | handleSizeChange(val){ |
| | | if(val){ |
| | | this.page.pageSize=val |
| | | this.getData() |
| | | } |
| | | }, |
| | | handleCurrentChange(val){ |
| | | if(val){ |
| | | this.page.currentPage=val |
| | | this.getData() |
| | | } |
| | | }, |
| | | // 获取数据列表 |
| | | getData() { |
| | | this.loading = true |
| | | let param = { |
| | | size: 20, |
| | | current: 1, |
| | | size: this.page.pageSize, |
| | | current: this.page.currentPage, |
| | | } |
| | | fetchScheduleList(param).then((res) => { |
| | | this.tableData = res.data.data.records |
| | | this.page.total = res.data.data.total |
| | | this.page.currentPage = res.data.data.records.pages |
| | | this.scheduleList = [] |
| | | }) |
| | | this.loading = false |
| | | |
| | | }, |
| | | handleCurrentChange(val) { |
| | | this.multipleSelection = val |
| | | }, |
| | | // 删除 |
| | | deleteHandle(row,index) { |
| | | this.$confirm('是否确认删除', '提示', { |
| | | const _than = this |
| | | _than.$confirm('是否确认删除', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(function() { |
| | | |
| | | deleteSchedul(row.mid).then(res=>{ |
| | | if(res.status===200){ |
| | | _than.$message.success("删除成功") |
| | | _than.getData() |
| | | } |
| | | }).catch(error=>{ |
| | | console.error(error) |
| | | }) |
| | | }) |
| | | }, |
| | | //动态合并方法 |
| | |
| | | } |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | <style> |
| | | .el-tag--small{ |
| | | display: none; |
| | | } |
| | | .basic-template-table .el-table__body .el-table__row td:first-child .cell { |
| | | padding-left: 0px; |
| | | padding-right: 0px; |
| | |
| | | content: '\E63E'; |
| | | font-size: 14px; |
| | | visibility: hidden; |
| | | } |
| | | .avue-main .el-card__body{ |
| | | padding: 0px 20px; |
| | | } |
| | | </style> |