wxjy-hg/wxjy-wxjy-web/src/views/statReport/CustomMStatF.vue

<template>
  <cacp-search-layout>
    <template #search>
      <cacp-search-panel-layout
        :model="state.queryData"
        ref="queryFormRef"
        label-position="left"
        label-width="auto"
        :gutter="30"
        :colSpan="6"
      >
        <el-form-item label="月度">
          <el-date-picker
            type="month"
            value-format="YYYY-MM"
            v-model="state.queryData.beginDate"
            placeholder="开始时间"
          />
        </el-form-item>
        <template #buttonGroup>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
        </template>
      </cacp-search-panel-layout>
    </template>

    <cacp-complex-table
      :actions="actions"
      :data="tableData"
      :actionsWidth="120"
      @selection-change="handleSelectionChange"
      @on-page-change="onPageChange"
      @on-size-change="onSizeChange"
      :loading="loading"
    >
      <el-table-column label="序号" property="index" width="60" align="center" >
        <template #default="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column property="customCode" label="所属海关" width="120" :show-overflow-tooltip="true" >
        <template #default="scope">
          <dict-tag :options="dict.customs_info"  :dictValue="scope.row.customCode" />
        </template>
      </el-table-column>
      <el-table-column property="impDeclCount" label="进口单数" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="impManDeclCount" label="进口查验单数" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="impManualAuditDeclCount" label="进口接单单数" width="120" :show-overflow-tooltip="true" />
<!--      <el-table-column property="impDeclCountLm" label="上个月进口单数" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impDeclCountLyDec" label="去年12月进口单数" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impDeclCountCuryear" label="今年截止当月总进口单数" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impDeclCountYbl" label="前年总进口单数" width="120" :show-overflow-tooltip="true" />-->
      <el-table-column property="impTotalCost" label="进口平均整体通关时间(小时)" width="120" :show-overflow-tooltip="true" />
<!--      <el-table-column property="impTotalCostLm" label="进口平均整体通关时间-上月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impTotalCostLyDec" label="进口平均整体通关时间-去年12月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impTotalCostCy" label="进口平均整体通关时间-1至当月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impTotalCostYbl" label="进口平均整体通关时间-前年" width="120" :show-overflow-tooltip="true" />-->
      <el-table-column property="impCuCost" label="进口平均海关通关时间(小时)" width="120" :show-overflow-tooltip="true" />
<!--      <el-table-column property="impCuCostLm" label="进口平均海关通关时间" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impCuCostLyDec" label="进口平均海关通关时间-去年12月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impCuCostCy" label="进口平均海关通关时间-1至当月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="impCuCostYbl" label="进口平均海关通关时间-前年" width="120" :show-overflow-tooltip="true" />-->
      <el-table-column property="expDeclCount" label="出口单数" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="expManDeclCount" label="出口查验单数" width="120" :show-overflow-tooltip="true" />
      <el-table-column property="expManualAuditDeclCount" label="出口接单单数" width="120" :show-overflow-tooltip="true" />
<!--      <el-table-column property="expDeclCountLm" label="上个月出口单数" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expDeclCountLyDec" label="去年12月进口单数" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expDeclCountCuryear" label="今年截止当月总出口单数" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expDeclCountYbl" label="前年总出口单数" width="120" :show-overflow-tooltip="true" />-->
      <el-table-column property="expTotalCost" label="出口平均整体通关时间(小时)" width="120" :show-overflow-tooltip="true" />
<!--      <el-table-column property="expTotalCostLm" label="出口平均整体通关时间" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expTotalCostLyDec" label="出口平均整体通关时间-去年12月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expTotalCostCy" label="出口平均整体通关时间-1至当月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expTotalCostYbl" label="出口平均整体通关时间-前年" width="120" :show-overflow-tooltip="true" />-->
      <el-table-column property="expCuCost" label="出口平均海关通关时间(小时)" width="120" :show-overflow-tooltip="true" />
