jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardInfoEditor.vue

<template>
   <el-dialog :title="calcTitle" :visible.sync="dialogVisible" width="800px" append-to-body :close-on-click-modal="false">
    <!-- <div style="color:#fff">
      <p>类型:{{type}} 增删改类型:{{mode}}</p>
      <p>模板id:{{ tpl }}</p>
    </div> -->
        <div class="dialogStyleBox">
          <div class="dialogLine"></div>
          <div class="dialogCloseButton"></div>
        </div>
        <el-card>
          <BoardTplPreview style="height: 200px; width: 100%;" :boardWH="screenSize" :tpl="dataForm"></BoardTplPreview>
        </el-card>
        <el-card>
          <el-form :model="dataForm" :rules="dataRule" label-width="110px" ref="dataForm" size="mini">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="所属类别" v-if="type == 'template' && mode!='toDevice'">
                  <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-form-item>
              </el-col>
              <el-col class="infoBoardButton" :span="16">
                <el-form-item label="对齐方式">
                  <el-radio-group v-model="dataForm.formatStyle">
                    <el-radio-button label="0">左对齐</el-radio-button>
                    <el-radio-button label="2">中间对齐</el-radio-button>
                    <el-radio-button label="1">右对齐</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24" style="display: flex; flex-wrap: wrap;width:100%">
              <el-col :span="24">
                <el-form-item label="详细内容" prop="content">
                  <el-input type="textarea" :rows="6" placeholder="详细内容" v-model="dataForm.content"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体颜色">
                  <el-select v-model="dataForm.fontColor" filterable placeholder="请选择">
                    <el-option v-for="item in colorList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体大小">
                  <el-select v-model="dataForm.fontSize" style="width: 100%">
                    <el-option v-for="item in fontSizeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体类型">
                  <el-select v-model="dataForm.fontType" placeholder="请选择">
                    <el-option v-for="item in fontTypeList" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="停留时间(秒)">
                  <el-input-number :min="0" v-model="dataForm.stopTime"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入屏方式">
                  <el-select v-model="dataForm.inScreenMode" placeholder="请选择">
                    <el-option v-for="item in inScreenModeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="屏幕尺寸">
                  <el-select v-model="screenSize" placeholder="请选择" disabled>
                    <el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <div slot="footer" class="dialog-footer">
          <el-button @click="onSubmit" v-loading="loading" style="background-color: #10aac2;color:#fff;">确认</el-button>
          <el-button style="background-color:#b5b5b6;color:#fff" @click="onClose">取消</el-button>
        </div>
      </el-dialog>
