完成b端页面-通栏管理、组件管理的修改（通栏版式的初步更改）

src/api/module.js

@@ -1,6 +1,23 @@
 // 组件
 import request from '@/utils/request'
 
+// 获取所有通栏
+export const getAllSector = (data) => {
+    return request({
+        url: '/public/getAllSector',
+        method: 'post',
+        data
+    })
+}
+// 获取所有组件类型
+export const getComponentType = (data) => {
+    return request({
+        url: '/public/getComponentType',
+        method: 'post',
+        data
+    })
+}
+
 //获取组件列表
 export const getComponentList = (data) => {
     return request({

src/api/plate.js

@@ -18,9 +18,9 @@ export const getAllSize = (data) => {
     })
 }
 // 获取通栏尺寸模版
-export const getSectorPlace = (data) => {
+export const getAllSectorPlace = (data) => {
     return request({
-        url: '/public/getSectorPlace',
+        url: '/public/getAllSectorPlace',
         method: 'post',
         data
     })
@@ -69,4 +69,13 @@ export const getSectorInfo = (data) => {
         method: 'post',
         data
     })
+}
+
+// 获取所有组件
+export const getAllComponent = (data) => {
+    return request({
+        url: '/public/getAllComponent',
+        method: 'post',
+        data
+    })
 }

src/router/index.js

@@ -1481,6 +1481,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/plateDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/plateDetail'),
+        meta: {
+          title: '添加通栏',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // --------------通栏版式管理fr--------------end---------
 ]
 

src/store/modules/module.js

@@ -1,4 +1,7 @@
-import { getStaticResourceList,addStaticResource,delStaticResource,upStaticResource} from '@/api/module'
+import { getStaticResourceList,addStaticResource,delStaticResource,
+    upStaticResource,getAllSector,getComponentType,getComponentList,
+    addComponent,delComponent,updateComponent,getComponentInfo} from '@/api/module'
+
 
 const state = {
 
@@ -54,6 +57,76 @@ const actions = {
             })
         })
     },
