Skip to content

N
nse-ui
Commit a2ea7f0e by wanglizhen
Options

资产库模块上传

parent d77aa1a5
正在显示 包含 670 行增加 和 120 行删除
src/api/assetLibrary/dict.js 0 → 100644
import { queryCharset } from './index'
// 连接类型
export const oracleisinsData = [
{ key: "服务名", value: "0", label: "服务名" },
{ key: "实例名", value: "1", label: "实例名" },
]
// 字符编码
export const getCode = (key) => {
if (!key) return
const list = JSON.parse(sessionStorage.getItem(key))
return list
}
// 全部字符编码
export const getCueryCharset = async () => {
if (sessionStorage.getItem('mysql')) return
const databaseTypeList = ['mysql', 'oracle', 'postgresql', 'hive', 'hive_tdh', 'mssqlserver', 'db2', 'mariadb', 'informix', 'sybase', 'sybaseiq', 'sybaseiq', 'gbase', 'gbase8s', 'gbase8a', 'kingbase', 'dm', 'oscar', 'uxdb', 'greenplum', 'teradata', 'highgo', 'cache', 'hadoop', 'gauss', 'oceanbase', 'mongodb', 'es', 'KAFKA', 'gaussdb']
for (let i = 0; i < databaseTypeList.length; i++) {
const data = await queryCharset({ dbtype: databaseTypeList[i] })
sessionStorage.setItem(databaseTypeList[i].toLowerCase(), JSON.stringify(data.data))
}
}
\ No newline at end of file
src/api/assetLibrary/index.js 0 → 100644
import request from '@/utils/request'
/**
* 资产库 - 查询用户列表
* @param {*} query
* @returns
*/
export function queryUser(query) {
return request({
url: '/console/user/queryAll',
method: 'get',
params: query
})
}
/**
* 资产库 - 查询列表
* @param {*} query
* @returns
*/
export function queryAll(query) {
return request({
url: '/core/datasystem/queryAll',
method: 'get',
params: query
})
}
/**
* 资产库 - 数据源明细
* @param {*} query
* @returns
*/
export function initEdit(query) {
return request({
url: '/core/datasystem/initEdit',
method: 'get',
params: query
})
}
/**
* 资产库 - 查询数据库版本
* @param {*} query
* @returns
*/
export function queryDatadis(query) {
return request({
url: '/core/datadis/queryAll',
method: 'get',
params: query
})
}
/**
* 资产库 - 数据库版本检测
* @param {*} data
* @returns
*/
export function checkVersion(data) {
return request({
url: '/core/datasystem/checkVersion',
method: 'post',
data: data
})
}
/**
* 资产库 - 测试数据源名称是否重复
* @param {*} data
* @returns
*/
export function checkRepeatName(data) {
return request({
url: '/core/datasystem/checkRepeatName',
method: 'post',
data: data
})
}
/**
* 资产库 - 测试连接
* @param {*} data
* @returns
*/
export function testConnect(data) {
return request({
url: '/core/datasystem/testConnect',
method: 'post',
data: data
})
}
/**
* 资产库 - 新增修改接口
* @param {*} data
* @returns
*/
export function add(data) {
return request({
url: '/core/datasystem/add',
method: 'post',
data: data
})
}
/**
* 资产库 - 关联检测
* @param {*} data
* @returns
*/
export function checkDatasystemUsed(data) {
return request({
url: '/core/datasystem/checkDatasystemUsed',
method: 'post',
data: data
})
}
/**
* 资产库 - 删除数据源
* @param {*} data
* @returns
*/
export function del(data) {
return request({
url: '/core/datasystem/del',
method: 'post',
data: data
})
}
/**
* 资产库 - 查询字符编码
* @param {*} query
* @returns
*/
export function queryCharset(query) {
return request({
url: '/core/datasystem/queryCharset',
method: 'get',
params: query
})
}
\ No newline at end of file
src/layout/components/AppMain.vue
...@@ -45,7 +45,7 @@ const hasTagsView = computed(() => settings.tagsView) ...@@ -45,7 +45,7 @@ const hasTagsView = computed(() => settings.tagsView)
const layout = computed(() => settings.layout) const layout = computed(() => settings.layout)
function onScroll(val) { function onScroll(val) {
appStore.updateScrollTop(val.scrollTop) // appStore.updateScrollTop(val.scrollTop)
} }
</script> </script>
......
src/views/assetLibrary/QueryForm.vue
<script setup lang="ts" name="QueryForm"> <script setup lang="ts" name="QueryForm">
import { ref, computed } from 'vue' import { ref, computed,onMounted } from 'vue'
import type { FormInstance } from 'element-plus' import type { FormInstance } from 'element-plus'
import PageWrapperSearch from '@/components/Search/PageWrapperSearch.vue' import PageWrapperSearch from '@/components/Search/PageWrapperSearch.vue'
import { useDict } from '@/utils/dict' import { useDict } from '@/utils/dict'
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const emit = defineEmits(['update:modelValue', 'query', 'reset']) const emit = defineEmits(['update:modelValue', 'query', 'reset'])
const employeesList = ref([]) const dataTypeList = ref([])
const props = defineProps<{ const props = defineProps<{
modelValue: any modelValue: any
}>() }>()
...@@ -30,6 +32,10 @@ function onReset(formRef: FormInstance) { ...@@ -30,6 +32,10 @@ function onReset(formRef: FormInstance) {
emit('reset', formRef) emit('reset', formRef)
} }
onMounted(() => {
})
</script> </script>
<template> <template>
...@@ -38,14 +44,22 @@ function onReset(formRef: FormInstance) { ...@@ -38,14 +44,22 @@ function onReset(formRef: FormInstance) {
@search="onSearch" @search="onSearch"
@reset="onReset" @reset="onReset"
label-width='100'> label-width='100'>
<el-form-item label="数据源名称" prop="customerName"> <el-form-item label="数据源名称" prop="sysname">
<el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable /> <el-input v-model="queryForm.sysname" placeholder="请输入客户名称" clearable />
</el-form-item> </el-form-item>
<el-form-item label="IP" prop="customerName"> <el-form-item label="IP" prop="ip">
<el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable /> <el-input v-model="queryForm.ip" placeholder="请输入客户名称" clearable />
</el-form-item> </el-form-item>
<el-form-item label="数据源类型" prop="customerName"> <el-form-item label="数据源类型" prop="dbtype">
<el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable /> <el-select v-model="queryForm.dbtype" placeholder="请选择">
<el-option
v-for="item in appStore.DATABASE_TYPE"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
</el-form-item> </el-form-item>
</page-wrapper-search> </page-wrapper-search>
</template> </template>
src/views/assetLibrary/list.vue
<script setup name="AssetLibrary"> <script setup name="AssetLibrary">
import { ref, toRefs, reactive, getCurrentInstance } from 'vue' import { ref, toRefs, reactive, getCurrentInstance, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import QueryForm from './QueryForm.vue' import QueryForm from './QueryForm.vue'
import FormGroup from './modules/formGroup.vue' import FormGroup from './modules/formGroup.vue'
import img from '@/assets/images/assetLibrary/index.js'
import { queryAll, checkDatasystemUsed, del } from '@/api/assetLibrary/index'
import { getCueryCharset } from "@/api/assetLibrary/dict";
const emit = defineEmits(['page']) const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
...@@ -11,7 +16,11 @@ const data = reactive({ ...@@ -11,7 +16,11 @@ const data = reactive({
name: '' name: ''
}, },
queryParams: { queryParams: {
customerName: null sysname: '',
dbtype: '',
ip: '',
userId: '1',
projectId: ''
}, },
rules: { rules: {
} }
...@@ -24,6 +33,18 @@ const modalData = reactive({ ...@@ -24,6 +33,18 @@ const modalData = reactive({
text: '' text: ''
}) })
// 数据源信息
const dataSource = reactive({
current: 0, // 当前索引
currentId: '', // 当前id
currentFlag: '',
list: [], // 数据源列表
del: {
id: '',
sysname: ''
}
})
// 新增 // 新增
const handleAdd = () => { const handleAdd = () => {
emit('page', 'add') emit('page', 'add')
...@@ -32,39 +53,77 @@ const handleAdd = () => { ...@@ -32,39 +53,77 @@ const handleAdd = () => {
// 筛选查询 // 筛选查询
const onQuery = () => { const onQuery = () => {
console.log('onQuery') console.log('onQuery')
// handleQuery() getList()
} }
// 查询组件事件重置 // 查询组件事件重置
const onReset = (formQuery) => { const onReset = (formQuery) => {
console.log('onReset') console.log('onReset')
formQuery.resetFields() formQuery.resetFields()
getList()
} }
// 预览 // 预览
const onPreview = () => { const onPreview = (index) => {
console.log('onPreview') dataSource.current = index
dataSource.currentId = dataSource.list[dataSource.current].id
dataSource.currentFlag = dataSource.list[dataSource.current].flag
} }
// 删除 // 删除
const onDelete = () => { const onDelete = (val) => {
console.log('onPreview') const { id, sysname } = val
checkDatasystemUsed({ id: id }).then(res => {
console.log(res)
const flag = { res }
if (flag) {
dataSource.current = 0
dataSource.del.id = id
dataSource.del.sysname = sysname
modalData.text = `删除后无法恢复，是否确认删除[${sysname}]？`
modalData.show = true modalData.show = true
modalData.text = '删除后无法恢复，是否确认删除[若依配测系统]？' }
})
} }
// 确认删除回调 // 确认删除回调
const modalConfirm = () => { const modalConfirm = () => {
del(dataSource.del).then(res => {
const flag = { res }
if (flag) {
ElMessage.success({
message: '删除成功',
type: 'success',
})
getList()
}
})
modalData.show = false modalData.show = false
} }
// 编辑成功回调 // 编辑成功回调
const onConfirm = () => { const onConfirm = () => {
console.log('编辑成功') // console.log('编辑成功')
getList()
}
// 列表查询
const getList = () => {
queryAll(queryParams.value).then(res => {
// console.log(res)
dataSource.list = res.data
dataSource.currentId = dataSource.list[dataSource.current].id
dataSource.currentFlag = dataSource.list[dataSource.current].flag
})
} }
onMounted(() => {
getCueryCharset()
getList()
})
</script> </script>
<template> <template>
<div class="app-container scroller"> <div class="app-container">
<PageTitle> <PageTitle>
<template #title> <template #title>
资产库 资产库
...@@ -77,21 +136,22 @@ const onConfirm = () => { ...@@ -77,21 +136,22 @@ const onConfirm = () => {
<query-form ref="QueryFormRef" v-model="queryParams" @query="onQuery" @reset="onReset" /> <query-form ref="QueryFormRef" v-model="queryParams" @query="onQuery" @reset="onReset" />
<el-scrollbar> <el-scrollbar>
<div class="flex-content"> <div class="flex-content">
<el-card class="box-card" :body-style="{ padding: '0px !important' }"> <el-card class="box-card" :class="dataSource.current === index ? 'active' : ''"
<img class="img" src="https://172.19.1.166:9005/static/img/MYSQL.535270a.png" alt=""> :body-style="{ padding: '0px !important' }" v-for="(item, index) in dataSource.list" :key="index">
<img class="img" :src="img[item.dbtype]" alt="">
<div class="title"> <div class="title">
<div class="title-content">若依配测系统</div> <div class="title-content">{{ item.sysname }}</div>
</div> </div>
<div class="mask"> <div class="mask">
<div class="maskbutton"> <div class="maskbutton">
<div class="maskbutton-item" @click="onDelete"> <div class="maskbutton-item" @click="onDelete(item)">
<el-icon :size="18"> <el-icon :size="18">
<delete /> <delete />
</el-icon> </el-icon>
<br> <br>
<span>删除</span> <span>删除</span>
</div> </div>
<div class="maskbutton-item" @click="onPreview"> <div class="maskbutton-item" @click="onPreview(index)" v-if="dataSource.current !== index">
<el-icon :size="18"> <el-icon :size="18">
<View /> <View />
</el-icon> </el-icon>
...@@ -103,9 +163,9 @@ const onConfirm = () => { ...@@ -103,9 +163,9 @@ const onConfirm = () => {
</el-card> </el-card>
</div> </div>
</el-scrollbar> </el-scrollbar>
<div class="mt20"> <div class="mt20" v-if="dataSource.list.length > 0" style="padding-bottom: 20px;">
<div class="mb20">数据源明细：{{ form.name }}</div> <div class="mb20">数据源明细：{{ form.name }}</div>
<FormGroup :id="'1111'" page="edit" @confirm="onConfirm" /> <FormGroup :id="dataSource.currentId" :flag="dataSource.currentFlag" page="edit" @confirm="onConfirm" />
</div> </div>
</div> </div>
<Modal v-model="modalData.show" icon="error" :cancel="true" :text="modalData.text" @confirm="modalConfirm"></Modal> <Modal v-model="modalData.show" icon="error" :cancel="true" :text="modalData.text" @confirm="modalConfirm"></Modal>
...@@ -115,7 +175,7 @@ const onConfirm = () => { ...@@ -115,7 +175,7 @@ const onConfirm = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.flex-content { .flex-content {
display: flex; display: flex;
height: 190px; height: 205px;
.box-card { .box-card {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
...@@ -193,6 +253,12 @@ const onConfirm = () => { ...@@ -193,6 +253,12 @@ const onConfirm = () => {
} }
} }
} }
.active {
.title {
background: #2c9ef7;
color: #fff;
}
}
.box-card:hover { .box-card:hover {
width: 250px; width: 250px;
height: 190px; height: 190px;
......
src/views/assetLibrary/modules/formGroup.vue
<script setup lang="ts" name="FormGroup"> <script setup lang="ts" name="FormGroup">
import { el } from "element-plus/es/locale"; import { el } from "element-plus/es/locale";
import { ref, toRefs, reactive, watch } from "vue"; import { ref, toRefs, reactive, watch, onMounted } from "vue";
const emit = defineEmits(['cancel','confirm']) import type { FormInstance } from "element-plus";
import {
queryUser,
initEdit,
queryDatadis,
checkVersion,
checkRepeatName,
testConnect,
add,
} from "@/api/assetLibrary/index";
import { oracleisinsData, getCode } from "@/api/assetLibrary/dict";
import useAppStore from '@/store/modules/app'
const emit = defineEmits(["cancel", "confirm"]);
const appStore = useAppStore()
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
id?: string; id?: string;
flag?: string;
page?: string; page?: string;
title?: string; title?: string;
}>(), }>(),
{ {
id: "", id: "",
page: "" page: "",
} }
); );
const formRef = ref<FormInstance>();
const titleName = ref(props.title);
const pagecodeList = ref([]);
const datadisList = ref([]);
const userList = ref([]);
const readOnly = ref(true); const readOnly = ref(true);
const modalData = reactive({ const modalData = reactive({
show: false, show: false,
text: "", text: "",
icon: "",
type: "",
}); });
const data = reactive({ const data = reactive({
form: { form: <any>{
name: "", },
rules: {
sysname: [
{
required: true,
message: "请输入数据源名称",
trigger: ["blur"],
},
],
dbservername: [
{
required: true,
message: titleName.value === "ORACLE" ? "请输入服务名" : "请输入库名",
trigger: ["blur"],
},
],
dbip: [
{ required: true, message: "请输入IP地址", trigger: ["blur"] },
],
dbport: [
{ required: true, message: "请输入端口号", trigger: ["blur"] },
],
servername: [
{ required: true, message: "请输入实例名", trigger: ["blur"] },
],
username: [
{ required: true, message: "请输入用户名", trigger: ["blur"] },
],
password: [
{ required: true, message: "请输入密码", trigger: ["blur"] },
],
version: [
{
required: true,
message: "请选择数据库版本",
trigger: ["change"],
},
],
pagecode: [
{
required: true,
message: "请选择字符编码",
trigger: ["change"],
},
],
}, },
rules: {},
}); });
const { form, rules } = toRefs(data); const { form, rules } = toRefs(data);
watch( // 新增
() => props.id, const onAdd = () => {
(newVal) => { const formData = {
readOnly.value = props.id ? true : false; flag: 1,
}, user: form.value.user ? form.value.user : []
{ deep: true, immediate: true } }
); form.value = {...form.value,...formData}
if (props.page === "edit") {
form.value = {...form.value, ...{id: form.value.id}}
} else if (props.page === "add") {
const username = appStore.userInfo.user.username
const loginUser = { tsysUser: { username: username }, username: username }
form.value = {...form.value, ...{loginUser: loginUser,dbtype: titleName.value}}
}
console.log('add', form.value)
add(form.value).then((res) => {
const flag = res.flag;
if (flag) {
modalData.icon = "success";
modalData.text = props.page === "add" ? "新增成功" : "修改成功";
modalData.show = true;
}
});
};
// 确定 // 确定
const onConfirm = () => { const onConfirm = () => {
modalData.show = true; formRef.value?.validate((valid) => {
modalData.text = props.page === 'add' ? '新增成功' : '修改成功'; if (valid) {
getCheckRepeatName();
} else {
}
});
}; };
// 成功回调 // 成功回调
const modalConfirm = () => { const modalConfirm = () => {
if (modalData.type !== "test") {
emit("confirm");
if (props.page === "edit") {
getInitEdit();
readOnly.value = true;
}
}
modalData.type = "";
modalData.show = false; modalData.show = false;
emit('confirm') };
if (props.page === 'edit') {
readOnly.value = true // 关闭回调
const modalCancel = () => {
if (modalData.icon === "success") {
emit("confirm");
if (props.page === "edit") {
getInitEdit();
readOnly.value = true;
}
} }
}; };
// 取消 // 取消
const onCancel = () => { const onCancel = () => {
if (props.page === 'add') { if (modalData.type !== "test") {
emit('cancel') if (props.page === "add") {
emit("cancel");
} else { } else {
readOnly.value = true getInitEdit();
readOnly.value = true;
} }
} }
modalData.type = "";
modalData.show = false;
};
// 测试 // 测试
const test = () => { const test = () => {
console.log('测试') // console.log('测试')
} formRef.value?.validate((valid) => {
if (valid) {
getCheckRepeatName("test");
} else {
}
});
};
// 测试数据源名称
const getCheckRepeatName = (type: string = "") => {
const data = {
datasystemid: form.value.id,
sysname: form.value.sysname,
};
checkRepeatName(data)
.then((res) => {
console.log(res);
if (res.data) {
if (type === "test") {
getTestConnect();
} else {
onAdd();
}
}
})
.catch((err) => {
// modalData.type = "test";
// modalData.icon = 'error'
// modalData.show = true;
});
};
// 测试连接
const getTestConnect = () => {
testConnect(form.value).then((res) => {
if (res.flag) {
modalData.type = "test";
modalData.icon = "success";
modalData.text = "恭喜您，测试通过！";
modalData.show = true;
} else {
modalData.type = "test";
modalData.icon = "error";
modalData.text = res.msg;
modalData.show = true;
}
});
};
// 检测 // 检测
const detection = () => { const detection = () => {
console.log('检测') // console.log('检测')
} checkVersion(form.value).then((res) => {
const { flag, data, msg } = res
if (flag) {
form.value.version = data;
} else {
modalData.type = "test";
modalData.icon = "error";
modalData.text = msg;
modalData.show = true;
}
});
};
// 明细查询
const getInitEdit = () => {
if (!props.id) return;
const data = {
id: props.id,
flag: props.flag,
};
initEdit(data).then((res) => {
// console.log(res)
form.value = res.data;
titleName.value = form.value.dbtype
getQueryDatadis();
pagecodeList.value = getCode(titleName.value.toLowerCase());
});
};
// 查询数据库版本
const getQueryDatadis = () => {
const data = {
dbtype: titleName.value,
};
queryDatadis(data).then((res) => {
console.log(res);
datadisList.value = res.data;
});
};
// 查询用户列表
const getQueryUser = () => {
queryUser({}).then((res) => {
userList.value = res.data;
});
};
// 连接类型监听
const oracleisinsChange = () => {
if (form.value.oracleisins === "0") {
form.value.dbservername = "";
form.value.dbip = "";
form.value.dbport = "";
if (props.page === "add") {
form.value.oracleIns = [];
}
} else if (form.value.oracleisins === "1") {
form.value.oracleIns =
(form.value.oracleIns && form.value.oracleIns.length > 0)
? form.value.oracleIns
: [{ insip: "", insname: "", insport: "" }];
form.value.dbservername = "";
form.value.dbip = "";
form.value.dbport = "";
}
};
// 新增实例
const oracleisinsAdd = () => {
form.value.oracleIns.push({ insip: "", insname: "", insport: "" });
};
// 删除实例
const oracleisinsDelete = () => {
form.value.oracleIns = form.value.oracleIns.slice(0, -1);
};
watch(
() => props.id,
(newVal) => {
readOnly.value = props.id ? true : false;
getInitEdit();
},
{ deep: true, immediate: true }
);
onMounted(() => {
if (props.page === "add") {
titleName.value = props.title;
getQueryDatadis();
pagecodeList.value = getCode(titleName.value.toLowerCase());
}
getQueryUser();
});
</script> </script>
<template> <template>
<div class="dataList"> <div class="dataList">
<el-form ref="formRef" :model="form" label-width="150px" :disabled="readOnly"> <el-form ref="formRef" class="form" :model="form" :rules="rules" label-width="150px" :disabled="readOnly">
<el-form-item label="数据源名称" required> <el-form-item label="数据源名称" prop="sysname" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.sysname"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="连接类型" v-if="props.title === 'ORACLE'"> <el-form-item label="连接类型" prop="oracleisins" v-if="titleName === 'ORACLE'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <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.oracleisins" @change="oracleisinsChange">
<el-select v-model="form.name" v-if="!readOnly"> <el-option v-for="item in oracleisinsData" :key="item.value" :label="item.label" :value="item.value">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="服务名" required v-if="props.title === 'ORACLE'"> <el-form-item label="服务名" prop="dbservername" required
v-if="titleName === 'ORACLE' && form.oracleisins !== '1'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.dbservername"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="IP地址" required> <el-form-item label="IP地址" prop="dbip" required v-if="form.oracleisins !== '1'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.dbip"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="端口号" required> <el-form-item label="端口号" prop="dbport" required v-if="form.oracleisins !== '1'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.dbport"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="实例名" required v-if="props.title === 'GBASE8S'"> <el-form-item label="实例名" prop="servername" required v-if="titleName === 'GBASE8S'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.servername"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="数据库名" required v-if="props.title !== 'ES' && props.title !== 'KAFKA' && props.title !== 'ORACLE' && props.title !== 'HIVE_TDH'"> <el-form-item label="数据库名" prop="dbservername" required
v-if="titleName !== 'ES' && titleName !== 'KAFKA' && titleName !== 'ORACLE' && titleName !== 'HIVE_TDH'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.dbservername"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="HIVE 数据库名" required v-if="props.title === 'HIVE_TDH'"> <el-form-item label="HIVE 数据库名" prop="dbservername" required v-if="titleName === 'HIVE_TDH'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.dbservername"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="Driver Classpath" v-if="props.title === 'HIVE'"> <el-form-item label="Driver Classpath" prop="Classpath" v-if="titleName === 'HIVE'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.Classpath"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="用户名" required v-if="props.title !== 'KAFKA'"> <el-form-item label="用户名" prop="username" required v-if="titleName !== 'KAFKA'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name"></el-input> <el-input v-model="form.username"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="密码" required v-if="props.title !== 'KAFKA'"> <el-form-item label="密码" prop="password" required v-if="titleName !== 'KAFKA'">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name" show-password></el-input> <el-input v-model="form.password" show-password></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="数据库版本" :required="props.title !== 'KAFKA'"> <el-form-item label="数据库版本" prop="version" :required="titleName !== 'KAFKA'" >
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;display: flex;">
<el-input v-model="form.name" v-if="readOnly"></el-input> <el-input v-model="form.version" v-if="readOnly"></el-input>
<el-select v-model="form.name" v-if="!readOnly"> <el-select v-model="form.version" v-if="!readOnly">
<el-option <el-option v-for="item in datadisList" :key="item.dictvalue" :label="item.dictvalue"
v-for="item in options" :value="item.dictvalue">
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
<el-button type="primary" @click="detection" v-if="!readOnly">检测</el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="字符编码" required> <el-form-item label="字符编码" prop="pagecode" required>
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;display: flex;"> <div style="width: 100%;background: #F3F5FA;margin-left: 4px;">
<el-input v-model="form.name" v-if="readOnly"></el-input> <el-input v-model="form.pagecode" v-if="readOnly"></el-input>
<el-select v-model="form.name" v-if="!readOnly"> <el-select v-model="form.pagecode" v-if="!readOnly">
<el-option <el-option v-for="item in pagecodeList" :key="item" :label="item" :value="item">
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
<el-button type="primary" @click="detection" v-if="!readOnly">检测</el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="授权用户"> <el-form-item label="授权用户" prop="user">
<div style="width: 100%;background: #F3F5FA;margin-left: 4px;"> <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.user" multiple>
<el-select v-model="form.name" v-if="!readOnly"> <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</el-form-item> </el-form-item>
<div class="oracleisinsBox" v-if="form.oracleisins === '1'">
<div class="title">请新增oracle实例</div>
<div class="top">
<span>oracle实例</span>
<div class="oracleInsBut">
<el-button type="info" link icon="Plus" @click="oracleisinsAdd">新增</el-button>
<el-button type="info" link icon="Minus" @click="oracleisinsDelete">删除</el-button>
</div>
</div>
<el-table :data="form.oracleIns" border style="width: 100%">
<el-table-column prop="insname" label="实例名" align="center">
<template #default="scope">
<el-form-item label="" label-width="0" :prop="`oracleIns.${scope.$index}.insname`"
:rules="[{ required: true, message: '请输入实例名', trigger:'blur' }]">
<el-input v-model="scope.row.insname"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="insip" label="IP地址" align="center">
<template #default="scope">
<el-form-item label="" label-width="0" :prop="`oracleIns.${scope.$index}.insip`"
:rules="[{ required: true, message: '请输入IP地址', trigger:'blur' }]">
<el-input v-model="scope.row.insip"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="insport" label="端口号" align="center">
<template #default="scope">
<el-form-item label="" label-width="0" :prop="`oracleIns.${scope.$index}.insport`"
:rules="[{ required: true, message: '请输入端口号', trigger:'blur' }]">
<el-input v-model="scope.row.insport"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</div>
</el-form> </el-form>
<div class="buttonBox mt20"> <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="onConfirm">确认</el-button>
...@@ -190,7 +453,8 @@ const detection = () => { ...@@ -190,7 +453,8 @@ const detection = () => {
<el-button v-if="!readOnly" type="info" style="width: 150px;" @click="onCancel">取消</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> <el-button v-if="readOnly" type="primary" style="width: 150px;" @click="readOnly = false">编辑</el-button>
</div> </div>
<Modal v-model="modalData.show" icon="success" :cancel="false" :text="modalData.text" @confirm="modalConfirm"> <Modal v-model="modalData.show" :icon="modalData.icon" :cancel="false" :text="modalData.text"
@confirm="modalConfirm" @cancel="modalCancel">
</Modal> </Modal>
</div> </div>
</template> </template>
...@@ -200,20 +464,56 @@ const detection = () => { ...@@ -200,20 +464,56 @@ const detection = () => {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.dataList { .form {
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
background: #f0f0f0; background: #f0f0f0;
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
background: rgba(255, 255, 255, 0); // background: rgba(255, 255, 255, 0);
box-shadow: none; // box-shadow: none;
} }
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 5px; margin-bottom: 5px;
} }
:deep(.el-select__wrapper){ :deep(.el-select__wrapper) {
background: rgba(255, 255, 255, 0); // background: rgba(255, 255, 255, 0);
box-shadow: none; // box-shadow: none;
}
:deep(.el-form-item__error) {
left: auto;
right: 83px;
top: 24%;
}
}
.oracleisinsBox {
.title {
height: 30px;
line-height: 30px;
font-weight: 700;
color: rgb(81, 90, 110);
}
.top {
position: relative;
text-align: center;
height: 40px;
line-height: 40px;
font-weight: 700;
position: relative;
margin-bottom: 5px;
background: rgb(210, 210, 210);
.oracleInsBut {
position: absolute;
top: 0;
right: 20px;
height: 100%;
:deep(.is-link) {
color: rgb(81, 90, 110);
font-weight: bold;
}
}
}
:deep(.el-form-item__error){
right: 10px;
} }
} }
</style> </style>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论