|
|
@@ -0,0 +1,160 @@
|
|
|
+<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.name, '恢复')">恢复</el-button>
|
|
|
+ <el-button link type="danger" size="large"
|
|
|
+ @click="businessOperationItem(scope.row.id, scope.row.name, '删除')">删除</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 { URL_RECYCLELIST, URL_DETELEITEM, URL_RESTORE, tableColumns } 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.name).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_RESTORE : URL_DETELEITEM
|
|
|
+ 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.message)
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+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(URL_RECYCLELIST, { ...tableForm }).then((res) => {
|
|
|
+ if (res.code == 'ok') {
|
|
|
+ const { data, total } = res.data
|
|
|
+ deteleBusinessTable.value = data.map((item: any) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ expectedTransactionDate: formatDate(new Date(item.expectedTransactionDate))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ 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', 'deteleContactsVisible')
|
|
|
+}
|
|
|
+
|
|
|
+function beForeCancel(done: () => void) {
|
|
|
+ emits('closeVisible', 'deteleContactsVisible')
|
|
|
+ done()
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped></style>
|
Lijy