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="groupId">
                        <el-select
                            popper-class="select-popper-orange"
                            class="select mr-10 select-orange"
                            v-model="ruleForm.groupId"
                        >
                            <el-option
                                v-for="(item, index) in groupOptions"
                                :key="index"
                                :label="item.groupName"
                                :value="item.id"
                            />
                            <template #footer>
                                <div class="add-btn" v-if="!isAddingItem" @click="isAddingItem=true">
                                    <el-icon class="add-icon" size="16">
                                        <Plus />
                                    </el-icon>
                                    <span>新增分组</span>
                                </div>
                                <template v-else>
                                    <el-input v-model="ruleForm.groupName" class="option-input" /><br />
                                    <el-button type="primary" @click="submitGroupName"> 新增 </el-button>
                                    <el-button @click="isAddingItem=false">取消</el-button>
                                </template>
                            </template>
                        </el-select>
                    </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 { onMounted, 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: "",
    groupId: "",
    groupName: ""
});
const rules = reactive({
    name: { required: true, message: "请输入用户名称", trigger: ["blur", "change"] },
    tel: { required: true, message: "请输入电话号码", trigger: ["blur", "change"] },
});

const ruleFormRef = ref(null);
const userId = ref(null);
const submitForm = async () => {
    if (!ruleFormRef.value) return;
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            const params = {
                id: userId.value,
                name: ruleForm.name,
                tel: ruleForm.tel,
                address: ruleForm.address,
                groupId: ruleForm.groupId,
            };
            VE_API.manage_interface.saveUserInfo(params).then(({code}) => {
                if (code === 0) {
                    ElMessage.success("保存成功");
                    showClient.value = false;
                    emit("updateGroupList");
                }
            })
        } else {
            console.log("error submit!");
        }
    });
};

const groupOptions = ref([]);
const isAddingItem = ref(false);
function getGroupList() {
    VE_API.manage_user.fetchGroupList({farmId: 766}).then(({ data }) => {
        groupOptions.value = data;
    });
}

const submitGroupName = () => {
    const params = {
        groupName: ruleForm.groupName,
    };
    VE_API.manage_user
        .saveGroup(params)
        .then(({ code }) => {
            if (code === 0) {
                ElMessage.success("新建分组成功");
                getGroupList()
                emit("updateGroupList");
            }
        });
};

const emit = defineEmits(["updateGroupList"]);

onMounted(() => {
    getGroupList();
});

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

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

// 打开弹窗-类型
function openClientPopup(type, data) {
    userId.value = data ? data.id : null;
    if (type === "edit") {
        ruleForm.name = data.name;
        ruleForm.tel = data.tel;
        ruleForm.address = data.address;
        // ruleForm.groupId = data.groupId;
    } 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>