add repo object management pages

This commit is contained in:
lifang 2022-01-04 10:21:56 +08:00
parent 5a51c860ea
commit 0ffa5598ff
24 changed files with 8455 additions and 7398 deletions

57
.fes.js
View File

@ -19,13 +19,68 @@ export default {
}, },
}, },
layout: { layout: {
title: 'Fes.js', title: '数联网控制系统',
footer: 'Created by MumbleFe', footer: 'Created by MumbleFe',
multiTabs: false, multiTabs: false,
menus: [ menus: [
{ {
name: 'index', name: 'index',
icon: 'home'
}, },
{
name:'networking',
icon:'apartment',
children:[
{
name:'unionManage'
},
{
name:'levelManage'
}
]
},
{
name:'repoManage',
icon:'database',
children:[
{
name:'repoList'
},
{
name:'repoDetail'
}
]
},
{
name:'objectSearch',
icon:'search'
},
{
name:'globalManage',
icon:'fullscreen',
children:[
{
name:'manageUnion'
},
{
name:'manageConfig'
},
{
name:'manageTemplate'
},
{
name:'manageData'
}
]
},
{
name:'doRight',
icon:'edit'
},
{
name:'set_up',
icon:'setting'
}
], ],
}, },
devServer: { devServer: {

145
et --hard Normal file
View File

@ -0,0 +1,145 @@
commit 5a51c860ea375760c7052f7a29f4365502ecd70f (HEAD -> feat/router, origin/master, origin/feat/repoManage-a, origin/HEAD, master, feat/repoManage-a)
Merge: 991bac1 da0d0a6
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Tue Dec 28 18:58:32 2021 +0800
Merge branch 'master' of https://github.com/daotl/fes-starter
commit da0d0a651303fc87be23094f2067e174dc5fb2f7
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Tue Dec 28 18:37:34 2021 +0800
feat: add Pinia
commit 126d430ef34917d5d5a3223d51943b3a14017a56
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Tue Dec 28 17:06:43 2021 +0800
fix: add 'node' and 'jest' to types in tsconfig.json
commit 1d16701350d9d97757eb25f7f803454d28bd2cc5
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Tue Dec 28 12:20:01 2021 +0800
docs: links
commit 991bac123100b8862db757388f0e616fab0bdede (origin/feat/router)
Merge: 6e4869d 751b9e7
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Tue Dec 28 10:26:27 2021 +0800
Merge branch 'master' of https://github.com/daotl/fes-starter
commit 751b9e7b3be6a4e968f3260233c4d8522566834f
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Tue Dec 28 09:41:13 2021 +0800
chore: update fes.js deps
commit 6e4869dae154db040903a0f9c12b6b6526b69c3b
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 23:33:58 2021 +0800
chore: setup commitlint and commitizen
commit cd3ad4ef78b116d640b1b5ecb2e1cd13ad685e15
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 22:09:26 2021 +0800
chore: init from starter template
commit 80715dc6bd36bcdbd421ab963b329e83f64b0a45
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 21:54:25 2021 +0800
style: move <config> block to top
commit 4c7482cef892b1ee806b77cadc7e9284c3dd9a07
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 21:47:25 2021 +0800
feat: add Iconify icons with unplugin-icons
commit 373d34df9f988264ae0910e243231b450f0934dd
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 19:37:31 2021 +0800
feat: switch to Element Plus
commit a9b2b816f82020a2f91cdab59d094d6236c2aeff
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 19:23:47 2021 +0800
feat: add unplugin-vue-components
commit 545ef5b0ddf63c8a6bdb77e582ee00530b49ce7b
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 19:07:17 2021 +0800
feat: add unplugin-auto-imports
commit 3fa72dc0fca5f1122b705c2a8e410e57a16f1e6c
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 17:41:26 2021 +0800
docs: update README
commit d7dc53640b01c1422f85b1c03b80938b3fe7f4f7
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 17:37:41 2021 +0800
feat: add eslint-webpack-plugin
commit d848c6934c3d000e2a99c6fa8cd596fe6fe4e596
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 17:31:15 2021 +0800
docs: update README
commit 36ff5aff2bdf62ff48f044a85701b23f7e3afc8c
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 17:23:55 2021 +0800
fix: add TypeScript to devDependencies
commit 32d835ff27e141a1ee565a998cae81974467af15
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 16:14:28 2021 +0800
chore: add husky and lint-staged
commit 4908523bc41e9bcdac15720c18dd5cce1a704553
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 16:00:29 2021 +0800
chore: add recommended VSCode extensions
commit b43eac82ada23e4fd4d97f100024bf64f3362497
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 15:34:51 2021 +0800
docs: README
commit 808ee936138c8d1a50e3bd576889edc852c7f4dd
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 15:26:40 2021 +0800
feat: switch to SCSS and add Stylelint
commit 6382f68efd5a460b9ed4c794c1e4c007a2792021
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 15:06:11 2021 +0800
feat: add alias: `~` -> `src`
commit a7c776a85ef1e9626ac3c51a00e0bf5b73364ec9
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Mon Dec 27 10:44:31 2021 +0800
feat: switch to TypeScript, custom ESLint config, update deps
commit bc6bc455d8842d3bb4fd34266bcbbbc89fb5d1b3
Author: Nex Zhu <4370605+NexZhu@users.noreply.github.com>
Date: Sun Dec 26 17:14:46 2021 +0800
init: npx @fesjs/create-fes-app myapp

14339
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -47,6 +47,7 @@
"@daotl/prettier-config": "^0.1.2", "@daotl/prettier-config": "^0.1.2",
"@daotl/tsconfig": "^0.0.4", "@daotl/tsconfig": "^0.0.4",
"@fesjs/plugin-sass": "^2.0.0", "@fesjs/plugin-sass": "^2.0.0",
"@iconify-json/bi": "^1.0.10",
"@iconify-json/mdi": "^1.0.12", "@iconify-json/mdi": "^1.0.12",
"@vue/compiler-sfc": "^3.2.26", "@vue/compiler-sfc": "^3.2.26",
"commitizen": "^4.2.4", "commitizen": "^4.2.4",

View File

@ -1,12 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fes.js</title> <title>fes.js</title>
<link rel="shortcut icon" type="image/x-icon" href="./logo.png"> <link rel="shortcut icon" type="image/x-icon" href="./logo.png" />
</head> <!-- 引入样式 -->
<body> <link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

View File

@ -1,22 +1,53 @@
<template> <template>
<div class="right"> <div class="right">
<i-mdi-account-box <el-icon :size="20" class="search">
style="color: red; font-size: 2em; vertical-align: middle" <search />
</el-icon>
<el-icon class="bell"><bell /></el-icon>
<span class="line">|</span>
<a-icon type="question-circle" />
<i-bi:question-circle
style="color: #a39980; font-size: 16px; vertical-align: middle"
/> />
<span>{{ name }}</span> <div class="head"></div>
<!-- <span>{{ name }}</span> -->
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import useUserStore from '~/stores/user' // import useUserStore from '~/stores/user'
const store = useUserStore() // const store = useUserStore()
const name = store.name // const name = store.name
// import { useModel } from '@fesjs/fes'
// import type { State } from '~/app'
import { Search, Bell } from '@element-plus/icons-vue'
// const initialState = useModel('@@initialState') as State
</script> </script>
<style scope lang="scss"> <style scope lang="scss">
.right { .right {
width: 15%;
padding: 0 20px; padding: 0 20px;
text-align: right; text-align: right;
float: right;
display: flex;
align-items: center;
justify-content: space-between;
.search,
.bell {
font-size: 20px;
color: #929292;
}
.line {
color: #929292;
}
.head {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: pink;
}
} }
</style> </style>

0
src/icons/question.svg Normal file
View File

View File

@ -0,0 +1,16 @@
<config>
{
"name": "doRight",
"title": "全量确权"
}
</config>
<template>
<div>
<h1>{{ qq }}</h1>
</div>
</template>
<script setup lang="ts">
const qq = '全量确权'
</script>

View File

@ -0,0 +1,6 @@
<config>
{
"name": "globalManage",
"title": "全域监管"
}
</config>

View File

@ -0,0 +1,16 @@
<config>
{
"name": "manageConfig",
"title": "监管配置"
}
</config>
<template>
<div>
<h1>{{ jgpz }}</h1>
</div>
</template>
<script setup lang="ts">
const jgpz = '监管配置'
</script>

View File

@ -0,0 +1,16 @@
<config>
{
"name": "manageData",
"title": "监管数据"
}
</config>
<template>
<div>
<h1>{{ jgsj }}</h1>
</div>
</template>
<script setup lang="ts">
const jgsj = '监管数据'
</script>

View File

@ -0,0 +1,16 @@
<config>
{
"name": "manageTemplate",
"title": "监管模板"
}
</config>
<template>
<div>
<h1>{{ jgmb }}</h1>
</div>
</template>
<script setup lang="ts">
const jgmb = '监管模板'
</script>

View File

@ -0,0 +1,276 @@
<config>
{
"name": "manageUnion",
"title": "监管联盟"
}
</config>
<template>
<div class="all">
<div class="title">
<el-icon><home-filled /></el-icon> /
</div>
<div class="all_two">
<!-- 下拉菜单按钮 -->
<div class="menu" @click="showMenu">
<el-icon><operation /></el-icon>
{{ tree }}
<div class="line"></div>
<el-icon><arrow-down /></el-icon>
</div>
<!-- 显示的下拉选项 -->
<div v-show="isshow" class="selection">
<!-- 选项头部 -->
<div class="sel_top">
<div class="text">
<h2>选择联盟</h2>
<div class="text_a">全部</div>
</div>
<div class="del">
<el-icon
><close-bold style="width: 25px; height: 25px; color: #898a8d"
/></el-icon>
</div>
</div>
<!-- 选项头部下面的横线 -->
<div class="line_two"></div>
<!-- 横线下面的各种选项 -->
<div class="everyOperation">
<div class="operation_l">
<el-icon><avatar /></el-icon>
<span>太原市联盟</span>
</div>
<div class="operation_r">
<el-icon><circle-check-filled style="color: #2f54eb" /></el-icon>
</div>
</div>
<div class="everyOperation">
<div class="operation_l">
<el-icon><avatar /></el-icon>
<span>太原市联盟</span>
</div>
<div class="operation_r">
<el-icon><circle-check-filled style="color: #2f54eb" /></el-icon>
</div>
</div>
<div class="everyOperation">
<div class="operation_l">
<el-icon><avatar /></el-icon>
<span>太原市联盟</span>
</div>
<div class="operation_r">
<el-icon><circle-check-filled style="color: #2f54eb" /></el-icon>
</div>
</div>
<div class="everyOperation">
<div class="operation_l">
<el-icon><avatar /></el-icon>
<span>太原市联盟</span>
</div>
<div class="operation_r">
<el-icon><circle-check-filled style="color: #2f54eb" /></el-icon>
</div>
</div>
<div class="everyOperation">
<div class="operation_l">
<el-icon><avatar /></el-icon>
<span>太原市联盟</span>
</div>
<div class="operation_r">
<el-icon><circle-check-filled style="color: #2f54eb" /></el-icon>
</div>
</div>
<!-- 取消和确认按钮 -->
<div class="buttons">
<el-button>取消</el-button>
<el-button type="primary">确认</el-button>
</div>
</div>
<div class="list">
<!-- 监管联盟成员列表 -->
<div class="member_list">
<h2>监管联盟成员列表</h2>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="序号" width="180" />
<el-table-column prop="name" label="主体名称" width="180" />
<el-table-column prop="address" label="监管节点地址" />
</el-table>
</div>
<!-- 监管联盟用户列表 -->
<div class="member_list">
<h2>监管联盟用户列表</h2>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="序号" width="180" />
<el-table-column prop="name" label="主体名称" width="180" />
<el-table-column prop="address" label="用户名" />
</el-table>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {
HomeFilled,
ArrowDown,
Operation,
CloseBold,
Avatar,
CircleCheckFilled,
} from '@element-plus/icons-vue'
const isshow = ref(false)
interface User {
date: string
name: string
address: string
}
function showMenu(): any {
isshow.value = !isshow.value
if (isshow.value == false) {
tree.value = '目录结构'
} else {
tree.value = '请选择监管联盟'
}
}
const tree = ref('目录树')
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
<style scope lang="scss">
.all {
height: 100%;
overflow: hidden;
.title {
margin: 25px 0px 30px 10px;
font-size: 14px;
color: #282b2d;
}
.all_two {
height: 100%;
padding: 0 16px 0 24px;
position: relative;
.menu {
overflow: hidden;
width: 16%;
padding: 15px 10px 15px 10px;
// height: 62px;
border-radius: 5px;
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 120, 255, 100);
.line {
margin: 0 6px 0 2px;
display: inline-block;
width: 1px;
height: 25px;
background-color: rgba(222, 222, 222, 33);
}
}
.selection {
position: absolute;
top: 70px;
left: 25px;
margin-bottom: 500px;
width: 24%;
// height: 100px;
box-shadow: 7px 0px 9px 0px rgba(111, 111, 111, 14);
padding: 15px 10px 15px 10px;
z-index: 9000;
background-color: #fff;
.sel_top {
display: flex;
justify-content: space-between;
.text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.text_a {
color: #2f59ee;
}
}
.del {
padding-top: 9px;
display: flex;
justify-content: center;
align-items: top;
margin-right: 10px;
}
}
.line_two {
margin-bottom: 10px;
height: 2px;
background-color: #e8e7e7;
}
.everyOperation {
border: 1px solid rgba(187, 187, 187, 100);
padding: 15px 5px 15px 5px;
border-radius: 5px;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
background-color: #f7f7f7;
}
.buttons {
display: flex;
justify-content: space-around;
}
}
.list {
display: flex;
justify-content: space-between;
margin-top: 40px;
.member_list {
width: 47%;
box-shadow: 7px 0px 9px 0px rgba(111, 111, 111, 14);
font-family: 'Roboto';
border: 1px solid rgba(187, 187, 187, 100);
padding: 20px 10px 20px 10px;
h2 {
padding: 8px 5px 8px 5px;
text-align: center;
color: rgba(16, 16, 16, 100) !important;
font-weight: 700;
}
}
}
}
}
.menu .el-icon svg.icon {
width: 25px;
height: 25px;
}
.menu .el-icon {
width: 25px !important;
height: 25px !important;
margin-right: 13px !important;
}
.all .all_two .list .member_list {
padding-bottom: 500px !important;
}
</style>

