mes-sdai-admin-backend-ui/src/view/job/processSheet/processSheet.vue

<template>
	<el-container>
	  <el-main>
		  <form method="POST" :model="workData" action="{:U('NewBarCodeNew/add_bach')}" style="margin-bottom:50px;" id="form">
		        <input name="userid" id="userid" value="{$session_config[uid]}" type="hidden">
		        <fieldset class="newlabel">
		            <legend style="width:auto;margin-left:20px;">标记参数</legend>
		            <table width="100%" border="1">
		                <caption>标签序列配置</caption>
		                <tr>
		                    <th style="width:40%;"><span>字段</span> </th>
		                    <th><span>值</span></th>
		                </tr>
		                <tr >
		                    <td><span>生产批次号</span></td>
		                    <td><input name="Gd_gdbh" type="text" v-model="workData.Gd_gdbh" @input="propertyChange" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr v-if="dan">
		                    <td><span>纸张名称</span></td>
		                    <td>
								<select style="width: 380px;height: 30px;">
									<option v-for="option in selectedPaper">
									{{ option.bom_物料名称 }}
									</option>
								</select>
		                    </td>
		                </tr>
						<tr v-if="shuang">
						    <td><span>纸张名称</span></td>
						    <td>
								<select @change="selectpPaper" style="width: 380px;height: 30px;">
									<option v-for="option in selectedPaper" :value="option.bom_计划用量">
									{{ option.bom_物料名称 }}
									</option>
								</select>
						    </td>
						</tr>
		                <tr >
		                    <td><span style="color: red">码包</span></td>
		                    <td><input name="mabao" type="text" v-model="workData.mabao" style="width: 380px;height: 30px;" placeholder="利群(新版)专用，不是利群(新版)不要填"></td>
		                </tr>
		                <tr v-if="shuang" class="peijian">
		                    <td><span style="color: red">配件名称</span></td>
		                    <td>
		                        <select name="peijian" @change="selectPeijian"  style="width: 380px;height: 30px; color: red" >
									<option v-for="option in selectedPeijian" :value="option.id">
									{{ option.peijian_name }}
									</option>
		                        </select>
		                    </td>
		                </tr>
		                <tr>
		                    <td><span>单个流程包含的件数</span></td>
		                    <td><input name="tldx" type="text" v-model="workData.tldx" value="3000" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                    <td><span>总投纸数</span></td>
		                    <td>
		                        <input name="num"  v-model="workData.num" value="" style="width: 380px;height: 30px;">
		                    </td>
		                </tr>
		                <tr>
		                    <td><span>总流程</span></td>
		                    <td><input name="liucheng_total" type="number" v-model="workData.liucheng_total" value="" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                <td><span>版本号标识</span></td>
		                <td><input name="version" type="text" v-model="workData.version" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                <td><span>起始流程号</span></td>
		                <td><input name="start_liucheng" type="text" v-model="workData.start_liucheng" value="1" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                <td><span>本次打印流程数量</span></td>
		                <td><input name="liucheng_num" type="text" v-model="workData.liucheng_num" value="1" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                <td>
		                    <span>备注</span></td>
		                <td>
		                    <input name="remark" type="text" v-model="workData.remark" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                    <td>
		                        <span>左右偏移量</span></td>
		                    <td>
		                        <input name="x_offset" type="number" v-model="workData.x_offset" value="0" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                    <td>
		                        <span>上下偏移量</span></td>
		                    <td>
		                        <input name="y_offset" type="number" v-model="workData.y_offset" value="0" style="width: 380px;height: 30px;"></td>
		                </tr>
		            </table>
		        </fieldset>
	             <div id="liucheng">
	                 <fieldset class="newlabel">
	                 <table width="100%" border="1" class="new_craft" id="new_craft">
	             	   <caption>工艺</caption>
	             		  <tr>
							  <td width="40%">上次<span style="color: red">{{department}}</span>工艺更新时间：<span style="color: red">{{update}}</span></td>
							  <td>
							      <input type="button" style="margin-left: 1px;" value="增加工艺" @click="addInput"/>
							  </td>
						  </tr>
						  <tr v-for="(item,index) in gyData">
							  <td></td>
							  <td><input type="text" v-model="item.gy"></td>
						  </tr>
	                 </table>
	                 </fieldset>
	             </div>
		         <div style="position:fixed;bottom:0;width:100%;height:50px;line-height:50px;">
		         	 <button type='button' onsubmit='return false' class="submitbtn" @click="sendClick" id="send">打印</button>
		         </div>
		    </form>
	  </el-main>
	</el-container>
