admin_web/ruoyi-ui/src/views/template/addTemplate/blocks/detailDialog.vue

<template v-if="isShow">
  <!-- 列表选择弹窗 -->
  <f-dialog
    ref="dialog"
    title="遥控器设计器布局配置"
    :initData="handleInitData"
    :isDetermine="dialogType!=='detail'"
    :beforeClose="handleBeforeClose"
    width="1350px"
  >
    <template #contain>
      <h3>遥控器基础配置</h3>
      <f-form
        ref="ruleForm"
        :form="fromData"
        :disabled="dialogType==='detail'"
        :config="fromDataConfig"
        :rules="fromRules"
        label-position="left"
        :key="fromKey"
        :column="4"
      />
      <div class="box">
        <div class="box-btns">
          <h3>组件库</h3>
          <div class="box-btns-cpns">
            <div v-for="(item, index) in cpnsList" :key="index"  class="box-btns-cpns-cpn" @click="addCpns(item)">
              <span class="iconfont" :class="item.classType"></span>
              <p>{{ item.text }}</p>
            </div>
          </div>
          <!-- <grid-layout 
            :layout.sync="cpnArray" 
            :col-num="6" 
            :row-height="30" 
            :min-rows="1" 
            :is-draggable="false" 
            :is-resizable="false"
            :is-mirrored="false" 
            :vertical-compact="true" 
            :margin="[10, 10]" 
            :use-css-transforms="true"
            class="box-btns-items"
          >
            <grid-item 
              v-for="(item, index) in cpnArray" 
              :x="item.x" 
              :y="item.y" 
              :w="item.w" 
              :h="item.h" 
              :i="item.i"
              :key="index"
              class="box-btns-item"
              @click.native="addBtn(item)"
            >
              {{ item.text }}
            </grid-item>
          </grid-layout> -->
        </div>
        <div class="box-canvs">
          <div class="box-canvs-main">
            <grid-layout 
              :layout.sync="pageArray" 
              :col-num="6" 
              :row-height="30" 
              :is-draggable="true" 
              :is-resizable="false"
              :is-mirrored="false" 
              :vertical-compact="false" 
              :prevent-collision="true"
              :margin="[10, 10]" 
              :use-css-transforms="true"
            >
              <grid-item 
                v-for="(item, index) in pageArray" 
                :x="item.x" 
                :y="item.y" 
                :w="item.w" 
                :h="item.h" 
                :i="item.i"
                :key="index"
                @dblclick.native="showSeting(item, index)"
              >
                <span class="box-canvs-main-span">
                  <div style="width: 100%; height: 100%;" v-html="item.dom"></div> 
                  <i @click.stop="removeBtn(index)" class="el-icon-close"></i></span>
              </grid-item>
            </grid-layout>
          </div> 
        </div>
        <div class="box-set">
          <el-tabs type="card" v-model="activeName">
            <el-tab-pane label="按钮基础配置" name="first">
              <f-form
                ref="btnForm"
                :form="btnData"
                :config="btnDataConfig"
                :rules="btnRules"
                label-position="left"
                :column="1"
                :key="btnFromKey"
              />
            </el-tab-pane>
            <el-tab-pane label="按钮样式配置" name="second">
           按钮样式配置
            </el-tab-pane>
          </el-tabs>
          <div><button @click="changeCpns">确定</button><button @click="btnFromShow = false">取消</button></div>

        </div>
      </div>
    </template>
  </f-dialog>
