223 lines
7.4 KiB
Vue
223 lines
7.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<el-button type="warning" @click="handleExportForm">导出当前表单</el-button>
|
|||
|
|
<el-button type="info" plain icon="Upload" @click="handleImport"
|
|||
|
|
v-hasPermi="['produce:add_sheep:import']">导入</el-button>
|
|||
|
|
<el-form :model="form" ref="formRef" label-position="left" label-width="100px">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="羊只id" prop="sheepId">
|
|||
|
|
<el-input v-model="form.sheepId" placeholder="请输入羊只id" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="羊舍" prop="sheepfold">
|
|||
|
|
<el-input v-model="form.sheepfold" placeholder="请输入羊舍" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="父号" prop="father">
|
|||
|
|
<el-input v-model="form.father" placeholder="请输入父号" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="母号" prop="mother">
|
|||
|
|
<el-input v-model="form.mother" placeholder="请输入母号" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="出生体重" prop="bornWeight">
|
|||
|
|
<el-input v-model="form.bornWeight" placeholder="请输入出生体重" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="出生日期" prop="birthday">
|
|||
|
|
<el-date-picker v-model="form.birthday" type="date" placeholder="选择出生日期" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="性别" prop="gender">
|
|||
|
|
<el-select v-model="form.gender" placeholder="请选择性别">
|
|||
|
|
<el-option label="公" value="1" />
|
|||
|
|
<el-option label="母" value="0" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="胎次" prop="parity">
|
|||
|
|
<el-input v-model="form.parity" placeholder="请输入胎次" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="品种" prop="varietyId">
|
|||
|
|
<el-input v-model="form.varietyId" placeholder="请输入品种" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="入群日期" prop="joinDate">
|
|||
|
|
<el-date-picker v-model="form.joinDate" type="date" placeholder="选择入群日期" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="10">
|
|||
|
|
<el-form-item label="技术员" prop="technician">
|
|||
|
|
<el-input v-model="form.technician" placeholder="请输入技术员" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="16">
|
|||
|
|
<el-form-item label="备注" prop="comment">
|
|||
|
|
<el-input v-model="form.comment" type="textarea" rows="3" placeholder="请输入备注" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
|||
|
|
<el-button @click="resetForm">重置</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-dialog title="导入羊只信息" v-model="importOpen" width="400px" append-to-body>
|
|||
|
|
<el-upload ref="uploadRef" :limit="1" accept=".xlsx,.xls" :action="importUrl" :headers="headers"
|
|||
|
|
:auto-upload="false" :on-success="handleImportSuccess" :on-error="handleImportError" drag>
|
|||
|
|
<i class="el-icon-upload"></i>
|
|||
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|||
|
|
</el-upload>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button type="info" @click="downloadTemplate">下载模板</el-button>
|
|||
|
|
<el-button type="primary" @click="submitUpload">确 定</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
import { addSheep } from '@/api/produce/manage_sheep/add_sheep/add_sheep';
|
|||
|
|
|
|||
|
|
const form = ref({
|
|||
|
|
sheepId: '',
|
|||
|
|
sheepfold: '',
|
|||
|
|
father: '',
|
|||
|
|
mother: '',
|
|||
|
|
bornWeight: '',
|
|||
|
|
birthday: '',
|
|||
|
|
gender: '',
|
|||
|
|
parity: '',
|
|||
|
|
varietyId: '',
|
|||
|
|
joinDate: '',
|
|||
|
|
comment: '',
|
|||
|
|
technician: '',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const formRef = ref(null);
|
|||
|
|
|
|||
|
|
const rules = {
|
|||
|
|
sheepId: [{ required: true, message: '请输入羊只id', trigger: 'blur' }],
|
|||
|
|
sheepfold: [{ required: true, message: '请输入羊舍', trigger: 'blur' }],
|
|||
|
|
father: [{ message: '请输入父号', trigger: 'blur' }],
|
|||
|
|
mother: [{ message: '请输入母号', trigger: 'blur' }],
|
|||
|
|
bornWeight: [{ required: true, message: '请输入出生体重', trigger: 'blur' }],
|
|||
|
|
birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
|
|||
|
|
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
|||
|
|
parity: [{ message: '请输入胎次', trigger: 'blur' }],
|
|||
|
|
varietyId: [{ required: true, message: '请输入品种', trigger: 'blur' }],
|
|||
|
|
joinDate: [{ message: '请选择入群日期', trigger: 'change' }],
|
|||
|
|
technician: [{ message: '请输入技术员', trigger: 'blur' }],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
//表单验证
|
|||
|
|
const submitForm = () => {
|
|||
|
|
formRef.value.validate((valid) => {
|
|||
|
|
console.log('表单验证结果:', valid);
|
|||
|
|
if (valid) {
|
|||
|
|
addSheep(form.value)
|
|||
|
|
.then(response => {
|
|||
|
|
console.log('后端响应:', response);
|
|||
|
|
if (response.code === 200) {
|
|||
|
|
alert('新增成功');
|
|||
|
|
resetForm();
|
|||
|
|
} else {
|
|||
|
|
alert(response.msg || '新增失败');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
alert('请填写所有必填字段');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const resetForm = () => {
|
|||
|
|
form.value = {
|
|||
|
|
sheepId: '',
|
|||
|
|
sheepfold: '',
|
|||
|
|
father: '',
|
|||
|
|
mother: '',
|
|||
|
|
bornWeight: '',
|
|||
|
|
birthday: '',
|
|||
|
|
gender: '',
|
|||
|
|
parity: '',
|
|||
|
|
varietyId: '',
|
|||
|
|
joinDate: '',
|
|||
|
|
comment: '',
|
|||
|
|
technician: '',
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
//导出
|
|||
|
|
import { exportSheepForm } from '@/api/produce/manage_sheep/add_sheep/add_sheep';
|
|||
|
|
|
|||
|
|
function handleExportForm() {
|
|||
|
|
// 把当前表单数据直接传后端
|
|||
|
|
exportSheepForm(form.value).then(res => {
|
|||
|
|
// 使用 Ruoyi 自带的下载方法
|
|||
|
|
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
|||
|
|
const fileName = `羊只信息_${new Date().getTime()}.xlsx`;
|
|||
|
|
const link = document.createElement('a');
|
|||
|
|
link.href = URL.createObjectURL(blob);
|
|||
|
|
link.download = fileName;
|
|||
|
|
link.click();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//导入
|
|||
|
|
import { getToken } from '@/utils/auth';
|
|||
|
|
|
|||
|
|
const uploadRef = ref();
|
|||
|
|
const importOpen = ref(false);
|
|||
|
|
const importUrl = ref(import.meta.env.VITE_APP_BASE_API + '/produce/manage_sheep/add_sheep/importData');
|
|||
|
|
const headers = ref({ Authorization: 'Bearer ' + getToken() });
|
|||
|
|
|
|||
|
|
function handleImport() { importOpen.value = true; }
|
|||
|
|
function downloadTemplate() {
|
|||
|
|
proxy.download('/produce/manage_sheep/add_sheep/importTemplate', {}, `羊只模板_${Date.now()}.xlsx`);
|
|||
|
|
}
|
|||
|
|
function submitUpload() { uploadRef.value?.submit(); }
|
|||
|
|
function handleImportSuccess(res) {
|
|||
|
|
proxy.$modal.msgSuccess(res.msg || '导入成功');
|
|||
|
|
importOpen.value = false;
|
|||
|
|
uploadRef.value?.clearFiles();
|
|||
|
|
}
|
|||
|
|
function handleImportError(err) {
|
|||
|
|
proxy.$modal.msgError(JSON.parse(err.message)?.msg || '导入失败');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.app-container {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|