forestry-wx/src/plant/contact-unit/unit-list/index.vue

<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" safe-area-inset-bottom>
        <template #top>
            <ut-navbar title="往来单位管理" :fixed="false" border :breadcrumb="false"></ut-navbar>
            <view class="d-flex a-c pd-25">
                <view class="min-w-220 flex1">
                    <ut-action-sheet v-model="form.cusType" :tabs="pt_cus_type" mode="custom" @change="onRefresh" title="选择往来单位性质">
                        <view class="d-flex search-select-item a-c">
                            <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no">{{ selectDictLabel(pt_cus_type, form.cusType) || '全部' }}</view>
                            <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
                        </view>
                    </ut-action-sheet>
                </view>
                <view class="h-86 pl-20 w-100%">
                    <ut-search ref="searchRef" v-model="form.keyword" @search="onRefresh" margin="0" :border="false" :placeholder="placeholder" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
                </view>
            </view>
             <ut-tabs v-model="form.cpyType" :tabs="pt_cpy_type" @change="onRefresh"></ut-tabs>
        </template>

        <template>
            <view class="pl-25 pr-25">
                <up-swipe-action>
                    <up-swipe-action-item v-for="item in list" :name="item?.id" :key="item?.id" :disabled="item?.storeCount" :options="optionsAction" @click="clickSwipe" class="mb-20 b-radius">
                        <view @click.stop="clickItem(item)" class="b-radius bg-#fff pd-24 p-rtv base-shadow">
                            <view class="d-flex j-sb a-c li-item-head mb-16">
                                <view class="li-left-tag">{{ selectDictLabel(pt_cus_type, item?.cusType) }}</view>
                                <view class="f-s-22 c-#666">{{ item?.updateTime || item?.createTime }}</view>
                            </view>
                            <view class="f-s-34 c-#333 f-w-500">{{ item?.cusName }}</view>
                            <view class="f-s-24 c-#666">{{ item?.cusCode }}</view>
                            <view class="pd-5"></view>
                            <view class="f-s-28 pd2-5-0">
                                <span class="c-#666">联系电话：</span>
                                <span class="c-#333 f-w-600">{{ item?.contactTel }}</span>
                            </view>

                        </view>
                    </up-swipe-action-item>
                </up-swipe-action>
            </view>
        </template>
        <!-- 空数据处理 -->

        <template #empty>
            <ut-empty class="mg-at" size="28rpx" color="#999" padding="10rpx"> 暂无往来单位信息，点击＋号新增吧</ut-empty>
        </template>
    </z-paging>
    <ut-suspension @click="$u.route({ url: '/plant/contact-unit/unit-edit/index' })">
        <image src="@/static/images/common/btn_add_logo.png" mode="widthFix" class="w-120 h-120"></image>
    </ut-suspension>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_cus_type, pt_cpy_type } = toRefs<any>(proxy?.useDict('pt_cus_type', 'pt_cpy_type'));
const paging = ref();
const list = ref<any[]>([]);
const placeholder = ref('搜往来单位名称、代码');

const form = ref({
    keyword: '',
    cusType: '',
    cpyType: '',
});

const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get<any>('/plt-api/app/customer/list', params);
    if (!res || res.code !== 200) return;
    const { rows } = res;
    paging.value.complete(rows);
};
const onRefresh = () => {
    paging.value.reload();
};
const optionsAction = reactive([
    {
        text: '删除',
        style: {
            backgroundColor: '#f56c6c',
        },
    },
]);
const clickSwipe = async (event: object) => {
    const { name, index } = event as any;
    if (index === 0) {
        // 删除
        const res = await uni.showModal({
            title: '删除提示',
            content: '删除后不可撤回，请谨慎操作！',
            confirmColor: '#f56c6c',
        });
        console.log(res);
        if (res.confirm) {
            const delRes = await useClientRequest.get(`/plt-api/app/customer/remove/${name}`);
            if (delRes && delRes.code === 200) {
                uni.showToast({ title: '删除成功', icon: 'none' });
                onRefresh();
            }
        }
    }
};
const clickItem = (item: any) => {
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/contact-unit/unit-detail/index',
        params: {
            id: item?.id,
        },
    });
};

onMounted(() => {
    uni.$on('refreshContactUnitList', () => {
        onRefresh();
    });
});
</script>
<style lang="scss" scoped>
// @import '@/assets/styles/theme.scss';
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding-left: 16rpx;
    padding-right: 16rpx;
    padding-top: 14rpx;
    padding-bottom: 14rpx;
}
.li-item-head {
    margin-left: -24rpx;
    margin-top: -24rpx;
}
.li-left-tag {
    padding: 4rpx 12rpx;
    background-color: #ebf6ee;
    color: #37a954;
    border-radius: 16rpx 0 16rpx 0;
    font-size: 20rpx;
    font-weight: 500;
}
</style>