OnlineEducation-teacher-front/src/views/courseDetails/components/EditCourse.vue

<template>
	<a-form
		:model="form"
		:rules="rules"
		ref="formRef"
		:label-col="{ span: 5 }"
		:wrapper-col="{ span: 18 }"
		labelAlign="left"
		class="edit-course-form"
	>
		<a-form-item label="工单标题" name="title" required>
			<a-input v-model:value="form.title" placeholder="工单标题" />
		</a-form-item>
		<a-form-item label="关联客户" name="customer" required>
			<a-select v-model:value="form.customer" placeholder="选择客户">
				<a-select-option v-for="item in customerList" :key="item.value" :value="item.value">{{
					item.label
				}}</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="产品" name="product">
			<a-select v-model:value="form.product" placeholder="选择订单">
				<a-select-option v-for="item in productList" :key="item.value" :value="item.value">{{
					item.label
				}}</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="工单类型" name="type" required>
			<a-select v-model:value="form.type" placeholder="选择类型">
				<a-select-option v-for="item in typeList" :key="item.value" :value="item.value">{{
					item.label
				}}</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="情况说明" name="desc">
			<a-textarea v-model:value="form.desc" :maxlength="300" :rows="4" placeholder="请输入情况说明" show-count />
		</a-form-item>
		<a-form-item label="信息来源" name="source">
			<a-select v-model:value="form.source" placeholder="选择信息来源">
				<a-select-option v-for="item in sourceList" :key="item.value" :value="item.value">{{
					item.label
				}}</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="上传附件" name="attachments">
			<a-upload
				v-model:file-list="form.attachments"
				:before-upload="beforeUpload"
				:multiple="true"
				:list-type="picture - card"
				:show-upload-list="{ showPreviewIcon: false }"
				:custom-request="dummyRequest"
				:accept="'.jpg,.png'"
			>
				<a-button>上传文件</a-button>
			</a-upload>
			<div class="upload-tip">请上传jpg、png图片附件，最多可上传4张，单张大小不要超过8M。</div>
		</a-form-item>
		<a-form-item label="联系人" name="contact" required>
			<a-input v-model:value="form.contact" placeholder="联系人" />
		</a-form-item>
		<a-form-item label="联系电话" name="phone">
			<a-input v-model:value="form.phone" placeholder="联系电话" />
		</a-form-item>
		<a-form-item label="所属区域" name="region">
			<a-select v-model:value="form.region" placeholder="请选择">
				<a-select-option v-for="item in regionList" :key="item.value" :value="item.value">{{
					item.label
				}}</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="详细地址" name="address">
			<a-input v-model:value="form.address" placeholder="详细地址" />
		</a-form-item>
		<a-form-item style="text-align: right; margin-top: 32px">
			<a-button @click="emit('close')" style="margin-right: 16px">取消</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</a-form-item>
	</a-form>
</template>

<script setup>
	import { ref, watch } from 'vue'
	const props = defineProps({
		course: { type: Object, default: () => ({}) }
	})
	const emit = defineEmits(['close'])

	const formRef = ref()
	const form = ref({
		title: '',
		customer: '',
		product: '',
		type: '',
		desc: '',
		source: '',
		attachments: [],
		contact: '',
		phone: '',
		region: '',
		address: ''
	})

	// mock 下拉数据
	const customerList = [
		{ label: '张三公司', value: 'zhangsan' },
		{ label: '李四企业', value: 'lisi' }
	]
	const productList = [
		{ label: '订单A', value: 'a' },
		{ label: '订单B', value: 'b' }
	]
	const typeList = [
		{ label: '售后', value: 'after' },
		{ label: '投诉', value: 'complain' }
	]
	const sourceList = [
		{ label: '电话', value: 'phone' },
		{ label: '微信', value: 'wechat' }
	]
	const regionList = [
		{ label: '浙江舟山', value: 'zhoushan' },
		{ label: '杭州', value: 'hangzhou' }
	]

	watch(
		() => props.course,
		(val) => {
			form.value = {
				...form.value,
				...val
			}
		},
		{ deep: true, immediate: true }
	)

	// 校验规则
	const rules = {
		title: [{ required: true, message: '请输入工单标题' }],
		customer: [{ required: true, message: '请选择客户' }],
		type: [{ required: true, message: '请选择工单类型' }],
		contact: [{ required: true, message: '请输入联系人' }]
	}

	// 附件上传限制
	function beforeUpload(file, fileList) {
		const isImg = file.type === 'image/jpeg' || file.type === 'image/png'
		const isLt8M = file.size / 1024 / 1024 < 8
		if (!isImg) {
			window.$message?.error('只能上传jpg/png图片')
			return false
		}
		if (!isLt8M) {
			window.$message?.error('单张图片不能超过8M')
			return false
		}
		if (form.value.attachments.length + fileList.length > 4) {
			window.$message?.error('最多上传4张图片')
			return false
		}
		return true
	}
	// mock上传
	function dummyRequest({ onSuccess }) {
		setTimeout(() => {
			onSuccess && onSuccess()
		}, 500)
	}

	function onSubmit() {
		formRef.value.validate().then(() => {
			console.log('保存数据', form.value)
			emit('close')
		})
	}
</script>

<style lang="less" scoped>
	.edit-course-form {
		padding-top: 24px;
		.upload-tip {
			color: #888;
			font-size: 12px;
			margin-top: 4px;
		}
	}
</style>