hlt_gis_admin/src/views/systemAdmin/system/position/PositionDrawer.vue

<template>
    <a-drawer :title="title" :width="540" :visible="open" :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }" @close="onClose">
        <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <!-- 名称 -->
            <a-form-item label="岗位名称" name="name">
                <a-input v-model:value="form.name" style="width: 100%" placeholder="请输入名称" />
            </a-form-item>
            <!-- 职责 -->
            <a-form-item label="岗位职责" name="duty">
                <a-input v-model:value="form.duty" style="width: 100%" placeholder="请输入职责" />
            </a-form-item>
            <!-- 排序 -->
            <a-form-item label="排序" name="sort">
                <a-input v-model:value="form.sort" style="width: 100%" placeholder="请输入序号" />
            </a-form-item>
        </a-form>
        <div :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
        }">
            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
            <a-button type="primary" @click="onSubmit">确定</a-button>
        </div>
    </a-drawer>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch } from 'vue';
import { message } from 'ant-design-vue';
import { v4 as uuidv4 } from 'uuid';
import { savePosition } from '/@/api/sys/position';

const props = {
    formData: {
        type: Object,
        default: () => {
            return {}
        }
    },
    drawerTitle: {
        type: String,
        default: "新增岗位"
    }
}
export default defineComponent({
    name: 'positionDrawer',
    components: {},
    props,
    setup(props, { emit }) {
        const form = reactive({
            id: "",
            orgid: "",
            oabaseid: "",
            name: '',
            duty: '',
            sort: '',
        });
        const rules = {
            name: [{
                required: true,
                message: '请输入岗位名称',
                trigger: 'blur'
            }],
            duty: [{
                required: true,
                message: '请输入岗位职责',
                trigger: 'blur'
            }],
            sort: [{
                required: true,
                message: '请输入序号',
                trigger: 'blur'
            }]
        };
        const title = ref(props.drawerTitle)
        const open = ref(false);
        const formRef = ref()

        onMounted(() => {
            if (Object.keys(props.formData).length) {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
            }
            form.sort+=''
        })
        watch(
            () => [props.formData, props.drawerTitle],
            ([newF, newD]) => {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
                form.sort+=''
                title.value = newD
            },
            {
                immediate: true,
                deep: true
            }
        )
        const showDrawer = () => {
            open.value = true;
        };
        const onClose = () => {
            open.value = false;
            resetForm()
        };
        const onSubmit = () => {
            console.log(form);
            formRef.value.validate().then(() => {
                //此处调用新增
                if (title.value === '新增岗位') {
                    form.id = uuidv4()
                }
                form.sort = parseInt(form.sort)
                savePosition(form).then(res => {
                    if (res.datas === 1) {
                        message.success('操作成功')
                        emit('onSubmit', true)
                    } else {
                        message.error('操作失败')
                        emit('onSubmit', false)
                    }
                    onClose()
                })
            }).catch((error) => {
                console.log('error', error);
            });
        };
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            form,
            rules,
            title,
            open,
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            showDrawer,
            onClose,
            onSubmit,
            resetForm
        };
    },
});
</script>