1 <template>
2 <div class="app-container">
3 <el-row style="margin-top: 20px">
4 <el-col :span="24" style="border-left: 5px solid #1d6ced;margin-bottom: 10px">
5 <label style="margin-left: 10px">追加审批</label>
6 </el-col>
7 <el-table :data="tableData" style="width: 100%" border>
8 <el-table-column prop="bizSceneId" label="场景">
9 <template slot-scope="scope">
10 <el-select v-model="scope.row.bizSceneId" placeholder="请选择">
11 <el-option
12 v-for="dict in approvalScenes"
13 :key="dict.dictValue"
14 :value="dict.dictValue"
15 :label="dict.dictLabel"
16 ></el-option>
17 </el-select>
18 </template>
19 </el-table-column>
20
21 <el-table-column prop="price" label="超越价格的审批" align="center">
22 <template slot-scope="scope" v-if="scope.row.bizSceneId == '2'">
23 <el-input v-model="scope.row.price" style="width:100px"></el-input>元
24 </template>
25 </el-table-column>
26
27 <el-table-column prop="empId" label="追加审批人">
28 <template slot-scope="scope">
29 <el-select
30 v-model="scope.row.empId"
31 placeholder="请选择负责人"
32 filterable
33 style="width: 100%"
34 >
35 <el-option
36 v-for="item in leaderOptions"
37 :key="item.id"
38 :label="item.name"
39 :value="item.id"
40 >
41 <span style="float: left">{{ item.name }}</span>
42 <span style="float: right; color: #8492a6; font-size: 13px">{{ item.certNo }}</span>
43 </el-option>
44 </el-select>
45 </template>
46 </el-table-column>
47
48 <el-table-column prop="addtoLevel" label="追加审批级别">
49 <template slot-scope="scope">
50 <el-radio-group v-model="scope.row.addtoLevel" align="left">
51 <el-radio label="1">原审批流程第一级之前</el-radio>
52 <el-radio label="2">原审批流程最后一级之前</el-radio>
53 <el-radio label="3">原审批流程最后一级之后</el-radio>
54 </el-radio-group>
55 </template>
56 </el-table-column>
57
58 <el-table-column prop="applyScope" label="适用范围">
59 <template slot-scope="scope">
60 <el-radio-group v-model="scope.row.applyScope" align="left">
61 <el-radio
62 label="1"
63 @click.native="clickRadio($event, 1,scope.row.depts,scope.row)"
64 >全公司</el-radio>
65 <el-radio
66 label="2"
67 @click.native="clickRadio($event, 2,scope.row.depts,scope.row)"
68 >指定分公司及所属部门</el-radio>
69 </el-radio-group>
70 </template>
71 </el-table-column>
72 <el-table-column label="操作" align="center">
73 <template slot-scope="scope">
74 <el-button
75 @click="addLine"
76 type="primary"
77 v-if="scope.$index == tableData.length - 1"
78 >添加</el-button>
79
80 <el-button
81 type="danger"
82 v-if="tableData.length > 1"
83 @click="handleDelete(scope.$index, scope.row)"
84 class="del-btn"
85 >删除</el-button>
86 </template>
87 </el-table-column>
88 </el-table>
89 </el-row>
90 <el-row style="margin-top: 20px">
91 <el-col :span="6" :offset="12">
92 <el-button type="primary" @click="saveData">保 存</el-button>
93 </el-col>
94 </el-row>
95 <!-- 添加或修改员工基本信息对话框 -->
96 <el-dialog title="指定分公司及所属部门" :visible.sync="deptOpen" width="500px">
97 <div>
98 <el-row>
99 <el-col :span="24">
100 <treeselect
101 v-model="rowSelect"
102 :options="empDeptOptions"
103 :normalizer="normalizer"
104 placeholder="选择部门"
105 :multiple="true"
106 />
107 </el-col>
108 </el-row>
109 </div>
110
111 <div slot="footer" class="dialog-footer">
112 <el-button type="primary" @click="saveTree">确 定</el-button>
113 <el-button @click="deptOpen=false">取 消</el-button>
114 </div>
115 </el-dialog>
116 </div>
117 </template>
118 <style lang="scss" scoped="scoped">
119 .treeSelect {
120 /deep/ .el-form-item__content {
121 margin-top: 1px;
122 height: 32px;
123 line-height: 30px;
124 }
125 }
126 </style>
127 <script>
128 import {
129 listApproveRuleAddto,
130 addApproveRuleAddto
131 } from "@/api/crm/approveRuleAddto";
132 import { listEmp } from "@/api/crm/dept";
133 import {
134 listEmployee,
135 getEmployee,
136 delEmployee,
137 addEmployee,
138 updateEmployee,
139 exportEmployee,
140 listDept,
141 editStatus,
142 editUseStatus,
143 delCert,
144 getStation
145 } from "@/api/crm/employee";
146 import { getLevelJiangLi, getLevelEmp } from "@/api/crm/emplevel";
147 import Treeselect from "@riophae/vue-treeselect";
148 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
149
150 export default {
151 name: "ApproveRule",
152 components: { Treeselect },
153 data() {
154 return {
155 // 是否显示弹出层
156 open: false,
157 // 遮罩层
158 loading: true,
159 // 选中数组
160 ids: [],
161 // 非单个禁用
162 single: true,
163 // 非多个禁用
164 multiple: true,
165 // 总条数
166 total: 0,
167 // 产品设置-审批规则表格数据
168 approveRuleList: [],
169 // 产品设置-审批规则表格数据
170 approveEnableds: [],
171 // 弹出层标题
172 title: "",
173 // 是否显示弹出层
174 deptOpen: false,
175 // 查询参数
176 queryParams: {
177 pageNum: 1,
178 pageSize: 10,
179 comId: undefined,
180 bizSceneId: undefined,
181 bizSceneId: undefined,
182 isForce: undefined
183 },
184 // 表单参数
185 form: {
186 listData: []
187 },
188 // 表单参数
189 formAdd: {},
190 // 表单校验
191 rules: {},
192 tableData: [
193 {
194 bizSceneId: "",
195 price: "",
196 empId: "",
197 addtoLevel: "",
198 applyScope: ""
199 }
200 ],
201 approvalScenes: [],
202 leaderOptions: [],
203 //部门
204 empDeptOptions: [],
205 rowSelect: [],
206 rowData: {}
207 };
208 },
209 created() {
210 this.getList();
211 //获取审批开关字典
212 this.getDicts("approve_flow_enabled").then(response => {
213 this.approveEnableds = response.data;
214 });
215 // 获取审批场景字典;
216 this.getDicts("approval_scene").then(response => {
217 this.approvalScenes = response.data;
218 });
219 //获取员工列表
220 this.getEmployeeSelect();
221 listDept().then(response => {
222 this.empDeptOptions = this.handleTree(response.data, "deptId");
223 });
224 },
225 methods: {
226 /*查询员工列表*/
227 getEmployeeSelect() {
228 listEmp(1).then(response => {
229 this.leaderOptions = response.data;
230 });
231 },
232 //审批开关码表转化
233 setApprovalSceneFormatter(row, column) {
234 return this.selectDictLabel(this.approvalScenes, row.type);
235 },
236 /** 查询产品设置-审批规则列表 */
237 getList() {
238 this.loading = true;
239 listApproveRuleAddto(this.queryParams).then(response => {
240 debugger;
241 var a = this.leaderOptions;
242 this.tableData = response.rows;
243 for (let i = 0; i < this.tableData.length; i++) {
244 this.tableData[i].addtoLevel = this.tableData[
245 i
246 ].addtoLevel.toString();
247 this.tableData[i].applyScope = this.tableData[
248 i
249 ].applyScope.toString();
250 this.tableData[i].empId = Number(this.tableData[i].empId);
251 }
252 this.total = response.total;
253 this.loading = false;
254 });
255 },
256 // 取消按钮
257 cancel() {
258 this.open = false;
259 this.reset();
260 },
261 // 表单重置
262 reset() {
263 this.form = {
264 id: undefined,
265 comId: undefined,
266 bizSceneId: undefined,
267 bizSceneId: undefined,
268 isForce: undefined,
269 crmApproveRules: [],
270 crmApproveRuleAlert: [],
271 createTime: undefined,
272 updateTime: undefined,
273 createBy: undefined,
274 updateBy: undefined
275 };
276 this.approveRuleAddtoList = this.approveRuleAddtoList;
277 this.resetForm("form");
278 },
279 /** 搜索按钮操作 */
280 handleQuery() {
281 this.queryParams.pageNum = 1;
282 this.getList();
283 },
284 /** 重置按钮操作 */
285 resetQuery() {
286 this.resetForm("queryForm");
287 this.handleQuery();
288 },
289 // 多选框选中数据
290 handleSelectionChange(selection) {
291 this.ids = selection.map(item => item.id);
292 this.single = selection.length != 1;
293 this.multiple = !selection.length;
294 },
295 /** 新增按钮操作 */
296 handleAdd() {
297 this.reset();
298 this.open = true;
299 this.title = "添加产品设置-审批规则";
300 },
301 /** 修改按钮操作 */
302 handleUpdate(row) {
303 this.reset();
304 const id = row.id || this.ids;
305 getApproveRule(id).then(response => {
306 this.form = response.data;
307 this.open = true;
308 this.title = "修改产品设置-审批规则";
309 });
310 },
311 /** 提交按钮 */
312 submitForm: function() {
313 this.$refs["form"].validate(valid => {
314 if (valid) {
315 console.log(this.form);
316 this.form.crmApproveRules = this.crmApproveRules;
317 this.form.crmApproveRuleAlert = this.crmApproveRuleAlert;
318 if (this.form.id != undefined) {
319 addApproveRuleInfo(this.form).then(response => {
320 if (response.code === 200) {
321 this.msgSuccess("修改成功");
322 this.open = false;
323 this.getList();
324 } else {
325 this.msgError(response.msg);
326 }
327 });
328 } else {
329 addApproveRuleInfo(this.form).then(response => {
330 if (response.code === 200) {
331 this.msgSuccess("新增成功");
332 this.open = false;
333 this.getList();
334 } else {
335 this.msgError(response.msg);
336 }
337 });
338 }
339 }
340 });
341 },
342 /** 提交按钮 */
343 submitFormAdd: function() {
344 this.$refs["approveRuleAddtoList"].validate(valid => {
345 if (valid) {
346 if (this.approveRuleAddtoList.id != undefined) {
347 addApproveRuleInfo(this.approveRuleAddtoList).then(response => {
348 if (response.code === 200) {
349 this.msgSuccess("修改成功");
350 // this.getList();
351 } else {
352 this.msgError(response.msg);
353 }
354 });
355 } else {
356 addApproveRuleInfo(this.approveRuleAddtoList).then(response => {
357 if (response.code === 200) {
358 this.msgSuccess("新增成功");
359 // this.getList();
360 } else {
361 this.msgError(response.msg);
362 }
363 });
364 }
365 }
366 });
367 },
368 /** 删除按钮操作 */
369 handleDelete(row) {
370 const ids = row.id || this.ids;
371 this.$confirm(
372 '是否确认删除产品设置-审批规则编号为"' + ids + '"的数据项?',
373 "警告",
374 {
375 confirmButtonText: "确定",
376 cancelButtonText: "取消",
377 type: "warning"
378 }
379 )
380 .then(function() {
381 return delApproveRule(ids);
382 })
383 .then(() => {
384 this.getList();
385 this.msgSuccess("删除成功");
386 })
387 .catch(function() {});
388 },
389 /** 导出按钮操作 */
390 handleExport() {
391 const queryParams = this.queryParams;
392 this.$confirm("是否确认导出所有产品设置-审批规则数据项?", "警告", {
393 confirmButtonText: "确定",
394 cancelButtonText: "取消",
395 type: "warning"
396 })
397 .then(function() {
398 return exportApproveRule(queryParams);
399 })
400 .then(response => {
401 this.download(response.msg);
402 })
403 .catch(function() {});
404 },
405 /** 追加一行 */
406 addJurisdiction(row, index) {
407 this.approveRuleAddtoList.push(this.formAdd);
408 },
409 /** 删除一行 */
410 delJurisdiction(row, index) {
411 this.approveRuleAddtoList.splice(index, 1);
412 },
413 addLine() {
414 //添加行数
415 var newValue = {
416 bizSceneId: "1",
417 price: "",
418 empId: "",
419 addtoLevel: "1",
420 applyScope: "1"
421 };
422 //添加新的行数
423 this.tableData.push(newValue);
424 },
425 handleDelete(index) {
426 //删除行数
427 this.tableData.splice(index, 1);
428 },
429 // 保存数据
430 saveData() {
431 this.form.listData = this.tableData;
432 addApproveRuleAddto(this.form).then(response => {
433 if (response.code === 200) {
434 this.msgSuccess("新增成功");
435 this.open = false;
436 this.getList();
437 } else {
438 this.msgError(response.msg);
439 }
440 });
441 },
442 /** 转换部门数据结构 */
443 normalizer(node) {
444 if (node.children && !node.children.length) {
445 delete node.children;
446 }
447 return {
448 id: node.deptId,
449 label: node.deptName,
450 children: node.children
451 };
452 },
453 // 打开弹出框
454 clickRadio(e, index, val, row) {
455 debugger;
456 this.rowSelect = [];
457 this.rowData = row;
458 if (index == "2") {
459 if (undefined != val && "" != val) {
460 var arr = val.split(",");
461 for (let i = 0; i < arr.length; i++) {
462 this.rowSelect.push(Number(arr[i]));
463 }
464 }
465 this.deptOpen = true;
466 }
467 },
468 // saveTree
469 saveTree() {
470 debugger;
471 var _this = this;
472 var rowData = _this.rowData;
473 var treeData = _this.rowSelect;
474 for (let i = 0; i < _this.tableData.length; i++) {
475 if (_this.tableData[i].id == rowData.id) {
476 let str = "";
477 for (let k = 0; k < treeData.length; k++) {
478 str += treeData[k] + ",";
479 }
480 // _this.tableData[i].depts = treeData;
481 // str.substring(0,str.length-1);
482 str = str.substring(0, str.length - 1);
483 _this.tableData[i].depts = str;
484 }
485 }
486 this.deptOpen = false;
487 }
488 }
489 };
490 </script>
491
492 <style lang="scss" scoped>
493 .el-row {
494 margin-bottom: 15px;
495 .requiredIcon {
496 color: red;
497 }
498 }
499 </style>
浙公网安备 33010602011771号