树形数据增删改查

功能描述：

1. 默认展示所有项目
2. 点击项目展示当前项目下的所有区域
3. 点击区域展示当前区域下的所有工位
4. 以上以树形图格式展示
5. 项目，区域，和工位都可进行增加 修改 和删除，每个图标hover时显示对应提示信息
6. 项目，区域，工位可导入数据，提供下载模板功能
7. 部门配置单独列出，展示所有部门列表，部门可进行增加，修改和删除

效果示意图

所有代码：

<template>
   <el-row :gutter="15" justify="center" style="height:100%;">
     <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <el-main  style="width:100%;margin:0 auto;position:relative; height:100%;padding:0;background:#fff;padding:10px;">
        <h1 style="text-align:center;margin-top:10px;">项目区域配置</h1>
        <!-- <a style="position:absolute;left:5px;top:8px;color:#3388cc;font-size:12px; text-decoration:underline;" target="_blank" href="#/questionCommit"> <el-icon><Back /></el-icon> 问题提交</a>
        <a style="position:absolute;right:5px;top:8px;color:#3388cc;font-size:12px; text-decoration:underline;" target="_blank" href="#/questionList"> 问题列表 <el-icon><Right /></el-icon></a> -->

  <el-tabs v-model="activeName" class="demo-tabs" >
    <el-tab-pane label="项目配置" name="first">
      <div>
      <el-button type="primary" @click="addProject">添加项目</el-button>

      <el-upload
            style="float:right;"
            ref="uploadRef"
            :on-change="importProject"
            class="upload-demo"
            :limit="1"
            accept=".xlsx"
            :auto-upload="false"
            action=""
          >
            <el-button type="primary">导入数据</el-button>
          </el-upload>

          <el-button type="primary" @click="downloadXLSX"   style="float:right;margin-right:10px">下载模板</el-button>
      <ul>
        <li v-for="project in projects" :key="project.projectId">
          <el-collapse @change="handleChangeProject(project,project.projectId)">
            <el-collapse-item >
              <template #title>
                <span v-if="project.editing">
                  <input v-model="project.projectName"  />
                </span>
                <b v-else> {{ project.projectName }}</b>
                &nbsp;&nbsp;
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="project.editing?'保存项目名称':'编辑项目名称'"
                  placement="top-start"
                >
                <el-icon @click.stop="toggleEditProject(project)" style="color:#3388cc;cursor:pointer;">
                <SuccessFilled v-if="project.editing" @click.stop="saveProject(project)"/>
                <Edit v-else /></el-icon>
                </el-tooltip>
                &nbsp;&nbsp;
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除当前项目"
                  placement="top-start"
                >
                <el-icon @click.stop="confirmRemoveProject(project)" style="color:red;cursor:pointer;"><Delete/></el-icon>
                </el-tooltip>
                &nbsp;&nbsp;
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="当前项目下添加区域"
                  placement="top-start"
                >
                    <el-icon @click.stop="addArea(project)" style="cursor:pointer;"><CirclePlusFilled /></el-icon>
                </el-tooltip>

              </template>
              <div>
                <ul>
                  <li v-for="area in project.areas" :key="area.regionId">
                    <el-collapse @change="handleChangeRegion(area,area.regionId)">
                      <el-collapse-item>
                        <template #title>
                        <span v-if="area.editing">
                          <input v-model="area.regionName" />
                        </span>
                        <b v-else>
                          {{ area.regionName }}
                        </b>
                        &nbsp;&nbsp;
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="area.editing?'保存区域名称':'编辑区域名称'"
                          placement="top-start"
                        >
                        <el-icon @click.stop="toggleEditArea(area)" style="color:#3388cc;cursor:pointer;">
                                  <SuccessFilled v-if="area.editing"  @click.stop="saveArea(project,area)"/>
                                  <Edit v-else /></el-icon>
                        </el-tooltip>
                          &nbsp;&nbsp;
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="删除当前区域"
                            placement="top-start"
                          >
                          <el-icon @click.stop="confirmRemoveArea(project, area)" style="color:red;cursor:pointer;"><Delete/></el-icon>
                          </el-tooltip>
                          &nbsp;&nbsp;
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="当前区域下添加工位"
                            placement="top-start"
                          >
                          <el-icon @click.stop="addStation(project, area)" style="cursor:pointer;"><CirclePlusFilled /></el-icon>
                          </el-tooltip>


                      </template>
                        <div>
                          <ul>
                            <li v-for="station in area.stations" :key="station.stationId" >
                              <div>
                                <span v-if="station.editing">
                                  <input v-model="station.stationName"  />
                                </span>
                                <b v-else>
                                  {{ station.stationName }}
                                </b>
                                &nbsp;&nbsp;
                                <el-tooltip
                                  class="box-item"
                                  effect="dark"
                                  :content="station.editing?'保存工位名称':'编辑工位名称'"
                                  placement="top-start"
                                >
                                <el-icon @click.stop="toggleEditStation(station)" style="color:#3388cc;cursor:pointer;">
                                <SuccessFilled v-if="station.editing" @click.stop="saveStation(project, area, station)" />
                                 <Edit v-else /></el-icon>
                                </el-tooltip>

                                &nbsp;&nbsp;
                                <el-tooltip
                                  class="box-item"
                                  effect="dark"
                                  content="删除当前工位"
                                  placement="top-start"
                                >
                                <el-icon @click.stop="confirmRemoveStation(project, area, station)" style="color:red;cursor:pointer;"><Delete/></el-icon>
                                </el-tooltip>

                              </div>
                            </li>
                          </ul>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </li>
                </ul>
              </div>
            </el-collapse-item>
          </el-collapse>
        </li>
      </ul>

    </div>
    </el-tab-pane>
    <el-tab-pane label="部门配置" name="second">
      <el-button type="primary" @click="addDepartmentName">添加部门</el-button>
      <ul>
        <li v-for="department in departmentNameList" :key="department.id">
          <div  style="height:40px;line-height:40px;border-bottom:1px solid #ddd;">
            <span v-if="department.editing">
              <input v-model="department.departmentName" />
            </span>
            <span v-else>
              {{ department.departmentName }}
            </span>
            &nbsp;&nbsp;
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="department.editing?'保存部门名称':'编辑部门名称'"
              placement="top-start"
            >
            <el-icon @click="toggleEditDepartment(department)" style="color:#3388cc;cursor:pointer;">
            <SuccessFilled v-if="department.editing"  @click="saveDepartment(department)"/>
              <Edit v-else /></el-icon>
            </el-tooltip>

            &nbsp;&nbsp;
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除当前部门"
              placement="top-start"
            >
            <el-icon @click="confirmRemoveDepartment(department)" style="color:red;cursor:pointer;"><Delete/></el-icon>
            </el-tooltip>

          </div>
        </li>
      </ul>
    </el-tab-pane>
  </el-tabs>
  <el-dialog v-model="showConfirmDialog" title="确认删除" @close="showConfirmDialog = false">
      <span v-if="itemToDelete" style="margin:20px auto">
        确定要删除 {{ itemToDelete.type }}：{{ itemToDelete.name }} 吗？
      </span>
      <el-button type="danger" @click="deleteItem">确认删除</el-button>
    </el-dialog>
      </el-main>
     </el-col>
     </el-row>