</template>
<script>
import { addTemplateApi } from '@/api/template/addTemplate'
import { formConfig, btnFormConfig } from './config'
import { cpnsList } from '../../../../mock/cpnsList'
export default {
  name: "DetailDialog",
  props: {
    // 表单数据
    rowData:{
      type:Object,
      default: () => ({})
    },
    // 表单类型 add detail edit
    dialogType:{
      type:String,
      default:'add'
    },
    allBase: {
      type: Array,
      default: () => []
    },
    allButton: {
      type: Array,
      default: () => []
    },
    useStatus: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // tab
      activeName: 'first',
      cpnsList,
      // 数据对象
      fromData:{},
      fromDataConfig: [],
      // 表单验证
      fromRules: {
        name: [{required: true, message: '请输入模版名称'}],
        status: [{required: true, message: '请选择状态'}],
        baseId: [{required: true, message: '请选择基础库'}],
      },
      // 表单key
      fromKey:0,
      pageArray: [],

      // 按钮配置相关
      btnFromShow: false,
      btnData: {},
      btnDataConfig: btnFormConfig(),
      btnRules: {
        name:[{required: true, message: '请输入按钮名称'}],
        status:[{required: true, message: '请选择按钮类型'}],
        defValue:[{required: true, message: '请输入默认值'}],
        bandValue:[{required: true, message: '请输入波段值，默认38000'}],
        bootCode:[{required: true, message: '请输入引导码'}],
        bootCodeSend:[{required: true, message: '请输入引导码发送次数'}],
        dateCode:[{required: true, message: '请输入数据码'}],
        overCode:[{required: true, message: '请输入结束码'}],
      },
      btnFromKey: 0,
      currentCpn: 0
    };
  },
  methods: {
    // 显示弹窗
    show() {
      this.fromDataConfig = formConfig.call(this)
      this.$refs.dialog.show();
    },
    // 初始化表单数据
    initFormData(fromData) {
      this.fromData = {
        content:'',
        ...fromData
      }
      this.fromKey++;
    },
    // 初始化按钮表单数据
    initBtnFormData(fromData) {
      this.btnData = {
        content: '',
        ...fromData
      }
      if (Object.keys(this.btnData).length === 0) {
        this.btnFromKey = 0
        return
      } 
      this.btnFromKey++
    },
    // 详情
    async handleInitData() {
      const {dialogType,rowData} = this
      if(dialogType === 'add') {
        this.pageArray = []
        this.initFormData({})
        return
      }
      // 调接口获取详情
      const res = await addTemplateApi.configDetail({ id: rowData.id });
      if (res.code !== 200) return this.initFormData({})
      const from = { ...res.data, baseId: res.data.baseId.toString() }
      this.pageArray = JSON.parse(res.data.components).map((item, index) => ({
        ...item,
        x: Number(item.x),
        y: Number(item.y),
        w: Number(item.w),
        h: Number(item.h),
        i: index,
        text: item.name
      }))
      this.initFormData(from);
    },
    // 关闭之前回调.
    async handleBeforeClose(type) {
      if (type !='ok') {
        this.btnFromShow = false
        return true
      };
      const validate = await this.$refs.ruleForm.validate();

      if (!validate) return false;
      const params = {
        ...this.fromData,
        components: JSON.stringify(this.pageArray),
        baseId: Number(this.fromData.baseId)
      }
      //  调接口更新数据
      const res = await addTemplateApi.configAddOrEdit(params);
      if (res.code !== 200) {
        this.$modal.msgError(res.msg)
        return false
      }

      this.$emit('updateList')
      this.initFormData({})
      this.btnFromShow = false
      return true
    },
    addCpns(item) {
      console.log(item)
      this.pageArray.push({ w: 2, h: 2, x: 1, y: this.pageArray.map(item => item?.y).sort()[-1] || 1, i: this.pageArrayCount, ...item })
    },
    removeBtn(index) {
      this.pageArray.splice(index, 1)
    },
    showSeting(item, index) {
      if (Object.keys(item).length == 0) return 
      this.currentCpn = index
      const from = { ...item }
      this.initBtnFormData(from)
      this.btnFromShow = true
    },
    changeCpns() {
      this.pageArray.splice(this.currentCpn, 1, { ...this.btnData })
      this.btnFromShow = false
    }
  },
  computed: {
    pageArrayCount() {
      return this.pageArray.length;
    },
    cpnArray() {
      return this.allButton.map((item, index) => ({ x: 0, y: index*2, w: 2, h: 2, i: index, text: item.name, ...item }))
    }
  },

}
</script>
<style scoped lang="scss">
.box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  &-btns, &-canvs {
    width: 375px;
    height: 770px;
    border: 1px solid #000;
  }
  &-btns {
    display: flex;
    flex-direction: column;
    >h4, >h3 {
      text-align: center;
    }
    &-cpns {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .box-btns-cpns-cpn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 80px;
        height: 80px;
        background: #f5f5f5;
        margin-bottom: 15px;
        span {
          font-size: 28px;
        }
        p {
          margin: 0;
          padding: 0;
        }
      }
    }
    &-items {
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }  
    }
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      background-color:#0a0a23;
      color: #fff;
      border:none;
      border-radius: 10px;
      box-shadow: 0px 0px 2px 2px rgb(0,0,0);

      span {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          font-size: 16px;
        }
      }
    }
  }
  &-canvs {
    position: relative;
    background: url(../../../../assets/images/mobile-bg.jpg) no-repeat;
    background-size: 100%;
    border: none;
    margin: 0 20px;
    &-main {
      position: absolute;
      top: 90px;
      left: 20px;
      width: 333px;
      height: 585px;
      background: #fff;
      border: 1px solid #000;
      border-radius: 4px;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .box-canvs-main-span {
        position: relative;
        
      }
    }
  }
  &-set {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 667px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    h3 {
      font-weight: bold;
    }
  }
}
</style>