选煤厂生产管理平台前端代码
Jay
2024-12-10 358c8ecd0642c16980cb8c6d340d4b9c49b7ca33
提交 | 用户 | 时间
58a8ee 1 <template>
J 2   <div>
3     <el-card shadow="never" class="aui-card--fill">
4       <div class="mod-wash-curves">
5         <el-form :inline="true" :model="dataForm">
6           <el-form-item>
7             <el-date-picker
8               v-model="queryParams.startTime"
9               type="date"
10               clearable
11               value-format="YYYY-MM-DD"
12               format="YYYY-MM-DD"
13               placeholder="开始时间"/>
14           </el-form-item>
15           <el-form-item>
16             <el-date-picker
17               v-model="queryParams.endTime"
18               type="date"
19               clearable
20               value-format="YYYY-MM-DD"
21               format="YYYY-MM-DD"
22               placeholder="结束时间"/>
23           </el-form-item>
24           <el-form-item>
25             <dict-select-tag style="width: 100%" v-model="queryParams.mz" :clearable="true" placeholder="煤种" dictCode="ymmz" />
26           </el-form-item>
27           <el-form-item>
28             <dict-select-tag style="width: 100%" v-model="queryParams.fcfa" :clearable="true" placeholder="浮沉方案" dictCode="analysis-fcfa" />
29           </el-form-item>
30           <el-form-item>
31             <el-button @click="handleQuery">
32               <Icon icon="ep:search" class="mr-5px" />
33               查询
34             </el-button>
35             <el-button type="primary" plain @click="openForm('create')">
36               <Icon icon="ep:plus" class="mr-5px" />
37               新增
38             </el-button>
39             <el-button type="warning" plain @click="handleImport">
40               <Icon icon="ep:upload" /> 导出
41             </el-button>
42             <el-button @click="weighted()">加权平均</el-button>
43           </el-form-item>
44         </el-form>
45         <el-table
46           ref="table"
47           v-loading="dataListLoading"
48           :data="dataList"
49           border
50           height="400"
51           highlight-current-row
52           @current-change="currentChange"
53           @selection-change="selectionChangeHandle"
54           @sort-change="dataListSortChangeHandle"
55           style="width: 100%;">
56           <el-table-column type="selection" header-align="center" align="center"
57                            width="50"/>
58           <el-table-column prop="code" label="流水号" header-align="center" align="center"
59                            width="120"/>
60           <el-table-column prop="ny" label="年月" header-align="center" align="center"
61                            width="100"/>
62           <el-table-column prop="syrq" label="实验日期" header-align="center" width="120"
63                            align="center"/>
64           <el-table-column prop="mzName" label="煤种" header-align="center"
65                            align="center"/>
66           <el-table-column prop="drl" label="调入量" header-align="center"
67                            align="center"/>
68           <el-table-column prop="fcfaName" label="浮沉方案" header-align="center"
69                            align="center"/>
70           <el-table-column prop="bz" label="备注" header-align="center" align="left"
71                            min-width="200"/>
72           <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
73             <template #default="scope">
74               <el-button v-hasPermi="['data:ind-item:update']" link type="primary" @click="openForm('update', scope.row.id)">
75                 修改
76               </el-button>
77               <el-button v-hasPermi="['data:ind-item:delete']" link type="danger" @click="handleDelete(scope.row.id)">
78                 删除
79               </el-button>
80             </template>
81           </el-table-column>
82         </el-table>
83         <Pagination
84           v-model:limit="queryParams.pageSize"
85           v-model:page="queryParams.pageNo"
86           :total="total"
87           @pagination="getList"
88         />
89       </div>
90     </el-card>
91     <el-card shadow="never" class="aui-card--fill">
92       <div class="mod-analysis-full-det">
93         <WashCurvesDet ref="washCurvesDetRef" @drawWashCurves="drawWashCurves"/>
94       </div>
95     </el-card>
96   </div>
97   <WashCurvesForm ref="washCurvesFormRef" @success="getList" />
98 </template>
99
100 <script lang="ts" setup>
101   import * as WashCurvesApi from '@/api/xmcpms/coal-quality/analysis/wash-curves/index'
102   import WashCurvesDet from './WashCurvesDet.vue'
103   import WashCurvesForm from './WashCurvesForm.vue'
104   import { useRoute, useRouter } from 'vue-router';
105
106   const router = useRouter() // 路由
107   const message = useMessage() // 消息弹窗
108   const { t } = useI18n() // 国际化
109   defineOptions({ name: 'Analysis' })
110   const dataListLoading = ref(true) // 列表的加载中
111   const total = ref(0) // 列表的总页数
112   const dataList = ref([]) // 字典表格数据
113   const queryFormRef = ref() // 搜索的表单
114   const exportLoading = ref(false) // 导出的加载中
115
116   const handleQuery = () => {
117     queryParams.pageNo = 1
118     getList()
119   }
120
121   /** 重置按钮操作 */
122   const resetQuery = () => {
123     queryFormRef.value.resetFields()
124     handleQuery()
125   }
126
127   const getList = async () => {
128     dataListLoading.value = true
129     try {
130       const data = await WashCurvesApi.getWashCurvesPage(queryParams)
131       dataList.value = data.list
132       total.value = data.total
133     } finally {
134       dataListLoading.value = false
135     }
136   }
137
138   const queryParams = reactive({
139     pageNo: 1,
140     pageSize: 10,
141     startTime: '',
142     endTime: '',
143     mz: undefined,
144     fcfa: undefined
145   })
146
147   /** 添加/修改操作 */
148   const washCurvesFormRef = ref()
149   const openForm = (type: string, id?: string) => {
150     washCurvesFormRef.value.open(type, id)
151   }
152
153   const washCurvesDetRef = ref()
154   const currentRow = ref()
155
156   const currentChange = (row) =>  {
157     currentRow.value = row
158     washCurvesDetRef.value.open(row)
159   }
160
161   const route = useRoute();
162
163   function drawWashCurves() {
164     if (!currentRow.value.id) {
165       message.error('请先选择可选性曲线台账!')
166       return
167     }
168     // 动态路由
169     router.push({
170       // name: route.name + '__' + currentRow.value.id,
171       path: '/xmcpms/coal-quality/analysis/WashCurvesDraw',
172       query: {
173         curvesId : currentRow.value.id,
174         fcfa : currentRow.value.fcfa,
175         code : currentRow.value.code,
176         title : route.title + '-' + currentRow.value.code
177       }
178     })
179   }
180
181   let dataListSelections = reactive([])
182   // 多选
183   function selectionChangeHandle (val) {
184     dataListSelections = val
185   }
186
187   /** 删除按钮操作 */
188   const handleDelete = async (id: string) => {
189     let ids = dataListSelections.map(item => {
190       return item.id
191     })
192     ids.push(id)
193     try {
194       // 删除的二次确认
195       await message.delConfirm()
196       // 发起删除
197       await WashCurvesApi.deleteWashCurves(ids)
198       message.success(t('common.delSuccess'))
199       // 刷新列表
200       await getList()
201     } catch {
202     }
203   }
204   /** 初始化 **/
205   onMounted(async () => {
206     await getList()
207   })
208 </script>