<!--      <el-table-column property="expCuCostLm" label="出口平均海关通关时间" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expCuCostLyDec" label="出口平均海关通关时间-去年12月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expCuCostCy" label="出口平均海关通关时间-1至当月" width="120" :show-overflow-tooltip="true" />-->
<!--      <el-table-column property="expCuCostYbl" label="出口平均海关通关时间-前年" width="120" :show-overflow-tooltip="true" />-->
    </cacp-complex-table>
  </cacp-search-layout>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
// import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import config from '@/config'
import {
  SuccessResultCode,
  useComplexTable,
  type SearchPanelLayoutInstance,
  type TableAction,
  useLoading
} from '@cacp/ui'
import type { CustomMStatF, CustomMStatFQuery } from '@/types/statReport/CustomMStatF'
import { dataExport, getList } from '@/apis/statReport/CustomMStatF'
import { permissionStatus } from '@/utils/globalPermission'
import DictTag from '@/components/DictTag/dictTag.vue'
import { useDictType } from '@/components/useDict'
import dayjs from 'dayjs'
const { dict } = useDictType('customs_info')

// 表单引用
const queryFormRef = ref<SearchPanelLayoutInstance>()
// const dialogFormRef = ref<FormInstance>()

// 加载状态
const { loading, setLoading } = useLoading()

// 表格 Hook
const tableHooks = useComplexTable<CustomMStatF>(config)
const { tableData, tablePagination, setPagination, setPageIndex, setPageSizes } = tableHooks

// 响应式数据
interface State {
  queryData: CustomMStatFQuery
  formData: CustomMStatF
  viewForm: CustomMStatF
  viewTitle: string
  viewDialogVisible: boolean
  title: string
  isEdit: boolean
  dialogVisible: boolean
}

const state = reactive<State>({
  queryData: {
    MONTH: '',
    customCode: '',
    impDeclCount: '',
    impManDeclCount: '',
    impManualAuditDeclCount: '',
    impDeclCountLm: '',
    impDeclCountLyDec: '',
    impDeclCountCuryear: '',
    impDeclCountYbl: '',
    impTotalCost: '',
    impTotalCostLm: '',
    impTotalCostLyDec: '',
    impTotalCostCy: '',
    impTotalCostYbl: '',
    impCuCost: '',
    impCuCostLm: '',
    impCuCostLyDec: '',
    impCuCostCy: '',
    impCuCostYbl: '',
    expDeclCount: '',
    expManDeclCount: '',
    expManualAuditDeclCount: '',
    expDeclCountLm: '',
    expDeclCountLyDec: '',
    expDeclCountCuryear: '',
    expDeclCountYbl: '',
    expTotalCost: '',
    expTotalCostLm: '',
    expTotalCostLyDec: '',
    expTotalCostCy: '',
    expTotalCostYbl: '',
    expCuCost: '',
    expCuCostLm: '',
    expCuCostLyDec: '',
    expCuCostCy: '',
    expCuCostYbl: '',
    beginDate: dayjs().startOf('month').format('YYYY-MM'),
    pageIndex: tablePagination.currentPage,
    pageSize: tablePagination.pageSize
  },
  formData: {
    ID: '',
    MONTH: '',
    customCode: '',
    impDeclCount: '',
    impManDeclCount: '',
    impManualAuditDeclCount: '',
    impDeclCountLm: '',
    impDeclCountLyDec: '',
    impDeclCountCuryear: '',
    impDeclCountYbl: '',
    impTotalCost: '',
    impTotalCostLm: '',
    impTotalCostLyDec: '',
    impTotalCostCy: '',
    impTotalCostYbl: '',
    impCuCost: '',
    impCuCostLm: '',
    impCuCostLyDec: '',
    impCuCostCy: '',
    impCuCostYbl: '',
    expDeclCount: '',
    expManDeclCount: '',
    expManualAuditDeclCount: '',
    expDeclCountLm: '',
    expDeclCountLyDec: '',
    expDeclCountCuryear: '',
    expDeclCountYbl: '',
    expTotalCost: '',
    expTotalCostLm: '',
    expTotalCostLyDec: '',
    expTotalCostCy: '',
    expTotalCostYbl: '',
    expCuCost: '',
    expCuCostLm: '',
    expCuCostLyDec: '',
    expCuCostCy: '',
    expCuCostYbl: '',
  } as CustomMStatF,
  viewForm: {} as CustomMStatF,
  viewTitle: '',
  viewDialogVisible: false,
  title: '',
  isEdit: false,
  dialogVisible: false,
})

