nezha-nezha-fronted/nezha-fronted/src/components/common/rightBox/assetStateBox.vue

<template>
  <div class="right-box right-box-asset-state" v-clickoutside="{obj: editAssetState, func: clickOutside}">
    <!-- begin--顶部按钮-->
    <div class="right-box-top-btns right-box-form-delete">
      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="asset-state-edit-del"
              type="button"
              v-if="editAssetState.id">
        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
      </button>
    </div>
    <!-- end--顶部按钮-->

    <!-- begin--标题-->
    <div class="right-box-title">{{editAssetState.id ? ($t("config.assetState.editAssetState") + "  ID：" + editAssetState.id) : $t("config.assetState.createAssetState")}}</div>
    <!-- end--标题-->

    <!-- begin--表单-->
    <div class="right-box-form-box">
      <el-form :model="editAssetState" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px" ref="assetStateForm">
        <!--name-->
        <el-form-item :label="$t('overall.name')" prop="name">
          <el-input id="asset-state-input-name" placeholder="" size="small" type="text" v-model="editAssetState.name"></el-input>
        </el-form-item>
        <!--ping-->
        <el-form-item label="Ping">
          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-ping-status"
                     v-model="editAssetState.ping">
          </el-switch>
        </el-form-item>
        <!--monitor-->
        <el-form-item :label="$t('config.assetState.monitor')">
          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-monitor-status"
                     v-model="editAssetState.monitor">
          </el-switch>
        </el-form-item>
        <!--alert-->
        <el-form-item :label="$t('config.assetState.alert')">
          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-alert-status"
                     v-model="editAssetState.alert">
          </el-switch>
        </el-form-item>
        <!--descrption-->
        <el-form-item :label="$t('overall.remark')" prop="remark">
          <el-input id="asset-state-input-description" placeholder="" size="small" type="textarea" v-model="editAssetState.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- end--表单-->
    <!--底部按钮-->
    <div class="right-box-bottom-btns">
      <button class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-state-esc"
              v-cancel="{obj: editAssetState, func: esc}">
        <span>{{$t('overall.cancel')}}</span>
      </button>
      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
              id="asset-state-save"
      >
        <span>{{$t('overall.save')}}</span>
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'asset-state-right-box',
  props: {
    assetState: Object,
    assetStateData: Array // 所有数据，用于选择下拉框显示内容
  },
  data () {
    return {
      rules: { // 表单校验规则
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      },
      editAssetState: {}
    }
  },
  methods: {
    /* 关闭弹框 */
    esc (refresh) {
      this.$emit('close', refresh)
    },
    clickOutside () {
      this.esc(false)
    },
    /* 保存 */
    save () {
      this.$refs.assetStateForm.validate((valid) => {
        if (valid) {
          if (this.assetState.id) {
            this.$put('/asset/stateConf', this.editAssetState).then(response => {
              if (response.code === 200) {
                this.esc(true)
                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
              } else {
                this.$message.error(response.msg)
              }
            })
          } else {
            this.$post('/asset/stateConf', this.editAssetState).then(response => {
              if (response.code === 200) {
                this.esc(true)
                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
              } else {
                this.$message.error(response.msg)
              }
            })
          }
        } else {
          return false
        }
      })
    },
    /* 删除 */
    del () {
      this.$confirm(this.$t('tip.confirmDelete'), {
        confirmButtonText: this.$t('tip.yes'),
        cancelButtonText: this.$t('tip.no'),
        type: 'warning'
      }).then(() => {
        this.$delete('/asset/stateConf?ids=' + this.editAssetState.id).then(response => {
          if (response.code === 200) {
            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
            this.esc(true)
          } else {
            this.$message.error(response.msg)
          }
        })
      }).catch(() => {
      })
    }
  },
  watch: {
    assetState: {
      immediate: true,
      deep: true,
      handler (n) {
        if (n) {
          this.editAssetState = JSON.parse(JSON.stringify(n))
        }
      }
    }
  }
}
</script>
<style lang="scss">
  .right-box-asset-state {
    .right-box-sub-title {
      #add-notification {
        border: none;
        outline: none;
        cursor: pointer;

        i {
          font-size: 17px;
          background-color: #f6f6f6;
        }
      }
    }
  }

  .notification-item {
    .el-select {
      width: 100px;

    }
  }
</style>
<style scoped>
  .form-item-title{
    position: absolute;
    left: -120px;
  }
</style>