修复初始化页面

zhangzengfei

2022-06-08 182aed85616f7ac60d0ffb02e4feac5661b80e0c

 src/pages/library/components/addBase.vue

@@ -1,5 +1,9 @@
<template>
  <div>
  <div class="add-base-c">
    <div class="header">
      <span>底库信息</span>
      <i class="iconfont iconcha" @click="onCancle"></i>
    </div>
    <el-form
      ref="baseForm"
      :model="form"
@@ -10,18 +14,28 @@
    >
      <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
            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="100px" :span="11">
          <el-form-item label="对接数据库" label-width="90px" :span="11">
            <el-select
              size="small"
              v-model="form.cameraBrand"
              disabled
              placeholder="请选择对接数据库"
              style="width:100%"
              style="width: 100%"
            >
              <el-option label="人员库" value="person"></el-option>
              <el-option label="在逃库" value="zaitao"></el-option>
@@ -31,16 +45,53 @@
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" :offset="1">
          <el-form-item label="类型" label-width="80px" style="width:100%" required prop="tableType">
            <el-select size="small" v-model="form.tableType" placeholder="请选择" style="width:100%">
              <el-option label="人员库" value="person"></el-option>
              <el-option label="车辆" value="car"></el-option>
            </el-select>
        <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="100px" :span="11">
          <el-form-item label="库地址" label-width="90px" :span="11">
            <el-input size="small" disabled placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
@@ -50,345 +101,518 @@
          <el-form-item
            label="黑白名单"
            label-width="80px"
            style="width:100%;text-align:left"
            style="width: 100%; text-align: left"
            required
            prop="bwType"
          >
            <el-radio-group v-model="form.bwType" class>
            <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="100px" :span="11">
            <el-input size="small" v-model="form.userName" disabled placeholder="默认值"></el-input>
          <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="类型"
            label-width="80px"
            style="width:100%"
            style="width: 100%"
            required
            prop="startTime"
            prop="tableType"
          >
            <el-col :span="11" class>
              <el-date-picker
                size="small"
                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-checkbox v-model="foreverChecked" @change="forever" class="check-css">永久有效</el-checkbox>
              <!-- <el-radio v-model="foreverChecked" label="1">备选项</el-radio> -->
            </el-col>
            <el-col :span="2" class="text-center pick-time">
              <span>到</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker
                size="small"
                type="datetime"
                placeholder="选择日期"
                :disabled="foreverChecked"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.endTime"
                :picker-options="pickerOptions"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <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="100px" :span="11">
            <el-input size="small" v-model="form.pwd" disabled placeholder="默认值"></el-input>
          <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>
        <el-col :span="7" :offset="1">
          <el-form-item label="是否同步" label-width="80px" style="width:100%;text-align:left" required>
            <el-radio-group v-model="form.isSync" class>
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>-->
      <el-row>
        <el-col :span="6" :offset="15">
          <el-form-item style="margin-top:50px;text-align:right;" label-width="0px">
            <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-form-item>
        </el-col>
      <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'
