ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-03-09 08:58:58
@ 备注: 表单分组
-->
<script lang='ts' setup>
import { fromGroupSearch,fromGroupInfo,editFromGroupInfo } from "@/api/DesignForm/gromGroup/types";
import { gainFormGroupInfo,addCustomerFormGroup } from "@/api/DesignForm/gromGroup/api";
import { editCustomerFormGroup } from '@/api/DesignForm/requestapi'


const props = defineProps({
	drawerWith:{
		type:Number,
		default:0
	},
	groupKey:{
		type:String,
		default:""
	}
});
const emits = defineEmits(["refreshPage"]);
const drawerOpenClose = ref(true)
const formGroupContent = reactive<fromGroupInfo>({
	title:"",
	icon:"",
	ordid:"",
	sort:50
})
const ruleFormGroup = ref(ElForm)
const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" //上传地址
const butLoading = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-03-09 11:13:08
@ 功能: 表单验证规则
*/
const rules = reactive<FormRules<RuleForm>>({
	title: [
		{ required: true, message: '分组名称不能为空', trigger: 'blur' },
		{ min: 1, max: 50, message: '名称长度为1-50个字符', trigger: 'blur' },
	],
})
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:55:53
@ 功能: 关闭
*/
const handleClose = (done: () => void) => {
	if(formGroupContent.title != "" || formGroupContent.icon != "" || formGroupContent.sort != 50 || formGroupContent.ordid != ""){
		ElMessageBox.confirm('编辑好的数据是否提交?')
			.then(() => {
				//   done()
				submitForm();
				
			})
			.catch(() => {
				// catch error
				emits("refreshPage","formPageGroup");
			});
	}else{
		emits("refreshPage","formPageGroup");
	}
	
}

/**
@ 作者: 秦东
@ 时间: 2024-03-09 11:51:28
@ 功能: 提交数据
*/
const submitForm =  () => {
	butLoading.value = true;
	ruleFormGroup.value.validate((isValid: boolean) => {
		if (isValid) {
			if(props.groupKey != ""){
				//编辑
				let sendInfo = {
					id: props.groupKey,
					title: formGroupContent.title,
					sort: formGroupContent.sort,
					icon: formGroupContent.icon
				}
				editCustomerFormGroup(sendInfo)
					.then((data) =>{
						ElMessage({
							message: data.msg,
							type: 'success',
						})
						closeFormGroupBox();
					})
					.finally(() =>{
						butLoading.value = false;
					});
			}else{
				//新增
				addCustomerFormGroup(formGroupContent)
					.then((data) =>{
						ElMessage({
							message: data.msg,
							type: 'success',
						})
						closeFormGroupBox();
					})
					.finally(() =>{
						butLoading.value = false;
					});
			}
			
		}else{
			butLoading.value = false;
		}
	})
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 11:30:15
@ 功能: 检查图片上传
*/
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	// console.log("检查图片上传---1--->",rawFile.type)
	if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' ) {
		ElMessage.error('Avatar picture must be JPG format!')
		return false
	}
	return true
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 11:30:43
@ 功能: 上传成功
*/
const handleAvatarSuccess: UploadProps['onSuccess'] = (response,uploadFile,uploadFiles) => {
	// console.log("上传后数据---1--->",response)
	// console.log("上传后数据---2--->",uploadFile)
	// console.log("上传后数据----3-->",uploadFiles)

	// console.log("上传后数据----4-->",response.url)
	// console.log("上传后数据----5-->",URL.createObjectURL(uploadFile.raw!))
	// formGroupContent.icon = URL.createObjectURL(uploadFile.raw!)
	formGroupContent.icon = response.data.url
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 11:44:06
@ 功能: 关闭抽屉
*/
const closeFormGroupBox = () => {
	emits("refreshPage","formPageGroup");
	initializeData();
}
/**
@ 作者: 秦东
@ 时间: 2024-03-09 11:45:08
@ 功能: 初始化数据
*/
const initializeData = () => {
	formGroupContent.title=""
	formGroupContent.icon=""
	formGroupContent.sort=50
	formGroupContent.ordid=""
	ruleFormGroup.value.resetFields();
}
onMounted(()=>{
	if(props.groupKey != "") {
		gainFormGroupInfo({id: props.groupKey})
			.then(({data})=>{
				console.log("编辑表单分组",data);
				formGroupContent.title=data.title
				formGroupContent.icon=data.icon
				formGroupContent.sort=data.sort
				formGroupContent.ordid=data.ordid
			})
	}
})
</script>
<template>
	<el-drawer
		v-model="drawerOpenClose"
		title="编辑表单分组"
		:before-close="handleClose"
		class="drawerGroupClass"
	>
		<div class="formGroupBox">
			<el-form ref="ruleFormGroup" :model="formGroupContent" :rules="rules" label-width="auto" style="max-width: 600px">
				<el-form-item label="分组名称"  prop="title">
					<el-input v-model="formGroupContent.title" />
				</el-form-item>
				<el-form-item label="排序">
					<el-input-number v-model="formGroupContent.sort" controls-position="right" />
				</el-form-item>
				<el-form-item label="封面">
					<el-upload
						class="avatar-uploader"
						:action="imgUploadApiUrl"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img v-if="formGroupContent.icon" :src="formGroupContent.icon" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					</el-upload>
				</el-form-item>
				
			</el-form>
		</div>
		<template #footer>
			<div style="flex: auto">
				<el-button type="primary" :loading="butLoading" @click="submitForm()">提交</el-button>
				<el-button @click="closeFormGroupBox">取消</el-button>
			</div>
		</template>
	</el-drawer>
</template>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style  lang='scss' scoped>
.formGroupBox{
	padding: 0 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>