houzhongjian
2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c
提交 | 用户 | 时间
850106 1 <template>
H 2   <el-card shadow="never" class="aui-card--fill">
3     <div class="mod-clock">
4       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
5         <el-form-item>
6           <el-input v-model="dataForm.itemCode" placeholder="项目代码" clearable></el-input>
7         </el-form-item>
8         <el-form-item>
9           <el-input v-model="dataForm.itemName" placeholder="项目名称" clearable></el-input>
10         </el-form-item>
11         <el-form-item>
12           <el-button @click="searchDataList()">查询</el-button>
13           <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
14           <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
15         </el-form-item>
16       </el-form>
17       <el-table
18           :data="dataList"
19           border
20           v-loading="dataListLoading"
21           @selection-change="selectionChangeHandle"
22           style="width: 100%;">
23         <el-table-column
24             type="selection"
25             header-align="center"
26             align="center"
27             width="50">
28         </el-table-column>
29         <el-table-column
30             type="index"
31             header-align="center"
32             align="center"
33             width="50">
34         </el-table-column>
35         <el-table-column
36             prop="itemCode"
37             header-align="center"
38             align="left"
39             min-width="200"
40             label="项目代码">
41         </el-table-column>
42         <el-table-column
43             prop="itemName"
44             header-align="center"
45             align="left"
46             min-width="200"
47             label="项目名称">
48         </el-table-column>
49         <el-table-column
50             prop="itemTypeName"
51             header-align="center"
52             align="center"
53             label="统计类别">
54         </el-table-column>
55         <el-table-column
56             prop="unit"
57             header-align="center"
58             align="center"
59             width="80"
60             label="单位">
61         </el-table-column>
62         <el-table-column
63             prop="pointCode"
64             header-align="center"
65             align="center"
66             min-width="200"
67             label="点编码">
68         </el-table-column>
69         <el-table-column
70             prop="pointName"
71             header-align="center"
72             align="left"
73             min-width="200"
74             label="点名称">
75         </el-table-column>
76         <el-table-column
77             prop="description"
78             header-align="center"
79             align="center"
80             min-width="200"
81             label="描述">
82         </el-table-column>
83         <el-table-column
84             prop="clockConfig"
85             header-align="center"
86             align="center"
87             label="时钟配置">
88         </el-table-column>
89         <el-table-column
90             prop="defaultValue"
91             header-align="center"
92             align="center"
93             width="80"
94             label="默认值">
95         </el-table-column>
96         <el-table-column
97             prop="bcName"
98             header-align="center"
99             align="center"
100             label="选煤厂班次">
101         </el-table-column>
102         <el-table-column
103             prop="xtName"
104             header-align="center"
105             align="center"
106             label="选煤厂系统">
107         </el-table-column>
108         <el-table-column
109             prop="statusName"
110             header-align="center"
111             align="center"
112             width="100"
113             label="状态">
114         </el-table-column>
115         <el-table-column
116             fixed="right"
117             header-align="center"
118             align="center"
119             width="100"
120             label="操作">
121           <template slot-scope="scope">
122             <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
123             <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
124           </template>
125         </el-table-column>
126       </el-table>
127       <el-pagination
128           @size-change="sizeChangeHandle"
129           @current-change="currentChangeHandle"
130           :current-page="pageIndex"
131           :page-sizes="[10, 20, 50, 100]"
132           :page-size="pageSize"
133           :total="totalPage"
134           layout="total, sizes, prev, pager, next, jumper">
135       </el-pagination>
136       <!-- 弹窗, 新增 / 修改 -->
137       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
138     </div>
139   </el-card>
140 </template>
141 <script>
142   import AddOrUpdate from './item-add-or-update'
143
144   export default {
145     data() {
146       return {
147         dataForm: {
148           clockCode: '',
149           clockName: ''
150         },
151         dataList: [],
152         pageIndex: 1,
153         pageSize: 10,
154         totalPage: 0,
155         dataListLoading: false,
156         dataListSelections: [],
157         addOrUpdateVisible: false
158       }
159     },
160     components: {
161       AddOrUpdate
162     },
163     mounted() {
164       this.getDataList()
165     },
166     methods: {
167       searchDataList() {
168         this.pageIndex = 1
169         this.getDataList()
170       },
171       // 获取数据列表
172       getDataList() {
173         this.dataListLoading = true
174         this.$http({
175           url: '/data/index-data/item/list',
176           method: 'get',
177           params: this.$http.adornParams({
178             'page': this.pageIndex,
179             'limit': this.pageSize,
180             'itemCode': this.dataForm.itemCode,
181             'itemName': this.dataForm.itemName
182           })
183         }).then(({code, page}) => {
184           if (page && code === 0) {
185             this.dataList = page.list
186             this.totalPage = page.totalCount
187           } else {
188             this.dataList = []
189             this.totalPage = 0
190           }
191           this.dataListLoading = false
192         })
193       },
194       // 每页数
195       sizeChangeHandle(val) {
196         this.pageSize = val
197         this.pageIndex = 1
198         this.getDataList()
199       },
200       // 当前页
201       currentChangeHandle(val) {
202         this.pageIndex = val
203         this.getDataList()
204       },
205       // 多选
206       selectionChangeHandle(val) {
207         this.dataListSelections = val
208       },
209       // 新增 / 修改
210       addOrUpdateHandle(id) {
211         this.addOrUpdateVisible = true
212         this.$nextTick(() => {
213           this.$refs.addOrUpdate.init(id)
214         })
215       },
216       // 删除
217       deleteHandle(id) {
218         var ids = id ? [id] : this.dataListSelections.map(item => {
219           return item.id
220         })
221         this.$confirm(`确定对选中项进行删除操作?`, '提示', {
222           confirmButtonText: '确定',
223           cancelButtonText: '取消',
224           type: 'warning'
225         }).then(() => {
226           this.$http['post'](`/data/index-data/item/delete`, ids).then(({data: res}) => {
227             if (res.code !== 0) {
228               return this.$message.error(res.msg)
229             }
230             this.$message({
231               message: this.$t('prompt.success'),
232               type: 'success',
233               duration: 500,
234               onClose: () => {
235                 this.getDataList()
236               }
237             })
238           }).catch(() => {
239           })
240
241           // this.$http({
242           //   url: '/data/index-data/item/delete',
243           //   method: 'post',
244           //   data: this.$http.adornData({
245           //     id: id
246           //   })
247           // }).then(({data}) => {
248           //   if (data && data.code === 0) {
249           //     this.$message({
250           //       message: '操作成功',
251           //       type: 'success',
252           //       duration: 1500,
253           //       onClose: () => {
254           //         this.getDataList()
255           //       }
256           //     })
257           //   } else {
258           //     this.$message.error(data.msg)
259           //   }
260           // })
261         }).catch(() => {
262         })
263       }
264     }
265   }
266 </script>