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

<template>
    <div class="wrapper">
        <span class="sqrk" @click="showModal">申请库({{ total }})</span>
        <span>
            <a-select ref="select" v-model:value="value" allowClear="true" style="width: 200px" :options="options"
                @change="handleChange"></a-select>
        </span>
        <span><a-input-search allowClear="true" 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, onMounted, getCurrentInstance } from 'vue';
import library from "../../library/index.vue"
import { getAssemblyLibsTotal } from '/@/api/dataAdmin/assembly';
import eventBus from '/@/utils/eventBus';

export default defineComponent({
    name: 'Search',
    components: { library },
    setup() {
        const value = ref<string>('');
        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 currentInstance = getCurrentInstance();
        const parentSetup = currentInstance.parent.setupState;

        const options = ref<SelectTypes['options']>([
            {
                value: '',
                label: '全部',
            },
            {
                value: '未加入',
                label: '加入申请库',
            },
            {
                value: '已加入',
                label: '已加入申请库',
            },
            {
                value: '审核通过',
                label: '审核通过',
            },
            {
                value: '审核不通过',
                label: '审核不通过',
            },
            {
                value: '审核中',
                label: '审核中',
            },
        ]);

        // 未加入、已加入、审核通过、审核不通过、审核中

        function onSearch() {
            parentSetup.getDataList({ sqkzt: value.value, filterValue: key.value })
        }

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

        const total = ref(0);
        onMounted(() => getTotalNum())
        eventBus.on("getAssemblyLibsTotal", () => getTotalNum());


        function getTotalNum() {
            getAssemblyLibsTotal().then(i => total.value = i);
        }


        function handleChange(value: string) {
            console.log(value);
            parentSetup.getDataList({ sqkzt: value, filterValue: key.value })
        }

        return {
            handleChange,
            total,
            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>