mes-ocea-before.git

<template>
  <div class="mod-config">
    <basic-container>
      <ttable
        :rowKey="'mid'"
        :table="table"
        :prelang="prelang"
        :options="options"
        @handleSelectionChange="selectionRow"
        :ajaxFun="ajaxFun"
        :paramObj="queryParams"
        :mergeSpanArr="spanArr"
        :selColValArr="paramSelArr"
        :selCol="paramSelCol"
        ref="ttable">
        <template #toolbar>
            <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>
            <el-button v-if="showUnDownTable" @click="tagFinished" type="success">标记已完成</el-button>
            <el-button v-if="permissions.plan_productionschedul_edit_line && showUnDownTable"
            @click="openEditDialog" type="primary">编辑时间线</el-button>
        </template>
      </ttable>
    </basic-container>
    <!-- 编辑时间线 -->
    <el-dialog
    title="编辑时间线"
    :visible.sync="dialogVisible"
    top="5vh"
    width="50%">
      <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>
    <!-- 查看时间线 -->
    <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.planTime || 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>
    <!-- 查看变更记录 -->
    <el-dialog
    title="变更记录"
    :visible.sync="showRecordsDialog"
    width="60%">
        <el-table border :data="recordsList">
            <el-table-column type="index" width="50" label="序号" align="center"/>
            <el-table-column prop="createTime" min-width="120" show-overflow-tooltip label="操作时间" align="center"/>
            <el-table-column prop="createUser" min-width="120" show-overflow-tooltip label="操作人" align="center"/>
            <el-table-column prop="recordType" min-width="120" show-overflow-tooltip label="操作类型" align="center"/>
            <el-table-column prop="oldRecord" min-width="200" show-overflow-tooltip label="旧值" align="center"/>
            <el-table-column prop="newRecord" min-width="200" show-overflow-tooltip label="新值" align="center"/>
        </el-table>
    </el-dialog>
  </div>
</template>
 
