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

<template>
    <el-dialog v-model="deteleClueDialogVisible" 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" @click="batchRestore()"
                        v-loading="allLoading.batchRecoveryLoading">批量恢复</el-button>
                    <el-button type="primary" @click="batchDeletes()"
                        v-loading="allLoading.batchDeteleLoading">批量删除</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="clueTableRef" :data="deteleClueTable" border v-loading="allLoading.tableLoading"
                    style="width: 100%;height: 100%;">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="productCode" label="产品编号" width="180"></el-table-column>
                    <el-table-column prop="productName" label="产品名称" width="180"></el-table-column>
                    <el-table-column prop="typeName" label="产品类别" width="180"></el-table-column>
                    <el-table-column prop="unitName" label="单位" width="180"></el-table-column>
                    <el-table-column prop="price" label="标准价格(元)" width="180"></el-table-column>
                    <el-table-column prop="inventory" label="库存" width="180"></el-table-column>
                    <el-table-column prop="status" label="状态" width="180"></el-table-column>
                    <el-table-column prop="inchargerName" label="负责人" width="190">
                        <template #default="scope">
                          <TextTranslation translationTypes="userName" :translationValue="scope.row.inchargerName"></TextTranslation>
                        </template>
                      </el-table-column>
                      <el-table-column prop="creatorName" label="创建人" width="180">
                        <template #default="scope">
                          <TextTranslation translationTypes="userName" :translationValue="scope.row.creatorName"></TextTranslation>
                        </template>
                      </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="large" @click="restoreItemRow([scope.row])">恢复</el-button>
                            <el-button link type="danger" size="large" @click="deteItemRow([scope.row])">删除</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="clueTotalTable"
                    :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 { DETERDETELE, RECYCLELIST, ROLLBACK } from './api';
import { ElTable } from 'element-plus';
import { confirmAction } from '@/utils/tools';

const emits = defineEmits(['showDeteleProduct']);
const globalPopup = inject<GlobalPopup>('globalPopup')
const deteleClueTable = ref([])
const deteleClueDialogVisible = ref(false)
const clueTotalTable = ref(0)
const allLoading = reactive({
    batchRecoveryLoading: false,
    batchDeteleLoading: false,
    tableLoading: false
})

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

const clueTableRef = ref<InstanceType<typeof ElTable>>() // 产品table dom

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

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

function batchRestore() {
    const data = clueTableRef.value && clueTableRef.value.getSelectionRows()
    if (!data.length) {
        globalPopup?.showWarning('请选择需要恢复的数据')
        return
    }
    restoreItemRow(data)
}

function batchDeletes() {
    const data = clueTableRef.value && clueTableRef.value.getSelectionRows()
    if (!data.length) {
        globalPopup?.showWarning('请选择需要删除的数据')
        return
    }
    deteItemRow(data)
}

function deteItemRow(items: any[]) {
    const ids = items.map((item: any) => item.id).join(',')
    const str = items.map((item: any) => item.productName).join(',')
    confirmAction(`确定${items.length > 1 ? '批量删除这些' : '删除'}【${str}】产品吗？`, '', 'warning').then(() => {
        post(DETERDETELE, { ids }).then(res => {
            if (res.code != 'ok') {
                globalPopup?.showError(res.msg)
                return
            }
            globalPopup?.showSuccess('删除成功')
            getTableList()
        })
    })
}

function restoreItemRow(items: any[]) {
    const ids = items.map((item: any) => item.id).join(',')
    const str = items.map((item: any) => item.productName).join(',')
    confirmAction(`确定${items.length > 1 ? '批量恢复这些' : '恢复'}【${str}】产品吗？`, '', 'warning').then(() => {
        post(ROLLBACK, { ids }).then(res => {
            if (res.code != 'ok') {
                globalPopup?.showError(res.msg)
                return
            }
            globalPopup?.showSuccess('恢复成功')
            getTableList()
        })
    })
}

function getTableList() {
    allLoading.tableLoading = true
    post(RECYCLELIST, { ...tableForm }).then((res) => {
        if (res.code == 'ok') {
            const { record, total } = res.data
            deteleClueTable.value = record
            clueTotalTable.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('showDeteleProduct', false)
}

function beForeCancel(done: () => void) {
    emits('showDeteleProduct', false)
    done()
}

onMounted(() => {

})

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