</template>

<script setup>
	import {
	  getDocumentData,
	  getDocumentHistory,
	  saveDocumentData,
	  getDocumentInfo
	} from '@/api/mes/job'
	import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { ref, reactive } from 'vue'
	const workData = ref({
		Gd_gdbh:'',
		maobao:'',
		mabao:'',
		peijian:'',
		tldx:3000,
		num:'',
		liucheng_total:'',
		version:'',
		start_liucheng:1,
		liucheng_num:1,
		remark:'',
		x_offset:0,
		y_offset:0
	})
	const department = ref()
	const dan = ref(true)
	const shuang = ref(false)
	const update = ref()
	const data = ref()
  const peijian = ref(0)
  const gyData = ref([])
	const selectedPaper = ref([])
	const selectedPeijian = ref([])
	const datas = ref([])
	const propertyChange = () => {
		if(workData.value.Gd_gdbh.length!==7){
			workData.value = []
			shuang.value=false
			selectedPaper.value=[]
			selectedPeijian.value=[]
			gyData.value=[]
			workData.value.tldx=3000
			workData.value.start_liucheng=1
			workData.value.liucheng_num=1
			workData.value.x_offset=0
			workData.value.y_offset=0
			department.value=null
			department.value=null
			return false;
		}
		const getDocument = async() => {
		  const getDocumentDatas = await getDocumentData({order:workData.value.Gd_gdbh})
		  if (getDocumentDatas.code === 0) {
			  workData.value.version=getDocumentDatas.data.paper[0].产品版本号;
			  workData.value.peijian=getDocumentDatas.data.paper;
			  console.log(selectedPaper.value)
			  if(getDocumentDatas.data.num>1){
				  dan.value=false
				  shuang.value=true
				  console.log(getDocumentDatas.data.paper.length)
				  selectedPaper.value=getDocumentDatas.data.paper
				  selectedPeijian.value=getDocumentDatas.data.peijian

			  }else{
				  dan.value=true
				  shuang.value=false
				  selectedPaper.value=getDocumentDatas.data.paper
				  workData.value.product=getDocumentDatas.data.paper[0].bom_物料名称;
			  }
			  workData.value.num=getDocumentDatas.data.paper[0].bom_计划用量;
			  if(getDocumentDatas.data.peijian){
          peijian.value=getDocumentDatas.data.peijian[0]['id']
				  const getHistory = async() => {
				    const getDocumentHistorys = await getDocumentHistory({
						order:workData.value.Gd_gdbh,
						peijian:getDocumentDatas.data.peijian[0]['id']})
				    if (getDocumentHistorys.code === 0) {
							department.value=getDocumentHistorys.data.department
							update.value=getDocumentHistorys.data.update
							gyData.value=getDocumentHistorys.data.data.map((item)=>({
								gy:item
							}))
				    }
				  }
				  getHistory()
			  }

		  }
		}
		getDocument()

	}
	const addInput = () => {
	 gyData.value.push({gy:''})
	}
	const sendClick = () => {
		saveDocument()
	}
  const saveDocument = async() => {
    datas.value = gyData.value.map((item)=>(item.gy))
    data.value= datas.value.join(",")
    const saveDocumentDatas = await saveDocumentData({order:workData.value.Gd_gdbh,data:data.value,peijian:peijian.value})
    if (saveDocumentDatas.code === 0) {
      getDocument()
    }
  }
  const getDocument = async() => {
    const getDocumentInfos = await getDocumentInfo({
      order:workData.value.Gd_gdbh,
      mabao:workData.value.mabao,
      version:workData.value.version,
      start_liucheng:workData.value.start_liucheng,
      tldx:workData.value.tldx,
      remark:workData.value.remark,
      string:data.value,
      num:workData.value.num
    })
    if (getDocumentInfos.code === 0) {
      console.log(getDocumentInfos.data)
    }
  }
	const selectpPaper = (event) => {
		 workData.value.num=event.target.value
	}

	const selectPeijian = async(event) => {
    peijian.value=event.target.value
		 const getDocumentHistoryss = await getDocumentHistory({
		 	order:workData.value.Gd_gdbh,
		 	peijian:event.target.value})
			console.log(getDocumentHistoryss)
		 if (getDocumentHistoryss.code === 0) {
		 		department.value=getDocumentHistoryss.data.department
		 		update.value=getDocumentHistoryss.data.update
		 		gyData.value=getDocumentHistoryss.data.data.map((item)=>({
		 			gy:item
		 		}))
		 }
	}

