zouyu
2023-12-13 0c88a6ccbf2beefe9c81cdbf2b28ac1438616292
src/views/plan/productionschedul/index.vue
@@ -3,13 +3,20 @@
    <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>
@@ -20,7 +27,7 @@
            <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>
@@ -28,10 +35,15 @@
                      placement="top"
                      v-for="(item, index) in scheduleList"
                      :key="index"
                      :timestamp="item.planTime">
                        <el-card style="width:95%;margin: 0;padding: 0px 10px;">
                          <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>
@@ -41,6 +53,82 @@
        </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>
@@ -48,14 +136,24 @@
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,
@@ -63,17 +161,20 @@
      page: {
        total: 10,
        currentPage: 1,
        pageSize: 10
        pageSize: 10,
        pagerCount: 5
      },
      option: {
        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,
@@ -196,7 +297,6 @@
  },
  components: {
    ttable,
    TableForm,
  },
  computed: {
    ...mapGetters(['permissions']),
@@ -213,7 +313,15 @@
    this.rowCalc()
  },
  watch:{
    editDialogVisible(newVal){
      if(!newVal){
        this.editForm = {
          id: null,
          productionRoutine: null,
          productionStatus: null,
        }
      }
    }
  },
  mounted() {
@@ -221,6 +329,70 @@
  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){
@@ -270,10 +442,14 @@
    },
    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) {
@@ -284,12 +460,24 @@
      }
      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
@@ -299,17 +487,22 @@
      })
      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)
        })
      })
    },
    //动态合并方法
@@ -380,6 +573,9 @@
}
</script>
<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;