全局表单

src/api/globalFormApi.js

@@ -0,0 +1,138 @@
+// 底部导航
+import request from '@/utils/request'
+//获取并搜索底部导航
+export const getFooterCategory = (data) => {
+    return request({
+        url: '/footer/getFooterCategory',
+        method: 'post',
+        data
+    })
+}
+//底部导航列表  -------------------------------------
+//添加导航列表
+export const addFooterContent = (data) => {
+    return request({
+        url: '/footer/addFooterContent',
+        method: 'post',
+        data
+    })
+}
+//搜索并获取列表
+export const getFooterContent = (data) => {
+    return request({
+        url: '/footer/getFooterContent',
+        method: 'post',
+        data
+    })
+}
+//修改导航列表
+export const upFooterContent = (data) => {
+    return request({
+        url: '/footer/upFooterContent',
+        method: 'post',
+        data
+    })
+}
+//删除导航列表
+export const delFooterContent = (data) => {
+    return request({
+        url: '/footer/delFooterContent',
+        method: 'post',
+        data
+    })
+}
+//自定义字段    ------------------------------
+// 删除
+export const font_form_del_api = (data) => {
+    return request({
+        url: '/form/delGlobalTableField',
+        method: 'post',
+        data
+    })
+}
+//修改
+export const font_form_edit_api = (data) => {
+    return request({
+        url: '/form/upGlobalTableField',
+        method: 'post',
+        data
+    })
+}
+export const font_form_api = (params) => {
+    return request({
+        url: '/form/getGlobalTableFieldList',
+        method: 'get',
+        params
+    })
+}
+//获取自定义字段类别===下拉
+export const font_form_select_api = ( ) => {
+    return request({
+        url: '/form/getGlobalTableFieldTypeList',
+        method: 'get',
+    })
+}
+//添加自定义字段
+export const font_form_add_api = (data) => {
+    return request({
+        url: '/form/addGlobalTableField',
+        method: 'post',
+        data
+    })
+}
+//全局表单-查看内容-列表-----------------------------------
+export const up_table_api = (data) => {
+    return request({
+        url: '/form/updateGlobalTableData',  
+        method: 'post',
+        data
+    })
+}
+export const cancel_table_api = (data) => {
+    return request({
+        url: '/form/delGlobalTableData', 
+        method: 'post',
+        data
+    })
+}
+//得到所有列表
+export const look_table_api = (params) => {
+    return request({
+        url: '/form/getGlobalTableData',
+        method: 'get',
+        params
+    })
+}
+//全局表单  -------------------------------------
+//编辑列表
+export const edit_table_api = (data) => {
+    return request({
+        url: '/form/upGlobalTable',
+        method: 'post',
+        data
+    })
+}
+//删除列表
+export const del_table_api = (data) => {
+    return request({
+        url: '/form/delGlobalTable',
+        method: 'post',
+        data
+    })
+}
+//并获取列表
+export const get_list_api = (params) => {
+    return request({
+        url: '/form/getGlobalTableList',
+        method: 'get',
+        params
+    })
+}
+//添加表单
+export const add_table_api = (data) => {
+    return request({
+        url: '/form/addGlobalTable',
+        method: 'post',
+        data
+    })
+}

src/views/tabbar/globalForm.vue

