Merge branch 'pre' into pre-0523diyweb-fr

src/api/module.js

@@ -71,4 +71,4 @@ export const delStaticResource = (data) => {
         data
     })
 }
-// -------------自助建站-*-静态资源管理-----fr------end
+// -------------自助建站-*-静态资源管理-----fr------end

src/router/index.js

@@ -1138,6 +1138,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/imgList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/imgList.vue'),
+        meta: {
+          title: '静态资源管理',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // {
   //   path: '/documentation',
   //   component: Layout,

src/router/modules/dangyunlong.js

@@ -67,5 +67,53 @@ const dangyunlongRouter= [
       }
     ]
   },
+  {
+    path: '/size',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/size'),
+        meta: {
+          title: '尺寸',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/skin',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/skin'),
+        meta: {
+          title: '皮肤',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/deploy',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/deploy'),
+        meta: {
+          title: '部署列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
 ]
 export default dangyunlongRouter

src/views/componentGallery/deploy.vue

@@ -0,0 +1,438 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">网站名称</div>
+                        <el-input v-model="templateName" clearable placeholder="请输入网站名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">运行状态</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择应用状态">
+                            <el-option>未部署</el-option>
+                            <el-option>运行中</el-option>
+                            <el-option>已停止</el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="server_website_name" label="网站名称" width=""></el-table-column>
+                        <el-table-column prop="server_url" label="域名" width=""></el-table-column>
+                        <el-table-column prop="server_port" label="运行端口" width=""></el-table-column>
+                        <el-table-column prop="server_path" label="运行目录" width=""></el-table-column>
+                        <el-table-column prop="server_status" label="运行状态" width=""></el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 1.1  初始化数据 ---------------------------------
+            tableDivTitle: "网站服务列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            templateLoading: true,//页面加载中
+
+            tableData: [
+                {
+                    id: 1,
+                    server_website_name: '孪生站-农业类站点1',
+                    server_url: 'http://ls1.chsnzxw.com.cn',
+                    server_port: '10014',
+                    server_path: '/www/ls1chsnzxwcomcn/',
+                    server_status: '运行中'
+                },
+                {
+                    id: 2,
+                    server_website_name: '孪生站-农业类站点2',
+                    server_url: 'http://ls2.chsnzxw.com.cn',
+                    server_port: '10015',
+                    server_path: '/www/ls2chsnzxwcomcn/',
+                    server_status: '已停止'
+                }
+            ],//表格数据
+
+
+            //1.2 搜索框相关 ----------------------------------
+            templateStyle: '',//模板风格
+            templateName: '',//模板名称
+
+
+            // 1.3 分页相关 -----------------------------------
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 获得服务器运行状态
+        getData() {
+            
+        },
+        
+       
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            
+        },
+        //1.6 重置按钮
+        goReset() {
+           
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+    },
+    mounted() {
+        this.getData()
+        this.getStyleList() //获取模板风格
+    },
+}
+</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;
+    }
+}
+
+// 弹出层内容
+.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;
+        }
+    }
+
+    .uploaderBox,
+    .avatar-upload-container {
+        display: inline-block;
+    }
+
+    .avatar-uploader {
+        background-color: #fff;
+    }
+
+    .uploaderBox {
+        margin-right: 20px;
+        position: relative;
+
+        h5 {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #999999;
+            margin-top: 0px;
+        }
+    }
+
+    ::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;
+
+    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;
+}
+</style>

src/views/componentGallery/imgList.vue

@@ -424,6 +424,12 @@ export default {
             });
             if (this.dialogName === "添加") {
                 // 直接从 data 中获取参数
+<<<<<<< HEAD
+=======
+                if(this.ruleForm.website_id == 'undefind' || this.ruleForm.website_id == ''){
+                    this.ruleForm.website_id = 0;
+                }
+>>>>>>> pre
                 const data = {
                     img_alias: this.ruleForm.img_alias,
                     img_url: this.ruleForm.img_url,

src/views/componentGallery/module.vue

@@ -6,27 +6,53 @@
             <el-row>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">版块</div>
-                        <el-select v-model="templateName" clearable placeholder="请选择版块">
+                        <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>
+                        <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>
+                        <el-select v-model="templateName" clearable placeholder="请选择风格">
                             <el-option v-for="item in options" :key="item.id" :label="item.sector_name"
                                 :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="8" class="right">
-                    <div class="btnList">
-                        <button class="search" @click="goSearch">搜索</button>
-                        <button class="reset" @click="goReset">重置</button>
+                <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>
                     </div>
                 </el-col>
             </el-row>
+
+
         </div>
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
@@ -35,16 +61,14 @@
             <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-column prop="component_name" label="组件名称" width="">
-                        </el-table-column>
-                        <el-table-column prop="component_code" 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 prop="id" 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="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">
                             <template slot-scope="scope">
                                 <div class="listBtnBox">
@@ -82,17 +106,58 @@
             :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="plateName">
+                    <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>
+                    <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>
+                    <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-select v-model="ruleForm.plateName" clearable placeholder="请选择所属皮肤">
+                            <el-option>简约</el-option>
+                            <el-option>黑暗</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>
-                    <el-form-item label="组件名称:" prop="component_name">
-                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
+                    <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-select v-model="ruleForm.plateName" clearable placeholder="请选择所属皮肤">
+                            <el-option>600x480</el-option>
+                            <el-option>300x200</el-option>
+                        </el-select>
+                    </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>
+                    <el-form-item label="含有图片新闻数量:" prop="component_code">
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
+                            :disabled="this.dialogName === '编辑'"></el-input>
                     </el-form-item>
-                    <el-form-item label="组件代码:" prop="component_code">
-                        <el-input v-model="ruleForm.component_code" placeholder="请输入组件代码"
+                    <el-form-item label="含有文字新闻数量:" prop="component_code">
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
                             :disabled="this.dialogName === '编辑'"></el-input>
                     </el-form-item>
                     <el-form-item label="组件展示图:" prop="component_img" :label-width="formLabelWidth"
@@ -710,6 +775,27 @@ input[aria-hidden=true] {
     }
 }
 
+.sizeBox {
+    display: flex;
+    align-items: center;
+    width: 80%;
+    .sizeInputSymbol {
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .sizeInput {
+        width: 50%;
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 100%;
+        }
+    }
+}
+
 // 弹出层内容
 .dialogText {
     margin: 0 7px 0 3px;
@@ -832,4 +918,8 @@ input[aria-hidden=true] {
 .dialog-footer {
     margin: 0 auto;
 }
+
+.rowMargin {
+    margin-top: 20px;
+}
 </style>

src/views/componentGallery/plate.vue

@@ -4,6 +4,12 @@
         <!-- 头部搜索框部分 -->
         <div class="title">
             <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">通栏名称</div>
+                        <el-input v-model="plateName" clearable placeholder="请输入通栏名称"></el-input>
+                    </div>
+                </el-col>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">模板风格</div>
@@ -15,35 +21,45 @@
                 </el-col>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">版块</div>
-                        <el-input v-model="plateName" clearable placeholder="请输入版块名称"></el-input>
+                        <div class="searchTitle">所属皮肤</div>
+                        <el-input v-model="plateName" clearable placeholder="请输入皮肤名称"></el-input>
                     </div>
                 </el-col>
-                <el-col :span="8" class="right">
+                <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>
+                        <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>
+                    </div>
+                </el-col>
+            </el-row>
         </div>
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
             <tableTitle :name="tableDivTitle" />
-            <button class="btn" @click="addWebsite">添加版块</button>
+            <button class="btn" @click="addWebsite">添加通栏</button>
             <el-row>
                 <template>
                     <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="plateLoading">
-                        <el-table-column fixed prop="id" label="编号" width="90">
-                        </el-table-column>
-                        <el-table-column prop="sector_name" label="版块" width="">
-                        </el-table-column>
-                        <el-table-column prop="sector_code" 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 prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="sector_name" label="通栏名称" width=""></el-table-column>
+                        <el-table-column prop="sector_size" label="尺寸" width=""></el-table-column>
+                        <el-table-column prop="sector_skin" label="所属皮肤" width=""></el-table-column>
+                        <el-table-column prop="sector_style" label="所属风格" width=""></el-table-column>
+                        <el-table-column prop="sector_page" 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">
                             <template slot-scope="scope">
                                 <div class="listBtnBox">
@@ -81,19 +97,44 @@
             :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="templateStyle">
+                    <el-form-item label="通栏名称:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="输入通栏名称" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属页面:" prop="plateName">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择所属页面" :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
+                            <el-option>首页</el-option>
+                            <el-option>列表</el-option>
+                        </el-select>
+                    </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 options" :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
                         </el-select>
                     </el-form-item>
-                    <el-form-item label="版块名称:" prop="plateName">
-                        <el-input v-model="ruleForm.plateName" placeholder="请输入版块名称"></el-input>
+                    <el-form-item label="风格id:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="所属风格id" disabled></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 options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="皮肤id:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="所属皮肤id" disabled></el-input>
                     </el-form-item>
-                    <el-form-item label="版块代码:" prop="plateCode">
-                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码"
-                            :disabled="this.dialogName === '编辑'"></el-input>
+                    <el-form-item label="尺寸:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择尺寸"
+                            :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="通栏关键词:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="输入关键词" disabled></el-input>
                     </el-form-item>
                     <el-form-item label="页面类型:" prop="pageType">
                         <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
@@ -103,7 +144,7 @@
                             }}</el-checkbox>
                         </el-checkbox-group>
                     </el-form-item>
-                    <el-form-item label="组件展示图：" prop="image" :label-width="formLabelWidth"
+                    <el-form-item label="通栏缩略图：" prop="image" :label-width="formLabelWidth"
                         :class="['custom-form-item']" class="custom-align-right">
                         <div class="uploaderBox">
                             <!--图片上传组件 start ------------------------------------------------------------>
@@ -719,6 +760,28 @@ input[aria-hidden=true] {
         line-height: 36px;
         font-size: 16px;
     }
+
+}
+
+.sizeBox {
+    display: flex;
+    align-items: center;
+    width: 80%;
+    .sizeInputSymbol {
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .sizeInput {
+        width: 50%;
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 100%;
+        }
+    }
 }
 
 // 弹出层内容
