admin_home/src/views/website/addWebsite.vue

<template>
    <!-- 采集咨询 -->
    <div>
        <!--表格内容 start------------------------------------------------------------>
        <div class="layerBox">
            <tableTitle :name="tableDivTitle" />
            <el-row class="formContent">
                <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-width="130px"
                    label-position="left">
                    <div class="formDiv">
                        <el-form-item label="网站名称：" :label-width="formLabelWidth" prop="website_name"
                            class="custom-align-right">
                            <el-input v-model="form.website_name" autocomplete="off"
                                @change="checkWebsiteName(form.website_name,0)" placeholder="请输入网站名称"></el-input>
                        </el-form-item>
                        <el-form-item label="网站地址1：" :label-width="formLabelWidth" prop="website_url[0].url"
                            class="custom-align-right">
                            <div class="formLabelFloatBox">
                                <el-input v-model="form.website_url[0].url" autocomplete="off"
                                    @change="checkWebsiteUrl(form.website_url[0].url, 0)"
                                    placeholder="请输入网站地址1"></el-input>
                                <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(1)"
                                    class="formLabeladdIcon"></el-button>
                                <el-button type="info" icon="el-icon-delete" circle size="mini" @click=""
                                    class="formLabelDelIcon" disabled></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="网站地址2：" :label-width="formLabelWidth"
                            v-if="form.website_url[1].show == true" class="custom-align-right">
                            <div class="formLabelFloatBox">
                                <el-input v-model="form.website_url[1].url" autocomplete="off"
                                    @change="checkWebsiteUrl(form.website_url[1].url, 1)"
                                    placeholder="请输入网站地址2"></el-input>
                                <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(2)"
                                    class="formLabeladdIcon"></el-button>
                                <el-button type="info" icon="el-icon-delete" circle size="mini"
                                    @click="deleteUrlInput(1)" class="formLabelDelIcon"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="网站地址3：" :label-width="formLabelWidth"
                            v-if="form.website_url[2].show == true" class="custom-align-right">
                            <div class="formLabelFloatBox">
                                <el-input v-model="form.website_url[2].url" autocomplete="off"
                                    @change="checkWebsiteUrl(form.website_url[2].url, 2)"
                                    placeholder="请输入网站地址3"></el-input>
                                <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(3)"
                                    class="formLabeladdIcon"></el-button>
                                <el-button type="info" icon="el-icon-delete" circle size="mini"
                                    @click="deleteUrlInput(2)" class="formLabelDelIcon"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="网站地址4：" :label-width="formLabelWidth"
                            v-if="form.website_url[3].show == true" class="custom-align-right">
                            <div class="formLabelFloatBox">
                                <el-input v-model="form.website_url[3].url" autocomplete="off"
                                    @change="checkWebsiteUrl(form.website_url[3].url, 3)"
                                    placeholder="请输入网站地址4"></el-input>
                                <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(4)"
                                    class="formLabeladdIcon"></el-button>
                                <el-button type="info" icon="el-icon-delete" circle size="mini"
                                    @click="deleteUrlInput(3)" class="formLabelDelIcon"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="网站地址5：" :label-width="formLabelWidth"
                            v-if="form.website_url[4].show == true" class="custom-align-right">
                            <div class="formLabelFloatBox">
                                <el-input v-model="form.website_url[4].url" autocomplete="off"
                                    @change="checkWebsiteUrl(form.website_url[4].url, 4)"
                                    placeholder="请输入网站地址5"></el-input>
                                <el-button type="info" icon="el-icon-plus" circle size="mini" @click=""
                                    class="formLabeladdIcon" disabled></el-button>
                                <el-button type="info" icon="el-icon-delete" circle size="mini"
                                    @click="deleteUrlInput(4)" class="formLabelDelIcon"></el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="上级网系：" :label-width="formLabelWidth" prop="website_column_arr_id"
                            class="custom-align-right">
                            <el-cascader v-model="form.website_column_arr_id" :props="{ checkStrictly: true }"
                                :options="website_column_arr"></el-cascader>
                        </el-form-item>
                        <el-form-item label="网站logo：" prop="logo" :label-width="formLabelWidth"
                            :class="['custom-form-item']" class="custom-align-right">
                            <div class="uploaderBox">
                                <!--图片上传组件 start ------------------------------------------------------------>
                                <div class="avatar-upload-container" @mouseenter="hovering = true"
                                    @mouseleave="hovering = false">
                                    <!-- 上传组件 -->
                                    <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                                        :before-upload="beforeAvatarUpload">
                                        <!-- 预览图片 -->
                                        <img v-if="logoUrl" :src="logoUrl" class="avatar">
                                        <!-- 上传图标 -->
                                        <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                                        <div v-else class="chooseImgDiv">
                                            <div>
                                                <img src="@/assets/public/upload/noImage.png">
                                                <div>选择图片</div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="logo" v-model="form.logo">
                                    </el-upload>
                                    <!-- 删除按钮，当鼠标悬浮时显示 -->
                                    <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
                                        <i class="el-icon-delete"></i>
                                    </div>
                                    <span class="photo_tips">请添加网站LOGO，要求图片底色为透明，不大于500K。</span>
                                </div>
                                <!--图片上传组件 end ------------------------------------------------------------>
                            </div>
                        </el-form-item>
                        <el-form-item label="网站标题：" :label-width="formLabelWidth" prop="title"
                            class="custom-align-right">
                            <template #label>
                                <span class="askBox">
                                    网站标题：
                                    <el-tooltip class="item" effect="dark" content="网站标题，如：三农市场网_网站列表_全国信息一体化网络平台_项目大全。"
                                        placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </span>
                            </template>
                            <el-input v-model="form.title" autocomplete="off" placeholder="请输入网站标题"></el-input>
                        </el-form-item>
                        <el-form-item label="网站关键词：" :label-width="formLabelWidth" prop="keywords"
                            class="custom-align-right">
                            <template #label>
                                <span class="askBox">
                                    网站关键词：
                                    <el-tooltip class="item" effect="dark" content="网站关键词，如：三农市场网、全国三农、信息一体化。"
                                        placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </span>
                            </template>
                            <!-- <el-input v-model="form.keywords" autocomplete="off"  placeholder="请输入网站关键词"></el-input> -->
                            <inputTag :initialTags="tags" @tags-updated="updateTags" />
                        </el-form-item>
                        <el-form-item label="网站描述：" :label-width="formLabelWidth" prop="description"
                            class="custom-align-right">
                            <template #label>
                                <span class="askBox">
                                    网站描述：
                                    <el-tooltip class="item" effect="dark" content="网站描述，如：中国三农市场网创建以来，社会效益和会员经济效益贡献。"
                                        placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </span>
                            </template>
                            <el-input type="textarea" v-model="form.description" class="custom-textarea"
                                placeholder="请输入网站描述"></el-input>
                        </el-form-item>
                        <el-form-item label="网站后缀：" :label-width="formLabelWidth" prop="suffix"
                            class="custom-align-right">
                            <template #label>
                                <span class="askBox">
                                    网站后缀：
                                    <el-tooltip class="item" effect="dark" content="网站后缀，如：全国政务信息一体化应用平台"
                                        placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </span>
                            </template>
                            <el-input type="textarea" v-model="form.suffix" class="custom-textarea" placeholder="请输入网站后缀"></el-input>
                        </el-form-item>
                        <el-form-item label="" :label-width="formLabelWidth" prop="ad_key" class="custom-align-right" >
                            <template #label >
                                <span class="askBox askBox1">
                                    网站名称缩写：
                                    <el-tooltip class="item" effect="dark" content="网站名称缩写，如：网站名称缩写，如：三农市场网 snscw。"
                                        placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </span>
                            </template>
                            <el-input v-model="form.ad_key" autocomplete="off" @change="checkWebsiteName(form.ad_key,0)" placeholder="请输入网站名称缩写"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </el-row>

            <tableTitle :name="tableDivTitle1" />
            <el-row class="formContent">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                    <el-form-item label="网站声明:" class="desc">
                        <el-input type="textarea" v-model="ruleForm.statement" placeholder="请输入网站声明..."
                            show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="主办单位:" class="desc">
                        <el-input type="textarea" v-model="ruleForm.organizer" placeholder="请输入主办单位..."
                            show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="cnzz统计:" class="desc">
                        <el-input type="textarea" v-model="ruleForm.statistics" placeholder="请输入cnzz统计..."
                            show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="版权信息:" class="desc">
                        <el-input type="textarea" v-model="ruleForm.copyright_information" placeholder="请输入版权信息..."
                            show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话:">
                        <el-input v-model="ruleForm.contact_number" placeholder="请输入联系电话" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱:">
                        <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址:">
                        <el-input v-model="ruleForm.company_address" placeholder="请输入公司地址" show-word-limit></el-input>
                    </el-form-item>
                    <!-- 项目logo -->
                    <el-form-item label="项目logo:" :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="beforeAvatarUpload1">
                                    <!-- 预览图片 -->
                                    <img v-if="logoUrl_1" :src="logoUrl_1" class="avatar">
                                    <div v-else class="chooseImgDiv">
                                        <div>
                                            <img src="@/assets/public/upload/noImage.png">
                                            <div>选择图片</div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="logo" v-model="ruleForm.imgSrc">
                                </el-upload>
                                <!-- 删除按钮，当鼠标悬浮时显示 -->
                                <div v-if="hovering && logoUrl_1" class="delete-button" @click="handleDelete1">
                                    <i class="el-icon-delete"></i>
                                </div>
                                <span class="photo_tips">请添加项目LOGO，要求图片底色为透明，推荐尺寸为150*150px，不大于500K。</span>
                            </div>
                            <!--图片上传组件 end ------------------------------------------------------------>
                        </div>
                    </el-form-item>
                    <el-form-item label="项目名称:">
                        <el-input v-model="ruleForm.project_name" placeholder="请输入项目名称" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="项目网址:">
                        <el-input v-model="ruleForm.project_url" placeholder="请输入项目网址" show-word-limit></el-input>
                    </el-form-item>
                    <!-- 公司logo -->
                    <el-form-item label="公司logo:" :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="beforeAvatarUpload2">
                                    <!-- 预览图片 -->
                                    <img v-if="logoUrl_2" :src="logoUrl_2" class="avatar">
                                    <div v-else class="chooseImgDiv">
                                        <div>
                                            <img src="@/assets/public/upload/noImage.png">
                                            <div>选择图片</div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="logo" v-model="ruleForm.imgSrc">
                                </el-upload>
                                <!-- 删除按钮，当鼠标悬浮时显示 -->
                                <div v-if="hovering && logoUrl_2" class="delete-button" @click="handleDelete2">
                                    <i class="el-icon-delete"></i>
                                </div>
                                <span class="photo_tips">请添加公司LOGO，要求图片底色为透明，推荐尺寸为150*150px，不大于500K。</span>
                            </div>
                            <!--图片上传组件 end ------------------------------------------------------------>
                        </div>
                    </el-form-item>
                    <el-form-item label="公司名称:">
                        <el-input v-model="ruleForm.company_name" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="公司网址:">
                        <el-input v-model="ruleForm.company_url" placeholder="请输入公司网址"></el-input>
                    </el-form-item>
                    <el-form-item label="网站备案号:">
                        <el-input v-model="ruleForm.icp_number" placeholder="请输入网站备案号"></el-input>
                    </el-form-item>
                    <el-form-item label="网安备案号:">
                        <el-input v-model="ruleForm.record_number" placeholder="请输入网安备案号"></el-input>
                    </el-form-item>
                    <el-form-item label="在线客服:" class="desc">
                        <el-input type="textarea" v-model="ruleForm.online_service" placeholder="请输入在线客服..."
                            show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="客服QQ:">
                        <el-input v-model="ruleForm.customer_service_qq" placeholder="请输入客服QQ"></el-input>
                    </el-form-item>
                    <!-- 客服QQ图片 -->
                    <el-form-item label="客服QQ图片:" :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="beforeAvatarUpload3">
                                    <!-- 预览图片 -->
                                    <img v-if="logoUrl_3" :src="logoUrl_3" class="avatar">
                                    <div v-else class="chooseImgDiv">
                                        <div>
                                            <img src="@/assets/public/upload/noImage.png">
                                            <div>选择图片</div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="logo" v-model="ruleForm.imgSrc">
                                </el-upload>
                                <!-- 删除按钮，当鼠标悬浮时显示 -->
                                <div v-if="hovering && logoUrl_3" class="delete-button" @click="handleDelete3">
                                    <i class="el-icon-delete"></i>
                                </div>
                                <span class="photo_tips">请添加客服QQ图片，推荐尺寸为150*150px，不大于500K。</span>
                            </div>
                            <!--图片上传组件 end ------------------------------------------------------------>
                        </div>
                    </el-form-item>
                    <el-form-item label="通联QQ:">
                        <el-input v-model="ruleForm.communications" placeholder="请输入通联QQ"></el-input>
                    </el-form-item>
                    <!-- 通联QQ图片 -->
                    <el-form-item label="通联QQ图片:" :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="beforeAvatarUpload4">
                                    <!-- 预览图片 -->
                                    <img v-if="logoUrl_4" :src="logoUrl_4" class="avatar">
                                    <div v-else class="chooseImgDiv">
                                        <div>
                                            <img src="@/assets/public/upload/noImage.png">
                                            <div>选择图片</div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="logo" v-model="ruleForm.imgSrc">
                                </el-upload>
                                <!-- 删除按钮，当鼠标悬浮时显示 -->
                                <div v-if="hovering && logoUrl_4" class="delete-button" @click="handleDelete4">
                                    <i class="el-icon-delete"></i>
                                </div>
                                <span class="photo_tips">请添加通联QQ图片，推荐尺寸为150*150px，不大于500K。</span>
                            </div>
                            <!--图片上传组件 end ------------------------------------------------------------>
                        </div>
                    </el-form-item>
                    <el-form-item label="电话客服:">
                        <el-input v-model="ruleForm.customer_service" placeholder="请输入电话客服"></el-input>
                    </el-form-item>
                </el-form>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <div class="footerBtnbox">
                    <el-button @click="closeWindow" type="info">取 消</el-button>
                    <el-button type="primary" @click="editToServe" v-if="editBtn == true">修改</el-button>
                    <el-button type="primary" @click="addToServe" v-else>提交</el-button>
                </div>
            </div>
        </div>
        <!--表格内容 end------------------------------------------------------------>

    </div>
