|
|
@@ -0,0 +1,176 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+/**
|
|
|
+ * @Name: CreateDialog.vue
|
|
|
+ * @Description: 成本查看-创建弹窗
|
|
|
+ * @Author: xinyan
|
|
|
+ */
|
|
|
+import * as api from '../api';
|
|
|
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
|
|
+import { useResponse } from '/@/utils/useResponse';
|
|
|
+import { Close, Finished } from '@element-plus/icons-vue';
|
|
|
+
|
|
|
+const stationOptions = <Ref>inject('stationOptions');
|
|
|
+const platformOptions = <Ref>inject('platformOptions');
|
|
|
+const loading = ref(false);
|
|
|
+const createDialog = <Ref>useTemplateRef('createDialog');
|
|
|
+const createOpen = defineModel({ default: false });
|
|
|
+
|
|
|
+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: '',
|
|
|
+ station: '',
|
|
|
+ platform: '',
|
|
|
+ export_tax_rate: '',
|
|
|
+ import_tax_rate: '',
|
|
|
+ VAT_rate: '',
|
|
|
+ first_cost: '',
|
|
|
+ forwarding_fee: '',
|
|
|
+ return_or_refurbishment_rates: '',
|
|
|
+ advertising_budget_rate: '',
|
|
|
+ storage_charges_rate: '',
|
|
|
+ brokerage_rate: '',
|
|
|
+ price_supply_rate: '',
|
|
|
+});
|
|
|
+
|
|
|
+const rules = reactive<FormRules<RuleForm>>({
|
|
|
+ description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
|
|
|
+ station: [{ required: true, message: '请选择地区', trigger: 'change' }],
|
|
|
+ platform: [{ required: true, message: '请输入平台', trigger: 'blur' }],
|
|
|
+ export_tax_rate: [{ required: true, message: '请输入出口报关费率', trigger: 'blur' }],
|
|
|
+ import_tax_rate: [{ required: true, message: '请输入进口关税率', trigger: 'blur' }],
|
|
|
+ VAT_rate: [{ required: true, message: '请输入VAT', trigger: 'blur' }],
|
|
|
+ first_cost: [{ required: true, message: '请输入头程运输费率', 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' }],
|
|
|
+ storage_charges_rate: [{ required: true, message: '请输入仓储费', trigger: 'blur' }],
|
|
|
+ brokerage_rate: [{ required: true, message: '请输入佣金', trigger: 'blur' }],
|
|
|
+ price_supply_rate: [{ required: true, message: '请输入供货价折算率', trigger: 'blur' }],
|
|
|
+});
|
|
|
+
|
|
|
+const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ await formEl.validate(async (valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ const body = {
|
|
|
+ description: ruleForm.description,
|
|
|
+ station: ruleForm.station,
|
|
|
+ platform: ruleForm.platform,
|
|
|
+ export_tax_rate: ruleForm.export_tax_rate,
|
|
|
+ import_tax_rate: ruleForm.import_tax_rate,
|
|
|
+ VAT_rate: ruleForm.VAT_rate,
|
|
|
+ first_cost: ruleForm.first_cost,
|
|
|
+ forwarding_fee: ruleForm.forwarding_fee,
|
|
|
+ return_or_refurbishment_rates: ruleForm.return_or_refurbishment_rates,
|
|
|
+ advertising_budget_rate: ruleForm.advertising_budget_rate,
|
|
|
+ storage_charges_rate: ruleForm.storage_charges_rate,
|
|
|
+ brokerage_rate: ruleForm.brokerage_rate,
|
|
|
+ };
|
|
|
+ const res = await useResponse(api.postCost, body, loading);
|
|
|
+ if (res.code === 2000) {
|
|
|
+ ElMessage.success({ message: '创建成功', plain: true, icon: 'CirclePlus' });
|
|
|
+ createOpen.value = false;
|
|
|
+ emit('refresh');
|
|
|
+ } else {
|
|
|
+ ElMessage.error('创建失败，请检查表单');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+function cancelDialog() {
|
|
|
+ resetForm(ruleFormRef.value);
|
|
|
+ createDialog.value.visible = false;
|
|
|
+}
|
|
|
+
|
|
|
+const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ ref="createDialog"
|
|
|
+ v-model="createOpen"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :title="`成本查看 - 创建 `"
|
|
|
+ style="width: 40%"
|
|
|
+ >
|
|
|
+ <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" 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-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>
|
|
|
+ <template #footer>
|
|
|
+ <el-button :icon="Close" @click="cancelDialog">取 消</el-button>
|
|
|
+ <el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped></style>
|
xinyan