foster-pc-vue/src/components/editClientPopup.vue

<template>
    <div>
        <!-- 新增客户、编辑客户 -->
        <popup v-model:show="showClient" closeable round class="popup-client">
            <div class="popup-title">{{ typePopup === "add" ? "新增客户" : "编辑客户" }}</div>
            <div class="popup-content">
                <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="auto"
                    class="rule-form"
                    size="large"
                >
                    <el-form-item label="姓名" prop="name">
                        <el-input class="input" v-model="ruleForm.name" size="large" placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item label="电话" prop="tel">
                        <el-input class="input" v-model="ruleForm.tel" size="large" placeholder="请输入电话号码" />
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input class="input" v-model="ruleForm.address" size="large" placeholder="请输入地址" />
                    </el-form-item>
                    <el-form-item label="头像" prop="photo">
                        <upload></upload>
                    </el-form-item>
                </el-form>
            </div>
            <div class="popup-footer">
                <div class="cancel" @click="resetForm">取消</div>
                <div @click="submitForm">保存</div>
            </div>
        </popup>
    </div>
</template>

<script setup>
import { Popup } from "vant";
import { reactive, ref } from 'vue';
import { ElMessage } from "element-plus";
import upload from "@/components/common/upload.vue";

const showClient = ref(false);
const ruleForm = reactive({
    name: "",
    tel: "",
    address: "",
});
const rules = reactive({
    name: { required: true, message: "请输入用户名称", trigger: ["blur", "change"] },
    tel: { required: true, message: "请输入电话号码", trigger: ["blur", "change"] },
});

const ruleFormRef = ref(null);
const submitForm = async () => {
    if (!ruleFormRef.value) return;
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            ElMessage.success("保存成功");
            showClient.value = false;
        } else {
            console.log("error submit!");
        }
    });
};


//新增客户
const typePopup = ref("add");

const resetForm = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.resetFields();
    showClient.value = false;
};

// 打开弹窗-类型
function openClientPopup(type, data) {
    console.log('data', data);
    if (type === "edit") {
        ruleForm.name = data.name;
        ruleForm.tel = data.tel;
        ruleForm.address = data.address;
    } else {
        ruleForm.name = "";
        ruleForm.tel = "";
        ruleForm.address = "";
    }
    typePopup.value = type;
    showClient.value = true;
}

defineExpose({
    openClientPopup,
});
</script>

<style lang="scss" scoped>
.popup-client {
    // width: 24%;
    width: 504px;
    padding: 31px 25px;
    box-sizing: border-box;
    background: #fff;
    ::v-deep {
        .van-popup__close-icon {
            // color: #ffffff;
        }
    }
    .popup-title {
        text-align: center;
        color: #000;
        font-size: 24px;
        margin-bottom: 15px;
    }
    .popup-content {
        width: 100%;
        ::v-deep {
            .el-form-item__label {
                color: rgba(0, 0, 0, 0.4);
            }
            .el-input__wrapper {
                background: transparent;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.46) inset;
            }
        }
        .input {
            height: 46px;
            font-size: 16px;
        }
    }
    .popup-footer {
        width: 100%;
        display: flex;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-top: 30px;
        padding-top: 25px;
        div {
            flex: 1;
            background: linear-gradient(120deg, #ffd887, #ed9e1e);
            border-radius: 6px;
            padding: 13px;
            font-size: 20px;
            color: #000;
            text-align: center;
            cursor: pointer;
        }
        .cancel {
            color: #000;
            background: #f3f3f3;
            margin-right: 30px;
        }
    }
}
</style>