manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/order/component/deteleTables.vue

<template>
    <el-dialog v-model="deteleBusinessDialogVisible" width="1000" :before-close="beForeCancel" :show-close="false"
        top="10vh">
        <template #header="{ close, titleId, titleClass }">
            <div class="flex justify-between items-center border-b pb-3 dialog-header">
                <h4 :id="titleId">销售订单回收站</h4>
                <div>
                    <el-button type="primary" v-loading="allLoading.batchRecoveryLoading"
                        :disabled="batchTableData.length == 0" @click="batchOperation('恢复')">批量恢复</el-button>
                    <el-button type="primary" v-loading="allLoading.batchDeteleLoading"
                        :disabled="batchTableData.length == 0" @click="batchOperation('删除')">批量删除</el-button>
                    <el-button @click="cancel()">取消</el-button>
                </div>
            </div>
        </template>
        <div class="h-[60vh] flex flex-col">
            <div class="flex-1 w-full overflow-hidden">
                <el-table ref="busiessTableRef" :data="deteleBusinessTable" border v-loading="allLoading.tableLoading"
                    @selection-change="changeBatch" style="width: 100%;height: 100%;">
                    <el-table-column type="selection" width="55" />
                    <el-table-column v-for="(item, index) in tableColumns" :prop="item.prop" :label="item.label"
                        :key="index" :width="item.width">
                        <template #default="scope">
                            <span>{{ scope.row[item.prop] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="large"
                                @click="businessOperationItem(scope.row.id, scope.row.orderName, '恢复')">恢复</el-button>
                            <el-button link type="danger" size="large"
                                @click="businessOperationItem(scope.row.id, scope.row.orderName, '删除')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex justify-end pt-3">
                <el-pagination layout="total, prev, pager, next, sizes" :page-size="tableForm.pageSize"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="businessTotalTable"
                    :hide-on-single-page="true" />
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { post } from '@/utils/request';
import { ref, reactive, onMounted, watchEffect, watch, inject } from 'vue'
import { GETTABLELIST, paymentStatus, tableColumns, URL_BATCHDELETE, URL_RECOVER } from '../api';
import { ElTable } from 'element-plus';
import { confirmAction } from '@/utils/tools';
import { formatDate } from '@/utils/times';

type operationType = '恢复' | '删除'

const emits = defineEmits(['closeVisible']);
const globalPopup = inject<GlobalPopup>('globalPopup')
const deteleBusinessTable = ref([])
const deteleBusinessDialogVisible = ref(false)
const businessTotalTable = ref(0)
const batchTableData = ref([])
const allLoading = reactive({
    batchRecoveryLoading: false,
    batchDeteleLoading: false,
    tableLoading: false
})

const tableForm = reactive({
    pageIndex: 1,
    pageSize: 10
})

const busiessTableRef = ref<InstanceType<typeof ElTable>>() // 线索table dom

const props = defineProps<{
    visibles: boolean
}>()

watch(() => props.visibles, (newVal) => {
    deteleBusinessDialogVisible.value = newVal
    if (newVal) {
        getTableList()
    }
})

function batchOperation(type: operationType) {
    const value = batchTableData.value.map((item: any) => item.id).join(',')
    const label = batchTableData.value.map((item: any) => item.orderName).join(',')
    businessOperationItem(value, label, type, true)
}

function businessOperationItem(value: string | number, label: string, type: operationType, batch: boolean = false) {
    confirmAction(`确定${batch ? '批量' : ''}${type}【${label}】销售订单吗？`).then(() => {
        let url = type == '恢复' ? URL_RECOVER : URL_BATCHDELETE
        // let url = ''
        post(url, { ids: value }).then(res => {
            if (res.code != 'ok') {
                globalPopup?.showError(res.msg)
                return
            }
            globalPopup?.showSuccess(`${type}成功`)
            getTableList()
            changeBatch(false)
        }).catch((err) => {
            globalPopup?.showError(err.msg)
        })
    })
}

function changeBatch(flag: boolean = true) {
    if (flag) {
        batchTableData.value = busiessTableRef.value && busiessTableRef.value.getSelectionRows()
    } else {
        batchTableData.value = []
        busiessTableRef.value && busiessTableRef.value.clearSelection()
    }
}

function getTableList() {
    allLoading.tableLoading = true
    post(GETTABLELIST, { ...tableForm, isDelete: 1 }).then((res) => {
        if (res.code == 'ok') {
            const { record, total } = res.data
            deteleBusinessTable.value = (record || []).map((item: any) => {
                let val = paymentStatus.find((items: any) => items.value == item.status)
                return {
                    ...item,
                    statusValue: val ? val.label : ''
                }
            })
            businessTotalTable.value = total
        }
    }).finally(() => {
        allLoading.tableLoading = false
    })
}

function handleSizeChange(val: number) {
    tableForm.pageIndex = 1
    tableForm.pageSize = val
    getTableList()
}

function handleCurrentChange(val: number) {
    tableForm.pageIndex = val
    getTableList()
}

function cancel() {
    emits('closeVisible', 'deteleOrderVisible')
}

function beForeCancel(done: () => void) {
    emits('closeVisible', 'deteleOrderVisible')
    done()
}

onMounted(() => {

})

</script>
<style lang="scss" scoped></style>