jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/broadcast/broadcastEditor.vue

<template>
  <el-dialog :title="calcTitle" :visible.sync="dialogVisible" width="800px" append-to-body
    :close-on-click-modal="false">
    <el-card>
      <el-form :model="dataForm" :rules="dataRule" label-width="110px" ref="dataForm" size="mini"
        style="margin-right: 10px;">
        <el-form-item label="所属类别" prop="category" v-if="type == 'template' && mode != 'toDevice'">
          <el-row :gutter="0">
            <el-col :span="6">
              <el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini">
                <el-option v-for="item in templateCategoryList" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="音量" prop="outVol">
          <el-row :gutter="0">
            <el-col :span="6">
              <el-input-number v-model="dataForm.outVol" :min="1" :max="9"></el-input-number>
            </el-col>
            <el-col :span="18"><span style="margin-left: 10px;">取值范围 1 - 9</span></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="循环次数" prop="repeatTimes">
          <el-row :gutter="0">
            <el-col :span="6">
              <el-input-number v-model="dataForm.repeatTimes" :min="1" :max="16"></el-input-number>
            </el-col>
            <el-col :span="18"><span style="margin-left: 10px;">取值范围 1 - 16</span></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="紧急度" prop="priority">
          <el-row :gutter="0">
            <el-col :span="6">
              <el-select v-model="dataForm.priority" placeholder="请选择">
                <el-option v-for="(item,key) in broadcastPriority" :key="key" :label="item" :value="key">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="详细内容" prop="content">
          <el-input type="textarea" :rows="6" placeholder="详细内容" v-model="dataForm.content"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <div slot="footer" class="dialog-footer">
      <el-button style="background-color: #0e708b; color: #fff" @click="onClose">取消</el-button>
      <el-button @click="onSubmit('dataForm')" v-loading="loading"
        style="background-color: #10aac2; color: #fff">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  addTemplate,
  editTemplate
} from "@/api/broadcast/template";
import { checkBoardContent } from "@/api/board/board";
import { broadcastPriority } from "@screen/utils/enum.js";
export default {
  data() {
    return {
      broadcastPriority,
      dialogVisible: false,
      dataForm: {
        content: ""
      },
      dataRule: {
        category: [
          {
            required: true,
            message: "请选择类别",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入详细内容",
            trigger: "blur",
          },
        ]
      },
      screenSizeOptions: [],
      colorList: [],
      isCurrencyOptions: [
        {
          code: "0",
          content: "通用",
        },
        {
          code: "1",
          content: "仅为智能推荐模板",
        },
      ],
      inScreenModeList: [],
      fontSizeList: [],
      title: "选择图片",
      loading: false,
      isAdd: false,
      templateCategoryList: [],
      infoType: "",
      devicePixelBoolean: false,
      categoryRules: false,
      dataDefault: {
        category:"",
        content:"",
        outVol:6,
        repeatTimes:3,
        priority:"1"
      },
      isLocked: false,
    };
  },
  props: {
    mode: {
      //add edit
      type: String,
      default: "",
    },
    type: {
      //template board
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    tpl: {
      type: Object,
      default: () => {},
    },
  },
  components: {
  },
  computed: {
    calcTitle() {
      let str = "";
      if (this.mode == "toDevice") {
        str = `从模板添加待下发信息`;
      } else {
        str = `${this.mode == "add" ? "新增" : "编辑"}${
          this.type == "template" ? "广播模板" : "待下发信息"
        }`;
      }
      return str;
    },
  },
  watch: {
    visible: {
      handler(newV) {
        this.dialogVisible = newV;
        if (this.$refs.dataForm) {
          this.$refs.dataForm.clearValidate();
        }
        // if(newV){
        //   this.initData();
        // }
      },
      immediate: true,
    },
    dialogVisible(newV) {
      this.$emit("update:visible", newV);
    },
    tpl: {
      handler(newV) {
        // { "id": 3, "category": "0", "content": "保持车距，控制车速", "screenSize": "768*64", "fontColor": "FFFF00", "fontSize": "64", "fontType": "2", "fontSpacing": "0", "rollingSpeed": null, "stopTime": "50", "inScreenMode": "1", "formatStyle": "2", "remark": null, "createTime": "2024-01-06 10:40:19", "updateTime": "2024-01-06 11:04:53" }

        if (newV && Object.keys(newV).length > 0) {
          //防止关闭对话框时触发
          this.initData();
        }
      },
      deep: true,
    },
    mode: {
      handler(newV) {
        this.initData();
      },
    },
    type: {
      handler(newV) {
        this.initData();
      },
    },
  },
  mounted() {},
  created() {
    this.getDicts("iot_template_category").then((res) => {
      this.templateCategoryList = res.data;
      this.dataDefault.category = this.templateCategoryList[0].dictValue
    });
  },
  methods: {
    initData() {
      if (this.isLocked) {
        return;
      }
      this.isLocked = true;
      setTimeout(() => {
        this.isLocked = false;
      }, 100);

      if (this.mode == "edit" || this.mode == "toDevice"){
        this.dataForm = {
          outVol: +this.tpl.outVol,
          repeatTimes: +this.tpl.repeatTimes,
          category: this.tpl.category,
          priority: this.tpl.priority,
          content: this.tpl.content,
          id : this.tpl.id
        };
      }else if(this.mode == "add"){
        this.dataForm = {
          ...this.dataDefault,
          // outVol: 6,
          // repeatTimes: 3,
          // priority: 3
        }
      }

      if (this.visible == false && this.mode == "toDevice") {
        this.____doSubmit();
      }
    },
    onClose() {
      this.dialogVisible = false;
    },
    // 表单提交
    async onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            this.____doSubmit();
        } else {
          console.log('格式不正确!!');
          return false;
        }
      });
    },
    ____doSubmit(){

      // if (this.type == "template" && this.dataForm.category == undefined) {
      //   return this.$modal.msgError("请选择分类！");
      // }

      // if (!this.dataForm.content.trim()) {
      //   return this.$modal.msgError("当前输入内容为空");
      // }
      // if (this.dataForm.content.indexOf("\\") >= 0) {
      //   return this.$modal.msgError("内容不能含有特殊字符'\\\\'");
      // }

      let ctt = this.dataForm.content;
      checkBoardContent(ctt).then((res) => {
        if (res.code == 200) {
          doNext();
        } else {
          this.$message({
            type: "danger",
            message: res.msg,
          });
          return;
        }
      });
      let doNext = () => {
        let data = {
          outVol: ''+this.dataForm.outVol,
          repeatTimes: ''+this.dataForm.repeatTimes,
          category: ''+this.dataForm.category,
          priority: this.dataForm.priority,
          content: this.dataForm.content,
          id: this.dataForm.id
        }
        this.loading = true;
        // let templateId = "";

        if (this.type == "template") {
          if (this.mode == "edit") {
            editTemplate(data).then((res) => {
              afterSave("修改");
            });
          } else if (this.mode == "toDevice") {
            this.loading = false;
            this.$emit("afterSubmit", {
              type: this.type,
              mode: this.mode,
              data: data,
            });
          } else {
            addTemplate(data).then((res) => {
              afterSave("新增");
            });
          }
        } else {
          this.loading = false;
          // this.dialogVisible = false
          this.$emit("afterSubmit", {
            type: this.type,
            mode: this.mode,
            data: data,
          });
        }

        const afterSave = (para) => {
          this.$message.success(para + "成功");
          this.loading = false;
          // this.dialogVisible = false
          this.$emit("afterSubmit", { type: this.type, mode: this.mode });
        };
      };

    }
  },
};
</script>
<style lang="scss" scoped>
.infoBoardButton {
  ::v-deep .el-radio-button--medium .el-radio-button__inner {
    // height: 3vh;
    // line-height: 3vh;
    // padding: 0 0.6vw;
    // font-size: 0.7vw;
  }
}
.previewContentCSS {
  border: yellow 1px dashed;
}
/* 页脚 */
.dialog-footer {
  padding-left: 450px;
}
.photoOther img,
.photo img {
  max-width: 300px;
  width: 100%;
  // height: 80px;
}
.infoBoardButton {
  display: flex;
  justify-content: left;
}
.boardTextStyle {
  line-height: 1;
  caret-color: rgba(0, 0, 0, 0);
  user-select: none;
  position: absolute;
  // max-height: 128px;
  overflow: hidden;
}
.blackBoard2 {
  background: #000000;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  // justify-content: center;
  align-items: center;
}
::v-deep .el-card__body {
  padding: 10px 0;
}

//
::v-deep .el-dialog__header {
  background-color: #145977;
}
::v-deep .el-dialog__body {
  padding: 5px 20px;
  background-color: #145977;
}
::v-deep .el-dialog__footer {
  background-color: #145977;
}
::v-deep .el-card {
  margin-top: 1vh;
  background-color: #145977;
  border: 2px solid #1d7890;
}
::v-deep .el-form-item__label {
  color: #3de8ff;
}
::v-deep .el-input--mini .el-input__inner {
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-textarea__inner {
  color: #fff;
  background-color: #096d8c;
  border-color: #096d8c;
}
::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
  border-color: transparent;
}
::v-deep .el-input-number.is-controls-right .el-input-number__increase {
  border-color: transparent;
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-button--medium {
  padding: 5px 25px;
  font-size: 14px;
  border-radius: 20px;
  border: transparent;
}
::v-deep .el-radio-button__inner {
  color: #ffffff;
  background-color: pink;
  border-color: #1d58a9;
  -webkit-box-shadow: -1px 0 0 0 #1d58a9;
  box-shadow: -1px 0 0 0 #1d58a9;
  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: none !important;
}
::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner {
  margin: 0 3px;
}
</style>