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-input v-model="formData.farm_name" clearable placeholder="请输入名称" />
</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-select
class="flex-1"
@ -183,10 +200,10 @@
<el-input v-model="formData.address" clearable placeholder="请输入地址" />
</el-form-item>
<el-form-item label="图片" prop="image" class="avatar-uploader">
<el-form-item label="图片" prop="pic" class="avatar-uploader">
<el-upload
:accept="acceptFileTypes"
v-model="formData.image"
v-model="formData.pic"
:data="{ cid: 0 }"
:headers="{ Token: userStore.token }"
:action="action"
@ -195,8 +212,8 @@
>
<div class="avatar-uploader-icon">
<img class="avatar" style="width: 200px; height: 130px"
v-if="formData.image"
:src="formData.image"
v-if="formData.pic"
:src="formData.pic"
/>
<el-icon v-else >
<Plus />
@ -235,6 +252,9 @@ import { ref } from 'vue'
import config from '@/config'
import useUserStore from '@/stores/modules/user'
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({
dictData: {
type: Object as PropType<Record<string, any[]>>,
@ -257,7 +277,7 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
console.log(uploadFile)
console.log(uploadFiles)
console.log(formData.image)
console.log(formData.pic)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!
@ -272,7 +292,7 @@ const handleAvatarSuccessAvatar: UploadProps['onSuccess'] = (response, uploadFil
return
}
formData.image = response.data.uri
formData.pic.push(response.data.uri)
}
//
const popupTitle = computed(() => {
@ -290,6 +310,7 @@ const popupTitle = computed(() => {
const formData = reactive({
id: '',
farm_name: '',
user_id: 0,
farm_type: '',
breed_type: '',
form_scale: '',
@ -302,12 +323,33 @@ const formData = reactive({
village: '',
bridge: '',
address: '',
image: ''
pic: [],
longitude: '',
latitude: ''
})
//
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>) => {
for (const key in formData) {

View File

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