239 lines
9.3 KiB
Vue
239 lines
9.3 KiB
Vue
<template>
|
|
<div class="edit-popup">
|
|
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
|
|
@close="handleClose">
|
|
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
|
<el-form-item label="头像" prop="avatar">
|
|
<material-picker v-model="formData.avatar" :limit="1" />
|
|
</el-form-item>
|
|
<el-form-item label="用户昵称" prop="nickname">
|
|
<el-input v-model="formData.nickname" clearable placeholder="请输入用户昵称" />
|
|
</el-form-item>
|
|
<el-form-item label="用户名称" prop="name">
|
|
<el-input v-model="formData.name" clearable placeholder="请输入用户昵称" />
|
|
</el-form-item>
|
|
<el-form-item label="账户余额" prop="user_money">
|
|
<el-input v-model="formData.user_money" disabled clearable />
|
|
</el-form-item>
|
|
<el-form-item label="本人照片" prop="image">
|
|
<material-picker v-model="formData.image" :limit="1" />
|
|
</el-form-item>
|
|
<el-form-item label="出生日期" prop="image">
|
|
<el-date-picker v-model="formData.both" type="date" placeholder="请选择" />
|
|
</el-form-item>
|
|
<el-form-item label="体重" prop="weight">
|
|
<el-input v-model="formData.weight" clearable placeholder="请输入体重" />
|
|
</el-form-item>
|
|
<el-form-item label="身高" prop="height">
|
|
<el-input v-model="formData.height" clearable placeholder="请输入身高" />
|
|
</el-form-item>
|
|
<el-form-item label="性别" prop="height">
|
|
<el-select v-model="formData.sex" clearable placeholder="请选择">
|
|
<el-option label="女" :value="2"></el-option>
|
|
<el-option label="男" :value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="兴趣爱好" prop="hobby_introduce">
|
|
<editor class="flex-1" v-model="formData.hobby_introduce" :height="500" />
|
|
</el-form-item>
|
|
<el-form-item label="用户账号" prop="account">
|
|
<el-input v-model="formData.account" clearable placeholder="请输入用户账号" />
|
|
</el-form-item>
|
|
<el-form-item label="用户电话" prop="mobile">
|
|
<el-input v-model="formData.mobile" clearable placeholder="请输入用户电话" />
|
|
</el-form-item>
|
|
<el-form-item label="茶艺师等级" prop="level">
|
|
<el-select class="flex-1" v-model="formData.level" clearable placeholder="请选择茶艺师等级">
|
|
<el-option v-for="(item, index) in dictData.level" :key="index" :label="item.name"
|
|
:value="parseInt(item.value)" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="星级" prop="star">
|
|
<el-input v-model="formData.star" clearable placeholder="请输入星级" />
|
|
</el-form-item>
|
|
<el-form-item label="服务单价" prop="price">
|
|
<el-input v-model="formData.price" clearable placeholder="请输入茶艺服务单价" />
|
|
</el-form-item>
|
|
<el-form-item label="车马费" prop="mileage_price">
|
|
<el-input v-model="formData.mileage_price" clearable placeholder="请输入车马费/每公里" />
|
|
</el-form-item>
|
|
<el-form-item label="是否免费出行" prop="is_mileage">
|
|
<el-select class="flex-1" v-model="formData.is_mileage" clearable placeholder="请选择">
|
|
<el-option label="免费" :value="1"></el-option>
|
|
<el-option label="收费" :value="0"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="服务次数" prop="sold">
|
|
<el-input v-model="formData.sold" clearable placeholder="请输入服务次数" />
|
|
</el-form-item>
|
|
<el-form-item label="服务方式" prop="server_type">
|
|
<el-select class="flex-1" v-model="formData.server_type" clearable placeholder="请选择服务方式">
|
|
<el-option v-for="(item, index) in dictData.server_type" :key="index" :label="item.name"
|
|
:value="parseInt(item.value)" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="服务区域" prop="address_id">
|
|
<el-input v-model="formData.address_id" clearable placeholder="请输入服务区域" />
|
|
</el-form-item> -->
|
|
<el-form-item label="所属城市" prop="city_id">
|
|
<el-select v-model="formData.city_id" clearable placeholder="请选择">
|
|
<el-option :label="item.name" :value="item.id" v-for="item in cityList"
|
|
:key="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="地址" prop="longitude">
|
|
<el-input v-model="formData.address" clearable placeholder="请输入地址" />
|
|
</el-form-item>
|
|
<el-form-item label="经度" prop="longitude">
|
|
<el-input v-model="formData.longitude" clearable placeholder="请输入经度" />
|
|
</el-form-item>
|
|
<el-form-item label="纬度" prop="latitude">
|
|
<el-input v-model="formData.latitude" clearable placeholder="请输入纬度" />
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="state">
|
|
<el-select class="flex-1" v-model="formData.state" clearable placeholder="请选择">
|
|
<el-option label="可约" :value="0"></el-option>
|
|
<el-option label="不可约" :value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="是否禁用" prop="disable">
|
|
<el-select class="flex-1" v-model="formData.disable" clearable placeholder="请选择">
|
|
<el-option label="否" :value="0"></el-option>
|
|
<el-option label="是" :value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="teamasterUserEdit">
|
|
import Popup from '@/components/popup/index.vue'
|
|
import { apiTeamasterUserAdd, apiTeamasterUserEdit, apiTeamasterUserDetail } from '@/api/teamaster_user'
|
|
import { timeFormat, removeImageUrlPrefix, normalizeImageUrl } from '@/utils/util'
|
|
import type { PropType } from 'vue'
|
|
import { apiTeaStoreCityLists } from '@/api/tea_store'
|
|
import type { FormInstance } from 'element-plus'
|
|
|
|
|
|
defineProps({
|
|
dictData: {
|
|
type: Object as PropType<Record<string, any[]>>,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
const emit = defineEmits(['success', 'close'])
|
|
const formRef = shallowRef<FormInstance>()
|
|
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
|
const mode = ref('add')
|
|
|
|
|
|
// 弹窗标题
|
|
const popupTitle = computed(() => {
|
|
return mode.value == 'edit' ? '编辑茶艺师' : '新增茶艺师'
|
|
})
|
|
|
|
// 表单数据
|
|
const formData = reactive({
|
|
id: '',
|
|
avatar: '',
|
|
nickname: '',
|
|
name: '',
|
|
image: '',
|
|
both: '',
|
|
weight: '',
|
|
height: '',
|
|
sex: '',
|
|
hobby_introduce: '',
|
|
account: '',
|
|
mobile: '',
|
|
level: '',
|
|
star: '',
|
|
price: '',
|
|
mileage_price: '',
|
|
is_mileage: '',
|
|
sold: '',
|
|
server_type: '',
|
|
address_id: 0,
|
|
city_id: '',
|
|
address: '',
|
|
longitude: '',
|
|
latitude: '',
|
|
disable: '',
|
|
state: '',
|
|
user_money: ''
|
|
})
|
|
|
|
// 城市列表
|
|
const cityList = ref<any[]>([])
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const res = await apiTeaStoreCityLists()
|
|
cityList.value = res || []
|
|
} catch (e) {
|
|
cityList.value = []
|
|
}
|
|
})
|
|
|
|
|
|
|
|
// 表单验证
|
|
const formRules = reactive<any>({
|
|
|
|
})
|
|
|
|
|
|
// 获取详情
|
|
const setFormData = async (data: Record<any, any>) => {
|
|
for (const key in formData) {
|
|
if (data[key] != null && data[key] != undefined) {
|
|
//@ts-ignore
|
|
formData[key] = data[key]
|
|
}
|
|
}
|
|
|
|
//@ts-ignore
|
|
// formData.avatar = normalizeImageUrl(formData.avatar)
|
|
}
|
|
|
|
const getDetail = async (row: Record<string, any>) => {
|
|
const data = await apiTeamasterUserDetail({
|
|
id: row.id
|
|
})
|
|
setFormData(data)
|
|
}
|
|
|
|
|
|
// 提交按钮
|
|
const handleSubmit = async () => {
|
|
await formRef.value?.validate()
|
|
let data = { ...formData, }
|
|
data.avatar = removeImageUrlPrefix(data.avatar)
|
|
|
|
mode.value == 'edit'
|
|
? await apiTeamasterUserEdit(data)
|
|
: await apiTeamasterUserAdd(data)
|
|
popupRef.value?.close()
|
|
emit('success')
|
|
}
|
|
|
|
//打开弹窗
|
|
const open = (type = 'add') => {
|
|
mode.value = type
|
|
popupRef.value?.open()
|
|
}
|
|
|
|
// 关闭回调
|
|
const handleClose = () => {
|
|
emit('close')
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
open,
|
|
setFormData,
|
|
getDetail
|
|
})
|
|
</script>
|