shenze-sysMan/src/views/fife/index.vue

<template>
    <!-- 生产部录入信息Factory information -->
    <div class="fife" style="background-color:#ebedf0">
        <s-header :name="'设备出厂信息录入'" :noback="false"></s-header>
        <br>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="name" name="姓名" label="姓名" placeholder="姓名"
                    :rules="[{ required: true, message: '请填写真实姓名' }]" />
                <van-field v-model="phone" name="电话" label="电话" placeholder="手机号码"
                    :rules="[{ required: true, message: '请填写联系电话' }]" />
                <van-field v-model="username" name="账号名称" label="账号名称" placeholder="登录账号名称"
                    :rules="[{ required: true, message: '请填写账号名' }]" />
                <van-field v-model="clientId" name="设备唯一码" label="设备唯一码" placeholder="设备唯一码" readonly
                    :rules="[{ required: true, message: '设备唯一码不能为空' }]" />

                <van-field v-model="country" is-link readonly name="发往国家" label="发往国家" placeholder="发往国家"
                    :rules="[{ required: true, message: '请填写发往国家' }]" @click="showPicker = true" />
                <van-popup v-model:show="showPicker" round position="bottom">
                    <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>
                <van-field v-model="location" name="地区名称" label="地区名称" placeholder="省市/地区名称" />

                <!-- <van-field v-model="location" name="地区名称" label="地区名称" placeholder="省市/地区名称" :required="isRequired"
                    :rules="[{ required: isRequired, message: '国内必须精确到省市' }]" /> -->
            </van-cell-group>
            <div style="margin: 16px; display: flex; justify-content: center; align-items: center;">
                <van-button round class="custom-button" type="primary" size="small" native-type="submit" block>
                    提交
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import { inputLocInfo } from "../../service/fife/index";
import { ref, onMounted } from "vue";
import { showFailToast, showToast } from "vant";
// import { computed } from "vue";

export default {
    components: { sHeader },
    setup: function () {

        const phone = ref('');
        const name = ref('');
        const username = ref('');
        const country = ref('');
        const location = ref('');
        const clientId = ref('');
        const showPicker = ref(false);
        const columns = [
            // { text: '中国', value: '中国' },
            { text: '英国', value: '英国' },
            { text: '美国', value: '美国' },
            { text: '加拿大', value: '加拿大' },
            { text: '澳大利亚', value: '澳大利亚' },
            { text: '德国', value: '德国' },
            { text: '奥地利', value: '奥地利' },
            { text: '瑞士', value: '瑞士' },
            { text: '俄罗斯', value: '俄罗斯' },
            { text: '白俄罗斯', value: '白俄罗斯' },
            { text: '乌克兰', value: '乌克兰' },
            { text: '日本', value: '日本' },
            { text: '西班牙', value: '西班牙' },
            { text: '墨西哥', value: '墨西哥' },
            { text: '阿根廷', value: '阿根廷' },
            { text: '法国', value: '法国' },
            { text: '比利时', value: '比利时' },
            { text: '保加利亚', value: '保加利亚' },
            { text: '丹麦', value: '丹麦' },
            { text: '芬兰', value: '芬兰' },
            { text: '荷兰', value: '荷兰' },
            { text: '比利时', value: '比利时' },
            { text: '捷克', value: '捷克' },
            { text: '罗马尼亚', value: '罗马尼亚' },
            { text: '挪威', value: '挪威' },
            { text: '葡萄牙', value: '葡萄牙' },
            { text: '巴西', value: '巴西' },
            { text: '瑞典', value: '瑞典' },
            { text: '斯洛伐克', value: '斯洛伐克' },
            { text: '匈牙利', value: '匈牙利' },
            { text: '意大利', value: '意大利' },
            { text: '韩国', value: '韩国' },
            { text: '波兰', value: '波兰' },
            { text: '乌克兰', value: '乌克兰' },
            { text: '亚美尼亚', value: '亚美尼亚' },
            { text: '阿拉伯', value: '阿拉伯' },
            { text: '泰国', value: '泰国' },
            { text: '以色列', value: '以色列' },
            { text: '格鲁吉亚', value: '格鲁吉亚' },
            { text: '土耳其', value: '土耳其' },
            { text: '拉脱维亚', value: '拉脱维亚' },
            { text: '爱沙尼亚', value: '爱沙尼亚' },
            { text: '蒙古国', value: '蒙古国' },
            { text: '伊朗', value: '伊朗' },
        ];

        const onConfirm = ({ selectedOptions }) => {
            if (selectedOptions[0] != null) {
                showPicker.value = false;
                country.value = selectedOptions[0].text;
            }
        }

        const getClientId = () => {
            // const urlParams = new URLSearchParams(window.location.hash);
            const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
            clientId.value = urlParams.get('clientId');
        }
        onMounted(() => {
            getClientId();
        })

        const locationCheck = ref({});

        const onSubmit = async () => {
            // 提交表单
            const locationCheck = {
                name: name.value,
                phone: phone.value,
                username: username.value,
                clientId: clientId.value,
                country: country.value,
                location: location.value
            }
            // console.log("username >>> ", username.value);
            // console.log("locationCheck >>> ", locationCheck);
            const { data } = await inputLocInfo(locationCheck);

            if (data.code === "00000") {
                // 成功
                // ElMessage.success("保存成功");
                // console.log("data.data 》》》》" , data.data);
                showToast(data.data);
            } else {
                // console.log("data.message 》》》》" , data.message);
                showFailToast(data.message);
            }
        }
        // const isRequired = computed(() => {
        //     return country.value === '中国';
        // });

        return {
            onSubmit,
            clientId,
            locationCheck,
            onConfirm,
            columns,
            showPicker,
            country,
            name,
            location,
            username,
            phone,
            // isRequired
        };
    }
}
</script>

<style>
.custom-button {
    width: 120px;
}
</style>