byte-sailing-mobile/src/views/procurementManagement/supplierConfig/add.vue

<template>
	<div class="form">
		<van-nav-bar title="供应商管理" left-text="返回" left-arrow @click-left="onClickLeft"> </van-nav-bar>
		<van-form @submit="onSubmit" label-align="top" style="margin-top: 20px; overflow-y: auto">
			<van-cell-group inset>
				<van-field v-model="formData.typeName" is-link readonly label="供应商类型" placeholder="请选择供应商类型"
					@click="typeModal = true" :rules="[{ required: true, message: '供应商类型不能为空' }]" required />
				<van-popup v-model:show="typeModal" position="bottom">
					<van-picker :columns="classification" @confirm="onConfirmType" @cancel="typeModal = false" />
				</van-popup>

				<van-field v-model="formData.name" name="供应商名称" label="供应商名称" placeholder="请填写供应商名称"
					:rules="[{ required: true, message: '供应商名称不能为空' }]" required />

				<van-field v-model="formData.cityName" is-link readonly label="所在城市" placeholder="选择所在城市"
					@click="cityModal = true" :rules="[{ required: true, message: '所在城市不能为空' }]" required />
				<van-popup v-model:show="cityModal" round position="bottom">
					<van-cascader v-model="formData.city" title="请选择所在地区" :options="areaInfo" @close="showArea = false"
						@change="cityOnChange" @finish="getAreaInfo" />

				</van-popup>
				<van-field v-model="formData.areaDetail" rows="3" type="textarea" name="详细地址" label="详细地址"
					placeholder="请填写详细地址" />

				<van-field v-model="formData.contactPerson" name="联系人" label="联系人" placeholder="请填写联系人"
					:rules="[{ required: true, message: '联系人不能为空' }]" required />

				<van-field v-model="formData.contactNumber" name="联系电话" label="联系电话" placeholder="请填写联系电话"
					:rules="[{ required: true, message: '联系电话不能为空' }]" required />
				<van-field name="uploader" label="文件上传">
					<template #input>
						<van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="9"
							:max-size="5 * 1024 * 1024" @oversize="onOversize" />
					</template>
				</van-field>
			</van-cell-group>
			<div style="margin: 16px">
				<van-button round block type="primary" native-type="submit"> 提交 </van-button>
			</div>
		</van-form>
	</div>
</template>
  
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { showSuccessToast, showToast } from "vant";
import { useRoute } from "vue-router";
import { showLoadingToast, closeToast, showNotify } from 'vant';

const proxy = getCurrentInstance().proxy;
const route = useRoute();
const show = ref(false);
const typeModal = ref(false);
const cityModal = ref(false);
const areaInfo = ref([]);
const classification = ref([
	{
		text: "贸易商",
		value: 1,
	},
	{
		text: "工厂",
		value: 2,
	}
]);
const fieldNames = {
	text: "label",
	value: "id",
};
const typeList = ref([
	{
		text: "原料",
		value: "1",
	},
	{
		text: "辅料",
		value: "2",
	},
	{
		text: "配件",
		value: "3",
	},
	{
		text: "包材",
		value: "4",
	},
	{
		text: "其他",
		value: "5",
	},
]);
const unitList = ref([
	{
		text: "个",
		value: "个",
	},
	{
		text: "双",
		value: "双",
	},
]);
const formData = ref({
	id: null,
	definition: "2",
	productClassifyId: null,
	productClassifyName: null,
	code: null,
	customCode: null,
	type: null,
	typeName: null,
	name: null,
	spec: null,
	unit: null,
	remark: null,
	fileList: [],
});
const onConfirmType = ({ selectedOptions }) => {
	formData.value.type = selectedOptions[0].value;
	formData.value.typeName = selectedOptions[0].text;
	typeModal.value = false;
};
const cityOnChange = (selectedOptions) => {

	getAreaInfo(selectedOptions)
};
const onConfirmCity = (selectedOptions) => {
	console.log(selectedOptions)
};