@@ -0,0 +1,691 @@
+<template>
+    <!-- 仿 单页 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">网站名称</div>
+                         <el-select v-model="webSiteName_id" :multiple="false" :multiple-limit="1" filterable remote
+                           clearable reserve-keyword placeholder="请输入网站名称" :remote-method="getWebNavList"
+                            :loading="webSiteLoading" @change="selectWebSite">
+                            <el-option v-for="item in webSiteList" :key="item.value" :label="item.label" 
+                                :value="item.value">   
+                            </el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">表单名称</div>
+                        <el-input v-model="tabbarName" class="input" 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="addWebsite">添加表单</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                              <template slot-scope="scope">
+                                {{ (page - 1) * pageSize + scope.$index + 1 }}
+                             </template>
+                        </el-table-column>
+                        <el-table-column prop="name" label="表单名" width="">
+                        </el-table-column>
+                        <el-table-column prop="table" label="表名" width="">
+                        </el-table-column>
+                        <el-table-column prop="website_name" label="网站名称" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作"  width="444">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listLookBtn" @click="goLook(scope.row.id, scope.row )">
+                                         <i class="el-icon-view"></i>
+                                         查看内容
+                                    </div>
+                                    <div class="listMainBtn" @click="goFont(scope.row.id, scope.row)">
+                                        <!-- <i class="el-icon-edit-outline"></i> -->
+                                        <i class="el-icon-check"></i>
+                                        自定义字段
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                       <i class="el-icon-edit-outline"></i>
+                                       编辑
+                                   </div>
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></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"
+                           :pager-count="5"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false" @close="cancelForm">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="表单名:" prop="form_name">
+                        <el-input v-model="ruleForm.form_name" placeholder="请输入表单名">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="表名:" prop="table_name">
+                        <el-input v-model="ruleForm.table_name" placeholder="请输入表名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="网站名称:" prop="tabbarName_2">
+                        <el-select v-model="ruleForm.tabbarName_2" :multiple="false" :multiple-limit="1" filterable remote
+                                 clearable reserve-keyword placeholder="请输入网站名称" :remote-method="getWebNavList"
+                                 :loading="webSiteLoading" @change="selectWebSite_2">
+                            <el-option v-for="item in webSiteList_2" :key="item.value" :label="item.label" 
+                                :value="item.value">   
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+//引入公用样式
+import '@/styles/global.less';
+import {  edit_table_api, del_table_api, add_table_api, get_list_api } from '@/api/globalFormApi'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        // 新增字母数字验证规则
+        const validateTableName = (rule, value, callback) => {
+            const reg = /^[A-Za-z0-9]+$/;
+            if (!reg.test(value)) {
+                callback(new Error('表名只能包含字母和数字'));
+            } else {
+                callback();
+            }
+        };
+        return {
+            selecta_arr: ["1","2","3","4"],//表格数据
+            if_submit_form:"",//判断是添加还是编辑
+            tableDivTitle: "表单列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            disabled: false, //禁用
+            tableData: [],//表格数据
+            // 可以输入的搜索框相关
+            webSiteList: [],//获取关联网站列表
+            webSiteList_2: [],//获取关联网站列表
+            webSiteLoading: false,
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+            value: '',
+            activeid: "",  //活动id 
+            type: "",  //查看时需要传递的类型
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            formLabelWidth: '', //广告示例图相关
+            // 搜索框相关
+            webSiteName_name: '', //网站名称
+            webSiteName_id: '', //网站名称id
+            webSiteName_id_2: '', //网站名称id=form
+            tabbarName: '', //单页名称
+            website_id: "", //网站id
+            ruleForm: {
+                form_name: '', //表单名
+                table_name: '', //表名
+                webName: '', //网站名称
+                tabbarName: '', //单页名称
+                tabbarName_2: '', //单页名称
+                pageType: '', //页面类型
+            },
+            rules: {
+                 table_name: [
+                    { required: true, trigger: 'blur', validator: validateEmpty }, // 原有必填验证
+                    { trigger: 'blur', validator: validateTableName } // 新增格式验证
+                ],
+                form_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                webName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                tabbarName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                tabbarName_2: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                pageType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            get_list_api({
+                page: this.page,
+                pageSize:  this.pageSize,
+            }).then(data => {
+                this.tableData = data.data.list
+                this.total =  data.data.total
+            })
+        },
+        //1.2 删除内容
+        deleteRow(recive_id) {
+            let data = new FormData()
+            data.append('id', recive_id)
+            this.$confirm('注意:确定删除？', '提示：', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                // console.log("当前删除：" + id)
+                del_table_api({
+                    id: recive_id
+                }).then(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 查看示例图
+        goGraph() {
+            this.dialogVisible = true
+        },
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+           get_list_api({
+                page: this.page,
+                pageSize:  this.pageSize,
+                website_id: this.webSiteName_id,
+                name: this.tabbarName,
+            }).then(data => {
+                this.tableData = data.data.list
+                this.total =  data.data.total
+            })
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.webSiteName_name = ""
+            this.tabbarName = ""
+            this.webSiteName_id = ""     
+            this.webSiteList = []        
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑表单'
+            this.activeid = id
+            this.dialogTableVisible = true
+            this.disabled = true
+            // console.log(id, val);
+            // console.log("状态", val);
+            // 数据回显
+            this.ruleForm.form_name = val.name      // 表单名
+            this.ruleForm.table_name = val.table    // 表名
+            this.webSiteName_id_2 = val.website_id  // 网站ID
+              // 回显网站2名称
+            this.ruleForm.tabbarName_2 = val.website_id  // 设置选中值
+            return this.getWebNavList(val.website_name) 
+        },
+        //2.0 查看
+        goLook(id, val) {
+            console.log("查看----------",id);
+            this.$router.push({
+                path: '/globalFormDetail',
+                query: {
+                    id: id,
+                }
+            })
+        },
+        //2.0 自定义字段
+        goFont(recive_id, val) {
+            // console.log("ID=", recive_id)
+            this.$router.push({
+                path: '/globalFormFont',
+                query: {
+                    id: recive_id,
+                    website_name: val.website_name, // 网站名称 
+                }
+            })
+        },
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加表单"
+            this.disabled = false
+            //添加时清空回显回来的数据
+            this.ruleForm.webName = '' //关联网站名称
+            this.ruleForm.tabbarName = '' //单页名称
+            this.ruleForm.pageType = '' //页面类型
+        },
+        // 弹出层相关方法
+        submitForm(formName) {
+            if(this.dialogName == "添加表单"){
+                add_table_api({// 提交表单add_table_api
+                    website_id: this.webSiteName_id_2, //网站id
+                    name: this.ruleForm.form_name, //表单名
+                    table: this.ruleForm.table_name, //表名 
+                    }).then(data =>{
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '添加成功',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        }
+                    }).catch(err =>{
+                        console.log(err);
+                    })
+                    this.cancelForm()        
+            }
+            if(this.dialogName == "编辑表单"){
+                edit_table_api({// 编辑表单
+                    website_id: this.webSiteName_id_2, //网站id
+                    name: this.ruleForm.form_name, //表单名
+                    table: this.ruleForm.table_name, //表名 
+                    id: this.activeid, // 编辑时需要的id
+                    }).then(data =>{
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '编辑成功',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        }
+                    }).catch(err =>{
+                        console.log(err);
+                    })
+                    this.cancelForm()        
+            }
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+            this.webSiteName_id_2 = ""; //网站id
+            this.ruleForm.form_name = "";//表单名
+            this.ruleForm.table_name = ""; //表名 
+            this.webSiteList_2 = []      // 清空网站2下拉列表数据
+            this.ruleForm.tabbarName_2 = '' // 新增：清空表单中网站2的绑定值
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+            const formData = new FormData();
+            formData.append('file', file);
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.adPhoto = res.data.imgUrl;//提供表单地址
+                // console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+        selectWebSite_2(value) {
+            this.webSiteName_id_2 = value
+            this.ruleForm.tabbarName_2 = value  // 新增表单字段同步
+        },
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+        },
+        //
+        getWebNavList(query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    console.log(res.data)
+                    for (let item of res.data) {
+                        let data = {};
+                        data.key = item.id;
+                        data.value = item.id;
+                        data.label = item.website_name;
+                        dataArr.push(data)
+                    }
+                    this.webSiteList = dataArr;
+                    this.webSiteList_2 = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+    },
+    mounted() {
+        this.getData()
+    },
+}
+</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,.listMainBtn,
+    .listEditBtn,
+    .listLookBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 10px;
+         word-break: keep-all; white-space: nowrap;
+        height: 36px;width:auto;padding:0px 10px;
+        line-height: 36px;
+    }
+    .listLookBtn {
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #55b5f1;
+        background-color: rgba(85, 181, 241, 0.16);
+        >i {
+            padding-right: 8px;
+        }
+    }
+    ::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;
+        }
+    }
+    ::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/tabbar/globalFormDetail.vue

