Skip to content

N
nse-ui
Commit 6a39fb68 by 周海峰
Options

Merge branch 'master' of https://code.palacesun.com/wuchao/nse-ui

parents 64ac5ee9 8073a998
正在显示 包含 604 行增加 和 63 行删除
src/assets/images/assetLibrary/index.js 0 → 100644
import MYSQL from './MYSQL.png'
import ORACLE from './ORACLE.png'
import POSTGRESQL from './POSTGRESQL.png'
import DB2 from './DB2.png'
import MSSQLSERVER from './MSSQLSERVER.png'
import MARIADB from './MARIADB.png'
import GBASE8S from './GBASE8S.png'
import KINGBASE from './KINGBASE.png'
import DM from './DM.png'
import GREENPLUM from './GREENPLUM.png'
import GAUSS from './GAUSS.png'
import OCEANBASE from './OCEANBASE.png'
import GAUSSDB from './GAUSSDB.png'
import ES from './ES.png'
import MONGODB from './MONGODB.png'
import KAFKA from './KAFKA.png'
import apache1 from './apache1.png'
import apache2 from './apache2.png'
import cloudera1 from './cloudera1.png'
import cloudera2 from './cloudera2.png'
import star1 from './star1.png'
import star2 from './star2.png'
import HIVE from './HIVE.png'
export default {
MYSQL,
ORACLE,
POSTGRESQL,
DB2,
MSSQLSERVER,
MARIADB,
GBASE8S,
KINGBASE,
DM,
GREENPLUM,
GAUSS,
OCEANBASE,
GAUSSDB,
ES,
MONGODB,
KAFKA,
apache1,
apache2,
cloudera1,
cloudera2,
star1,
star2,
HIVE
}
\ No newline at end of file
src/views/assetLibrary/addEdit.vue 0 → 100644
<script setup name="AssetLibrary">
import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
import FormGroup from './modules/formGroup.vue'
import img from '@/assets/images/assetLibrary/index.js'
const emit = defineEmits(['page'])
const step = ref('select') // select edit
const selectData = reactive({
name: '',
type: ''
})
const listData = ref([
{
title: '关系型数据库',
type: 1,
list: [
{
name: 'MYSQL',
icon: img.MYSQL,
},
{
name: 'ORACLE',
icon: img.ORACLE,
},
{
name: 'POSTGRESQL',
icon: img.POSTGRESQL,
},
{
name: 'DB2',
icon: img.DB2,
},
{
name: 'MSSQLSERVER',
icon: img.MSSQLSERVER,
},
{
name: 'MARIADB',
icon: img.MARIADB,
},
{
name: 'GBASE8S',
icon: img.GBASE8S,
},
{
name: 'KINGBASE',
icon: img.KINGBASE,
},
{
name: 'DM',
icon: img.DM,
},
{
name: 'GREENPLUM',
icon: img.GREENPLUM,
},
{
name: 'GAUSS',
icon: img.GAUSS,
},
{
name: 'OCEANBASE',
icon: img.OCEANBASE,
},
{
name: 'GAUSSDB',
icon: img.GAUSSDB,
}
]
},
{
title: 'NoSQL',
type: 2,
list: [
{
name: 'ES',
icon: img.ES,
},
{
name: 'MONGODB',
icon: img.MONGODB,
}
]
},
{
title: '消息队列',
type: 3,
list: [
{
name: 'KAFKA',
icon: img.KAFKA,
}
]
}
])
const hadoopData = reactive({
index: null,
list: [
{
name: 'Apache',
icon1: img.apache1,
icon2: img.apache2,
list: [
{
name: 'HIVE',
icon: img.HIVE,
type: 4,
}
]
},
{
name: 'CLOUDERA',
icon1: img.cloudera1,
icon2: img.cloudera2,
list: [
{
name: 'HIVE',
icon: img.HIVE,
type: 4,
}
]
},
{
name: '星环',
icon1: img.star1,
icon2: img.star2,
list: [
{
name: 'HIVE_TDH',
icon: img.HIVE,
type: 4,
}
]
}
]
})
// hadoop事件
const hadoopClick = (index) => {
hadoopData.index = index
}
// 新增
const editTo = (item,type) => {
selectData.name = item.name
selectData.type = type
step.value = 'edit'
}
// 新增回调
const modalConfirm = () => {
console.log('modalConfirm')
emit('page', 'list')
}
</script>
<template>
<div class="app-container scroller">
<PageTitle back @back="emit('page', 'list')">
<template #title>
<span id="badDebt" class="title-icon">
新增数据源
<PageTour tourType="badDebt" />
</span>
</template>
</PageTitle>
<div class="app-container__body">
<div v-if="step === 'select'">
<div class="listBox" v-for="(item,index) in listData" :key="index">
<div class="title">{{ item.title }}</div>
<div class="img-warpper">
<img class="img" :src="liItem.icon" :alt="liItem.name" @click="editTo(liItem, item.type)" v-for="(liItem, i) in item.list" :key="i">
</div>
</div>
<div class="title">Hadoop品牌：<span class="data-base-name">{{ hadoopData.index !== null ? hadoopData.list[hadoopData.index].name : '' }}</span></div>
<div style="display: inline-block;">
<div class="hadoop-list-box">
<div class="hadoop-item-box" :class="hadoopData.index === index ? 'hadoop-item-box-active' : ''" v-for="(item,index) in hadoopData.list" :key="index" @click="hadoopClick(index)">
<img :src="item.icon1" alt="">
<img :src="item.icon2" alt="" class="hidden-img">
<div class="name">
<span>{{ item.name }}</span>
<div class="bar"></div>
</div>
</div>
</div>
</div>
<div style="padding-top: 10px;color: #7a8495;">*点击图标切换Hadoop品牌</div>
<div v-if="hadoopData.index !== null" style="color: rgb(102, 102, 102); font-size: 16px; font-weight: bold; padding: 10px 0px;">Hadoop</div>
<div class="img-warpper" v-if="hadoopData.index !== null">
<img class="img" :src="item.icon" :alt="item.name" @click="editTo(item, item.type)" v-for="(item, index) in hadoopData.list[hadoopData.index].list" :key="index">
</div>
</div>
<div v-if="step === 'edit'" style="padding: 30px 150px;">
<div style="padding-bottom: 20px;">
<span style="color: rgb(102, 102, 102);">数据源类型：</span>
<span class="source-title">{{ selectData.name }}</span>
</div>
<FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="step = 'select'" @confirm="modalConfirm" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.title {
color: #21333f;
font-size: 16px;
line-height: 20px;
font-weight: 700;
padding: 10px 0 10px 12px;
.data-base-name{
color: #2c9ef7;
font-size: 20px;
font-weight: 400;
}
}
.img-warpper {
background-color: #f3f5fa;
padding: 7.5px;
margin-top: 24px;
margin-bottom: 50px;
margin-left: 12px;
line-height: 1;
.img {
width: 132px;
font-size: 0;
margin: 0 10px 10px 0;
cursor: pointer;
}
}
.hadoop-list-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: distribute;
justify-content: space-around;
background: #f1f3f5;
padding: 10px;
.hadoop-item-box {
padding: 8px;
background: #fff;
cursor: pointer;
position: relative;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
margin-right: 16px;
img {
font-size: 0;
vertical-align: bottom;
width: 132px;
}
.hidden-img {
position: absolute;
left: 8px;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.name {
height: 20px;
line-height: 20px;
text-align: center;
margin-top: 8px;
position: relative;
.bar {
position: absolute;
opacity: 0;
background-color: #1f85df;
height: 2px;
width: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
left: 0;
bottom: -4px;
}
}
}
.hadoop-item-box-active{
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
.hidden-img{
opacity: 1;
}
.name{
.bar{
opacity: 1;
width: 132px;
left: 0;
}
}
}
.hadoop-item-box:hover {
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
.hidden-img {
opacity: 1;
}
}
}
.source-title{
font-size: 18px;
font-weight: 700;
color: #1f85df;
}
</style>
\ No newline at end of file
src/views/assetLibrary/index.vue
<script setup lang="ts" name="AssetLibrary">
import { ref, getCurrentInstance, nextTick, type ComponentInternalInstance } from 'vue'
import list from './list.vue'
import add from './addEdit.vue'
const widget = {
list
list,
add
}
const page = ref('list')
......
src/views/assetLibrary/list.vue
<script setup name="AssetLibrary">
import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
import QueryForm from './QueryForm.vue'
import FormGroup from './modules/formGroup.vue'
const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()
......@@ -22,6 +24,11 @@ const modalData = reactive({
text: ''
})
// 新增
const handleAdd = () => {
emit('page', 'add')
}
// 筛选查询
const onQuery = () => {
console.log('onQuery')
......@@ -49,6 +56,11 @@ const onDelete = () => {
const modalConfirm = () => {
modalData.show = false
}
// 编辑成功回调
const onConfirm = () => {
console.log('编辑成功')
}
</script>
<template>
......@@ -61,7 +73,7 @@ const modalConfirm = () => {
</span>
</template>
<template #buttons>
<el-button type="primary" icon="Plus">新增数据源</el-button>
<el-button type="primary" icon="Plus" @click="handleAdd">新增数据源</el-button>
</template>
</PageTitle>
<div class="app-container__body">
......@@ -94,55 +106,9 @@ const modalConfirm = () => {
</el-card>
</div>
</el-scrollbar>
<div class="mt20 dataList">
<div class="mt20">
<div class="mb20">数据源明细：{{ form.name }}</div>
<el-form ref="formRef" :model="form" label-width="150px">
<el-form-item label="数据源名称" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="IP地址" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="端口号" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="数据库名" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="用户名" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="密码" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="数据库版本" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="字符编码" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="授权用户">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
</el-form>
<FormGroup :id="'1111'" page="edit" @confirm="onConfirm" />
</div>
</div>
<Modal v-model="modalData.show" icon="error" :cancel="true" :text="modalData.text" @confirm="modalConfirm"></Modal>
......@@ -252,16 +218,4 @@ const modalConfirm = () => {
margin-right: 0;
}
}
.dataList {
:deep(.el-form-item__label) {
background: #f0f0f0;
}
:deep(.el-input__wrapper) {
background: rgba(255, 255, 255, 0);
box-shadow: none;
}
:deep(.el-form-item) {
margin-bottom: 5px;
}
}
</style>
\ No newline at end of file
src/views/assetLibrary/modules/formGroup.vue 0 → 100644
<script setup lang="ts" name="FormGroup">
import { el } from "element-plus/es/locale";
import { ref, toRefs, reactive, watch } from "vue";
const emit = defineEmits(['cancel','confirm'])
const props = withDefaults(
defineProps<{
id?: string;
page?: string;
title?: string;
}>(),
{
id: "",
page: ""
}
);
const readOnly = ref(true);
const modalData = reactive({
show: false,
text: "",
});
const data = reactive({
form: {
name: "",
},
rules: {},
});
const { form, rules } = toRefs(data);
watch(
() => props.id,
(newVal) => {
readOnly.value = props.id ? true : false;
},
{ deep: true, immediate: true }
);
// 确定
const onConfirm = () => {
modalData.show = true;
modalData.text = props.page === 'add' ? '新增成功' : '修改成功';
};
// 成功回调
const modalConfirm = () => {
modalData.show = false;
emit('confirm')
if (props.page === 'edit') {
readOnly.value = true
}
};
// 取消
const onCancel = () => {
if (props.page === 'add') {
emit('cancel')
} else {
readOnly.value = true
}
}
// 测试
const test = () => {
console.log('测试')
}
// 检测
const detection = () => {
console.log('检测')
}
</script>
<template>
<div class="dataList">
<el-form ref="formRef" :model="form" label-width="150px" :disabled="readOnly">
<el-form-item label="数据源名称" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="连接类型" v-if="props.title === 'ORACLE'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name" v-if="readOnly"></el-input>
<el-select v-model="form.name" v-if="!readOnly">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="服务名" required v-if="props.title === 'ORACLE'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="IP地址" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="端口号" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="实例名" required v-if="props.title === 'GBASE8S'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="数据库名" required v-if="props.title !== 'ES' && props.title !== 'KAFKA' && props.title !== 'ORACLE' && props.title !== 'HIVE_TDH'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="HIVE 数据库名" required v-if="props.title === 'HIVE_TDH'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="Driver Classpath" v-if="props.title === 'HIVE'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="用户名" required v-if="props.title !== 'KAFKA'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input>
</div>
</el-form-item>
<el-form-item label="密码" required v-if="props.title !== 'KAFKA'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name" show-password></el-input>
</div>
</el-form-item>
<el-form-item label="数据库版本" :required="props.title !== 'KAFKA'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name" v-if="readOnly"></el-input>
<el-select v-model="form.name" v-if="!readOnly">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="字符编码" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;display: flex;">
<el-input v-model="form.name" v-if="readOnly"></el-input>
<el-select v-model="form.name" v-if="!readOnly">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button type="primary" @click="detection" v-if="!readOnly">检测</el-button>
</div>
</el-form-item>
<el-form-item label="授权用户">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name" v-if="readOnly"></el-input>
<el-select v-model="form.name" v-if="!readOnly">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-form-item>
</el-form>
<div class="buttonBox mt20">
<el-button v-if="!readOnly" type="primary" style="width: 150px;" @click="onConfirm">确认</el-button>
<el-button v-if="!readOnly" type="primary" style="width: 150px;" @click="test">测试</el-button>
<el-button v-if="!readOnly" type="info" style="width: 150px;" @click="onCancel">取消</el-button>
<el-button v-if="readOnly" type="primary" style="width: 150px;" @click="readOnly = false">编辑</el-button>
</div>
<Modal v-model="modalData.show" icon="success" :cancel="false" :text="modalData.text" @confirm="modalConfirm">
</Modal>
</div>
</template>
<style lang="scss" scoped>
.buttonBox {
display: flex;
justify-content: center;
}
.dataList {
:deep(.el-form-item__label) {
background: #f0f0f0;
}
:deep(.el-input__wrapper) {
background: rgba(255, 255, 255, 0);
box-shadow: none;
}
:deep(.el-form-item) {
margin-bottom: 5px;
}
:deep(.el-select__wrapper){
background: rgba(255, 255, 255, 0);
box-shadow: none;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论