12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391 |
- <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>
|