1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
  | <template> 
 |    <div class="app-container"> 
 |      <el-form :model="filters" :inline="true" label-width="80px"> 
 |        <el-form-item label="客户名称"> 
 |          <el-input v-model="filters.customerName" placeholder="请输入客户名称" /> 
 |        </el-form-item> 
 |        <el-form-item> 
 |          <el-button type="primary" @click="getTableData"> 搜索 </el-button> 
 |          <el-button @click="resetFilters"> 重置 </el-button> 
 |          <el-button @click="handleOut"> 导出 </el-button> 
 |        </el-form-item> 
 |      </el-form> 
 |      <div class="table_list"> 
 |        <PIMTable 
 |          rowKey="id" 
 |          :column="columns" 
 |          :tableLoading="loading" 
 |          :tableData="dataList" 
 |          :page="{ 
 |            current: pagination.currentPage, 
 |            size: pagination.pageSize, 
 |            total: pagination.total, 
 |          }" 
 |          @pagination="changePage" 
 |        ></PIMTable> 
 |      </div> 
 |    </div> 
 |  </template> 
 |    
 |  <script setup> 
 |  import { usePaginationApi } from "@/hooks/usePaginationApi"; 
 |  import { getPurchaseList } from "@/api/procurementManagement/projectProfit"; 
 |  import { onMounted, getCurrentInstance } from "vue"; 
 |  import { ElMessageBox } from "element-plus"; 
 |    
 |  const { proxy } = getCurrentInstance(); 
 |    
 |  defineOptions({ 
 |    name: "项目利润", 
 |  }); 
 |    
 |  const { 
 |    loading, 
 |    filters, 
 |    columns, 
 |    dataList, 
 |    pagination, 
 |    getTableData, 
 |    resetFilters, 
 |    onCurrentChange, 
 |  } = usePaginationApi( 
 |    getPurchaseList, 
 |    { 
 |      customerName: undefined, 
 |    }, 
 |    [ 
 |      { 
 |        label: "销售合同号", 
 |        align: "center", 
 |        prop: "customerContractNo", 
 |      }, 
 |      { 
 |        label: "客户名称", 
 |        align: "center", 
 |        prop: "customerName", 
 |      }, 
 |      { 
 |        label: "项目名称", 
 |        align: "center", 
 |        prop: "projectName", 
 |      }, 
 |      { 
 |        label: "合同金额", 
 |        align: "center", 
 |        prop: "contractAmount", 
 |      }, 
 |      { 
 |        label: "采购金额", 
 |        align: "center", 
 |        prop: "purchaseAmount", 
 |      }, 
 |      { 
 |        label: "利润", 
 |        align: "center", 
 |        prop: "balance", 
 |      }, 
 |      { 
 |        label: "利润率", 
 |        align: "center", 
 |        prop: "balanceRatio", 
 |      }, 
 |      { 
 |        label: "增值税", 
 |        align: "center", 
 |        prop: "balanceAmount", 
 |      }, 
 |    ] 
 |  ); 
 |    
 |  const changePage = ({ page }) => { 
 |    pagination.currentPage = page; 
 |    onCurrentChange(page); 
 |  }; 
 |    
 |  // 导出 
 |  const handleOut = () => { 
 |    ElMessageBox.confirm("选中的内容将被导出,是否确认导出?", "导出", { 
 |      confirmButtonText: "确认", 
 |      cancelButtonText: "取消", 
 |      type: "warning", 
 |    }) 
 |      .then(() => { 
 |        proxy.download("/purchase/report/export", {}, "项目利润.xlsx"); 
 |      }) 
 |      .catch(() => { 
 |        proxy.$modal.msg("已取消"); 
 |      }); 
 |  }; 
 |    
 |  onMounted(() => { 
 |    getTableData(); 
 |  }); 
 |  </script> 
 |  <style lang="scss" scoped> 
 |  .table_list { 
 |    margin-top: unset; 
 |  } 
 |  </style> 
 |  
  |