修复初始化页面

zhangzengfei

2022-06-08 182aed85616f7ac60d0ffb02e4feac5661b80e0c

 src/pages/library/components/addBase.vue

@@ -33,7 +33,7 @@
            <el-select
              size="small"
              v-model="form.cameraBrand"
              disabled   
              disabled
              placeholder="请选择对接数据库"
              style="width: 100%"
            >
@@ -56,20 +56,14 @@
            <el-col :span="11" class>
              <el-date-picker
                size="small"
                type="datetime" 
                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%; "
                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>
@@ -78,6 +72,7 @@
              <el-date-picker
                size="small"
                class="end-time-pick"
                popper-class="popper-add"
                type="datetime"
                :placeholder="foreverChecked ? '永久有效' : '选择日期'"
                :disabled="foreverChecked"
@@ -110,7 +105,11 @@
            required
            prop="bwType"
          >
            <el-radio-group v-model="form.bwType" fill="#4e94ff" text-color="#4e94ff">
            <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>
@@ -138,7 +137,8 @@
          >
            <el-select
              size="small"
              v-model="form.tableType" :popper-append-to-body="false"
              v-model="form.tableType"
              :popper-append-to-body="false"
              placeholder="请选择"
              style="width: 100%"
            >
@@ -159,16 +159,6 @@
          </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 class="footer">
        <el-button
          type="info"
@@ -194,7 +184,6 @@
  name: "addBase",
  data() {
    const validatePass = (rule, value, callback) => {
      debugger
      if (this.form.startTime && this.form.startTime !== "") {
        if (this.dateCompare(this.form.startTime, value) !== 1) {
          callback(new Error("结束时间不能大于开始时间！"));
@@ -241,7 +230,6 @@
    baseObject: function (newVal, oldVal) {
      this.foreverChecked = false;
      this.form = newVal;
      console.log(this.form, "baseObject");
      if (
        !newVal.endTime ||
        newVal.endTime === undefined ||
@@ -262,8 +250,6 @@
        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"),
@@ -300,12 +286,10 @@
  },
  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,
@@ -321,7 +305,6 @@
              bwType: this.form.bwType,
              enable: this.form.enable,
              tableDesc: this.form.tableDesc,
              // isSync: this.form.isSync,
            });
            if (res.success === true) {
              this.$notify({
@@ -330,6 +313,7 @@
                type: "success",
              });
              this.$emit("refresh");
              this.$emit("closeAdd");
            } else {
              this.$notify({
                title: "失败",
@@ -358,22 +342,22 @@
              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");
                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({
                  title: "失败",
                  message: err.data,
                  type: "error",
                });
                  this.$notify.error(err.msg);
              });
          }
        });
@@ -388,14 +372,9 @@
      }
    },
    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.foreverChecked = !this.form.endTime;
      } else {
        this.$refs.baseForm.resetFields();
      }
@@ -415,21 +394,15 @@
      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;
      }
      if (this.isEmpty(compareDateString)) {
        // alert('compareDateString不能为空')
        return 1;
      }
      var dateTime = this.dateParse(dateString).getTime();
@@ -456,6 +429,58 @@
};
</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;
@@ -466,7 +491,7 @@
    text-align: center;
    line-height: 52px;
    position: relative;
        background: #fff;
    background: #fff;
    border-radius: 24px 24px 0 0;
    span {
      font-size: 14px;
@@ -483,6 +508,7 @@
  }
  .add-base-form {
    padding: 30px 20px;

    .el-form-item__label {
      color: #999999;
    }
@@ -498,65 +524,67 @@
        width: 150px;
      }
      .el-button--primary {
        background: #4e94ff !important;
        background: var(--colorCard) !important;
        padding: 9px 37px;
        color: #fff;
        border: 1px solid #4e94ff !important;
        border: 1px solid var(--colorCard) !important;
        border-radius: 18px;
        font-size: 14px;
        width: 150px;
      }
    }
    .el-radio__input.is-checked .el-radio__inner {
    border-color: #4e94ff;
    background: #4e94ff;
}
.el-radio__input.is-checked + .el-radio__label {
    color: #4e94ff;
}
.el-select .el-input.is-focus .el-input__inner {
    border-color: #4e94ff;
}
      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;
      // border-color: #dfe4ed;
      cursor: not-allowed;
    }
    .el-form-item__content {
      line-height: 32px;
    }
    .el-form-item__label{
    .el-form-item__label {
      line-height: 32px;
    }
    .el-form-item {
    margin-bottom: 0;
    height: 65px;
}
      margin-bottom: 0;
      height: 65px;
    }
    .end-time-pick.is-disabled .el-input__inner::placeholder {
      color: #606266;
    }
    // .el-date-editor .el-input__inner {
    //   text-align: center;
    // }
    .el-select-dropdown__item.selected {
    color: #4e94ff;
} .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: #4e94ff;
    color: #fff;
}.el-select-dropdown {
    border-radius: 8px;
    box-shadow: 0px 0px 8px rgb(0 0 0 / 16%);
}.popper__arrow {
    top: -8px;
}.el-select-dropdown__list {
    padding: 0;
}
      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;
@@ -573,14 +601,14 @@
    }
    .el-form-item__error {
      color: #fe6d68;
      padding-top: 3px;
      padding-top: 5px;
      left: 15px;
    }
    .start-time-pick{
    .start-time-pick {
      .el-form-item__error {
          top: 36px;
    left: 105px;
    }
        top: 34px;
        left: 105px;
      }
    }
  }
}
@@ -595,23 +623,20 @@
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
// .el-radio__input.is-checked .el-radio__inner {
//   border-color: #3d68e1;
//   background: #3d68e1;
// }
.save {
  background: #4e94ff;
  background: var(--colorCard);
  border-radius: 2px;
  outline: none;
}
.check-css {
  position: relative;
  height: 20px;
  left: -187px;    top: -4px;
  left: -187px;
  top: -4px;
  line-height: 20px;
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #4e94ff;
}
    color: var(--colorCard);
  }
  .el-checkbox__inner {
    display: inline-block;
    position: relative;
@@ -630,8 +655,8 @@
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #4e94ff;
    border-color: #4e94ff;
    background-color: var(--colorCard);
    border-color: var(--colorCard);
  }
}