admin
2024-06-15 8cfe20288690f2ba46c804f41f39e8aa48c2dea0
提交 | 用户 | 时间
e57a89 1 <template>
2   <div class="app-container">
3     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4       <el-form-item label="字典名称" prop="dictName">
5         <el-input
6           v-model="queryParams.dictName"
7           placeholder="请输入字典名称"
8           clearable
9           style="width: 240px"
10           @keyup.enter.native="handleQuery"
11         />
12       </el-form-item>
13       <el-form-item label="字典类型" prop="dictType">
14         <el-input
15           v-model="queryParams.dictType"
16           placeholder="请输入字典类型"
17           clearable
18           style="width: 240px"
19           @keyup.enter.native="handleQuery"
20         />
21       </el-form-item>
22       <el-form-item label="状态" prop="status">
23         <el-select
24           v-model="queryParams.status"
25           placeholder="字典状态"
26           clearable
27           style="width: 240px"
28         >
29           <el-option
30             v-for="dict in dict.type.sys_normal_disable"
31             :key="dict.value"
32             :label="dict.label"
33             :value="dict.value"
34           />
35         </el-select>
36       </el-form-item>
37       <el-form-item label="创建时间">
38         <el-date-picker
39           v-model="dateRange"
40           style="width: 240px"
41           value-format="yyyy-MM-dd"
42           type="daterange"
43           range-separator="-"
44           start-placeholder="开始日期"
45           end-placeholder="结束日期"
46         ></el-date-picker>
47       </el-form-item>
48       <el-form-item>
49         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
50         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
51       </el-form-item>
52     </el-form>
53
54     <el-row :gutter="10" class="mb8">
55       <el-col :span="1.5">
56         <el-button
57           type="primary"
58           plain
59           icon="el-icon-plus"
60           size="mini"
61           @click="handleAdd"
62           v-hasPermi="['system:dict:add']"
63         >新增</el-button>
64       </el-col>
65       <el-col :span="1.5">
66         <el-button
67           type="success"
68           plain
69           icon="el-icon-edit"
70           size="mini"
71           :disabled="single"
72           @click="handleUpdate"
73           v-hasPermi="['system:dict:edit']"
74         >修改</el-button>
75       </el-col>
76       <el-col :span="1.5">
77         <el-button
78           type="danger"
79           plain
80           icon="el-icon-delete"
81           size="mini"
82           :disabled="multiple"
83           @click="handleDelete"
84           v-hasPermi="['system:dict:remove']"
85         >删除</el-button>
86       </el-col>
87       <el-col :span="1.5">
88         <el-button
89           type="warning"
90           plain
91           icon="el-icon-download"
92           size="mini"
93           @click="handleExport"
94           v-hasPermi="['system:dict:export']"
95         >导出</el-button>
96       </el-col>
97       <el-col :span="1.5">
98         <el-button
99           type="danger"
100           plain
101           icon="el-icon-refresh"
102           size="mini"
103           @click="handleRefreshCache"
104           v-hasPermi="['system:dict:remove']"
105         >刷新缓存</el-button>
106       </el-col>
107       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
108     </el-row>
109
110     <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
111       <el-table-column type="selection" width="55" align="center" />
112       <el-table-column label="字典编号" align="center" prop="dictId" />
113       <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
114       <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
115         <template slot-scope="scope">
116           <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
117             <span>{{ scope.row.dictType }}</span>
118           </router-link>
119         </template>
120       </el-table-column>
121       <el-table-column label="状态" align="center" prop="status">
122         <template slot-scope="scope">
123           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
124         </template>
125       </el-table-column>
126       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
127       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
128         <template slot-scope="scope">
129           <span>{{ parseTime(scope.row.createTime) }}</span>
130         </template>
131       </el-table-column>
132       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
133         <template slot-scope="scope">
134           <el-button
135             size="mini"
136             type="text"
137             icon="el-icon-edit"
138             @click="handleUpdate(scope.row)"
139             v-hasPermi="['system:dict:edit']"
140           >修改</el-button>
141           <el-button
142             size="mini"
143             type="text"
144             icon="el-icon-delete"
145             @click="handleDelete(scope.row)"
146             v-hasPermi="['system:dict:remove']"
147           >删除</el-button>
148         </template>
149       </el-table-column>
150     </el-table>
151
152     <pagination
153       v-show="total>0"
154       :total="total"
155       :page.sync="queryParams.pageNum"
156       :limit.sync="queryParams.pageSize"
157       @pagination="getList"
158     />
159
160     <!-- 添加或修改参数配置对话框 -->
161     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
162       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
163         <el-form-item label="字典名称" prop="dictName">
164           <el-input v-model="form.dictName" placeholder="请输入字典名称" />
165         </el-form-item>
166         <el-form-item label="字典类型" prop="dictType">
167           <el-input v-model="form.dictType" placeholder="请输入字典类型" />
168         </el-form-item>
169         <el-form-item label="状态" prop="status">
170           <el-radio-group v-model="form.status">
171             <el-radio
172               v-for="dict in dict.type.sys_normal_disable"
173               :key="dict.value"
174               :label="dict.value"
175             >{{dict.label}}</el-radio>
176           </el-radio-group>
177         </el-form-item>
178         <el-form-item label="备注" prop="remark">
179           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
180         </el-form-item>
181       </el-form>
182       <div slot="footer" class="dialog-footer">
183         <el-button type="primary" @click="submitForm">确 定</el-button>
184         <el-button @click="cancel">取 消</el-button>
185       </div>
186     </el-dialog>
187   </div>
188 </template>
189
190 <script>
191 import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
192
193 export default {
194   name: "Dict",
195   dicts: ['sys_normal_disable'],
196   data() {
197     return {
198       // 遮罩层
199       loading: true,
200       // 选中数组
201       ids: [],
202       // 非单个禁用
203       single: true,
204       // 非多个禁用
205       multiple: true,
206       // 显示搜索条件
207       showSearch: true,
208       // 总条数
209       total: 0,
210       // 字典表格数据
211       typeList: [],
212       // 弹出层标题
213       title: "",
214       // 是否显示弹出层
215       open: false,
216       // 日期范围
217       dateRange: [],
218       // 查询参数
219       queryParams: {
220         pageNum: 1,
221         pageSize: 10,
222         dictName: undefined,
223         dictType: undefined,
224         status: undefined
225       },
226       // 表单参数
227       form: {},
228       // 表单校验
229       rules: {
230         dictName: [
231           { required: true, message: "字典名称不能为空", trigger: "blur" }
232         ],
233         dictType: [
234           { required: true, message: "字典类型不能为空", trigger: "blur" }
235         ]
236       }
237     };
238   },
239   created() {
240     this.getList();
241   },
242   methods: {
243     /** 查询字典类型列表 */
244     getList() {
245       this.loading = true;
246       listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
247           this.typeList = response.rows;
248           this.total = response.total;
249           this.loading = false;
250         }
251       );
252     },
253     // 取消按钮
254     cancel() {
255       this.open = false;
256       this.reset();
257     },
258     // 表单重置
259     reset() {
260       this.form = {
261         dictId: undefined,
262         dictName: undefined,
263         dictType: undefined,
264         status: "0",
265         remark: undefined
266       };
267       this.resetForm("form");
268     },
269     /** 搜索按钮操作 */
270     handleQuery() {
271       this.queryParams.pageNum = 1;
272       this.getList();
273     },
274     /** 重置按钮操作 */
275     resetQuery() {
276       this.dateRange = [];
277       this.resetForm("queryForm");
278       this.handleQuery();
279     },
280     /** 新增按钮操作 */
281     handleAdd() {
282       this.reset();
283       this.open = true;
284       this.title = "添加字典类型";
285     },
286     // 多选框选中数据
287     handleSelectionChange(selection) {
288       this.ids = selection.map(item => item.dictId)
289       this.single = selection.length!=1
290       this.multiple = !selection.length
291     },
292     /** 修改按钮操作 */
293     handleUpdate(row) {
294       this.reset();
295       const dictId = row.dictId || this.ids
296       getType(dictId).then(response => {
297         this.form = response.data;
298         this.open = true;
299         this.title = "修改字典类型";
300       });
301     },
302     /** 提交按钮 */
303     submitForm: function() {
304       this.$refs["form"].validate(valid => {
305         if (valid) {
306           if (this.form.dictId != undefined) {
307             updateType(this.form).then(response => {
308               this.$modal.msgSuccess("修改成功");
309               this.open = false;
310               this.getList();
311             });
312           } else {
313             addType(this.form).then(response => {
314               this.$modal.msgSuccess("新增成功");
315               this.open = false;
316               this.getList();
317             });
318           }
319         }
320       });
321     },
322     /** 删除按钮操作 */
323     handleDelete(row) {
324       const dictIds = row.dictId || this.ids;
325       this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?').then(function() {
326         return delType(dictIds);
327       }).then(() => {
328         this.getList();
329         this.$modal.msgSuccess("删除成功");
330       }).catch(() => {});
331     },
332     /** 导出按钮操作 */
333     handleExport() {
334       this.download('system/dict/type/export', {
335         ...this.queryParams
336       }, `type_${new Date().getTime()}.xlsx`)
337     },
338     /** 刷新缓存按钮操作 */
339     handleRefreshCache() {
340       refreshCache().then(() => {
341         this.$modal.msgSuccess("刷新成功");
342         this.$store.dispatch('dict/cleanDict');
343       });
344     }
345   }
346 };
347 </script>