View File

@ -0,0 +1,16 @@
<config>
{
"name": "levelManage",
"title": "层级管理"
}
</config>
<template>
<div>
<h1>{{ cj }}</h1>
</div>
</template>
<script setup lang="ts">
const cj = '层级管理'
</script>

View File

@ -0,0 +1,16 @@
<config>
{
"name": "networking",
"title": "数联网组网管理"
}
</config>
<template>
<div>
<h1>{{ zw }}</h1>
</div>
</template>
<script setup lang="ts">
const zw = '数联网组网管理'
</script>

View File

@ -0,0 +1,16 @@
<config>
{
"name": "unionManage",
"title": "联盟管理"
}
</config>
<template>
<div>
<h1>{{ lm }}</h1>
</div>
</template>
<script setup lang="ts">
const lm = '联盟管理'
</script>

View File

@ -0,0 +1,156 @@
<config>
{
"name": "objectSearch",
"title": "数字对象搜索"
}
</config>
<template>
<div class="all">
<!-- 小标题 -->
<div class="title">
<el-icon><home-filled /></el-icon>
</div>
<!-- "已选条件" -->
<div class="condition">
<div class="con_name">已选条件</div>
<div class="every_con">仓库IDxxx</div>
<div class="every_con">仓库IDxxx</div>
<div class="every_con">仓库IDxxx</div>
<div class="every_con">仓库IDxxx</div>
</div>
<!-- 检索结果 -->
<div class="result">
<!-- 每一条检索结果 -->
<div class="every_res">
<el-icon
><promotion style="width: 36px; height: 36px; color: #8f8f8f"
/></el-icon>
<div class="doid">doid86.5000/repo1/123</div>
<div class="detail">所属数字对象仓库ID86.5000/repo1</div>
<div class="detail">所属数字对象仓库名称太原市仓库</div>
<div class="detail">数字对象所有者太原市大数据局</div>
<div class="detail">元数据{}</div>
</div>
<div class="every_res">
<el-icon
><promotion style="width: 36px; height: 36px; color: #8f8f8f"
/></el-icon>
<div class="doid">doid86.5000/repo1/123</div>
<div class="detail">所属数字对象仓库ID86.5000/repo1</div>
<div class="detail">所属数字对象仓库名称太原市仓库</div>
<div class="detail">数字对象所有者太原市大数据局</div>
<div class="detail">元数据{}</div>
</div>
<div class="every_res">
<el-icon
><promotion style="width: 36px; height: 36px; color: #8f8f8f"
/></el-icon>
<div class="doid">doid86.5000/repo1/123</div>
<div class="detail">所属数字对象仓库ID86.5000/repo1</div>
<div class="detail">所属数字对象仓库名称太原市仓库</div>
<div class="detail">数字对象所有者太原市大数据局</div>
<div class="detail">元数据{}</div>
</div>
<div class="every_res">
<el-icon
><promotion style="width: 36px; height: 36px; color: #8f8f8f"
/></el-icon>
<div class="doid">doid86.5000/repo1/123</div>
<div class="detail">所属数字对象仓库ID86.5000/repo1</div>
<div class="detail">所属数字对象仓库名称太原市仓库</div>
<div class="detail">数字对象所有者太原市大数据局</div>
<div class="detail">元数据{}</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { HomeFilled, Promotion } from '@element-plus/icons-vue'
</script>
<style scope lang="scss">
.all {
overflow: hidden;
.title {
margin: 25px 0px 34px 10px;
font-size: 14px;
color: rgba(40, 43, 45, 100);
font-size: 12px;
font-family: 'SourceHanSansSC-regular';
}
.condition {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
padding: 0 175px 0 55px;
.con_name {
display: flex;
justify-content: center;
align-items: center;
color: rgba(16, 16, 16, 100);
font-size: 14px;
font-family: 'SourceHanSansSC-regular';
}
.every_con {
width: 216px;
height: 34px;
line-height: 34px;
border-radius: 30px;
background-color: rgba(241, 241, 241, 100);
color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: center;
font-family: 'Roboto';
border: 1px solid rgba(187, 187, 187, 100);
}
}
.result {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 0 auto;
.every_res {
width: 49%;
height: 250px;
line-height: 20px;
border-radius: 15px;
color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: center;
font-family: 'Roboto';
border: 1px solid rgba(187, 187, 187, 100);
position: relative;
padding: 7px 13px 50px 13px;
font-family: 'SourceHanSansSC-bold';
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 15px;
.doid {
width: 85%;
padding: 5px 0 5px 20px;
color: rgba(16, 16, 16, 100);
font-size: 24px;
text-align: left;
font-weight: 700;
}
.detail {
color: rgba(16, 16, 16, 100);
font-size: 14px;
text-align: left;
padding-left: 20px;
}
}
}
}
.every_res svg.icon {
position: absolute;
left: 240px;
top: 14px;
}
.every_res i.el-icon {
margin-left: 52%;
}
</style>

