easydo-ops/src/views/basic/supplier/detail.vue

<template>
    <el-dialog v-model="visible" :title="titleMap[mode]" width="480" :close-on-click-modal="false" @closed="$emit('closed')">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
            <el-form-item label="供应商类型" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio label="firm">厂商</el-radio>
                    <el-radio label="provider">服务商</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="供应商名称" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入供应商名称"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="creditNo">
                <el-input v-model="form.creditNo" placeholder="请输入统一社会信用代码"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contactsName">
                <el-input v-model="form.contactsName" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="contactsPhone">
                <el-input v-model="form.contactsPhone" placeholder="请输入联系方式"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button :loading="isSaving" type="primary" auto-insert-space @click="submit">保存</el-button>
            <el-button auto-insert-space @click="visible = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import API from "@/api";
import XEUtils from "xe-utils";

const $emit = defineEmits(["success", "closed"]);
const visible = ref(false);
const isSaving = ref(false);

const mode = ref("add");
const titleMap = reactive({
    add: "新增",
    edit: "修改"
});

const form = ref({
    id: null,
    type: "firm",
    companyName: null,
    creditNo: null,
    contactsName: null,
    contactsPhone: null,
    remark: null
});
const rules = reactive({
    type: [{ required: true }],
    companyName: [{ required: true, message: "请输入供应商名称" }],
    creditNo: [
        { required: true, message: "请输入统一社会信用代码" },
        { len: 18, message: "请输入18位统一社会信用代码" }
    ],
    contactsName: [{ required: true, message: "请输入联系人姓名" }],
    contactsPhone: [
        { required: true, message: "请输入联系方式" },
        { pattern: /^\d{11}$/, message: "请输入11位手机号码" }
    ]
})

const open = () => visible.value = true;
const setData = data => {
    open();
    mode.value = "edit";
    XEUtils.objectEach(form.value, (_, key) => XEUtils.set(form.value, key, XEUtils.get(data, key)));
}

const formRef = ref();
const submit = () => {
    formRef.value.validate(valid => {
        if (valid) {
            isSaving.value = true;
            API.easyRun.supplier[mode.value](form.value).then(res => {
                isSaving.value = false;
                ElMessage.success("操作成功");
                visible.value = false;
                $emit("success", mode.value);
            }).catch(() => isSaving.value = false);
        } else {
            return false;
        }
    });
}

defineExpose({
    open,
    setData
})
</script>

<style scoped>
.el-form {
    padding-right: calc(var(--el-dialog-padding-primary) + var(--el-message-close-size, 16px));
}
</style>