207 lines
7.4 KiB
Vue
207 lines
7.4 KiB
Vue
<template>
|
|
<el-card>
|
|
<div class="w-[900px]">
|
|
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
|
<el-tabs v-model="activeName" class="demo-tabs">
|
|
<el-tab-pane label="基础设置" name="first">
|
|
<el-form-item label="门店名称">
|
|
<el-input v-model="formData.store_name" clearable placeholder="请输入店员名称" />
|
|
</el-form-item>
|
|
<el-form-item label="门店手机号" prop="title">
|
|
<el-input v-model="formData.phone" clearable placeholder="请输入店员名称" />
|
|
</el-form-item>
|
|
<el-form-item label="营业状态" prop="title">
|
|
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="营业时间" prop="title">
|
|
<el-time-picker v-model="formData.times" is-range range-separator="-" start-placeholder="开始时间"
|
|
end-placeholder="结束时间" value-format="HH:mm:ss" />
|
|
</el-form-item>
|
|
<el-form-item label="门店地址" prop="title">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-select class="flex-1" v-model="formData.province_id" clearable placeholder="请选择"
|
|
@change="getCityList(formData.province_id, false)">
|
|
<el-option v-for="(item, index) in address.provinceList" :key="index"
|
|
:label="item.province_name" :value="parseInt(item.province_code)" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select class="flex-1" v-model="formData.city_id" clearable placeholder="请选择"
|
|
@change="getAreaList(formData.city_id, false)">
|
|
<el-option v-for="(item, index) in address.cityList" :key="index"
|
|
:label="item.city_name" :value="parseInt(item.city_code)" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select class="flex-1" v-model="formData.area_id" clearable placeholder="请选择">
|
|
<el-option v-for="(item, index) in address.areaList" :key="index"
|
|
:label="item.area_name" :value="parseInt(item.area_code)" />
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item label="配送范围(km)" prop="title">
|
|
<el-input-number v-model="formData.range" :step="1" />
|
|
</el-form-item>
|
|
<el-form-item label="门店详细地址" prop="title" class="w-[900px] h-[600px]">
|
|
<myMap :formData="formData"></myMap>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="配送设置" name="second">
|
|
<el-form-item label="同城配送" prop="title">
|
|
<el-switch v-model="formData.isCity" :active-value="1" :inactive-value="0"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="到店自提" prop="title">
|
|
<el-switch v-model="formData.isSelf" :active-value="1" :inactive-value="0"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="默认配送方式" prop="title">
|
|
<el-radio-group v-model="formData.defalut_types" class="ml-4">
|
|
<el-radio label="1" size="large">配送</el-radio>
|
|
<el-radio label="2" size="large">自提</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-form>
|
|
|
|
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="oaPlanEdit">
|
|
import type { FormInstance } from 'element-plus'
|
|
import { apicityLists, apiAreaLists, apigetProvinceLists, apiGetStore, apiSaveStore } from "@/api/address"
|
|
import myMap from "./myMap/index.vue"
|
|
import { onMounted } from 'vue';
|
|
|
|
//
|
|
const formRef = shallowRef<FormInstance>()
|
|
const activeName = ref('first')
|
|
// 地址
|
|
const address = reactive({
|
|
provinceList: [],
|
|
cityList: [],
|
|
areaList: [],
|
|
townList: [],
|
|
})
|
|
// 表单数据
|
|
const formData = reactive({
|
|
id: '',
|
|
store_name: '',
|
|
status: 0,
|
|
times: '',
|
|
phone: "",
|
|
province_id: "",
|
|
city_id: '',
|
|
area_id: '',
|
|
street_id: '',
|
|
address: "",
|
|
title: "",
|
|
lat: "",
|
|
lng: "",
|
|
range: '1',
|
|
isCity: '',
|
|
isSelf: "",
|
|
defalut_types: 1,
|
|
|
|
})
|
|
|
|
const chekcDate = (rule: any, value: any, callback: any) => {
|
|
if (new Date(formData.end_time) < new Date(formData.start_time)) {
|
|
callback(new Error('结束时间不能早于开始时间'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
// 表单验证
|
|
const formRules = reactive<any>({
|
|
// end_time: [{
|
|
// required: true,
|
|
// message: '请输入结束时间',
|
|
// trigger: ['blur']
|
|
// },
|
|
// {
|
|
// validator: chekcDate,
|
|
// trigger: ['blur']
|
|
// }],
|
|
// remind_type: [{
|
|
// required: true,
|
|
// message: '请输入提醒类型',
|
|
// trigger: ['blur']
|
|
// }],
|
|
})
|
|
|
|
|
|
// 获取详情
|
|
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]
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
apiGetStore().then(res => {
|
|
setFormData(res)
|
|
// console.log('res', res)
|
|
// console.log('formData', formData)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
// 提交按钮
|
|
const handleSubmit = async () => {
|
|
await formRef.value?.validate()
|
|
const data = { ...formData, }
|
|
await apiSaveStore(data)
|
|
// mode.value == 'edit'
|
|
// ? await apiOaPlanEdit(data)
|
|
// : await apiOaPlanAdd(data)
|
|
}
|
|
|
|
const getProvinceList = async (isAsync: Boolean) => {
|
|
let res = await apigetProvinceLists()
|
|
address.provinceList = res
|
|
if (isAsync) {
|
|
return Promise.resolve({
|
|
msg: '获取成功'
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
const getCityList = async (province_code: number | String, isAsync: Boolean) => {
|
|
let res = await apicityLists({ code: province_code })
|
|
address.cityList = res
|
|
if (isAsync) {
|
|
return Promise.resolve({
|
|
msg: '获取成功'
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
const getAreaList = async (city_code: number | String, isAsync: Boolean) => {
|
|
let res = await apiAreaLists({ code: city_code })
|
|
address.areaList = res
|
|
if (isAsync) {
|
|
return Promise.resolve({
|
|
msg: '获取成功'
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
|
|
getProvinceList(false)
|
|
</script>
|