</template>
<script>
import { getTemplateList, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template'
import { devicessize } from '@/api/information/api.js'
import { checkIotBoardContent } from '@/api/board/vocabulary'
import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue"
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue"
import infoBoardUtils from "@screen/utils/infoBoard.js"
import { checkBoardContent } from '@/api/board/board'
import { debounce } from 'lodash'
export default {
  data() {
    return {
      alignmentNum: 2,
      content: '',
      boardWidth: '',
      boardHeight: '',
      checkList: [], //复选框一组
      obj: '',
      imgUrl: [],
      imgUrlOther: [],
      dialogVisible: false,
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      listquery: [], //拖拽图片
      curDragImgItem: '',
      startTxt_x: '000',
      startTxt_y: '000',
      width: '400',
      height: '40',
      // content: "",
      fontSize: '24',
      fontType: 'KaiTi',
      fontSpacing: 0,
      coordinate: '000000',
      url: '',
      previewContent: '', //预览内容
      ispreviewContent: -1,
      dataForm: {
        category:"",
        formatStyle:"",
        content:"",
        fontColor:"",
        fontSize:"",
        fontType:"",
        stopTime:"",
        inScreenMode:"",
        screenSize:""
      },
      templateContent: [],
      templateDelContent: [],
      dataRule: {
        content: [
          {
            required: true,
            message: '请输入详细内容',
            trigger: 'blur'
          }
        ]
      },
      screenSizeOptions: [],
      colorList: [],
      isCurrencyOptions: [
        {
          code: '0',
          content: '通用'
        },
        {
          code: '1',
          content: '仅为智能推荐模板'
        }
      ],
      inScreenModeList: [],
      imgSize: [
        {
          type: '1024*128',
          name: '全屏'
        },
        {
          type: '',
          name: '正常'
        }
      ],
      fontSizeList: [],
      title: '选择图片',
      loading: false,
      isAdd: false,
      templateCategoryList: [],
      infoType: '',
      devicePixelBoolean: false,
      categoryRules: false,
      deviceCttDefault: {
        "residenceTime": "50",
        "intonation": "0",
        "fontSpacing": "1",
        "screenEntryMethod": "1",
        "screenOutputMethod": "1",
        "lineSpacing": "0",
        "yCoordinate": "0",
        "whetherToSynchronizePlayback": "0",
        "whetherToPlayText": "0",
        "playbackCount": "1",
        "flashingFrequency": "5",
        "backgroundColor": "8",
        "foregroundColor": "FFFF00",
        "textContent": "",
        "fontStyle": "0",
        "displayAreaWidth": "768",
        "playbackDuration": "50",
        "displayAreaHeight": "64",
        "volume": "0",
        "xCoordinate": "0",
        "screenEntrySpeed": "1",
        "horizontalAlignment": "2",
        "playSpecialEffects": "0",
        "setUpTheSpeaker": "0",
        "flickerSpeed": "0",
        "specialEffectsSpeed": "1",
        "fontSize": "20",
        "verticalAlignment": "2",
        "speechSpeed": "0",
        "font": "3"
      },
      isLocked :false,
    }
  },
  props:{
    mode:{    //add edit
      type:String,
      default:""
    },
    type: {   //template board
      type: String,
      default: ""
    },
    visible:{
      type:Boolean,
      default:false
    },
    screenSize:{
      type:String,
      default:""
    },
    tpl:{
      type:Object,
      default:()=>{}
    }
  },
  components:{
    BoardPreview, BoardTplPreview
  },
  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();
        }
      },
      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();
      }
    }
  },
  mounted() {
  },
  created() {
    this.getDicts('iot_devices_font_color').then(res => {
      this.colorList = res.data;
      // console.log(this.colorList, "字体颜色");
    })
    this.getDicts('iot_device_font_inScreen_mode').then(res => {
      this.inScreenModeList = res.data
      // console.log(this.inScreenModeList, "入屏方式");
    })
    this.getDicts('iot_template_category').then(res => {
      this.templateCategoryList = res.data;
    })
    this.getDicts('iot_device_font_size').then(res => {
      this.fontSizeList = res.data;
      // this.dataForm.FONT_SIZE = res.data[1].dictValue
    })
  },
  methods: {
    initData() {
      if(this.isLocked){
        return
      }
      this.isLocked = true;
      setTimeout(()=>{this.isLocked = false}, 300);
      // getTemplateList({id:this.tpl.id}).then(res=>{
      //    console.log(res.data , "++++++++===========");
      // })
      if (this.mode == "add") {
        let tempTpl = null;
        if (this.type == "template") {
          tempTpl = {
            category: this.templateCategoryList[0].dictValue,
            formatStyle: 0,
            content: "",
            fontColor: this.colorList[0].dictValue,
            fontSize: this.fontSizeList[0].dictValue,
            fontType: this.fontTypeList[0].dictValue,
            stopTime: 50,
            inScreenMode: this.inScreenModeList[0].dictValue,
            screenSize: this.screenSize
          }
        }
        else {
          tempTpl = _.merge(this.deviceCttDefault, this.tpl.origin);    //首页弹窗，新增设备项时，需要传设备尺寸过来
        }
        this.dataForm = infoBoardUtils.dialogSourceFormat(tempTpl, this.type, this.mode);
      } else {
        this.dataForm = infoBoardUtils.dialogSourceFormat(this.tpl, this.type, this.mode, this.deviceCttDefault);
      }
      if (this.visible == false && this.mode == "toDevice") {
        this.onSubmit();
      }
    },
    onClose(){
        this.dialogVisible = false;
    },
    // 表单提交
    async onSubmit() {
      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 = infoBoardUtils.dialogSaveFormat(this.dataForm, this.type, this.mode);
  
        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>