long
2021-04-08 d8f5a1fcb8632a9fb51cac9d72fb3bacaa41cbc2
提交 | 用户 | age
36b711 1 <template>
L 2   <div class="app-container">
3     <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
4     <el-form v-show="showSearch" ref="searchForm" :inline="true">
5       <el-form-item label="角色名称">
6         <el-input
7           v-model="keyWord"
8           placeholder="请输入角色名称"
9           clearable
10           size="small"
11           style="width: 240px"
12           maxlength="50"
13           @keyup.enter.native="reGetList"
14         />
15       </el-form-item>
16       <el-form-item>
17         <el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
18         <el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
19       </el-form-item>
20     </el-form>
21     <!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
22
23     <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
24     <el-row :gutter="10" class="mb8">
25       <el-col :span="1.5">
26         <el-button
27           type="primary"
28           icon="el-icon-plus"
29           size="mini"
30           @click="showAddDialog"
31         >新增</el-button>
32       </el-col>
33       <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
34     </el-row>
35     <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
36
37     <el-table :data="list" max-height="500px" stripe>
38       <el-table-column type="index" label="序号" align="center" width="60" />
39       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
40       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
41       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
42       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
43       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
44       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
45       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
46       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
47       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
48       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
49       <el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
50         <template slot-scope="scope">
51           <el-switch
52             v-model="scope.row.isUp"
53             :active-value="1"
54             :inactive-value="0"
55             @change="handleUpChange(scope.row)"
56           />
57         </template>
58       </el-table-column>
59       <el-table-column label="创建时间" prop="createTime" align="center" min-width="160" />
60       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
61         <template slot-scope="scope">
62           <el-button
63             size="mini"
64             type="text"
65             icon="el-icon-edit"
66             @click="showEditDialog(scope.row)"
67           >编辑</el-button>
68           <el-button
69             size="mini"
70             type="text warn"
71             icon="el-icon-delete"
72             @click="handleDelete(scope.row)"
73           >删除</el-button>
74         </template>
75       </el-table-column>
76     </el-table>
77
78     <!-- 新增&编辑 -->
4dde14 79     <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'新增医院科室':'编辑医院科室'" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
36b711 80       <el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
L 81         <el-form-item label="名称" prop="name">
82           <el-input v-model="dialogData.name" placeholder="请输入名称" maxlength="50" />
83         </el-form-item>
84         <el-form-item label="是否上架" prop="isUp">
85           <el-switch
86             v-model="dialogData.isUp"
87             :active-value="1"
88             :inactive-value="0"
89           />
90         </el-form-item>
91       </el-form>
92       <div slot="footer" class="dialog-footer">
93         <el-button @click="hideDialog">取消</el-button>
94         <el-button type="primary" @click="submitHandle">确定</el-button>
95       </div>
96     </el-dialog>
97
98     <pagination
99       v-show="total>0"
100       :total="total"
101       :page.sync="pageNum"
102       :limit.sync="pageSize"
103       @pagination="getList"
104     />
105   </div>
106 </template>
107
108 <script>
109
110 export default {
111   name: 'Demo',
112   data() {
113     return {
114       showSearch: true, // 是否显示搜索区
115       keyWord: '',
116
117       list: [],
118
119       // 弹窗数据
120       dialogVisible: false,
121       dialogData: {},
122
123       // 分页 ↓↓↓↓↓↓↓↓↓↓
124       total: 0,
125       pageNum: 1,
126       pageSize: 20,
127       // 分页 ↑↑↑↑↑↑↑↑↑↑
128
129       // 表单校验
130       rules: {
131         name: [
132           { required: true, message: '名称不能为空', trigger: 'change' }
133         ],
134         isUp: [
135           { required: true, message: '是否上架不能为空', trigger: 'change' }
136         ]
137       }
138     }
139   },
140   mounted() {
141     this.init()
142   },
143   methods: {
144     // 初始化
145     init() {
146       this.getList()
147     },
148
149     // 获取列表
150     getList() {
151       var { pageNum, pageSize, keyWord } = this
152       this.postFN({
153         url: 'xxx',
154         params: {
155           pageNum: pageNum,
156           pageSize: pageSize,
157           keyWord: keyWord
158         },
159         mockData: {
160           code: 100,
161           msg: '',
162           data: {
163             list: [{
164               id: 'xxx',
165               index: 1,
166               name: '超级管理员',
167               createTime: '2020-08-09 10:10:10'
168             }],
169             total: 100
170           }
171         }
172       }, (inf) => {
173         for (var i = 0; i < 19; i++) {
174           inf.list.push({
175             id: 'xxx',
176             index: 1,
177             name: '超级管理员',
178             createTime: '2020-08-09 10:10:10'
179           })
180         }
181         this.list = inf.list || []
182         this.total = inf.total
183       })
184     },
185     // 重新获取列表
186     reGetList() {
187       this.pageNum = 1
188       this.getList()
189     },
190     // 重置
191     resetHandle() {
192       this.keyWord = ''
193       this.reGetList()
194     },
195     // 删除
196     handleDelete(item) {
197       // 打开二次确认弹窗
198       this.$confirm('是否确认删除该角色?', '提示', {
199         confirmButtonText: '确定',
200         cancelButtonText: '取消',
201         type: 'warning'
202       }).then(() => {
203         // 确定回调
204         this.postFN({
205           url: 'xxx',
206           params: {
207             id: item.id
208           },
209           mockData: {
210             code: 100,
211             msg: '',
212             data: {}
213           }
214         }, () => {
215           this.getList()
216           this.$messageSuc('删除成功')
217         })
218       }).catch(() => {})
219     },
220     // 修改是否上架 todo
221     handleUpChange(item) {
222       const text = item.isUp === 1 ? '上架' : '下架'
223       this.$confirm('确认要' + text + '该角色吗?', '提示', {
224         confirmButtonText: '确定',
225         cancelButtonText: '取消',
226         type: 'warning'
227       }).then(() => {
228         this.postFN({
229           url: 'xxx',
230           params: {
231             id: item.id
232           },
233           mockData: {
234             code: 100,
235             msg: '',
236             data: {}
237           }
238         }, () => {
239           this.$messageSuc(text + '成功')
4dde14 240         }, (res) => {
L 241           item.isUp = item.isUp === 1 ? 0 : 1
242           this.$messageError(res.msg)
36b711 243         })
L 244       }).catch(() => {
245         item.isUp = item.isUp === 1 ? 0 : 1
246       })
247     },
248
249     // 打开新增弹窗
250     showAddDialog() {
251       var dialogData = {
252         type: 'add',
253         isUp: 1
254       }
255       this.dialogVisible = true
256       this.$nextTick(() => {
257         this.dialogData = dialogData
258         this.$refs['refDialog'].resetFields()
259       })
260     },
261     // 打开编辑弹框
262     showEditDialog(item) {
263       var dialogData = {
264         type: 'edit',
265         ...item
266       }
267       console.log('dialogData', dialogData)
268       this.dialogVisible = true
269       this.$nextTick(() => {
270         this.dialogData = dialogData
271         this.$refs['refDialog'].resetFields()
272       })
273     },
274     // 关闭编辑弹窗
275     hideDialog() {
276       this.dialogData = {}
277       this.dialogVisible = false
278     },
279     // 提交新增&编辑
280     submitHandle() {
281       this.$refs['refDialog'].validate(valid => {
282         if (valid) {
283           this.submitReq()
284         }
285       })
286     },
287     // 提交接口
288     submitReq() {
289       var { dialogData } = this
290       var params = {
291         name: dialogData.name,
292         isUp: dialogData.isUp
293       }
294
295       if (dialogData.password) params.password = dialogData.password
296
297       var isAdd = dialogData.type === 'add'
298       var url = isAdd ? 'admin/hospital/department/add' : 'admin/hospital/department/edit'
299
300       !isAdd && (params.id = dialogData.id)
301
302       this.postFN({
303         url: url,
304         params: params,
305         mockData: {
306           code: 100,
307           msg: '',
308           data: {}
309         }
310       }, () => {
311         this.$messageSuc('保存成功')
312         this.hideDialog()
313         this.reGetList()
314       })
315     }
316   }
317 }
318 </script>
319
320 <style lang="scss" scoped>
321
322 </style>