imcs_yj_fe/imcs-ui/src/views/zuihou/machiningClient/touchScreen/components/View1.vue

<template>
  <el-dialog
    :title="$t(&quot;common.view&quot;)"
    width="80%"
    :append-to-body="true"
    :visible.sync="isVisible"
    class="tenant-view"
  >
    <div class="boxDiv">
    	<!-- 任务信息 -->
        <el-steps :active="active" finish-status="success" simple style="margin:20px 0;">
  				<el-step title="夹具安装" ></el-step>
  				<el-step title="物料装夹" ></el-step>  				
		</el-steps>

    	<el-row v-show="this.active==1">
    		<p style="margin-top:0;text-align:center;font-size:18px;">{{$t("runCenter.form.viewSched.name")}}
				<span style="float:right;margin-right:20px;font-size:14px;">{{$t("runCenter.form.viewSched.bomNo")+"："}}{{tenant.no}}</span>
			</p>
    		<table class="comtable" border="0" cellspacing="0" cellpadding="6">
    			<tr>
    				<td class="blodTd" align="center" width="120">{{$t("runCenter.form.viewSched.procedureNo")+"："}}</td>
    				<td width="200">{{tenant.taskNo}}</td>
    				<td class="blodTd" align="center" width="120">{{$t("runCenter.form.viewSched.status")+"："}}</td>
    				<td width="120">
                         <el-tag v-if="tenant.status == 0" type="info">{{$t("runCenter.common.schedulStatus.noStart")}}</el-tag>
							<el-tag v-if="tenant.status == 1" type="">{{$t("runCenter.common.schedulStatus.run")}}</el-tag>
							<el-tag v-if="tenant.status == 2" type="success">{{$t("runCenter.common.schedulStatus.finished")}}</el-tag> 
					</td>    				
    			</tr>
    			<tr>
					<td class="blodTd" align="center">{{$t("runCenter.form.viewSched.procedureDesc")+"："}}</td>
    				<td>{{tenant.taskName}}</td>
					<td class="blodTd" align="center">{{$t("runCenter.form.viewSched.content")+"："}}</td>
    				<td width="200">{{tenant.content}}</td>    				
    			</tr>
				<tr>
                    <td class="blodTd" align="center">{{$t("runCenter.form.viewSched.prepareWorkHours")+"："}}</td>
    				<td>{{tenant.time}}分钟</td>
    				<td class="blodTd" align="center">{{$t("runCenter.form.viewSched.procedurePosition")+"："}}</td>
    				<td>{{tenant.procedurePosition}}</td>
				</tr>	
    			<tr>
    				<td class="blodTd" align="center">{{$t("runCenter.form.viewSched.startTime")+"："}}</td>
    				<td>{{tenant.bomDesc}}</td>
    				<td class="blodTd" align="center">{{$t("runCenter.form.viewSched.endTime")+"："}}</td>
    				<td>{{tenant.endTime}}</td>
    			</tr>
    		</table>
    	</el-row>    	
    	
    	<!-- 安装夹具 -->
    	<el-row v-show="this.active==1">
    		<p class="titleP" style="margin-top:15px;color:#000;font-size:18px;" >ST1: 请安装夹具 <span style="color:red;margin-left:5px;font-size:14px;">系统检测夹具不足</span></p>
    		<!-- Table数据 -->
			<el-table
		      ref="table"
		      v-loading="loading"
		      :data="tableData.records"
		      border
		      fit
		      style="width: 100%;"
		    >
		      <!-- 编号 -->
		      <el-table-column prop="no" :label='$t("prepare.table.tools.no")' align="center" ></el-table-column>
		       <!-- 编号 -->
		      <el-table-column prop="type" :label='$t("prepare.table.tools.type")' align="center" ></el-table-column>
			  <!-- 名称 -->
		      <el-table-column prop="name" :label='$t("prepare.table.tools.name")' align="center"></el-table-column>
		     
		    </el-table>
    	</el-row>	

		<!-- 装夹物料 -->
    	<el-row v-show="this.active>1">
    		<p class="titleP" style="margin-top:15px;color:#000;font-size:18px;" >ST2: 装夹物料</p>
    		<!-- Table数据 -->
			<el-table
		      ref="table1"
		      v-loading="loading"
		      :data="tableData1.records"
		      border
		      fit
		      style="width: 100%;"
		    >
		      <!-- 编号 -->
		      <el-table-column prop="no" :label='$t("prepare.table.tools.no")' align="center" ></el-table-column>
		       <!-- 编号 -->
		      <el-table-column prop="type" :label='$t("prepare.table.tools.type")' align="center" ></el-table-column>
			  <!-- 名称 -->
		      <el-table-column prop="name" :label='$t("prepare.table.tools.name")' align="center"></el-table-column>
              <!-- 装夹方式 -->
		      <el-table-column prop="clampImg" :label='$t("prepare.table.tools.clampImg")' align="center">
                    <template slot-scope="{ row }">
                         <div class="block">
                             <el-image
      							style="width: 60px; height: 60px"
      							:src="row.clampImg"
      							fit="fill"></el-image>
						 </div>	 
					</template>
			  </el-table-column>
			  <!-- 备注 -->
		      <el-table-column prop="remark" :label='$t("prepare.table.tools.name")' align="center"></el-table-column>		     
 
		    </el-table>
    	</el-row>

		<!-- 输入唯一码 -->
    	<el-row v-show="this.active>1">
          <p class="titleP" style="margin-top:15px;color:#000;font-size:18px;" >输入零件编码    <el-button size="small" type="primary" @click.native="generate" round>系统生成</el-button></p>
          <el-input v-model="uniqueCode" placeholder="输入零件编码"></el-input>

	    </el-row>		
    	    		
    	<div slot="footer" class="dialog-footer">
		  <el-button plain type="info" @click.native="prev" v-show="this.active>1"  >返回上一步</el-button>		     
	      <el-button type="primary" :disabled="confirmDisabled" @click.native="next" v-show="this.active==1">已完成,下一步</el-button>
		  <el-button type="primary" :disabled="confirmDisabled" @click.native="submitForm" v-show="this.active>1">上料完成</el-button>
	    </div>
    </div>
  </el-dialog>