View File

@ -0,0 +1,164 @@
<config>
{
"name": "repoDetail",
"title": "数字对象仓库详情"
}
</config>
<template>
<div class="all">
<div class="title">
<el-icon><home-filled /></el-icon> /
</div>
<!-- 白板 -->
<div class="baiban">
<!-- 太原仓库一条 -->
<div class="state">
<!-- 太原仓库标题 -->
<h2>太原仓库</h2>
<!-- 索引状态 -->
<div class="state_r">
<div>索引状态&nbsp;:&nbsp;&nbsp;&nbsp;开启</div>
<div>
<div class="green"></div>
已通过
</div>
<div>
<div class="green"></div>
在线
</div>
</div>
</div>
<!-- ID那一条 -->
<div class="data">
<div>ID: &nbsp;&nbsp;86.5000/repo1</div>
<div>所有者: &nbsp;&nbsp;太原市大数据局</div>
<div>添加时间: &nbsp;&nbsp;2021年10月20日10:30</div>
<div>操作人员: &nbsp;&nbsp;张三</div>
</div>
<!-- "说明:" -->
<div class="say">说明:</div>
<!-- 说明内容 -->
<div>
我是说明我是说明我是说明我是说明我是说明我是说明我是说明我是说明
</div>
</div>
<!-- 选项 -->
<el-tabs type="border-card">
<el-tab-pane label="DO列表">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</el-tab-pane>
<el-tab-pane label="拓扑结构">Config</el-tab-pane>
<el-tab-pane label="统计数据">Role</el-tab-pane>
</el-tabs>
<!-- 分页 -->
<div class="demo-pagination-block">
<el-pagination
v-model:currentPage="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, jumper, prev, pager, next, sizes"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</div>
</template>
<script setup lang="ts">
import { HomeFilled } from '@element-plus/icons-vue'
const tableData = reactive([
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
])
//
const currentPage4 = ref(4)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
}
</script>
<style lang="scss" scoped>
.all {
.title {
margin: 25px 0px 34px 10px;
font-size: 14px;
}
.baiban {
width: 1104px;
height: 183px;
border: 1px solid #ccc;
margin: 0 auto;
padding: 22px 66px 35px 28px;
box-shadow: 0px 2px 6px 0px #807d7d;
margin-bottom: 78px;
.state {
padding: 10px 0 10px 0;
overflow: hidden;
display: flex;
justify-content: space-between;
h2 {
margin: 0;
}
.state_r {
width: 30%;
display: flex;
justify-content: space-between;
div {
display: flex;
justify-content: center;
align-items: center;
}
.green {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 10px;
border-radius: 50%;
background-color: #1cd74b;
}
}
}
.data {
display: flex;
justify-content: space-between;
padding-right: 132px;
}
.say {
padding: 10px 0 10px 0;
}
}
}
.el-tabs__nav-scroll {
background: #fff;
}
</style>

