|
|
@@ -2,17 +2,33 @@
|
|
|
<!-- 列表选择弹窗 -->
|
|
|
<f-dialog
|
|
|
ref="dialog"
|
|
|
- title="模版配置信息"
|
|
|
+ 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"
|
|
|
+ />
|
|
|
<div class="box">
|
|
|
<div class="box-btns">
|
|
|
- <h4>组件库</h4>
|
|
|
- <grid-layout
|
|
|
+ <h3>组件库</h3>
|
|
|
+ <div class="box-btns-cpns">
|
|
|
+ <div v-for="(item, index) in cpnsList" :key="index" class="box-btns-cpns-cpn">
|
|
|
+ <span class="iconfont" :class="item.classType"></span>
|
|
|
+ <p>{{ item.text }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <grid-layout
|
|
|
:layout.sync="cpnArray"
|
|
|
:col-num="6"
|
|
|
:row-height="30"
|
|
|
@@ -38,7 +54,7 @@
|
|
|
>
|
|
|
{{ item.text }}
|
|
|
</grid-item>
|
|
|
- </grid-layout>
|
|
|
+ </grid-layout> -->
|
|
|
</div>
|
|
|
<div class="box-canvs">
|
|
|
<div class="box-canvs-main">
|
|
|
@@ -72,7 +88,7 @@
|
|
|
</div>
|
|
|
<div class="box-set">
|
|
|
<div class="box-set-form">
|
|
|
- <h3>模版基础配置</h3>
|
|
|
+ <h3>遥控器基础配置</h3>
|
|
|
<f-form
|
|
|
ref="ruleForm"
|
|
|
:form="fromData"
|
|
|
@@ -105,6 +121,7 @@
|
|
|
<script>
|
|
|
import { addTemplateApi } from '@/api/template/addTemplate'
|
|
|
import { formConfig, btnFormConfig } from './config'
|
|
|
+import { cpnsList } from '../../../../mock/cpnsList'
|
|
|
export default {
|
|
|
name: "DetailDialog",
|
|
|
props: {
|
|
|
@@ -133,6 +150,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ cpnsList,
|
|
|
// 数据对象
|
|
|
fromData:{
|
|
|
},
|
|
|
@@ -283,9 +301,32 @@ export default {
|
|
|
&-btns {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- >h4 {
|
|
|
+ >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 {
|
