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
| <template>
| <div class="box">
| <el-button type="primary" :icon="Plus" @click="openD('新建')" size="default">新建</el-button>
| <el-table :data="tableData" style="width: 100%" row-key="id" default-expand-all>
| <el-table-column align="center" label="是否为设备内容">
| <template #default="scope">
| <span v-if="scope.row.isContent == 1">是</span>
| <span v-if="scope.row.isContent == 2">否</span>
| </template>
| </el-table-column>
| <el-table-column align="center" label="巡检">
| <template #default="scope">
| <span v-if="scope.row.isVisit == 1">是</span>
| <span v-if="scope.row.isVisit == 2">否</span>
| </template>
| </el-table-column>
| <el-table-column align="center" label="检测">
| <template #default="scope">
| <span v-if="scope.row.isCheck == 1">是</span>
| <span v-if="scope.row.isCheck == 2">否</span>
| </template>
| </el-table-column>
| <el-table-column align="center" prop="typeName" label="类别名称" />
| <el-table-column align="center" label="操作">
| <template #default>
| <el-button type="primary" link :icon="View" @click="openD('查看')">查看</el-button>
| <el-button type="primary" link :icon="EditPen" @click="openD('修改')">修改</el-button>
| <el-button type="primary" link :icon="Delete">删除</el-button>
| <el-button type="primary" link :icon="CirclePlus" @click="openD('添加')">添加下级设备设施类型管理</el-button>
| </template>
| </el-table-column>
| </el-table>
| <Dailog ref="Show"></Dailog>
| </div>
| </template>
| <script lang="ts">
| import { defineComponent, onMounted, ref } from 'vue';
| import { Plus, View, EditPen, Delete, CirclePlus } from '@element-plus/icons-vue';
| import Dailog from './component/Dailog.vue';
| import { facilityManagementApi } from '/@/api/facilityManagement';
| import { ElMessage } from 'element-plus';
| export default defineComponent({
| components: { Dailog },
| setup() {
| const listApi = () => {
| facilityManagementApi()
| .getequipmentTypeMngTreeData()
| .then((res) => {
| if (res.data.code == 200) {
| tableData.value = res.data.data;
| } else {
| ElMessage({
| showClose: true,
| message: 'Oops, this is a error message.',
| type: 'error',
| });
| }
| });
| };
| onMounted(() => {
| listApi();
| });
| const tableData = ref([
| {
| id: 1,
| date: '2016-05-02',
| name: 'wangxiaohu',
| },
| {
| id: 2,
| date: '2016-05-04',
| name: 'wangxiaohu',
| },
| {
| id: 3,
| date: '2016-05-01',
| name: 'wangxiaohu',
| children: [
| {
| id: 31,
| date: '2016-05-01',
| name: 'wangxiaohu',
| children: [
| {
| id: 35,
| date: '2016-05-01',
| name: 'wangxiaohu',
| },
| {
| id: 36,
| date: '2016-05-01',
| name: 'wangxiaohu',
| },
| ],
| },
| {
| id: 32,
| date: '2016-05-01',
| name: 'wangxiaohu',
| },
| ],
| },
| {
| id: 4,
| date: '2016-05-03',
| name: 'wangxiaohu',
| },
| ]);
| const Show = ref();
| const openD = (title: string, id: number) => {
| Show.value.openDailog(title, id);
| };
| return {
| tableData,
| Show,
| openD,
| listApi,
| Plus,
| View,
| EditPen,
| Delete,
| CirclePlus,
| };
| },
| });
| </script>
| <style scoped>
| .box {
| padding: 20px;
| background-color: #fff;
| }
| </style>
|
|