</template>

<script>
//表格标题
import tableTitle from '../website/components/tableTitle.vue';
//引入公用样式
import '@/styles/global.less';
import InputTag from '@/components/InputTag'


export default {
    components: {
        InputTag,
        tableTitle,  //表格标题
    },
    data() {
        const validateEmpty = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('该项不能为空！'))
            } else {
                callback()
            }
        }
        const validateColumn = (rule, value, callback) => {
            if (value.length == 0) {
                callback(new Error('该项不能为空！'))
            } else {
                callback()
            }
        }
        return {
            webSite_id: '', // 网站id
            tags: [], // 标签数组
            tableDivTitle: "网站信息",
            tableDivTitle1: "底部信息",
            num: 1,
            checked: false,
            iconSrc: '',
            data: '',
            activeid: '',  //当前被选中的id
            formLabelWidth: '', //广告示例图相关
            ruleId: '',
            source: '',
            editBtn: false,//当显示编辑按钮的时候，就不显示提交


            // 网站信息
            //3.弹出框中的表单设置 start ------------------------------------------------------------>
            //3.1 表单收集的数据
            form: {
                website_name: '',//需要提交的网站名称
                website_url: [//需要绑定的网站地址
                    { url: "", show: true },
                    { url: "", show: false },
                    { url: "", show: false },
                    { url: "", show: false },
                    { url: "", show: false }
                ],
                website_column_arr_id: [],//需要提交的上级网系 数组
                //city_arr_id:[0],//需要提交的城市id
                logo: "",//logo地址 提交文件换取地址
                title: "",//需要提交的网站标题
                keywords: "",//需要提交的网站标题
                description: "",//需要提交的网站描述
                suffix: "",//需要提交的网站后缀
                ad_key: "",//需要提交的网站名称缩写
                //template_id:""//选择的网站皮肤
            },
            //3.2 表单验证规则
            formRules: {
                //网站名称不能为空
                website_name: [{ required: true, trigger: 'blur', message: "该项不能为空！" }],
                //网站地址不能为空
                'website_url[0].url': [
                    { required: true, message: '至少要填写一个网站地址！', trigger: 'blur' },
                    // { validator: this.validateWebsiteUrl, trigger: 'blur' }
                ],
                //网系不能为空 注意，因为是select框，只有提交的时候才会验证
                website_column_arr_id: [{ type: 'array', required: true, trigger: 'change', message: '必须选择一个网系！' }],
                //网站标题，关键词，描述不能为空
                //city_arr_id:[{required:true,trigger:'blur',validator:validateColumn}],
                title: [{ required: true, trigger: 'blur', message: "该项不能为空! " }],
                keywords: [{ required: true, trigger: 'blur', message: "该项不能为空! " }],
                description: [{ required: true, trigger: 'blur', message: "该项不能为空! " }],
                logo: [{ required: true, trigger: 'blur', message: "该项不能为空！" }],
                logoUrl: [{ required: true, trigger: 'blur', message: "该项不能为空！" }],
                suffix: [{ required: true, trigger: 'blur', message: "该项不能为空！" }],
                //template_id:[{required:true,trigger:'blur',validator:validateEmpty}],
                ad_key: [{ required: true, trigger: 'blur', message: "该项不能为空！" }],
            },
            //3.3 通过api获的的数据 弹窗
            website_column_arr: [],//api获得的网系列表
            //3.4 上传logo图片
            logoUrl: '',
            logoUrl_1: '',
            logoUrl_2: '',
            logoUrl_3: '',
            logoUrl_4: '',
            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
            //3.5 模板列表
            TemplateList: [],
            getTemplateData: {
                template_class_id: 1,//模板类型，暂时为1
                page: 1,//当前是第几页
                pageSize: 9,//请求多少条
            },
            TemplateallCount: 0,//总条数
            TemplateName: "未选择模板..",//选择的模板名称
            TemplateImg: "",//选择的模板图片
            //弹出框中的表单设置 end ------------------------------------------------------------>

            ruleForm: {
                website_id: '',           // 网站id
                statement: '',            // 网站声明
                organizer: '',            // 主办单位      
                statistics: '',           // cnzz统计
                copyright_information: '', // 版权信息
                contact_number: '',       // 联系电话
                email: '',                // 电子邮箱 
                company_address: '',      // 公司地址
                project_logo: '',         // 项目logo 
                project_name: '',         // 项目名称 
                project_url: '',          // 项目网址 
                company_logo: '',         // 公司logo 
                company_name: '',         // 公司名称 
                company_url: '',          // 公司网址 
                icp_number: '',           // 网站备案号 
                record_number: '',        // 网安备案号 
                online_service: '',       // 在线客服
                customer_service_qq: '',  // 客服QQ 
                service_qq_img: '',       // 客服QQ图片 
                communications: '',       // 通联QQ 
                communications_img: '',   // 通联QQ图片
                customer_service: '',     // 电话客服

            },
            rules: {},

            //1.4图片上传
            imgUrl: "",//在页面上显示缩略图
            //获取父级导航池
            parentKey: 0,//获取父级导航
            parentData: {
                checkStrictly: true,
                lazy: true,
                async lazyLoad(node, resolve) {
                    const { level, data } = node;
                    if (data && data.children && data.children.length !== 0) {
                        return resolve(node)
                    }
                    console.log(level)
                    let parentId = level == 0 ? 0 : data.value
                    let parames = {
                        'pid': parentId
                    }
                    self.$store.dispatch('pool/categoryList', parames).then(res => {
                        if (res.data) {
                            const nodes = res.data.map(item => ({
                                value: item.id,
                                label: item.name,
                                leaf: level >= 3,
                                children: []
                            }))
                            resolve(nodes)
                        }
                    })
                }
            },
        }
    },
    methods: {
        //关键词标签
        updateTags(newTags) {
            // this.foem.seo_keywords = newTags;
            this.tags = newTags;
            this.form.keywords = newTags.join(',');
        },
        //设置图片格式 __网站LOGO__
        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.form.logo = res.data.imgUrl;//提供表单地址
                console.log('11111', res.data.imgUrl)
                console.log('22222', this.ruleForm.logo);

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '网络错误，请重试！'
                });
            })

            // 阻止默认的上传行为
            return false;
        },
        //项目logo
        beforeAvatarUpload1(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_1 = res.data.imgUrl;//显示缩略图
                this.ruleForm.project_logo = res.data.imgUrl;//提供表单地址
                console.log(res.data.imgUrl)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '网络错误，请重试！'
                });
            })

            // 阻止默认的上传行为
            return false;
        },
        //公司logo
        beforeAvatarUpload2(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_2 = res.data.imgUrl;//显示缩略图
                this.ruleForm.company_logo = res.data.imgUrl;//提供表单地址
                console.log(res.data.imgUrl)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '网络错误，请重试！'
                });
            })

            // 阻止默认的上传行为
            return false;
        },
        //客服qq图片
        beforeAvatarUpload3(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_3 = res.data.imgUrl;//显示缩略图
                this.ruleForm.service_qq_img = res.data.imgUrl;//提供表单地址
                console.log(res.data.imgUrl)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '网络错误，请重试！'
                });
            })

            // 阻止默认的上传行为
            return false;
        },
        //通联qq图片
        beforeAvatarUpload4(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_4 = res.data.imgUrl;//显示缩略图
                this.ruleForm.communications_img = res.data.imgUrl;//提供表单地址
                console.log(res.data.imgUrl)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '网络错误，请重试！'
                });
            })

            // 阻止默认的上传行为
            return false;
        },
        handleDelete() {
            // 删除图片
            this.logoUrl = ''; // 清空图片 URL
        },
        handleDelete1() {
            // 删除图片
            this.logoUrl_1 = ''; // 清空图片 URL
        },
        handleDelete2() {
            // 删除图片
            this.logoUrl_2 = ''; // 清空图片 URL
        },
        handleDelete3() {
            // 删除图片
            this.logoUrl_3 = ''; // 清空图片 URL
        },
        handleDelete4() {
            // 删除图片
            this.logoUrl_4 = ''; // 清空图片 URL
        },
        //取消添加或编辑
        goCancel() {
            this.$message({
                message: "已取消修改",
                type: "error"
            })
            this.$router.push(`/webCrawlerList?id=${this.ruleId}&source=${this.source}`)
        },
        //浏览量
        handleChange(value) {
            console.log(value);
            this.ruleForm.count = value
        },
        //2.2 关闭弹出框
        closeWindow() {
            this.$router.push({
                path: '/webSite',
            });
            this.clearToServe();
        },
        //2.3 重置窗口内容
        clearToServe() {
            //还原表单
            this.form.website_name = "";
            this.form.website_column_arr_id = "";
            this.form.website_url = [
                { url: "", show: true },
                { url: "", show: false },
                { url: "", show: false },
                { url: "", show: false },
                { url: "", show: false }
            ];
            //this.form.city_arr_id = [0];
            this.form.logo = "";
            this.form.title = "";
            this.form.keywords = "";
            this.form.description = "";
            this.form.template_id = "";
            //还原logo缩略图
            this.logoUrl = "";
            //还原模板
            this.TemplateList = [];
            this.getTemplateData.page = 1;
            this.TemplateImg = "";
            this.TemplateallCount = 0;
            this.form.suffix = "";
            this.form.keywords = "";
            this.tags = [];
            this.form.ad_key = ""; // 网站名称缩写
        },
        //3.1 获得所有网系
        getwebsiteColumn() {
            let that = this;
            this.$store.dispatch('pool/getwebsiteColumn').then(res => {
                let arrData = this.transformData(res.data)
                this.website_column_arr = arrData;
            })
        },
        transformData(arrData) {
            let that = this;
            return arrData.map(item => {
                // 创建一个新的对象，替换键名
                let newItem = {
                    label: item.column_name,
                    value: item.id,
                    // 保留其他不需要改动的字段
                    pid: item.pid,
                    sort: item.sort,
                    remark: item.remark,
                    column_arr_id: item.column_arr_id,
                    updated_at: item.updated_at,
                    created_at: item.created_at,
                };
                // 如果有 children，则递归处理 children 数组
                if (item.children && item.children.length > 0) {
                    newItem.children = that.transformData(item.children);
                }

                return newItem;
            });
        },
        //3.3 添加一条网站地址
        addUrlInput(key) {
            this.form.website_url[key].show = true;
        },
        //3.4 删除一条网站地址
        deleteUrlInput(key) {
            this.form.website_url[key].show = false;
            this.form.website_url[key].url = "";
        },
        //3.7 提交表单
        addToServe() {
            console.log('2222', this.form)
            //先进行验证
            this.$refs.form.validate(valid => {
                if (valid) {
                    //提交之前把域名列表转换成数组
                    let webSiteArray = [];
                    for (let item of this.form.website_url) {
                        if (item.url != "") {
                            webSiteArray.push(item.url)
                        }
                    }
                    //循环完毕 重置提交的url
                    this.form.website_url = webSiteArray;
                    //console.log(webSiteArray)
                    console.log(this.form)
                    //提交表单
                    this.$store.dispatch('pool/addWebsite', this.form).then(res => {
                        
                        // console.log("55555555555555555",res.code == 200)
                        if (res.code == 200) {
                            // console.log(333);
                            //汇报结果
                            // this.$message({
                            //     type: 'success',
                            //     message: '已成功添加网站！'
                            // });
                            this.ruleForm.website_id = res.data.id;
                            this.getfootInfo()
                            //重新获取表单
                            // this.getData();
                            //清空并退出
                            this.closeWindow();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '添加失败！请检查网络！'
                            });
                            //清空并退出
                            this.closeWindow();
                        }

                    }).catch(() => {
                        this.$message({
                            type: 'warning',
                            message: '网络错误，请重试！'
                        });
                    })
                }
            })
        },
        //3.8 检测网站名称是否存在
        checkWebsiteName(name,num) {
            let data = {}
            if(num == 0){
                 data = {
                    website_name: name
                }
            }else{
                 data = {
                    ad_key: name,
                }
            }
            // console.log("gjsrolighjorsihg",data)
            if (this.editId != "") {
                data.id = this.editId;
            }
            this.$store.dispatch('pool/checkWebsiteName', data).then(res => {
                if (res.code == 200) {
                    this.form.website_name = "";
                    this.$message({
                        type: 'warning',
                        message: '网站名称已存在！请重新输入！'
                    });
                }
            })
        },
        //3.9 检测网站url是否存在
        checkWebsiteUrl(url, num) {
            let data = {
                website_url: url
            }
            if (this.editId != "") {
                data.id = this.editId;
            }
            this.$store.dispatch('pool/checkWebsiteUrl', data).then(res => {
                if (res.code == 200) {
                    if (num == 0) { this.form.website_url[0].url = "" }
                    if (num == 1) { this.form.website_url[1].url = "" }
                    if (num == 2) { this.form.website_url[2].url = "" }
                    if (num == 3) { this.form.website_url[3].url = "" }
                    if (num == 4) { this.form.website_url[4].url = "" }
                    this.$message({
                        type: 'warning',
                        message: '当前网站已经被占用，请重新输入！'
                    });
                }
            })
        },
        //添加底部信息接口
        getfootInfo() {
            this.$store.dispatch('pool/addWebFootInfo', this.ruleForm).then(res => {
                console.log('00001', res);
                if (res.code == 200) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.$router.push({
                        path: '/webSite'
                    })
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                }
            })
        },
        //5.2修改表单
        editToServe() {
            //执行验证
            this.$refs.form.validate(valid => {
                if (valid) {
                    //提交之前把域名列表转换成数组
                    let webSiteArray = [];
                    for (let item of this.form.website_url) {
                        if (item.url != "") {
                            webSiteArray.push(item.url)
                        }
                    }
                    //循环完毕 重置提交的url
                    this.form.website_url = webSiteArray;
                    this.form.id = this.activeid;
                    //提交表单
                    this.$store.dispatch('pool/updateWebsite', this.form).then(res => {
                        console.log(res.code)
                        if (res.code == 200) {
                            //修改底部信息
                            this.editFootInfo()
                            //清空并退出
                            // this.closeWindow();
                            //重新请求列表
                            // this.getData();
                        } else {
                            this.$message.error(res.message)
                            //清空并退出
                            // this.closeWindow();
                        }
                    })
                    // .catch(() => {
                    //     this.$message({
                    //         type: 'warning',
                    //         message: '网络错误，请重试！'
                    //     });
                    // })
                }
            })
        },
        //5.3 修改底部信息
        editFootInfo() {
            this.ruleForm.website_id = this.activeid;
            this.$store.dispatch('pool/upWebFootInfo', this.ruleForm).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.$router.push({ path: '/webSite' })
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    })
                    this.getfootInfo()
                }
            })
        },
        // 1.5 获取底部信息详情接口
        // this.ruleForm.website_id = this.activeid;
        getfootInfo() {
            this.ruleForm.website_id = this.activeid;
            this.$store.dispatch('pool/getWebFootInfo', { website_id: this.activeid }).then(res => {
                console.log('1111', res);
                if (res.code == 200) {
                    this.ruleForm.statement = res.data.statement;
                    this.ruleForm.organizer = res.data.organizer;
                    this.ruleForm.statistics = res.data.statistics;
                    this.ruleForm.copyright_information = res.data.copyright_information;
                    this.ruleForm.contact_number = res.data.contact_number;
                    this.ruleForm.email = res.data.email;
                    this.ruleForm.company_address = res.data.company_address;
                    this.ruleForm.project_logo = res.data.project_logo;
                    this.logoUrl_1 = res.data.project_logo;
                    this.ruleForm.project_name = res.data.project_name;
                    this.ruleForm.project_url = res.data.project_url;
                    this.ruleForm.company_logo = res.data.company_logo;
                    this.logoUrl_2 = res.data.company_logo;
                    this.ruleForm.company_name = res.data.company_name;
                    this.ruleForm.company_url = res.data.company_url;
                    this.ruleForm.icp_number = res.data.icp_number;
                    this.ruleForm.record_number = res.data.record_number;
                    this.ruleForm.customer_service = res.data.customer_service;
                    this.ruleForm.customer_service_qq = res.data.customer_service_qq;
                    this.ruleForm.service_qq_img = res.data.service_qq_img;
                    this.logoUrl_3 = res.data.service_qq_img;
                    this.ruleForm.communications = res.data.communications;
                    this.ruleForm.communications_img = res.data.communications_img;
                    this.logoUrl_4 = res.data.communications_img;
                    this.ruleForm.online_service = res.data.online_service;
                }
            })
        }
    },
    mounted() {
        // 1.1 获取所有网系
        this.getwebsiteColumn()
        // 1.2 获取到的被编辑的id
        this.activeid = this.$route.query.id
        // console.log("1111", this.$route.query.id);
        // 1.3 通过id判断当前是添加还是编辑
        if (this.activeid) {
            this.editBtn = true;//显示编辑按钮
            // 1.4 获取网站详情
            this.$store.dispatch('pool/getWebsiteInfo', { id: this.activeid }).then(res => {
                //清除错误状态
                // this.$refs.form.clearValidate();
                console.log(res)
                //回显网站名称
                this.form.website_name = res.data.website_name;
                //回显星系
                this.form.website_column_arr_id = res.data.website_column_arr_id;
                //回显logo
                this.form.logo = res.data.logo;
                this.logoUrl = res.data.logo;
                //回显url
                let that = this;
                if (res.data.website_url == null) {
                    //为null什么都不执行
                } else {
                    for (let index in res.data.website_url) {
                        this.form.website_url[index].url = res.data.website_url[index];
                        this.form.website_url[index].show = true;
                    }
                }
                //回显id
                //存放城市id
                //this.form.city_arr_id = res.data.city_arr_id;
                //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
                //this.cascaderKey += 1;
                //回显网站标题，描述，关键词
                console.log(res.data.title, res.data.keywords, res.data.description)
                this.form.title = res.data.title;
                this.form.keywords = res.data.keywords;
                this.tags = res.data.keywords ? res.data.keywords.split(',') : [];
                this.form.description = res.data.description;
                this.form.suffix = res.data.suffix;
                this.form.ad_key = res.data.ad_key; // 网站名称缩写
                //回显模板信息
                // this.form.template_id = res.data.template_id;
                // this.TemplateName = res.data.template_name;
                // this.TemplateImg = JSON.parse(res.data.template_img)[0];
            })

            this.getfootInfo()
        }



    }
}
</script>