</script>

<style>
	.newlabel{
	    display: block;
	    -webkit-margin-start: 2px;
	    -webkit-margin-end: 2px;
	    -webkit-padding-before: 0.35em;
	    -webkit-padding-start: 0.75em;
	    -webkit-padding-end: 0.75em;
	    -webkit-padding-after: 0.625em;
	    min-width: -webkit-min-content;
	    border-width: 2px;
	    border-style: groove;
	    border-color: threedface;
	    border-image: initial;
	    width:870px;
	    padding:10px;
	    margin:10px;
	    float: left;
	}
	.legend{
	    display: block;
	    -webkit-padding-start: 2px;
	    -webkit-padding-end: 2px;
	    border-width: initial;
	    border-style: none;
	    border-color: initial;
	    border-image: initial;
	}
	#daima{
	    display: block;
	    border-width: 2px;
	    border-style: groove;
	    border-color: initial;
	    border-image: initial;
	    float: left;
	    margin-left: 950px;
	    margin-top: 18px;
	    width: 550px;
	    padding: 10px;
	    position: fixed;
	}
	#daima table{

	}
	.firm  ul,.product  ul,.tag ul{
	    width:100%;
	    padding:10px;
	    font-size:0;
	}
	.firm li,.product li,.tag li{
	    font-size:12px;
	}
	.firm li:first-child ul li,.product li:first-child ul li,.tag li:first-child ul li{
	    display:inline-block;
	    width:33.3333%;
	    height:20px;
	    line-height:20px;
	}
	.firm input,.product input,.tag input{
	    width:200px;
	    padding:5px;
	}
	.tag select{
	    width:198px;
	    padding:5px;
	}
	.firm li ul:last-child li{
	    width:580px;
	}
	.firm li ul:last-child li input{
	    width:476px;
	}
	.newlabel table{
	    margin-top:20px;
	    min-height: 25px; line-height: 25px;border-collapse: collapse;
	}
	.newlabel caption{
	    padding:5px 0;
	}
	.newlabel table,.newlabel table tr th,.newlabel table tr td { border:1px dashed #ddd;padding:5px;}
	#daima table,#daima table tr th,#daima table tr td { border:1px dashed #ddd;padding:5px;}
	#createcode{
	    display:inline-block;
	    width:100px;
	    height:30px;
	    line-height:30px;
	    margin-left:290px;
	    border-radius:10px;
	    background:#0fa2f1;
	    color:#fff;
	    text-align:center;
	    cursor: pointer;
	    opacity:0.8;
	    filter:80%;
	}
	.submitbtn{
	    width:100px;
	    height:30px;
	    line-height:30px;
	    background:#0fa2f1;
	    margin-left:30%;
	    text-align:center;
	    outline:none;
	    border:0;
	    color:#fff;
	    border-radius:10px;
	    opacity:0.8;
	    filter:80%;
	}
	.high{ color: red; }
	.msg{ font-size: 13px; }
	.onError{ color: red; }
	.onSuccess{ color: green; }
</style>