</template>
<script>
	// 【分页】组件
	import Pagination from "@/components/Pagination"
	// 【自动化程序管理】-API
	import automatedProcessesApi from "@/api/prepareProductMgr/automatedProcesses"
	// 【产品工艺版本管理】-API
	import technologyVersionApi from "@/api/prepareProductMgr/technologyVersion"
	// 【机加工人端】-API
	import machiningClientApi from "@/api/machiningClient/machiningClient"
	// 列表查询的共通参数
	import { initQueryParams } from '@/utils/commons'
export default {
  name: 'TaskView',
  components: { Pagination },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
	  active: 1,
      screenWidth: 0,
      confirmDisabled: false,
      width: this.initWidth(),
      tenant: {},
      queryParams: initQueryParams({}),
      loading: false,
	  uniqueCode: '',	  
    	tenantViewVisible: false,
    	tableKey: 0,
	  	tableData: {
	    	total: 0
	  	},
	  	tableData1: {
           total: 0
		},
	  	tableData2: [],
	  	currentRow: null, // 当前选择的行
	  	
	  	spanArr: [],  // 【组序】合并单元格
	    spanArr2: [],  // 【优先级】合并单元格
    }
  },
  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
  created() {
  	// 加载列表数据
  	// this.fetch()
	},
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.close()
      }
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth()
      })()
    }
  },
  methods: {
	prev(){
      if (this.active-- < 0) this.active = 0;
	},  
	next(){
       if (this.active++ > 1) this.active = 0;
	},  
  	submitForm(){
		/*  
  		let obj = {
  			taskNode: this.tenant,
  			meterialList: this.tableData1,
  			procedureTrayList: this.tableData2
  		}
  		console.log("表单数据：", obj)
  		// return false
  		machiningClientApi.finishTaskNode(obj).then((response) => {
	      const res = response.data
	      if (res.isSuccess) {
	        this.isVisible = false
	        this.$message({
	          message: this.$t('tips.updateSuccess'),
	          type: 'success'
	        })
	        // 通知列表
	        this.$emit("success");
	      }
	    }).finally(() => {
	      this.confirmDisabled = false
	      return true
	    }) */
		this.isVisible = false;
  	},
  	// table的当前行值变化后
  	handleCurrentChange(val) {
			// 设置当前行
    	this.currentRow = val;
  	},
    initWidth () {
      this.screenWidth = document.body.clientWidth
      if (this.screenWidth < 550) {
        return '95%'
      } else if (this.screenWidth < 990) {
        return '580px'
      } else if (this.screenWidth < 1400) {
        return '600px'
      } else {
        return '650px'
      }
    },
    setTenant (val) {
      this.tenant = { ...val }
      // 加载上部门2个数据
  		this.fetch()
  		// 加载下部分2个数据
  		//this.getDetail(val)
    },
    close () {
      this.$emit('close')
    },
    fetch (params = {}) {
      this.loading = true
      //日期区间-参数
      if (this.queryParams.timeRange) {
        this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
        this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
      }
	  // 分页-参数
      this.queryParams.current = params.current ? params.current : this.queryParams.current
      this.queryParams.size = params.size ? params.size : this.queryParams.size
      // 条件-参数
      console.log("列表的row数据：", this.tenant)
	  /*
      automatedProcessesApi.taskAutoNodeList({taskId: this.tenant.taskId, procedureId: this.tenant.procedureId, orderId: this.tenant.orderId}).then(response => {
        const res = response.data
        if (res.isSuccess) {
          this.tableData.records = res.data
        }
        // eslint-disable-next-line no-return-assign
      }).finally(() => this.loading = false) */
	  this.tableData.records = [{'no':'龙威夹','type':'&230','name':'龙威'}];
	  this.tableData1.records = [{'no':'龙威夹','type':'&230','name':'龙威','clampImg':require(`@/assets/yunMap/clampImg.png`),'remark':'备注'}];
	  this.loading = false;
     
    },
    //获得数据相同的行数
 	rowspanFiled(data, filed) {
 			let spanArr5 = [];
	    data.forEach((item,index) => {
        if( index === 0){
            spanArr5.push(1);
            this.position = 0;
        }else{
            if(data[index].groupSort === data[index-1].groupSort && data[index][filed] === data[index-1][filed]){
                spanArr5[this.position] += 1;
                spanArr5.push(0);
            }else{
                spanArr5.push(1);
                this.position = index;
            }
        }
	    })
	    return spanArr5;
    },
    //合并
 		objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
	    if (columnIndex === 0) {
	        let _row = this.spanArr[rowIndex];
	        let _col = _row > 0 ? 1 : 0;
	        return {
	            rowspan: _row,
	            colspan: _col
	        }
	    }
	    if(columnIndex === 1){
	        let _row = this.spanArr2[rowIndex];
	        let _col = _row > 0 ? 1 : 0;
	        return {
	            rowspan: _row,
	            colspan: _col
	        }
	    }
    },
    //合并
 		objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
	    if (columnIndex === 0) {
	        let _row = this.spanArr[rowIndex];
	        let _col = _row > 0 ? 1 : 0;
	        return {
	            rowspan: _row,
	            colspan: _col
	        }
	    }
	    if(columnIndex === 1){
	        let _row = this.spanArr2[rowIndex];
	        let _col = _row > 0 ? 1 : 0;
	        return {
	            rowspan: _row,
	            colspan: _col
	        }
	    }
    },
    // 根据【工艺id】查询详情信息
    getDetail(obj){
		/*		
    	machiningClientApi.getTaskNodeProcessAnalysis(obj).then(res => {
    		res = res.data 
    		if(res.isSuccess){
    			console.log("详情信息：", res.data)
    			// 给各个组件赋值
		    	// 把【设备】的数据，给【程序】使用
		    	// this.setProgram(eqList)
		    	// 获取【所需原材料】数据
		    	this.tableData1 = this.setKeyList(res.data.meterialList)
		    	// 获取【托盘夹具组】数据
		    	this.tableData2 = this.setKeyList(res.data.procedureTrayList, 'tray')
		    	// 要合并列的准备数据
		    	if(this.tableData2.length > 0){
		    		this.spanArr = this.rowspanFiled(this.tableData2, "groupSort")
				  	this.spanArr2 = this.rowspanFiled(this.tableData2, "groupPrority")
		    	}
    		}
    	}) */		
    },
    // 赋值前处理-添加key数据健
    setKeyList(list, flag){
    	if(list.length > 0){
    		let arr = []
    		list.forEach(item => {
    			// 添加唯一键
	    		item.key = ''+ Math.random()
	    		// 如果是托盘夹具的时候，组装分类
	    		if(flag == 'tray'){
	    			// 把【组序】和【优先级】改成字符串
	    			//item.groupSort = ''+ item.groupSort
	    			//item.groupPrority = ''+ item.groupPrority
	    			// 给图片一个列表数据，jjImgList
	    			item.jjImgList = []
	    			if(!!item.armorPic){
	    				item.jjImgList.push(item.armorPic)
	    			}
	    			// 添加类型
	    			if(item.bizType == '1'){
	    				item.category = {key: '03',data: '托盘'}
	    			}else{
	    				item.category = {key: '02',data: '夹具'}
	    			}
	    		}
	    		arr.push(item)
	    	})
    		list = arr
    	}
    	return list
    }
  }
}
</script>
<style lang="scss" scoped>
	.dialog-footer{
		text-align: center;
		padding: 30px;
	}
	.titleP{
		position: relative;
		font-size: 16px;
		padding-left: 15px;
	}
	.titleP:before{
		content: '';
		position: absolute;
		left: 0;
		top: 3px;
		width: 5px;
		height: 80%;
		background: #0F79DC;
	}
	.comtable{
		width: 100%;
		border-left: 1px solid #CCCCCC;
		border-top: 1px solid #CCCCCC;
	}
	.comtable td{
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}
	.blodTd{
		background: #EEEEEE;
		color: #333333;
	}
</style>