</template>
<script lang="ts" setup>
import { ref } from 'vue'
import * as XLSX from 'xlsx';
import type { TabsPaneContext} from 'element-plus'
import {insertDepartment,upload,deleteDeptById,deleteProjectById,deleteAreaById,deleteStationById,updateDepartmentById,insertOrUpdateArea,insertProject,insertOrUpdateStation,queryDepartmentName,queryProject,queryRegionByProject,queryStationName} from '@/api/user'
import { ElMessage } from 'element-plus'
let showConfirmDialog = ref(false)
let itemToDelete = ref(null)
let projects = ref([
        {
          projectId: 1,
          projectName: '项目1',
          areas: [
            {
              regionId: 11,
              regionName: '区域1',
              projectId: 1,
              stations: [{
                stationId:118,
                stationName:"H005 机壳上线",
                regionId:120}
              ],
            },
          ],
        },
      ])
let departmentNameList = ref([]);
const activeName = ref('first')

let downloadXLSX = ()=>{
      // 创建一个 XLSX 工作簿
      const wb = XLSX.utils.book_new();
      // 创建一个工作表
      const ws = XLSX.utils.json_to_sheet([
        // 在这里定义模板的列和初始数据
        { '项目名称':'','区域':'','工位名称':'' },
        // 您可以在这里添加更多的模板数据行
      ]);
      // 向工作簿添加工作表
      XLSX.utils.book_append_sheet(wb, ws, '模板数据');

      // 生成 XLSX 文件
      XLSX.writeFile(wb, '模板数据.xlsx');
    }