@@ -837,4 +900,10 @@ input[aria-hidden=true] {
 .dialog-footer {
     margin: 0 auto;
 }
+
+.rowMargin {
+    margin-top: 20px;
+}
+
+
 </style>

src/views/componentGallery/size.vue

@@ -0,0 +1,498 @@
+<template>
+    <div>
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸高度</div>
+                        <el-input v-model="sizeHeight" clearable placeholder="请输入尺寸高度"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸宽度</div>
+                        <el-input v-model="sizeWidth" clearable placeholder="请输入尺寸宽度"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addSize">添加尺寸</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column label="尺寸高度" prop="height"></el-table-column>
+                        <el-table-column label="尺寸宽度" prop="width"></el-table-column>
+                        <el-table-column label="添加时间" prop="created_at"></el-table-column>
+                        <el-table-column label="修改时间" prop="updated_at"></el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------- ----------->
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination 
+                        background 
+                        @size-change="handleSizeChange" 
+                        @current-change="handleCurrentChange"
+                        :current-page="page" 
+                        :page-size="pageSize" 
+                        layout="total, prev, pager, next, jumper"
+                        :total="total"
+                    >
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="6vh" :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="sizeWidth">
+                        <el-input v-model="ruleForm.sizeWidth" placeholder="请输入宽度"></el-input>
+                    </el-form-item>
+                    <el-form-item label="尺寸高度:" prop="sizeHeight">
+                        <el-input v-model="ruleForm.sizeHeight" placeholder="请输入高度"></el-input>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+
+export default {
+    components: {
+        tableTitle,//表格标题
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            //1.查询条件 start ---------------------------------------->
+            sizeHeight: '',
+            sizeWidth: '',
+            //1.查询条件 end ---------------------------------------->
+
+            //2.列表数据 start ---------------------------------------->
+            tableData: [
+                {"id":1,"height":"1200","width":"300","created_at":"2025-05-23 10:00:00","updated_at":"2025-05-23 10:00:00"},
+                {"id":1,"height":"1200","width":"450","created_at":"2025-05-23 10:00:00","updated_at":"2025-05-23 10:00:00"},
+            ],
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            //2.列表数据 end ---------------------------------------->
+
+            //3.弹出框 start ---------------------------------------->
+            dialogTableVisible: false,
+            tableDivTitle:'尺寸管理',
+            dialogName:'添加尺寸',
+            ruleForm: {
+                sizeWidth: '', 
+                sizeHeight: '', 
+            },
+            rules: {
+                sizeWidth: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sizeHeight: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+            //3.弹出框 end ---------------------------------------->
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 请求数据
+        getData() {
+            
+        },
+        //1.2 删除
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意：删除后通栏与组件中无法再选择该尺寸！', '是否确认删除该尺寸？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+                
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索
+        goSearch() {
+           
+        },
+        //1.6 重置
+        goReset() {
+            this.templateStyle = ""
+            this.templateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id) {
+            this.dialogTableVisible = true
+        },
+        //1.8 添加
+        addSize() {
+            this.dialogTableVisible = true
+        },
+
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 1.9 提交表单
+        submitForm() {
+            this.dialogTableVisible = false
+        },
+        // 1.10 取消提交
+        cancelForm(){
+            this.dialogTableVisible = false
+        }
+        // 弹出层相关方法 end ---------------------------------------------------->
+    },
+    mounted() {
+      
+    },
+}
+</script>
+
+<style scoped lang="less">
+// 提示信息
+.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;
+    }
+}
+
+// 弹出层内容
+.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;
+        }
+    }
+
+    .uploaderBox,
+    .avatar-upload-container {
+        display: inline-block;
+    }
+
+    .avatar-uploader {
+        background-color: #fff;
+    }
+
+    .uploaderBox {
+        margin-right: 20px;
+        position: relative;
+
+        h5 {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #999999;
+            margin-top: 0px;
+        }
+    }
+
+    ::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;
+
+    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;
+}
+</style>

src/views/componentGallery/skin.vue

