﻿<template>
	<div class="mesBarcodeInfo-container">
		<el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" :width="1000" draggable="" :close-on-click-modal="false">
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>{{ props.title }}</span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="state.ruleForm.id" />
					</el-form-item>
					
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="扫描库位二维码" prop="flow">
                            <el-input v-model="state.ruleForm.flow" placeholder="请扫描库位二维码" clearable @keyup.enter="scanCodes"  >
                                <template #append>
                                    <el-icon  @click="scanCodes"><ele-FullScreen /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="库区编码" prop="storeCode">
							<el-input v-model="state.ruleForm.storeCode" readonly="true" placeholder="请输入库区编码" maxlength="100"  show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="库位编码" prop="storeSiteCode">
							<el-input v-model="state.ruleForm.storeSiteCode" readonly="true" placeholder="请输入库位编码" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="库区名称" prop="storeName">
							<el-input v-model="state.ruleForm.storeName" readonly="true" placeholder="请输入库区名称" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="库位名称" prop="storeSiteName">
							<el-input v-model="state.ruleForm.storeSiteName" readonly="true" placeholder="请输入库位名称" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="扫描载具二维码" prop="flowBarcode">
                            <el-input v-model="state.ruleForm.flowBarcode" placeholder="请扫描载具二维码" clearable @keyup.enter="scanCode"  >
                                <template #append>
                                    <el-icon  @click="scanCode"><ele-FullScreen /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
				</el-row>
			</el-form>
			<el-tabs :model-value="'item'">
                <el-tab-pane label="入库单明细" name="item"></el-tab-pane>
            </el-tabs>
            <el-table
                :data="detailList"
            >
			    <el-table-column type="index" label="序号" width="55" align="center" />
                <el-table-column prop="packCode" label="载具编码" align="center" width="100px" show-overflow-tooltip="" />
                <el-table-column prop="packName" label="载具名称" align="center" width="100px" show-overflow-tooltip="" />
                <!-- <el-table-column prop="packTypeCode" label="载具类型编码" width="100px" show-overflow-tooltip="" /> -->
                <!-- <el-table-column prop="factoryCode" label="所属工厂编码" width="100px" show-overflow-tooltip="" />
                <el-table-column prop="maxNum" label="最大载容量" width="100px" show-overflow-tooltip="" /> -->
                <el-table-column prop="num" label="装载量" align="center" width="100px" show-overflow-tooltip="" />
                <el-table-column prop="produceWorkOrderNo" align="center" label="生产订单号" width="120px" show-overflow-tooltip="" />
                <el-table-column prop="materialCode" label="MES编码" align="center" width="120px" show-overflow-tooltip="" />
				<el-table-column prop="materialName" label="MES名称" align="center" width="120px" show-overflow-tooltip="" />
				<!-- <el-table-column prop="unitUse" label="单位用量" width="100px" show-overflow-tooltip="" /> -->
				<el-table-column prop="batchNo" label="批次号" align="center" width="120px" show-overflow-tooltip="" />
				<el-table-column prop="processCode" label="工序" align="center" width="120px" show-overflow-tooltip="" />
				<!-- <el-table-column prop="packStatus" label="载具状态"  show-overflow-tooltip="" /> -->
				<!-- <el-table-column prop="bindDate" label="工序时间" width="120px" show-overflow-tooltip="" /> -->
				<!-- <el-table-column prop="nextProcessCode" label="下一工序" width="100px" show-overflow-tooltip="" /> -->
				<!-- <el-table-column prop="isAtta" label="是否消耗载具"  show-overflow-tooltip="" />
				<el-table-column prop="relPackCode" label="消耗载具关联的载具编码"  show-overflow-tooltip="" /> -->
                <!-- <el-table-column prop="remark" label="备注"  show-overflow-tooltip="" /> -->
                <el-table-column label="操作" align="center" width="140">
                  <template #default="scope">
                    <el-button @click="deleteRow(scope.$index)" icon="ele-Delete" size="small" text="" type="primary">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
    import { ref,onMounted, reactive } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { addMesBarcodeInfo, updateMesBarcodeInfo, detailMesBarcodeInfo,Scan,ScanStock } from "/@/api/simple/mesBarcodeInfo";
	import { pageMesBarcodeInfo, deleteMesBarcodeInfo } from '/@/api/simple/mesBarcodeInfo';

  	import { formatDate } from '/@/utils/formatTime';

	//父级传递来的参数
	var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
    const state = reactive({
    isShowDialog: false,
    ruleForm: {} as any,
});

	//自行添加其他规则
	const rules = ref<FormRules>({
	});

	// 页面加载时
	onMounted(() => {

	});

	// 打开弹窗
	const openDialog = async (row: any) => {
		// state.ruleForm = JSON.parse(JSON.stringify(row));
		detailList.value = [];
		// 改用detail获取最新数据来编辑
		let rowData = JSON.parse(JSON.stringify(row));
		if (rowData.id)
			state.ruleForm = (await detailMesBarcodeInfo(rowData.id)).data.result;
		else
			state.ruleForm = rowData;
		state.isShowDialog = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		state.isShowDialog = false;
	};

	// 取消
	const cancel = () => {
		state.isShowDialog = false;
	};

	// 提交
	const submit = async () => {
		if(state.ruleForm.storeCode==undefined)
	            {
	            	return ElMessage({
                     message: `请先扫描仓库条码信息`,
                     type: "error",
                });
	            }
		ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if(detailList.value.length<=0)
				 {
						ElMessage({
					message: `当前没有需要入库的信息`,
					type: "error",
				});
				}
				else{
					if (isValid) {
				let values = state.ruleForm;
				values.data=detailList.value;
				 if (state.ruleForm.id == undefined || state.ruleForm.id == null || state.ruleForm.id == "" || state.ruleForm.id == 0) {
				 	//await addMesBarcodeInfo(values);
					var result=(await addMesBarcodeInfo(values)).data.result;
					if(result=="入库成功")
					 closeDialog();
					else
					{
						ElMessage({
					message: `${'入库失败'}`,
					type: "error",
				});
					}
				 } else {
				 	await updateMesBarcodeInfo(values);
					 closeDialog();
				 }
				 
				 
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
				}
			
		});
	};
	
	const detailList = ref([]);
	const delList = ref([]) // 标记删除子表明细
