﻿<template>
	<div class="mesPickingHead-container">
		<el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" :width="1500" 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="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="领料单号" prop="pickingCode">
							<el-input v-model="state.ruleForm.pickingCode" readonly="true" placeholder="请输入领料单号" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="原材料编码" prop="materialCode">
							<el-input v-model="state.ruleForm.materialCode" readonly="true"  placeholder="请输入原材料编码" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="原材料名称" prop="materialName">
							<el-input v-model="state.ruleForm.materialName" readonly="true"  placeholder="请输入原材料名称" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="原材料规格" prop="materialModel">
							<el-input v-model="state.ruleForm.materialModel" readonly="true"  placeholder="请输入原材料规格" maxlength="150" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="仓库编码" prop="stock">
							<el-input v-model="state.ruleForm.stock" 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="supplierCode">
							<el-input v-model="state.ruleForm.supplierCode" 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="supplierName">
							<el-input v-model="state.ruleForm.supplierName" placeholder="请输入供应商名称" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col> -->
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="领料日期" prop="packingDate">
							<el-date-picker v-model="state.ruleForm.packingDate" type="date" readonly="true"  placeholder="领料日期" />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="领料人" prop="pickingPeople">
							<el-input v-model="state.ruleForm.pickingPeople" readonly="true"  placeholder="请输入领料人" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="原材料批次（u8)" prop="pickingBarCode">
							<el-input v-model="state.ruleForm.pickingBarCode" readonly="true"  placeholder="请输入原材料批次（u8)" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="计划领料" prop="pickingPlanNum">
							<el-input v-model="state.ruleForm.pickingPlanNum" readonly="true"  placeholder="请输入计划领料" maxlength="18" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="实际领料" prop="actualNumber">
							<el-input v-model="state.ruleForm.actualNumber" readonly="true"  placeholder="请输入实际领料" maxlength="18" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="计划退料" prop="retunrnNumber">
							<el-input v-model="state.ruleForm.retunrnNumber" readonly="true"  placeholder="请输入计划退料" maxlength="18" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item label="实际退料" prop="actualNum">
							<el-input v-model="state.ruleForm.actualNum" readonly="true"  placeholder="请输入实际退料" maxlength="18" 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="remank">
							<el-input v-model="state.ruleForm.remank" placeholder="请输入备注	" maxlength="1000" 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="pickingPeopleCode">
							<el-input v-model="state.ruleForm.pickingPeopleCode" placeholder="请输入领料人编码" maxlength="100" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col> -->
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
			<template v-if="props.title=='编辑领料单主表'">
                <el-tabs v-model="tabActive">
                <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="pickingCode" label="领料单号" width="130" align="center" show-overflow-tooltip="" />
				<!-- <el-table-column prop="partCode" label="产品编码" width="120" align="center" show-overflow-tooltip="" />
				<el-table-column prop="partName" label="产品名称" width="120" align="center" show-overflow-tooltip="" /> -->
				<el-table-column prop="materialCode" label="原材料编码" width="120" align="center" show-overflow-tooltip="" />
				<el-table-column prop="materialName" label="原材料名称" width="120" align="center" show-overflow-tooltip="" />
				<el-table-column prop="materialModel" label="原材料规格" width="120" align="center" show-overflow-tooltip="" />
				<el-table-column prop="pickingBarCode" label="原材料批次" width="120" align="center" show-overflow-tooltip="" />
				<el-table-column prop="mesBarcode" label="MES生产批" width="210" align="center"  show-overflow-tooltip="" />
				<el-table-column prop="number" label="数量" width="80" align="center" show-overflow-tooltip="" />
				<el-table-column prop="unitName" label="单位名称" width="80" align="center" show-overflow-tooltip="" />
				<el-table-column prop="quota" label="定额" width="80" align="center" show-overflow-tooltip="" />
				<el-table-column prop="pickingPlanNum" label="计划领料" width="80" align="center" show-overflow-tooltip="" />
				<el-table-column prop="profitLoss" label="盈亏" align="center" width="120" show-overflow-tooltip="">
                  <template  #default="scope">
                    <el-input v-model="scope.row.profitLoss" @input="handleInput(scope.row)" :disabled="isDisableds(scope.row.pickingCode)==true"/>
                  </template>
                </el-table-column>
				<el-table-column prop="remank" label="备注" align="center" width="120" show-overflow-tooltip="">
                  <template  #default="scope">
                    <el-input v-model="scope.row.remank" />
                  </template>
                </el-table-column>
            </el-table>
            </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,nextTick } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { addMesPickingHead, updateMesPickingHead, detailMesPickingHead ,detailMesPickingDetial} from "/@/api/simple/mesPickingHead";
	import { pageMesPickingHead, deleteMesPickingHead } from '/@/api/simple/mesPickingHead';

  	import { formatDate } from '/@/utils/formatTime';
	  const tabActive = ref('item');
	   // 子表
     const detailList = ref([]);
	//父级传递来的参数
	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));
		// 改用detail获取最新数据来编辑
		let rowData = JSON.parse(JSON.stringify(row));
		detailList.value=[];
		if (rowData.id)
		{
			state.ruleForm = (await detailMesPickingHead(rowData.id)).data.result;
		    let  res = await detailMesPickingDetial({parentId:rowData.id,})
            let datas = res.data.result ?? [];
		    detailList.value.push(...datas);
		}
		else
			state.ruleForm = rowData;
		state.isShowDialog = true;
	};

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

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

	// 提交
	const submit = async () => {
		ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if (isValid) {
				let values = state.ruleForm;
				values.data=detailList.value;
				const numbers=ref(0);
				for(let index=0;index<values.data.length;index++) {

					const name="T"+ values.data[index].pickingCode.substring(1);
                    if(values.data[index].pickingCode!=name)
	                {
	                	const profitLoss = values.data[index].profitLoss;
					    //console.log(profitLoss);
					    if(profitLoss!=null )
				        {
					    	const parsedValue = parseFloat(profitLoss);
					    	//console.log(parsedValue);
                            numbers.value += parsedValue;
					    	//console.log(numbers.value);
				        }
	                }
				}
				//console.log(numbers.value);
				//console.log((parseFloat(state.ruleForm.retunrnNumber)-parseFloat(state.ruleForm.actualNum)));
				if(numbers.value!=(parseFloat(state.ruleForm.retunrnNumber)-parseFloat(state.ruleForm.actualNum)))
				{
					return ElMessage({
                    message: `当前退料数不正确，超过实际退料数`,
                    type: "error",
                    });
				}
				var result=(await updateMesPickingHead(values)).data.result;
			     	if(result=="修改成功")
			     	 closeDialog();
			     	else
			     	{
			     		ElMessage({
			     	message: `${result}`,
			     	type: "error",
			     });
			    }
				// if (state.ruleForm.id == undefined || state.ruleForm.id == null || state.ruleForm.id == "" || state.ruleForm.id == 0) {
				// 	await addMesPickingHead(values);
				// } else {
				// 	await updateMesPickingHead(values);
				// }
				// closeDialog();
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		});
	};

