opt_web/src/views/price-approval/cost-detail/component/EditDrawer.vue

<script lang="ts" setup>
/**
 * @Name: EditDrawer.vue
 * @Description: 成本查看-编辑抽屉
 * @Author: xinyan
 */
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { Close, Finished } from '@element-plus/icons-vue';
import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';


const stationOptions = <Ref>inject('stationOptions');
const btnLoading = ref(false);

const editOpen = defineModel({ default: false });

const editDrawer = <Ref>useTemplateRef('editDrawer');

const props: any = defineProps({
	rowData: Object,
});
const { rowData } = props;

const emit = defineEmits(['refresh']);

interface RuleForm {
	description: any;
	station: any;
	platform: any;
	export_tax_rate: any;
	import_tax_rate: any;
	VAT_rate: any;
	first_cost: any;
	forwarding_fee: any;
	return_or_refurbishment_rates: any;
	advertising_budget_rate: any;
	storage_charges_rate: any;
	brokerage_rate: any;
	price_supply_rate: any;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
	description: rowData?.description,
	station: rowData?.station,
	platform: rowData?.platform,
	export_tax_rate: rowData?.export_tax_rate,
	import_tax_rate: rowData?.import_tax_rate,
	VAT_rate: rowData?.VAT_rate,
	first_cost: rowData?.first_cost,
	forwarding_fee: rowData?.forwarding_fee,
	return_or_refurbishment_rates: rowData?.return_or_refurbishment_rates,
	advertising_budget_rate: rowData?.advertising_budget_rate,
	storage_charges_rate: rowData?.storage_charges_rate,
	brokerage_rate: rowData?.brokerage_rate,
	price_supply_rate: rowData?.price_supply_rate,
});

const validateRate = (rule, value, callback) => {
	const regex = /^\d{1,2}(\.\d{1,2})?$/; // 小数点前最多2位数字，小数点后最多2位数字
	if (!regex.test(value)) {
		callback(new Error('格式不正确，小数点前、后不超过2个数字'));
	} else {
		callback();
	}
};

const rules = reactive<FormRules<RuleForm>>({
	description: [{ required: true, message: '请输入成本模板名称', trigger: 'blur' }],
	station: [{ required: true, message: '请输入地区', trigger: 'blur' }],
	platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
	export_tax_rate: [{ required: true, message: '请输入出口报关费率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }
	],
	import_tax_rate: [{ required: true, message: '请输入进口关税率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	VAT_rate: [{ required: true, message: '请输入VAT', trigger: 'blur' }],
	first_cost: [{ required: true, message: '请输入头程运输费率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	forwarding_fee: [{ required: true, message: '请输入转发费', trigger: 'blur' }],
	return_or_refurbishment_rates: [{ required: true, message: '请输入退货与翻新费', trigger: 'blur' }],
	advertising_budget_rate: [{ required: true, message: '请输入广告预算费率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	storage_charges_rate: [{ required: true, message: '请输入仓储费', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	brokerage_rate: [{ required: true, message: '请输入佣金', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
	price_supply_rate: [{ required: true, message: '请输入供货价折算率', trigger: 'blur' },
		{ validator: validateRate, trigger: 'blur' }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			try {
				const res = await useResponse(api.updateRow, { id: rowData?.id, ...ruleForm }, btnLoading);
				if (res && res.code == 2000) {
					editOpen.value = false;
					ElMessage.success({ message: '编辑成功', plain: true, icon: 'Operation' });
					emit('refresh');
				}
			} catch (error) {
				console.error('Error==>', error);
			}
		} else {
			console.log('error submit!', fields);
		}
	});
};

function closeDrawer() {
	editDrawer.value.handleClose();
}
</script>

<template>
	<div class="drawer-container">
		<el-drawer
			ref="editDrawer"
			v-model="editOpen"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:title="`成本查看 - 编辑 `"
			size="30%"
		>
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-7" label-position="top" label-width="auto" status-icon>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item class="font-medium" label="成本模板名称" prop="description">
							<el-input v-model="ruleForm.description" placeholder="请输入成本模板名称" />
						</el-form-item>
						<el-form-item class="font-medium" label="地 区" prop="station">
							<!--<el-select v-model="ruleForm.station" placeholder="请选择地区">-->
							<!--	<el-option v-for="item in stationOptions" :key="item" :label="item" :value="item" />-->
							<!--</el-select>-->
							<el-input v-model="ruleForm.station" placeholder="请输入地区"/>
						</el-form-item>
						<el-form-item class="font-medium" label="进口关税率" prop="import_tax_rate">
							<el-input v-model="ruleForm.import_tax_rate" placeholder="请输入进口关税率"></el-input>
						</el-form-item>
						<el-form-item class="font-medium" label="头程运输费率" prop="first_cost">
							<el-input v-model="ruleForm.first_cost" placeholder="请输入头程运输费率"></el-input>
						</el-form-item>
						<el-form-item class="font-medium" label="退货与翻新费" prop="return_or_refurbishment_rates">
							<el-input v-model="ruleForm.return_or_refurbishment_rates" placeholder="请输入退货与翻新费"></el-input>
						</el-form-item>
						<el-form-item class="font-medium" label="仓储费" prop="storage_charges_rate">
							<el-input v-model="ruleForm.storage_charges_rate" placeholder="请输入仓储费"></el-input>
						</el-form-item>
						<el-form-item class="font-medium" label="供货价折算率" prop="price_supply_rate">
							<el-input v-model="ruleForm.price_supply_rate" placeholder="请输入供货价折算率"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item class="font-medium" label="平 台" prop="platform">
							<el-input v-model="ruleForm.platform" placeholder="请输入平台" />
						</el-form-item>
						<el-form-item class="font-medium" label="出口报关费率" prop="export_tax_rate">
							<el-input v-model="ruleForm.export_tax_rate" placeholder="请输入出口报关费率"></el-input>
						</el-form-item>
						<el-form-item class="font-medium" label="VAT" prop="VAT_rate">
							<el-input v-model="ruleForm.VAT_rate" placeholder="请输入VAT"></el-input>
						</el-form-item>
						<el-form-item class="font-medium" label="转发费" prop="forwarding_fee">
							<el-input v-model="ruleForm.forwarding_fee" placeholder="请输入转发费"></el-input>
						</el-form-item>
						<el-form-item class="font-medium" label="广告预算费率" prop="advertising_budget_rate">
							<el-input v-model="ruleForm.advertising_budget_rate" placeholder="请输入广告预算费率"></el-input>
						</el-form-item>
						<el-form-item class="font-medium" label="佣金" prop="brokerage_rate">
							<el-input v-model="ruleForm.brokerage_rate" placeholder="请输入佣金"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item>
					<el-divider />
					<div class="flex flex-1 justify-end">
						<el-button :icon="Close" @click="closeDrawer">取 消</el-button>
						<el-button :icon="Finished" :loading="btnLoading" type="primary" @click="submitForm(ruleFormRef)"> 确 定 </el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<style scoped>
.drawer-container :deep(.el-drawer__header) {
	border-bottom: none;
	font-weight: 500;
}

.drawer-container :deep(.el-drawer__title) {
	font-size: 18px;
}
</style>