let importProject : UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile);
  let formData = new FormData();
  formData.append('file', uploadFile.raw)
  upload(formData).then((data)=>{
  if(data.status == 200){
    ElMessage({
        message: '导入成功',
        type: 'success',
      })
    }
})}

let toggleEditProject = (project) => {
  // 切换项目编辑状态
  project.editing = !project.editing
}
let toggleEditArea = (area) => {
  // 切换区域编辑状态
  area.editing = !area.editing
}
let toggleEditStation = (station) => {
  // 切换工位编辑状态
  station.editing = !station.editing
}
let toggleEditDepartment = (department) => {
  // 切换部门编辑状态
  department.editing = !department.editing
}

const getList = () => {
//获取所有部门列表
queryDepartmentName().then((data)=>{
if(data.status == 200){
  departmentNameList.value = data.data;
}
})
//获取所有项目列表
queryProject().then((data)=>{
if(data.status == 200){
  projects.value = data.data;
  console.log(projects)
}
})
}
//点击项目获取项目下的区域
let handleChangeProject = (project,id)=>{
  let formData = new FormData();
formData.append('projectId', id);
queryRegionByProject(formData).then((data)=>{
if(data.status == 200){
   project.areas = data.data;
}
})
}
//点击区域获取区域下面的工位
let handleChangeRegion = (region,id)=>{
  let formData1 = new FormData();
    formData1.append('areaId', id);
    queryStationName(formData1).then((data)=>{
    if(data.status == 200){
       region.stations = data.data;
    }
})
}

//添加项目
let addProject = () => {
  let formData = new FormData();
  let num =  Math.floor(Math.random() * 1000)
  formData.append('projectName', '新项目'+num);
  insertProject(formData).then((data)=>{
    if(data.status == 200){
      const newProject = {
        projectId: Math.floor(data.data),
        projectName: '新项目'+num,
        areas: [],
      }
      projects.value.push(newProject)
      ElMessage({
        message: '添加项目成功，名为 新项目'+num+'，可修改',
        type: 'success',
      })
    }else{
      ElMessage({
        message: '添加项目失败',
        type: 'error',
      })
    }
  })

}
//添加区域
let addArea = (project) => {
  let formData = new FormData();
  formData.append('projectId', project.projectId);
  let num1 =  Math.floor(Math.random() * 1000)
  formData.append('regionName', '新区域'+num1);
  insertOrUpdateArea(formData).then((data)=>{
    if(data.status == 200){
      const newArea = {
        regionId: Math.floor(data.data),
        regionName: '新区域'+num1,
        projectId:project.projectId,
        stations: [],
      }
      project.areas.push(newArea)
      ElMessage({
        message: '添加区域成功，名为 新区域'+num1+'，可修改',
        type: 'success',
      })
    }else{
      ElMessage({
        message: '添加区域失败',
        type: 'error',
      })
    }
  })
}
// 添加工位
let addStation = (project, area) => {
  let formData = new FormData();
  formData.append('regionId', area.regionId);//
  let num2 =  Math.floor(Math.random() * 1000)
  formData.append('stationName', '新工位'+num2);
  insertOrUpdateStation(formData).then((data)=>{
    if(data.status == 200){
      const newStation = {
        stationId: Math.floor(data.data),
        stationName:'新工位'+num2,
        regionId:area.regionId
      }
      area.stations.push(newStation)
      ElMessage({
        message: '添加工位成功，名为 新工位'+num2+'，可修改',
        type: 'success',
      })
    }else{
      ElMessage({
        message: '添加工位失败',
        type: 'error',
      })
    }
  })
}