//改计划领料数定额根据边根据改变
const handleInput=(value:any) =>{
	
	const allowedValues = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9','.','-','－','．', '０', '１', '２', '３', '４', '５', '６', '７', '８', '９'];
	const currentChar = value.profitLoss.slice(-1);
	if (allowedValues.includes(currentChar))
	{
		value.profitLoss = ToCDB(value.profitLoss.toUpperCase());
	}
	else{
		nextTick(() => {
			value.profitLoss = 0;
        });
	}
	
}

	//全角转半角
const ToCDB=(str:any) =>{
        // 全角转半角
        var tmp = void 0;
        if (str) {
            tmp = '';
            for (var i = 0; i < str.length; i++) {
                if (str.charCodeAt(i) == 12288) {
                    tmp += String.fromCharCode(32);
                } else if (str.charCodeAt(i) == 160) {
                    tmp += String.fromCharCode(32); // 处理下Unicode为160的特殊空格
                } else if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
                    tmp += String.fromCharCode(str.charCodeAt(i) - 65248);
                } else {
                    tmp += str[i];
                }
            }
        } else {
            tmp = str;
        }
        return tmp;
      }

const isDisableds=(value:any)=>{
	const name="T"+value.substring(1);
    if(value==name)
	{
		return value === name;
	}
}	

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