<style scoped lang="less">
p {
    padding: 0;
    margin: 0;
}


.layerBox {
    padding: 30px 20px;
    position: relative;

    .listBtnBox {
        justify-content: left;
    }

    // 表单内容
    .formContent {
        background-color: #f5f7fb;
        padding: 30px 25px;
        position: relative;
        margin-bottom: 20px;

        // 顶部引用外链
        .links {
            position: absolute;
            top: 37px;
            right: 97px;
        }

        //底部免责声明提示文字
        .tips {
            margin: 0 auto;
            font-size: 13px;
            color: #666666;
        }

        // 图片上传提示文字
        .imgTips {
            color: #8B8D97;
            font-size: 14px;
        }

        // 资讯关键词 和 资讯描述 的 文字提示 
        .keywords,
        .desc {
            position: relative;

            i {
                position: absolute;
                top: 0;
                left: -15px;
            }
        }

        // 文字提示用到的图标的颜色
        .el-icon-warning {
            color: #a9a9a9;
        }

        // input框右下角数字颜色
        ::v-deep .el-input__count {
            color: #999;
        }

        // 多行文本框的高度
        ::v-deep .el-textarea__inner {
            height: 100px;
        }

        // 下拉框
        ::v-deep .el-select {
            width: 100%;
            display: inline-block;
            position: relative;
        }

    }

    //按钮
    .btn {
        width: 440px;
        margin: 50px auto 20px;

        button {
            width: 180px;
            height: 58px;
            border-radius: 12px;
            border: none;
            font-size: 20px;
        }

        .cancel {
            color: #333;
            background-color: #f5f7fb;
            border: 2px solid #e3e8fa;
            margin-right: 80px;
        }

        .sure {
            background-color: #5570f1;
            color: #fff;
        }
    }

    //缩略图
    .uploaderBox {
        .avatar {
            width: 140px;
            height: auto;
        }

        .chooseImgDiv {
            background-color: #fff;

            img {
                display: inline-block;
            }
        }
    }

}