// 表格操作按钮配置
const actions = <Array<TableAction>>[
  {
    key: 'export',
    text: '导出',
    onclick: onExpot,
    limit: permissionStatus('none', 'CUSTOMS_STAT_F_EXPORT_BT'),
    type: 'primary'
  },
  // {
  //   key: 'refresh',
  //   type: 'primary',
  //   text: '刷新',
  //   onclick: onRefresh,
  //   limit: 'none',
  //   position: 'right',
  //   plain: true
  // }
]

// 选中项的 ID 数组
const ids = ref<string[]>([])

// 多选框选中数据
function handleSelectionChange(selection: CustomMStatF[]) {
  ids.value = selection
    .map(item => item.ID)
    .filter((id): id is string => id != null && id !== undefined)
}

// 搜索方法
const onSearch = () => {
  setPageIndex(1)
  onLoadData()
}

// 重置方法
const onReset = () => {
  queryFormRef.value?.resetFields()
  onPageChange(1)
}

// 每页显示条数变化
const onSizeChange = (size: number) => {
  setPageSizes(size)
  onLoadData()
}

// 翻页查询
const onPageChange = (currentPage: number) => {
  setPageIndex(currentPage)
  onLoadData()
}

/*// 重置表单
function resetForm() {
  state.formData = {
    ID: '',
    MONTH: '',
    customCode: '',
    impDeclCount: '',
    impManDeclCount: '',
    impManualAuditDeclCount: '',
    impDeclCountLm: '',
    impDeclCountLyDec: '',
    impDeclCountCuryear: '',
    impDeclCountYbl: '',
    impTotalCost: '',
    impTotalCostLm: '',
    impTotalCostLyDec: '',
    impTotalCostCy: '',
    impTotalCostYbl: '',
    impCuCost: '',
    impCuCostLm: '',
    impCuCostLyDec: '',
    impCuCostCy: '',
    impCuCostYbl: '',
    expDeclCount: '',
    expManDeclCount: '',
    expManualAuditDeclCount: '',
    expDeclCountLm: '',
    expDeclCountLyDec: '',
    expDeclCountCuryear: '',
    expDeclCountYbl: '',
    expTotalCost: '',
    expTotalCostLm: '',
    expTotalCostLyDec: '',
    expTotalCostCy: '',
    expTotalCostYbl: '',
    expCuCost: '',
    expCuCostLm: '',
    expCuCostLyDec: '',
    expCuCostCy: '',
    expCuCostYbl: '',
  } as CustomMStatF
  dialogFormRef.value?.resetFields()
}*/

// 刷新方法
function onRefresh() {
  onReset()
}

// 导出
async function onExpot() {
  try {
    await ElMessageBox.confirm('确定要导出申报地海关报表吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    const query = {
      ...state.queryData,
      pageIndex: tablePagination.currentPage,
      pageSize: tablePagination.pageSize
    }
    await dataExport(query);
  } catch{
    // 用户取消删除
  }
}

// 数据查询
async function onLoadData() {
  setLoading(true)
  try {
    const query = {
      ...state.queryData,
      pageIndex: tablePagination.currentPage,
      pageSize: tablePagination.pageSize
    }
    const res = await getList(query)
    if (res.code === SuccessResultCode) {
      setPagination(res.data)
    } else {
      ElMessage.error(res.message || '查询失败')
    }
  } catch (error) {
    console.error('查询失败:', error)
    ElMessage.error('查询失败')
  } finally {
    setLoading(false)
  }
}


// 组件挂载时加载数据
onMounted(() => {
  onLoadData()
})
</script>

<style scoped>
/* 自定义样式 */
</style>