houzhongjian
2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c
提交 | 用户 | 时间
850106 1 <template>
H 2   <el-card shadow="never" class="aui-card--fill">
3     <div>
4       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
5         <el-form-item>
6           <el-input v-model="dataForm.jkxtbm" placeholder="监控系统编码" clearable></el-input>
7         </el-form-item>
8         <el-form-item>
9           <el-input v-model="dataForm.jkxtmc" placeholder="监控系统名称" clearable></el-input>
10         </el-form-item>
11         <el-form-item>
12           <el-button @click="searchDataList()">查询</el-button>
13           <el-button v-if="$hasPermission('data:jkxt:add')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
14           <el-button v-if="$hasPermission('data:jkxt:delete')" 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                 align="center"
32                 width="50"
33                 label="序号">
34         </el-table-column>
35         <el-table-column
36                 prop="mkbmName"
37                 header-align="center"
38                 align="center"
39                 label="煤矿">
40         </el-table-column>
41         <el-table-column
42                 prop="scxtbmName"
43                 header-align="center"
44                 align="center"
45                 label="生产系统">
46         </el-table-column>
47         <el-table-column
48                 prop="lsh"
49                 header-align="center"
50                 align="center"
51                 label="监控系统流水码">
52         </el-table-column>
53         <el-table-column
54                 prop="jkxtbm"
55                 header-align="center"
56                 align="center"
57                 label="监控系统编码">
58         </el-table-column>
59         <el-table-column
60                 prop="jkxtmc"
61                 header-align="center"
62                 align="center"
63                 label="监控系统名称">
64         </el-table-column>
65         <el-table-column
66                 v-if="$hasPermission('data:jkxt:edit')"
67                 fixed="right"
68                 header-align="center"
69                 align="center"
70                 width="150"
71                 label="操作">
72           <template slot-scope="scope">
73             <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
74           </template>
75         </el-table-column>
76       </el-table>
77       <el-pagination
78               @size-change="sizeChangeHandle"
79               @current-change="currentChangeHandle"
80               :current-page="pageIndex"
81               :page-sizes="[10, 20, 50, 100]"
82               :page-size="pageSize"
83               :total="totalPage"
84               layout="total, sizes, prev, pager, next, jumper">
85       </el-pagination>
86       <!-- 弹窗, 新增 / 修改 -->
87       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
88     </div>
89   </el-card>
90 </template>
91
92 <script>
93   import AddOrUpdate from './data-jkxt-add-or-update'
94
95   export default {
96     data () {
97       return {
98         dataForm: {
99           jkxtbm: '',
100           jkxtmc: ''
101         },
102         dataList: [],
103         pageIndex: 1,
104         pageSize: 10,
105         totalPage: 0,
106         dataListLoading: false,
107         dataListSelections: [],
108         addOrUpdateVisible: false
109       }
110     },
111     components: {
112       AddOrUpdate
113     },
114     mounted () {
115       this.getDataList()
116     },
117     methods: {
118       searchDataList () {
119         this.pageIndex = 1
120         this.getDataList()
121       },
122       // 获取数据列表
123       getDataList () {
124         this.dataListLoading = true
125         this.$http({
126           url: '/data/data/jkxt/list',
127           method: 'get',
128           params: this.$http.adornParams({
129             'page': this.pageIndex,
130             'limit': this.pageSize,
131             'jkxtbm': this.dataForm.jkxtbm,
132             'jkxtmc': this.dataForm.jkxtmc
133           })
134         }).then(({data}) => {
135           if (data && data.code === 0) {
136             this.dataList = data.page.list
137             this.totalPage = data.page.totalCount
138           } else {
139             this.dataList = []
140             this.totalPage = 0
141           }
142           this.dataListLoading = false
143         })
144       },
145       // 每页数
146       sizeChangeHandle (val) {
147         this.pageSize = val
148         this.pageIndex = 1
149         this.getDataList()
150       },
151       // 当前页
152       currentChangeHandle (val) {
153         this.pageIndex = val
154         this.getDataList()
155       },
156       // 多选
157       selectionChangeHandle (val) {
158         this.dataListSelections = val
159       },
160       // 新增 / 修改
161       addOrUpdateHandle (id) {
162         this.addOrUpdateVisible = true
163         this.$nextTick(() => {
164           this.$refs.addOrUpdate.init(id)
165         })
166       },
167       // 删除
168       deleteHandle (id) {
169         var ids = id ? [id] : this.dataListSelections.map(item => {
170           return item.id
171         })
172         this.$confirm(`确定删除选中的${ids.length}项数据?`, '提示', {
173           confirmButtonText: '确定',
174           cancelButtonText: '取消',
175           type: 'warning'
176         }).then(() => {
177           this.$http['post'](`/data/data/jkxt/delete`, ids).then(({ data: res }) => {
178             if (res.code !== 0) {
179               return this.$message.error(res.msg)
180             }
181             this.$message({
182               message: this.$t('prompt.success'),
183               type: 'success',
184               duration: 500,
185               onClose: () => {
186                 this.getDataList()
187               }
188             })
189           }).catch(() => {})
190         }).catch(() => {})
191       }
192     }
193   }
194 </script>