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

<template>
    <div class="wrapper">
        <span class="sqrk" @click="showModal">申请库({{ resNum }})</span>
        <span>
            <a-select ref="select" v-model:value="value" style="width: 200px" :options="options"
                @change="handleChange">
            </a-select>
        </span>
        <span>
            <a-input-search v-model:value="key" placeholder="请输入搜索内容" style="width: 200px" @search="onSearch" />
        </span>
        <div class="total-num">
            <!-- <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> -->
            共有<span>{{ num }}</span>个通用接口
        </div>
        <!-- <a-modal style="top: 50px" v-model:visible="visible" title="申请库" @ok="handleOk" width="1440px">
            <library></library>
        </a-modal> -->
        <InterfaceCarModal v-if="visible" @closeModal="visible = false"/>
    </div>
</template>


<script>
import { defineComponent, ref, computed, unref, watch, onMounted } from 'vue';
import library from "../../library/index.vue";
import InterfaceCarModal from './InterfaceCarModal.vue';
import { getResInCar } from '/@/api/resource/plat';
import { session } from '/@/utils/Memory';
import { message } from 'ant-design-vue';

const props = {
    totalNum:{
        type:Number,
        default:0
    }
}

export default defineComponent({
    name: 'Search',
    components: { library, InterfaceCarModal },
    props,
    setup(props,{emit}) {
        const value = ref('1');
        const key = ref('');
        const checked1 = ref(false);
        const checked2 = ref(false);
        const checked3 = ref(false);
        const checked4 = ref(false);

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

        function onSearch(e) {
            emit("interfaceSearch", e);
        }

        const visible = ref(false);
        const showModal = () => {
            visible.value = true;
        };
        // const handleOk = (e) => {
        //     console.log(e);
        //     visible.value = false;
        // };

        const num = ref(props.totalNum);
        const resNum = ref(0)
        onMounted(() => {
            getResData();
        })
        const getResData = () => {
            getResInCar({
                userId: session.getItem('userId'),
            }).then((res) => {
                if (res.datas) {
                    let resData = res.datas.filter(item=>item.applyCarInfo.workflowType==='INTERFACE')
                    resNum.value = resData.length
                }
            })
        }

        watch(
            ()=>props.totalNum,
            (val)=>{
                num.value = val
            }
        )
        const handleChange = ()=>{

        }

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

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

.wrapper {
    width: 100%;
    height: 54px;
    padding: 11px;
    margin-bottom: 10px;
    /* border-bottom: solid 1px #DEDEDE; */
    background: #F8F8F8;
    border-radius: 4px;
}

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

.total-num {
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
}
.total-num>span{
    font-size: 20px;
    color: #0671DD;
}
</style>