SEONexusAdmin/src/views/ad/list/cloneDrawer.vue

<template>
    <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="720" :title="`${drawerProps.title}`">
        <el-form
            ref="ruleFormRef"
            label-width="90px"
            label-position="top"
            label-suffix=" :"
            :rules="rules"
            :disabled="drawerProps.isView"
            :model="drawerProps.row"
            :hide-required-asterisk="drawerProps.isView"
        >
            <el-form-item v-for="e in formColumns" :key="e.label" :label="e.label" :prop="e.prop" :required="e.required">
                <template v-if="e.type === 'switch'">
                    <el-switch
                        v-model="e.value"
                        :active-value="`${1}`"
                        :inactive-value="`${0}`"
                        active-text="上架"
                        inactive-text="下架"
                    />
                </template>
                <template v-if="e.type === 'radio'">
                    <el-radio-group v-model="e.value" class="ml-4">
                        <el-radio v-for="item in e.options" :key="item.value" :value="item.value" size="large">{{
                            item.label
                        }}</el-radio>
                    </el-radio-group>
                </template>
                <template v-if="e.type === 'select'">
                    <el-select filterable v-model="e.value" :placeholder="`请选择${e.label}`" clearable>
                        <el-option
                            v-for="(item, index) in e.options"
                            :key="index"
                            :label="getField(item, e.fieldNames?.label)"
                            :value="getField(item, e.fieldNames?.value)"
                        />
                    </el-select>
                    <div>{{ e.describe }}</div>
                </template>
                <template v-if="e.type === 'text'">
                    <el-input v-model="e.value" :placeholder="`请输入${e.label}`" clearable></el-input>
                    <div>{{ e.describe }}</div>
                </template>
                <template v-if="e.type === 'text-i'">
                    <el-input v-model="e.value" :placeholder="`请输入${e.label}`" clearable></el-input>
                </template>
                <template v-if="e.type === 'text-num'">
                    <el-input v-model="e.value" type="number" :placeholder="`请输入${e.label}`" clearable></el-input>
                </template>
                <template v-if="e.type === 'textarea'">
                    <el-input
                        type="textarea"
                        v-model="e.value"
                        maxlength="3650"
                        :placeholder="`请输入${e.label}`"
                        show-word-limit
                    />
                </template>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="drawerVisible = false">取消</el-button>
            <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, computed } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { adList } from "@/api/interface/ad/list";
import { getAllList } from "@/api/modules/site/list";
type Options = {
    label: string;
    value: string | number;
};

const getField = (item: any, fieldName: string | undefined) => {
    return fieldName ? item[fieldName] : "";
};
type Fields = {
    label: string;
    prop: string;
    type: string;
    value: any;
    required: boolean;
    options?: Options[];
    fieldNames?: { label: string; value: string };
    describe?: string;
};
const generateRules = (fields: Fields[]) => {
    return fields.reduce(
        (acc, field) => {
            const { type, required, label, prop } = field;
            let message = "";
            if (type === "select") {
                message = `请选择${label}`;
            }
            if (type === "tag") {
                message = `请选择${label}`;
            }
            if (type === "radio") {
                message = `请选择${label}`;
            }
            if (type === "text") {
                message = `请输入${label}`;
            }
            if (type === "text-i") {
                message = `请输入${label}`;
            }
            if (type === "text-num") {
                message = `请输入${label}`;
            }
            if (type === "textarea") {
                message = `请输入${label}`;
            }
            if (type === "image") {
                message = `请上传${label}`;
            }
            if (type === "image-more") {
                message = `请上传${label}`;
            }
            acc[prop] = [{ required, message }];
            return acc;
        },
        {} as Record<string, any>
    );
};

const getSiteList = ref([] as any);
getAllList().then(res => {
    getSiteList.value = res.data.item;
});

const formColumns = computed((): Fields[] => {
    return [
        {
            label: "源站点",
            prop: "source_si_id",
            type: "select",
            get value() {
                return drawerProps.value.row!.source_si_id;
            },
            set value(val) {
                drawerProps.value.row!.source_si_id = val;
            },
            options: getSiteList.value,
            fieldNames: { label: "si_name", value: "si_id" },
            required: true
        },
        {
            label: "目标站点 ",
            prop: "target_si_id",
            type: "select",
            describe: "注意：目标站点不能跟源站点一样",
            get value() {
                return drawerProps.value.row!.target_si_id;
            },
            set value(val) {
                drawerProps.value.row!.target_si_id = val;
            },
            options: getSiteList.value,
            fieldNames: { label: "si_name", value: "si_id" },
            required: true
        }
    ];
});
const rules = ref();

interface DrawerProps {
    title: string;
    isView: boolean;
    row: Partial<adList.List>;
    api?: (params: any) => Promise<any>;
    getTableList?: () => void;
    clearSelection?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
    isView: false,
    title: "",
    row: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
    drawerProps.value = params;
    rules.value = generateRules(formColumns.value);
    drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
    ruleFormRef.value!.validate(async valid => {
        if (!valid) return;
        try {
            const params = { ...drawerProps.value.row };
            if (params.target_si_id == params.source_si_id) {
                ElMessage.warning({ message: `目标站点不能跟源站点一样！` });
                return;
            }

            await drawerProps.value.api!(params);
            ElMessage.success({ message: `${drawerProps.value.title}成功！` });
            drawerProps.value.getTableList!();
            drawerProps.value.clearSelection!();
            drawerVisible.value = false;
        } catch (error) {
            console.log(error);
        }
    });
};

defineExpose({
    acceptParams
});
</script>
<style lang="scss">
.el-checkbox-button__inner {
    margin-right: 10px;
    margin-bottom: 10px;
    border-left-color: #dcdfe6 !important;
}
</style>