View File

@ -0,0 +1,476 @@
<config>
{
"name": "repoList",
"title": "数字对象仓库列表"
}
</config>
<template>
<div class="all">
<div class="title">
<el-icon><home-filled /></el-icon> /
</div>
<div class="do">
<div class="but">
<!-- 增加按钮 -->
<div class="add" @click="dialogFormVisible = true">
<el-icon class="icon"><plus /></el-icon
><el-button
type="text"
style="color: #101010 !important"
@click="dialogFormVisible = true"
>增加</el-button
>
</div>
<!-- 点击增加按钮弹出层 -->
<el-dialog
v-model="dialogFormVisible"
title="新增数字对象仓库"
width="90%"
custom-class="dialog"
>
<div class="in_dialog">
<div>
<!-- 数字对象仓库ID输入 -->
<div class="id_input">
<el-form :model="form" class="form">
<el-form-item
label="数字对象仓库ID"
:label-width="formLabelWidth"
>
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<!-- "尝试连接"按钮 -->
<el-button
type="primary"
:icon="Link"
style="
height: 50px !important;
margin-left: 15px;
padding: 0 10px;
border-color: #dcdfe6;
background-color: #fff;
color: black;
"
>尝试连接</el-button
>
<el-icon class="right"
><circle-check
style="
width: 25px !important;
height: 25px !important;
color: green;
"
/></el-icon>
</div>
<!-- 名称 -->
<div class="name">
<el-form :model="form" class="form_a">
<el-form-item label="名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<!-- 所有者 -->
<el-form :model="form" class="form_b">
<el-form-item label="所有者" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<!-- 是否索引 -->
<el-form :model="form" class="form_b">
<el-form-item label="是否索引" :label-width="formLabelWidth">
<el-select v-model="value" clearable placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<!-- <el-input v-model="form.name" autocomplete="off"></el-input> -->
</el-form-item>
</el-form>
</div>
<!-- 已添加的管理者 -->
<el-form :model="form" class="form_c">
<el-form-item
label="已添加的管理者"
:label-width="formLabelWidth"
>
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<!-- 说明 -->
<el-form :model="form" class="form_d">
<el-form-item label="说明" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
</div>
<!-- 确定按钮 -->
<el-button
type="info"
size="medium"
plain
class="confirm"
@click="dialogFormVisible = false"
>确定</el-button
>
</div>
</el-dialog>
<!-- 删除按钮 -->
<div class="reduce">
<el-icon class="icon"><minus /></el-icon>
</div>
</div>
<!-- 搜索框 -->
<div
style="width: 375px; height: 32px; border-color: pink !important"
size="mini"
class="sousuo"
>
<el-input
v-model="input3"
placeholder="可按关键字模糊搜索"
class="input-with-select"
size="mini"
:prefix-icon="Search"
>
<template #append>
<el-select
v-model="select"
placeholder="高级搜索"
style="width: 48px"
>
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
</template>
</el-input>
</div>
</div>
<!-- 表格 -->
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
:height="400"
size="small"
>
<el-table-column type="selection" width="55" />
<el-table-column label="ID" width="120">
<template #default="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="名称" width="120" />
<el-table-column
property="address"
label="所有者"
show-overflow-tooltip
/>
</el-table>
<!-- 分页 -->
<div class="demo-pagination-block">
<el-pagination
v-model:currentPage="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, jumper, prev, pager, next, sizes"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</div>
</template>
<script setup lang="ts">
// import { reactive, ref, toRefs } from 'vue'
import {
Search,
Plus,
Minus,
HomeFilled,
Link,
CircleCheck,
} from '@element-plus/icons-vue'
const input3 = ref('')
const select = ref('')
const tableData = reactive([
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-08',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-06',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-07',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
])
//
const formProps = reactive({
gridData: [
{
date: '2016-05-02',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-04',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-01',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
{
date: '2016-05-03',
name: 'John Smith',
address: 'No.1518, Jinshajiang Road, Putuo District',
},
],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
formLabelWidth: '120px',
})
const {
gridData,
dialogTableVisible,
dialogFormVisible,
form,
formLabelWidth,
} = toRefs(formProps)
// const multipleSelection = ref([])
const multipleTable = ref(null)
// function handleSelectionChange(val: any) {
// multipleSelection = val
// },
//
const currentPage4 = ref(4)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
}
//el-select
const options = reactive([
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
])
const value = ref('')
</script>
<style scope lang="scss">
.all {
overflow: hidden;
.title {
margin: 25px 0px 34px 10px;
font-size: 14px;
color: rgba(40, 43, 45, 100);
font-size: 12px;
font-family: 'SourceHanSansSC-regular';
}
.do {
padding: 21px 31px 55px 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
box-shadow: 0px -20px 30px -30px inset #ccc;
.but {
display: flex;
justify-content: space-between;
.add,
.reduce {
// color: #101010;
display: flex;
justify-content: center;
align-items: center;
width: 126px;
height: 32px;
border: 2px solid#DDDADA;
.icon {
margin-right: 8px;
font-weight: 900;
color: #333;
}
}
.add {
margin-right: 44px;
}
.dialog {
height: 90%;
background-color: #f2f2f2;
padding: 30px;
.in_dialog {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 80px 163px 172px 106px;
background-color: white;
position: relative;
.confirm {
position: absolute;
bottom: 10px;
right: 10px;
}
.id_input,
.name {
display: flex;
justify-content: space-between;
.form {
color: #101010;
}
.right {
height: 50px;
}
}
}
}
}
}
// .shadow_line {
// height: 1px;
// background-color: #ccc;
// box-shadow: 5px 8px 5px #ccc;
// }
.demo-pagination-block {
margin-top: 297px;
}
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input__inner {
height: 32px !important;
line-height: 32px !important;
}
.ant-layout .child-layout {
background: #fff;
}
.el-table::before {
height: 0;
}
.el-dialog__body {
height: 100%;
}
.el-dialog__header {
padding: 0;
}
// element plusinput
.form input.el-input__inner {
width: 681px;
height: 50px !important;
}
.form_a input.el-input__inner,
.form_b input.el-input__inner {
width: 248px;
height: 50px !important;
}
.form_c input.el-input__inner {
height: 50px !important;
}
.form_d input.el-input__inner {
height: 200px !important;
}
.el-form-item__label {
width: 150px !important;
display: flex;
justify-content: right;
align-items: center;
color: rgba(16, 16, 16, 100);
font-size: 16px;
font-family: 'SourceHanSansSC-regular';
}
.el-dialog__title {
color: rgba(16, 16, 16, 100);
font-size: 28px;
text-align: left;
font-family: SourceHanSansSC-bold;
}
.is-leaf div.cell {
color: #101010;
font-family: 'PingFangSC-regular';
font-size: 14px;
}
.name form.form_b,
.form_a {
width: 200px !important;
}
// .el-input__inner {
// padding: 0 !important;
// }
// .all .do .but .add .icon,
// .all .do .but .reduce .icon {
// color: #101010;
// }
</style>

View File

@ -0,0 +1,16 @@
<config>
{
"name": "repoManage",
"title": "数字对象仓库管理"
}
</config>
<template>
<div>
<h1>{{ re }}</h1>
</div>
</template>
<script setup lang="ts">
const re = '数字对象仓库管理'
</script>

View File

@ -0,0 +1,16 @@
<config>
{
"name": "set_up",
"title": "设置"
}
</config>
<template>
<div>
<h1>{{ sz }}</h1>
</div>
</template>
<script setup lang="ts">
const sz = '设置'
</script>

View File

@ -9,6 +9,9 @@ declare global {
const effectScope: typeof import('vue')['effectScope'] const effectScope: typeof import('vue')['effectScope']
const EffectScope: typeof import('vue')['EffectScope'] const EffectScope: typeof import('vue')['EffectScope']
const ElButton: typeof import('element-plus/es')['ElButton'] const ElButton: typeof import('element-plus/es')['ElButton']
const ElIcon: typeof import('element-plus/es')['ElIcon']
const ElTable: typeof import('element-plus/es')['ElTable']
const ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
const getCurrentInstance: typeof import('vue')['getCurrentInstance'] const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope'] const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h'] const h: typeof import('vue')['h']

View File

@ -5,10 +5,12 @@
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
IMdiAccountBox: typeof import('~icons/mdi/account-box')['default'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
PageLoading: typeof import('./../components/PageLoading.vue')['default'] PageLoading: typeof import('./../components/PageLoading.vue')['default']
UserCenter: typeof import('./../components/UserCenter.vue')['default'] UserCenter: typeof import('./../components/UserCenter.vue')['default']
} }
} }
export {} export { }

View File

@ -7,7 +7,7 @@
"~/*": ["src/*"], "~/*": ["src/*"],
"@@/*": ["src/.fes/*"] "@@/*": ["src/.fes/*"]
}, },
"types": ["node", "jest", "element-plus/global", "unplugin-icons/types/vue"] "types": ["node", "element-plus/global", "unplugin-icons/types/vue"]
}, },
"include": [ "include": [
"src/**/*", "src/**/*",