hlt_gis_admin/src/views/assembly/item/child/Search.vue

<template>
    <div class="wrapper">
        <span class="sqrk"  @click="showModal">申请入库(1)</span>
        <span>
            <a-select ref="select" v-model:value="value" style="width: 200px" :options="options" @focus="focus"
                @change="handleChange">
            </a-select>
        </span>
        <span>
            <a-input-search v-model:value="key" placeholder="请输入搜索内容" style="width: 200px" @search="onSearch" />
        </span>
        <div>
            <a-checkbox v-model:checked="checked1">全部</a-checkbox>
            <a-checkbox v-model:checked="checked2">测试数据1</a-checkbox>
            <a-checkbox v-model:checked="checked3">测试数据2</a-checkbox>
            <a-checkbox v-model:checked="checked4">测试数据3</a-checkbox>
        </div>
        <a-modal v-model:visible="visible" title="申请库" @ok="handleOk" width="1440px" height="980px">
            <library></library>
        </a-modal>
    </div>
</template>


<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import library from "../../library/index.vue"

export default defineComponent({
    name: 'Search',
    components: {library},
    setup() {
        const value = ref<string>('1');
        const key = ref<string>('');
        const checked1 = ref<boolean>(false);
        const checked2 = ref<boolean>(false);
        const checked3 = ref<boolean>(false);
        const checked4 = ref<boolean>(false);

        const options = ref<SelectTypes['options']>([
            {
                value: '1',
                label: '已审核',
            },
            {
                value: '2',
                label: '未审核',
            },
            {
                value: '3',
                label: '未通过',
            },
        ]);

        function onSearch() {

        }

        const visible = ref<boolean>(false);
        const showModal = () => {
            visible.value = true;
        };
        const handleOk = (e: MouseEvent) => {
            console.log(e);
            visible.value = false;
        };

        return {
            visible,
            showModal,
            handleOk,
            options,
            value,
            key,
            onSearch,
            checked1,
            checked2,
            checked3,
            checked4,
        };
    },
});
</script>
<style scoped>
.wrapper>div {
    float: right;
    height: 32px;
    padding: 5px 0;
}

.wrapper>span {
    display: inline-block;
    margin-right: 30px
}

.wrapper {
    width: 100%;
    height: 54px;
    padding: 11px;
    margin-bottom: 20px;
    border-bottom: solid 1px #DEDEDE;
}

.sqrk {
    cursor: pointer;
    width: 94px;
    height: 32px;
    background: #0671DD;
    color: #fff;
    line-height: 32px;
    display: block;
    text-align: center;
    border-radius: 4px;
}
</style>