houzhongjian
2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c
提交 | 用户 | 时间
850106 1 <template>
H 2   <el-card shadow="never" class="aui-card--fill">
3     <div class="mod-znfx-opcua">
4       <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
5         <el-form-item>
6           <el-input v-model="dataForm.itemNo" :placeholder="$t('indItem.itemNo')" clearable></el-input>
7         </el-form-item>
8         <el-form-item>
9           <el-input v-model="dataForm.itemName" :placeholder="$t('indItem.itemName')" clearable></el-input>
10         </el-form-item>
11         <el-form-item>
12           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
13         </el-form-item>
14         <el-form-item>
15           <el-button v-if="$hasPermission('ind:item:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add')}}
16           </el-button>
17         </el-form-item>
18         <el-form-item>
19           <el-button v-if="$hasPermission('ind:item:update')" type="success" @click="enableHandle()">启用</el-button>
20         </el-form-item>
21         <el-form-item>
22           <el-button v-if="$hasPermission('ind:item:update')" type="danger" @click="disableHandle()">禁用</el-button>
23         </el-form-item>
24       </el-form>
25       <el-table
26           v-loading="dataListLoading"
27           :data="dataList"
28           border
29           @selection-change="dataListSelectionChangeHandle"
30           @sort-change="dataListSortChangeHandle"
31           style="width: 100%;">
32         <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
33         <el-table-column prop="itemNo" :label="$t('indItem.itemNo')" header-align="center"
34                          min-width="120"></el-table-column>
35         <el-table-column prop="itemName" :label="$t('indItem.itemName')" header-align="center"
36                          min-width="200"></el-table-column>
37         <el-table-column prop="itemType" :label="$t('indItem.itemType')" header-align="center" align="center"
38                          min-width="100">
39         </el-table-column>
40         <el-table-column prop="coefficient" :label="$t('indItem.coefficient')" header-align="center" align="center"
41                          min-width="100">
42         </el-table-column>
43         <el-table-column prop="precision" :label="$t('indItem.precision')" header-align="center" align="center"
44                          min-width="100"></el-table-column>
45         <el-table-column prop="businessType" :label="$t('indItem.businessType')" header-align="center" align="center"
46                          min-width="100"></el-table-column>
47         <el-table-column prop="timeRange" :label="$t('indItem.timeRange')" header-align="center"
48                          align="left"
49                          min-width="200">
50         </el-table-column>
51         <el-table-column prop="timeGranularity" :label="$t('indItem.timeGranularity')" header-align="center" align="center"
52                          min-width="100"></el-table-column>
53         <el-table-column prop="remark" :label="$t('indItem.remark')" align="center"
54                          header-align="center" min-width="160"></el-table-column>
55         <el-table-column prop="isEnable" :label="$t('user.status')" header-align="center" align="center">
56           <template slot-scope="scope">
57             <el-tag v-if="scope.row.isEnable === 0" size="small" type="danger">禁用</el-tag>
58             <el-tag v-else size="small" type="success">启用</el-tag>
59           </template>
60         </el-table-column>
61         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
62           <template slot-scope="scope">
63             <el-button v-if="$hasPermission('ind:item:update')" type="text" size="small"
64                        @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}
65             </el-button>
66             <el-button v-if="$hasPermission('ind:item:delete')" type="text" size="small"
67                        @click="deleteHandle(scope.row.id)">{{ $t('delete') }}
68             </el-button>
69           </template>
70         </el-table-column>
71       </el-table>
72       <el-pagination
73           :current-page="page"
74           :page-sizes="[10, 20, 50, 100]"
75           :page-size="limit"
76           :total="total"
77           layout="total, sizes, prev, pager, next, jumper"
78           @size-change="pageSizeChangeHandle"
79           @current-change="pageCurrentChangeHandle">
80       </el-pagination>
81       <!-- 弹窗, 新增 / 修改 -->
82       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
83     </div>
84   </el-card>
85 </template>
86 <script>
87   import mixinViewModule from '@/mixins/view-module'
88   import AddOrUpdate from './item-add-or-update'
89
90   export default {
91     mixins: [mixinViewModule],
92     data() {
93       return {
94         mixinViewModuleOptions: {
95           getDataListURL: '/iailab-ntt-data/ind/item/page',
96           getDataListIsPage: true,
97           deleteURL: '/iailab-ntt-data/ind/item',
98           deleteIsBatch: true
99         },
100         dataForm: {
101           itemNo: '',
102           itemName: ''
103         },
104         chartViewVisible: false,
105         setValueVisible: false,
106       }
107     },
108     components: {
109       AddOrUpdate
110     },
111     methods: {
112       chartHandle(row) {
113         this.chartViewVisible = true
114         this.$nextTick(() => {
115           this.$refs.chartView.init(row)
116         })
117       },
118
119       setValueHandle(row) {
120         this.setValueVisible = true
121         this.$nextTick(() => {
122           this.$refs.setValue.init(row)
123         })
124       },
125
126       // 启用
127       enableHandle(id) {
128         if (!id && this.dataListSelections.length <= 0) {
129           return this.$message({
130             message: this.$t('prompt.checkBatch'),
131             type: 'warning',
132             duration: 500
133           })
134         }
135         this.$confirm(this.$t('prompt.info', {'handle': '启用'}), this.$t('prompt.title'), {
136           confirmButtonText: this.$t('confirm'),
137           cancelButtonText: this.$t('cancel'),
138           type: 'warning'
139         }).then(() => {
140           this.$http.put('/iailab-ntt-data/ind/item/enable', id ? [id] : this.dataListSelections.map(item => item.id)).then(({data: res}) => {
141             if (res.code !== 0) {
142               return this.$message.error(res.msg)
143             }
144             this.$message({
145               message: this.$t('prompt.success'),
146               type: 'success',
147               duration: 500,
148               onClose: () => {
149                 this.getDataList()
150               }
151             })
152           }).catch(() => {
153           })
154         }).catch(() => {
155         })
156       },
157
158       // 禁用
159       disableHandle(id) {
160         if (!id && this.dataListSelections.length <= 0) {
161           return this.$message({
162             message: this.$t('prompt.checkBatch'),
163             type: 'warning',
164             duration: 500
165           })
166         }
167         this.$confirm(this.$t('prompt.info', {'handle': '禁用'}), this.$t('prompt.title'), {
168           confirmButtonText: this.$t('confirm'),
169           cancelButtonText: this.$t('cancel'),
170           type: 'warning'
171         }).then(() => {
172           this.$http.put('/iailab-ntt-data/ind/item/disable', id ? [id] : this.dataListSelections.map(item => item.id)).then(({data: res}) => {
173             if (res.code !== 0) {
174               return this.$message.error(res.msg)
175             }
176             this.$message({
177               message: this.$t('prompt.success'),
178               type: 'success',
179               duration: 500,
180               onClose: () => {
181                 this.getDataList()
182               }
183             })
184           }).catch(() => {
185           })
186         }).catch(() => {
187         })
188       },
189     }
190   }
191 </script>