MTP2.0_WEB/src/common/components/friends/index.vue

<template>
    <!--选择朋友-->
    <Drawer
        :title="'选择朋友'"
        :placement="'right'"
        :visible="visible"
        @cancel="cancel"
        :class="[position === 'top' ? 'top486' : 'delistingBottom']"
    >
        <a-spin :spinning="loading">
            <div class="listed">
                <a-form class="inlineForm dialogForm">
                    <a-input-search
                        placeholder="搜索朋友编码或名称"
                        class="searchFriendInput noSuffixInput"
                        enter-button
                        v-model:value="searchValue"
                    >
                        <template #prefix>
                            <SearchOutlined />
                        </template>
                    </a-input-search>
                    <div class="formBar ant-checkbox-group commonCheckboxGroup whitebgCheckbox">
                        <!-- <a-checkbox-group class="commonCheckboxGroup"> -->
                        <div class="ant-checkbox-wrapper" style="width: 100%">
                            <div
                                class="item"
                                v-for="(item, index) in getViewFriends()"
                                :key="index + '11'"
                            >
                                <a-checkbox v-model:checked="item.checked">
                                    <span class="txt">{{ item.frienduserid }} {{ item.friendname }}</span>
                                </a-checkbox>
                            </div>
                        </div>
                        <!-- </a-checkbox-group> -->
                    </div>
                    <a-row :gutter="24">
                        <a-col :span="24" class="fixedBtns">
                            <a-form-item class="btnCenter">
                                <a-button class="listedBtn" @click="submit">确定</a-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-spin>
    </Drawer>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { Des } from '@/common/components/commonDes';
import { _closeModal } from '@/common/setup/modal/modal';
import Drawer from '@/common/components/drawer/index.vue';
import { PlusOutlined, MinusOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { QueryWrFriendApplyRsp } from '@/services/go/wrtrade/interface';
import { TempWrOrderQuoteDetail } from '@/views/market/market-spot/components/post_buying/interface';
import { queryQueryWrFriend } from '@/services/go/wrtrade';
import { message } from 'ant-design-vue';

interface FriendList extends QueryWrFriendApplyRsp {
    checked: boolean;
}

export default defineComponent({
    emits: ['cancel', 'update'],
    name: 'warehouse_receipt_trade_blocs_delisting',
    components: { Des, Drawer, PlusOutlined, MinusOutlined, SearchOutlined },
    props: {
        position: {
            type: String,
            default: 'top',
        },
        friends: {
            type: Array as PropType<number[]>,
            default: [],
        },
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const loading = ref<boolean>(false);
        const searchValue = ref<string>('');
        const myFriends = ref<FriendList[]>([]);
        // 查询好友列表
        function queryMyFriend(value?: string) {
            loading.value = true;
            queryQueryWrFriend(value)
                .then((res) => {
                    if (res) {
                        myFriends.value = [];
                        res.forEach((el) => {
                            const checked = props.friends.includes(el.frienduserid) ? true : false;
                            myFriends.value.push({ ...el, checked });
                        });
                    }
                })
                .catch((err: string) => message.error(err))
                .finally(() => {
                    loading.value = false;
                });
        }
        queryMyFriend();
        function getViewFriends() {
            if (searchValue.value) {
                return myFriends.value.filter((el) => String(el.frienduserid).includes(searchValue.value));
            } else {
                return myFriends.value;
            }
        }
        function submit() {
            const result: number[] = [];
            myFriends.value.forEach((el) => {
                if (el.checked) {
                    result.push(el.frienduserid);
                }
            });
            if (result.length) {
                context.emit('update', result);
            } else {
                message.warn('请选择朋友');
            }
        }

        return {
            loading,
            myFriends,
            cancel,
            visible,
            submit,
            searchValue,
            getViewFriends,
        };
    },
});
</script>

<style lang="less" scoped>
.listed {
    padding: 18px 20px 0;
    .formBar {
        height: calc(100% - 120px);
        padding: 0 20px 0 13px;
        margin-top: 16px;
        background: @m-grey63;
        border: 1px solid @m-black45;
        .item {
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid @m-black45;
            font-size: 16px;
            color: @m-white6;
        }
    }
}
.ant-checkbox-group.commonCheckboxGroup {
    .ant-checkbox-wrapper {
        span.txt {
            color: @m-white11;
        }
    }
}
</style>