multiStoreAdmin/src/views/storesSet/index.vue

<template>
    <el-card>
        {{ formData }}
        <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: '',
    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>