//添加部门
let addDepartmentName = ()=>{
  let formData = new FormData();
  let num3 =  Math.floor(Math.random() * 1000)
  formData.append('departmentName', '新部门'+num3);
  insertDepartment(formData).then((data)=>{
    if(data.status == 200){
      const newDepartmentName = {
      id: Math.floor(data.data),
      departmentName: '新部门'+num3,
      }
      departmentNameList.value.push(newDepartmentName)
      ElMessage({
        message: '添加部门成功，名为 新部门'+num3+'，可修改',
        type: 'success',
      })
    }else{
      ElMessage({
        message: '添加部门失败',
        type: 'error',
      })
    }
  })

}


 // 保存项目编辑
let saveProject = (project) => {
  let formData = new FormData();
  formData.append('projectId', project.projectId);
  formData.append('projectName', project.projectName);
  insertProject(formData).then((data)=>{
    if(data.status == 200){
      project.editing = false
      ElMessage({
        message: '修改项目名成功',
        type: 'success',
      })
    }else{
      ElMessage({
        message: '修改项目失败',
        type: 'error',
      })
    }
  })
}
 // 保存区域编辑
let saveArea = (project, area) => {
  let formData = new FormData();
  formData.append('projectId', project.projectId);
  formData.append('regionId', area.regionId);
  formData.append('regionName', area.regionName);
  insertOrUpdateArea(formData).then((data)=>{
    if(data.status == 200){
      area.editing = false
      ElMessage({
        message: '修改区域名成功',
        type: 'success',
      })
    }else{
      ElMessage({
        message: '修改区域名失败',
        type: 'error',
      })
    }
  })

}
 // 保存工位编辑
let saveStation = (project, area, station) => {
  let formData = new FormData();
  formData.append('regionId', area.regionId);
  formData.append('stationName', station.stationName);
  formData.append('stationId', station.stationId);
  insertOrUpdateStation(formData).then((data)=>{
    if(data.status == 200){
      station.editing = false
      ElMessage({
        message: '修改工位名成功',
        type: 'success',
      })
    }else{
      ElMessage({
        message: '修改工位名失败',
        type: 'error',
      })
    }
  })
}
// 保存部门编辑
let saveDepartment = (department) => {
  let formData = new FormData();
  formData.append('id', department.id);
  formData.append('departmentName',department.departmentName);
  insertDepartment(formData).then((data)=>{
    if(data.status == 200){
      department.editing = false
      ElMessage({
        message: '修改部门名成功',
        type: 'success',
      })
    }else{
      ElMessage({
        message: '修改部门名失败',
        type: 'error',
      })
    }
  })
}

//删除项目
let confirmRemoveProject = (project) => {
  itemToDelete.value = { type: '项目',name: project.projectName,project,data: { id: project.projectId } }
  showConfirmDialog.value = true
}
//删除区域
let confirmRemoveArea = (project, area) => {
  itemToDelete.value = { type: '区域',  name: area.regionName,project,area,data: { id: area.regionId } }
  showConfirmDialog.value = true
}
//删除工位
let confirmRemoveStation = (project, area, station) => {
  itemToDelete.value = { type: '工位', name: station.stationName,project,area, station, data: {  id: station.stationId } }
  showConfirmDialog.value = true
}
//删除部门
let confirmRemoveDepartment = (department) => {
  itemToDelete.value = { type: '部门', name: department.departmentName,department,data: { id: department.id } }
  showConfirmDialog.value = true
}