+    // 获取所有通栏
+    getAllSector({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getAllSector(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 获取所有组件类型
+    getComponentType({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getComponentType(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 获取组件列表
+    getComponentList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getComponentList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 添加组件
+    addComponent({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addComponent(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 删除组件
+    delComponent({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delComponent(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 更新组件
+    updateComponent({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            updateComponent(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 获取组件详情
+    getComponentInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getComponentInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
 }
 export default {
     namespaced: true,

src/store/modules/plate.js

@@ -1,4 +1,5 @@
-import { getAllTemplate,getAllSize,getSectorPlace,getSectorList,addSector,delSector,updateSector,getSectorInfo} from '@/api/plate'
+import { getAllTemplate,getAllSize,getAllSectorPlace,getSectorList,
+    addSector,delSector,updateSector,getSectorInfo,getAllComponent} from '@/api/plate'
 
 
 
@@ -31,9 +32,9 @@ const actions = {
             })
         })
     },
-    getSectorPlace({commit},data) {
+    getAllSectorPlace({commit},data) {
         return new Promise((resolve, reject) => {
-            getSectorPlace(data).then(response => {
+            getAllSectorPlace(data).then(response => {
                 resolve(response)
             }).catch(error => {
                 reject(error)
@@ -76,6 +77,24 @@ const actions = {
             })
         })
     },
+    getAllComponent({commit},data) {
+        return new Promise((resolve, reject) => {
+            getAllComponent(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    getSectorInfo({commit},data) {
+        return new Promise((resolve, reject) => {
+            getSectorInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
 }
 export default {
     namespaced: true,

src/views/componentGallery/module.vue

@@ -7,49 +7,35 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">组件名称</div>
-                        <el-input v-model="componentName" clearable placeholder="请输入组件名称"></el-input>
+                        <el-input v-model="apiData.component_name" clearable placeholder="请输入组件名称"></el-input>
                     </div>
                 </el-col>
-                <el-col :span="6" class="left">
-                    <div class="searchBox">
-                        <div class="searchTitle">所属通栏</div>
-                        <el-input v-model="componentName" clearable placeholder="请输入通栏名称"></el-input>
-                    </div>
-                </el-col>
-                <el-col :span="6" class="left">
+               <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">所属风格</div>
-                        <el-select v-model="templateName" clearable placeholder="请选择风格">
-                            <el-option v-for="item in options" :key="item.id" :label="item.sector_name"
-                                :value="item.id">
+                        <div class="searchTitle">组件类型</div>
+                         <el-select v-model="apiData.type_id" clearable placeholder="请选择组件类型" @change="getTypeList">
+                            <el-option v-for="item in type_options" :key="item.id" :label="item.com_typename" :value="item.id">
                             </el-option>
                         </el-select>
                     </div>
                 </el-col>
-                <el-col :span="6" class="right">
-                    <div class="btnList">
-                        <button class="search" @click="goSearch">搜索</button>
-                        <button class="reset" @click="goReset">重置</button>
-                    </div>
-                </el-col>
-            </el-row>
-            <el-row class="rowMargin">
-                <el-col :span="6" class="left">
-                    <div class="searchBox">
-                        <div class="searchTitle">组件名称</div>
-                        <el-input v-model="componentName" clearable placeholder="请输入组件名称"></el-input>
-                    </div>
-                </el-col>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">尺寸</div>
                         <div class="sizeBox">
-                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="宽"></el-input> </div>
-                            <div class="sizeInputSymbol">*</div>
-                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="高"></el-input></div>
+                            <div class="sizeInput"><el-input v-model="apiData.width" clearable placeholder="宽"></el-input> </div>
+                            <div class="sizeInputSymbol sizeStar"> * </div>
+                            <div class="sizeInput"><el-input v-model="apiData.height" clearable placeholder="高"></el-input></div>
                         </div>
                     </div>
                 </el-col>
+                 <el-col :span="6" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="getData">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+                
             </el-row>
 
 
@@ -60,13 +46,11 @@
             <button class="btn" @click="addWebsite">添加组件</button>
             <el-row>
                 <template>
-                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="moduleLoading">
-                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="component_type" label="组件编号" width="90"></el-table-column>
                         <el-table-column prop="component_name" label="组件名称" width=""></el-table-column>
                         <el-table-column prop="component_size" label="尺寸" width=""></el-table-column>
-                        <el-table-column prop="component_skin" label="所属皮肤" width=""></el-table-column>
-                        <el-table-column prop="component_skin" label="所属风格" width=""></el-table-column>
-                        <el-table-column prop="component_page" label="所属页面" width=""></el-table-column>
+                        <el-table-column prop="com_typename" label="组件分类" width=""></el-table-column>
                         <el-table-column prop="created_at" label="添加时间" width=""></el-table-column>
                         <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
                         <el-table-column fixed="right" label="操作" width="200">
@@ -104,73 +88,132 @@
         <!-- 弹出框 编辑 start----------------------------------------------------------->
         <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
             :close-on-click-modal="false">
-            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                 <div class="dialogText">
                     <el-form-item label="组件名称:" prop="component_name">
                         <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
                     </el-form-item>
-                    <el-form-item label="所属页面:" prop="plateName">
-                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属页面">
-                            <el-option>首页</el-option>
-                            <el-option>列表页</el-option>
-                        </el-select>
+                    <el-form-item label="组件编号:" prop="component_type">
+                        <el-input v-model="ruleForm.component_type" placeholder="输入组件编号"></el-input>
                     </el-form-item>
-                    <el-form-item label="所属风格:" prop="plateName">
-                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属页面">
-                            <el-option>简约</el-option>
-                            <el-option>黑暗</el-option>
-                        </el-select>
+                    <el-form-item label="组件关键词：" prop="component_keyword" class="custom-align-right">
+                        <template #label>
+                        <span class="askBox">
+                            组件关键词：
+                            <el-tooltip class="item" effect="dark" content="皮肤关键词，如：黑色、卡通、英雄。" placement="top">
+                            <i class="el-icon-question"></i>
+                            </el-tooltip>
+                        </span>
+                        </template>
+                        <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
                     </el-form-item>
-                    <el-form-item label="风格id:" prop="component_name">
-                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
+                    <el-form-item label="组件展示图:" prop="component_img" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload" >
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl" :src="logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.webLogo">
+                                    <!-- <input type="hidden" name="logo" v-model="logoUrl"> -->
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl" class="delete-button"
+                                    @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
                     </el-form-item>
-                    <el-form-item label="所属皮肤:" prop="plateName">
-                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属皮肤">
-                            <el-option>简约</el-option>
-                            <el-option>黑暗</el-option>
+                     <el-form-item label="组件分类:" prop="type_id">
+                        
+                        <el-select v-model="ruleForm.type_id" placeholder="请选择组件分类" @change="getColumnType(ruleForm.type_id)">
+                           <el-option v-for="item in type_options" :key="item.id" 
+                            :label="item.com_typename" :value="item.id">
+                            </el-option>
                         </el-select>
                     </el-form-item>
-                    <el-form-item label="皮肤id:" prop="component_name">
-                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
-                    </el-form-item>
-                    <el-form-item label="所属通栏:" prop="plateName">
-                        <el-cascader v-model="ruleForm.plateName" :options="styleOptions" :props="cascaderProps"
-                            :disabled="this.dialogName === '编辑'" @change="handleChange" placeholder="请选择关联的版块名称"
-                            clearable>
-                        </el-cascader>
+                    <el-form-item label="组件尺寸:" prop="component_width" v-if="ruleForm.type_id != 11">
+                            <div class="sizeInput"><el-input v-model="ruleForm.component_width" clearable placeholder="宽"></el-input> </div>
+                            <div class="sizeInputSymbol">*</div>
+                            <div class="sizeInput"><el-input v-model="ruleForm.component_height" clearable placeholder="高"></el-input></div>
                     </el-form-item>
-                    <el-form-item label="通栏id:" prop="component_name">
-                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
+                   <el-form-item label="组件展示字段:" prop="listType" class="custom-align-right" v-if="[1,2,3,4,5,6,7,8,9,14].includes(ruleForm.type_id)">
+                        <!-- <div class="formLabelFloatBox"> -->
+                            <!-- <div class="labelTitleStyle"> -->
+                                
+                                <!-- <el-tooltip class="item" effect="dark" content="如需修改，请去其他设置-单页中进行修改/添加。" placement="top">
+                                    <i class="el-icon-question"></i>
+                                </el-tooltip> -->
+                            <!-- </div> -->
+                            <el-checkbox-group v-model="ruleForm.listType">
+                                <el-checkbox  v-for="item in column_options" :key="item" value="item" disabled>{{item}}</el-checkbox>
+
+                            </el-checkbox-group>
+                        <!-- </div> -->
                     </el-form-item>
-                    <el-form-item label="尺寸:" prop="plateName">
-                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属皮肤">
-                            <el-option>600x480</el-option>
-                            <el-option>300x200</el-option>
+                     <!-- <el-form-item label="组件所需字段:" prop="listType">
+                        <el-select v-model="ruleForm.listType" placeholder="请选择组件所需字段">
+                           <el-option v-for="item in column_options" :key="item.id" 
+                            :label="item.column_name" :value="item.id">
+                            </el-option>
                         </el-select>
+                    </el-form-item> -->
+                    
+                    
+                    <!-- 组件分类：1：资讯-头条组件；2：资讯-轮播组件；3：资讯-推荐图类组件；4：资讯-最新类组件；5：资讯-推荐类；6：资讯-热点类组件；
+                     7：资讯-栏目类组件；8：列表类组件；9：详情类组件；10：二级导航栏类组件；11：广告类；12：静态资源类；13：底部导航类； -->
+                    <el-form-item label="含有图片新闻数量:" prop="img_num" v-if="[1,2,3,4,5,6,7,14].includes(ruleForm.type_id)">
+                        <el-input v-model="ruleForm.img_num" placeholder="请输入含有图片新闻数量"></el-input>
                     </el-form-item>
-                    <el-form-item label="组件关键词:" prop="component_code">
-                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
-                            :disabled="this.dialogName === '编辑'"></el-input>
+                    <el-form-item label="含有文字新闻数量:" prop="text_num" v-if="[1,2,3,4,5,6,7,14].includes(ruleForm.type_id)">
+                        <el-input v-model="ruleForm.text_num" placeholder="请输入含有文字新闻数量"></el-input>
                     </el-form-item>
-                    <el-form-item label="含有图片新闻数量:" prop="component_code">
-                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
-                            :disabled="this.dialogName === '编辑'"></el-input>
+                    <el-form-item label="含有子级图片新闻数量:" prop="child_imgnum" v-if="ruleForm.type_id == 7 || ruleForm.type_id == 14">
+                        <el-input v-model="ruleForm.child_imgnum" placeholder="请输入含有子级图片新闻数量"></el-input>
                     </el-form-item>
-                    <el-form-item label="含有文字新闻数量:" prop="component_code">
-                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
-                            :disabled="this.dialogName === '编辑'"></el-input>
+                    <el-form-item label="含有子级文字新闻数量:" prop="child_textnum" v-if="ruleForm.type_id == 7 || ruleForm.type_id == 14">
+                        <el-input v-model="ruleForm.child_textnum" placeholder="请输入含有子级文字新闻数量"></el-input>
                     </el-form-item>
-                    <el-form-item label="组件展示图:" prop="component_img" :label-width="formLabelWidth"
-                        :class="['custom-form-item']" class="custom-align-right">
+                     <el-form-item label="每页新闻数量:" prop="pageSize" v-if="ruleForm.type_id == 8">
+                        <el-input v-model="ruleForm.pageSize" placeholder="请输入每页新闻数量"></el-input>
+                    </el-form-item>
+                    <el-form-item label="广告类型:" prop="ad_type" v-if="ruleForm.type_id == 11 || ruleForm.type_id == 14">
+                         <el-select v-model="ruleForm.ad_type" placeholder="请选择广告类型">
+                            <el-option :value="1" label="文字类型">文字类型</el-option>
+                            <el-option :value="2" label="图文类型">图文类型</el-option>
+                        </el-select>
+                        <!-- <el-input v-model="ruleForm.ad_type" placeholder="请输入广告类型"></el-input> -->
+                    </el-form-item>
+                    <el-form-item label="广告尺寸:" prop="" v-if="ruleForm.type_id == 11 || ruleForm.type_id == 14">
+                         <div class="sizeInput"><el-input v-model="ruleForm.ad_width" clearable placeholder="宽" width="40px"></el-input> </div>
+                            <div class="sizeInputSymbol">*</div>
+                            <div class="sizeInput"><el-input v-model="ruleForm.ad_height" clearable placeholder="高"></el-input></div>
+                    </el-form-item>
+                    <el-form-item label="广告默认图:" prop="ad_img" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right" v-if="ruleForm.type_id == 11 || ruleForm.type_id == 14">
                         <div class="uploaderBox">
                             <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
+                            <div class="avatar-upload-container" @mouseenter="adHovering = true"
+                                @mouseleave="adHovering = false">
                                 <!-- 上传组件 -->
                                 <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName === '编辑'">
+                                    :before-upload="beforeAdUpload">
                                     <!-- 预览图片 -->
-                                    <img v-if="logoUrl" :src="logoUrl" class="avatar">
+                                    <img v-if="adLogoUrl" :src="adLogoUrl" class="avatar">
                                     <!-- 上传图标 -->
                                     <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                                     <div v-else class="chooseImgDiv">
@@ -179,18 +222,23 @@
                                             <div>选择图片</div>
                                         </div>
                                     </div>
-                                    <input type="hidden" name="logo" v-model="ruleForm.webLogo">
+                                    <input type="hidden" name="logo" v-model="ruleForm.ad_img">
                                     <!-- <input type="hidden" name="logo" v-model="logoUrl"> -->
                                 </el-upload>
                                 <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
-                                    @click="handleDelete">
+                                <div v-if="adHovering && adLogoUrl" class="delete-button"
+                                    @click="handleAdDelete">
                                     <i class="el-icon-delete"></i>
                                 </div>
                             </div>
                             <!--图片上传组件 end ------------------------------------------------------------>
                         </div>
                     </el-form-item>
+                    <el-form-item label="栏目数量:" prop="num" v-if="ruleForm.type_id == 10">
+                        <el-input v-model="ruleForm.num" placeholder="请输入栏目数量"></el-input>
+                    </el-form-item>
+                    
+                    
                 </div>
                 <div class="dialogBtn">
                     <el-button type="info" @click="cancelForm">取消</el-button>
@@ -208,12 +256,11 @@ import tableTitle from './components/tableTitle.vue';
 
 //引入公用样式
 import '@/styles/global.less';
-import { getComponentList, addComponent, delComponent, updateComponent, getComponentInfo } from '@/api/module'
-import { getSectorList } from '@/api/plate'
-import { getTemplateClass } from '@/api/style'
+import tagInput from '../../components/InputTag/index.vue';
 export default {
     components: {
         tableTitle,//表格标题-
+        tagInput
     },
     data() {
         const validateEmpty = (rule, value, callback) => {
@@ -223,20 +270,30 @@ export default {
                 callback()
             }
         }
+        const validateArray = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
         return {
             // 1.1 初始化数据
             tableDivTitle: "组件列表",  //列表标题
             dialogTableVisible: false,      //编辑弹框
             dialogName: '编辑', //编辑弹窗名称
-            moduleLoading: true, //表格数据加载中
+            // moduleLoading: true, //表格数据加载中
 
             tableData: [],//表格数据
-            options: [],//版块列表
+            // options: [],//版块列表
             activeid: "", //活动id
-            styleOptions: [],//关联版块
-            plateOptions: [],//关联版块
+            // styleOptions: [],//关联版块
+            // plateOptions: [],//关联版块
             selectedId: '',
-            selectedOptions: [],
+            // selectedOptions: [],
+            type_options: [],    //组件分类
+            column_options: [], //组件所需字段
+            tags: [],      //组件关键词
             cascaderProps: {
                 value: "id", // 指定实际表示值的字段为id
                 label: "name", // 指定实际表示显示文本的字段为name
@@ -245,10 +302,12 @@ export default {
                 children: 'children',
             },
 
-
-            // 1.2 搜索框相关
-            templateName: '', //版块名称
-            componentName: '', //组件名称
+            apiData: {              //搜索框
+                component_name: '',
+                type_id: '',
+                width: '',
+                height: '',
+            },
 
 
             //3.4 上传logo图片
@@ -256,7 +315,17 @@ export default {
             hovering: false, // 鼠标悬浮状态 悬浮时显示删除
 
             value: '',
-
+            //3.6 上传广告图片
+            adLogoUrl: '',
+            adHovering: false, // 鼠标悬浮状态 悬浮时显示删除
+            // 广告图存到静态资源
+            imageInfo: {
+                name: '',
+                img_alias: '',
+                img_size: '',
+                img_type: '',
+                img_url: '',
+            },
 
             // 分页相关
             page: 1,
@@ -265,77 +334,72 @@ export default {
 
 
             formLabelWidth: '', //广告示例图相关
-
-
-            template_id: '', //关联风格id
-            sector_id: '', //关联版块id
-
             ruleForm: {
-                plateName: '', //关联版块名称
                 component_name: '', //组件名称
-                component_code: '', //组件代码
-                component_img: '',//组件展示
+                component_type: '', //组件编号
+                component_keyword: [], //组件关键词
+                component_width: '', //组件宽度
+                component_height: '', //组件高度
+                component_img: '',//组件展示图
+                type_id: '', //组件分类
+                listType: [] , //组件所需字段
+                img_num: '', //含有图片新闻数量
+                text_num: '', //含有文字新闻数量
+                child_imgnum: '', //含有子级图片新闻数量
+                child_textnum: '', //含有子级文字新闻数量
+                pageSize: '', //每页新闻数量
+                ad_type: '', //广告类型
+                ad_width: '', //广告宽度
+                ad_height: '', //广告高度
+                ad_img: '', //广告示例图
+                num: '', //栏目数量
             },
 
             rules: {
-                plateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 component_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-                component_code: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_type: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_keyword: [{ required: true, trigger: 'blur', validator: validateArray }],
+                component_width: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_height: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 component_img: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-            }
+                type_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_width: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_height: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            },
         }
     },
     methods: {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            if (this.templateName != '' || this.componentName != '') {
-                getComponentList({
-                    page: this.page,
-                    page_size: this.pageSize,
-                    template_class_id: '',
-                    component_name: this.componentName,
-                    sector_id: this.templateName,
-                }).then(data => {
-                    console.log(data);
-                    this.tableData = data.data.data
-                    this.total = data.data.total
-                })
-            } else {
-                getComponentList({
-                    page: this.page,
-                    page_size: this.pageSize
-                }).then(data => {
-                    console.log('组件', data);
-                    if (data.code == 200) {
-                        this.moduleLoading = false
-                        this.tableData = data.data.data
-                        this.total = data.data.total
-                    }
-                })
-            }
-        },
-        //获取版块列表
-        getList() {
-            getSectorList({
+            const data = {
                 page: this.page,
-                page_size: 1000,
-            }).then(data => {
-                console.log('获取版块', data.data.data);
-                this.options = data.data.data
-            })
-
-            getTemplateClass().then(data => {
-                console.log("风格", data.data);
-                this.styleOptions = data.data
-                for (let item of this.styleOptions) {
-                    item.children = []
+                page_size: this.pageSize,
+                component_name: this.apiData.component_name ?? '',
+                type_id: this.apiData.type_id ?? null,
+                width: this.apiData.width ?? null,
+                height: this.apiData.height ?? null,
+            }
+            this.$store.dispatch('module/getComponentList',data).then(res => {
+                // console.log('组件', res.code == 200);
+                if (res.code == 200) {
+                    // this.moduleLoading = false
+                    this.tableData = res.data.data
+                    this.total = res.data.total
+                    for (let i = 0; i < res.data.data.length; i++) {
+                        const item = res.data.data[i];
+                        this.tableData[i].component_size = item.component_width + ' * ' + item.component_height;
+                    }
                 }
+            }).catch(err => {
+                this.$message({
+                    type: 'error',
+                    message: this.$message
+                });
             })
         },
         //1.2 删除内容
         deleteRow(id) {
-            console.log(id);
             let data = new FormData()
             data.append('id', id)
             this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
@@ -343,11 +407,7 @@ export default {
                 cancelButtonText: '取消',
             }).then(() => {
                 console.log("当前删除：" + id)
-
-                delComponent({
-                    id: id
-                }).then(data => {
-                    console.log(data);
+                this.$store.dispatch('module/delComponent',{id: id}).then(res => {
                     if (data.code = 200) {
                         this.$message({
                             message: '删除成功',
@@ -360,8 +420,12 @@ export default {
                             type: 'error'
                         })
                     }
-                })
-
+                }).catch(() => {
+                    this.$message({
+                        type: 'warning',
+                        message: '已取消删除'
+                    });
+                });
             }).catch(() => {
                 this.$message({
                     type: 'warning',
@@ -369,54 +433,6 @@ export default {
                 });
             });
         },
-        //1.3 版块发生改变时 获取版块下的组件列表
-
-        // handleMouseEnter(event) {
-        //     const currentValue = this.ruleForm.plateName[this.ruleForm.plateName.length - 1];
-        //     console.log('当前级的值:', currentValue);
-        //     console.log('当前级:', event);
-        // },
-
-        handleChange(value) {
-            console.log('val', value);
-            this.template_id = value[0]
-            this.sector_id = value[1]
-            console.log("当前选中的父级：", this.template_id);
-            console.log("当前选中的子级：", this.sector_id);
-            // 当选中的选项发生变化时触发
-            if (value.length > 0) {
-                const selectedValue = value[value.length - 1]; // 获取最后一级选中的值
-                this.fetchChildren(selectedValue); // 请求对应的子选项
-
-            }
-        },
-        fetchChildren(parentValue) {
-            // 根据父级值请求子选项的接口
-            getSectorList({
-                page: this.page,
-                page_size: 1000,
-                template_class_id: parentValue
-            }).then(data => {
-                console.log('data', data.data.data);
-                this.plateOptions = data.data.data
-                this.styleOptions = this.styleOptions.map(item => {
-                    if (item.id === parentValue) {
-                        const children = []
-                        for (let item of this.plateOptions) {
-                            children.push({
-                                id: item.id,
-                                name: item.sector_name,
-                            })
-                        }
-                        item.children = children
-                    }
-                    return item
-                })
-                console.log(this.styleOptions);
-
-            })
-        },
-
         //1.4 列表内容分页
         //直接跳转
         handleSizeChange(val) {
@@ -430,42 +446,46 @@ export default {
         },
         // 1.6 搜索按钮
         goSearch() {
-            getComponentList({
+            const data = {
                 page: this.page,
                 page_size: this.pageSize,
-                template_class_id: '',
-                component_name: this.componentName,
-                sector_id: this.templateName,
-            }).then(data => {
-                console.log(data);
-                this.tableData = data.data.data
-                this.total = data.data.total
+                component_name: this.apiData.component_name ?? '',
+                type_id: this.apiData.type_id ?? null,
+                width: this.apiData.width ?? null,
+                height: this.apiData.height ?? null,
+            }
+            this.$store.dispatch('module/getComponentList',data).then(res => {
+                if (res.code == 200) {
+                    // this.moduleLoading = false
+                    this.tableData = res.data.data
+                    this.total = res.data.total
+                    for (let i = 0; i < res.data.data.length; i++) {
+                        const item = res.data.data[i];
+                        this.tableData[i].component_size = item.component_width + ' * ' + item.component_height;
+                        // console.log("456",item.pagetype);
+
+                    }
+                }
+            }).catch(err => {
+                this.$message({
+                    type: 'error',
+                    message: this.$message
+                });
             })
         },
         //1.7 重置按钮
         goReset() {
-            this.templateName = ""
-            this.componentName = ""
+            this.apiData.component_name = ""
+            this.apiData.type_id = ""
+            this.apiData.width = ""
+            this.apiData.height = ""
             this.page = 1
             this.pageSize = 10
             this.getData()
         },
         //列表和分页相关 end ------------------------------------------------------------>
 
-        //1.8 添加
-        addWebsite() {
-            this.dialogTableVisible = true
-            this.dialogName = "添加"
-
-            //添加时清空回显回来的数据
-            this.ruleForm.plateName = '' //关联版块
-            this.ruleForm.component_name = '' //组件名称
-            this.ruleForm.component_code = '' //组件代码
-            this.ruleForm.component_img = '' //组件展示图
-            this.logoUrl = '' //组件展示图
-
-        },
-
+       
 
         //1.9 编辑
         goEdit(id, val) {
@@ -473,19 +493,35 @@ export default {
             this.activeid = id
             this.dialogTableVisible = true
             console.log(id, val);
-            this.getList()
+            this.getData()
 
             //数据回显
-            this.template_id = val.template_class_id
-            this.sector_id = val.sector_id
-            this.ruleForm.plateName = val.template_class_name //关联版块
-            this.ruleForm.plateName = [val.template_class_id, val.sector_id] // 组合成数组
-            this.ruleForm.plateName = [this.template_id, this.sector_id] // 组合成数组
+            console.log("编辑回显",val);
             // this.ruleForm.plateName = val.template_class_name+'/'+val.sector_name //组件名称
             this.ruleForm.component_name = val.component_name //组件名称
-            this.ruleForm.component_code = val.component_code //组件代码
+            this.ruleForm.component_type = val.component_type //组件编号
+            this.ruleForm.component_keyword = JSON.parse(val.component_keyword) || [] // 解析 JSON 字符串为数组，若解析失败则返回空数组
+            this.tags = JSON.parse(val.component_keyword) || []
+            this.columns = JSON.parse(val.component_column)
+            this.column_options = this.columns.listType
+            this.ruleForm.component_width = val.component_width //组件宽度
+            this.ruleForm.component_height = val.component_height //组件高度
             this.ruleForm.component_img = val.component_img //组件展示图
+            this.ruleForm.type_id = val.type_id //组件分类
+            this.ruleForm.img_num = val.img_num  //含有图片新闻数量
+            this.ruleForm.text_num = val.text_num //含有文字新闻数量
+            this.ruleForm.child_imgnum = val.child_imgnum //组件子级图片新闻数量
+            this.ruleForm.child_textnum = val.child_textnum //组件子级文字新闻数量
+            this.ruleForm.pageSize = val.pageSize //组件每页数量
+            this.ruleForm.ad_type = val.ad_type //广告类型
+            this.ruleForm.ad_width = val.ad_width //广告宽度
+            this.ruleForm.ad_height = val.ad_height //广告高度
+            this.ruleForm.ad_img = val.ad_img //广告示例图片
+            this.ruleForm.num = val.num //栏目数量
             this.logoUrl = val.component_img //组件展示图
+            this.adLogoUrl = val.ad_img //广告示例图
+            this.ruleForm.ad_imgid = val.ad_imgid
+            this.imageInfo = JSON.parse(val.adimg_info)
         },
 
 
@@ -501,76 +537,137 @@ export default {
                 }
             });
             if (this.dialogName == "添加") {
-                addComponent({
-                    template_id: this.template_id,
-                    sector_id: this.sector_id,
+                // console.log("添加", Array.isArray(this.imageInfo));
+                let img_info = JSON.stringify(this.imageInfo)
+                // console.log("添111加",img_info);
+                const data = {
                     component_name: this.ruleForm.component_name,
+                    component_type: this.ruleForm.component_type,
+                    component_keyword: JSON.stringify(this.ruleForm.component_keyword),
+                    component_width: this.ruleForm.component_width,
+                    component_height: this.ruleForm.component_height,
                     component_img: this.ruleForm.component_img,
-                    component_code: this.ruleForm.component_code,
-                }).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
+                    type_id: this.ruleForm.type_id,
+                    num: this.ruleForm.listType,
+                    img_num: this.ruleForm.img_num,
+                    text_num: this.ruleForm.text_num,
+                    child_imgnum: this.ruleForm.child_imgnum,
+                    child_textnum: this.ruleForm.child_textnum,
+                    pageSize: this.ruleForm.pageSize,
+                    ad_type: this.ruleForm.ad_type,
+                    ad_width: this.ruleForm.ad_width,
+                    ad_height: this.ruleForm.ad_height,
+                    ad_img: this.ruleForm.ad_img,
+                    num: this.ruleForm.num,
+                    ad_imgid: this.ruleForm.ad_imgid,
+                    // 修正错误，使用之前定义的 img_info 变量
+                    img_info: img_info,
+                }
+                // console.log("111111111",data);
+                this.$store.dispatch('module/addComponent',data).then(data => {
+                     if (data.code == 200) {
                         this.$message({
                             message: '添加成功',
                             type: 'success'
                         })
                         this.dialogTableVisible = false
                         this.getData()
-                    } else if (data.code == 0) {
-                        this.$message({
-                            message: data.message,
-                            type: 'error'
-                        })
-                        this.dialogTableVisible = true
-                        return
-                    } else {
+                    }else{
                         this.$message({
                             message: data.message,
                             type: 'error'
                         })
-                        this.dialogTableVisible = true
-                        return
                     }
                 })
             }
-
-            if (this.website_id == '') {
-                this.$message({
-                    message: '请输入并选择网站名称',
-                    type: 'error'
-                })
-                this.dialogVisible = true
-            }
             if (this.dialogName == "编辑") {
-                updateComponent({
+                let img_info = JSON.stringify(this.imageInfo)
+                const edit_data = {
                     id: this.activeid,
                     component_name: this.ruleForm.component_name,
-                }).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
+                    component_type: this.ruleForm.component_type,
+                    component_keyword: JSON.stringify(this.ruleForm.component_keyword),
+                    component_width: this.ruleForm.component_width,
+                    component_height: this.ruleForm.component_height,
+                    component_img: this.ruleForm.component_img,
+                    type_id: this.ruleForm.type_id,
+                    num: this.ruleForm.listType,
+                    img_num: this.ruleForm.img_num,
+                    text_num: this.ruleForm.text_num,
+                    child_imgnum: this.ruleForm.child_imgnum,
+                    child_textnum: this.ruleForm.child_textnum,
+                    pageSize: this.ruleForm.pageSize,
+                    ad_type: this.ruleForm.ad_type,
+                    ad_width: this.ruleForm.ad_width,
+                    ad_height: this.ruleForm.ad_height,
+                    ad_img: this.ruleForm.ad_img,
+                    num: this.ruleForm.num,
+                    ad_imgid: this.ruleForm.ad_imgid,
+                    // 修正错误，使用之前定义的 img_info 变量
+                    img_info: img_info,
+                }
+                this.$store.dispatch('module/updateComponent',edit_data).then(data => {
+                     if (data.code == 200) {
                         this.$message({
                             message: '编辑成功',
                             type: 'success'
                         })
                         this.dialogTableVisible = false
-                    }
-                    if (data.code == 0) {
+                        this.getData()
+                    }else{
                         this.$message({
                             message: data.message,
                             type: 'error'
                         })
-                        this.dialogTableVisible = true
                     }
-                    this.getData()
                 })
             }
 
         },
+         //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            // this.
+            this.ruleForm.component_name = '' //组件名称
+            this.ruleForm.component_type = '' //组件编号
+            this.ruleForm.component_keyword = [] //组件关键词
+            this.ruleForm.component_width = '' //组件宽度
+            this.ruleForm.component_height = '' //组件高度
+            this.ruleForm.component_img = '' //组件展示图
+            this.ruleForm.type_id = '' //组件分类
+            this.ruleForm.listType = [] //组件所需字段
+            this.ruleForm.img_num = ''  //含有图片新闻数量
+            this.ruleForm.text_num = '' //含有文字新闻数量
+            this.ruleForm.child_imgnum = '' //组件子级图片新闻数量
+            this.ruleForm.child_textnum = '' //组件子级文字新闻数量
+            this.ruleForm.pageSize = '' //组件每页数量
+            this.ruleForm.ad_type = '' //广告类型
+            this.ruleForm.ad_width = '' //广告宽度
+            this.ruleForm.ad_height = '' //广告高度
+            this.ruleForm.ad_img = '' //广告示例图片
+            this.ruleForm.num = '' //栏目数量
+            this.column_options = [] // 栏目选项
+            this.tags = [] // 标签
+            this.logoUrl = ''
+            this.adLogoUrl = ''
+            this.ruleForm.ad_imgid = ''
+            this.imageInfo = {
+                 name: '',
+                img_alias: '',
+                img_size: '',
+                img_type: '',
+                img_url: '',
+            }
+        },
+
         //取消添加或编辑
         cancelForm() {
             this.dialogTableVisible = false
         },
-        //3.6 上传图片操作
+        // 上传组件图片操作
         beforeAvatarUpload(file) {
             const isJPG = file.type === 'image/jpeg';
             const isPNG = file.type === 'image/png';
@@ -606,26 +703,92 @@ export default {
             // 删除图片
             this.logoUrl = ''; // 清空图片 URL
         },
+        
+        //3.6 上传广告图片操作
+        beforeAdUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
 
-        //搜索部分的输入关键词下拉框
-        selectWebSite(value) {
-            this.webSiteName_id = value
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+                // 解析图片信息
+            this.imageInfo.img_alias = file.name;
+            this.imageInfo.name = file.name;
+            this.imageInfo.img_size = this.formatFileSize(file.size); // 新增格式化方法
+            this.imageInfo.img_type = file.type.split('/')[1].toUpperCase(); // 获取文件类型（JPG/PNG）
+            const formData = new FormData();
+            formData.append('file', file);
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.adLogoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.ad_img = res.data.imgUrl;//提供表单地址
+                this.imageInfo.img_url = res.data.imgUrl;
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+            console.log("图片信息",this.imageInfo);
+            // 阻止默认的上传行为
+            return false;
         },
-
-        //添加 / 编辑弹窗中输入关键词下拉框 
-        // 判断是否已经关联了网站
-        detectionWebSite(value) {
-            console.log(value);
-            this.website_id = value
-            console.log(this.website_id);
-
+        handleAdDelete() {
+            // 删除图片
+            this.adLogoUrl = ''; // 清空图片 URL
+            this.ruleForm.ad_imgid = '';
         },
-
+         // 新增文件大小格式化方法
+        formatFileSize(bytes) {
+        if (bytes === 0) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${units[i]}`;
+        },
+        getColumnType(type_id){
+            this.$store.dispatch('module/getComponentType',{id:type_id}).then(res => {
+                console.log('组件所需字段',res.data);
+                if (res.code == 200) {
+                    this.column_options = res.data[0].all_code
+                }
+            }).catch(err => {
+                this.$message({
+                    type: 'error',
+                    message: this.$message
+                });
+            })
+        },
+        getTypeList(){
+            this.$store.dispatch('module/getComponentType').then(res => {
+                
+                if (res.code == 200) {
+                    this.type_options = res.data
+                }
+                console.log('组件类型',this.type_options);
+            }).catch(err => {
+                this.$message({
+                    type: 'error',
+                    message: this.$message
+                });
+            })
+        },
+          // 关键词标签
+        updateTags(newTags) {            
+            this.tags = newTags;
+            this.ruleForm.component_keyword = newTags;
+          },
 
     },
     mounted() {
         this.getData()
-        this.getList()
+        this.getTypeList()
     },
 }
 </script>
@@ -922,4 +1085,14 @@ input[aria-hidden=true] {
 .rowMargin {
     margin-top: 20px;
 }
+
+.sizeInput {
+    width: 15%;
+    float: left;
+}
+.sizeInputSymbol{
+    width: 10px;
+    float: left;
+}
+
 </style>

src/views/componentGallery/plate.vue

@@ -1,4 +1,4 @@
-<!-- 板块 -->
+<!-- 通栏  -->
 <template>
     <div>
         <!-- 头部搜索框部分 -->
@@ -51,8 +51,10 @@
         </div>
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
-            <tableTitle :name="tableDivTitle" />
-            <button class="btn" @click="addPlate">添加通栏</button>
+            <tableTitle :name="tableDivTitle" /> 
+            <!-- <button class="btn" @click="goLook">查看测试</button> -->
+            <!-- <button class="btn" @click="addPlate">添加通栏</button> -->
+            <button class="btn" @click="addPlatetest">添加通栏</button>
             <el-row>
                 <template>
                     <el-table class="my-table" :data="tableData" style="width: 100%" >
@@ -61,6 +63,8 @@
                         <el-table-column prop="sector_size" label="尺寸" width=""></el-table-column>
                         <el-table-column prop="template_name" label="所属皮肤" width=""></el-table-column>
                         <el-table-column prop="class_name" label="所属风格" width=""></el-table-column>
+                         <el-table-column prop="place_name" label="所属版式" width="230">
+                        </el-table-column>
                         <el-table-column prop="pagetype" label="所属页面" width="230">
                         </el-table-column>
                         <el-table-column prop="created_at" label="添加时间" width=""></el-table-column>
@@ -72,7 +76,11 @@
                                         <i class="el-icon-delete"></i>
                                         删除
                                     </div>
-                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                    <!-- <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div> -->
+                                    <div class="listEditBtn" @click="goEdittest(scope.row.id, scope.row)">
                                         <i class="el-icon-edit-outline"></i>
                                         编辑
                                     </div>
@@ -97,111 +105,7 @@
         <!--分页 end------------------------------------------------------------>
         <!--表格内容 end------------------------------------------------------------>
 
-        <!-- 弹出框 编辑 start----------------------------------------------------------->
-        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh" :close-on-click-modal="false">
-            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
-                <div class="dialogText">
-                    <el-form-item label="通栏名称:" prop="sectorName">
-                        <el-input v-model="ruleForm.sectorName" placeholder="输入通栏名称"></el-input>
-                    </el-form-item>
-                    <el-form-item label="通栏编号:" prop="sectorId">
-                        <el-input v-model.number="ruleForm.sectorId" placeholder="输入通栏编号" type="number" min="1"></el-input>
-                    </el-form-item>
-                    <el-form-item label="组件数量:" prop="component_num">
-                        <el-input v-model.number="ruleForm.component_num" placeholder="输入组件数量" type="number" min="1" @change="getPlaceList(ruleForm.component_num)">
-
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item label="所属皮肤:" prop="templateStyle">
-                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择所属皮肤"
-                            :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
-                            <el-option v-for="item in template_options" :key="item.template_id" 
-                            :label="item.template_name" :value="item.template_id">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="皮肤id:" prop="templateStyle">
-                        <el-input v-model="ruleForm.templateStyle" placeholder="所属皮肤id"
-                            disabled></el-input>
-                    </el-form-item>
-                    <el-form-item label="尺寸:" prop="sizeList">
-                        <el-select v-model="ruleForm.sizeList" placeholder="请选择尺寸" @change="changeTemplateStyle">
-                            <el-option v-for="item in size_options" :key="item.id" :label="item.label" :value="item.id">{{item.label}}
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                   
-                     <el-form-item label="通栏类别:" prop="sectorType">
-                        <el-select v-model="ruleForm.sectorType" placeholder="请选择所属页面" :disabled="this.dialogName === '编辑'">
-                            <!-- 通栏分类：1：资讯类：2：通栏广告类；3：混合类；4：搜索框类；5：导航类；6：头条类；7：轮播图类； -->
-                            <el-option :value="1" label="资讯类">资讯类</el-option>
-                            <el-option :value="2" label="广告类">广告类</el-option>
-                            <el-option :value="3" label="混合类">混合类</el-option>
-                            <el-option :value="4" label="搜索框类">搜索框类</el-option>
-                            <el-option :value="5" label="导航类">导航类</el-option>
-                            <el-option :value="6" label="通栏类">头条类</el-option>
-                            <el-option :value="7" label="通栏类">轮播图类</el-option>
-                        </el-select>
-                    </el-form-item>
-                    
-                    <el-form-item label="页面类型:" prop="pageType">
-                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
-                            :disabled="this.dialogName === '编辑'">
-                            <el-checkbox v-for="(item, index) in checkList" :key="index" :label="item.value">{{item.label}}</el-checkbox>
-                        </el-checkbox-group>
-                    </el-form-item>
-                     <el-form-item label="通栏模版类型:" prop="sectorPlace">
-                        <el-select v-model="ruleForm.sectorPlace" placeholder="请选择通栏模版类型" @change="changeTemplateStyle">
-                            <el-option v-for="item in sectorPlace_options" :key="item.type" :label="item.component_img" :value="item.type">{{item.component_img}}
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                     <el-form-item label="通栏关键词：" prop="sectorKeyword" class="custom-align-right">
-                        <template #label>
-                        <span class="askBox">
-                            通栏关键词：
-                            <el-tooltip class="item" effect="dark" content="皮肤关键词，如：黑色、卡通、英雄。" placement="top">
-                            <i class="el-icon-question"></i>
-                            </el-tooltip>
-                        </span>
-                        </template>
-                        <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
-                    </el-form-item>
-                    <el-form-item label="通栏缩略图：" prop="image" :label-width="formLabelWidth"
-                        :class="['custom-form-item']" class="custom-align-right">
-                        <div class="uploaderBox">
-                            <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
-                                <!-- 上传组件 -->
-                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload">
-                                    <!-- 预览图片 -->
-                                    <img v-if="this.logoUrl" :src="this.logoUrl" class="avatar">
-                                    <!-- 上传图标 -->
-                                    <div v-else class="chooseImgDiv">
-                                        <div>
-                                            <img src="@/assets/public/upload/noImage.png">
-                                            <div>选择图片</div>
-                                        </div>
-                                    </div>
-                                    <input type="hidden" name="logo" v-model="ruleForm.image">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                    </el-form-item>
-                </div>
-                <div class="dialogBtn">
-                    <el-button type="info" @click="cancelForm">取消</el-button>
-                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
-                </div>
-            </el-form>
-        </el-dialog>
+        
         <!-- 弹出框 编辑 end----------------------------------------------------------->
     </div>
 </template>
@@ -244,8 +148,9 @@ export default {
             tableData: [],//表格数据
             class_options: [],//风格下拉列表
             template_options: [],//皮肤下拉列表
-            size_options: [],//尺寸下拉列表
+            // componen_code: [],//组件版式及组件下拉列表
             sectorPlace_options: [],//通栏模版类型下拉列表
+           component_option: [],
             tags: [],//标签数据
             // 1.2搜索框相关 
             apiData:{
@@ -316,23 +221,24 @@ export default {
                 templateStyle: '',  //所属皮肤
                 pageType: '',       //页面类型
                 sizeList: '',       //尺寸
-                sectorType: null,     //通栏名称
-                plateCode: '',      //通栏代码
+                sectorType: null,     //通栏类别
                 pageType: [],       //页面类型
                 sectorKeyword: '',  //通栏关键词
-                image: '',          //组件展示图
+                image: '',          //通栏展示图
+                sector_img:'',      //通栏版式预览图
+                component_code: [],      //所选择位置的组件
+                sector_width:'',
+                sector_height:'',
             },
             rules: {
                 sectorName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 component_num: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 sectorId: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }], //关联皮肤名称 
-                sizeList: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-                // plateCode: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 sectorType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 pageType: [{ required: true, trigger: 'blur', validator: validateArray }],
-                sectorKeyword: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 image: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sectorPlace: [{ required: true, trigger: 'blur', validator: validateEmpty }],
             },
 
 
@@ -345,13 +251,23 @@ export default {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            this.$store.dispatch('plate/getSectorList', { page: this.page, page_size: this.pageSize }).then(data => {
+                const data = {
+                    page: this.page,
+                    page_size: this.pageSize,
+                    sector_name: this.apiData.sector_name ?? '', //通栏名称
+                    template_class_id: this.apiData.template_class_id ?? null, //风格id
+                    template_id: this.apiData.template_id ?? null, //通栏id
+                    width: this.apiData.width ?? null,   //通栏宽度
+                    height: this.apiData.height ?? null, //通栏高度
+                    keyword: this.apiData.keyword ?? '', //通栏关键词
+                }
+                this.$store.dispatch('plate/getSectorList', data).then(data => {
                 this.tableData = data.data.data
                 this.total = data.data.total
-                console.log(typeof(data.data.data));
+                console.log("typeof(,",data.data.data);
                 for (let i = 0; i < data.data.data.length; i++) {
                     const item = data.data.data[i];
-                    this.tableData[i].sector_size = item.width + ' * ' + item.height;
+                    this.tableData[i].sector_size = item.sector_width + ' * ' + item.sector_height;
                     let pageArray = JSON.parse(item.page_type);
                     if (Array.isArray(pageArray)) {
                         // item.tags = keywordArray;
@@ -374,7 +290,22 @@ export default {
             })
 
         },
-
+        
+        //  // 获取版式列表
+        // getPlaceList(sectorType) {
+        //     let data = {
+        //         component_num : this.ruleForm.component_num,
+        //         type_id: 1,
+        //     }
+        //     this.$store.dispatch('plate/getAllSectorPlace',data).then(res => {
+        //         this.sectorPlace_options  = res.data
+        //     }).catch(() => {
+        //         this.$message({
+        //             type: 'error',
+        //             message: '网络错误，请重试！'
+        //         });
+        //     })
+        // },
         //获取风格列表
         getStyleList() {
             this.$store.dispatch('genre/getTemplateClass').then(res => {
@@ -406,42 +337,6 @@ export default {
                 });
             })
         },
-        // 获取尺寸列表
-        getSizeList() {
-            this.$store.dispatch('plate/getAllSize').then(res => {
-                this.size_options  = res.data
-                if(res.data){
-                    this.size_options.forEach(item => {
-                        item.label = item.width + ' * ' + item.height;
-                    })
-                }
-                console.log(res.data);
-            }).catch(() => {
-                this.$message({
-                    type: 'error',
-                    message: '网络错误，请重试！'
-                });
-            })
-        },
-         // 获取位置列表
-        getPlaceList(sectorType) {
-            // if( this.dialogName == '编辑' ||  this.dialogName == '添加'){
-                let data = {
-                 sector_num : sectorType,
-                }
-                console.log("888888888888888888",data);
-                this.$store.dispatch('plate/getSectorPlace',data).then(res => {
-                    this.sectorPlace_options  = res.data
-                    console.log(res.data);
-                }).catch(() => {
-                    this.$message({
-                        type: 'error',
-                        message: '网络错误，请重试！'
-                    });
-                })
-            // }
-            
-        },
         //1.2 删除内容
         deleteRow(id) {
             console.log(id);
@@ -475,34 +370,14 @@ export default {
                 });
             });
         },
-        //1.3 多选按钮发生变化
-        changeCheckbox(val) {
-            console.log(val);
-            this.newArr = []
-            val.forEach(item => {
-                if (typeof item !== 'object' || !item.hasOwnProperty('__ob__')) {
-                    this.newArr.push(item);
-                }
+        goEdittest(id, val) {
+           let data = {
+                id: id
+            }
+            this.$router.push({
+                path: '/plateDetail',
+                query: data
             });
-            this.pageType = JSON.stringify(this.newArr);
-            console.log(this.pageType);
-        },
-
-        changeTemplateStyle(val) {
-            console.log('风格id', val);
-            console.log(this.ruleForm.templateStyle);
-        },
-
-        //1.4 列表内容分页
-        //直接跳转
-        handleSizeChange(val) {
-            this.page = val;
-            this.getData();
-        },
-        //1.5 点击分页
-        handleCurrentChange(val) {
-            this.page = val;
-            this.getData();
         },
         // 1.6 搜索按钮
         goSearch() {
@@ -519,30 +394,26 @@ export default {
             this.$store.dispatch('plate/getSectorList',data ).then(data => {
                 this.tableData = data.data.data
                 this.total = data.data.total
-                for (let i = 0; i < data.data.data.length; i++) {
+                 for (let i = 0; i < data.data.data.length; i++) {
                     const item = data.data.data[i];
-                    this.tableData[i].sector_size = item.width + ' * ' + item.height;
-                    try {
-                        let pageArray = JSON.parse(item.pagetype);
-                        if (Array.isArray(pageArray)) {
-                            // item.tags = keywordArray;
-                            item.pagetype = pageArray.map(type => {
-                                const pageTypeMap = {
-                                    '1': '首页',
-                                    '2': '分类页',
-                                    '3': '列表页',
-                                    '4': '详情页',
-                                    '5': '搜索页',
-                                    '6': '特殊列表页',
-                                    '7': '特殊详情页'
-                                };
-                                return pageTypeMap[type] || type;
-                            }).join(' | ');
-                        } else {
-                            item.pagetype = '';
-                        }
-                    } catch (error) {
-                        console.error('解析 keyword 失败:', error);
+                    this.tableData[i].sector_size = item.sector_width + ' * ' + item.sector_height;
+                    let pageArray = JSON.parse(item.page_type);
+                    if (Array.isArray(pageArray)) {
+                        // item.tags = keywordArray;
+                        item.pagetype = pageArray.map(type => {
+                            const pageTypeMap = {
+                                1: '首页',
+                                2: '分类页',
+                                3: '列表页',
+                                4: '详情页',
+                                5: '搜索页',
+                                6: '特殊列表页',
+                                7: '特殊详情页'
+                            };
+                            return pageTypeMap[type] || type;
+                        }).join(' | ');
+                    } else {
+                        item.pagetype = '';
                     }
                 }
             })
@@ -560,205 +431,32 @@ export default {
             this.pageSize=10
             this.getData()
         },
-        //列表和分页相关 end ------------------------------------------------------------>
-
-        //1.9 编辑
-        goEdit(id, val) {
-            // console.log(id);
-            this.dialogName = '编辑'
-            this.activeid = id
-            this.dialogTableVisible = true
-            console.log(id, val);
-            // console.log("状态", val.status);
-            this.hovering = false
-
-            //数据回显
-            console.log("valbianji ",val);
-            this.ruleForm.sectorName = val.sector_name;      //通栏名称
-            this.ruleForm.sectorId = val.sector_id;      //通栏编号id
-            this.ruleForm.templateStyle = val.template_id;   //关联皮肤名称
-            this.ruleForm.component_num = val.component_num;   //组件数量
-            this.ruleForm.sizeList = val.size_id;        //通栏尺寸
-            this.ruleForm.sectorType = val.place_type;      //通栏类别
-            this.ruleForm.pageType = JSON.parse(val.page_type);        // 通栏页面类型，根据符号|划分字符串为数组
-            this.ruleForm.sectorPlace = val.sector_place;        //通栏模版类型
-            this.tags =  val.pagetype ? val.pagetype.split(' | ') : [];
-            this.ruleForm.plateCode = val.sector_code;       //通栏代码
-            this.ruleForm.sectorKeyword = JSON.parse(val.sector_keyword);   //通栏关键词
-            this.ruleForm.image = val.sector_img;           //通栏展示图
-            this.logoUrl = val.sector_img;
-            console.log("valruleForm ",this.ruleForm);
-        },
-
-
-        //1.7 添加
-        addPlate() {
-            this.dialogTableVisible = true
-            this.dialogName = "添加"
-            //添加时清空回显回来的数据
-            this.ruleForm.sectorName = '';      //通栏名称
-            this.ruleForm.sectorId = null;      //通栏编号id
-            this.ruleForm.templateStyle = '';   //关联皮肤名称
-            this.ruleForm.sizeList = '';        //通栏尺寸
-            this.ruleForm.sectorType = null;      //通栏类别
-            this.ruleForm.pageType = [];        //通栏页面类型
-            this.ruleForm.plateCode = '';       //通栏代码
-            this.ruleForm.sectorKeyword = '';   //通栏关键词
-            this.ruleForm.component_num = null;  //组件数量
-            this.ruleForm.image = '';           //通栏展示图
-            // this.getPlaceList();
-        },
-
-        // 弹出层相关方法
-        // 提交表单
-        submitForm(formName) {
-            if (this.dialogName == "添加") {
-                const data = {
-                    sector_name: this.ruleForm.sectorName,       //通栏名称
-                    sector_id: this.ruleForm.sectorId,           //通栏编号
-                    template_id: this.ruleForm.templateStyle,    //所属皮肤
-                    size_id: this.ruleForm.sizeList,             //通栏尺寸
-                    sector_type: this.ruleForm.sectorType,       //通栏类别
-                    sector_code: this.ruleForm.plateCode,        //通栏代码
-                    page_type: this.ruleForm.pageType,           //页面类型
-                    component_num: this.ruleForm.component_num,  //组件数量
-                    sector_keyword: JSON.stringify(this.ruleForm.sectorKeyword), //通栏关键词
-                    sector_img: this.ruleForm.image,           //通栏展示图
-                }
-                console.log("5555555555555",data);
-                this.$store.dispatch('plate/addSector',data).then(data => {
-                    if (data.code == 200) {
-                        this.$message({
-                            message: '添加成功',
-                            type: 'success'
-                        })
-                        this.dialogTableVisible = false
-                        this.getData()
-                    }else{
-                        this.$message({
-                            message: data.message,
-                            type: 'error'
-                        })
-                    }
-                })
-                
-            }
-            if (this.dialogName == "编辑") {
-                const data = {
-                    id: this.activeid,
-                    sector_name: this.ruleForm.sectorName,       //通栏名称
-                    sector_id: this.ruleForm.sectorId,           //通栏编号
-                    template_id: this.ruleForm.templateStyle,    //所属皮肤
-                    size_id: this.ruleForm.sizeList,             //通栏尺寸
-                    sector_type: this.ruleForm.sectorType,       //通栏类别
-                    sector_code: this.ruleForm.plateCode,        //通栏代码
-                    page_type: this.ruleForm.pageType,           //页面类型
-                    component_num: this.ruleForm.component_num,  //组件数量
-                    sector_keyword: JSON.stringify(this.ruleForm.sectorKeyword), //通栏关键词
-                    sector_img: this.ruleForm.image,           //通栏展示图
-                }
-                console.log("data",data);
-                this.$store.dispatch('plate/updateSector', data).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
-                        this.$message({
-                            message: '编辑成功',
-                            type: 'success'
-                        })  
-                        this.dialogTableVisible = false
-                        this.getData()
-                    }else{
-                        this.$message({
-                            message: data.message,
-                            type: 'error'
-                        })
-                    }
-                })
-            }
-        },
-        //取消添加或编辑
-        cancelForm() {
-            this.dialogTableVisible = false
-        },
-        //3.6 上传图片操作
-        beforeAvatarUpload(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-                return false;
-            }
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 2MB!');
-                return false;
-            }
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            this.$store.dispatch('pool/uploadFile', formData).then(res => {
-                this.logoUrl = res.data.imgUrl;//显示缩略图
-                this.ruleForm.image = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
         },
-        handleDelete() {
-            // 删除图片
-            this.logoUrl = ''; // 清空图片 URL
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
         },
 
-        //
-        getWebNavList(query) {
-            if (query !== '') {
-                this.webSiteLoading = true;
-                let data = { keyword: query }
-                let dataArr = [];
-                this.$store.dispatch('pool/getNavWebList', data).then(res => {
-                    console.log(res.data)
-                    for (let item of res.data) {
-                        let data = {};
-                        data.key = item.id;
-                        data.value = item.id;
-                        data.label = item.website_name;
-                        dataArr.push(data)
-                    }
-                    this.webSiteList = dataArr;
-                    this.webSiteLoading = false;
-                }).catch(() => {
-                    this.$message({
-                        type: 'info',
-                        message: '网络错误，请重试！'
-                    });
-                })
-            } else {
-                this.navList = [];
-            }
+        //列表和分页相关 end ------------------------------------------------------------>
+        //1.10 添加通栏测试
+        addPlatetest() {
+            this.$router.push({
+                path: '/plateDetail',
+            });
         },
-        // 关键词标签
-        updateTags(newTags) {
-            // this.foem.seo_keywords = newTags;
-            
-            this.tags = newTags;
-            this.ruleForm.sectorKeyword = newTags;
-          },
     },
     mounted() {
         this.getData()
         this.getStyleList()
         this.getSkinList()
-        this.getSizeList()
         // this.getPlaceList()
     },
+    
 }
 </script>
 
@@ -994,7 +692,7 @@ input[aria-hidden=true] {
 .dialogBtn {
     text-align: center;
     margin: 50px auto 20px;
-
+    clear: both;
     button {
         width: 184px;
         padding: 16px;
@@ -1049,6 +747,12 @@ input[aria-hidden=true] {
 .rowMargin {
     margin-top: 20px;
 }
-
-
+.componentOptions{
+    float: left;
+    margin-right: 30px;
+    width: 470px;
+}
+.componentOption_one{
+    width: 337px;
+}
 </style>

src/views/componentGallery/plateDetail.vue

@@ -0,0 +1,1180 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle" />
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="通栏名称:" prop="sectorName">
+                        <el-input v-model="ruleForm.sectorName" placeholder="输入通栏名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="通栏编号:" prop="sectorId">
+                        <el-input v-model="ruleForm.sectorId" placeholder="输入通栏编号"></el-input>
+                    </el-form-item>
+                     <el-form-item label="所属皮肤:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择所属皮肤">
+                            <el-option v-for="item in template_options" :key="item.template_id" 
+                            :label="item.template_name" :value="item.template_id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="皮肤id:" prop="templateStyle">
+                        <el-input v-model="ruleForm.templateStyle" placeholder="所属皮肤id"
+                            disabled></el-input>
+                    </el-form-item>
+                     <el-form-item label="通栏关键词：" prop="sectorKeyword" class="custom-align-right">
+                        <template #label>
+                            <span class="askBox">
+                                通栏关键词：
+                                <el-tooltip class="item" effect="dark" content="皮肤关键词，如：黑色、卡通、英雄。" placement="top">
+                                <i class="el-icon-question"></i>
+                                </el-tooltip>
+                            </span>
+                        </template>
+                        <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
+                    </el-form-item>
+                    
+                     <el-form-item label="通栏类别:" prop="sectorType">
+                        <el-select v-model="ruleForm.sectorType" placeholder="请选择通栏类别" :disabled="this.dialogName === '编辑'">
+                            <!-- 通栏分类：1：资讯类：2：通栏广告类；3：混合类；4：搜索框类；5：导航类；6：头条类；7：轮播图类； -->
+                             <el-option v-for="item in this.typeList" :label="item.label" :value="item.value" :key="item.value">{{item.label}}</el-option>
+                        </el-select>
+                    </el-form-item>
+                    
+                    <el-form-item label="页面类型:" prop="pageType">
+                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
+                            :disabled="this.dialogName === '编辑'">
+                            <el-checkbox v-for="(item, index) in checkList" :key="index" :label="item.value">{{item.label}}</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                     
+                    
+                    <el-form-item label="通栏缩略图：" prop="image" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload">
+                                    <!-- 预览图片 -->
+                                    <img v-if="this.logoUrl" :src="this.logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.image">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="组件数量:" prop="component_num">
+                        <el-input v-model.number="ruleForm.component_num" id="component_num" placeholder="输入组件数量" type="number"
+                         min="1" @change="getPlaceList(ruleForm.component_num)">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="通栏模版类型:" prop="sectorPlace">
+                        <el-select v-model="ruleForm.sectorPlace" placeholder="请选择通栏模版类型" @change="changeStyleSort">
+                            <el-option v-for="item in sectorPlace_options" :key="item.sector_type" :label="item.name+'('+item.width+'*'+item.height+')'" :value="item.sector_type">{{item.name+'('+item.width+'*'+item.height+')'}}
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="尺寸:" prop="sizeList" v-if="this.ruleForm.sectorPlace != ''">
+                        <p style="margin-top: 0px;">{{ruleForm.sizeList}}</p>
+                    </el-form-item>
+                    <el-form-item label="通栏版式预览图:" prop="sector_img" v-if="this.ruleForm.sectorPlace != ''">
+                        <img :src="ruleForm.sector_img" alt="" width="300px" height="150px">
+                    </el-form-item>
+                    <div class="boxes-container" v-if="this.ruleForm.sizeList != '' && this.ruleForm.sectorPlace">
+                        <el-row class="layout-3" >
+                            <el-row v-if="checkPlace" style="width: 100%;height: 100%;">
+                                <el-col  v-for="(col,index) in JSON.parse(checkPlace.map)" :key="index" :style="{width:col.col_data.col_width,height:'100%',marginRight:'1.2%'}">
+                                    <el-row class="box" v-for="(row,rowIndex) in col.col_data.row_data" :key="rowIndex" :style="{height:row.row_height,width:'100%',marginBottom:'2.35%'}">
+                                        {{ component_option.find(item => item.sort_id == row.component_sort) ? `位置${component_option.find(item => item.sort_id == row.component_sort).sort_id}
+                                        （${component_option.find(item => item.sort_id == row.component_sort).width}*${component_option.find(item => item.sort_id == row.component_sort).height}）` : '' }}
+                                    </el-row>
+                                </el-col>
+                            </el-row>
+                        </el-row>
+                    </div>
+                    <div v-for="(item, index) in component_option" :key="index" class="componentChoose">
+                        <el-form-item :label="item.name+'：'" :prop="`${index}`" class="componentOptions">
+                            <el-select v-model="ruleForm.component_code[index]" multiple clearable placeholder="请选择组件"  class="componentOption_one">
+                                <el-option v-for="(compItem,comIndex) in item.component" :key="compItem.component_type" :label="compItem.component_name" :value="compItem.component_type">
+                                    {{ compItem.component_name }} 
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+import tagInput from '../../components/InputTag/index.vue';
+//引入公用样式
+import '@/styles/global.less';
+// import { getSectorList, addSector, delSector, updateSector, getSectorInfo } from '@/api/plate'
+// import { getTemplateClass } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+        tagInput
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        const validateArray = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 0.0画布及多选组件输入框相关----------start
+             component : true,  //验证组件是否有空数组
+             name: '编辑',         //备份dialogName来判断是否执行添加和编辑的异步
+            tableData: [{}], // 添加空数据使表格正常显示
+            // 初始化时设置默认值为 1，确保有初始布局
+            component_num: 1,
+            activeBoxes: [false], // 初始化激活状态数组
+            selectedComponents: { 0: [] }, // 初始化组件选择对象
+            // 0.0画布及多选组件输入框相关----------end
+            //1.1 初始化信息 
+            tableDivTitle: "通栏列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            plateLoading: true, //表格内容加载中
+
+            tableData: [],//表格数据
+            class_options: [],//风格下拉列表
+            template_options: [],//皮肤下拉列表
+            // componen_code: [],//组件版式及组件下拉列表
+            sectorPlace_options: [],//通栏模版类型下拉列表
+           component_option: [],
+            tags: [],//标签数据
+            templateStyle: '',//风格
+            plateName: '',
+
+            pageType: '',//页面类型
+            value: '',
+            checkList: [
+                {
+                    value: 1,
+                    label: '首页',
+                },
+                {
+                    value: 2,
+                    label: '分类页',
+                },
+                {
+                    value: 3,
+                    label: '列表页',
+                },
+                {
+                    value: 4,
+                    label: '详情页',
+                },
+                {
+                    value: 5,
+                    label: '搜索页',
+                },
+                {
+                    value: 6,
+                    label: '特殊列表页',
+                },
+                {
+                    value: 7,
+                    label: '特殊详情页',
+                },
+            ],
+            typeList: [
+                {
+                    value: 1,
+                    label: '资讯类',
+                },
+                {
+                    value: 2,
+                    label: '广告类',
+                },
+                {
+                    value: 3,
+                    label: '混合类',
+                },
+                {
+                    value: 4,
+                    label: '搜索框类',
+                },
+                {
+                    value: 5,
+                    label: '导航类',
+                },
+                {
+                    value: 6,
+                    label: '头条类',
+                },
+                {
+                    value: 7,
+                    label: '轮播图类',
+                },
+                {
+                    value: 8,
+                    label: '静态资源类',
+                },
+                {
+                    value: 9,
+                    label: '底部导航（列表）类',
+                },
+                {
+                    value: 10,
+                    label: '底部导航（详情）类',
+                },
+            ],
+            //活动id
+            activeid: "",
+
+            newArr: [],
+
+            // 1.3 分页相关 
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            //1.4 弹框相关数据 
+            ruleForm: {
+                sectorName: '',     //通栏名称
+                sectorPlace: null,  //通栏模版类型
+                component_num: null,  //组件数量 
+                sectorId: null,       //通栏编号id
+                templateStyle: '',  //所属皮肤
+                pageType: '',       //页面类型
+                sizeList: '',       //尺寸
+                sectorType: null,     //通栏类别
+                pageType: [],       //页面类型
+                sectorKeyword: '',  //通栏关键词
+                image: '',          //通栏展示图
+                sector_img:'',      //通栏版式预览图
+                component_code: [],      //所选择位置的组件
+                sector_width:'',
+                sector_height:'',
+            },
+            rules: {
+                sectorName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_num: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sectorId: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }], //关联皮肤名称 
+                sectorType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                // pageType: [{ required: true, trigger: 'blur', validator: validateArray }],
+                image: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sectorPlace: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                // sectorPlace: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_code: [{ required: true, trigger: 'blur', validator: validateArray }],
+            },
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+        }
+    },
+    computed: {
+        // 计算激活的方块索引
+        activeBoxIndices() {
+            return this.activeBoxes
+            .map((active, index) => active ? index : null)
+            .filter(index => index !== null);
+            
+        },
+        checkPlace(){
+            // 检查 sectorPlace_options 是否为数组，避免调用 find 方法时报错
+            if (Array.isArray(this.sectorPlace_options)) {
+                return this.sectorPlace_options.find(item => item.sector_type == this.ruleForm.sectorPlace);
+            }
+            return null;
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法        
+         // 获取版式列表
+        getPlaceList(sectorType) {
+            this.component_option = []
+            this.ruleForm.component_code = []
+            this.ruleForm.sectorPlace = ''
+            let data = {
+                component_num : this.ruleForm.component_num,
+                type_id: 1,
+            }
+            this.$store.dispatch('plate/getAllSectorPlace',data).then(res => {
+                this.sectorPlace_options  = res.data
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+            // console.log("回显-22222",this.sectorPlace_options);
+        },
+        //获取风格列表
+        getStyleList() {
+            this.$store.dispatch('genre/getTemplateClass').then(res => {
+                this.class_options  = res.data
+                // console.log(res.data);
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+        },
+        //获取皮肤列表
+        getSkinList() {
+            let data = [];
+            this.$store.dispatch('plate/getAllTemplate').then(res => {
+                this.template_options  = res.data
+                console.log(res.data);
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+        },
+        // //1.3 多选按钮发生变化
+        changeCheckbox(val) {
+            console.log(val)
+            this.newArr = []
+            val.forEach(item => {
+                if (typeof item !== 'object' || !item.hasOwnProperty('__ob__')) {
+                    this.newArr.push(item)
+                }
+            });
+            this.pageType = JSON.stringify(this.newArr)
+            // console.log(this.pageType);
+        },
+        // 通栏版式发生变化
+        changeStyleSort(val) {
+            let num = 0;
+            this.component_option = []
+            this.activeBoxes = []
+            this.selectedComponents = {}
+            this.ruleForm.component_code = []
+            if ( this.sectorPlace_options && Array.isArray(this.sectorPlace_options)) {
+                this.sectorPlace_options.forEach(item => {
+                    if(item.sector_type == val){
+                        this.ruleForm.sizeList = item.width + ' * ' + item.height
+                        this.ruleForm.sector_img = item.sector_img
+                        this.ruleForm.size_id = item.size_id
+                        this.ruleForm.sector_width = item.width
+                        this.ruleForm.sector_height = item.height
+                        this.ruleForm.component_num = item.component_num;
+                    }
+                })
+            }
+            let data = {
+                sector_type : this.ruleForm.sectorPlace,
+                type_id: 2,
+            }
+            this.$store.dispatch('plate/getAllSectorPlace',data).then(res => {
+                this.component_option  = res.data
+                if(this.component_option && Array.isArray(this.component_option)){
+                    this.component_option.forEach(item => {
+                        item.name = '位置'+item.sort_id+'（'+item.width+'*'+item.height+'）'
+                    })
+                }
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+        },
+        
+        getStyleSort(val) {
+            console.log('this.ruleForm.sectorPlace2222', this.ruleForm.sectorPlace);
+            console.log('val', val);
+            let data = {
+                sector_type : this.ruleForm.sectorPlace,
+                type_id: 2,
+            }
+            this.$store.dispatch('plate/getAllSectorPlace',data).then(res => {
+                    this.component_option  = res.data
+                    this.component_option.forEach(item => {
+                    item.name = '位置'+item.sort_id+'（'+item.width+'*'+item.height+'）';
+                })
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+         },
+        
+       
+        
+        //列表和分页相关 end ------------------------------------------------------------>
+        //  验证关联组件（每一个位置必须至少有一个组件）
+       
+        checkComponent() {
+            this.component = true
+            if (this.ruleForm.component_code && Array.isArray(this.ruleForm.component_code)) {
+                const component = '';
+                this.ruleForm.component_code.forEach(component => {
+                    if (component.length == 0) {
+                        this.component = false,
+                       
+                        console.log('component', component);
+                        this.$message({
+                            message: '请关联组件！',
+                            type: 'error'
+                        })                        
+                    }
+                }); 
+                
+                // return this.component;
+            }
+            return true;
+        },
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id)
+            let data = {
+                id: this.$route.query.id
+            };
+            
+            this.$store.dispatch('plate/getSectorInfo', data).then(res => {
+            console.log('res回显', this.typeList)
+            this.ruleForm.sectorName = res.data.sector_name      //通栏名称
+            this.ruleForm.sectorId = res.data.sector_id      //通栏编号id
+            this.ruleForm.templateStyle = res.data.template_id   //关联皮肤名称
+            this.ruleForm.component_num = res.data.component_num   //组件数量
+            this.ruleForm.sizeList = res.data.sector_width + ' * ' + res.data.sector_height        //通栏尺寸
+            this.ruleForm.sectorType = parseInt(res.data.place_type)      //通栏类别
+            
+            this.ruleForm.pageType = JSON.parse(res.data.page_type)        // 通栏页面类型，根据符号|划分字符串为数组
+            this.tags =  JSON.parse(res.data.sector_keyword)
+            
+            this.ruleForm.plateCode = res.data.sector_code       //通栏代码
+            this.ruleForm.sectorKeyword = this.tags   //通栏关键词
+            this.ruleForm.image = res.data.sector_img          //通栏展示图
+            this.logoUrl = res.data.sector_img
+            this.ruleForm.sector_img = res.data.place.sector_img
+            this.sectorPlace_options = this.getPlaceList(res.data.component_num)
+            this.ruleForm.sectorPlace = parseInt(res.data.place_type)
+            this.getStyleSort(res.data.sectorPlace)
+            // this.ruleForm.size_id = res.data.size_id;
+            this.ruleForm.sector_width = res.data.sector_width
+            this.ruleForm.sector_height = res.data.sector_height
+            this.ruleForm.component_code = JSON.parse(res.data.component_code)
+            console.log('回显表单', this.ruleForm)
+            console.log('回显表单', this.tags)
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+        },
+
+
+        //1.7 添加
+        addPlate() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+            this.name = "添加"
+            this.name = this.dialogName
+            //添加时清空回显回来的数据
+            this.ruleForm.sectorName = ''      //通栏名称
+            this.ruleForm.sectorId = null      //通栏编号id
+            this.ruleForm.templateStyle = ''   //关联皮肤名称
+            this.ruleForm.sizeList = ''        //通栏尺寸
+            this.ruleForm.sectorType = null      //通栏类别
+            this.ruleForm.pageType = []        //通栏页面类型
+            this.ruleForm.plateCode = ''       //通栏代码
+            this.ruleForm.sectorKeyword = ''   //通栏关键词
+            this.ruleForm.component_num = null  //组件数量
+            this.ruleForm.image = ''           //通栏展示图
+            this.ruleForm.sector_img = ''           //通栏展示图
+            // this.ruleForm.size_id = ''           //通栏尺寸
+            this.ruleForm.sectorPlace = ''         //通栏版式编号
+            this.logoUrl = ''
+            this.ruleForm.image = ''
+            this.tags = []
+            this.ruleForm.component_code = []
+            this.component_option = []
+            this.ruleForm.sector_width = ''
+            this.ruleForm.sector_height = ''
+            // this.getPlaceList();
+            this.selectedComponents = []
+            this.activeBoxes = []
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            console.log('this.ruleForm', this.dialogName)
+            // this.name = this.dialogName
+            
+            console.log('this.ruleForm111', this.dialogName)
+            console.log('this.ruleForm222', this.name)
+            this.checkComponent()
+            console.log('this.component', this.component)
+            if (!this.component) {
+                this.dialogName = ""
+                return
+            }else{
+                this.dialogName = this.name
+            }
+           console.log('this.ruleForm121', this.dialogName)
+            console.log('this.ruleForm242', this.name)
+            if (this.dialogName == "添加") {
+                const data = {
+                    sector_name: this.ruleForm.sectorName,       //通栏名称
+                    sector_id: this.ruleForm.sectorId,           //通栏编号
+                    template_id: this.ruleForm.templateStyle,    //所属皮肤
+                    // size_id: this.ruleForm.size_id,             //通栏尺寸
+                    sector_type: this.ruleForm.sectorType,       //通栏类别
+                    sector_code: this.ruleForm.plateCode,        //通栏代码
+                    page_type: this.ruleForm.pageType,           //页面类型
+                    component_num: this.ruleForm.component_num,  //组件数量
+                    sector_keyword: JSON.stringify(this.ruleForm.sectorKeyword), //通栏关键词
+                    sector_img: this.logoUrl,           //通栏展示图
+                    place_type: this.ruleForm.sectorPlace,           //通栏版式id
+                    component_code: JSON.stringify(this.ruleForm.component_code),           //通栏所选组件
+                    sector_width: this.ruleForm.sector_width,           //通栏宽度
+                    sector_height: this.ruleForm.sector_height,           //通栏高度
+                }
+                console.log('添加表单--------data', data);
+                this.$store.dispatch('plate/addSector',data).then(data => {
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                       this.$router.push({
+                            path: '/plate',
+                        });
+                    }else{
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+                
+            }
+            if (this.dialogName == "编辑") {
+                const data = {
+                    id: this.$route.query.id,
+                    sector_name: this.ruleForm.sectorName,       //通栏名称
+                    sector_id: this.ruleForm.sectorId,           //通栏编号
+                    template_id: this.ruleForm.templateStyle,    //所属皮肤
+                    // size_id: this.ruleForm.size_id,             //通栏尺寸
+                    sector_type: this.ruleForm.sectorType,       //通栏类别
+                    sector_code: this.ruleForm.plateCode,        //通栏代码
+                    page_type: this.ruleForm.pageType,           //页面类型
+                    component_num: this.ruleForm.component_num,  //组件数量
+                    sector_keyword: JSON.stringify(this.ruleForm.sectorKeyword), //通栏关键词
+                    sector_img: this.ruleForm.image,           //通栏展示图
+                    place_type: this.ruleForm.sectorPlace,           //通栏版式id
+                    component_code: JSON.stringify(this.ruleForm.component_code),           //通栏所选组件
+                    sector_width: this.ruleForm.sector_width,           //通栏宽度
+                    sector_height: this.ruleForm.sector_height,           //通栏高度
+                }
+                console.log('编辑表单---data', data);
+                this.$store.dispatch('plate/updateSector', data).then(data => {
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })  
+                        this.$router.push({
+                            path: '/plate',
+                        });
+                    }else{
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+            }
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.$router.push({
+                path: '/plate',
+            });
+        },
+        // 验证输入的数量
+        validateCount() {
+        // 确保是数字且在1-3范围内（因为输入框min为1，移除小于0的判断）
+        let count = parseInt(this.component_num, 10);
+        if (isNaN(count)) count = 1;
+        if (count > 3) count = 3;
+        this.component_num = count;
+        
+        // 初始化激活状态数组
+        this.activeBoxes = Array(count).fill(false);
+        
+        // 初始化组件选择对象
+        this.selectedComponents = {};
+        for (let i = 0; i < count; i++) {
+            this.selectedComponents[i] = [];
+        }
+        },
+        // 切换方块激活状态
+        toggleBox(index) {
+            this.$set(this.activeBoxes,index, this.component_option[index])
+        //   this.activeBoxes[index] = this.component_option[index];
+        
+        // console.log('this.activeBoxes', this.activeBoxes);
+        // console.log('this.selectedComponents', this.component_option);
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.image = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+        // 关键词标签
+        updateTags(newTags) {
+            // this.foem.seo_keywords = newTags;
+            
+            this.tags = newTags;
+            this.ruleForm.sectorKeyword = newTags;
+        },
+        
+    },
+    mounted() {
+        if(this.$route.query.id && this.$route.query.id != 0) {
+            this.dialogName = '编辑',
+            this.goEdit()
+        }else{
+            this.dialogName = '添加',
+            this.addPlate()
+        }
+        // this.getData()
+        this.getStyleList()
+        this.getSkinList()
+    },
+    watch:{
+        // 监听数量变化，重新初始化
+        component_num(newVal) {
+            this.validateCount();
+        },
+        'ruleForm.component_num':{
+            handler(oldVal,newVal){
+                 console.log('监听val',oldVal);
+                console.log('监听newval',newVal);
+                // 清空组件代码数组
+                // handler(oldval){
+                // 清空组件代码数组
+                if (!(this.newVal !== null && this.dialogName == '编辑')) {
+                    this.component_option = [];
+                    this.ruleForm.component_code = [];
+                    this.ruleForm.sectorPlace = '';
+                }
+               
+            },
+            deep: true
+        }
+    }
+    
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+
+}
+/* 方块容器样式 */
+.boxes-container {
+    margin-left: 170px;
+  width:700px;
+  height: 350px;
+  margin-bottom: 25px;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* 通用方块样式 */
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.box:hover {
+  filter: brightness(1.1);
+}
+
+.box.active {
+  background-color: #1e40af;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* 数量=3的布局 */
+.layout-3 {
+  display: flex;
+  height: 100%; /* 固定高度确保左右等高 */
+  gap: 10px;
+  padding: 10px;
+}
+
+.layout-3-left {
+  flex: 1.5;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+}
+
+.layout-3-right {
+  flex: 1;
+  height: 100%;
+}
+
+.layout-3-left .box {
+  height: 50%; /* 左侧两个方块各占一半高度 */
+}
+.layout-3 .box {
+  background-color: #3b82f6;
+  border-radius: 6px;
+  height: 100%;
+}
+.layout-3-1 .box{
+  background-color: #3b82f6;
+  border-radius: 6px;
+  height: 100%;
+}
+.layout-3-1-left {
+  flex: 3;
+  height: 100%;
+}
+.layout-3-1-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+}
+.layout-3-1-right .box {
+  height: 50%; /* 左侧两个方块各占一半高度 */
+}
+.layout-3-1-left .box {
+  height: 100%; /* 左侧两个方块各占一半高度 */
+}
+.layout-3-1{
+  display: flex;
+  height: 100%; /* 固定高度确保左右等高 */
+  gap: 10px;
+  padding: 10px;
+}
+
+/* 数量=2的布局 */
+.layout-2 {
+  display: flex;
+  height: 100%;
+  gap: 10px;
+  padding: 10px;
+}
+
+.layout-2-left {
+  flex: 5; /* 30%宽度 */
+  height: 100%;
+}
+
+.layout-2-right {
+  flex: 5; /* 70%宽度 */
+  height: 100%;
+}
+
+.layout-2 .box {
+  background-color: #3b82f6;
+  border-radius: 6px;
+  height: 100%;
+  width: 100%;
+}
+
+/* 数量=1的布局 */
+.layout-1 {
+  height: 100%;
+  padding: 10px;
+}
+
+.layout-1 .box {
+  background-color: #3b82f6;
+  border-radius: 6px;
+  height: 100%;
+  width: 100%;
+}
+
+/* 输入框区域样式 */
+.input-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.field-item {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 12px;
+  background-color: #f9fafb;
+  border-radius: 6px;
+}
+
+.field-label {
+  width: 120px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.size-select {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #d1d5db; 
+  border-radius: 4px;
+  height: 100px;
+  background-color: white;
+}
+
+.size-select option {
+  padding: 4px 0;
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+    clear: both;
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+
+.rowMargin {
+    margin-top: 20px;
+}
+.componentChoose{
+    background-color: #f5f7fb;
+    overflow: hidden;
+}
+.componentOptions{
+    float: left;
+    margin-right: 30px;
+    width: 100%;
+}
+.componentOption_one{
+    width: 100%;
+}
+</style>

src/views/format/plateStyle.vue

@@ -1,3 +1,4 @@
+<!-- 通栏版式样式 -->
 <template>
     <!-- 单页 -->
     <div>
@@ -48,6 +49,13 @@
                         <el-table-column prop="component_num" label="组件版式数量" width="">
                         </el-table-column>
                         <el-table-column prop="size" label="尺寸（宽 * 高）" width="">
+                        </el-table-column>
+                          <el-table-column prop="status" label="通栏版式状态" width="">
+                            <template slot-scope="scope">
+                                <span v-if="scope.row.status == 0">不可应用</span>
+                                <span v-if="scope.row.status == 1">可应用</span>
+                                <span v-if="scope.row.status == 2">已应用</span>
+                            </template>
                         </el-table-column>
                         <el-table-column prop="created_at" label="添加时间" width="">
                         </el-table-column>