/*表单特殊样式 start------------------------------------------------------------>*/
//1.1 模板表单
.webSite {
    background: #f0f2f5;
    width: 200px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    margin: 0 auto;
}

.webSiteTemplate {
    display: flex;

    .webSiteTitle {
        width: 120px;
        line-height: 140px;
        text-align: right;
        padding-right: 12px;
        font-weight: bold;
    }
}

.webSiteBtn {
    padding: 50px 0 0 0;
    text-align: center;
}

.formLabelFloatBox {
    position: relative;

    .formLabeladdIcon {
        position: absolute;
        right: 45px;
        top: 5px;
        width: 38px;
        height: 24px;
    }

    .formLabelDelIcon {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 38px;
        height: 24px;
    }
}

.templateBox {
    display: flex;

    .templateListClass {
        margin-right: 20px;

        .templateListClassItem {
            width: 120px;
            height: 38px;
            text-align: center;
            line-height: 38px;
            border: 1px solid #E3E8FA;
            background: #F5F7FB;
            margin-bottom: 10px;
            border-radius: 8px;
            cursor: pointer;
        }
    }

    .templateListBox {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .templateList {
            margin-right: 10px;
            text-align: center;
            font-size: 12px;
            margin-bottom: 10px;
            border: 1px solid #fff;
            padding: 5px;

            .templateImg {
                width: 129px;
                height: 157px;
                border-radius: 8px;
                cursor: pointer;
            }
        }
    }
}

//1.1 模板分页
.pageNumBox {
    text-align: center;
    padding-top: 20px;
}

.webSiteTemplateName {
    margin-left: 10px;
    line-height: 36px;
}

//1.2 模板缩略图
.webSiteTemplateImg {
    width: 140px;
    height: 140px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid #E1E2E9;

    .selectWebSiteTemplateImg {
        width: 140px;
        height: 140px;
        border-radius: 12px;
        display: block;
        cursor: pointer;
    }

    .webSiteTemplateText {
        color: #5570F1;
        height: 36px;
        line-height: 36px;
        text-align: center;
    }

    img {
        display: block;
    }
}

/*表单样式 end------------------------------------------------------------>*/

//执行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 .custom-align-right.key {
    text-align: right;
    background-color: red;
    /* 设置标签文字右对齐 */
}
//该项不能为空几个字的位置
::v-deep .el-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: relative;
    // top: 22%;
    // left: 93%;
}

//输入框距离底部的距离
::v-deep .el-form-item {
    margin-bottom: 5px;
}


//图片提示文字样式
.photo_tips {
    // font-size: 12px;
    color: #999;
}

//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>