const getAreaInfo = (selectedOptions) => {
	showLoadingToast('加载中...');
	proxy.post("/areaInfo/list", { parentId: selectedOptions.value }).then((res) => {
		let countryIndex = selectedOptions.selectedOptions[0].index;
		let provinceIndex = selectedOptions.tabIndex === 1 ? selectedOptions.selectedOptions[1].index : null;
		let cityIndex = selectedOptions.tabIndex === 2 ? selectedOptions.selectedOptions[2].index : null;
		//已经没有下级数据
		if (res.data.length === 0) {
			if (selectedOptions.tabIndex === 1) {
				formData.value.cityName = selectedOptions.selectedOptions.map((item) => item.text).join(' ');
				cityModal.value = false;
				formData.value.selectedOptions = selectedOptions;
				return;
			}
		}
		if (selectedOptions.tabIndex === 2) {
			formData.value.cityName = selectedOptions.selectedOptions.map((item) => item.text).join(' ');
			cityModal.value = false;
			formData.value.selectedOptions = selectedOptions;
			return;
		}
		if (selectedOptions.tabIndex === 0) {
			areaInfo.value[countryIndex].children = res.data.map((item, index) => {
				return {
					...item,
					index: index,
					text: item.name,
					value: item.id,
				};
			});
		} else if (selectedOptions.tabIndex === 1) {
			areaInfo.value[countryIndex].children[provinceIndex].children = res.data.map((item, index) => {
				return {
					...item,
					index: index,
					text: item.name,
					value: item.id,
				};
			});
		} else if (selectedOptions.tabIndex === 2) {
			areaInfo.value[countryIndex].children[provinceIndex].children[cityIndex].children = res.data.map((item, index) => {
				return {
					...item,
					index: index,
					text: item.name,
					value: item.id,
				};
			});
		}
		console.log(areaInfo)
		closeToast();
	});
};


const fileList = ref([]);
const afterRead = (file) => {
	if (file && file.length > 0) {
		for (let i = 0; i < file.length; i++) {
			file[i].status = "uploading";
			file[i].message = "上传中...";
			proxy.post("/fileInfo/getSing", { fileName: file[i].file.name }).then(
				(res) => {
					let forms = new FormData();
					forms.append("file", file[i].file);
					proxy.post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", { ...res.data.uploadBody, file: forms.get("file") }).then(
						() => {
							file[i].id = res.data.id;
							file[i].url = res.data.fileUrl;
							file[i].fileName = res.data.fileName;
							delete file[i].status;
							delete file[i].message;
						},
						() => {
							file[i].status = "failed";
							file[i].message = "上传失败";
						}
					);
				},
				() => {
					file[i].status = "failed";
					file[i].message = "上传失败";
				}
			);
		}
	} else {
		file.status = "uploading";
		file.message = "上传中...";
		proxy.post("/fileInfo/getSing", { fileName: file.file.name }).then(
			(res) => {
				let forms = new FormData();
				forms.append("file", file.file);
				proxy.post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", { ...res.data.uploadBody, file: forms.get("file") }).then(
					() => {
						file.id = res.data.id;
						file.url = res.data.fileUrl;
						file.fileName = res.data.fileName;
						delete file.status;
						delete file.message;
					},
					() => {
						file.status = "failed";
						file.message = "上传失败";
					}
				);
			},
			() => {
				file.status = "failed";
				file.message = "上传失败";
			}
		);
	}
};
const onOversize = () => {
	showToast("文件大小不能超过 5MB");
};
const onClickLeft = () => history.back();
const onSubmit = () => {
	if (fileList.value && fileList.value.length > 0) {
		formData.value.fileList = fileList.value.map((item) => {
			return {
				id: item.id,
				fileName: item.fileName,
			};
		});
	} else {
		formData.value.fileList = [];
	}
	console.log(formData.value.selectedOptions)
	if(formData.value.selectedOptions) {
		formData.value.countryId = formData.value.selectedOptions.selectedOptions[0].value;
		formData.value.provinceId = formData.value.selectedOptions.tabIndex === 2 ? formData.value.selectedOptions.selectedOptions[1].value : null
		formData.value.cityId = formData.value.selectedOptions.tabIndex === 1 ? 
								formData.value.selectedOptions.selectedOptions[1].value : 
								formData.value.selectedOptions.selectedOptions[2].value;
	}
	proxy.post("/supplierInfo/" + route.query.type, formData.value).then(() => {
		showSuccessToast(route.query.type == 'add' ? '添加成功' : '修改成功');
		setTimeout(() => {
			history.back();
		}, 500);
	});
};

onMounted(() => {
	proxy.post("/areaInfo/list", formData.value).then((res) => {
		areaInfo.value = res.data.map((item, index) => {
			return {
				...item,
				index: index,
				text: item.chineseName,
				value: item.id,
				children: []
			};
		});
	});
	if(route.query.type == 'add') return
	proxy.post("/supplierInfo/detail", { id: route.query.id }).then((res) => {
		formData.value = res.data
		formData.value.typeName = res.data.type == 1 ? '供应商' : '客户'
	})
});
</script>