bns_zhgd_web/src/views/device/videoDevice/prop/devicepop.vue

<template>
  <!-- 小型弹窗，用于完成，删除，保存等操作 -->
  <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
    :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
    <div>
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
        <el-form-item label="设备名称" prop="devName">
          <el-input style="width:100%" v-model="form.devName" placeholder="请输入设备名称" maxlength="64"></el-input>
        </el-form-item>
        <el-form-item label="MAC_ID" prop="macId">
          <el-input style="width:100%" v-model="form.macId" placeholder="请输入MAC_ID" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="devTypeCode">
          <el-select style="width:100%" ref="devTypeCode" v-model="form.devTypeCode" placeholder="请选择设备类型" clearable>
            <el-option v-for="dict in dict.type.video_device" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="puid" prop="puid">
          <el-input style="width:100%" v-model="form.puid" placeholder="请输入puid" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="国标编码" prop="gbCode">
          <el-input style="width:100%" v-model="form.gbCode" placeholder="请输入国标编码" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="播放索引" prop="playIdx">
          <el-input-number style="width:100%" v-model="form.playIdx" controls-position="right" :min="0"
            :max="11"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" style="width:100%" v-model="form.remark" placeholder="请输入备注" maxlength="255"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
      <el-button type="primary" class="search-btn" :disabled="disabled" @click="submitForm('ruleForm')">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { detailDev, addDev, editDev } from "@/api/device/videoDevice";
export default {
  name: "devicepop",
  props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
  dicts: ['video_device'],
  data() {
    return {
      roles: [],
      lDialog: this.width > 500 ? "w700" : "w500",
      dialogVisible: true,
      isDisabled: true,
      form: {
        devName: null,
        macId: null,
        devTypeCode: null,
        puid: null,
        gbCode: null,
        playIdx: 0,
        remark:null
      },
      rules: {
        devName: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        macId: [
          { required: true, message: 'MAC_ID不能为空', trigger: 'blur' }
        ],
        devTypeCode: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ],
        puid: [
          { required: true, message: 'puid不能为空', trigger: 'blur' }
        ],
        gbCode: [
          { required: true, message: '国标编码不能为空', trigger: 'blur' }
        ],
        playIdx: [
          { required: true, message: '播放索引不能为空', trigger: 'blur' }
        ],
      },
    };
  },
  mounted() {
    if (this.isAdd === 'add') { // 新增
    } else if (this.isAdd === 'edit') { // 修改
      this.queryDetailDev();
    }
  },
  methods: {
    /**详情*/
    queryDetailDev() {
      detailDev({ id: this.rowData.id }).then(res => {
        this.form = res.data;
      }).catch(error => {

      })
    },
    /*关闭弹窗 */
    handleClose() {
      this.dialogVisible = false;
      this.$emit("closeDialog");
      setTimeout(() => {
        this.dialogVisible = true;
      });
    },
    /**确认弹窗 */
    sureBtnClick() {
      this.dialogVisible = false;
      this.$emit("closeDialog");
      setTimeout(() => {
        this.dialogVisible = true;
      });
    },
    /**重置表单*/
    reset() {
      this.form = {
        devName: null,
        macId: null,
        devTypeCode: null,
        puid: null,
        gbCode: null,
        playIdx: 0
      };
      this.resetForm("ruleForm");
    },
    handleReuslt(res) {
      this.$modal.msgSuccess(res.msg);
      this.reset();
      this.$emit('handleQuery');
      this.handleClose();
    },
    /**验证 */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let loading = this.$loading({
            lock: true,
            text: "数据提交中，请稍候...",
            background: 'rgba(0,0,0,0.2)',
            target: this.$el.querySelector('.el-dialog') || document.body
          })
          let params = _.cloneDeep(this.form);
          const selectedText = this.$refs.devTypeCode.selectedLabel;
          params.devTypeName = selectedText;
          if (this.isAdd === 'add') {
            addDev(params).then(res => {
              loading.close();
              if (res.code === 200) {
                this.handleReuslt(res);
              } else {
                this.$modal.msgError(res.msg);
              }
            }).catch(error => {
              loading.close();
            });
          } else {
            editDev(params).then(res => {
              loading.close();
              if (res.code === 200) {
                this.handleReuslt(res);
              } else {
                this.$modal.msgError(res.msg);
              }
            }).catch(error => {
              loading.close();
            });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss">
.w700 .el-dialog {
  width: 700px;
}

.w500 .el-dialog {
  width: 500px;
}

.w500 .el-dialog__header,
.w700 .el-dialog__header {
  background: #eeeeee;

  .el-dialog__title {
    font-size: 16px;
  }
}

.yxq .el-range-separator {
  margin-right: 7px !important;
}

.el-date-editor--daterange.el-input__inner {
  width: 260px;
}
</style>