xj-screen/src/views/indexSun/indexModal.vue

<template>
    <Dialog class="index-modal" :openVis="visible" width="60%" :title="dialogTitle" @close="closeDialog" :maskClosable="false">
        <template #container>
            <div v-if="useForm" class="form-container">
                <Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
                    <slot name="searchFirst"></slot>
                    <a-form-item v-for="(item, index) in firstForm" :label="item.label" :key="index">
                        <a-input :placeholder="item.placeholder" v-if="item.type == 'input'" v-model:value="formRecord[item.field]" />
                    </a-form-item>
                    <a-form-item label="单位">
                        <a-select placeholder="选择单位" v-model:value="orgCode" :options="option" :field-names="fieldNames" />
                    </a-form-item>
                    <a-form-item label="部门">
                        <a-select placeholder="选择单位" @focus="changeDept" v-model:value="orgCode" :options="option" :field-names="fieldNames" />
                    </a-form-item>
                    <slot name="searchSecond"></slot>
                    <a-form-item label="性别">
                        <a-select v-model:value="formRecord.sex" placeholder="请选择" :options="sexTypeList" />
                    </a-form-item>
                </Form>
                <div class="form-btn">
                    <a-button @click="handleClicksearch">搜索</a-button>
                </div>
            </div>
            <BasicTable ref="registerTable" class="table-container" :key="visible" :columns="column" :apiParams="formState" />
        </template>
    </Dialog>
</template>
<script setup lang="ts">
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { useDialog } from '/@/views/components/dialogHooks.ts';
    import { ref, watch } from 'vue';
    import { SexType, sexTypeList } from '/@/utils/settings.ts';
    import { Form } from 'ant-design-vue';
    import { useDepart } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
    import { message } from 'ant-design-vue';
    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';

    const props = defineProps({
        title: {
            type: String,
            default: () => '',
        },
        useForm: {
            type: Boolean,
            default: () => false,
        },
        column: {
            type: Array,
            default: () => [],
        },
        firstForm: {
            type: Array,
            default: () => [],
        },
    });
    const formState = ref();
    const dialogTitle = ref('');
    const formRecord = ref({
        sex: SexType.all,
    });
    function changeDept() {
        if (!orgCode.value) {
            return message.warning('请先选择单位');
        }
    }
    const formItemLayout = {
        labelCol: {
            style: { width: '60px' },
            ...props.labelCol,
        },
        wrapperCol: {
            span: 24,
            ...props.wrapperCol,
        },
    };
    watch(props, () => {
        dialogTitle.value = props.title;
        getField();
    });

    function getField() {
        let result = {};
        props.firstForm.map((item) => {
            result[item.field] = '';
        });
        formRecord.value = {
            ...formRecord.value,
            ...result,
        };
        console.log(formRecord.value);
    }
    function handleClicksearch() {
        console.log(formRecord.value);
    }

    const { orgCode, option, fieldNames, setOrgCode } = useDepart();
    const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
    defineExpose({
        openDialog,
    });
</script>
<style lang="less" scoped>
    :deep(.dialog) {
        border: 1px solid #00ccff !important;
    }
    .index-modal {
        border: 1px solid #00ccff !important;
        :deep(.dialog .ant-modal-title) {
            background: red !important;
        }
        .form-container {
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
            :deep(.ant-form-item-label > label) {
                color: var(--formLabel);
            }
            :deep(.ant-input) {
                color: #fff !important;
                background-color: #082147 !important;
                border: 1px solid transparent !important;
                border-radius: 4px !important;
            }
            :deep(.ant-form) {
                width: 80%;
                display: flex;
                .ant-form-item {
                    flex: 1;
                }
            }
            .form-btn {
                flex: 1;
                text-align: right;
                padding-right: 20px;
                :deep(.ant-btn) {
                    background: #082147;
                    border: 1px solid #00ccff;
                    color: #fff;
                    border-radius: 4px;
                }
                //margin: 0 15px;
            }
        }
        .table-container {
            margin: 0 10px;
        }
    }
</style>