ISMS-Visualization-BJGD-TKT/src/views/alarm/alarmList/components/DealMultiDialog.vue

<template>
  <base-drag-bg-dialog
    :dialogConfig="baseDialogConfig"
    @handleClose="handleClose"
    @onActivated="onActivated"
  >
    <!-- 弹窗内容 -->
    <div class="dialog_box">
      <!-- 内容 -->
      <div class="dialog_content_box">
        <div class="detail-box">
          <el-form
            ref="form"
            :model="form"
            size="small"
            label-width="100px"
            inline
          >
            <el-form-item label="处理方式：" prop="dataType">
              <el-radio-group v-model="form.dataType">
                <el-radio :label="0" style="color: #fff !important"
                  >正常</el-radio
                >
                <el-radio :label="1" style="color: #fff !important"
                  >误报</el-radio
                >
                <el-radio :label="2" style="color: #fff !important"
                  >测试</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="处理信息：" prop="dealContent">
              <el-input
                ref="dealContent"
                v-model="form.dealContent"
                type="textarea"
                rows="5"
                size="small"
                style="width: 330px"
              />
            </el-form-item>
          </el-form>
          <div class="btn-box">
            <el-button class="btn-cancel" size="mini" @click="handleClose"
              >取消</el-button
            >
            <el-button class="btn-handle" size="mini" @click="handleDeal"
              >处理</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </base-drag-bg-dialog>
</template>
<script>
// 调度指令窗口，全局展示
import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
import { dealMultiAlarm } from "@/API/alarm.js";

export default {
  name: "DealMultiDialog",
  components: { BaseDragBgDialog },
  props: {
    dialogConfig: {
      type: Object,
      default: () => {
        return {
          dialogId: "",
          show: false, //是否显示
          title: "新窗口-请指定URL",
          width: 500, //px宽度
          height: 320, //px高度
          left: 0, //
          top: 0, //
          bottom: 0, //
          right: 0, //
          center: true, //是否居中定位
          data: {
            eventTime: "",
            content: "",
          },
          zIndex: 5,
        };
      },
    },
  },
  data() {
    return {
      baseDialogConfig: {
        dialogId: "",
        show: false,
        title: "调度指令",
        width: 500,
        height: 320,
        center: true,
        zIndex: 10,
      },
      form: {
        dealContent: "",
        dataType: 0,
      },
    };
  },
  computed: {},
  watch: {
    "dialogConfig.show": {
      handler(newVal) {
        if (newVal) {
          this.baseDialogConfig = Object.assign(
            this.baseDialogConfig,
            this.dialogConfig
          );
        } else {
          this.baseDialogConfig.show = false;
        }
      },
      // deep: true,
      immediate: true,
    },
  },
  methods: {
    handleClose() {
      this.dialogConfig.show = false;
    },
    async handleDeal() {
      try {
        let p = {
          ids: this.dialogConfig.data.ids,
          dealContent: this.form.dealContent,
          dataType: this.form.dataType,
        };
        console.log(p);
        const { code, msg } = await dealMultiAlarm(p);
        this.$message({
          type: code == 20000 ? "success" : "danger",
          message: msg,
        });
        this.$parent.getAlarmDataList();
        this.handleClose();
      } catch (error) {
        console.log(error);
      }
    },
    onActivated() {
      console.log("aaa");
      this.$nextTick(() => {
        this.$refs.dealContent.focus()
      });
    },
  },
};
</script>
<style lang="less" scoped>
.dialog_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .dialog_content_box {
    height: 2.083333rem /* 400/192 */;
    padding: 0.104167rem /* 20/192 */ 0;
    box-sizing: border-box;
    color: #fff;
    .detail-box {
      ::v-deep .el-form-item__label {
        color: #fff;
      }
      .btn-box {
        width: 100%;
        height: 0.15625rem /* 30/192 */;
        text-align: center;
        position: absolute;
        bottom: 0.15625rem /* 30/192 */;
        left: 50%;
        transform: translate(-50%, 0);
        .el-button {
          width: 0.40625rem /* 78/192 */;
          height: 0.145833rem /* 28/192 */;
          box-sizing: border-box;
          margin-top: 0.015625rem /* 3/192 */;
          color: #fff;
          padding: 0;
          border-color: #fff9de;
          border-radius: 0;
          &:hover {
            border-color: #ccc;
          }
        }
        .btn-handle.el-button {
          // background: url('../../../../assets/out/imgs/popup/button_bg.png') center no-repeat;
          background: rgba(4, 42, 47, 0.6);
        }
        .btn-cancel.el-button {
          background: rgba(13, 35, 64, 0.1);
        }
      }
    }
  }
}
</style>