import { addBase, updateBase } from "@/api/baseLibrary";
export default {
  name: 'addBase',
  name: "addBase",
  data() {
    const validatePass = (rule, value, callback) => {
      if (this.form.startTime && this.form.startTime !== '') {
      if (this.form.startTime && this.form.startTime !== "") {
        if (this.dateCompare(this.form.startTime, value) !== 1) {
          callback(new Error('结束时间不能大于开始时间！'))
          callback(new Error("结束时间不能大于开始时间！"));
        } else {
          callback()
          callback();
        }
      }
    }
    };
    return {
      foreverChecked: false,
      form: {
        analyServerId: '',
        tableName: '',
        analyServerId: "",
        tableName: "",
        startTime: new Date(),
        tableType: '',
        isForever: '0',
        id: '',
        endTime: '',
        bwType: '1',
        tableType: "",
        isForever: "0",
        id: "",
        endTime: "",
        bwType: "1",
        enable: 0, // 1生效，0未生效
        isSync: '1', // 1为同步，0为本地
        tableDesc: '' // 底库描述 
        isSync: "1", // 1为同步，0为本地
        tableDesc: "", // 底库描述
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      rules: {
        tableName: [
          { required: true, message: '底库名称不能为空' }
        ],
        tableType: [
          { required: true, message: '底库类型不能为空' }
        ],
        bwType: [
          { required: true, message: '黑白名单必选' }
        ],
        tableName: [{ required: true, message: "底库名称不能为空" }],
        tableType: [{ required: true, message: "底库类型不能为空" }],
        bwType: [{ required: true, message: "黑白名单必选" }],
        startTime: [
          { required: !this.foreverChecked, message: '请选择起始时间' }
          { required: !this.foreverChecked, message: "请选择起始时间" },
        ],
        endTime: [
          { validator: validatePass, trigger: 'change' }
        ]
      }
    }
        endTime: [{ validator: validatePass, trigger: "change" }],
      },
    };
  },
  mounted() {
    this.init()
    this.init();
  },
  watch: {
    baseObject: function (newVal, oldVal) {
      this.foreverChecked = false
      this.form = newVal
      console.log(this.form, 'baseObject')
      if (!newVal.endTime || newVal.endTime === undefined || newVal.endTime === null) {
        this.form.isForever = '1'
        this.foreverChecked = true
      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
        this.form.isForever = "0";
        this.foreverChecked = false;
      }
    },
    'form.endTime': function (newVal, oldVal) {
    "form.endTime": function (newVal, oldVal) {
      if (!newVal || newVal === null || newVal === undefined) {
        this.form.isForever = '1'
        this.foreverChecked = true
        this.form.isForever = "1";
        this.foreverChecked = true;
      } else {
        this.form.isForever = '0'
        this.foreverChecked = false
        if (this.form.startTime && this.form.startTime !== '') {
          // console.log(this.form.startTime, newVal)

          if (this.dateCompare(this.$moment(this.form.startTime).format('YYYY-MM-DD'), this.$moment(newVal).format('YYYY-MM-DD')) !== 1) {
        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 = ''
              type: "warning",
              message: "结束时间不能小于开始时间！",
            });
            this.form.endTime = "";
          }
        }
      }
    },
    'form.startTime': function (newVal, oldVal) {
    "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) {
        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 = ''
              type: "warning",
              message: "结束时间不能小于开始时间！",
            });
            this.form.endTime = "";
          }
        }
      }
    }
    },
  },
  methods: {
    onSubmit(formName) {
      console.log(this.form.id, 'submit')
      if (this.form.id) {
        // id不为空，修改底库
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // const { ...json } = this.form
            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'),
              startTime: this.$moment(this.form.startTime).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
              tableType: this.form.tableType,
              isForever: this.foreverChecked ? '1' : '0',
              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') : '',
              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,
              // isSync: this.form.isSync,
            })
            });
            if (res.success === true) {
              this.$notify({
                title: "成功",
                message: "底库信息保存成功！",
                type: "success"
                type: "success",
              });
              this.$emit('refresh')
              this.$emit("refresh");
              this.$emit("closeAdd");
            } else {
              this.$notify({
                title: "失败",
                message: "底库信息保存失败！",
                type: "error"
                type: "error",
              });
            }
          }
        })
        });
      } else {
        // id为空，新增底库
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // const { ...json } = this.form
            // console.log('新增参数', json)
            addBase({
              tableName: this.form.tableName,
              startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD 00:00:00'),
              startTime: this.$moment(this.form.startTime).format(
                "YYYY-MM-DD 00:00:00"
              ),
              tableType: this.form.tableType,
              isForever: this.foreverChecked ? '1' : '0',
              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') : '',
              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,
              // isSync: this.form.isSync,
            }).then((res) => {
              this.$notify({
                title: "成功",
                message: "底库信息保存成功！",
                type: "success"
              });
              this.$emit('refresh')
            }).catch((err) => {
              this.$notify({
                title: "失败",
                message: err.data,
                type: "error"
              });
            })
              .then((res) => {
                if (res.success) {
                  this.$notify({
                    title: "成功",
                    message: "底库信息保存成功！",
                    type: "success",
                  });
                  this.$emit("refresh");
                  this.$emit("closeAdd");
                } else {
                  this.$notify.error(err.msg);
                }
              })
              .catch((err) => {
                  this.$notify.error(err.msg);
              });
          }
        })
        });
      }
    },
    onCancle() {
      this.$emit('closeAdd')
      this.$emit("closeAdd");
    },
    forever(value) {
      if (value) {
        this.form.endTime = ''
        this.form.endTime = "";
      }
    },
    init() {
      console.log('添加底库表单收到的数据', this.baseObject, this.type)
      if (Object.keys(this.baseObject).length > 3) {
        this.form = this.baseObject
        if (!this.form.endTime) {
          this.foreverChecked = true
        } else {
          this.foreverChecked = false
        }
        this.form = this.baseObject;
        this.foreverChecked = !this.form.endTime;
      } else {
        this.$refs.baseForm.resetFields()
        this.$refs.baseForm.resetFields();
      }
    },
    dateParse(dateString) {
      var SEPARATOR_BAR = '-'
      var SEPARATOR_SLASH = '/'
      var SEPARATOR_DOT = '.'
      var dateArray
      var SEPARATOR_BAR = "-";
      var SEPARATOR_SLASH = "/";
      var SEPARATOR_DOT = ".";
      var dateArray;
      if (dateString.indexOf(SEPARATOR_BAR) > -1) {
        dateArray = dateString.split(SEPARATOR_BAR)
        dateArray = dateString.split(SEPARATOR_BAR);
      } else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
        dateArray = dateString.split(SEPARATOR_SLASH)
        dateArray = dateString.split(SEPARATOR_SLASH);
      } else {
        dateArray = dateString.split(SEPARATOR_DOT)
        dateArray = dateString.split(SEPARATOR_DOT);
      }
      return new Date(dateArray[0], dateArray[1] - 1, dateArray[2])
      return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
    },
    isEmpty(str) {
      if (!str || str === undefined || str === null) {
        return true
      } else {
        return false
      }
      return !str || str === undefined || str === null;
    },
    dateCompare(dateString, compareDateString) {
      // dateString:当前时间
      // compareDateString:需要比较的时间
      if (this.isEmpty(dateString)) {
        // alert('dateString不能为空')  
        return
        return;
      }
      if (this.isEmpty(compareDateString)) {
        // alert('compareDateString不能为空')  
        return 1
        return 1;
      }
      var dateTime = this.dateParse(dateString).getTime()
      var compareDateTime = this.dateParse(compareDateString).getTime()
      var dateTime = this.dateParse(dateString).getTime();
      var compareDateTime = this.dateParse(compareDateString).getTime();
      if (compareDateTime > dateTime) {
        return 1
        return 1;
      } else if (compareDateTime === dateTime) {
        return 0
        return 0;
      } else {
        return -1
        return -1;
      }
    }
    },
  },
  props: {
    baseObject: {
      default: () => { },
      type: Object
      default: () => {},
      type: Object,
    },
    type: {
      default: 'sync',
      type: String
      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;
      }
    }
  }
}
</script>
<style lang="scss">
.add-base-form {
  margin-top: 50px;
}

.el-radio__inner {
  border: 1px solid #dcdfe6;
  border-radius: 100%;
@@ -399,23 +623,25 @@
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
// .el-radio__input.is-checked .el-radio__inner {
//   border-color: #3d68e1;
//   background: #3d68e1;
// }
.save {
  background: #3d68e1;
  background: var(--colorCard);
  border-radius: 2px;
  outline: none;
}
.check-css {
  position: relative;
  left: -42px;
  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;
    // border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 14px;
@@ -429,8 +655,8 @@
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #3d68e1;
    border-color: #3d68e1;
    background-color: var(--colorCard);
    border-color: var(--colorCard);
  }
}