<script>
import {
  fetchScheduleList,
  fetchRecordsList,
  fetchScheduleById,
  fillTime,
  deleteSchedul,
  updateState,
  checkTimeLines,
  updateSchedul
} from '@/api//plan/productionschedul'
import ttable from '@/views/common/ztt-table.vue'
import { mapGetters } from 'vuex'
export default {
    data() {
    return {
      queryParams: {
        state: false
      },
      showRecordsDialog: false,
      recordsList: [],
      paramSelArr: [false],
      paramSelCol: 'hasEdit',
      ajaxFun: fetchScheduleList,
      prelang: 'productSchedul',
      options: {
        height: 300, // 默认高度-为了表头固定
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: false, // 是否要高亮当前行
        border: true, // 是否有纵向边框
        lazy: false, // 是否需要懒加载
        fit: true, // 列的宽度是否自撑开
        multiSelect: true, //
        seqNo: true,
        isRefresh: true, // 是否显示刷新按钮
        isShowHide: true, // 是否显示显影按钮H
        isSearch: true, // 高级查询按钮
        defaultOrderBy: { column: 'time', direction: 'desc' },
        cancelRunCreated: false,
        tableCellMerge: true
      },
      table: {
        total: 0,
        currentPage: 1,
        pageSize: 20,
        data: [],
        // 标题
        column: [
            {
                minWidth: 120,
                prop: 'projectName',
                label: '项目名称',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
            },
            {
                minWidth: 100,
                prop: 'contractNo',
                label: '合同号',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
            },
            {
                minWidth: 120,
                prop: 'orderTime',
                label: '接单日期',
                sort: true,
                isTrue: true,
                isSearch: true,
                searchInfoType: 'date',
                format: (row,columnValue)=> this.formatDate(row,columnValue)
            },
            {
                minWidth: 120,
                prop: 'customerName',
                label: '客户名称',
                isTrue: true,
                searchInfoType: 'text',
                isSearch: true,
            },
            {
                minWidth: 120,
                prop: 'deliveryDate',
                label: '交货日期',
                isTrue: true,
                sort: true,
                isSearch: true,
                searchInfoType: 'date',
                format: (row,columnValue)=> this.formatDate(row,columnValue)
            },
            {
                minWidth: 120,
                prop: 'productType',
                label: '产品类型',
                isTrue: true,
                searchInfoType: 'text',
                isSearch: true,
            },
            {
                minWidth: 120,
                prop: 'product',
                label: '产品名',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
                render: { fun: this.handleClickCell }
            },
            {
                minWidth: 120,
                prop: 'status',
                label: '当前状态',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'select',
                optList: ()=>{
                    return [
                    { label: '文件签发', value: '文件签发' },
                    { label: '下达物料需求', value: '下达物料需求' },
                    { label: '采购询价+合同签订', value: '采购询价+合同签订' },
                    { label: '物料采购到货', value: '物料采购到货' },
                    { label: '物料到货检验', value: '物料到货检验' },
                    { label: '领料、装箱入库', value: '领料、装箱入库' },
                ]
                }
            },
            {
                minWidth: 120,
                prop: 'time',
                label: '临期时间',
                isTrue: true,
                sort: true,
                isSearch: true,
                searchInfoType: 'date',
                format: (row,columnValue)=> this.formatDate(row,columnValue)
            },
            {
                minWidth: 120,
                prop: 'specs',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
                label: '规格型号',
            },
            {
                minWidth: 120,
                prop: 'unit',
                label: '单位',
                searchInfoType: 'text',
                isTrue: true,
                isSearch: true,
            },
            {
                minWidth: 120,
                prop: 'number',
                label: '数量',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
            },
            {
                minWidth: 120,
                prop: 'productionStatus',
                label: '生产情况',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
            },
            {
                minWidth: 120,
                prop: 'productionRoutine',
                label: '生产程度',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
            },
            {
                minWidth: 120,
                prop: 'projectLeader',
                label: '项目负责人',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
            },
            {
                minWidth: 150,
                prop: 'remark',
                label: '备注',
                isTrue: true,
                isSearch: true,
                searchInfoType: 'text',
            }
        ],
        toolbar: [],
        operator: null,
        operatorConfig: {
            fixed: 'right',
            label: '操作',
            width: 150,
            minWidth: 150
        }
      },
      dropdownTitleStyle: {
        color: '#E84738',
        fontWeight: 'bold'
      },
      showUnDownTable: true,
      dropdownTitle: '待完成调度',
      showTimeLineDialog:false,
      editForm:{
        id: null,
        productionRoutine: null,
        productionStatus: null,
      },
      editDialogVisible: false,
      dialogVisible: false,
      scheduleList: [],
      scheduleEditList: [],
      multipleSelection: [],
      loading: true,
      spanArr: ['id','projectName', 'contractNo','orderTime','customerName','deliveryDate','productType'],
    }
  },
  components: {
    ttable,
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  created(){
    this.showOperator()
    this.loading = true
  },
  watch:{
    editDialogVisible(newVal){
      if(!newVal){
        this.editForm = {
          id: null,
          productionRoutine: null,
          productionStatus: null,
        }
      }
    },
    multipleSelection(newVal){
      if(newVal.length==0){
        this.scheduleList = []
      }
    }
  },
  methods: {
    showChangeRecords(row){
        this.recordsList = []
        if(row){
            fetchRecordsList(row.mid).then((res)=>{
                if(res.status===200){
                    this.recordsList = res.data.data.records
                }
            }).catch((error)=>{
                console.error(error);
            })
        }
        this.showRecordsDialog = true
    },
    showOperator(){
        this.table.operator = [{
            text: '变更记录',
            type: 'text',
            size: 'small',
            fun: this.showChangeRecords,
        }]
        if(this.showUnDownTable){
            if(this.permissions.plan_productionschedul_edit){
                this.table.operator.push({
                    text: '编辑',
                    type: 'text',
                    size: 'small',
                    fun: this.editHandle,
                    show: {
                        key: 'hasEdit',
                        val: [true]
                    }
                })
            }
            if(this.permissions.plan_productionschedul_del){
                this.table.operator.push({
                    text: '删除',
                    type: 'text',
                    size: 'small',
                    fun: this.deleteHandle,
                    show: {
                        key: 'hasEdit',
                        val: [true]
                    }
                })
            }
        }
    },
    handleClickCell(row){
        this.getScheduleById(row.mid)
        this.showTimeLineDialog = true
    },
    changeTable(command){
        const _than = this
        if(command === 'undone'){
            this.dropdownTitle = '待完成调度'
            this.dropdownTitleStyle = {color:'#E84738',fontWeight: 'bold'}
            this.showUnDownTable = true
            this.queryParams.state = false
 
        }else if(command === 'done'){
            this.dropdownTitle = '已完成调度'
            this.dropdownTitleStyle = {color:'#34BD66',fontWeight: 'bold'}
            this.showUnDownTable = false
            this.table.operator = null
            this.queryParams.state = true
        }
        this.$nextTick(()=>{
            _than.showOperator()
            _than.getDataList()
        })
    },
    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.getDataList()
        }
      }).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.getUnFinishedData()
        }
      }).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(){
      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 mIds = this.multipleSelection.map(ele=>{
        return ele.mid
      })
      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,
        "mids": mIds,
      }
      fillTime(obj).then(res=>{
        if(res.status===200){
            _than.$message.success("更新成功")
        }else{
            _than.$message.error("更新失败")
        }
        _than.dialogVisible = false
        _than.getDataList()
      }).catch(error=>{
        console.error(error);
      })
    },
    initTimeLine(data){
      let scheduleList = []
      if(data){
        let arr = [
          {
            title: '文件签发',
            actualTime: data.documentActualTime,
            planTime: data.documentPlanTime,
          },
          {
            title: '下达物料需求',
            actualTime: data.bomActualTime,
            planTime: data.bomPlanTime,
          },
          {
            title: '采购询价+合同签订',
            actualTime: data.contractActualTime,
            planTime: data.contractPlanTime,
          },
          {
            title: '物料采购到货',
            actualTime: data.arrivalActualTime,
            planTime: data.arrivalPlanTime,
          },
          {
            title: '物料到货检验',
            actualTime: data.checkActualTime,
            planTime: data.checkPlanTime,
          },
          {
            title: '领料、装箱入库',
            actualTime: data.productActualTime,
            planTime: data.productPlanTime,
          },
        ]
        scheduleList = arr
        return scheduleList
      }
    },
    getScheduleById(id){
      if(id){
        fetchScheduleById(id).then(res=>{
          this.scheduleList = this.initTimeLine(res.data.data)
        }).catch(error=>{
          console.error(error);
        })
      }
    },
    selectionRow(val){
      this.multipleSelection = val
    },
    formatDate(row, cellValue){
      if (cellValue) {
        const dutyDateList = /\d{4}-\d{1,2}-\d{1,2}/g.exec(cellValue)
        if (dutyDateList && dutyDateList.length > 0) {
          return dutyDateList[0]
        }
      }
      return ''
    },
    // 获取数据列表
    getDataList(){
        this.$refs.ttable.getDataList()
    },
    // 删除
    deleteHandle(row,index) {
      const _than = this
      _than.$confirm('是否确认删除该生产调度信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        deleteSchedul(row.mid).then(res=>{
          if(res.status===200){
            _than.$message.success("删除成功")
            _than.getDataList()
          }
        }).catch(error=>{
          console.error(error)
        })
      })
    },
  }
}
</script>
<style>
.unfinished-crud .avue-crud__tip{
  display: none;
}
.unfinished-crud .avue-crud__menu{
  display: none;
}
.finished-crud .avue-crud__tip{
  display: none;
}
.finished-crud .avue-crud__menu{
  display: none;
}
.avue-crud__pagination {
    position: relative;
    padding: 0px 0 0px 20px;
    text-align: right;
    z-index: 10;
}
</style>