multiStoreAdmin/src/views/storesSet/index.vue

<template>
    <el-card>
        <div class="w-[600px]">
            <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="门店名称" prop="title">
                            <el-input v-model="formData.title" clearable placeholder="请输入店员名称" />
                        </el-form-item>
                        <el-form-item label="门店手机号" prop="title">
                            <el-input v-model="formData.title" 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.city_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="请选择"
                                        @change="getTownList(formData.area_id, false)">
                                        <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-col :span="6">
                                    <el-select class="flex-1" v-model="formData.street_id" clearable placeholder="请选择"
                                        @change="getVilllageList(formData.street_id, false)">
                                        <el-option v-for="(item, index) in address.townList" :key="index"
                                            :label="item.street_name" :value="parseInt(item.street_code)" />
                                    </el-select>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="配送范围(km)" prop="title">
                            <el-input-number v-model="formData.num" :step="1" />
                        </el-form-item>
                        <el-form-item label="门店详细地址" prop="title">
                            <!-- <el-input v-model="formData.title" clearable placeholder="请输入手机号码" /> -->
                            <!-- <myMap></myMap> -->

                        </el-form-item>
                    </el-tab-pane>



                    <el-tab-pane label="配送设置" name="second">
                        <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-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                        <el-form-item label="默认配送方式" prop="title">
                            <el-radio-group v-model="formData.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>


        </div>
    </el-card>
</template>

<script lang="ts" setup name="oaPlanEdit">
import type { FormInstance } from 'element-plus'
import { timeFormat } from '@/utils/util'
import { apicityLists, apiAreaLists, apiStreetLists, apigetProvinceLists } from "@/api/address"
import myMap from "./myMap/index.vue"
import axios from 'axios';

// 
const formRef = shallowRef<FormInstance>()
const activeName = ref('first')
// 地址
const address = reactive({
    provinceList: [],
    cityList: [],
    areaList: [],
    townList: [],
})
// 表单数据
const formData = reactive({
    id: '',
    status: 0,
    title: '',
    province_id: '510000',
    city_id: '',
    area_id: '',
    street_id: '',
    types: '1',
    times: '',
    num: "",
    start_time: '',
    end_time: '',
    remind_type: '',
    remark: '',
})

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]
        }
    }

}


// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData, }
    // 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({ province_code })
    address.cityList = res
    if (isAsync) {
        return Promise.resolve({
            msg: '获取成功'
        });
    }
}


const getAreaList = async (city_code: number | String, isAsync: Boolean) => {
    let res = await apiAreaLists({ city_code })
    address.areaList = res
    if (isAsync) {
        return Promise.resolve({
            msg: '获取成功'
        });
    }
}


const getTownList = async (area_code: number | String, isAsync: Boolean) => {
    let res = await apiStreetLists({ area_code })
    address.townList = res
    if (isAsync) {
        return Promise.resolve({
            msg: '获取成功'
        });
    }
}
// getProvinceList(false)
</script>