选煤厂生产管理平台前端代码
提交 | 用户 | 时间
5cc1d9 1 <template>
D 2   <!-- 搜索 -->
3   <ContentWrap>
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11       <el-form-item label="开始时间">
12         <el-date-picker
13           size="mini"
14           v-model="queryParams.startTime"
15           format="YYYY-MM-DD HH:mm:00"
16           value-format="YYYY-MM-DD HH:mm:00"
17           type="datetime"
18           :clearable="false"
19           placeholder="选择日期时间"/>
20       </el-form-item>
21       <el-form-item label="结束时间">
22         <el-date-picker
23           size="mini"
24           v-model="queryParams.endTime"
25           format="YYYY-MM-DD HH:mm:00"
26           value-format="YYYY-MM-DD HH:mm:00"
27           type="datetime"
28           :clearable="false"
29           placeholder="选择日期时间"/>
30       </el-form-item>
31       <el-form-item>
32         <el-button @click="handleQuery">
33           <Icon icon="ep:search" class="mr-5px" />
34           搜索
35         </el-button>
36         <el-button @click="resetQuery">
37           <Icon icon="ep:refresh" class="mr-5px" />
38           重置
39         </el-button>
40         <el-button
41           type="primary"
42           plain
43           @click="openForm('create')"
44           v-hasPermi="['data:point:create']"
45         >
46           <Icon icon="ep:plus" class="mr-5px" />
47           新增
48         </el-button>
49         <el-button
50           type="warning"
51           plain
52           @click="handleImport"
53           v-hasPermi="['data:point:import']"
54         >
55           <Icon icon="ep:upload" /> 导入
56         </el-button>
57         <el-button
58           type="success"
59           plain
60           @click="handleExport"
61           :loading="exportLoading"
62           v-hasPermi="['data:point:export']"
63         >
64           <Icon icon="ep:download" />导出
65         </el-button>
66       </el-form-item>
67     </el-form>
68   </ContentWrap>
69
70   <!-- 列表 -->
71   <ContentWrap>
72     <el-table border stripe v-loading="loading" :data="list">
73       <el-table-column type="index" header-align="center" align="center" min-width="50" label="序号"/>
74       <el-table-column prop="lsh" header-align="center" align="center" label="流水号" min-width="277"/>
75       <el-table-column prop="rq" header-align="center" align="center" label="日期" min-width="200"/>
76       <el-table-column prop="bcName" header-align="center" align="center" label="班次" min-width="200"/>
77       <el-table-column prop="clmzName" header-align="center" align="center" label="生产品种" min-width="250"/>
78       <el-table-column prop="nbdrl" header-align="center" align="center" label="生产量" min-width="250"/>
79       <el-table-column show-overflow-tooltip prop="bz" header-align="center" align="center" label="备注" min-width="400"/>
80     </el-table>
81     <!-- 分页 -->
82     <Pagination
83       :total="total"
84       v-model:page="queryParams.pageNo"
85       v-model:limit="queryParams.pageSize"
86       @pagination="getList"
87     />
88   </ContentWrap>
89   <!--电耗明细-->
90   <Form ref="formRef"/>
91 </template>
92 <script lang="ts" setup>
93   import * as ProdVolume from '@/api/prod/prodVolume'
94   import {ref} from "vue";
95   import download from "@/utils/download";
96
97   import det from './form.vue'
98
99   defineOptions({name: 'ProdVolume'})
100
101   const message = useMessage() // 消息弹窗
102   const {t} = useI18n() // 国际化
103
104   const loading = ref(true) // 列表的加载中
105   const total = ref(0) // 列表的总页数
106   const list = ref([]) // 列表的数据
107   const queryParams = reactive({
108     pageNo: 1,
109     pageSize: 10,
110     startDate: undefined,
111     endDate: undefined,
112     xt: undefined
113   })
114   const queryFormRef = ref() // 搜索的表单
115
116   /** 查询列表 */
117   const getList = async () => {
118     loading.value = true
119     try {
120       const page = await ProdVolume.getProdVolumePage(queryParams)
121       list.value = page.list
122       total.value = page.total
123     } finally {
124       loading.value = false
125     }
126   }
127
128   /** 搜索按钮操作 */
129   const handleQuery = () => {
130     queryParams.pageNo = 1
131     getList()
132   }
133
134   /** 查看数据操作 */
135   const chartView  = ref()
136   const chartHandle = (raw: object) => {
137     chartView.value.open(raw)
138   }
139
140   /** 重置按钮操作 */
141   const resetQuery = () => {
142     queryFormRef.value.resetFields()
143     handleQuery()
144   }
145
146   /** 添加/修改操作 */
147   const formRef = ref()
148   const openForm = (type: string, id?: number) => {
149     formRef.value.open(type, id)
150   }
151
152   /** 删除按钮操作 */
153   const handleDelete = async (id: number) => {
154     try {
155       // 删除的二次确认
156       await message.delConfirm()
157       // 发起删除
158       await ProdVolume.deleteProdVolume(id)
159       message.success(t('common.delSuccess'))
160       // 刷新列表
161       await getList()
162     } catch {
163     }
164   }
165   /** 测点导入 */
166   const importFormRef = ref()
167   const handleImport = () => {
168     importFormRef.value.open()
169   }
170
171   /** 导出按钮操作 */
172   const exportLoading = ref(false)
173   const handleExport = async () => {
174     try {
175       // 导出的二次确认
176       await message.exportConfirm()
177       // 发起导出
178       exportLoading.value = true
179       const data = await ProdVolume.exportProdVolume(queryParams)
180       download.excel(data, '测点列表.xlsx')
181     } catch {
182     } finally {
183       exportLoading.value = false
184     }
185   }
186   /** 初始化 **/
187   onMounted(async () => {
188     await getList()
189   })
190 </script>