Browse Source

详情暂存

jiangkai 1 year ago
parent
commit
14754d7b07

File diff suppressed because it is too large
+ 14612 - 0
package-lock.json


+ 14 - 0
src/api/homepage/entityDetail.js

@@ -0,0 +1,14 @@
1
+import axios from "@/util/ajax";
2
+
3
+export default {
4
+  // 获取最新资讯
5
+  getThemeInfo(params) {
6
+    return axios.get('/resourceDirectory/getThemeInfo', { params });
7
+  },
8
+  getThemeAttributesList(params) {
9
+    return axios.get('/resourceDirectory/getThemeAttributesList', { params });
10
+  },
11
+  addCollect(params) {
12
+    return axios.post('/resourceDirectory/addCollect', params);
13
+  }
14
+}

File diff suppressed because it is too large
+ 6 - 0
src/assets/image/entityDetail/u1517.svg


BIN
src/assets/image/entityDetail/u1522.png


File diff suppressed because it is too large
+ 6 - 0
src/assets/image/entityDetail/u3076.svg


+ 2 - 1
src/config/index.js

@@ -3,7 +3,8 @@
3 3
  */
4 4
  const Config = {
5 5
     dev: {
6
-      BASE_API: 'https://172.16.36.211:8800', // http://172.16.36.211:8800
6
+      // BASE_API: 'https://172.16.36.211:8800', // http://172.16.36.211:8800
7
+      BASE_API: 'https://172.16.36.216:8801/westport/', // http://172.16.36.211:8800
7 8
     },
8 9
     build: {
9 10
       //服务地址及端口配置

+ 299 - 208
src/pages/homepage/components/entityDetail.vue

@@ -1,61 +1,85 @@
1 1
 <template>
2
-  <div class="articleDetail">
2
+  <div class="entity-detail">
3 3
     <el-card v-loading="loading">
4
-      <div>基本信息</div>
5
-      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
6
-        <el-row>
7
-          <el-col :span="12">
8
-            <el-form-item label="实体名称" prop="name">
9
-              {{ruleForm.name}}
10
-            </el-form-item>
4
+      <div class="back-button">
5
+        <img :src="backIcon" alt="">
6
+        返回
7
+      </div>
8
+      <div class="basic-info" v-for="(item, index) in basicInfo" :key="index">
9
+        <div class="basic-info-title">{{ item.title }}</div>
10
+        <div class="collect-button" @click="handleCollect(item.isCollect)">
11
+          <template v-if="basicData.isCollect">
12
+            <img :src="unCollectPentacle" alt="">
13
+            <span>
14
+              已收藏
15
+            </span>
16
+          </template>
17
+          <template v-else>
18
+            <img :src="collectPentacle" alt="">
19
+            <span>
20
+              收藏
21
+            </span>
22
+          </template>
23
+        </div>
24
+        <el-row :gutter="20">
25
+          <el-col :span="12" v-for="(cItem, cIndex) in item.content" :key="cIndex">
26
+            <div class="basic-info-item">
27
+              <div class="basic-info-label">{{ cItem.label }}:</div>
28
+              <div class="bacis-info-value">{{ renderBasicValue(cItem.key) }}</div>
29
+            </div>
11 30
           </el-col>
12 31
         </el-row>
13
-        <el-row>
14
-          <el-col :span="12">
15
-            <el-form-item label="表英文名称" prop="name">
16
-              {{ruleForm.name}}
17
-            </el-form-item>
18
-          </el-col>
19
-          <el-col :span="12">
20
-            <el-form-item label="活动名称" prop="name">
21
-              {{ruleForm.name}}
22
-            </el-form-item>
23
-          </el-col>
24
-          <el-col :span="12">
25
-            <el-form-item label="活动名称" prop="name">
26
-              {{ruleForm.name}}
27
-            </el-form-item>
28
-          </el-col>
29
-          <el-col :span="12">
30
-            <el-form-item label="活动名称" prop="name">
31
-              {{ruleForm.name}}
32
-            </el-form-item>
33
-          </el-col>
34
-          <el-col :span="12">
35
-            <el-form-item label="活动名称" prop="name">
36
-              {{ruleForm.name}}
37
-            </el-form-item>
38
-          </el-col>
39
-          <el-col :span="12">
40
-            <el-form-item label="活动名称" prop="name">
41
-              {{ruleForm.name}}
42
-            </el-form-item>
43
-          </el-col>
44
-        </el-row>
45
-      </el-form>
32
+      </div>
33
+      <div class="table-wrapper" v-if="['theme', 'special', 'api'].includes(type)">
34
+        <div class="table-wrapper-title">
35
+          <span>实体属性({{ tableData.length }})</span>
36
+        </div>
37
+        <div class="table-content">
38
+          <el-table :data="tableData">
39
+            <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
40
+              <template slot-scope="scope">
41
+                <span v-if="item.key === 'nameCh'" style="color: #0033FF;">{{ scope.row.nameCh }}</span>
42
+                <span v-else>{{ scope.row[item.key] }}</span>
43
+              </template>
44
+            </el-table-column>
45
+          </el-table>
46
+          <div class="table-pagination">
47
+            <el-pagination layout="prev, pager, next" :total="total" @current-change="handlePageChange"
48
+              :current-page.sync="pageNum" :page-size.sync="pageSize">
49
+            </el-pagination>
50
+          </div>
51
+        </div>
52
+      </div>
46 53
     </el-card>
47 54
   </div>
48 55
 </template>
49 56
 
50 57
 <script>
51 58
 import axios from "axios";
52
-import articleApi from "@/api/index/article.js";
59
+import api from "@/api/homepage/entityDetail.js";
60
+import data from './entityDetailData'
61
+import collectPentacle from '@/assets/image/entityDetail/u1517.svg'
62
+import unCollectPentacle from '@/assets/image/entityDetail/u3076.svg'
63
+import backIcon from '@/assets/image/entityDetail/u1522.png'
64
+
53 65
 export default {
54 66
   data() {
67
+    const baseInfo = data[this.$route.query.type] || {}
55 68
     return {
56 69
       loading: false,
57 70
       articleInfo: {},
58
-      entityId: "",
71
+      id: this.$route.query.id,
72
+      type: this.$route.query.type, // theme: 主题库,special:专题库,target:指标,api:api服务,message:消息队列
73
+      basicInfo: baseInfo.basic || [],
74
+      columns: baseInfo.columns || [],
75
+      basicData: {},
76
+      tableData: [],
77
+      collectPentacle,
78
+      unCollectPentacle,
79
+      backIcon,
80
+      pageNum: 1,
81
+      pageSize: 10,
82
+      total: 0
59 83
     };
60 84
   },
61 85
   watch: {
@@ -67,182 +91,249 @@ export default {
67 91
     //   }
68 92
     // }
69 93
   },
70
-  created() {
71
-    this.entityId = this.$route.query.id;
72
-    // this.getArticleInfo();
94
+  mounted() {
95
+    console.log(this.type)
96
+    this.getData()
73 97
   },
74
-  mounted() {},
75 98
   methods: {
76
-    // getArticleInfo() {
77
-    //   this.loading = true;
78
-    //   articleApi
79
-    //     .detailIndexContent(this.entityId)
80
-    //     .then(res => {
81
-    //       if (res.success) {
82
-    //         this.articleInfo = res.data;
83
-    //       } else {
84
-    //         this.$message.error(res.message);
85
-    //       }
86
-    //       this.loading = false;
87
-    //     })
88
-    //     .catch(() => {
89
-    //       this.$message.error("请求获取文章详情接口异常");
90
-    //       this.loading = false;
91
-    //     });
92
-    // },
93
-    // // 预览文件
94
-    previewFile(file) {
95
-      // const url = `${this.baseUrl}/xyjc/index-files/download/${file.id}`;
96
-      // axios({
97
-      //   url: url
98
-      // })
99
-      //   .then(res => {
100
-      //     console.log(res);
101
-      //   })
102
-      //   .catch(() => {
103
-      //     this.$message.error("请求预览文件接口异常");
104
-      //   });
105
-      window.open(`${this.baseUrl}/xyjc/index-files/view/${file.id}`, "_blank");
106
-      // window.open(`${this.baseUrl}/file/${file.fileNewname}`, "_blank");
99
+    getData() {
100
+      switch (this.type) {
101
+        case 'theme' || 'special':
102
+          this.getThemeData()
103
+          break;
104
+        default:
105
+          break;
106
+      }
107
+    },
108
+    getThemeData() {
109
+      api.getThemeInfo({
110
+        id: this.id
111
+      }).then(res => {
112
+        this.basicData = res.data
113
+      })
114
+      this.getThemeTableData()
107 115
     },
108
-    // 下载文件
109
-    downloadFile(file) {
110
-      const id = file.id;
111
-      const url = `${this.baseUrl}/xyjc/index-files/download/${id}`;
112
-      axios({
113
-        url: url,
114
-        headers: {
115
-          "content-type": "application/json"
116
-        },
117
-        responseType: "blob"
116
+    getThemeTableData() {
117
+      api.getThemeAttributesList({
118
+        tableModelId: this.id,
119
+        pageNum: this.pageNum,
120
+        pageSize: this.pageSize
121
+      }).then(res => {
122
+        console.log(res)
123
+        this.tableData = res.data.records
124
+        this.total = res.data.total
125
+        console.log(this.total)
126
+      })
127
+    },
128
+    renderBasicValue(key) {
129
+      if (key === 'l1,l2,l3') {
130
+        let text = `主题域分组:${this.basicData.l1 || '--'}>主题域:${this.basicData.l2 || '--'}>业务对象:${this.basicData.l3 || '--'}`
131
+        return text
132
+      }
133
+      return this.basicData[key]
134
+    },
135
+    handlePageChange() {
136
+      switch (this.type) {
137
+        case 'theme' || 'special':
138
+          this.getThemeTableData()
139
+          break
140
+        default:
141
+          break
142
+      }
143
+    },
144
+    handleCollect(value) {
145
+      if (value) {
146
+        return
147
+      }
148
+      const resourceTypeMap = {
149
+        theme: 'theme',
150
+        special: 'specialSubject',
151
+        target: 'index',
152
+        api: 'api',
153
+        message: 'mqs'
154
+      }
155
+      api.addCollect({
156
+        resourceId: this.id,
157
+        Resource_type: resourceTypeMap[this.type]
158
+      }).then(res => {
159
+        if (res.success) {
160
+          this.basicData = Object.assign({}, this.basicData, {
161
+            isCollect: true
162
+          })
163
+        } else {
164
+          this.$message(res.message)
165
+        }
118 166
       })
119
-        .then(res => {
120
-          if (res.status === 200) {
121
-            const data = res.data,
122
-              blob = new Blob([data]),
123
-              fileName = file.fileName;
124
-            if ("download" in document.createElement("a")) {
125
-              // 非IE下载
126
-              const elink = document.createElement("a");
127
-              elink.download = fileName;
128
-              elink.style.display = "none";
129
-              elink.href = URL.createObjectURL(blob);
130
-              document.body.appendChild(elink);
131
-              elink.click();
132
-              URL.revokeObjectURL(elink.href); // 释放URL 对象
133
-              document.body.removeChild(elink);
134
-            } else {
135
-              // IE10+下载
136
-              navigator.msSaveBlob(blob, fileName);
137
-            }
138
-          } else {
139
-            this.$message.error("下载异常");
140
-          }
141
-        })
142
-        .catch(() => {
143
-          this.$message.error("请求下载文件接口异常");
144
-        });
145 167
     }
146 168
   }
147 169
 };
148 170
 </script>
149 171
 
150 172
 <style lang="scss" scoped>
151
-.articleDetail {
152
-  font-size: 16px;
153
-  color: #333;
154
-  .first {
155
-    text-align: center;
156
-    font-size: 28px;
157
-    font-family: "PingFangSC-Regular", "PingFang SC";
158
-    font-weight: normal;
159
-    padding: 10px 0;
160
-  }
161
-  // .el-divider {
162
-  //   margin: 15px 0;
163
-  // }
164
-  .second {
165
-    border-top: 1px solid #e4e4e4;
166
-    border-bottom: 1px solid #e4e4e4;
167
-    padding: 20px 0 40px;
168
-    font-size: 16px;
169
-    display: flex;
170
-    justify-content: space-between;
171
-    color: #333;
172
-    .second-content {
173
-      color: #666;
174
-      font-style: normal;
175
-    }
176
-  }
177
-  .third {
178
-    border-bottom: 1px solid #e4e4e4;
179
-    padding-bottom: 20px;
180
-    .third-top {
181
-      padding-top: 20px;
182
-      font-size: 16px;
183
-    }
184
-    /deep/ .content {
185
-      margin-top: 25px;
186
-      // .title {
187
-      //   text-align: center;
188
-      //   font-size: 18px;
189
-      //   margin-bottom: 20px;
190
-      //   font-weight: normal;
191
-      // }
192
-      img {
193
-        max-width: 100%;
194
-      }
195
-      video {
196
-        width: 100%;
197
-      }
198
-    }
199
-    .file-type {
200
-      margin-top: 30px;
201
-      .file-list {
202
-        margin-left: 20px;
203
-        .file_wrap {
204
-          text-decoration: underline;
205
-          color: #0170f0;
206
-        }
207
-        .download {
208
-          margin-left: 15px;
209
-        }
210
-        .file_wrap:hover {
211
-          cursor: pointer;
212
-        }
213
-        .over_flow {
214
-            white-space: nowrap;
215
-            overflow: hidden;
216
-            text-overflow: ellipsis;
217
-        }
218
-      }
219
-    }
173
+// .articleDetail {
174
+//   font-size: 16px;
175
+//   color: #333;
176
+//   .first {
177
+//     text-align: center;
178
+//     font-size: 28px;
179
+//     font-family: "PingFangSC-Regular", "PingFang SC";
180
+//     font-weight: normal;
181
+//     padding: 10px 0;
182
+//   }
183
+//   // .el-divider {
184
+//   //   margin: 15px 0;
185
+//   // }
186
+//   .second {
187
+//     border-top: 1px solid #e4e4e4;
188
+//     border-bottom: 1px solid #e4e4e4;
189
+//     padding: 20px 0 40px;
190
+//     font-size: 16px;
191
+//     display: flex;
192
+//     justify-content: space-between;
193
+//     color: #333;
194
+//     .second-content {
195
+//       color: #666;
196
+//       font-style: normal;
197
+//     }
198
+//   }
199
+//   .third {
200
+//     border-bottom: 1px solid #e4e4e4;
201
+//     padding-bottom: 20px;
202
+//     .third-top {
203
+//       padding-top: 20px;
204
+//       font-size: 16px;
205
+//     }
206
+//     /deep/ .content {
207
+//       margin-top: 25px;
208
+//       // .title {
209
+//       //   text-align: center;
210
+//       //   font-size: 18px;
211
+//       //   margin-bottom: 20px;
212
+//       //   font-weight: normal;
213
+//       // }
214
+//       img {
215
+//         max-width: 100%;
216
+//       }
217
+//       video {
218
+//         width: 100%;
219
+//       }
220
+//     }
221
+//     .file-type {
222
+//       margin-top: 30px;
223
+//       .file-list {
224
+//         margin-left: 20px;
225
+//         .file_wrap {
226
+//           text-decoration: underline;
227
+//           color: #0170f0;
228
+//         }
229
+//         .download {
230
+//           margin-left: 15px;
231
+//         }
232
+//         .file_wrap:hover {
233
+//           cursor: pointer;
234
+//         }
235
+//         .over_flow {
236
+//             white-space: nowrap;
237
+//             overflow: hidden;
238
+//             text-overflow: ellipsis;
239
+//         }
240
+//       }
241
+//     }
242
+//   }
243
+//   .forth {
244
+//     line-height: 30px;
245
+//     padding: 20px 0 30px;
246
+//     .file-list {
247
+//       .file_wrap {
248
+//         text-decoration: underline;
249
+//         color: #0170f0;
250
+//       }
251
+//       .download {
252
+//         margin-left: 15px;
253
+//       }
254
+//       .file_wrap:hover {
255
+//         cursor: pointer;
256
+//       }
257
+//       // .file_name {
258
+//       //   white-space: nowrap;
259
+//       //   overflow: hidden;
260
+//       //   text-overflow: ellipsis;
261
+//       // }
262
+//       .over_flow {
263
+//         white-space: nowrap;
264
+//         overflow: hidden;
265
+//         text-overflow: ellipsis;
266
+//       }
267
+//     }
268
+//   }
269
+// }
270
+.back-button {
271
+  padding: 10px;
272
+  cursor: pointer;
273
+  border: 1px solid #333;
274
+  width: fit-content;
275
+  margin-bottom: 10px;
276
+  display: flex;
277
+  align-items: center;
278
+
279
+  img {
280
+    height: 20px;
220 281
   }
221
-  .forth {
222
-    line-height: 30px;
223
-    padding: 20px 0 30px;
224
-    .file-list {
225
-      .file_wrap {
226
-        text-decoration: underline;
227
-        color: #0170f0;
228
-      }
229
-      .download {
230
-        margin-left: 15px;
231
-      }
232
-      .file_wrap:hover {
233
-        cursor: pointer;
234
-      }
235
-      // .file_name {
236
-      //   white-space: nowrap;
237
-      //   overflow: hidden;
238
-      //   text-overflow: ellipsis;
239
-      // }
240
-      .over_flow {
241
-        white-space: nowrap;
242
-        overflow: hidden;
243
-        text-overflow: ellipsis;
244
-      }
245
-    }
282
+}
283
+
284
+.basic-info {
285
+  position: relative;
286
+  border: 1px solid #e4e4e4;
287
+  padding: 20px;
288
+}
289
+
290
+.basic-info-title {
291
+  font-size: 20px;
292
+  color: #333;
293
+  font-weight: 700;
294
+}
295
+
296
+.collect-button {
297
+  display: flex;
298
+  position: absolute;
299
+  right: 20px;
300
+  top: 20px;
301
+  align-items: center;
302
+  cursor: pointer;
303
+}
304
+
305
+.basic-info-item {
306
+  display: flex;
307
+  align-items: center;
308
+  font-size: 20px;
309
+  color: #333;
310
+}
311
+
312
+.table-wrapper-title {
313
+  font-size: 20px;
314
+  padding: 20px;
315
+  border: 1px solid #e4e4e4;
316
+
317
+  span {
318
+    border-bottom: 2px solid #0066ff;
246 319
   }
247 320
 }
321
+
322
+.table-content {
323
+  border: 1px solid #e4e4e4;
324
+  padding: 20px;
325
+}
326
+
327
+.table-pagination {
328
+  display: flex;
329
+  flex-direction: row-reverse;
330
+}
331
+
332
+/deep/ .el-table th.el-table__cell {
333
+  background-color: #f2f2f2;
334
+}
335
+
336
+/deep/ .el-table {
337
+  font-size: 24px;
338
+}
248 339
 </style>

+ 65 - 0
src/pages/homepage/components/entityDetailData.js

@@ -0,0 +1,65 @@
1
+export default {
2
+  theme: {
3
+    basic: [
4
+      {
5
+        title: '基本信息',
6
+        content: [
7
+          {
8
+            label: '实体名称',
9
+            key: 'logicTbName'
10
+          },
11
+          {
12
+            label: '创建人',
13
+            key: 'createBy'
14
+          },
15
+          {
16
+            label: '表英文名称',
17
+            key: 'tbName'
18
+          },
19
+          {
20
+            label: '创建时间',
21
+            key: 'createTime'
22
+          },
23
+          {
24
+            label: '所属主题',
25
+            key: 'l1,l2,l3'
26
+          },
27
+          {
28
+            label: '描述',
29
+            key: 'description'
30
+          },
31
+          {
32
+            label: '逻辑实体编码',
33
+            key: 'code'
34
+          },
35
+          {
36
+            label: '逻辑实体类型',
37
+            key: 'tableType'
38
+          },
39
+        ]
40
+      }
41
+    ],
42
+    columns: [
43
+      {
44
+        label: '字段名',
45
+        key: 'nameCh'
46
+      },
47
+      {
48
+        label: '英文名称',
49
+        key: 'nameEn'
50
+      },
51
+      {
52
+        label: '数据类型',
53
+        key: 'dataType'
54
+      },
55
+      {
56
+        label: '编码',
57
+        key: 'code'
58
+      },
59
+      {
60
+        label: '描述',
61
+        key: 'description'
62
+      }
63
+    ]
64
+  }
65
+}

+ 1 - 1
static/mung-local-config.js

@@ -1,6 +1,6 @@
1 1
 window.mungConfig = {
2 2
   dev: {
3
-    BASE_API: "https://172.16.36.211:8800/westport"
3
+    BASE_API: "http://172.16.36.216:8801/westport"
4 4
   },
5 5
   build: {
6 6
     BASE_API: "https://10.252.0.229:38443/westport"