sl-sfy-safety/src/views/system-config/business-scene/components/InfoDrawer.vue

<template>
    <main>
        <el-drawer v-model="visiable" :title="props.title" @close="emits('closeDrawer')">
            <section class="drawer__form">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
                    <el-form-item label="场景名称" prop="name">
                        <el-input v-model="ruleForm.name" maxlength="100" placeholder="请输入场景名称" type="text" />
                    </el-form-item>
                    <el-form-item label="应用模板" prop="viewTemplateList">
                        <el-select v-model="ruleForm.viewTemplateList" multiple placeholder="请选择应用模板"
                            class="select__custom--multiple" value-key="id">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="ruleForm.remark" maxlength="100" placeholder="请输入备注" type="textarea"
                            :autosize="{ minRows: 3, maxRows: 6 }" />
                    </el-form-item>
                    <!-- <el-form-item label="状态" prop="isDisabled">
                        <el-switch v-model="ruleForm.isDisabled" :active-value=0 :inactive-value=1 />
                    </el-form-item> -->
                </el-form>
            </section>
            <footer class="drawer__btn">
                <el-button @click="resetForm()">重置</el-button>
                <el-button type="primary" @click="submitForm()">提交</el-button>
            </footer>
        </el-drawer>
    </main>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { SceneListInfo, TemplateListInfo } from '@/types/business-scene/type.ts'
import type { FormInstance, FormRules } from 'element-plus'
import { getAllSceneModuleList } from '@/api/template/template'
import { addSceneData, editSceneData } from '@/api/sys-config/business-scene'
import { AddSceneDataParam, EditSceneDataParam } from '@/types/business-scene/type'
import { debounce } from 'lodash-es';
import { getMessage } from './MessageBox'
const visiable = ref(true)
const props = defineProps<{
    title: string;
    data: SceneListInfo | undefined
}>()
const emits = defineEmits(['closeDrawer', 'fetchTable'])
const ruleForm = reactive({
    name: '',
    viewTemplateList: [] as TemplateListInfo[],
    remark: '',
    isDisabled: 0
})
const options = ref<TemplateListInfo[]>([])
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<typeof ruleForm>>({
    name: [{ required: true, message: '场景名称不能为空', trigger: 'change' }],
    viewTemplateList: [{ required: true, message: '应用模板不能为空', trigger: 'change' }],
})
const debounceSubmit = debounce((params) => {
    addSceneData(params)
        .then(() => {
            emits('fetchTable')
            emits('closeDrawer')
            getMessage("success", '添加业务场景数据成功！')
        })
}, 500);
const debounceEdit = debounce((params) => {
    editSceneData(params)
        .then(() => {
            emits('fetchTable')
            emits('closeDrawer')
            getMessage("success", '修改业务场景数据成功！')
        })
}, 500);
const submitForm = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid) => {
        if (!valid) return
        const addParams: AddSceneDataParam = {
            name: ruleForm.name,
            viewTemplateIdList: ruleForm.viewTemplateList.map(item => item.id),
            remark: ruleForm.remark,
            // isDisabled: ruleForm.isDisabled
        }
        if (props.title !== '添加业务场景') {
            const editParams: EditSceneDataParam = {
                id: props.data?.id!,
                ...addParams
            }
            debounceEdit(editParams);
            return;
        }
        debounceSubmit(addParams);
    });
}
const resetForm = () => {
    if (!ruleFormRef.value) return;
    if (props.title !== '添加业务场景') {
        initRuleForm(props.data)
        return;
    }
    ruleFormRef.value.resetFields();
}
const initRuleForm = (data) => {
    ruleForm.name = data.name;
    ruleForm.viewTemplateList = data.viewTemplateList;
    ruleForm.remark = data.remark;
    ruleForm.isDisabled = data.isDisabled;
}
onMounted(async () => {
    const res = await getAllSceneModuleList();
    options.value = res.map(item => ({
        id: item.id,
        name: item.name
    }));
    initRuleForm(props.data)
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__body) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.el-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.drawer__form {
    height: calc(100% - 32px);
    overflow-y: auto;
}

.drawer__btn {
    display: flex;
    justify-content: center;
    height: 32px;
}

.select__custom--multiple {
    :deep(.el-select__selection) {
        min-height: 25px;
        max-height: 120px;
        overflow-y: auto;
    }
}
</style>