生产调度修改

zouyu

2024-02-29 363678a54142e62fdd4ca39a0db5c54af1a704dc

 src/views/plan/productionschedul/index.vue

@@ -2,57 +2,93 @@
  <div class="mod-config">
    <basic-container>
      <el-row>
        <el-col :span="12">
          <div style="height:80vh;padding: 0px 10px;">
            <avue-crud :data="tableData" ref="crud" :option="option" :span-method="spanMethod" 
            @refresh-change="getData"
            :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>
          </div>
        </el-col>
        <el-col :span="12" style="padding-left: 10px">
          <div style="">
            <el-card>
              <div slot="header" class="clearfix">
                <span>调度时间线</span>
                <el-button v-if="scheduleList.length>0" @click="openEditDialog" style="float: right; padding: 3px 0" type="text">编辑</el-button>
        <el-col :span="24">
          <el-row style="padding:0px 10px;">
            <el-col :span="24" style="margin: 0;">
              <div style="display:flex;height:36px;justify-content: space-between;align-items:center;">
                <div>
                    <el-dropdown @command="changeTable">
                        <span :style="dropdownTitleStyle" class="el-dropdown-link">
                            {{dropdownTitle}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="undone">待完成调度</el-dropdown-item>
                            <el-dropdown-item command="done">已完成调度</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div>
                  <el-button @click="tagFinished" v-if="showUnDownTable" size="mini" round type="success">标记已完成</el-button>
                  <el-button size="mini" round type="primary"
                  v-if="permissions.plan_productionschedul_edit_line && showUnDownTable"
                  @click="openEditDialog">编辑时间线</el-button>
                  <el-tooltip content="刷新">
                    <el-button circle icon="el-icon-refresh" @click="getDataList"></el-button>
                  </el-tooltip>
                </div>
              </div>
              <div style="height:70vh;overflow-y: scroll;">
                <el-timeline>
                    <el-timeline-item
                      placement="top"
                      v-for="(item, index) in scheduleList"
                      :key="index"
                      :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>
            </div>
            </el-card>
          </div>
              <!-- 待完成调度表格 -->
              <avue-crud
              v-if="showUnDownTable"
              class="unfinished-crud"
              :data="tableData"
              ref="unfinished"
              :option="option"
              :span-method="spanMethod"
              @refresh-change="getDataList"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              @cell-click="handleClickCell"
              :page="page"
              @selection-change="selectionRow"
              :table-loading="loading">
                <template slot="product" slot-scope="scope">
                    <el-link type="primary">{{ scope.row.product }}</el-link>
                </template>
                <template #menu="{ row, index }">
                    <el-button
                    v-if="permissions.plan_productionschedul_edit"
                    type="text"
                    icon="el-icon-edit"
                    size="small"
                    @click="editHandle(row, index)">编辑</el-button>
                    <el-button
                    v-if="permissions.plan_productionschedul_del"
                    type="text"
                    icon="el-icon-delete"
                    size="small"
                    @click="deleteHandle(row, index)">删除</el-button>
                </template>
              </avue-crud>
              <!-- 已完成调度表格 -->
              <avue-crud
              v-else
              class="finished-crud"
              :data="finishedTableData"
              ref="finished"
              :option="finishedOption"
              :span-method="spanMethod"
              @refresh-change="getFinishedData"
              @current-change="handleCurrentChange"
              @cell-click="handleClickCell"
              @size-change="handleSizeChange"
              :page="finishedPage"
              @selection-change="selectionFinishedRow">
                <template slot="product" slot-scope="scope">
                    <el-link type="primary">{{ scope.row.product }}</el-link>
                </template>
              </avue-crud>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </basic-container>
    <!-- 编辑时间线 -->
    <el-dialog
    title="编辑时间线"
    :visible.sync="dialogVisible"
    top="5vh"
    width="50%"
    :before-close="handleClose">
    width="50%">
      <div style="height:60vh;overflow-y: scroll;">
        <el-timeline>
          <el-timeline-item
@@ -70,8 +106,8 @@
                      style="width:100%"
                      v-model="item.planTime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime" 
                      placeholder="选择日期时间">
                      type="datetime"
                      placeholder="选择计划时间">
                    </el-date-picker>
                  </el-col>
                </el-row>
@@ -84,8 +120,8 @@
                      style="width:100%"
                      v-model="item.actualTime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime" 
                      placeholder="选择日期时间">
                      type="datetime"
                      placeholder="选择实际时间">
                    </el-date-picker>
                  </el-col>
                </el-row>
@@ -97,32 +133,63 @@
        <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>
    </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>
    <!-- 查看时间线 -->
    <el-dialog
    title="查看调度时间线"
    top="5vh"
    :visible.sync="showTimeLineDialog"
    width="40%">
        <el-card>
            <div style="height:500px;overflow-y: scroll;">
            <el-timeline>
                <el-timeline-item
                    placement="top"
                    :color="(item.actualTime) ? '#34BD66' :null"
                    :icon="(item.actualTime) ? 'el-icon-circle-check' :null"
                    v-for="(item, index) in scheduleList"
                    :key="index"
                    :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>
            </div>
        </el-card>
    </el-dialog>
  </div>
</template>

@@ -132,14 +199,22 @@
  fetchScheduleById,
  fillTime,
  deleteSchedul,
  updateState,
  checkTimeLines,
  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 {
      dropdownTitleStyle: {
        color: '#E84738',
        fontWeight: 'bold'
      },
      showUnDownTable: true,
      dropdownTitle: '待完成调度',
      showTimeLineDialog:false,
      editForm:{
        id: null,
        productionRoutine: null,
@@ -153,13 +228,25 @@
      multipleSelection: [],
      loading: true,
      tableData: [],
      finishedTableData: [],
      page: {
        total: 10,
        total: 0,
        currentPage: 1,
        pageSize: 10
        pageSize: 10,
        pagerCount: 5
      },
      finishedPage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pagerCount: 5
      },
      option: {
        height: 400,
        defaultSort:{
          prop:'id',
          order:'descending'
        },
        height: 530,
        selection: true,
        columnBtn: false,
        index: true,
@@ -218,6 +305,119 @@
            prop: 'product',
            label: '产品名',
            overHidden: true,
            slot: true
          },
          {
            minWidth: 120,
            prop: 'specs',
            label: '规格型号',
            overHidden: true,
          },
          {
            minWidth: 120,
            prop: 'unit',
            label: '单位',
            overHidden: true,
          },
          {
            minWidth: 120,
            prop: 'number',
            label: '数量',
            overHidden: true,
          },
          {
            minWidth: 120,
            prop: 'productionStatus',
            label: '生产情况',
            overHidden: true,
          },
          {
            minWidth: 120,
            prop: 'productionRoutine',
            label: '生产程度',
            overHidden: true,
          },
          {
            minWidth: 120,
            prop: 'projectLeader',
            label: '项目负责人',
            overHidden: true,
          },
          {
            minWidth: 150,
            prop: 'remark',
            label: '备注',
            overHidden: true,
          }
        ],
      },
      finishedOption: {
        refreshBtn: false, // 是否显示刷新按钮
        defaultSort:{
          prop:'id',
          order:'descending'
        },
        height: 230,
        selection: true,
        columnBtn: false,
        index: true,
        indexFixed: false,
        selectionFixed: false,
        rowKey: 'mid',
        indexLabel: '序号',
        menu: false,
        menuAlign: 'center',
        menuWidth: 130,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        border: true,
        align: 'center',
        column: [
          {
            minWidth: 120,
            prop: 'projectName',
            label: '项目名称',
            overHidden: true,
          },
          {
            minWidth: 100,
            prop: 'contractNo',
            label: '合同号',
            overHidden: true,
          },
          {
            minWidth: 120,
            prop: 'orderTime',
            label: '接单日期',
            overHidden: true,
            formatter: (row,columnValue)=> this.formatDate(row,columnValue)
          },
          {
            minWidth: 120,
            prop: 'customerName',
            label: '客户名称',
            overHidden: true,
          },
          {
            minWidth: 120,
            prop: 'deliveryDate',
            label: '交货日期',
            overHidden: true,
            formatter: (row,columnValue)=> this.formatDate(row,columnValue)
          },
          {
            minWidth: 120,
            prop: 'productType',
            label: '产品类型',
            overHidden: true,
          },
          {
            minWidth: 120,
            prop: 'product',
            label: '产品名',
            overHidden: true,
            slot: true
          },
          {
            minWidth: 120,
@@ -264,12 +464,15 @@
        ],
      },
      spanArr: [{
        prop: 'id',
        span: []
      },{
        prop: 'projectName',
        span: []
      }, {
        prop: 'contractNo',
        span: []
      }, 
      },
      {
        prop: 'orderTime',
        span: []
@@ -291,20 +494,23 @@
  },
  components: {
    ttable,
    TableForm,
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  created(){
    if(!this.permissions.plan_productionschedul_edit && !this.permissions.plan_productionschedul_del){
      this.option.menu = false
    }
    this.loading = true
    this.getData()
    this.getUnFinishedData()
    this.getFinishedData()
    this.getParamType()
    this.rowSort()
    // this.rowSort()
    this.rowCalc()
  },
  beforeUpdate() {
    this.rowSort()
    // this.rowSort()
    this.rowCalc()
  },
  watch:{
@@ -316,21 +522,58 @@
          productionStatus: null,
        }
      }
    },
    multipleSelection(newVal){
      if(newVal.length==0){
        this.scheduleList = []
      }
    }
  },
  mounted() {

  },
  beforeDestroy() {
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    handleClickCell(row, column, cell, event){
        if(column.label === '产品名'){
            this.getScheduleById(row.mid)
            this.showTimeLineDialog = true
        }
    },
    changeTable(command){
        if(command === 'undone'){
            this.dropdownTitle = '待完成调度'
            this.dropdownTitleStyle = {color:'#E84738',fontWeight: 'bold'}
            this.showUnDownTable = true
        }else if(command === 'done'){
            this.dropdownTitle = '已完成调度'
            this.dropdownTitleStyle = {color:'#34BD66',fontWeight: 'bold'}
            this.showUnDownTable = false
        }
    },
    tagFinished(){
      if(this.multipleSelection.length < 1){
        this.$message.warning("请至少选择一条数据")
        return
      }
      let ids = this.multipleSelection.map(ele=>{
        return ele.mid
      })
      updateState(ids).then(res=>{
        if(res.status===200){
          this.$message.success("更新成功")
          this.getUnFinishedData()
          this.getFinishedData()
        }
      }).catch(error=>{
        console.error(error);
      })
    },
    confirmEdit(){
      const _than = this
      updateSchedul(this.editForm).then(res=>{
        if(res.status===200){
          _than.$message.success("更新成功")
          _than.editDialogVisible = false
          _than.getData()
          _than.getUnFinishedData()
        }
      }).catch(error=>{
        console.error(error);
@@ -345,12 +588,31 @@
      }
    },
    openEditDialog(){
      this.scheduleEditList = JSON.parse(JSON.stringify(this.scheduleList))
      this.dialogVisible = true
      if(this.multipleSelection.length<1){
        this.$message.warning("请至少选择一条数据")
        return
      }
      let mIds = this.multipleSelection.map(ele=>{
        return ele.mid
      })
      checkTimeLines(mIds).then(res=>{
        if(res.data.data.length==1){
          let dataList = this.initTimeLine(res.data.data[0])
          this.scheduleEditList = dataList
          this.dialogVisible = true
        }else{
          this.$message.error("选中数据的调度时间线不一致!")
        }
      }).catch(error=>{
        console.error(error);
      })
    },
    confirmEditSchedul(){
      const _than = this
      let data = this.scheduleEditList
      let orderObj = this.multipleSelection[0]
      let mIds = this.multipleSelection.map(ele=>{
        return ele.mid
      })
      let obj = {
        "documentActualTime": data[0].actualTime,
        "documentPlanTime": data[0].planTime,
@@ -364,32 +626,22 @@
        "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
        "mids": mIds,
      }
      fillTime(obj).then(res=>{
        if(res.status===200){
          this.$message.success("更新成功")
            _than.$message.success("更新成功")
        }else{
          this.$message.error("更新失败")
            _than.$message.error("更新失败")
        }
        this.getScheduleById(orderObj.id)
        this.dialogVisible = false
        // _than.getScheduleById(orderObj.id)
        _than.dialogVisible = false
      }).catch(error=>{
        console.log(error);
        console.error(error);
      })

    },
    handleClose(done){
      done()
    },
    initTimeLine(data){
      this.scheduleList = []
      let scheduleList = []
      if(data){
        let arr = [
          {
@@ -423,29 +675,35 @@
            planTime: data.productPlanTime,
          },
        ]
        this.scheduleList = arr
        scheduleList = arr
        return scheduleList
      }
    },
    getScheduleById(id){
      if(id){
        fetchScheduleById(id).then(res=>{
          this.initTimeLine(res.data.data)
          this.scheduleList = this.initTimeLine(res.data.data)
        }).catch(error=>{
          console.log(error);
          console.error(error);
        })
      }
    },
    selectionRow(val){
      console.log(val);
      this.multipleSelection = val
    //   if(this.multipleSelection.length>0){
    //       this.getScheduleById(val[val.length-1].mid)
    //       this.showTimeLineDialog = true
    //   }
    },
    selectionFinishedRow(val){
      if (val.length > 1) {
        const preVal = val.shift();
        this.$refs.crud.toggleRowSelection(preVal, false);
        this.$refs.finished.toggleRowSelection(preVal, false);
      }
      else{
        this.scheduleList=[]
      }
      this.multipleSelection = val
      this.getScheduleById(val[0].id)
      this.getScheduleById(val[0].mid)
    },
    formatDate(row, cellValue){
      if (cellValue) {
@@ -456,12 +714,32 @@
      }
      return ''
    },
    handleSizeChange(val){
      if(val){
        this.page.pageSize=val
        this.getUnFinishedData()
      }
    },
    handleCurrentChange(val){
      if(val){
        this.page.currentPage=val
        this.getUnFinishedData()
      }
    },
    // 获取数据列表
    getData() {
    getDataList(){
      this.getUnFinishedData()
      this.getFinishedData()
      this.$nextTick(()=>{
          this.rowCalc()
      })
    },
    getUnFinishedData() {
      this.loading = true
      let param = {
        size: 20,
        current: 1,
        size: this.page.pageSize,
        current: this.page.currentPage,
        state: false
      }
      fetchScheduleList(param).then((res) => {
        this.tableData = res.data.data.records
@@ -471,13 +749,25 @@
      })
      this.loading = false
    },
    handleCurrentChange(val) {
      this.multipleSelection = val
    getFinishedData() {
      this.loading = true
      let param = {
        size: this.finishedPage.pageSize,
        current: this.finishedPage.currentPage,
        state: true
      }
      fetchScheduleList(param).then((res) => {
        this.finishedTableData = res.data.data.records
        this.finishedPage.total = res.data.data.total
        this.finishedPage.currentPage = res.data.data.records.pages
        this.scheduleList = []
      })
      this.loading = false
    },
    // 删除
    deleteHandle(row,index) {
      const _than = this
      _than.$confirm('是否确认删除', '提示', {
      _than.$confirm('是否确认删除该生产调度信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
@@ -485,7 +775,7 @@
        deleteSchedul(row.mid).then(res=>{
          if(res.status===200){
            _than.$message.success("删除成功")
            _than.getData()
            _than.getDataList()
          }
        }).catch(error=>{
          console.error(error)
@@ -500,7 +790,7 @@
        ele.span = this.rowSpan(ele.prop, parent)
      })
    },
    rowSort(list) {
    rowSort() {
      let propList = this.spanArr.map(ele => ele.prop)
      this.spanArr.forEach((ele, index) => {
        let key = ele.prop
@@ -560,42 +850,22 @@
}
</script>
<style>
.basic-template-table .el-table__body .el-table__row td:first-child .cell {
  padding-left: 0px;
  padding-right: 0px;
}

.basic-template-table .el-table__body .el-table__row:hover {
  cursor: move;
}

.basic-template-table .el-table__body .el-table__row:hover .icon {
  display: inline-block;
}

.basic-template-table .el-table__body .el-table__row .icon {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 18px;
.unfinished-crud .avue-crud__tip{
  display: none;
}

.aufontAll {
  font-family: aufontAll !important;
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
.unfinished-crud .avue-crud__menu{
  display: none;
}

.h-icon-all-drag {
  background: url('/img/tz.png') center center no-repeat;
  background-size: cover;
  font-size: 14px;
.finished-crud .avue-crud__tip{
  display: none;
}
.h-icon-all-drag:before {
  content: '\E63E';
  font-size: 14px;
  visibility: hidden;
.finished-crud .avue-crud__menu{
  display: none;
}
.avue-crud__pagination {
    position: relative;
    padding: 0px 0 0px 20px;
    text-align: right;
    z-index: 10;
}
</style>