@@ -0,0 +1,523 @@
+<template>
+    <!--  仿===tabbarDetail -->
+    <div> 
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="table_body" style="width: 100%">
+                        <!-- 动态表头 -->
+                        <el-table-column 
+                            v-for="(head, index) in table_head" 
+                            :key="index"
+                            :prop="head.field"
+                            :label="head.title"
+                            :width="head.width || ''">
+                            <!-- 动态内容 -->
+                            <template slot-scope="scope">
+                                {{ Object.values(scope.row).join(',').split(',')[index]  }}
+                            </template>
+                        </el-table-column>
+                        <!-- 保留操作列 -->
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listEditBtn" @click="go_up(scope.row.id,scope.row,scope.$index )">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                    <div class="listDeleteBtn" @click="go_cancel(scope.row.id )">
+                                        <i class="el-icon-delete"></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="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item 
+                        v-for="(head, index) in table_head" 
+                        :key="index"
+                        :label="head.title + ':'"
+                        :prop="head.field"
+                         :rules="[{ 
+                                    required: true, 
+                                    message: head.title + '不能为空', 
+                                    trigger: 'blur',
+                                    validator: (rule, value, callback) => {
+                                        if (!value || value.trim() === '') {
+                                            callback(new Error(head.title + '不能为空'))
+                                        } else {
+                                            callback()
+                                        }
+                                    }
+                                }]">
+                        <el-input
+                            v-model="dialog_inp_arr[index]"
+                            @blur="handleBlurValidation(head.title, dialog_inp_arr[index])">
+                        </el-input>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+//引入公用样式
+import '@/styles/global.less';
+import {  getFooterContent,up_table_api,look_table_api,cancel_table_api  } from '@/api/globalFormApi'
+//引入富文本编辑器
+import myEditor from '../../components/edit/myEditor.vue';
+export default {
+    components: {
+        tableTitle,//表格标题
+        myEditor,
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            up_edit_obj:{},//编辑后提交的数据
+            dialog_inp_arr:[ ],
+            activeIndex: 0, // 新增当前操作行索引
+            table_head:[],//列表头
+            table_body:[],//列表内容
+            tableDivTitle: "查看内容",  //列表标题
+            dialogTableVisible: false,  //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            tableData: [],//表格数据
+            tabbarId: '',//底部导航传递的id
+            tabbarType: 1,//底部导航传递的类型
+            //活动id
+            activeid: "",
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            // 搜索框相关
+            listTitle: '', //网站名称id
+            contentTitle: '', //广告位名称
+            //弹框相关
+            ruleForm: {
+                // listTitle: '', //列表标题
+                // contentTitle: '', //内容标题
+                // contentDetail: '', //内容详情
+            },
+            rules: {
+                listTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentDetail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            // 查看内容-列表
+            look_table_api({//
+                page: this.page,    
+                 pageSize: this.pageSize,
+                id: this.$route.query.id,
+            }).then(data => {
+                this.tableData = data.data.tableFields
+                this.total = data.data.total
+                this.table_head = data.data.tableFields//列表头
+                this.table_body = data.data.list//列表内容
+            })
+        },
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+             this.pageSize = val;  
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            getFooterContent({
+                fcat_id: this.tabbarId,
+                page: this.page,
+                pageSize: this.pageSize,
+                list_title:this.listTitle,
+                con_title:this.contentTitle,
+            }).then(data => {
+                // console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+        //1.6 重置按钮
+        goReset() {
+            this.listTitle = ""
+            this.contentTitle = ""
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+        //1.7 编辑
+        go_up(id, val,the_index) {
+            this.up_edit_obj = this.table_body[the_index]
+            this.dialog_inp_arr = Object.values(this.table_body[the_index])
+            this.dialogName = '全局表单-编辑内容'
+            this.activeid = id
+            this.dialogTableVisible = true
+            // console.log(id, val);
+            this.activeIndex = the_index//点击的是第几个
+             // 添加字段映射（保持原有数组结构）
+            this.table_head.forEach((head, index) => {
+                this.$set(this.ruleForm, head.field, this.dialog_inp_arr[index])
+            })
+        },
+        //1.8 删除 
+        go_cancel(id) {
+            this.$confirm('确定要删除该记录吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                dangerouslyUseHTMLString: true
+            }).then(() => {
+                cancel_table_api({ 
+                    id:id,
+                    table_id:this.$route.query.id,
+                }).then(res => {
+                    if (res.code === 200) {
+                        this.$message.success('删除成功')
+                        this.getData() // 刷新数据
+                    } else {
+                        this.$message.error(res.message || '删除失败')
+                    }
+                }).catch(err => {
+                    console.error('删除失败:', err)
+                    this.$message.error('删除失败')
+                })
+            }).catch(() => {})
+        },
+        // 弹出层相关方法
+        // 1.9 提交表单
+  submitForm(formName) {
+        const the_obj =this.table_body[0]
+        Object.keys(the_obj).forEach((key, index) => {
+            the_obj[key] = this.dialog_inp_arr[index]
+        });
+        the_obj.table_id = +this.$route.query.id;
+        const emptyFields = this.dialog_inp_arr
+            .map((value, index) => ({ 
+                index, 
+                field: this.table_head[index]?.title,
+                value 
+            }))
+            .filter(item => !item.value || item.value.toString().trim() === '');
+        if (emptyFields.length > 0) {
+            emptyFields.forEach(item => {
+                this.$message.error(`${item.field}:不能为空`);
+            });
+            return;
+        }
+        this.$refs[formName].validate((valid) => {
+            if (valid) {
+                // 验证通过后的提交逻辑
+                up_table_api({
+                    ...the_obj  //展开
+                }).then(res => {
+                    if (res.code === 200) {
+                        this.$message.success('提交成功');
+                        this.dialogTableVisible = false;
+                        this.getData();
+                    } else {
+                        this.$message.error(res.message || '提交失败');
+                    }
+                });
+            } else {
+                this.$message.error('请填写所有必填项');
+                return false;
+            }
+        });
+    },
+        //取消
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        handleBlurValidation(fieldName, value) {
+            if (!value || value.trim() === '') {
+                this.$message.error(`${fieldName}:不能为空`);
+            }
+        }
+    },
+    mounted() {
+        // console.log(this.$route.query.id);
+        this.tabbarId = this.$route.query.id
+        this.tabbarType = this.$route.query.type
+        this.getData() //获取数据
+    },
+}
+</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;
+    }
+    .listLookBtn {
+        width:auto!important;
+        margin-left: 0px;
+        padding:0px 6px;word-break: keep-all; white-space: nowrap;
+        margin-right: 20px;
+        height: 36px;
+        line-height: 36px;
+    }
+    .listLookBtn {
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #55b5f1;
+        background-color: rgba(85, 181, 241, 0.16);
+        >i {
+            padding-right: 8px;
+        }
+    }
+    ::v-deep .el-form-item {
+        margin-bottom: 10px;
+    }
+    ::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;
+    .el-form-item{
+        margin-bottom: 20px!important;
+    }
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+    ::v-deep .el-select {
+        width: 100%;
+    }
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+    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/tabbar/globalFormFont.vue

@@ -0,0 +1,766 @@
+<template>
+    <!-- 仿 单页 添加字段-->
+    <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%">
+                        <el-table-column prop="id" label="ID" width="">
+                        </el-table-column>
+                        <el-table-column prop="field_name" label="字段" width="">
+                        </el-table-column>
+                        <el-table-column prop="type_name" label="类别" width="">
+                        </el-table-column>
+                        <el-table-column prop="is_check" label="验证" width="">
+                              <template slot-scope="scope">
+                                {{ scope.row.is_check === 1 ? '验证' : '不验证' }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="title" label="展示名" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作"  width="177">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                       <i class="el-icon-edit-outline"></i>
+                                       修改 
+                                   </div>
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--表格内容 end------------------------------------------------------------>
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="字段名称:" prop="field_name">
+                        <el-input 
+                            v-model="ruleForm.field_name" 
+                            placeholder="请输入"
+                            :disabled="dialogName === '修改字段'"
+                            clearable>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="显示名称:" prop="field_name_show">
+                        <el-input 
+                            v-model="ruleForm.field_name_show" 
+                            placeholder="请输入"
+                            clearable>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="字段类别:" prop="field_type">
+                        <el-select v-model="ruleForm.field_type" 
+                                placeholder="请选择"
+                                filterable>
+                            <el-option v-for="item in field_type_arr" 
+                                    :key="item.value" 
+                                    :label="item.label" 
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="选项列表:" prop="field_textarea">
+                        <el-input
+                        type="textarea"
+                        :rows="2"
+                        placeholder="请输入内容"
+                        v-model="ruleForm.field_textarea">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="长度:" prop="field_length">
+                        <el-input 
+                        placeholder="请输入"
+                        v-model="ruleForm.field_length">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="否校验:" prop="field_switch">
+                        <el-switch
+                            v-model="ruleForm.field_switch"
+                            active-text="校验"
+                            inactive-text="不校验"
+                            :active-value="1"
+                            :inactive-value="0">
+                        </el-switch>
+                    </el-form-item>
+                    <el-form-item label="后端是否展示:" prop="field_switch_backend">
+                        <el-switch
+                            v-model="ruleForm.field_switch_backend"
+                            active-text="校验"
+                            inactive-text="不校验"
+                            :active-value="1"
+                            :inactive-value="0">
+                        </el-switch>
+                    </el-form-item>
+                    <el-form-item label="前端是否展示:" prop="field_switch_web">
+                        <el-switch
+                            v-model="ruleForm.field_switch_web"
+                            active-text="校验"
+                            inactive-text="不校验"
+                            :active-value="1"
+                            :inactive-value="0">
+                        </el-switch>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+//引入公用样式
+import '@/styles/global.less';
+import {font_form_edit_api,font_form_del_api, font_form_add_api,font_form_select_api,font_form_api,getFooterCategory } from '@/api/globalFormApi'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            tableDivTitle: this.$route.query.website_name ? "自定义字段-"+this.$route.query.website_name :'自定义字段' ,  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑1', //编辑弹窗名称
+            disabled: false, //禁用
+            tableData: [],//表格数据
+            // 可以输入的搜索框相关
+            webSiteList: [],//获取关联网站列表
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+            value: '',
+            activeid: "",  //活动id 
+            type: "",  //查看时需要传递的类型
+            formLabelWidth: '', //广告示例图相关
+            // 搜索框相关
+            webSiteName_name: '', //网站名称
+            webSiteName_id: '', //网站名称id
+            tabbarName: '', //单页名称
+            website_id: "", //网站id
+            field_type_arr:[],
+            ruleForm: {
+                field_recive_id: this.$route.query.id, //表id   this.$route.query.id,   table_id
+                field_name: '', //字段名称  field_name
+                field_name_show: '', // 显示名称字段    title
+                field_type: "", //字段类别  下拉下拉选中的列表id    field_type
+                // field_select_id: '', //下拉选中的列表id           
+                field_textarea: '', //选项列表  option
+                field_length: '', //长度        length
+                field_switch: 0, // 新增校验开关，默认0不校验   is_check
+                field_switch_backend: 0, //后端是否展示 0：不展示 1：展示   admin_display
+                field_switch_web: 0, //前端是否展示 0：不展示 1：展示   home_display
+            },
+            rules: {
+                 field_name: [
+                    { 
+                        required: true, 
+                        trigger: 'blur', 
+                        validator: validateEmpty 
+                    },
+                    // 新增正则验证规则
+                    {
+                        pattern: /^[a-z_]+$/,
+                        message: '字段名称只能包含小写字母和下划线',
+                        trigger: 'blur'
+                    }
+                ],
+                field_name_show : [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                field_type: [{ required: true, trigger: 'change', validator: validateEmpty  }],
+                field_textarea: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                field_length: [
+                    { type: 'number', message: '必须为数字值', trigger: 'blur',transform: value => Number(value) },
+                    { type: 'number', min: 1, max: 255, message: '长度必须在1-255之间', trigger: 'blur',required: true },
+                ],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+                // 表单字段类型=下拉
+                font_form_select_api({
+                }).then(data => {
+                     this.field_type_arr = data.data.map(item => ({
+                        label: item.type_name,
+                        value: item.id,
+                    }));
+                })
+                //得到字段表单列表=全局表单-自定义字段
+                font_form_api({
+                    id: this.$route.query.id,
+                }).then(data => {
+                    this.tableData = data.data 
+                    // console.log("自定义字段列表========", this.tableData);
+                })
+            if (this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    // console.log(data);
+                    this.tableData = data.data.rows
+                })
+            } else if (this.webSiteName_name && !this.tabbarName) {
+                getFooterCategory({ 
+                    // name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    // console.log(data);
+                    this.tableData = data.data.rows
+                })
+            } else if (!this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    name: this.tabbarName,
+                    // website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    // console.log(data);
+                    this.tableData = data.data.rows
+                })
+            } else {
+                getFooterCategory({
+                }).then(data => {
+                    // console.log(data);
+                    this.tableData = data.data.rows
+                })
+            }
+        },
+        //1.2 删除内容
+        deleteRow(id) {
+            // console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:确定删除？', '提示：', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                // console.log("当前删除：" + id)
+                font_form_del_api({
+                    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 查看示例图
+        goGraph() {
+            this.dialogVisible = true
+        },
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '修改字段'
+            this.activeid = id
+            this.dialogTableVisible = true
+            this.disabled = true
+             this.ruleForm = {
+                field_name: val.field_name,
+                field_name_show: val.title,
+                field_type: +val.field_type,
+                field_textarea: val.option,
+                field_length: val.length,
+                field_switch: val.is_check,
+                field_switch_backend: val.admin_display,
+                field_switch_web: val.home_display
+            }
+        },
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加字段"
+            this.disabled = false
+            //添加时清空回显回来的数据
+            this.ruleForm = {
+                field_recive_id: this.$route.query.id,
+                field_name: '',
+                field_name_show: '',
+                field_type: "",
+                field_textarea: '',
+                field_length: '',
+                field_switch: 0,
+                field_switch_backend: 0,
+                field_switch_web: 0
+            }
+        },
+        // 弹出层相关方法
+        // 提交添加字段
+        submitForm(formName) {
+            if (this.dialogName == '修改字段') {
+                // 提交前验证所有字段
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        font_form_edit_api({
+                            table_id: this.$route.query.id,
+                            field_name: this.ruleForm.field_name,
+                            title: this.ruleForm.field_name_show,
+                            field_type: this.ruleForm.field_type,
+                            option: this.ruleForm.field_textarea,
+                            length: this.ruleForm.field_length,
+                            is_check: this.ruleForm.field_switch,
+                            admin_display: this.ruleForm.field_switch_backend,
+                            home_display: this.ruleForm.field_switch_web,
+                            id: this.activeid
+                            // id: this.$route.query.id,
+                        }).then(data => {
+                                if (data.code == 200) {
+                                this.$message({
+                                    message: '修改成功',
+                                    type: 'success'
+                                })
+                                this.dialogTableVisible = false
+                                this.getData()
+                            } else if (data.code == 0) {
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                                return
+                            } else {
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                                return
+                            }
+                        })
+                    } else {
+                        // this.$message.error('请填写所有必填字段！');
+                        return false;
+                    }
+                });
+            }
+            if (this.dialogName == '添加字段') {
+                // 提交前验证所有字段
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        font_form_add_api({
+                            table_id: this.$route.query.id,
+                            field_name: this.ruleForm.field_name,
+                            title: this.ruleForm.field_name_show,
+                            field_type: this.ruleForm.field_type,
+                            option: this.ruleForm.field_textarea,
+                            length: this.ruleForm.field_length,
+                            is_check: this.ruleForm.field_switch,
+                            admin_display: this.ruleForm.field_switch_backend,
+                            home_display: this.ruleForm.field_switch_web,
+                        }).then(data => {
+                                if (data.code == 200) {
+                                this.$message({
+                                    message: '添加成功',
+                                    type: 'success'
+                                })
+                                this.dialogTableVisible = false
+                                this.getData()
+                            } else if (data.code == 0) {
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                                return
+                            } else {
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                                return
+                            }
+                        })
+                    } else {
+                        // this.$message.error('请填写所有必填字段！');
+                        return false;
+                    }
+                });
+            }
+        },
+        // submitForm(formName) {
+        //     return
+        //     this.$refs[formName].validate((valid) => {
+        //         if (valid) {
+        //             console.log('submit!');
+        //         } else {
+        //             console.log('error submit!!');
+        //             return false;
+        //         }
+        //     });
+        //     if (this.dialogName == "添加") {
+        //         getTemplateClass({
+        //             website_id: this.website_id,
+        //             name: this.ruleForm.tabbarName,
+        //             type: this.ruleForm.pageType,
+        //         }).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.website_id == '') {
+        //         this.$message({
+        //             message: '请输入并选择网站名称',
+        //             type: 'error'
+        //         })
+        //         this.dialogVisible = true
+        //     }
+        //     if (this.dialogName == "编辑") {
+        //         upFooterCategory({
+        //             website_id: this.website_id,
+        //             name: this.ruleForm.tabbarName,
+        //             id: this.activeid
+        //         }).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(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+            const formData = new FormData();
+            formData.append('file', file);
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.adPhoto = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+        },
+    },
+    mounted() {
+        this.getData()
+    },
+}
+</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,.listMainBtn,
+    .listEditBtn,
+    .listLookBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 10px;
+         word-break: keep-all; white-space: nowrap;
+        height: 36px;width:auto;padding:0px 10px;
+        line-height: 36px;
+    }
+    .listLookBtn {
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #55b5f1;
+        background-color: rgba(85, 181, 241, 0.16);
+        >i {
+            padding-right: 8px;
+        }
+    }
+    ::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;
+        }
+    }
+    ::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: 20px;
+    }
+}
+// 弹出层按钮
+.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>