This commit is contained in:
chenbo 2024-02-22 15:48:19 +08:00
parent 8e5791c47e
commit af1bde96ca
2 changed files with 60 additions and 13 deletions

View File

@ -12,6 +12,23 @@
<el-form-item label="名称" prop="farm_name"> <el-form-item label="名称" prop="farm_name">
<el-input v-model="formData.farm_name" clearable placeholder="请输入名称" /> <el-input v-model="formData.farm_name" clearable placeholder="请输入名称" />
</el-form-item> </el-form-item>
<el-form-item label="所属用户" prop="user_id">
<el-select
v-model="formData.user_id"
remote
filterable
placeholder="请输入用户信息"
:remote-method="queryUser"
:loading="loading"
>
<el-option
v-for="(item, index) in optionsData.user"
:key="index"
:label="item.userinfo"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="养殖基地类型" prop="farm_type"> <el-form-item label="养殖基地类型" prop="farm_type">
<el-select <el-select
class="flex-1" class="flex-1"
@ -183,10 +200,10 @@
<el-input v-model="formData.address" clearable placeholder="请输入地址" /> <el-input v-model="formData.address" clearable placeholder="请输入地址" />
</el-form-item> </el-form-item>
<el-form-item label="图片" prop="image" class="avatar-uploader"> <el-form-item label="图片" prop="pic" class="avatar-uploader">
<el-upload <el-upload
:accept="acceptFileTypes" :accept="acceptFileTypes"
v-model="formData.image" v-model="formData.pic"
:data="{ cid: 0 }" :data="{ cid: 0 }"
:headers="{ Token: userStore.token }" :headers="{ Token: userStore.token }"
:action="action" :action="action"
@ -195,8 +212,8 @@
> >
<div class="avatar-uploader-icon"> <div class="avatar-uploader-icon">
<img class="avatar" style="width: 200px; height: 130px" <img class="avatar" style="width: 200px; height: 130px"
v-if="formData.image" v-if="formData.pic"
:src="formData.image" :src="formData.pic"
/> />
<el-icon v-else > <el-icon v-else >
<Plus /> <Plus />
@ -235,6 +252,9 @@ import { ref } from 'vue'
import config from '@/config' import config from '@/config'
import useUserStore from '@/stores/modules/user' import useUserStore from '@/stores/modules/user'
import { ElMessage, type UploadProps, type UploadFile } from 'element-plus' import { ElMessage, type UploadProps, type UploadFile } from 'element-plus'
import {useDictOptions} from "@/hooks/useDictOptions";
import {apiFarmLists} from "@/api/fence_house";
import {getUserList} from "@/api/land";
defineProps({ defineProps({
dictData: { dictData: {
type: Object as PropType<Record<string, any[]>>, type: Object as PropType<Record<string, any[]>>,
@ -257,7 +277,7 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
console.log(uploadFile) console.log(uploadFile)
console.log(uploadFiles) console.log(uploadFiles)
console.log(formData.image) console.log(formData.pic)
} }
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => { const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url! dialogImageUrl.value = uploadFile.url!
@ -272,7 +292,7 @@ const handleAvatarSuccessAvatar: UploadProps['onSuccess'] = (response, uploadFil
return return
} }
formData.image = response.data.uri formData.pic.push(response.data.uri)
} }
// //
const popupTitle = computed(() => { const popupTitle = computed(() => {
@ -290,6 +310,7 @@ const popupTitle = computed(() => {
const formData = reactive({ const formData = reactive({
id: '', id: '',
farm_name: '', farm_name: '',
user_id: 0,
farm_type: '', farm_type: '',
breed_type: '', breed_type: '',
form_scale: '', form_scale: '',
@ -302,12 +323,33 @@ const formData = reactive({
village: '', village: '',
bridge: '', bridge: '',
address: '', address: '',
image: '' pic: [],
longitude: '',
latitude: ''
}) })
// //
const formRules = reactive<any>({}) const formRules = reactive<any>({})
const { optionsData } = useDictOptions<{
user: any[]
}>({
user: {
api: getUserList
}
})
const loading = ref(false)
const queryUser = async (query: string) => {
loading.value = true
const userList = await getUserList({
keyword: query ?? ''
})
optionsData.user = userList
loading.value = false
}
// //
const setFormData = async (data: Record<any, any>) => { const setFormData = async (data: Record<any, any>) => {
for (const key in formData) { for (const key in formData) {

View File

@ -57,6 +57,10 @@
<el-form-item label="负责人" prop="master"> <el-form-item label="负责人" prop="master">
<el-input v-model="formData.master" clearable placeholder="请输入负责人" /> <el-input v-model="formData.master" clearable placeholder="请输入负责人" />
</el-form-item> </el-form-item>
<el-form-item label="负责人电话" prop="master_phone">
<el-input v-model="formData.master_phone" clearable placeholder="请输入负责人电话" />
</el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select class="flex-1" v-model="formData.status" clearable placeholder="请选择状态"> <el-select class="flex-1" v-model="formData.status" clearable placeholder="请选择状态">
<el-option <el-option
@ -68,11 +72,11 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="图片" prop="image"> <el-form-item label="图片" prop="pic">
<el-upload <el-upload
class="avatar-uploader" class="avatar-uploader"
:accept="acceptFileTypes" :accept="acceptFileTypes"
v-model="formData.image" v-model="formData.pic"
:data="{ cid: 1 }" :data="{ cid: 1 }"
:headers="{ Token: userStore.token }" :headers="{ Token: userStore.token }"
:action="action" :action="action"
@ -80,8 +84,8 @@
:on-success="handleAvatarSuccessAvatar" :on-success="handleAvatarSuccessAvatar"
> >
<img <img
v-if="formData.image" v-if="formData.pic"
:src="formData.image" :src="formData.pic"
class="avatar" class="avatar"
/> />
<div v-else class="avatar-uploader-icon"> <div v-else class="avatar-uploader-icon">
@ -132,7 +136,7 @@ const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
ElMessage.error(response.msg); ElMessage.error(response.msg);
return; return;
} }
formData.image = response.data.uri; formData.pic.push(response.data.uri);
} }
// //
@ -150,9 +154,10 @@ const formData = reactive({
fence_house_type: '', fence_house_type: '',
capacity: '', capacity: '',
master: '', master: '',
master_phone: '',
status: '', status: '',
qr_code: '', qr_code: '',
image: '', pic: [],
}) })