<template>
|
<div class="add-base-c">
|
<div class="header">
|
<span>底库信息</span>
|
<i class="iconfont iconcha" @click="onCancle"></i>
|
</div>
|
<el-form
|
ref="baseForm"
|
:model="form"
|
:rules="rules"
|
label-width="150px"
|
class="add-base-form"
|
label-position="left"
|
>
|
<el-row>
|
<el-col :span="10" :offset="1">
|
<el-form-item
|
label="名称"
|
label-width="80px"
|
style="width: 100%"
|
required
|
prop="tableName"
|
>
|
<el-input
|
size="small"
|
v-model="form.tableName"
|
placeholder="请输入"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="9" :offset="1">
|
<el-form-item label="对接数据库" label-width="90px" :span="11">
|
<el-select
|
size="small"
|
v-model="form.cameraBrand"
|
disabled
|
placeholder="请选择对接数据库"
|
style="width: 100%"
|
>
|
<el-option label="人员库" value="person"></el-option>
|
<el-option label="在逃库" value="zaitao"></el-option>
|
<el-option label="吸毒库" value="xidu"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10" :offset="1" class="start-time-pick">
|
<el-form-item
|
label="有效时间"
|
label-width="80px"
|
style="width: 100%"
|
required
|
prop="startTime"
|
>
|
<el-col :span="11" class>
|
<el-date-picker
|
size="small"
|
popper-class="popper-add"
|
type="datetime"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
v-model="form.startTime"
|
:picker-options="pickerOptions"
|
style="width: 100%"
|
></el-date-picker>
|
</el-col>
|
<el-col :span="2" class="text-center pick-time">
|
<span>-</span>
|
</el-col>
|
<el-col :span="11">
|
<el-date-picker
|
size="small"
|
class="end-time-pick"
|
popper-class="popper-add"
|
type="datetime"
|
:placeholder="foreverChecked ? '永久有效' : '选择日期'"
|
:disabled="foreverChecked"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
v-model="form.endTime"
|
:picker-options="pickerOptions"
|
style="width: 100%; text-align: center"
|
></el-date-picker>
|
</el-col>
|
<el-checkbox
|
v-model="foreverChecked"
|
@change="forever"
|
class="check-css"
|
>永久有效</el-checkbox
|
>
|
</el-form-item>
|
</el-col>
|
<el-col :span="9" :offset="1">
|
<el-form-item label="库地址" label-width="90px" :span="11">
|
<el-input size="small" disabled placeholder="请输入"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10" :offset="1">
|
<el-form-item
|
label="黑白名单"
|
label-width="80px"
|
style="width: 100%; text-align: left"
|
required
|
prop="bwType"
|
>
|
<el-radio-group
|
v-model="form.bwType"
|
fill="#4e94ff"
|
text-color="#4e94ff"
|
>
|
<el-radio :label="`1`">黑名单</el-radio>
|
<el-radio :label="`0`">白名单</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="9" :offset="1">
|
<el-form-item label="用户名" label-width="90px" :span="11">
|
<el-input
|
size="small"
|
v-model="form.userName"
|
disabled
|
placeholder="默认值"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10" :offset="1" class="flex-box">
|
<el-form-item
|
label="类型"
|
label-width="80px"
|
style="width: 100%"
|
required
|
prop="tableType"
|
>
|
<el-select
|
size="small"
|
v-model="form.tableType"
|
:popper-append-to-body="false"
|
placeholder="请选择"
|
style="width: 100%"
|
>
|
<el-option label="人员库" value="person"></el-option>
|
<el-option label="车辆" value="car"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="9" :offset="1">
|
<el-form-item label="密码" label-width="90px" :span="11">
|
<el-input
|
size="small"
|
v-model="form.pwd"
|
disabled
|
placeholder="默认值"
|
></el-input>
|
<input v-model="form.id" type="hidden" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row class="footer">
|
<el-button
|
type="info"
|
size="small"
|
@click="onCancle"
|
style="color: #222"
|
>取消</el-button
|
>
|
<el-button
|
type="primary"
|
size="small"
|
@click="onSubmit('baseForm')"
|
class="save"
|
>保存</el-button
|
>
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
import { addBase, updateBase } from "@/api/baseLibrary";
|
export default {
|
name: "addBase",
|
data() {
|
const validatePass = (rule, value, callback) => {
|
if (this.form.startTime && this.form.startTime !== "") {
|
if (this.dateCompare(this.form.startTime, value) !== 1) {
|
callback(new Error("结束时间不能大于开始时间！"));
|
} else {
|
callback();
|
}
|
}
|
};
|
return {
|
foreverChecked: false,
|
form: {
|
analyServerId: "",
|
tableName: "",
|
startTime: new Date(),
|
tableType: "",
|
isForever: "0",
|
id: "",
|
endTime: "",
|
bwType: "1",
|
enable: 0, // 1生效，0未生效
|
isSync: "1", // 1为同步，0为本地
|
tableDesc: "", // 底库描述
|
},
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
|
},
|
},
|
rules: {
|
tableName: [{ required: true, message: "底库名称不能为空"}],
|
tableType: [{ required: true, message: "底库类型不能为空" }],
|
bwType: [{ required: true, message: "黑白名单必选"}],
|
startTime: [
|
{ required: !this.foreverChecked, message: "请选择起始时间" },
|
],
|
endTime: [{ validator: validatePass, trigger: "change" }],
|
},
|
};
|
},
|
mounted() {
|
this.init();
|
},
|
watch: {
|
baseObject: function (newVal, oldVal) {
|
this.foreverChecked = false;
|
this.form = newVal;
|
if (
|
!newVal.endTime ||
|
newVal.endTime === undefined ||
|
newVal.endTime === null
|
) {
|
this.form.isForever = "1";
|
this.foreverChecked = true;
|
} else {
|
this.form.isForever = "0";
|
this.foreverChecked = false;
|
}
|
},
|
"form.endTime": function (newVal, oldVal) {
|
if (!newVal || newVal === null || newVal === undefined) {
|
this.form.isForever = "1";
|
this.foreverChecked = true;
|
} else {
|
this.form.isForever = "0";
|
this.foreverChecked = false;
|
if (this.form.startTime && this.form.startTime !== "") {
|
if (
|
this.dateCompare(
|
this.$moment(this.form.startTime).format("YYYY-MM-DD"),
|
this.$moment(newVal).format("YYYY-MM-DD")
|
) !== 1
|
) {
|
this.$toast({
|
type: "warning",
|
message: "结束时间不能小于开始时间！",
|
});
|
this.form.endTime = "";
|
}
|
}
|
}
|
},
|
"form.startTime": function (newVal, oldVal) {
|
if (newVal) {
|
if (this.form.endTime && this.form.endTime !== "") {
|
if (
|
this.dateCompare(
|
this.$moment(this.form.endTime).format("YYYY-MM-DD"),
|
this.$moment(newVal).format("YYYY-MM-DD")
|
) === 1
|
) {
|
this.$toast({
|
type: "warning",
|
message: "结束时间不能小于开始时间！",
|
});
|
this.form.endTime = "";
|
}
|
}
|
}
|
},
|
},
|
methods: {
|
onSubmit(formName) {
|
if (this.form.id) {
|
// id不为空，修改底库
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
let res = await updateBase({
|
analyServerId: this.form.analyServerId,
|
tableName: this.form.tableName,
|
startTime: this.$moment(this.form.startTime).format(
|
"YYYY-MM-DD HH:mm:ss"
|
),
|
tableType: this.form.tableType,
|
isForever: this.foreverChecked ? "1" : "0",
|
id: this.form.id,
|
endTime: this.form.endTime
|
? this.$moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss")
|
: "",
|
bwType: this.form.bwType,
|
enable: this.form.enable,
|
tableDesc: this.form.tableDesc,
|
});
|
if (res.success === true) {
|
this.$notify({
|
title: "成功",
|
message: "底库信息保存成功！",
|
type: "success",
|
});
|
this.$emit("refresh");
|
this.$emit("closeAdd");
|
} else {
|
this.$notify({
|
title: "失败",
|
message: "底库信息保存失败！",
|
type: "error",
|
});
|
}
|
}
|
});
|
} else {
|
// id为空，新增底库
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
addBase({
|
tableName: this.form.tableName,
|
startTime: this.$moment(this.form.startTime).format(
|
"YYYY-MM-DD 00:00:00"
|
),
|
tableType: this.form.tableType,
|
isForever: this.foreverChecked ? "1" : "0",
|
id: this.form.id,
|
endTime: this.form.endTime
|
? this.$moment(this.form.endTime).format("YYYY-MM-DD 23:59:59")
|
: "",
|
bwType: this.form.bwType,
|
enabled: this.form.enabled,
|
tableDesc: this.form.tableDesc,
|
analyServerId: this.type,
|
})
|
.then((res) => {
|
this.$notify({
|
title: "成功",
|
message: "底库信息保存成功！",
|
type: "success",
|
});
|
this.$emit("refresh");
|
this.$emit("closeAdd");
|
})
|
.catch((err) => {
|
this.$notify({
|
title: "失败",
|
message: err.data,
|
type: "error",
|
});
|
});
|
}
|
});
|
}
|
},
|
onCancle() {
|
this.$emit("closeAdd");
|
},
|
forever(value) {
|
if (value) {
|
this.form.endTime = "";
|
}
|
},
|
init() {
|
if (Object.keys(this.baseObject).length > 3) {
|
this.form = this.baseObject;
|
this.foreverChecked = !this.form.endTime
|
} else {
|
this.$refs.baseForm.resetFields();
|
}
|
},
|
dateParse(dateString) {
|
var SEPARATOR_BAR = "-";
|
var SEPARATOR_SLASH = "/";
|
var SEPARATOR_DOT = ".";
|
var dateArray;
|
if (dateString.indexOf(SEPARATOR_BAR) > -1) {
|
dateArray = dateString.split(SEPARATOR_BAR);
|
} else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
|
dateArray = dateString.split(SEPARATOR_SLASH);
|
} else {
|
dateArray = dateString.split(SEPARATOR_DOT);
|
}
|
return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
|
},
|
isEmpty(str) {
|
return !str || str === undefined || str === null
|
},
|
dateCompare(dateString, compareDateString) {
|
// dateString:当前时间
|
// compareDateString:需要比较的时间
|
if (this.isEmpty(dateString)) {
|
return;
|
}
|
if (this.isEmpty(compareDateString)) {
|
return 1;
|
}
|
var dateTime = this.dateParse(dateString).getTime();
|
var compareDateTime = this.dateParse(compareDateString).getTime();
|
if (compareDateTime > dateTime) {
|
return 1;
|
} else if (compareDateTime === dateTime) {
|
return 0;
|
} else {
|
return -1;
|
}
|
},
|
},
|
props: {
|
baseObject: {
|
default: () => {},
|
type: Object,
|
},
|
type: {
|
default: "sync",
|
type: String,
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.el-date-picker.el-popper.popper-add {
|
border-radius: 8px;
|
.el-input--small .el-input__inner {
|
border: 1px solid #d4d5d8;
|
border-radius: 16px;
|
}
|
.el-date-range-picker__time-header {
|
border-bottom: none;
|
}
|
.el-picker-panel__footer {
|
border-top: none;
|
text-align: center;
|
padding-bottom: 10px;
|
border-radius: inherit;
|
}
|
.el-date-range-picker .el-picker-panel__content {
|
margin: 0;
|
padding: 5px 15px;
|
}
|
.el-date-picker__time-header {
|
border-bottom: none;
|
}
|
.el-date-picker__header {
|
margin-bottom: 0;
|
}
|
.el-picker-panel__content {
|
margin-top: 0;
|
}
|
.el-button--text {
|
color: #999999;
|
background: #fff;
|
padding: 9px 37px;
|
font-size: 14px;
|
border: 1px solid #999999;
|
border-radius: 18px;
|
}
|
.el-date-table td.start-date span,
|
.el-date-table td.end-date span {
|
background-color: var(--colorCard);
|
}
|
.el-date-table td.in-range div {
|
background-color: var(--colorCard) 17;
|
}
|
.el-button--default {
|
background: var(--colorCard);
|
padding: 9px 37px;
|
color: #fff;
|
border: 1px solidvar(--colorCard);
|
border-radius: 18px;
|
font-size: 14px;
|
}
|
}
|
.add-base-c {
|
background: #ffffff;
|
border-radius: 24px;
|
height: 100%;
|
.header {
|
height: 52px;
|
box-shadow: 0px 2px 4px rgb(0 0 0 / 8%);
|
text-align: center;
|
line-height: 52px;
|
position: relative;
|
background: #fff;
|
border-radius: 24px 24px 0 0;
|
span {
|
font-size: 14px;
|
line-height: 20px;
|
color: #5f5f5f;
|
}
|
i {
|
color: #999999;
|
position: absolute;
|
right: 20px;
|
cursor: pointer;
|
font-size: 14px;
|
}
|
}
|
.add-base-form {
|
padding: 30px 20px;
|
|
.el-form-item__label {
|
color: #999999;
|
}
|
.footer {
|
margin-top: 40px;
|
.el-button--info {
|
color: #999999;
|
background: #fff;
|
padding: 9px 37px;
|
font-size: 14px;
|
border: 1px solid #999999;
|
border-radius: 18px;
|
width: 150px;
|
}
|
.el-button--primary {
|
background: var(--colorCard) !important;
|
padding: 9px 37px;
|
color: #fff;
|
border: 1px solid var(--colorCard) !important;
|
border-radius: 18px;
|
font-size: 14px;
|
width: 150px;
|
}
|
}
|
.el-radio__input.is-checked .el-radio__inner {
|
border-color: var(--colorCard);
|
background: var(--colorCard);
|
}
|
.el-radio__input.is-checked + .el-radio__label {
|
color: var(--colorCard);
|
}
|
.el-select .el-input.is-focus .el-input__inner {
|
border-color: var(--colorCard);
|
}
|
.end-time-pick.is-disabled .el-input__inner {
|
background-color: #fff;
|
cursor: not-allowed;
|
}
|
.el-form-item__content {
|
line-height: 32px;
|
}
|
.el-form-item__label {
|
line-height: 32px;
|
}
|
.el-form-item {
|
margin-bottom: 0;
|
height: 65px;
|
}
|
.end-time-pick.is-disabled .el-input__inner::placeholder {
|
color: #606266;
|
}
|
.el-select-dropdown__item.selected {
|
color: var(--colorCard);
|
}
|
.el-select-dropdown__item {
|
border-radius: 8px;
|
}
|
.el-select-dropdown__item.selected.hover {
|
color: #fff;
|
}
|
.el-select-dropdown__item:hover,
|
.el-select-dropdown__item.selected:hover {
|
background-color: var(--colorCard);
|
color: #fff;
|
}
|
.el-select-dropdown {
|
border-radius: 8px;
|
box-shadow: 0px 0px 8px rgb(0 0 0 / 16%);
|
left: 0px !important;
|
}
|
.el-popper[x-placement^="bottom"] .popper__arrow {
|
top: -7px;
|
}
|
.el-select-dropdown__list {
|
padding: 0;
|
}
|
.el-input--small .el-input__inner {
|
height: 32px;
|
line-height: 32px;
|
border: 1px solid #d3d5d8;
|
border-radius: 16px;
|
}
|
.el-col-9 {
|
width: 46%;
|
margin-left: 5%;
|
}
|
.el-col-10 {
|
width: 46%;
|
margin-left: 2%;
|
}
|
.el-form-item__error {
|
color: #fe6d68;
|
padding-top: 5px;
|
left: 15px;
|
}
|
.start-time-pick {
|
.el-form-item__error {
|
top: 34px;
|
left: 105px;
|
}
|
}
|
}
|
}
|
|
.el-radio__inner {
|
border: 1px solid #dcdfe6;
|
border-radius: 100%;
|
width: 14px;
|
height: 14px;
|
background-color: #fff;
|
cursor: pointer;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
}
|
.save {
|
background: var(--colorCard);
|
border-radius: 2px;
|
outline: none;
|
}
|
.check-css {
|
position: relative;
|
height: 20px;
|
left: -187px;
|
top: -4px;
|
line-height: 20px;
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
color: var(--colorCard);
|
}
|
.el-checkbox__inner {
|
display: inline-block;
|
position: relative;
|
border: 1px solid #dcdfe6;
|
// border-radius: 10px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
width: 14px;
|
height: 14px;
|
background-color: #fff;
|
z-index: 1;
|
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
|
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
|
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
}
|
.el-checkbox__input.is-checked .el-checkbox__inner,
|
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
background-color: var(--colorCard);
|
border-color: var(--colorCard);
|
}
|
}
|
|
.pick-time {
|
.el-input__inner {
|
-webkit-appearance: none;
|
background-color: #fff;
|
background-image: none;
|
border-radius: 4px;
|
border: 1px solid #dcdfe6;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
color: #606266;
|
display: inline-block;
|
font-size: inherit;
|
height: 40px;
|
line-height: 40px;
|
outline: none;
|
padding: 0 0 0 15px;
|
-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 100%;
|
}
|
.el-input--prefix .el-input__inner {
|
padding-left: 22px;
|
}
|
.el-input--suffix .el-input__inner {
|
padding-right: 0;
|
}
|
.el-input__prefix {
|
position: absolute;
|
height: 100%;
|
left: 0px;
|
top: 0;
|
text-align: center;
|
color: #c0c4cc;
|
-webkit-transition: all 0.3s;
|
transition: all 0.3s;
|
}
|
.el-input__suffix {
|
position: absolute;
|
height: 100%;
|
right: -2px;
|
top: 0;
|
text-align: center;
|
color: #c0c4cc;
|
-webkit-transition: all 0.3s;
|
transition: all 0.3s;
|
pointer-events: none;
|
}
|
.el-button--info {
|
color: #222222 !important;
|
}
|
}
|
</style>
|