@@ -0,0 +1,1263 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">皮肤名称</div>
+                        <el-input v-model="templateName" clearable placeholder="请输入皮肤名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">风格名称</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择风格">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加皮肤</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="templateLoading">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="template_name" label="皮肤名称" width=""></el-table-column>
+                        <el-table-column prop="template_class_name" label="所属风格" width=""></el-table-column>
+                        <el-table-column prop="template_skin_keyword" 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">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="6vh"
+            :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="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请关联皮肤风格">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="皮肤名称:" prop="templateName">
+                        <el-input v-model="ruleForm.templateName" placeholder="请输入皮肤名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="皮肤关键词:" prop="templateKeyword">
+                        <el-input v-model="ruleForm.templateKeyword" placeholder="请输入皮肤关键词"></el-input>
+                    </el-form-item>
+                    <el-form-item label="风格图:" prop="templateImg" :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_home">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_home" :src="logoUrl_home" 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="homeImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_home" class="delete-button" @click="handleDelete_home">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>首页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <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_classify">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_class" :src="logoUrl_class" 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="classifyImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_class" class="delete-button" @click="handleDelete_class">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>分类页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <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_list">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_list" :src="logoUrl_list" 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="listImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_list" class="delete-button" @click="handleDelete_list">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>列表页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <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_detail">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_detail" :src="logoUrl_detail" 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="detailImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_detail" class="delete-button"
+                                    @click="handleDelete_detail">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>详情页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <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_search">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_search" :src="logoUrl_search" 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="searchImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_search" class="delete-button"
+                                    @click="handleDelete_search">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>搜索页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <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_sList">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_sList" :src="logoUrl_sList" 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="sListImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_sList" class="delete-button" @click="handleDelete_sList">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>特殊列表页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <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_sDetail">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_sDetail" :src="logoUrl_sDetail" 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="sDetailImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_sDetail" class="delete-button"
+                                    @click="handleDelete_sDetail">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>特殊详情页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <!--  -->
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getTemplateClass, getTemplateList, addTemplate, delTemplate, updateTemplate, getTemplateInfo } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 1.1  初始化数据 ---------------------------------
+            tableDivTitle: "模板列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            templateLoading: true,//页面加载中
+
+            tableData: [],//表格数据
+
+
+            //1.2 搜索框相关 ----------------------------------
+            templateStyle: '',//模板风格
+            templateName: '',//模板名称
+
+
+            // 1.3 分页相关 -----------------------------------
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+            //3.4 上传logo图片 --------------------------------
+            // logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            //首页图片
+            homeImg: '',
+            logoUrl_home: '',
+            home_obj: {
+                url: '',
+                name: '首页',
+                value: '1',
+            },
+            //分类页图片
+            classifyImg: '',
+            logoUrl_class: '',
+            class_obj: {
+                url: '',
+                name: '分类页',
+                value: '2',
+            },
+            //列表页图片
+            listImg: '',
+            logoUrl_list: '',
+            list_obj: {
+                url: '',
+                name: '列表页',
+                value: '3',
+            },
+            //详情页图片
+            detailImg: '',
+            logoUrl_detail: '',
+            detail_obj: {
+                url: '',
+                name: '详情页',
+                value: '4',
+            },
+            //搜索页图片
+            searchImg: '',
+            logoUrl_search: '',
+            search_obj: {
+                url: '',
+                name: '搜索页',
+                value: '5',
+            },
+            //特殊列表页图片
+            sListImg: '',
+            logoUrl_sList: '',
+            sList_obj: {
+                url: '',
+                name: '特殊列表页',
+                value: '6',
+            },
+            //特殊详情页图片
+            sDetailImg: '',
+            logoUrl_sDetail: '',
+            sDetail_obj: {
+                url: '',
+                name: '特殊详情页',
+                value: '7',
+            },
+            //图片json
+            img_arr: [],
+
+            value: '',
+            options: [],
+
+            //活动id
+            activeid: "",
+
+            formLabelWidth: '', //广告示例图相关
+
+            // 弹框相关 -------------------------------------------
+            ruleForm: {
+                templateStyle: '', //模板风格
+                templateName: '', //模板名称
+                templateImg: [], //模板图片
+            },
+            rules: {
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateImg: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if(this.templateStyle != '' || this.templateName != ''){
+                getTemplateList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: this.templateStyle, //模板风格id
+                    template_name: this.templateName, //模板名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }else{
+                getTemplateList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.templateLoading = false
+                    }
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
+        },
+        
+        //获取模板风格
+        getStyleList() {
+            getTemplateClass({
+                page: this.page,
+                page_size: this.pageSize
+            }).then(data => {
+                console.log('模板风格列表', data);
+                this.options = data.data
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+                delTemplate({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            getTemplateList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: this.templateStyle, //模板风格id
+                template_name: this.templateName, //模板名称
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+        },
+        //1.6 重置按钮
+        goReset() {
+            this.templateStyle = ""
+            this.templateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id, val) {
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+
+            //数据回显
+            this.ruleForm.templateStyle = val.template_class_id
+            this.ruleForm.templateName = val.template_name
+            this.img_arr = JSON.parse(val.template_img)
+
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+
+            for (let item of this.img_arr) {
+                if (item.name == '首页') {
+                    this.logoUrl_home = item.url
+                    this.homeImg = item.url
+                }
+                if (item.name == '分类页') {
+                    this.logoUrl_class = item.url
+                    this.classifyImg = item.url
+                }
+                if (item.name == '列表页') {
+                    this.logoUrl_list = item.url
+                    this.listImg = item.url
+                }
+                if (item.name == '详情页') {
+                    this.logoUrl_detail = item.url
+                    this.detailImg = item.url
+                }
+                if (item.name == '搜索页') {
+                    this.logoUrl_search = item.url
+                    this.searchImg = item.url
+                }
+                if (item.name == '特殊列表页') {
+                    this.logoUrl_sList = item.url
+                    this.sListImg = item.url
+                }
+                if (item.name == '特殊详情页') {
+                    this.logoUrl_sDetail = item.url
+                    this.sDetailImg = item.url
+                }
+            }
+        },
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.templateStyle = ''
+            this.ruleForm.templateName = ''
+            this.ruleForm.templateImg = []
+            this.img_arr = []
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+        },
+
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 1.9 提交表单
+        submitForm() {
+            this.img_arr = []
+            //首页
+            if (this.logoUrl_home) {
+                this.home_obj.url = this.homeImg
+                this.img_arr.push(this.home_obj)
+            }
+            //分类页
+            if (this.logoUrl_class) {
+                this.class_obj.url = this.classifyImg
+                this.img_arr.push(this.class_obj)
+            }
+            //列表页
+            if (this.logoUrl_list) {
+                this.list_obj.url = this.listImg
+                this.img_arr.push(this.list_obj)
+            }
+            //详情页
+            if (this.logoUrl_detail) {
+                this.detail_obj.url = this.detailImg
+                this.img_arr.push(this.detail_obj)
+            }
+            //搜索页
+            if (this.logoUrl_search) {
+                this.search_obj.url = this.searchImg
+                this.img_arr.push(this.search_obj)
+            }
+            //特殊列表页
+            if (this.logoUrl_sList) {
+                this.sList_obj.url = this.sListImg
+                this.img_arr.push(this.sList_obj)
+            }
+            //特殊详情页
+            if (this.logoUrl_sDetail) {
+                this.sDetail_obj.url = this.sDetailImg
+                this.img_arr.push(this.sDetail_obj)
+            }
+            function cleanObProp(arr) {
+                return arr.map(item => {
+                    const newItem = {};
+                    for (const key in item) {
+                        if (key !== '__ob__') {
+                            newItem[key] = item[key];
+                        }
+                    }
+                    return newItem;
+                });
+            }
+            const cleanArray = cleanObProp(this.img_arr);
+            this.ruleForm.templateImg = JSON.stringify(cleanArray);
+            console.log(this.ruleForm.templateImg);
+
+            if (this.dialogName == "添加") {
+                addTemplate({
+                    template_name: this.ruleForm.templateName, //模板名称
+                    template_img: this.ruleForm.templateImg, // 模板图片
+                    template_class_id: this.ruleForm.templateStyle, //模板风格id
+                }).then(data => {
+                    console.log(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 {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+
+            if (this.dialogName == "编辑") {
+                updateTemplate({
+                    id: this.activeid, //活动id
+                    template_name: this.ruleForm.templateName, //模板名称
+                    template_img: this.ruleForm.templateImg, // 模板图片
+                    template_class_id: this.ruleForm.templateStyle, //模板风格id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+
+        //3.6 上传图片操作
+        beforeAvatarUpload_home(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_home = res.data.imgUrl;//显示缩略图
+                this.homeImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_classify(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_class = res.data.imgUrl;//显示缩略图
+                this.classifyImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_list(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_list = res.data.imgUrl;//显示缩略图
+                this.listImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_detail(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_detail = res.data.imgUrl;//显示缩略图
+                this.detailImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_search(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_search = res.data.imgUrl;//显示缩略图
+                this.searchImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_sList(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_sList = res.data.imgUrl;//显示缩略图
+                this.sListImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_sDetail(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_sDetail = res.data.imgUrl;//显示缩略图
+                this.sDetailImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete_home() {
+            // 删除图片
+            this.logoUrl_home = ''; // 清空图片 URL
+        },
+        handleDelete_class() {
+            // 删除图片
+            this.logoUrl_class = ''; // 清空图片 URL
+        },
+        handleDelete_list() {
+            // 删除图片
+            this.logoUrl_list = ''; // 清空图片 URL
+        },
+        handleDelete_detail() {
+            // 删除图片
+            this.logoUrl_detail = ''; // 清空图片 URL
+        },
+        handleDelete_search() {
+            // 删除图片
+            this.logoUrl_search = ''; // 清空图片 URL
+        },
+        handleDelete_sList() {
+            // 删除图片
+            this.logoUrl_sList = ''; // 清空图片 URL
+        },
+        handleDelete_sDetail() {
+            // 删除图片
+            this.logoUrl_sDetail = ''; // 清空图片 URL
+        },
+        // 3.7 弹出层相关方法 end ------------------------------------------------------------>
+
+    },
+    mounted() {
+        this.getData()
+        this.getStyleList() //获取模板风格
+    },
+}
+</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;
+    }
+}
+
+// 弹出层内容
+.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;
+        }
+    }
+
+    .uploaderBox,
+    .avatar-upload-container {
+        display: inline-block;
+    }
+
+    .avatar-uploader {
+        background-color: #fff;
+    }
+
+    .uploaderBox {
+        margin-right: 20px;
+        position: relative;
+
+        h5 {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #999999;
+            margin-top: 0px;
+        }
+    }
+
+    ::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;
+
+    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;
+}
+</style>

src/views/componentGallery/style.vue

@@ -6,17 +6,8 @@
             <el-row>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">模板风格</div>
-                        <el-select v-model="templateStyle" clearable placeholder="请选择">
-                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
-                            </el-option>
-                        </el-select>
-                    </div>
-                </el-col>
-                <el-col :span="6" class="left">
-                    <div class="searchBox">
-                        <div class="searchTitle">模板名称</div>
-                        <el-input v-model="templateName" clearable placeholder="请输入模板名称"></el-input>
+                        <div class="searchTitle">风格名称</div>
+                        <el-input v-model="templateName" clearable placeholder="请输入风格名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -36,13 +27,13 @@
                     <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="templateLoading">
                         <el-table-column fixed prop="id" label="编号" width="90">
                         </el-table-column>
-                        <el-table-column prop="template_class_name" label="模板风格" width="">
+                        <el-table-column prop="template_class_name" label="风格名称" width="">
                         </el-table-column>
-                        <el-table-column prop="template_name" label="模板名称" width="">
+                        <el-table-column prop="template_keyword" label="风格关键词" width="">
                         </el-table-column>
-                        <el-table-column prop="created_at" label="添加时间" width="">
+                        <el-table-column prop="template_count" label="皮肤总量" width="">
                         </el-table-column>
-                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        <el-table-column prop="created_at" label="添加时间" width="">
                         </el-table-column>
                         <el-table-column fixed="right" label="操作" width="200">
                             <template slot-scope="scope">
@@ -81,203 +72,11 @@
             :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="templateStyle">
-                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择模板风格">
-                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
-                            </el-option>
-                        </el-select>
+                    <el-form-item label="风格名称:" prop="templateName">
+                        <el-input v-model="ruleForm.templateName" placeholder="请输入风格名称"></el-input>
                     </el-form-item>
-                    <el-form-item label="模板名称:" prop="templateName">
-                        <el-input v-model="ruleForm.templateName" placeholder="请输入模板名称"></el-input>
-                    </el-form-item>
-                    <el-form-item label="风格图:" prop="templateImg" :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_home">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_home" :src="logoUrl_home" 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="homeImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_home" class="delete-button" @click="handleDelete_home">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>首页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <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_classify">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_class" :src="logoUrl_class" 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="classifyImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_class" class="delete-button" @click="handleDelete_class">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>分类页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <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_list">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_list" :src="logoUrl_list" 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="listImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_list" class="delete-button" @click="handleDelete_list">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>列表页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <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_detail">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_detail" :src="logoUrl_detail" 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="detailImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_detail" class="delete-button"
-                                    @click="handleDelete_detail">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>详情页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <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_search">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_search" :src="logoUrl_search" 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="searchImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_search" class="delete-button"
-                                    @click="handleDelete_search">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>搜索页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <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_sList">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_sList" :src="logoUrl_sList" 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="sListImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_sList" class="delete-button" @click="handleDelete_sList">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>特殊列表页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <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_sDetail">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_sDetail" :src="logoUrl_sDetail" 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="sDetailImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_sDetail" class="delete-button"
-                                    @click="handleDelete_sDetail">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>特殊详情页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <!--  -->
+                    <el-form-item label="风格关键词:" prop="templateName">
+                        <el-input v-model="ruleForm.templateName" placeholder="请输入风格关键词"></el-input>
                     </el-form-item>
                 </div>
                 <div class="dialogBtn">

src/views/job/checkjobRecruitingList.vue

@@ -48,7 +48,7 @@
                 <template slot-scope="scope">
                   <div class="listBtnBox">
                     <div class="listMainBtn" @click="getUpRow(scope.row.id, tableData)" v-if="creatNews_user_type == '10000'"><i class="el-icon-check"></i>审核</div>
-                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
+                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>删除</div>
                     <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
                   </div>
                 </template>

src/views/job/components/CityCascader.vue

@@ -2,7 +2,7 @@
   <el-cascader
     :key="cascaderKey"
     v-model="internalValue"
-    placeholder="请选择地区"
+    placeholder="请选择公司地址"
     :props="SearchCityData"
     filterable
     clearable

src/views/job/creatJob.vue

@@ -11,8 +11,8 @@
                 clearable></el-cascader>
             </el-form-item>
           </div>
-          <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
-            <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择导航池名称" :props="parentData_2"
+          <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+            <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择栏目名称" :props="parentData_2"
               popper-class="my_cascader" filterable clearable></el-cascader>
           </el-form-item>
           <el-form-item label="招聘职位名称：" prop="title" class="custom-align-right">
@@ -147,11 +147,13 @@
               <el-input v-model="form.company_url" autocomplete="off" :disabled="creatNews_user_type !== '10000'"
                 placeholder="请输入公司网址"></el-input>
             </el-form-item>
-            <el-form-item label="地址：" prop="address_arr_id" class="custom-align-right">
+            <el-form-item label="公司地址：" prop="address_arr_id" class="custom-align-right">
               <CityCascader v-model="form.address_arr_id" @update-city-id="update_address_arr_id"
                 :user_type="creatNews_user_type"></CityCascader>
+            </el-form-item>
+            <el-form-item label="详细地址：" prop="address_arr_id" class="custom-align-right">
               <el-input v-model="form.address" autocomplete="off" :disabled="creatNews_user_type !== '10000'"
-                placeholder="请输入公司地址"></el-input>
+                placeholder="请输入详细地址"></el-input>
             </el-form-item>
             <el-form-item label="邮箱：" prop="email" class="custom-align-right">
               <el-input v-model="form.email" autocomplete="off" :disabled="creatNews_user_type !== '10000'"
@@ -202,6 +204,20 @@ export default {
         callback()
       }
     }
+    const validateZero = (rule, value, callback) => {
+      if (value == null || value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateMobile = (rule, value, callback) => {
+      if (value.length != 11) {
+        callback(new Error('请输入正确的手机号！'))
+      } else {
+        callback()
+      }
+    }
     let self = this;
     //0.全局操作 end ------------------------------------------------------------>
     return {
@@ -235,13 +251,13 @@ export default {
       creatNews_user_type: '0',//判断用户类型'
 
       form: {
-        web_site_id: '',//站点名称
+        web_site_id: "",//站点名称
         user_type: "??",//判断用户类型'
-        // cat_arr_id: 0,//导航池名称
+        // cat_arr_id: 0,//栏目名称
         nav_add_pool_id: [],//导航池子级
         city_arr_id: [],//城市
         // websiteName: "",//站点名称
-        cat_arr_id: [],//导航池名称
+        cat_arr_id: [],//栏目名称
         title: "",//招聘职位名称
         province_id: "",//省份
         job_pronviceid: "",//省份id
@@ -251,12 +267,12 @@ export default {
         jtzw_id: "",//具体职位
         nature_id: "",//职位性质
         createjob_pronvice: "",//工作省份
-        experience: "",//工作经验
-        educational: "",//学历
-        salary: "",//月薪
-        number: "",//招聘人数
-        language: "",//语言能力
-        level: "",//掌握程度
+        experience: null,//工作经验
+        educational: null,//学历
+        salary: null,//月薪
+        number: null,//招聘人数
+        language: null,//语言能力
+        level: null,//掌握程度
         description: "",//职位描述
         jt_description: "",//具体要求
         due_data: "",//截止日期
@@ -264,7 +280,7 @@ export default {
         business_name: "",//公司名称
         company_hy_id: "",//所属行业
         company_size: "",//公司规模
-        company_nature: "",//公司性质
+        company_nature: null,//公司性质
         introduction: "",//公司简介
         real_name: "",//联系人
         mobile: "",//联系电话
@@ -278,24 +294,24 @@ export default {
       //1.2 表单验证规则
       formRules: {
         // 站点名称
-        web_site_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        //导航池名称不能为空
-        cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
-        province_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        web_site_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        //栏目名称不能为空
+        cat_arr_id: [{ required: true, trigger: 'change', validator: validateArray }],
+        province_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 招聘职位名称
         title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 职位类别
-        zw_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        zw_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         //具体职位
-        jtzw_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        jtzw_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 职位性质
-        nature_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        nature_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 工作省份
-        province_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        province_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 工作城市
-        city_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        city_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 行业分类
-        hy_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        hy_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 职位描述
         description: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 具体要求
@@ -303,25 +319,25 @@ export default {
         // 截止日期
         due_data: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 薪水
-        salary: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        salary: [{ required: true, trigger: 'change', validator: validateZero }],
 
 
         // 公司名称
         business_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 所属行业
-        company_hy_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_hy_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 公司规模
-        company_size: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_size: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 公司简介
         introduction: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 联系人
         real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 联系电话
-        mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
         // 地址
-        // address_arr_id: [{ required: true, trigger: 'blur', validator: validateEmpty }] ,
+        address_arr_id: [{ required: true, trigger: 'change', validator: validateArray }],
         // 具体地址
-        address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        address: [{ required: true, trigger: 'blur', message: '该项不能为空!' }],
         // 邮箱
         email: [{ required: true, trigger: 'blur', validator: validateEmpty }],
       },
@@ -383,7 +399,7 @@ export default {
           }
 
           let parames = {
-            'type': 5,
+            'type': 4,
             'website_id': this.websiteid ? this.websiteid : 0,
             'pid': parentId ? parentId : 0
 
@@ -391,9 +407,11 @@ export default {
           self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
 
             if (res.data) {
+              console.log('11111111112222222222222222', res.data);
+
               const nodes = res.data.map(item => ({
                 value: item.category_id,
-                label: item.name,
+                label: item.alias,
                 leaf: level >= 3,
                 children: []
               }))
@@ -535,8 +553,11 @@ export default {
           delete this.form.province_id;
           delete this.form.job_pronviceid;
           delete this.form.city_id;
-          delete this.form.createjob_pronvice;
+          delete this.form.createjob_pronvice;//工作省份
 
+          if (this.form.salary == null) {
+            this.form.salary = 0;
+          }
 
           if (this.creatNews_user_type === '10000') {
             this.form.website_id = this.form.web_site_id;
@@ -759,6 +780,7 @@ export default {
           delete this.form.city_id;
           delete this.form.createjob_pronvice;
           delete this.form.web_site_id;
+          
           this.$store.dispatch('news/upJobRecruiting', this.form).then(res => {
             if (res.code != 200) {
               this.$message.error("修改失败，请稍后再试！");
@@ -1040,4 +1062,39 @@ export default {
   }
 }
 
+//该项不能为空几个字的位置
+::v-deep .el-form-item__error {
+  color: #ff4949;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: relative;
+}
+
+//输入框距离底部的距离
+::v-deep .el-form-item {
+  margin-bottom: 5px;
+}
+
+//图片提示文字样式
+.photo_tips {
+  font-size: 14px;
+  color: #999;
+}
+
+#educationExperience,
+#workExperience,
+#professionalSkills {
+  position: relative;
+}
+
+.addBtn {
+  position: absolute;
+  right: 0px;
+  top: -8px;
+  width: 78px;
+  // display: inline-block;
+  // margin-bottom: 0px;
+}
+
 //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/job/jobRecruitingList.vue

@@ -48,7 +48,7 @@
                 <template slot-scope="scope">
                   <div class="listBtnBox">
                     <div class="listUpBtn" @click="returnRow(scope.row.id, tableData)" v-if="creatNews_user_type == 10000"><i class="el-icon-refresh-right"></i>撤回</div>
-                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
+                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>删除</div>
                     <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
                   </div>
                 </template>

src/views/news/addJobHunting.vue

@@ -16,6 +16,23 @@
       </div>
       <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
         <div class="formDiv">
+          <div v-if="creatNews_user_type != 10000">
+            <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的栏目名称" :props="parentData"
+                filterable clearable></el-cascader>
+            </el-form-item>
+          </div>
+          <div v-if="creatNews_user_type == 10000">
+            <el-form-item label="站点名称：" prop="web_site_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.web_site_id" placeholder="请选择站点名称"
+                :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable
+                clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的栏目名称" :props="parentData_2"
+                filterable clearable></el-cascader>
+            </el-form-item>
+          </div>
           <el-form-item label="头像：" class="custom-align-right" prop="imgUrl">
             <div class="uploaderBox">
               <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
@@ -44,34 +61,12 @@
             </template>
             <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"></el-input>
           </el-form-item>
-          <div v-if="creatNews_user_type != 10000">
-            <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的展示名称" :props="parentData"
-                filterable clearable></el-cascader>
-            </el-form-item>
-          </div>
-          <div v-if="creatNews_user_type == 10000">
-
-            <el-form-item label="站点名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey" v-model="form.web_site_id" placeholder="请选择站点名称"
-                :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable
-                clearable></el-cascader>
-            </el-form-item>
-
-
-            <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData_2"
-                filterable clearable></el-cascader>
-            </el-form-item>
-
-          </div>
           <el-form-item label="性别：" prop="sexy" class="custom-align-right">
             <el-radio-group v-model="form.sexy">
               <el-radio :label="1">男</el-radio>
               <el-radio :label="2">女</el-radio>
             </el-radio-group>
           </el-form-item>
-
           <el-form-item label="参加工作时间：" prop="jobtime" class="custom-align-right">
             <el-date-picker v-model="form.jobtime" type="date" placeholder="选择参加工作时间">
             </el-date-picker>
@@ -205,13 +200,10 @@
           </div>
 
           <div v-for="(item, index) in form.job_experience" :key="index">
-
             <el-form-item label="公司名称：" prop="company_name" class="custom-align-right" style="width: 100%;">
               <el-input v-model="form.job_experience[index].company_name" autocomplete="off"
                 placeholder="请输入公司名称"></el-input>
             </el-form-item>
-
-
             <el-form-item label="所属行业：" prop="job_industry" class="custom-align-right" style="width: 100%;">
               <el-select v-model="form.job_experience[index].job_industry" placeholder="请选择所属行业"
                 @change='changeCompanyNature()'>
@@ -236,7 +228,6 @@
               <el-input v-model="form.job_experience[index].department" autocomplete="off"
                 placeholder="请输入所属部门"></el-input>
             </el-form-item>
-
             <el-form-item label="在职时间：" prop="job_timeList" class="custom-align-right">
               <el-date-picker v-model="form.job_experience[index].job_timeList" type="daterange" range-separator="至"
                 start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
@@ -250,7 +241,7 @@
               <el-input v-model="form.job_experience[index].performance" autocomplete="off" type="textarea"
                 aria-rowspan="6" placeholder="请输入工作业绩"></el-input>
             </el-form-item>
-            <el-divider></el-divider>
+            <el-divider v-if="form.job_experience.length - 1"></el-divider>
           </div>
 
 
@@ -288,7 +279,7 @@
               <el-input v-model="form.education_experience[index].school_experience" autocomplete="off" type="textarea"
                 aria-rowspan="6" placeholder="请输入在校经历"></el-input>
             </el-form-item>
-            <!-- <el-divider content-position="right"> </el-divider> -->
+            <el-divider v-if="form.education_experience.length - 1"> </el-divider>
           </div>
         </div>
       </el-form>
@@ -453,11 +444,13 @@ export default {
       creatNews_user_type: 0,//判断用户类型'
 
       form: {
+        status: '',//状态
         experience: '',//工作经验
         industry: '',//行业
         job: '',//职位
         self_evaluation: '',//自我评价
         city_arr_id: [],
+        salary: '',//薪资
         skillList: [{ 'skill': '' }],
         job_experience: [{
           company_name: '',
@@ -503,24 +496,25 @@ export default {
       //1.2 表单验证规则
       formRules: {
         skillList: [{ required: true, trigger: 'blur', validator: validateArraySkill }],
-        salary: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        salary: [{ required: true, trigger: 'change', validator: validateEmpty }],
         //求职名称不能为空
         name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         imgUrl: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         sexy: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         jobtime: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         origin: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        city_arr_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        industry: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        job: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        city_arr_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        industry: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        job: [{ required: true, trigger: 'change', validator: validateEmpty }],
         slelf_evaluation: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         company_name: [{ required: true, trigger: 'blur', validator: validateCompanyNameEmpty }],
-        job_industry: [{ required: true, trigger: 'blur', validator: validateJobIndustryEmpty }],
+        job_industry: [{ required: true, trigger: 'change', validator: validateJobIndustryEmpty }],
         // job_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         job_timeList: [{ required: true, trigger: 'blur', validator: validateArray }],
         job_content: [{ required: true, trigger: 'blur', validator: validateArray }],
-        cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
-        job_typename: [{ required: true, trigger: 'blur', validator: validateArray }],
+        web_site_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        cat_arr_id: [{ required: true, trigger: 'change', validator: validateArray }],
+        job_typename: [{ required: true, trigger: 'change', validator: validateArray }],
       },
       //1.3富文本编辑器配置
 
@@ -689,7 +683,7 @@ export default {
     addExperience() {
       const hasEmptyExperience = this.form.job_experience.some(item => {
         // console.log(item, '-------------item--------')
-        if (item.company_name == '' || item.job_industry == '' || item.job_name == '' || item.job_timeList == '' || item.job_content == '' || item.job_typename == '') {
+        if (item.company_name == '' || item.job_industry == '' || item.job_timeList == '' || item.job_content == '' || item.job_typename == '') {
           this.$message.error('请先填写工作经历');
           return true; // 返回 true 表示找到了空的 skill
         }
@@ -711,9 +705,8 @@ export default {
     },
     addEducation() {
       const hasEmptyEducation = this.form.education_experience.some(item => {
-
-        if (item.school_name == '') {
-          this.$message.error('请先填写学校名称');
+        if (item.school_name == '' || item.school_education == '' || item.school_major == '' || item.school_timeList == '' || item.school_experience == '') {
+          this.$message.error('请将教育经历填写完整!');
           return true; // 返回 true 表示找到了空的 skill
         }
       })
@@ -786,7 +779,6 @@ export default {
             this.$message.error('请选择站点名称');
             return;
           }
-
           if (formCopy.jobtime != '' && formCopy.jobtime != null && formCopy.jobtime != undefined) {
             formCopy.jobtime = formatLocalDate(formCopy.jobtime);
           } else {
@@ -801,15 +793,22 @@ export default {
           formCopy.job_timeList.forEach(item => {
             item = formatLocalDate(item);
           });
+          if (formCopy.experience == '') {
+            formCopy.experience = 0;
+          }
           console.log(new Date().getTime(), '-------------------校验结束------------------');
           //判断用户身份
           if (this.creatNews_user_type == 10000) {
             console.log("用户身份为管理员,无需审核直接发布!")
             this.form.status = 2;
+            formCopy.status = 2;
           } else {
             console.log("用户身份为其他用户,提交到审核!")
             this.form.status = 1;
+            formCopy.status = 1;
+            this.form.web_site_id = formCopy.web_site_id;
           }
+          console.log(formCopy, '1111111111111-------------form2--------');
           this.$store.dispatch('news/addJobHunting', formCopy).then(res => {
             if (res.code == 200) {
               //汇报结果
@@ -821,10 +820,17 @@ export default {
               //返回列表页
               this.returnPage()
             } else {
-              this.$message({
-                type: 'error',
-                message: "求职发布失败，请稍后再试！"
-              });
+              if (res.code == 0 && res.message == '您已添加过求职信息') {
+                this.$message({
+                  type: 'error',
+                  message: "您已添加过求职信息！"
+                })
+              } else {
+                this.$message({
+                  type: 'error',
+                  message: "求职发布失败，请稍后再试！"
+                });
+              }
             }
           }).catch(() => {
             this.$message({
@@ -892,9 +898,25 @@ export default {
         this.form.salary = res.data.salary;
         this.form.self_evaluation = res.data.self_evaluation;
         this.form.job = parseInt(res.data.job);
+        if (this.form.job) {
+          this.$store.dispatch('news/getPositionList', { zwpid: this.form.job }).then(res => {
+            this.job_name_arr = res.data;
+          })
+          if (parseInt(res.data.job_name_get)) {
+            for (let i = 0; i < this.job_name_arr.length; i++) {
+              if (this.job_name_arr[i].id == parseInt(res.data.job_name_get)) {
+                this.form.job_name_get = this.job_name_arr[i].id;
+              }
+            }
+          }
+        }
         this.form.industry = res.data.industry;
-        this.form.experience = res.data.experience;
-
+        if (res.data.experience == 0) {
+          this.form.experience = '';
+        } else {
+          this.form.experience = res.data.experience;
+        }
+        // this.form.experience = res.data.experience;
 
         this.form.educational = res.data.educationa == null ? "" : parseInt(res.data.educational);
         this.form.politic = res.data.politic;
@@ -989,7 +1011,9 @@ export default {
             formCopy.birth = null;
           }
 
-
+          if (formCopy.experience == '') {
+            formCopy.experience = 0;
+          }
           formCopy.job_timeList.forEach(item => {
             item = formatLocalDate(item);
           });
@@ -998,9 +1022,12 @@ export default {
           if (this.creatNews_user_type == 10000) {
             console.log("用户身份为管理员,无需审核直接发布!")
             this.form.status = 2;
+            formCopy.status = 2;
           } else {
             console.log("用户身份为其他用户,提交到审核!")
             this.form.status = 1;
+            formCopy.status = 1;
+            this.form.web_site_id = formCopy.web_site_id;
           }
           this.$store.dispatch('news/updateJobHunting', formCopy).then(res => {
             //记录结束时间
@@ -1063,11 +1090,13 @@ export default {
       })
     },
     creatNews_nav_pool_change_fun() {      //xx  导航池级
-      let that = this; this.form.web_site_id = this.form.web_site_id[0]
+      let that = this;
+      this.form.web_site_id = this.form.web_site_id[0]
       that.parentKey_2 += 1;
       this.$store.dispatch('pool/get_creatNews_nav_son_actions', {
         'type': 5,
-        pid: String(this.creatNews_pid_num), website_id: String(this.form.web_site_id)
+        pid: String(this.creatNews_pid_num),
+        website_id: String(this.form.web_site_id)
       }).then(res => {
         if (res.data.length == 0) {//没有导航池子级
           // alert("没有导航池子级");

src/views/template/templateBase.vue

@@ -1,157 +1,246 @@
 <template>
-  <div class="mainBox">
-    <div class="layerBox" v-if="this.$store.state.template.stepStatus">
-      <tableTitle :name="templateStepTitle"/>
-      <step :activeNumber="1"/>
-    </div>
-    <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
-      <div class="layerBox">
-        <tableTitle :name="templateBaseTitle"/>
-        <div class="formDiv">
-          <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-checkbox-group v-model="form.page_type">
-                <el-checkbox label="1" disabled>首页</el-checkbox>
-                <el-checkbox label="2">分类页</el-checkbox>
-                <el-checkbox label="3">列表页</el-checkbox>
-                <el-checkbox label="4">详情页</el-checkbox>
-                <el-checkbox label="5">搜索页</el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </el-form-item>
-          <el-form-item :label="null" :label-width="formLabelWidth" class="custom-align-right">
-            <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="form.page_type">
-                <el-checkbox label="6">自定义列表页</el-checkbox>
-                <el-checkbox label="7" disabled>自定义详情页</el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </el-form-item>
+    <div class="mainBox">
+        <div class="layerBox" v-if="this.$store.state.template.stepStatus">
+            <tableTitle :name="templateStepTitle" />
+            <step :activeNumber="1" />
         </div>
-      </div>
-      <div class="layerBox">
-        <tableTitle :name="templateInfoTitle"/>
-        <div class="formDiv">
-          <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="statement" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.statement" placeholder="请输入.."></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="organizer" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.organizer" placeholder="请输入.."></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="copyright_information" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.copyright_information" placeholder="请输入.."></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="contact_number" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.contact_number" placeholder="请输入.." maxlength="255"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="company_address" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_address" placeholder="请输入.." maxlength="255"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="项目LOGO：" class="custom-align-right" prop="project_logo">
-            <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="projectLogoUpload">
-                <!-- 预览图片 -->
-                <img v-if="project_logo_src" :src="project_logo_src" class="avatar">
-                <div v-else class="chooseImgDiv">
-                  <div>
-                    <img src="@/assets/public/upload/noImage.png">
-                    <div>选择图片</div>
-                  </div>
+        <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
+            <div class="layerBox">
+                <tableTitle :name="templateBaseTitle" />
+                <div class="formDiv">
+                    <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-checkbox-group v-model="form.page_type">
+                                <el-checkbox label="1" disabled>首页</el-checkbox>
+                                <el-checkbox label="2" disabled>分类页</el-checkbox>
+                                <el-checkbox label="3" disabled>列表页</el-checkbox>
+                                <el-checkbox label="4" disabled>详情页</el-checkbox>
+                                <el-checkbox label="5">搜索页</el-checkbox>
+                            </el-checkbox-group>
+                        </div>
+                    </el-form-item>
+                    <el-form-item :label="null" :label-width="formLabelWidth" class="custom-align-right">
+                        <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="form.page_type">
+                                <el-checkbox label="6">底部菜单列表页</el-checkbox>
+                                <el-checkbox label="7" disabled>底部菜单详情页</el-checkbox>
+                            </el-checkbox-group>
+                        </div>
+                    </el-form-item>
                 </div>
-              </el-upload>
-              <input type="hidden" v-model="form.project_logo">
-            </div>
-          </el-form-item>
-          <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.project_name" placeholder="请输入.." maxlength="100"></el-input>
             </div>
-          </el-form-item>
-          <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="project_url" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.project_url" placeholder="请输入.."  maxlength="100"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="公司LOGO：" class="custom-align-right" prop="company_logo">
-            <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="companyLogoUpload">
-                <!-- 预览图片 -->
-                <img v-if="company_logo_src" :src="company_logo_src" class="avatar">
-                <div v-else class="chooseImgDiv">
-                  <div>
-                    <img src="@/assets/public/upload/noImage.png">
-                    <div>选择图片</div>
-                  </div>
+            <div class="layerBox">
+                <tableTitle :name="templateInfoTitle" />
+                <div class="formDiv">
+                    <el-form-item :label="null" :label-width="formLabelWidth" prop="role_id"
+                        class="custom-align-right">
+                        <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="form.singlePage">
+                                <el-checkbox label="1" disabled>本网概况</el-checkbox>
+                                <el-checkbox label="2" disabled>会员服务</el-checkbox>
+                                <el-checkbox label="3" disabled>免责声明</el-checkbox>
+                                <el-checkbox label="4" disabled>本网招聘</el-checkbox>
+                                <el-checkbox label="5" disabled>联系我们</el-checkbox>
+                            </el-checkbox-group>
+                        </div>
+                    </el-form-item>
                 </div>
-              </el-upload>
-              <input type="hidden" v-model="form.company_logo">
-            </div>
-          </el-form-item>
-          <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_name" placeholder="请输入.." maxlength="100"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="company_url" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_url" placeholder="请输入.." maxlength="100"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="icp_number" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.icp_number" placeholder="请输入.." maxlength="50"></el-input>
-            </div>  
-          </el-form-item>
-          <el-form-item label="网站备链接：" :label-width="formLabelWidth" prop="icp_number_url" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.." maxlength="100"></el-input>
-            </div>  
-          </el-form-item>
-          <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="record_number" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.record_number" placeholder="请输入.." maxlength="50"></el-input>
             </div>
-          </el-form-item>
-          <el-form-item label="网安备案号链接" :label-width="formLabelWidth" prop="record_number_url" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.record_number_url" placeholder="请输入.." maxlength="100"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="customer_service_qq" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.." maxlength="50"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="通联QQ号：" :label-width="formLabelWidth" prop="communications" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.communications" placeholder="请输入.." maxlength="50"></el-input>
+            <div class="layerBox">
+                <tableTitle :name="templateInfoTitle2" />
+                <div class="formDiv">
+                    <el-form-item :label="null" :label-width="formLabelWidth" prop="role_id"
+                        class="custom-align-right">
+                        <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="form.singlePage" class="linkBox">
+                                <div class="linkItem">
+                                    <div><el-checkbox label="1" disabled>不良举报中心</el-checkbox></div>
+                                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250427/1745733680817523.png">
+                                    <div class="linkUrl">https://www.12377.cn/</div>
+                                </div>
+                                <div class="linkItem">
+                                    <div><el-checkbox label="1" disabled>网络110举报服务</el-checkbox></div>
+                                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250427/1745733722226988.png">
+                                    <div class="linkUrl">http://www.bj.cyberpolice.cn/</div>
+                                </div>
+                                <div class="linkItem">
+                                    <div><el-checkbox label="1" disabled>住房与建设法制调研中心</el-checkbox></div>
+                                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250427/1745734162658708.jpg">
+                                    <div class="linkUrl">http://zjfzdy.org.cn/</div>
+                                </div>
+                                <div class="linkItem">
+                                    <div><el-checkbox label="1" disabled>乡村振兴调研中心</el-checkbox></div>
+                                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250427/1745734241791617.jpg">
+                                    <div class="linkUrl">http://xczxdyzx.org.cn/</div>
+                                </div>
+                            </el-checkbox-group>
+                        </div>
+                    </el-form-item>
+                </div>
             </div>
-          </el-form-item>
+            <!-- <div class="layerBox">
+                <tableTitle :name="templateInfoTitle" />
+                <div class="formDiv">
+                    <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="statement"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.statement" placeholder="请输入.."></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="organizer"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.organizer" placeholder="请输入.."></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="copyright_information"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.copyright_information" placeholder="请输入.."></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="contact_number"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.contact_number" placeholder="请输入.."
+                                maxlength="255"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="company_address"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.company_address" placeholder="请输入.."
+                                maxlength="255"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="项目LOGO：" class="custom-align-right" prop="project_logo">
+                        <div class="uploaderBox">
+                            <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                :before-upload="projectLogoUpload">
+                                <img v-if="project_logo_src" :src="project_logo_src" class="avatar">
+                                <div v-else class="chooseImgDiv">
+                                    <div>
+                                        <img src="@/assets/public/upload/noImage.png">
+                                        <div>选择图片</div>
+                                    </div>
+                                </div>
+                            </el-upload>
+                            <input type="hidden" v-model="form.project_logo">
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.project_name" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="project_url"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.project_url" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="公司LOGO：" class="custom-align-right" prop="company_logo">
+                        <div class="uploaderBox">
+                            <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                :before-upload="companyLogoUpload">
+                                <img v-if="company_logo_src" :src="company_logo_src" class="avatar">
+                                <div v-else class="chooseImgDiv">
+                                    <div>
+                                        <img src="@/assets/public/upload/noImage.png">
+                                        <div>选择图片</div>
+                                    </div>
+                                </div>
+                            </el-upload>
+                            <input type="hidden" v-model="form.company_logo">
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.company_name" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="company_url"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.company_url" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="icp_number"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.icp_number" placeholder="请输入.."
+                                maxlength="50"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="网站备链接：" :label-width="formLabelWidth" prop="icp_number_url"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="record_number"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.record_number" placeholder="请输入.."
+                                maxlength="50"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="网安备案号链接" :label-width="formLabelWidth" prop="record_number_url"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.record_number_url" placeholder="请输入.."
+                                maxlength="100"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="customer_service_qq"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.."
+                                maxlength="50"></el-input>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="通联QQ号：" :label-width="formLabelWidth" prop="communications"
+                        class="custom-align-right">
+                        <div class="formLabelFloatBox">
+                            <el-input type="text" v-model="form.communications" placeholder="请输入.."
+                                maxlength="50"></el-input>
+                        </div>
+                    </el-form-item>
+                </div>
+            </div> -->
+        </el-form>
+        <div class="bottomBtnBox">
+            <el-button type="info" @click="goToWebsite">返回</el-button>
+            <el-button type="primary" @click="editData" v-if="this.$route.query.step != undefined">编辑并进入下一步</el-button>
+            <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
         </div>
-      </div>
-    </el-form>
-    <div class="bottomBtnBox">
-      <el-button type="info" @click="goToWebsite">返回</el-button>
-      <el-button type="primary" @click="editData" v-if="this.$route.query.step!=undefined">编辑并进入下一步</el-button>
-      <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
     </div>
-  </div>
 </template>
 
 <script>
@@ -163,289 +252,347 @@ import tableTitle from './public/tableTitle';
 import step from './public/step';
 
 export default {
-  components: {
-    tableTitle,//表格标题
-    step//步骤条
-  },
-  data() {
-    // 配置验证规则：用于表单验证
-    const validateEmpty = (rule,value,callback) => {
-      if (value.length == 0) {
-        callback(new Error('该项不能为空！'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      templateStepTitle:"仅需四步，即可完成模板创建",
-      templateBaseTitle:"模板类型设置",
-      templateInfoTitle:"模板信息设置",
-      formLabelWidth:"120px",
-      editId:"",
-      form:{
-        website_id:"",//网站id
-        page_type:["1","7"],//页面类型
-        statement:"",//网站声明
-        organizer:"",//主办单位
-        copyright_information:"",//版权信息
-        contact_number:"",//联系电话
-        company_address:"",//公司地址
-        project_logo:"",//项目logo
-        project_name:"",//项目名称
-        project_url:"",//项目网址
-        company_logo:"",//公司logo
-        company_name:"",//公司名称
-        company_url:"",//公司网址
-        icp_number:"",//网站备案号
-        icp_number_url:"",//网站备案号链接
-        record_number:"",//网安备案号
-        record_number_url:"",//网安备案号链接
-        customer_service_qq:"",//客服qq客服
-        communications:"",//通联qq客服
-      },
-      project_logo_src:"",//项目logo缩略图
-      company_logo_src:"",//公司logo缩略图
-      //配置from表单验证规则
-      loginRules: { 
-        statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        organizer: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        copyright_information: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        contact_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        company_address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        project_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        project_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        company_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        company_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        icp_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        record_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        icp_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        record_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        company_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        project_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        customer_service_qq: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        communications: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-      }
-    };
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //上一步
-    goToWebsite(){
-      this.$router.push({
-        path: '/templateList'
-      });
+    components: {
+        tableTitle,//表格标题
+        step//步骤条
     },
-    //下一步
-    goToStyle(){
-      //先判断表达能否提交
-      this.$refs.form.validate(valid => {
-        if (valid) {
-
-        }
-      })
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
+    data() {
+        // 配置验证规则：用于表单验证
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
         }
-      });
+        return {
+            templateStepTitle: "仅需四步，即可完成模板创建",
+            templateBaseTitle: "网站页面类型设置",
+            templateInfoTitle: "单页设置",
+            templateInfoTitle2: "友情链接设置",
+            formLabelWidth: "120px",
+            editId: "",
+            form: {
+                website_id: "",//网站id
+                page_type: ["1", "2", "3", "4", "7"],//页面类型
+                singlePage: ["1", "2", "3", "4", "5"],//单页类型
+                // statement: "",//网站声明
+                // organizer: "",//主办单位
+                // copyright_information: "",//版权信息
+                // contact_number: "",//联系电话
+                // company_address: "",//公司地址
+                // project_logo: "",//项目logo
+                // project_name: "",//项目名称
+                // project_url: "",//项目网址
+                // company_logo: "",//公司logo
+                // company_name: "",//公司名称
+                // company_url: "",//公司网址
+                // icp_number: "",//网站备案号
+                // icp_number_url: "",//网站备案号链接
+                // record_number: "",//网安备案号
+                // record_number_url: "",//网安备案号链接
+                // customer_service_qq: "",//客服qq客服
+                // communications: "",//通联qq客服
+            },
+            project_logo_src: "",//项目logo缩略图
+            company_logo_src: "",//公司logo缩略图
+            //配置from表单验证规则
+            loginRules: {
+                statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                organizer: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                copyright_information: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contact_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                company_address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                project_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                project_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                company_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                company_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                icp_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                record_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                icp_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                record_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                company_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                project_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                customer_service_qq: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                communications: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        };
     },
-    //0.全局操作 end ------------------------------------------------------------>
+    methods: {
+        //0.全局操作 start ------------------------------------------------------------>
+        //上一步
+        goToWebsite() {
+            this.$router.push({
+                path: '/templateList'
+            });
+        },
+        //下一步
+        goToStyle() {
+            //先判断表达能否提交
+            this.$refs.form.validate(valid => {
+                if (valid) {
 
-    //1.提交表单 start ------------------------------------------------------------>
-    //1.1提交表单
-    addData(){
-      this.form.website_id = this.$route.query.website_id;
-      //console.log(this.form);
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          this.$store.dispatch('template/addWebsiteTemplateintel',this.form).then(res=>{
-            if(res.code==200){
-              this.$message.success('网站基本信息保存成功！');
-              //跳转到风格选择页面
-              this.$router.push({
+                }
+            })
+            this.$router.push({
                 path: '/templateStyle',
                 query: {
-                  website_id: this.$route.query.website_id,
-                  step:1
+                    id: this.editId
+                }
+            });
+        },
+        //0.全局操作 end ------------------------------------------------------------>
+
+        //1.提交表单 start ------------------------------------------------------------>
+        //1.1提交表单
+        addData() {
+            this.form.website_id = this.$route.query.website_id;
+            //console.log(this.form);
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.$store.dispatch('template/addWebsiteTemplateintel', this.form).then(res => {
+                        if (res.code == 200) {
+                            this.$message.success('网站基本信息保存成功！');
+                            //跳转到风格选择页面
+                            this.$router.push({
+                                path: '/templateStyle',
+                                query: {
+                                    website_id: this.$route.query.website_id,
+                                    step: 1
+                                }
+                            });
+                        } else {
+                            this.$message.error(res.message);
+                        }
+                    })
                 }
-              });
-            }else{
-              this.$message.error(res.message);
+            })
+        },
+        //1.2上传项目logo
+        projectLogoUpload(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;
             }
-          })
-        }
-      })
-    },
-    //1.2上传项目logo
-    projectLogoUpload(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.project_logo_src = res.data.imgUrl;//显示缩略图
-        this.form.project_logo = res.data.imgUrl;//提供表单地址
-        console.log(res.data.imgUrl)
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
-      })
-      // 阻止默认的上传行为
-      return false;
-    },
-    //1.3上传公司logo
-    companyLogoUpload(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.company_logo_src = res.data.imgUrl;//显示缩略图
-        this.form.company_logo = res.data.imgUrl;//提供表单地址
-        console.log(res.data.imgUrl)
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
-      })
-      // 阻止默认的上传行为
-      return false;
-    },
-    //提交表单 start ------------------------------------------------------------>
+            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.project_logo_src = res.data.imgUrl;//显示缩略图
+                this.form.project_logo = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '网络错误，请重试！'
+                });
+            })
+            // 阻止默认的上传行为
+            return false;
+        },
+        //1.3上传公司logo
+        companyLogoUpload(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.company_logo_src = res.data.imgUrl;//显示缩略图
+                this.form.company_logo = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '网络错误，请重试！'
+                });
+            })
+            // 阻止默认的上传行为
+            return false;
+        },
+        //提交表单 start ------------------------------------------------------------>
 
-    //2.编辑表单 start ------------------------------------------------------------>
-    //2.1回显数据
-    getWebsiteBase(website_id){
-      this.$store.dispatch('template/getWebsiteTemplateintel',{website_id:website_id}).then(res=>{
-        if(res.code==200){
-          this.form.website_id = res.data.website_id;//网站id
-          this.form.page_type = res.data.page_type;//页面类型
-          this.form.statement = res.data.statement;//网站声明
-          this.form.organizer = res.data.organizer;//主办单位
-          this.form.copyright_information = res.data.copyright_information;//版权信息
-          this.form.contact_number = res.data.contact_number;//联系电话
-          this.form.company_address = res.data.company_address;//公司地址
-          this.form.project_logo = res.data.project_logo;//项目logo
-          this.project_logo_src = res.data.project_logo;//项目logo缩略图
-          this.form.project_name = res.data.project_name;//项目名称
-          this.form.project_url = res.data.project_url;//项目网址
-          this.form.company_logo = res.data.company_logo;//公司logo
-          this.company_logo_src = res.data.company_logo;//公司logo缩略图
-          this.form.company_name = res.data.company_name;//公司名称
-          this.form.company_url = res.data.company_url;//公司网址
-          this.form.icp_number = res.data.icp_number;//网站备案号
-          this.form.icp_number_url = res.data.icp_number_url;//网站备案号链接
-          this.form.record_number = res.data.record_number;//网安备案号
-          this.form.record_number_url = res.data.record_number_url;//网安备案号链接
-          this.form.customer_service_qq = res.data.customer_service_qq;//客服qq客服
-          this.form.communications = res.data.communications;//通联qq客服
-        }else{
-          this.$message.error(res.message);
-        }
-      })
-    },
-    //2.2提交编辑的数据
-    editData(){
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          this.$store.dispatch('template/upWebsiteTemplateintel',this.form).then(res=>{
-            if(res.code==200){
-              this.$message.success('网站基本信息编辑成功！');
-              this.$router.push({
-                path: '/templateStyle',
-                query: {
-                  website_id: this.$route.query.website_id,
-                  step:this.$route.query.step
+        //2.编辑表单 start ------------------------------------------------------------>
+        //2.1回显数据
+        getWebsiteBase(website_id) {
+            this.$store.dispatch('template/getWebsiteTemplateintel', { website_id: website_id }).then(res => {
+                if (res.code == 200) {
+                    this.form.website_id = res.data.website_id;//网站id
+                    this.form.page_type = res.data.page_type;//页面类型
+                    this.form.statement = res.data.statement;//网站声明
+                    this.form.organizer = res.data.organizer;//主办单位
+                    this.form.copyright_information = res.data.copyright_information;//版权信息
+                    this.form.contact_number = res.data.contact_number;//联系电话
+                    this.form.company_address = res.data.company_address;//公司地址
+                    this.form.project_logo = res.data.project_logo;//项目logo
+                    this.project_logo_src = res.data.project_logo;//项目logo缩略图
+                    this.form.project_name = res.data.project_name;//项目名称
+                    this.form.project_url = res.data.project_url;//项目网址
+                    this.form.company_logo = res.data.company_logo;//公司logo
+                    this.company_logo_src = res.data.company_logo;//公司logo缩略图
+                    this.form.company_name = res.data.company_name;//公司名称
+                    this.form.company_url = res.data.company_url;//公司网址
+                    this.form.icp_number = res.data.icp_number;//网站备案号
+                    this.form.icp_number_url = res.data.icp_number_url;//网站备案号链接
+                    this.form.record_number = res.data.record_number;//网安备案号
+                    this.form.record_number_url = res.data.record_number_url;//网安备案号链接
+                    this.form.customer_service_qq = res.data.customer_service_qq;//客服qq客服
+                    this.form.communications = res.data.communications;//通联qq客服
+                } else {
+                    this.$message.error(res.message);
+                }
+            })
+        },
+        //2.2提交编辑的数据
+        editData() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.$store.dispatch('template/upWebsiteTemplateintel', this.form).then(res => {
+                        if (res.code == 200) {
+                            this.$message.success('网站基本信息编辑成功！');
+                            this.$router.push({
+                                path: '/templateStyle',
+                                query: {
+                                    website_id: this.$route.query.website_id,
+                                    step: this.$route.query.step
+                                }
+                            });
+                        } else {
+                            this.$message.error(res.message);
+                        }
+                    })
                 }
-              });
-            }else{
-              this.$message.error(res.message);
+            })
+        },
+        //2.编辑表单 end ------------------------------------------------------------>
+
+    },
+    mounted() {
+        //1.展示步骤
+        this.$store.commit('template/showStepStatus');
+        //2.判断是新建还是回显
+        if (this.$route.query.step != undefined) {
+            console.log("编辑模板！")
+            if (this.$route.query.website_id) {
+                this.getWebsiteBase(this.$route.query.website_id);
+            } else {
+                this.$message.error("无法编辑，缺少关键参数！");
             }
-          })
+        } else {
+            console.log("添加模板基本信息！")
         }
-      })
-    },
-    //2.编辑表单 end ------------------------------------------------------------>
-
-  },
-  mounted(){
-    //1.展示步骤
-    this.$store.commit('template/showStepStatus');
-    //2.判断是新建还是回显
-    if(this.$route.query.step!=undefined){
-      console.log("编辑模板！")
-      if(this.$route.query.website_id){
-        this.getWebsiteBase(this.$route.query.website_id);
-      }else{
-        this.$message.error("无法编辑，缺少关键参数！");
-      }
-    }else{
-      console.log("添加模板基本信息！")
     }
-  }
 };
 </script>
 
 <style scoped lang="less">
-  .labelTitleStyle{
+.labelTitleStyle {
     font-size: 14px;
     color: #606266;
     font-weight: bold;
-  }
-  .exampleBox {
+}
+
+.exampleBox {
     border: 1px solid #ccc;
-  }
+}
 
-  .formDiv{
+.formDiv {
     background: #F5F7FB;
     padding: 10px 20px 10px 20px;
-  }
-  .uploaderBox .avatar-uploader {
+}
+
+.uploaderBox .avatar-uploader {
     background: #fff;
-  }
-  ::v-deep .formDiv .el-form-item:last-child {
+}
+
+.linkBox {
+    display: flex;
+    align-items: center;
+    
+    .linkItem:nth-child(1) {
+        text-align: left;
+        width: 160px;
+        .linkUrl { 
+            text-align: left;
+        }
+        img {
+            display: block;
+            width: 120px;
+            height: 50px;
+            margin-left: 0;
+        }
+    }
+    .linkItem {
+        text-align: center;
+        width: 200px;
+        padding-right: 20px;
+        .linkUrl {
+            font-size: 12px;
+            color: #999;
+            text-align: center;
+        }
+        img {
+            display: block;
+            width: 120px;
+            height: 50px;
+            margin: 0 auto;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+::v-deep .formDiv .el-form-item:last-child {
     margin-bottom: 0 !important;
-  }
-  ::v-deep .formDiv .el-form-item__content{
+}
+
+::v-deep .formDiv .el-form-item__content {
     margin-left: 0 !important;
-  }
-  ::v-deep .formDiv .el-form-item__label{
+}
+
+::v-deep .formDiv .el-form-item__label {
     float: none;
-  }
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .custom-form-item > .el-form-item__label {
+}
+
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item>.el-form-item__label {
     line-height: 140px !important;
-  }
-  ::v-deep .custom-textarea .el-textarea__inner {
-    resize: none; /* 禁止用户拖拽调整大小 */
-  }
-  ::v-deep .custom-align-right .el-form-item__label {
-    text-align: right; /* 设置标签文字右对齐 */
-  }
-  ::v-deep .el-select {
-    width: 100%; /* 禁止用户拖拽调整大小 */
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+}
+
+::v-deep .custom-textarea .el-textarea__inner {
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
+}
+
+::v-deep .custom-align-right .el-form-item__label {
+    text-align: right;
+    /* 设置标签文字右对齐 */
+}
+
+::v-deep .el-select {
+    width: 100%;
+    /* 禁止用户拖拽调整大小 */
+}
+
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/template/templateStyle.vue

@@ -10,7 +10,7 @@
         <el-row>
           <el-col :span="8">
             <div class="searchBox">
-              <div class="searchTitle">模板风格</div>
+              <div class="searchTitle">按风格搜索</div>
               <el-select v-model="getApiData.template_class_id" placeholder="请选择..">
                 <el-option
                   v-for="item in allClass"
@@ -21,7 +21,13 @@
               </el-select>
             </div>
           </el-col>
-          <el-col :span="16">
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">按关键字搜索</div>
+              <el-input v-model="getApiData.keyword" placeholder="根据您的描述自动推荐皮肤"></el-input>
+            </div>
+          </el-col>
+          <el-col :span="8">
             <div class="searchBtnBox">
               <el-button type="primary" @click="getData('search')">搜索</el-button>
             </div>