feat(第三方应用管理页面)：应用管理页面开发

admin.ui.plus-master/.env.development

@@ -2,6 +2,9 @@
 ENV = 'development'
 
 # 本地环境接口地址
-VITE_API_URL = 'http://ipos.biz:8070'
+# VITE_API_URL = 'http://ipos.biz:8070'
 #VITE_API_URL = 'http://localhost:8000'
+# VITE_API_URL = 'http://dev.hsfuel.com:8070'
+VITE_API_URL = 'http://47.101.220.106:8070'
+# VITE_API_URL = 'http://ipos.biz:8070'
 

admin.ui.plus-master/.env.production

@@ -8,5 +8,8 @@ VITE_COMPRESSION = true
 VITE_PUBLIC_PATH = '/'
 
 # 线上环境接口地址
-VITE_API_URL = 'http://ipos.biz:8070'
+# VITE_API_URL = 'http://ipos.biz:8070'
 #VITE_API_URL = 'http://localhost:8000'
+# VITE_API_URL = 'http://dev.hsfuel.com:8070'
+VITE_API_URL = 'http://47.101.220.106:8070'
+# VITE_API_URL = 'http://ipos.biz:8070'

admin.ui.plus-master/src/router/route.ts

@@ -1323,6 +1323,54 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
               icon: 'iconfont icon-crew_feature',
             },
           },
+          {
+            path: '/example/application/roleManage/:id',
+            name: '/example/application/roleManage/:id',
+            component: () => import('/@/views/example/application/roleManage/index.vue'),
+            //redirect: '/application/applicationManage',
+            meta: {
+              title: '角色管理',
+              isLink: '',
+              isHide: true,
+              isKeepAlive: true,
+              isAffix: false,
+              isIframe: false,
+              roles: ['admin', 'common'],
+              icon: 'iconfont icon-crew_feature',
+            },
+          },
+          {
+            path: '/example/application/permissionManage/:id',
+            name: '/example/application/permissionManage/:id',
+            component: () => import('/@/views/example/application/permissionManage/index.vue'),
+            //redirect: '/application/applicationManage',
+            meta: {
+              title: '权限管理',
+              isLink: '',
+              isHide: true,
+              isKeepAlive: true,
+              isAffix: false,
+              isIframe: false,
+              roles: ['admin', 'common'],
+              icon: 'iconfont icon-crew_feature',
+            },
+          },
+          {
+            path: '/example/application/viewManage/:id',
+            name: '/example/application/viewManage/:id',
+            component: () => import('/@/views/example/application/viewManage/index.vue'),
+            //redirect: '/application/applicationManage',
+            meta: {
+              title: '视图管理',
+              isLink: '',
+              isHide: true,
+              isKeepAlive: true,
+              isAffix: false,
+              isIframe: false,
+              roles: ['admin', 'common'],
+              icon: 'iconfont icon-crew_feature',
+            },
+          },
         ],
   },
 ]

admin.ui.plus-master/src/views/example/application/applicationManage/index.vue

@@ -7,49 +7,33 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-          <el-button v-auth="'api:admin:org:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
         </el-form-item>
       </el-form>
     </el-card>
 
     <el-card class="my-fill mt8" shadow="never">
-      <el-table
-        :data="state.applyData"
-        style="width: 100%"
-        v-loading="state.loading"
-        default-expand-all
-      >
-        <el-table-column prop="appid" label="应用id" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="name" label="应用名称" min-width="120" show-overflow-tooltip />
-        <!-- <el-table-column prop="value" label="部门值" min-width="80" show-overflow-tooltip />
-        <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
-        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
-          <template #default="{ row }">
-            <el-tag type="success" v-if="row.enabled">启用</el-tag>
-            <el-tag type="danger" v-else>禁用</el-tag>
-          </template>
-        </el-table-column> -->
-        <el-table-column label="操作" width="160" fixed="right" header-align="center" align="center">
-          <template #default="{ row }">
-            <el-button
-              icon="ele-EditPen"
-              size="small"
-              text
-              type="primary"
-              @click="onEdit(row)"
-              >编辑</el-button
-            >
-            <el-button
-              icon="ele-Delete"
-              size="small"
-              text
-              type="danger"
-              @click="onDelete(row)"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
+      <el-row>
+        <el-col :span="6">
+          <div class="flex app appDdd" @click="onAdd">
+            <div class="flex appDdd" style="width: 100px;height: 100px;background-color: #EFEFEF;border-radius: 50%;font-size: 20px;">+</div>
+          </div>
+        </el-col>
+        <el-col :span="6" v-for="(v, k) in state.applyData" :key="k">
+          <div class="flex app">
+            <div style="display: flex;justify-content: space-between;align-items: flex-start;align-self: flex-end;">
+              <div class="flex delete" @click="onDelete(v)">X</div>
+            </div>
+            <div class="flex" style="flex: 1;">{{ v.name }}</div>
+            <div class="flex" style="height: 50px;width: 100%;">
+              <el-row style="width: 100%">
+                <el-col :span="8"><el-button style="width: 100%;height: 50px;border-radius: 0" type="primary" @click="toPermissPage(v)">权限</el-button></el-col>
+                <el-col :span="8"><el-button style="width: 98%;height: 50px;border-radius: 0;" type="primary" @click="toRolePage(v)">角色</el-button></el-col>
+                <el-col :span="8"><el-button style="width: 100%;height: 50px;border-radius: 0;" type="primary" @click="toViewPage(v)">视图</el-button></el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
     </el-card>
 
     <org-form ref="orgFormRef" :title="state.orgFormTitle" :org-tree-data="state.orgTreeData"></org-form>
@@ -60,6 +44,7 @@
 import { ref, reactive, onMounted, getCurrentInstance, onBeforeMount, defineAsyncComponent } from 'vue'
 import { OauthApply,OauthApplyDto } from '/@/api/admin/data-contracts'
 import { PermissionApi } from '/@/api/admin/Permission'
+import router from "/@/router";
 import eventBus from '/@/utils/mitt'
 import { auth } from '/@/utils/authFunction'
 
@@ -119,6 +104,41 @@ const onDelete = (row: OauthApply) => {
     })
     .catch(() => {})
 }
+const toRolePage = (row) => {
+  router.push({path:`/example/application/roleManage/${row.name}`})
+}
+const toViewPage = (row) => {
+  router.push({path:`/example/application/viewManage/${row.name}`})
+}
+const toPermissPage = (row) => {
+  router.push({path:`/example/application/permissionManage/${row.name}`})
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.flex{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.app{
+  margin-left: 10px;
+  margin-bottom: 10px;
+  height: 175px;
+  border: #7728F5 solid 2px
+}
+.appDdd{
+  border: #7728F5 dashed 1px;
+  cursor: default; 
+}
+.delete{
+  width: 25px;
+  height: 25px;
+  border: #BBBBBB solid 2px;
+  color: #BBBBBB;
+  font-size: 25px;      
+  cursor: default;     
+}
+</style>