春风项目四线(合箱线、总装线)
查看 | 历史 | 提交 | 提交对比
wujian
2024-01-18 b395c6c17048f4862dd07e54fdb2122905402794
提交 | 用户 | 时间
fd2207 1 <template>
懒 2   <div class="app-container">
3     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
4       <el-form-item label="部门名称" prop="deptName">
5         <el-input
6           v-model="queryParams.deptName"
7           placeholder="请输入部门名称"
8           clearable
9           @keyup.enter.native="handleQuery"
10         />
11       </el-form-item>
12       <el-form-item label="状态" prop="status">
13         <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
14           <el-option
15             v-for="dict in dict.type.sys_normal_disable"
16             :key="dict.value"
17             :label="dict.label"
18             :value="dict.value"
19           />
20         </el-select>
21       </el-form-item>
22       <el-form-item>
23         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
24         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
25       </el-form-item>
26     </el-form>
27
28     <el-row :gutter="10" class="mb8">
29       <el-col :span="1.5">
30         <el-button
31           type="primary"
32           plain
33           icon="el-icon-plus"
34           size="mini"
35           @click="handleAdd"
36           v-hasPermi="['system:dept:add']"
37         >新增</el-button>
38       </el-col>
39       <el-col :span="1.5">
40         <el-button
41           type="info"
42           plain
43           icon="el-icon-sort"
44           size="mini"
45           @click="toggleExpandAll"
46         >展开/折叠</el-button>
47       </el-col>
48       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
49     </el-row>
50
51     <el-table
52       v-if="refreshTable"
53       v-loading="loading"
54       :data="deptList"
55       row-key="deptId"
56       :default-expand-all="isExpandAll"
57       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
58     >
59       <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
60       <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
61       <el-table-column prop="status" label="状态" width="100">
62         <template slot-scope="scope">
63           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
64         </template>
65       </el-table-column>
66       <el-table-column label="创建时间" align="center" prop="createTime" width="200">
67         <template slot-scope="scope">
68           <span>{{ parseTime(scope.row.createTime) }}</span>
69         </template>
70       </el-table-column>
71       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
72         <template slot-scope="scope">
73           <el-button
74             size="mini"
75             type="text"
76             icon="el-icon-edit"
77             @click="handleUpdate(scope.row)"
78             v-hasPermi="['system:dept:edit']"
79           >修改</el-button>
80           <el-button
81             size="mini"
82             type="text"
83             icon="el-icon-plus"
84             @click="handleAdd(scope.row)"
85             v-hasPermi="['system:dept:add']"
86           >新增</el-button>
87           <el-button
88             v-if="scope.row.parentId != 0"
89             size="mini"
90             type="text"
91             icon="el-icon-delete"
92             @click="handleDelete(scope.row)"
93             v-hasPermi="['system:dept:remove']"
94           >删除</el-button>
95         </template>
96       </el-table-column>
97     </el-table>
98
99     <!-- 添加或修改部门对话框 -->
100     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
101       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
102         <el-row>
103           <el-col :span="24" v-if="form.parentId !== 0">
104             <el-form-item label="上级部门" prop="parentId">
105               <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
106             </el-form-item>
107           </el-col>
108         </el-row>
109         <el-row>
110           <el-col :span="12">
111             <el-form-item label="部门名称" prop="deptName">
112               <el-input v-model="form.deptName" placeholder="请输入部门名称" />
113             </el-form-item>
114           </el-col>
115           <el-col :span="12">
116             <el-form-item label="显示排序" prop="orderNum">
117               <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
118             </el-form-item>
119           </el-col>
120         </el-row>
121         <el-row>
122           <el-col :span="12">
123             <el-form-item label="负责人" prop="leader">
124               <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
125             </el-form-item>
126           </el-col>
127           <el-col :span="12">
128             <el-form-item label="联系电话" prop="phone">
129               <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
130             </el-form-item>
131           </el-col>
132         </el-row>
133         <el-row>
134           <el-col :span="12">
135             <el-form-item label="邮箱" prop="email">
136               <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
137             </el-form-item>
138           </el-col>
139           <el-col :span="12">
140             <el-form-item label="部门状态">
141               <el-radio-group v-model="form.status">
142                 <el-radio
143                   v-for="dict in dict.type.sys_normal_disable"
144                   :key="dict.value"
145                   :label="dict.value"
146                 >{{dict.label}}</el-radio>
147               </el-radio-group>
148             </el-form-item>
149           </el-col>
150         </el-row>
151       </el-form>
152       <div slot="footer" class="dialog-footer">
153         <el-button type="primary" @click="submitForm">确 定</el-button>
154         <el-button @click="cancel">取 消</el-button>
155       </div>
156     </el-dialog>
157   </div>
158 </template>
159
160 <script>
161 import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
162 import Treeselect from "@riophae/vue-treeselect";
163 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
164
165 export default {
166   name: "Dept",
167   dicts: ['sys_normal_disable'],
168   components: { Treeselect },
169   data() {
170     return {
171       // 遮罩层
172       loading: true,
173       // 显示搜索条件
174       showSearch: true,
175       // 表格树数据
176       deptList: [],
177       // 部门树选项
178       deptOptions: [],
179       // 弹出层标题
180       title: "",
181       // 是否显示弹出层
182       open: false,
183       // 是否展开，默认全部展开
184       isExpandAll: true,
185       // 重新渲染表格状态
186       refreshTable: true,
187       // 查询参数
188       queryParams: {
189         deptName: undefined,
190         status: undefined
191       },
192       // 表单参数
193       form: {},
194       // 表单校验
195       rules: {
196         parentId: [
197           { required: true, message: "上级部门不能为空", trigger: "blur" }
198         ],
199         deptName: [
200           { required: true, message: "部门名称不能为空", trigger: "blur" }
201         ],
202         orderNum: [
203           { required: true, message: "显示排序不能为空", trigger: "blur" }
204         ],
205         email: [
206           {
207             type: "email",
208             message: "请输入正确的邮箱地址",
209             trigger: ["blur", "change"]
210           }
211         ],
212         phone: [
213           {
214             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
215             message: "请输入正确的手机号码",
216             trigger: "blur"
217           }
218         ]
219       }
220     };
221   },
222   created() {
223     this.getList();
224   },
225   methods: {
226     /** 查询部门列表 */
227     getList() {
228       this.loading = true;
229       listDept(this.queryParams).then(response => {
230         this.deptList = this.handleTree(response.data, "deptId");
231         this.loading = false;
232       });
233     },
234     /** 转换部门数据结构 */
235     normalizer(node) {
236       if (node.children && !node.children.length) {
237         delete node.children;
238       }
239       return {
240         id: node.deptId,
241         label: node.deptName,
242         children: node.children
243       };
244     },
245     // 取消按钮
246     cancel() {
247       this.open = false;
248       this.reset();
249     },
250     // 表单重置
251     reset() {
252       this.form = {
253         deptId: undefined,
254         parentId: undefined,
255         deptName: undefined,
256         orderNum: undefined,
257         leader: undefined,
258         phone: undefined,
259         email: undefined,
260         status: "0"
261       };
262       this.resetForm("form");
263     },
264     /** 搜索按钮操作 */
265     handleQuery() {
266       this.getList();
267     },
268     /** 重置按钮操作 */
269     resetQuery() {
270       this.resetForm("queryForm");
271       this.handleQuery();
272     },
273     /** 新增按钮操作 */
274     handleAdd(row) {
275       this.reset();
276       if (row != undefined) {
277         this.form.parentId = row.deptId;
278       }
279       this.open = true;
280       this.title = "添加部门";
281       listDept().then(response => {
282         this.deptOptions = this.handleTree(response.data, "deptId");
283       });
284     },
285     /** 展开/折叠操作 */
286     toggleExpandAll() {
287       this.refreshTable = false;
288       this.isExpandAll = !this.isExpandAll;
289       this.$nextTick(() => {
290         this.refreshTable = true;
291       });
292     },
293     /** 修改按钮操作 */
294     handleUpdate(row) {
295       this.reset();
296       getDept(row.deptId).then(response => {
297         this.form = response.data;
298         this.open = true;
299         this.title = "修改部门";
300         listDeptExcludeChild(row.deptId).then(response => {
301           this.deptOptions = this.handleTree(response.data, "deptId");
302           if (this.deptOptions.length == 0) {
303             const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
304             this.deptOptions.push(noResultsOptions);
305           }
306         });
307       });
308     },
309     /** 提交按钮 */
310     submitForm: function() {
311       this.$refs["form"].validate(valid => {
312         if (valid) {
313           if (this.form.deptId != undefined) {
314             updateDept(this.form).then(response => {
315               this.$modal.msgSuccess("修改成功");
316               this.open = false;
317               this.getList();
318             });
319           } else {
320             addDept(this.form).then(response => {
321               this.$modal.msgSuccess("新增成功");
322               this.open = false;
323               this.getList();
324             });
325           }
326         }
327       });
328     },
329     /** 删除按钮操作 */
330     handleDelete(row) {
331       this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
332         return delDept(row.deptId);
333       }).then(() => {
334         this.getList();
335         this.$modal.msgSuccess("删除成功");
336       }).catch(() => {});
337     }
338   }
339 };
340 </script>