<template>
|
<div class="SetBox">
|
<div class="title">配置存储路径</div>
|
|
<!-- 创建集群表格 -->
|
<el-form
|
:model="formData"
|
:rules="rules"
|
ref="Form"
|
label-position="left"
|
label-width="150px"
|
>
|
<el-form-item class="h32" prop="enable" label="是否安装数据库">
|
<el-radio-group v-model="formData.enable">
|
<el-radio :label="true">是</el-radio>
|
<el-radio :label="false">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item
|
v-if="formData.enable"
|
class="h32 ip"
|
prop="alarmIp"
|
label="数据库存储位置"
|
>
|
<el-input
|
v-model="formData.alarmIp"
|
placeholder="例：192.168.20.118：9200"
|
class="h32"
|
></el-input>
|
|
<el-input
|
v-model="formData.alarmPort"
|
placeholder="请输入端口"
|
class="h32"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
v-if="formData.enable"
|
class="h32 ip"
|
prop="webPicIp"
|
label="文件存储位置"
|
>
|
<el-input
|
v-model="formData.webPicIp"
|
placeholder="请输入服务器信息"
|
class="h32"
|
></el-input>
|
|
<el-input
|
v-model="formData.webPicPort"
|
placeholder="请输入端口"
|
class="h32"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
v-if="formData.enable"
|
class="h32"
|
prop="esIsAuth"
|
label="数据库验证方式"
|
>
|
<el-radio-group v-model="formData.esIsAuth">
|
<el-radio :label="false">无</el-radio>
|
<el-radio :label="true">账户密码验证</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item
|
v-if="formData.enable && formData.esIsAuth"
|
class="h32"
|
prop="esUsername"
|
label="数据库账号"
|
>
|
<el-input
|
v-model="formData.esUsername"
|
placeholder="请输入数据库账号"
|
class="h32"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
v-if="formData.enable && formData.esIsAuth"
|
class="h32"
|
prop="esPassword"
|
label="数据库密码"
|
>
|
<el-input
|
v-model="formData.esPassword"
|
placeholder="请输入数据库密码"
|
class="h32"
|
type="password"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
|
<!-- 取消与提交 -->
|
<div class="btns">
|
<div class="cancel button" @click="close()">取消</div>
|
<div class="quit button" @click="submit">确定</div>
|
</div>
|
|
<div class="close iconfont" @click="close()"></div>
|
</div>
|
</template>
|
|
<script>
|
import { config, saveEsConfig } from "@/api/search";
|
|
export default {
|
created() {
|
this.getData();
|
},
|
data() {
|
return {
|
formData: {
|
id: "", //取get结果中的id 第一次保存传空
|
alarmIp: "", //es的ip
|
alarmPort: 9200, //es的port
|
webPicIp: "", //weedfs的ip
|
webPicPort: 6333, //weedfs的port
|
enable: false, //启用存储传true,不启用传false
|
esIsAuth: false, //es是否开启用户名密码鉴权
|
esUsername: "", //开启鉴权，es用户名
|
esPassword: "", //es密码
|
},
|
rules: {
|
enable: [
|
{
|
required: true,
|
message: "请选择是否安装数据库",
|
trigger: "blur",
|
},
|
],
|
alarmIp: [
|
{
|
required: true,
|
message: "请输入数据库存储位置",
|
trigger: "blur",
|
},
|
],
|
webPicIp: [
|
{ required: true, message: "请输入文件存储位置", trigger: "blur" },
|
],
|
esIsAuth: [
|
{
|
required: true,
|
message: "请选择数据库验证方式",
|
trigger: "blur",
|
},
|
],
|
esUsername: [
|
{ required: true, message: "请输入数据库账号", trigger: "blur" },
|
],
|
esPassword: [
|
{ required: true, message: "请输入数据库密码", trigger: "blur" },
|
],
|
},
|
};
|
},
|
methods: {
|
close() {
|
this.$emit("close");
|
},
|
async getData() {
|
const res = await config();
|
if (res && res.success) {
|
this.formData = res.data;
|
}
|
},
|
submit() {
|
this.$refs["Form"].validate(async (valid) => {
|
if (valid) {
|
const res = await saveEsConfig(this.formData);
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功",
|
});
|
this.close();
|
}
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.SetBox {
|
position: relative;
|
box-sizing: border-box;
|
padding: 20px;
|
position: fixed;
|
width: 520px;
|
height: 490px;
|
top: 50%;
|
left: 50%;
|
margin-top: -260px;
|
margin-left: -245px;
|
filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
|
z-index: 3000;
|
background-color: #fff;
|
|
.title {
|
margin-bottom: 10px;
|
padding-bottom: 20px;
|
font-size: 18px;
|
font-weight: 700;
|
border-bottom: 1px solid #e9ebee;
|
}
|
|
.el-form-item ::v-deep {
|
margin-bottom: 22px;
|
|
label {
|
color: #666;
|
}
|
|
.el-form-item__error {
|
padding-top: 0;
|
}
|
|
.el-input {
|
.el-input__inner {
|
padding: 0 10px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
}
|
|
.el-form-item.ip ::v-deep {
|
.el-form-item__content {
|
display: flex;
|
|
.el-input {
|
flex: 1;
|
}
|
|
.el-input:first-child {
|
margin-right: 10px;
|
flex: 2;
|
}
|
}
|
}
|
.el-form-item.password ::v-deep {
|
.el-form-item__content {
|
display: flex;
|
justify-content: space-between;
|
|
.el-input {
|
margin-left: -4px;
|
width: 250px;
|
}
|
|
.createPassword {
|
font-size: 14px;
|
color: #0065ff;
|
cursor: pointer;
|
}
|
|
.search {
|
margin-top: 8px;
|
width: 64px;
|
height: 24px;
|
font-size: 12px;
|
line-height: 24px;
|
text-align: center;
|
background-color: #0065ff;
|
color: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.btns {
|
padding: 20px 0;
|
border-top: 1px solid #e9ebee;
|
position: absolute;
|
left: 20px;
|
right: 20px;
|
bottom: 0;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
line-height: 32px;
|
font-size: 14px;
|
|
.cancel {
|
margin-right: 10px;
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
|
.quit {
|
width: 60px;
|
height: 32px;
|
color: #fff;
|
background-color: #0065ff;
|
border: 1px solid #0065ff;
|
}
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 12px;
|
color: #666;
|
cursor: pointer;
|
}
|
}
|
</style>
|
