hlt_gis_admin/src/views/resource/plat/item/child/Search.vue

<template>
    <div class="wrapper">
        <span class="sqrk" @click="showModal">申请库({{ resNum }})</span>
        <span>
            <a-select ref="select" allowClear v-model:value="statusValue" style="width: 200px" :options="options"
                @change="onSearch">
            </a-select>
        </span>
        <span>
            <a-input-search allowClear v-model:value="keyWord" placeholder="请输入标题名称" style="width: 200px"
                @search="onSearch" />
        </span>
        <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">
            全部
        </a-checkbox>
        <div class="tagbox">
            <a-checkbox-group v-model:value="value4" :options="optionsTag" @change="tagChange"></a-checkbox-group>
        </div>
        <!-- 弹出框 -->
        <ResCarModal @register="registerModal" :type="props.type" @closeModal="visible = false" />
    </div>
</template>


<script>
import { defineComponent, ref, computed, unref, getCurrentInstance, onMounted } from 'vue';
import library from "../../../library/index.vue";
import ResCarModal from './ResCarModal.vue';
import { getResInCar, clearResInCar, tag } from '/@/api/resource/plat';
import { session } from '/@/utils/Memory';
import { message } from 'ant-design-vue';
import { getAllTags } from '/@/api/sys/tag';
import eventBus from '/@/utils/eventBus';
import { useAdminStoreOut } from '/@/store/modules/admin';
import { watch } from 'vue';
import { useModal } from '/@/components/Modal';

export default defineComponent({
    name: 'Search',
    components: { library, ResCarModal },
    props: {
        tag: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: '',
        }
    },
    setup(props, { emit }) {
        const statusValue = ref('');
        const keyWord = ref('');
        const currentInstance = getCurrentInstance();
        const parentSetup = currentInstance.parent.setupState;
        const resNum = ref(0)
        const adminStore = useAdminStoreOut();
        // watch(() => adminStore.sqkList, (now, old) => {
        //     console.log("sqkList:", old, now)
        // });


        //申请库旁边的数字
        onMounted(() => getResData())
        eventBus.on('addResToCarEventBus', () => getResData())
        const getResData = () => {
            getResInCar({
                userId: session.getItem('userId'),
            }).then((r) => {
                if (r.datas && r.datas.filter) {
                    resNum.value = r.datas.filter(i => i.applyCarInfo.workflowType == props.type && i?.resInfo?.SERVICEID).length;
                }
            })
        }

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

        function onSearch(key) {
            eventBus.emit('platListCenter', { sqkzt: statusValue.value, filterValue: keyWord.value, type: props.type, isPage: true });
        }

        const [registerModal, { openModal }] = useModal();
        const visible = ref(true);
        const showModal = () => {
            // visible.value = true;
            openModal(true, {
              isUpdate: false,
              isCheck:false,
            });
        };

        //标签加载
        const indeterminate = ref(true);
        const checkAll = ref(true);
        const value4 = ref([]);
        const optionsTag = ref([]);
        onMounted(() => getAllTags());
        function getAllTags() {
            tag().then((r) => r.map(i => props.tag.includes(i.code) && optionsTag.value.push({ label: i.name, value: i.code }) && value4.value.push(i.code)))
        }
        eventBus.on("tagChangeTag", () => value4.value = []);
        function tagChange(e, type) {
            console.log("222:", e, type);
            indeterminate.value = !!e.length && e.length < optionsTag.value.length;
            checkAll.value = e.length === optionsTag.value.length;
            eventBus.emit('platListCenter', {
                sqkzt: statusValue.value,
                filterValue: keyWord.value,
                type: props.type,
                isPage: true,
                keywords: e.length && type == undefined ? e.toString() : !e.length && type == undefined ? 'keywords' : type ? '' : 'keywords',
            });
        }

        const onCheckAllChange = (e) => {
            value4.value = e.target.checked ? optionsTag.value.map(i => i.value) : [];
            indeterminate.value = !indeterminate.value;
            tagChange(value4.value, e.target.checked);
        };

        return {
            registerModal,
            onCheckAllChange,
            indeterminate,
            checkAll,
            props,
            tagChange,
            value4,
            optionsTag,
            resNum,
            visible,
            showModal,
            options,
            statusValue,
            keyWord,
            onSearch,
            getResData
        };
    },
});
</script>
<style scoped lang="less">
.tagbox {
    width: calc(100% - 650px);
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
}

.wrapper>div {
    float: right;
    height: 32px;
    padding: 5px 0;
}

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

.wrapper {
    width: 100%;
    height: 54px;
    border-radius: 4px;
    background: #f8f8f8;
    padding: 11px;
    margin-bottom: 20px;
}

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