// 扫码
const scanCode = async ()=>{
	console.log(detailList.value);
      
      if(detailList.value.find((u:any)=> { return u.packCode == state.ruleForm.flowBarcode })){
        return ElMessage({
        message: `该条码不能重复扫码`,
        type: "error",
      });
      }
      let  res = await Scan({
        packCode:state.ruleForm.flowBarcode,
      })
      let data = res.data.result || {};
	  if(data.packCode==undefined)
	  {
		return ElMessage({
        message: `不存在当前载具码`,
        type: "error",
      });
	  }
	  console.log(data.PackStatus);
	  if( data.packStatus==0)
	  {
		return ElMessage({
        message: `空载具不允许入库！`,
        type: "error",
      });
	  }
	  if( data.packStatus==1)
	  {
		return ElMessage({
        message: `使用中的载具不允许入库！`,
        type: "error",
      });
	  }
	  if(data.storeCode!=undefined && data.storeCode!=null  && data.storeCode!="")
	  {
		return ElMessage({
        message: `当前载具编码已经入库，不可以二次入库`,
        type: "error",
      });
	  }
      // 标记新添加的数据
      //data.id = 0;
      if(data instanceof Array){
        detailList.value.push(...data.map(item=>({...item})))//,id:0
      } else if(data instanceof Object){
        //data.id = 0;
        detailList.value.push(data)
      }
      state.ruleForm.flowBarcode = "";
    }

 // 删除行
 const deleteRow = (i)=>{
      let current = detailList.value[i];
      // 只标记已存储过的数据，新增的数据被删除不记录
      if(current?.id != 0){
        delList.value.push(current.id);
      }
      detailList.value.splice(i,1);
  }

  // 扫码仓库库位
const scanCodes = async ()=>{
      
      let  res = await ScanStock({
        stockPosCode:state.ruleForm.flow,
      })
      let data = res.data.result || {};
	  if(data.stockCode==undefined)
	  {
		state.ruleForm.storeCode="";
        state.ruleForm.storeName="";
	    state.ruleForm.storeSiteCode="";
        state.ruleForm.storeSiteName="";
		return ElMessage({
        message: `系统中不存在当前库区库位`,
        type: "error",
      });
	  }
      state.ruleForm.storeCode=data.stockCode;
      state.ruleForm.storeName=data.stockName;
	  state.ruleForm.storeSiteCode=data.code;
      state.ruleForm.storeSiteName=data.name;
      state.ruleForm.flow = "";
    }

	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>