//确认删除
let deleteItem = () => {
  if (itemToDelete.value) {
    if (itemToDelete.value.type === '项目') {
      // 执行删除项目的逻辑
      let json ={'projectId':itemToDelete.value.data.id}
      deleteProjectById(json).then((data)=>{
      if(data.status == 200){
          const projectIdToDelete = itemToDelete.value.data.id;
          const indexToDelete = projects.value.findIndex(
            (project) => project.projectId === projectIdToDelete
          );
          if (indexToDelete !== -1) {
            projects.value.splice(indexToDelete, 1);
          }
        ElMessage({
            message: '删除项目成功',
            type: 'success',
          })

      }
      })
    } else if (itemToDelete.value.type === '区域') {
      // 执行删除区域的逻辑
      let json ={'areaId':itemToDelete.value.data.id}
      deleteAreaById(json).then((data)=>{
      if(data.status == 200){
          // 从项目的区域列表中删除已删除的区域
          const project = itemToDelete.value.project;
          const area = itemToDelete.value.area;
          const areaIdToDelete = itemToDelete.value.data.id;

          // 查找项目并从它的区域列表中删除区域
          if (project) {
            const projectIndex = projects.value.findIndex((p) => p === project);
            if (projectIndex !== -1 && area) {
              const areaIndex = project.areas.findIndex((a) => a === area);
              if (areaIndex !== -1) {
                project.areas.splice(areaIndex, 1);
              }
            }
          }
            ElMessage({
                message: '删除区域成功',
                type: 'success',
              })
          }
          })
    } else if (itemToDelete.value.type === '工位') {
      // 执行删除工位的逻辑
      let json ={'stationId':itemToDelete.value.data.id}
      deleteStationById(json).then((data)=>{
      if(data.status == 200){
         // 从项目的区域的工位列表中删除已删除的工位
       // 从项目的区域的工位列表中删除已删除的工位
          const project = itemToDelete.value.project;
          const area = itemToDelete.value.area;
          const stationIdToDelete = itemToDelete.value.data.id;

          // 查找项目、区域，并从它的工位列表中删除工位
          if (project && area) {
            const projectIndex = projects.value.findIndex((p) => p === project);
            if (projectIndex !== -1) {
              const areaIndex = project.areas.findIndex((a) => a === area);
              if (areaIndex !== -1) {
                const stationIndex = area.stations.findIndex((s) => s.stationId === stationIdToDelete);
                if (stationIndex !== -1) {
                  area.stations.splice(stationIndex, 1);
                }
              }
            }
          }
        ElMessage({
            message: '删除工位成功',
            type: 'success',
          })
      }
      })
    } else if (itemToDelete.value.type === '部门') {
      // 执行删除部门的逻辑
      let json ={'id':itemToDelete.value.data.id}
      deleteDeptById(json).then((data)=>{
      if(data.status == 200){
          // 从部门列表中删除已删除的部门
          const departmentIdToDelete = itemToDelete.value.data.id;
          const indexToDelete = departmentNameList.value.findIndex(
            (department) => department.id === departmentIdToDelete
          );
          if (indexToDelete !== -1) {
            departmentNameList.value.splice(indexToDelete, 1);
          }

        ElMessage({
            message: '删除部门成功',
            type: 'success',
          })
      }
      })
    }
    showConfirmDialog.value = false
  }
}

onMounted(() => {
   getList();
})
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;

  font-weight: 600;
}

  body{
    background:#ccc;
  }
  </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650

提示
当前页面所有请求接口请根据自己项目实际情况修改
当前代码版本基于 vue3 elementplus
下载模板需要安装xlsx插件