初步树形
图片
html
<div class="tree_box " > <div v-for="(item,index) in tree_arr"> <div class="tree_parent row_flex al_flex "> <i v-if="item.child_show" class="el-icon-caret-right" @click="GoMoreShowChild(index,item.column_id)" ></i> <i v-else class="el-icon-caret-bottom" @click="GoMoreShowChild(index,item.column_id)" ></i>
<img v-if="item.sel" class="tree_sel" src="../img/tree_seled.png" alt="" @click="GoTreeParent(index,item.column_id)" /> <img v-else class="tree_sel" src="../img/tree_sel.png" alt="" @click="GoTreeParent(index,item.column_id)" /> <span @click="GoTreeParent(index,item.column_id)" >{{ item.column_name }}{{ item.sel }}</span > </div> <el-collapse-transition> <div v-show="item.child_show"> <div class="tree_children row_flex al_flex" v-for="(c_item,c_idx) in item.children" @click="GoTreeChild(index,c_idx,c_item.column_id)" > <img v-if="c_item.sel" class="tree_sel" src="../img/tree_seled.png" alt="" /> <img v-else class="tree_sel" src="../img/tree_sel.png" alt="" /> <span >{{ c_item.column_name }}-{{ c_item.sel }}</span > </div> </div> </el-collapse-transition> </div> </div>复制代码data:
tree_arr: [], // 栏目的树形控件 tree_one: [], // 一级栏目 文章编辑时赋值 tree_two: [], // 二级栏目 文章编辑赋值 default_arr: [], // 编辑设置默认栏目 default_checked_keys: [] // 编辑设置默认栏目复制代码
methods函数
执行查询树形
/** * 查询栏目的树形列表 */ GoColumnTree() { const that = this; var op_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_column_find_list_tree, // 具体接口 cbk: that.cb_module_column_find_list_tree, // 回调 data: {} // 形参 }; // console.log(op_data); pub._InitAjax(op_data); }复制代码回调
/** * 栏目树形列表回调 * @param {*} res */ cb_module_column_find_list_tree(res) { const that = this; console.log("栏目树形列表回调", res); if (res.stateCode == "200") { that.tree_arr = []; if (that.page_fg) { // 编辑 双层循环设置 已知的一级与二级栏目 console.log("编辑对应的二级栏目", that.tree_two); for (var x = 0; x < res.data.length; x++) { that.$set(res.data[x], "sel", false); that.$set(res.data[x], "child_show", false); for (var y = 0; y < that.tree_one.length; y++) { if (that.tree_one[y] == res.data[x].column_id) { that.$set(res.data[x], "sel", true); } }
for (let w = 0; w < res.data[x].children.length; w++) { that.$set(res.data[x].children[w], "sel", false); for (var z = 0; z < that.tree_two.length; z++) { if (res.data[x].children[w].column_id == that.tree_two[z]) { that.$set(res.data[x].children[w], "sel", true); } else { } } } } } else { // 新建的状态下 for (var n = 0; n < res.data.length; n++) { that.$set(res.data[n], "sel", false); that.$set(res.data[n], "child_show", false); if (res.data[n].children.length) { for (var c = 0; c < res.data[c].children.length; c++) { that.$set(res.data[n].children[c], "sel", false); } } } }
// 数据 for (var i = 0; i < res.data.length; i++) { that.tree_arr.push(res.data[i]); // 页面大树形数据数组 that.default_arr.push(res.data[i]); // 编辑设置默认栏目使用 } } },复制代码一级栏目的展开
/** * 一级栏目的展开 * @param {*} idx 下标 * @param {*} c_id 栏目column_id */ GoMoreShowChild(idx, c_id) { const that = this; that.$set( that.tree_arr[idx], "child_show", !that.tree_arr[idx].child_show ); },复制代码一级栏目的点击选中
/** * 点击一级栏目事件 * @param {*} idx 下标 * @param {*} c_id 栏目column_id */ GoTreeParent(idx, c_id) { const that = this; console.log("点击一级栏目", that.tree_arr[idx]); that.$set(that.tree_arr[idx], "sel", !that.tree_arr[idx].sel); if (!that.tree_arr[idx].sel) { //放弃一级栏目 同时设置所属二级为不选中 that.$set(that.tree_arr[idx], "child_show", false); // if (that.tree_arr[idx].children.length) { // for (var c = 0; c < that.tree_arr[idx].children.length; c++) { // that.$set(that.tree_arr[idx].children[c], "sel", false); // // 同时将已经选中的二级栏目从数组中删除 // for (var d = 0; d < that.art_form.column_two_id.length; d++) { // if ( // that.art_form.column_two_id[d] == // that.tree_arr[idx].children[c].column_id // ) { // that.art_form.column_two_id.splice(d, 1); // } // } // } // } that.EditParent(that.tree_arr[idx].sel, c_id); } else { // 保存id that.$set(that.tree_arr[idx], "child_show", true); console.log("保存一级", c_id); that.EditParent(that.tree_arr[idx].sel, c_id); } },复制代码操作一级
/** * 保存或者删除一级栏目 添加需要去重 * @param {*} fg 状态 true保存 false 删除 * @param {*} id 栏目column_id */ EditParent(fg, id) { const that = this; var flag = false; if (fg) { for (var i = 0; i < that.art_form.column_one_id.length; i++) { if (that.art_form.column_one_id[i] == id) { flag = true; } } if (!flag) { that.art_form.column_one_id.push(id); } } else { for (var di = 0; di < that.art_form.column_one_id.length; di++) { if (that.art_form.column_one_id[di] == id) { that.art_form.column_one_id.splice(di, 1); } } } console.log("编辑一级数组", that.art_form.column_one_id); },
复制代码操作二级
/** * 点击二级栏目的事件 添加需要去重 * @param {*} p_idx 所属一级栏目的下标 * @param {*} idx 点击二级的下标 * @param {*} c_id 栏目column_id */ GoTreeChild(p_idx, idx, c_id) { console.log("点击二级栏目", p_idx, idx, c_id); const that = this; that.$set( that.tree_arr[p_idx].children[idx], "sel", !that.tree_arr[p_idx].children[idx].sel ); if (that.tree_arr[p_idx].children[idx].sel) { console.log("保存二级栏目", c_id); that.EditChild(that.tree_arr[p_idx].children[idx].sel, c_id); } else { that.EditChild(false, c_id); } },
/** * 保存 删除 二级栏目 * @param {*} fg 状态 true保存 false 删除 * @param {*} id 栏目column_id */ EditChild(fg, id) { const that = this; var flag = false; if (fg) { for (var i = 0; i < that.art_form.column_two_id.length; i++) { if (that.art_form.column_two_id[i] == id) { flag = true; } } if (!flag) { that.art_form.column_two_id.push(id); } } else { for (var di = 0; di < that.art_form.column_two_id.length; di++) { if (that.art_form.column_two_id[di] == id) { that.art_form.column_two_id.splice(di, 1); } } } console.log("编辑二级栏目", that.art_form.column_two_id); },
复制代码完整页面以及js
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>发布文章</title> <link rel="stylesheet" href="../css/style.css" /> <link rel="stylesheet" href="../css/public.css" /> <link rel="stylesheet" href="../css/ma_article_detail.css" /> <link rel="stylesheet" href="../css/element.css" /> <style> [v-cloak] { display: none !important; } .el-icon-caret-bottom, .el-icon-caret-right { color: #c0c4cc; } .tree_parent { height: 25px; line-height: 25px; cursor: pointer; color: #5f5c5c; font-size: 14px; } .tree_children { padding-left: 33px; height: 25px; line-height: 25px; cursor: pointer; font-size: 12px; } .tree_sel { margin-right: 6px; margin-left: 6px; width: 13px; border-radius: 2px; } </style> </head> <body> <div id="app" v-cloak v-loading="loading" element-loading-text="正在保存中..." element-loading-spinner="el-icon-loading" > <div class="min_container"> <div class="col_flex"> <div class="row_flex be_flex al_flex nav_head "> <div class="nav_tit"> <div>文章详情</div> <div class="nav_tips"> 栏目、文章名称和文本编辑是必填，其余选填。 </div> </div> <div class="row_flex"> <el-button size="mini" @click="GoBack" class="add_banner back_cloumn " plain >返回</el-button > </div> </div> <div class="line"></div> <el-form size="mini" ref="art_form" :model="art_form" label-width="80px" :rules="rules" > <!-- prop="column_one_id" --> <div class="line nav_tit" @click="show7 = !show7"> 文章设置 </div> <el-collapse-transition> <div v-show="show7"> <el-form-item label="文章名称" prop="article_name"> <el-input v-model="art_form.article_name" class="width_3" placeholder="输入文章名称" ></el-input> </el-form-item> <el-form-item label="发布栏目"> <div class="tree_box " > <div v-for="(item,index) in tree_arr"> <div class="tree_parent row_flex al_flex "> <i v-if="item.child_show" class="el-icon-caret-right" @click="GoMoreShowChild(index,item.column_id)" ></i> <i v-else class="el-icon-caret-bottom" @click="GoMoreShowChild(index,item.column_id)" ></i>
<img v-if="item.sel" class="tree_sel" src="../img/tree_seled.png" alt="" @click="GoTreeParent(index,item.column_id)" /> <img v-else class="tree_sel" src="../img/tree_sel.png" alt="" @click="GoTreeParent(index,item.column_id)" /> <span @click="GoTreeParent(index,item.column_id)" >{{ item.column_name }}{{ item.sel }}</span > </div> <el-collapse-transition> <div v-show="item.child_show"> <div class="tree_children row_flex al_flex" v-for="(c_item,c_idx) in item.children" @click="GoTreeChild(index,c_idx,c_item.column_id)" > <img v-if="c_item.sel" class="tree_sel" src="../img/tree_seled.png" alt="" /> <img v-else class="tree_sel" src="../img/tree_sel.png" alt="" /> <span >{{ c_item.column_name }}-{{ c_item.sel }}</span > </div> </div> </el-collapse-transition> </div> </div>
<el-button @click="GoColumnList" type="text" >栏目管理</el-button > </el-form-item> </div> </el-collapse-transition>
<div class="line nav_tit" @click="show6 = !show6"> 内容编辑 </div> <el-collapse-transition> <div v-show="show6"> <el-form-item label="文本编辑" class="width_4"> <el-radio v-model="art_form.is_rich" label="1" >富文本编辑</el-radio > <el-radio v-model="art_form.is_rich" label="2" >普通编辑</el-radio > </el-form-item> <div class="place"> 富文本编辑和普通编辑只能选择一种。 </div> <el-form-item v-show="art_form.is_rich == 1" label="富文本" class="text_area" > <textarea id="editor_id" name="content" style="width:700px;height:300px;" > </textarea> </el-form-item>
<div v-show="art_form.is_rich == 2"> <el-form-item label="展示样式"> <el-input v-model="art_form.style_name" class="width_3" placeholder="选择样式" :disabled="true" ></el-input> <el-button type="text" @click="GoStylePannel" >样式选择</el-button > </el-form-item> <el-form-item label="普通编辑" class="text_desc"> <el-input type="textarea" v-model="art_form.article_text" placeholder="填写描述" ></el-input> </el-form-item>
<transition name="slide-fade" v-for="(item,index) in art_form.article_picture" :key="index" > <el-form-item label="图片"> <el-input :disabled="true" v-model="item.file_img" class="width_3" placeholder="点击右侧添加图片" ></el-input> <el-button type="text" @click="GoSelPicture(index)" >添加</el-button > <el-button type="text" @click="AddPictureItem" >新增</el-button > <el-button type="text" @click="DelPictureItem(index)" >删除</el-button > </el-form-item> </transition>
<transition name="slide-fade" v-for="(item,index) in art_form.article_vedio" :key="index" > <el-form-item label="视频"> <el-input :disabled="true" v-model="item.file_img" class="width_3" placeholder="点击右侧添加视频" ></el-input> <el-button type="text" @click="GoSelectVideo(index)" >添加</el-button > <el-button type="text" @click="AddViewItem" >新增</el-button > <el-button type="text" @click="DelViewItem(index)" >删除</el-button > </el-form-item> </transition>
<transition name="slide-fade" v-for="(item,index) in art_form.article_file" :key="index" > <el-form-item label="附件"> <el-input :disabled="true" v-model="item.file_url" class="width_3" placeholder="点击右侧添加附件" ></el-input> <el-button type="text" @click="GoSelectDoc(index)" >添加</el-button > <el-button type="text" @click="AddDocItem" >新增</el-button > <el-button type="text" @click="DelDocItem(index)" >删除</el-button > </el-form-item> </transition> </div> </div> </el-collapse-transition>
<div class="line nav_tit" @click="show5 = !show5"> 图片设置 </div> <el-collapse-transition> <div v-show="show5"> <el-form-item label="封面图"> <transition name="el-fade-in" ><div> <img v-show="art_form.additional_cover ? true : false" class="width_3" :src="art_form.additional_cover" alt="" /></div ></transition> <el-button type="text" @click="GoSelPicture(-1)" >选择封面图</el-button ><el-button type="text" @click="GoDelCover('additional_cover')" >删除封面图</el-button > </el-form-item> <el-form-item label="缩略图"> <transition name="el-fade-in" ><div> <img v-show="art_form.additional_thumbnail ? true : false" class="width_3" :src="art_form.additional_thumbnail" alt="" /></div ></transition> <el-button type="text" @click="GoSelPicture(-2)" >选择缩略图</el-button ><el-button type="text" @click="GoDelCover('additional_thumbnail')" >删除缩略图</el-button > </el-form-item> <el-form-item label="背景图"> <transition name="el-fade-in" ><div> <img v-show="art_form.additional_background ? true : false" class="width_3" :src="art_form.additional_background" alt="" /></div ></transition> <el-button type="text" @click="GoSelPicture(-3)" >选择背景图</el-button ><el-button type="text" @click="GoDelCover('additional_background')" >删除背景图</el-button > </el-form-item> <el-form-item label="横幅图"> <transition name="el-fade-in" ><div> <img v-show="art_form.additional_bannar ? true : false" class="width_3" :src="art_form.additional_bannar" alt="" /></div ></transition> <el-button type="text" @click="GoSelPicture(-4)" >选择横幅图</el-button ><el-button type="text" @click="GoDelCover('additional_bannar')" >删除横幅图</el-button > </el-form-item> </div> </el-collapse-transition> <div class="line nav_tit" @click="show3 = !show3"> 附加设置 </div> <el-collapse-transition> <div v-show="show3"> <el-form-item label="跳转链接" class="width_4"> <el-input v-model="art_form.article_url" placeholder="输入链接" ></el-input> </el-form-item> <div class="place"> 请输入要链接到的网址，设置后访问该信息将直接跳转到设置的网址。 </div> <el-form-item label="更新时间" class="width_4"> <el-date-picker v-model="art_form.update_time" type="datetime" value-format="yyyy-MM-dd HH-mm-ss" class="width_3" placeholder="选择日期时间" > </el-date-picker> </el-form-item>
<el-form-item label="发布时间" class="width_4"> <el-date-picker value-format="yyyy-MM-dd HH-mm-ss" v-model="art_form.release_time" type="datetime" class="width_3" placeholder="选择日期时间" > </el-date-picker> </el-form-item>
<el-form-item label="是否显示" class="width_4"> <el-radio v-model="art_form.show_status" label="true" >是</el-radio > <el-radio v-model="art_form.show_status" label="false" >否</el-radio > </el-form-item>
<el-form-item label="是否推荐" class="width_4"> <el-radio v-model="art_form.recommend_status" label="true" >是</el-radio > <el-radio v-model="art_form.recommend_status" label="false" >否</el-radio > </el-form-item>
<el-form-item label="是否置顶" class="width_4"> <el-radio v-model="art_form.stick_status" label="true" >是</el-radio > <el-radio v-model="art_form.stick_status" label="false" >否</el-radio > </el-form-item> <el-form-item label="描述" class="text_desc"> <el-input type="textarea" v-model="art_form.article_describe" placeholder="填写描述" ></el-input> </el-form-item> </div> </el-collapse-transition>
<div class="line nav_tit" @click="show4 = !show4"> SEO优化 </div> <el-collapse-transition> <div v-show="show4"> <el-form-item label="发布人"> <el-input v-model="art_form.publisher" class="width_3" placeholder="输入名称" > </el-input> </el-form-item> <el-form-item label="访问量"> <el-input type="number" v-model="art_form.article_clicks" class="width_3" placeholder="输入访问量" > </el-input> </el-form-item>
<el-form-item label="关键词"> <el-tag v-for="(tag,idx) in art_form.article_keyword" :key="idx" closable :disable-transitions="false" @close=" GoArticleKeywordClose(tag)" > {{ tag }} </el-tag> <el-input class="input-new-tag width_3 " v-if="art_form.article_keyword_input_visible" v-model="art_form.article_keyword_input_value" ref="saveArticleKeys" @keyup.enter.native=" GoArtKeyConfirm" @blur="GoArtKeyConfirm" > </el-input> <el-button v-else size="mini" class="button-new-tag" @click=" GoArtKeyIptShow" >+ 新建</el-button > </el-form-item> <el-form-item label="标签"> <el-tag v-for="(tag,idx) in art_form.article_labels" :key="idx" closable :disable-transitions="false" @close="GoArticleLabelsClose(tag)" > {{ tag }} </el-tag> <el-input class="input-new-tag width_3 " v-if="art_form.article_labels_input_visible" v-model="art_form.article_labels_input_value" ref="saveArticleLabels" @keyup.enter.native="GoArtLabelsConfirm" @blur="GoArtLabelsConfirm" > </el-input> <el-button v-else class="button-new-tag" @click="GoArtLabelsIptShow" >+ 新建</el-button > </el-form-item> </div> </el-collapse-transition> </el-form> <div class="foot_btn"> <el-button size="small" type="primary" @click="onSubmit('art_form')" >确 定</el-button > <el-button size="small" @click="GoBack">取 消</el-button> </div> </div>
<!-- 样式选择 --> <div> <el-dialog title="样式选择" center :visible.sync="style_visible_out"> <el-dialog width="600px" class="inner_z_index style_inner_box img_flex" title="预览" :visible.sync="style_visible_inner" append-to-body > <div class="style_inner_photo img_flex"> <img class="style_inner_pic" :src="style_preview_img" alt="" /> </div> </el-dialog> <div> <div class="row_flex wr_flex style_box "> <div v-if="style_arr.length == 0"> 暂无可选样式！ </div> <div v-else class="style_photo img_flex" v-for="(item,index) in style_arr" @mouseenter="MouseMoveStyle(item.style_id) " @mouseleave="MouseMoveStyle(item.style_id)" > <img class="style_pic" :src="item.style_img" alt="" /> <transition name="fade" ><img v-show="item.sel" class="add_right" src="../img/right.png" alt="" /></transition> <transition name="fade"> <div v-show="item.pan_show" class="row_flex ar_flex al_flex sty_photo_pan " > <i class="el-icon-circle-check-outline bg_icon_white " @click="MouseSelectStyle(item.style_id)" ></i> <i class="el-icon-zoom-in bg_icon_white" @click="GoStylePreview(item.style_img)" ></i> </div> </transition> </div> </div> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="mini" @click="style_visible_out = false " >确 定</el-button > </span> </el-dialog> </div>
<!-- 封面选择 --> <div class="new_add"> <el-dialog title="添加图片" :visible.sync="coverVisable" width="800px" center > <el-tabs tab-position="left" v-model="cover_tab_act" @tab-click="GoCoverTabHandleClick" > <el-tab-pane label="本地上传" name="custom_data"> <div class="up_pic_list"> <el-upload size="mini" :action="load_url" :limit="1" list-type="picture-card" :on-preview="goPreviewCover" :on-remove="goRemoveCover" :on-success="goSuccessCover" :before-upload="goCoverBeforeUpoad" ><div slot="tip" class="el-upload__tip"> 只能上传 1 张jpg格式文件文件，大小不超过2MB! </div> <i class="el-icon-upload2 "></i> </el-upload> <el-dialog tittle="预览" :visible.sync="dialogVisibleLookCover" append-to-body > <img width="100%" :src="dialogImageUrlLookCover" alt="" /> </el-dialog> </div> </el-tab-pane> <el-tab-pane label="图片库" name="system_data"> <div class="col_flex cover_list"> <div class="row_flex be_flex al_flex photo_tags"> <div> <el-button size="small" type="text" class="text_btn" @click="GoResource" :class="cover_act == 'custom_data' ? 'text_btn_act' : '' " >用户上传</el-button > <el-button size="small" type="text" class="text_btn " @click="GoResource" :class="cover_act == 'system_data' ? 'text_btn_act' : '' " >系统配置</el-button > </div> <div> <div style="margin-right: 15px;"> <el-input size="mini" v-model="search_cover_name" placeholder="请输入内容" > <template slot="append"> <el-button size="mini" @click="GoIptSearchCover" >搜索封面</el-button ></template > </el-input> </div> </div> </div> <div class="row_flex wr_flex photo_lists"> <div class="cover_photo" v-for="(item,index) in cover_arr" @mouseenter="MouseMoveCover(item.explorer_id)" @mouseleave="MouseMoveCover(item.explorer_id)" > <img class="cover_pic" :src="item.explorer_path" alt="" /> <img v-show="item.sel" class="add_right" src="../img/right.png" alt="" /> <transition name="fade"> <div v-show="item.pan_show" class="row_flex ar_flex al_flex cover_pan " > <i class="el-icon-circle-check-outline bg_icon_white " @click="MouseSelectCover(item.explorer_id)" ></i> <i class="el-icon-zoom-in bg_icon_white " @click="GoCoverGellaryLook(item.explorer_path)" ></i> </div> </transition> </div> <div v-show="cover_arr.length == 0"> 暂无可选封面！ </div> </div> </div> </el-tab-pane> </el-tabs>
<!-- 封面图片库图片的预览 --> <el-dialog width="600px" height="350px" title="预览" :visible.sync=" photo_look_cover" append-to-body > <div class="look_photo_box img_flex"> <img class="look_img_box" :src="photo_look_cover_url" alt="" /> </div> </el-dialog>
<span slot="footer" class="dialog-footer"> <el-button size="mini" @click=" coverVisable= false" >确 定</el-button > </span> </el-dialog> </div>
<!-- 视频选择 --> <div class="new_add"> <el-dialog title="资源管理" :visible.sync="addVisibleVideo" width="800px" center > <el-tabs tab-position="left" v-model="video_active_tab" @tab-click="VideoTabHandleClick" > <el-tab-pane label="本地上传" name="custom_data"> <div class="up_pic_list"> <el-upload size="mini" :limit="1" class="up_pic_list avatar-uploader " :action="load_url" :on-preview="handleVideoCardPreview" :on-success="handleVideoSuccess" :on-remove="handleVideoRemove" :before-upload="beforeVideoUpload" ><div slot="tip" class="el-upload__tip"> 只能上传1个mp4格式文件文件，大小不超过100MB! </div> <i class="el-icon-upload add_pic "></i> </el-upload>
<el-dialog title="预览" :visible.sync="dialogVisible_look" append-to-body > <video controls="controls" :src="dialog_video_look_Url" width="100%" ></video> </el-dialog> </div> </el-tab-pane> <el-tab-pane label="视频库" name="system_data"> <div class="col_flex up_pic_list"> <div class="row_flex be_flex al_flex photo_tags"> <div> <el-button size="small" type="text" class="text_btn " @click="GoResource" :class="video_act == 'system_data' ? 'text_btn_act' : '' " >系统配置</el-button > <el-button size="small" type="text" class="text_btn" @click="GoResource" :class="video_act == 'custom_data' ? 'text_btn_act' : '' " >用户上传</el-button > </div> <div> <div style="margin-right: 15px;"> <el-input size="mini" v-model="search_video_name" placeholder="请输入内容" > <template slot="append"> <el-button size="mini" @click="GoIptSearchVideo" >搜索</el-button ></template > </el-input> </div> </div> </div> <div class="row_flex wr_flex photo_lists"> <div class="add_pan_photo" v-for="(item,index) in video_arr" @mouseenter="mouseMoveVideo(item.explorer_id) " @mouseleave="mouseMoveVideo(item.explorer_id)" > <!-- poster="../img/2.jpg " --> <video controls="controls" :src="item.explorer_path" width="100%" class="add_pan_pic" ></video>
<img v-show="item.sel" class="add_right" src="../img/right.png" alt="" /> <!-- --> <transition name="fade"> <div v-show="item.pan_show" class="img_flex photo_pan_video " > <i class="el-icon-circle-check-outline check " @click="GoAddVideoCheck(item.explorer_id)" ></i> </div> </transition> </div> <div v-show="video_arr.length == 0"> 暂无可选视频！ </div> </div> </div> </el-tab-pane> </el-tabs>
<span slot="footer" class="dialog-footer"> <el-button size="mini" @click="addVisibleVideo = false" >确 定</el-button > </span> </el-dialog> </div>
<!-- 选择附件 --> <div class="new_add"> <el-dialog title="资源管理" :visible.sync="addVisibleDoc" width="800px" center > <el-tabs tab-position="left" v-model="doc_active_tab" @tab-click="DocTabHandleClick" > <el-tab-pane label="本地上传" name="custom_data"> <div class="up_pic_list"> <el-upload size="mini" class="up_pic_list avatar-uploader " :limit="1" :action="load_url" :on-success="goSuccessDoc" :on-remove="goRemoveDoc" :before-upload="goUploadDoc" ><div slot="tip" class="el-upload__tip"> 每次只能上传1个文件，大小不超过100MB! </div> <i class="el-icon-upload add_pic "></i> </el-upload> </div> </el-tab-pane> <el-tab-pane label="附件库" name="system_data"> <div class="col_flex up_pic_list"> <div class="row_flex be_flex al_flex photo_tags"> <div> <!-- <el-button size="small" type="text" class="text_btn " >系统配置</el-button > --> <el-button size="small" type="text" class="text_btn text_btn_act" >用户上传</el-button > </div> <div> <div style="margin-right: 15px;"> <el-input size="mini" v-model="search_doc_name" placeholder="请输入内容" > <template slot="append"> <el-button size="mini" @click="GoIptSearchDoc" >搜索</el-button ></template > </el-input> </div> </div> </div> <div class="row_flex wr_flex photo_lists"> <div class="doc_list row_flex wr_flex "> <div class="doc_item row_flex be_flex al_flex" v-for="(item,index) in doc_arr" :key="index" @click="goDocSelItem(item.explorer_id)" > <span>{{ item.explorer_path }}</span> <i class="el-icon-circle-check " :class='item.sel?"bg_btn_green":""' ></i> </div> <div v-show="doc_arr.lenght == 0">暂无可用附件！</div> </div> </div> </div> </el-tab-pane> </el-tabs>
<span slot="footer" class="dialog-footer"> <el-button size="mini" @click="addVisibleDoc = false" >确 定</el-button > </span> </el-dialog> </div> </div> </div>
<!-- 引入js --> <script src="../js/pub.js"></script> <script src="../js/base.js"></script> <script src="../js/jquery-1.12.4.js"></script>
<script src="../js/axios.js"></script> <script src="../js/vue.js"></script> <script src="../js/element.js"></script>
<script src="../kindeditor/kindeditor-all.js"></script> <script> KindEditor.ready(function(K) { console.log("富文本走起"); window.editor = K.create("#editor_id", { /*设置上传接口*/ // filePostName: "/kindeditor/fileUpload", formatUploadUrl: false, urlType: "domain", uploadJson: pub._url + pub._DetailApi.kindeditor_fileUpload, /*设置按钮*/ items: [ "source", "|", "undo", "redo", "|", "preview", "print", "template", "code", "cut", "copy", "paste", "plainpaste", "wordpaste", "|", "justifyleft", "justifycenter", "justifyright", "justifyfull", "insertorderedlist", "insertunorderedlist", "indent", "outdent", "subscript", "superscript", "clearhtml", "quickformat", "selectall", "|", "fullscreen", "/", "formatblock", "fontname", "fontsize", "|", "forecolor", "hilitecolor", "bold", "italic", "underline", "strikethrough", "lineheight", "removeformat", "|", "image", "multiimage", "flash", "media", "insertfile", "table", "hr", "emoticons", "baidumap", "pagebreak", "anchor", "link", "unlink", "|", "about" ] }); }); </script> <script src="../ma_js/ma_article_detail.js"></script> </body></html>
复制代码完整js
var app = new Vue({ el: "#app", data: { // 页面参数 load_url: "", // 上传链接 page_fg: false, // 页面的标志变量 false 新建 true 编辑 a_id: "", // 文章id c_id: "", // 栏目id art_form: { article_id: "", article_name: "", // 文章名字 style_name: "", // 样式名字 style_id: "", // 样式id article_url: "", // 文章跳转链接 update_time: "", // 更新时间 release_time: "", // 发布时间 show_status: "true", // 是否显示 recommend_status: "true", // 是否推荐 stick_status: "true", // 是否置顶 publisher: "", // 发布人 arr: [], article_clicks: "", // 访问量 article_keyword: [], // 关键词 article_keyword_input_value: "", // 新建关键词的输入框的绑定值 article_keyword_input_visible: false, // 新建关键词的输入框的出现时机 article_labels: [], // 标签 article_labels_input_visible: false, // 新建标签的输入框的出现时机 article_labels_input_value: "", // 新建标签的输入框的绑定值 article_describe: "", // 描述 column_one_arr: [], // 一级栏目数组 column_one_id: [], // 选中一级栏目数组 column_two_arr: [], // 二级栏目数组 column_two_id: [], // 选中二级栏目数组
additional_cover: "", // 页面封面图 additional_thumbnail: "", // 页面缩略图 additional_background: "", // 页面背景图 additional_bannar: "", //页面横幅 is_rich: "1", // 富文本编辑 1 正常编辑 2 // 页面有编辑和新建两种方式 新建情况下图片，视频和附件的原始数组中需要有原始的空值存在 编辑的情况之下需要先将数组清空 然后赋值 article_picture: [ { file_img: "", file_id: "" } ], // 文章图片数组 article_vedio: [ { file_img: "", file_id: "" } ], // 文章视频数组 article_file: [ { file_url: "", file_id: "" } ], // 文章附件数组 article_text: "", // 正文 ueditor_text: "", // 富文本 mmm: "" }, // 文章信息 rules: { column_one_id: [ { required: true, message: "请选择栏目", trigger: "change" } ], article_name: [ { required: true, message: "请输入名称", trigger: "blur" }, { min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" } ] }, // 选择样式 style_visible_out: false, style_visible_inner: false, style_preview_img: "", // 样式预览图片链接中转 style_page_num: 1, // 页码 style_page_size: 9999, // 每一页条数 style_obj: {}, // 样式返回的全部信息 style_arr: [], // 样式图片
// 封面 图片 选择 coverVisable: false, // 弹框 dialogVisibleLookCover: false, // 预览弹框 dialogImageUrlLookCover: "", // 上传预览图链接 photo_look_cover: false, // 封面图库的预览弹框 photo_look_cover_url: "", // 封面图库的预览链接 cover_arr: [], // 封面信息数组 search_cover_name: "", // 封面的输入框 搜索使用 cover_tab_act: "custom_data", // 封面图片资源管理的左侧的用户上传custom_data 资源库system_data的切换 cover_act: "system_data", // 标记用户与系统 cover_fg: -1, // 选择图片>0 与封面-1的 标志变量
// 选择视频的弹框 addVisibleVideo: false, dialogVisible_look: false, // 预览视频的弹框 dialog_video_look_Url: "", video_arr: [], video_fg: 0, // 视频选择标志 video_active_tab: "custom_data", // 视频资源管理的左侧的用户上传custom_data 资源库system_data的切换 video_act: "system_data", // 资源管理 系统system_data与用户custom_data的切换 search_video_name: "", // 视频的搜索参数
// 选择附件 addVisibleDoc: false, // 弹框 doc_arr: [], doc_active_tab: "custom_data", // 视频资源管理的左侧的用户上传custom_data 资源库system_data的切换 doc_fg: 0, // 附件选择标志 search_doc_name: "", // 搜索使用 loading: false, show3: false, // 文章基础设置的收起与展示 show4: false, // 文章SEO优化的内容的收起与展示 show5: false, // 图片设置的内容的收起与展示 show6: true, // 内容编辑收起与展示 show7: true, // 内容编辑收起与展示 editor: "",
tree_arr: [], // 栏目的树形控件 tree_one: [], // 一级栏目 文章编辑时赋值 tree_two: [], // 二级栏目 文章编辑赋值 default_arr: [], // 编辑设置默认栏目 default_checked_keys: [] // 编辑设置默认栏目 // }, mounted() { // 为富文本编辑器赋值原本的文章内容 const that = this; // KindEditor.ready(function(K) { // console.log("富文本走起"); // window.editor = K.create("#editor_id", { // /*设置上传接口*/ // // filePostName: "/kindeditor/fileUpload", // formatUploadUrl: false, // urlType: "domain", // uploadJson: pub._url + pub._DetailApi.kindeditor_fileUpload, // /*设置按钮*/ // items: [ // "source", // "|", // "undo", // "redo", // "|", // "preview", // "print", // "template", // "code", // "cut", // "copy", // "paste", // "plainpaste", // "wordpaste", // "|", // "justifyleft", // "justifycenter", // "justifyright", // "justifyfull", // "insertorderedlist", // "insertunorderedlist", // "indent", // "outdent", // "subscript", // "superscript", // "clearhtml", // "quickformat", // "selectall", // "|", // "fullscreen", // "/", // "formatblock", // "fontname", // "fontsize", // "|", // "forecolor", // "hilitecolor", // "bold", // "italic", // "underline", // "strikethrough", // "lineheight", // "removeformat", // "|", // "image", // "multiimage", // "flash", // "media", // "insertfile", // "table", // "hr", // "emoticons", // "baidumap", // "pagebreak", // "anchor", // "link", // "unlink", // "|", // "about" // ] // }); // }); // console.log(pub._url + pub._DetailApi.kindeditor_fileUpload); }, created() { console.log("进入vue函数中！"); const that = this; that.load_url = pub._url + pub._DetailApi.module_explorer_upload; // 上传的链接接口 /** * 查询文章需要 栏目id 文章id */ that.page_fg = pub._LinkParm("fg") == "2" ? true : false; // 1 新建 2 编辑 if (that.page_fg) { /** * 编辑 * 参数设置 文章id 栏目id * 查询文章详情 * 查询文章对应的一级栏目 同时查询所有的一级栏目 * 查询文章对应的二级栏目 然后使用第一个二级栏目的pid查询该栏目的所有同级 为了页面可以展示出来二级栏目的名字 */ that.a_id = pub._LinkParm("a_id"); that.c_id = pub._LinkParm("c_id"); that.GoSearchArticle(); // 查询文章 that.go_art_column_one(); // 文章对应的一级栏目 // that.GoColumnOne(); // 查询所有一级栏目 that.go_art_column_two(); // 文章对应的二级栏目 } else { // 新建 // that.GoColumnOne(); // 查询一级 }
that.GoColumnTree(); }, methods: { // 立即创建 onSubmit(formName) { const that = this; var edit_con = Base64.encode(editor.html()); console.log("创建", edit_con); that.art_form.ueditor_text = edit_con;
that.$refs[formName].validate(valid => { if (valid) { // 执行函数 // that.loading=true console.log(that.page_fg); if (that.page_fg) { var _obj = that.operate_data(); if (_obj.style_id == "" && that.art_form.is_rich == "2") { that.$message({ message: "选择样式！", type: "info", duration: 3000 }); } else if ( _obj.column_one_id.length == 0 && _obj.column_two_id.length == 0 ) { that.$message({ message: "选择所属栏目！", type: "info", duration: 3000 }); } else { var op_data = { that: that, _url: pub._url, ur: pub._DetailApi.edit_artcle, // 具体接口 cbk: that.cb_insert_artcle, // 回调 data: _obj }; console.log("编辑保存参数", op_data, that.art_form); pub._InitAjax(op_data); that.loading = true; } } else { var _obj = that.operate_data(); console.log(); if (_obj.style_id == "" && that.art_form.is_rich == "2") { that.$message({ message: "选择样式！", type: "info", duration: 3000 }); } else if ( _obj.column_one_id.length == 0 && _obj.column_two_id.length == 0 ) { that.$message({ message: "选择所属栏目！", type: "info", duration: 3000 }); } else { var op_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_article_save, // 具体接口 cbk: that.cb_insert_artcle, // 回调 data: _obj }; console.log("新建保存参数", op_data, that.art_form); pub._InitAjax(op_data); } } } else { that.$message({ message: "请填写文章名字！", type: "info", duration: 3000 }); return false; } }); }, cb_insert_artcle(res) { const that = this; console.log("数据返回", res); that.loading = false; that.$message({ message: res.stateMsg, type: "success", duration: 2000 }); setTimeout(function() { window.history.go(-1); }, 2500); },
operate_data() { const that = this; // console.log('树形选中节点',this.$refs.columntree.getCheckedNodes());
var obj = { article_id: that.art_form.article_id ? that.art_form.article_id : "", article_name: that.art_form.article_name, // 文章名字 style_id: that.art_form.style_id, // 样式id article_url: that.art_form.article_url, // 文章跳转链接 update_time: that.art_form.update_time, // 更新时间 release_time: that.art_form.release_time, // 发布时间 show_status: that.art_form.show_status, // 是否显示 recommend_status: that.art_form.recommend_status, // 是否推荐 stick_status: that.art_form.stick_status, // 是否置顶 publisher: that.art_form.publisher, // 发布人 article_clicks: that.art_form.article_clicks, // 访问量 article_describe: that.art_form.article_describe, // 描述 column_one_id: that.art_form.column_one_id, // 选中一级栏目数组 column_two_id: that.art_form.column_two_id, // 选中二级栏目数组
additional_cover: that.art_form.additional_cover, // 封面 additional_thumbnail: that.art_form.additional_thumbnail, // 封面 additional_background: that.art_form.additional_background, // 封面 additional_bannar: that.art_form.additional_bannar, // 封面
article_keyword: that.art_form.article_keyword, // 关键词 article_labels: that.art_form.article_labels, // 标签 article_picture: [], article_vedio: [], article_file: [], article_text: that.art_form.article_text, // 正文 ueditor_text: that.art_form.ueditor_text // 富文本 }; console.log(that.art_form);
// 修改标签与关键字格式 obj.article_keyword = obj.article_keyword != "" ? obj.article_keyword.join(",") : ""; obj.article_labels = obj.article_labels != "" ? obj.article_labels.join(",") : "";
var pi_arr = []; for (var pi = 0; pi < that.art_form.article_picture.length; pi++) { if (that.art_form.article_picture[pi].file_img != "") { pi_arr.push(that.art_form.article_picture[pi].file_img); } } for (var ip = 0; ip < pi_arr.length; ip++) { if (pi_arr.indexOf(pi_arr[ip]) == ip) { obj.article_picture.push(pi_arr[ip]); } }
// for (var pi = 0; pi < that.art_form.article_picture.length; pi++) { // if (that.art_form.article_picture[pi].file_img != "") { // if(obj.article_picture.indexOf(that.art_form.article_picture[pi].file_img) == pi){ // obj.article_picture.push(that.art_form.article_picture[pi].file_img); // } // } // }
var vi_arr = []; for (var vi = 0; vi < that.art_form.article_vedio.length; vi++) { if (that.art_form.article_vedio[vi].file_img != "") { vi_arr.push(that.art_form.article_vedio[vi].file_img); } } for (var iv = 0; iv < vi_arr.length; iv++) { if (vi_arr.indexOf(vi_arr[iv]) == iv) { obj.article_vedio.push(vi_arr[iv]); } }
var fi_arr = []; for (var fi = 0; fi < that.art_form.article_file.length; fi++) { if (that.art_form.article_file[fi].file_url == "") { } else { fi_arr.push(that.art_form.article_file[fi].file_url); } } for (var ifl = 0; ifl < fi_arr.length; ifl++) { if (fi_arr.indexOf(fi_arr[ifl]) == ifl) { obj.article_file.push(fi_arr[ifl]); } } return obj; },
/** * 编辑文章的查询信息的返回 * @param {*} res */ cb_api_find_article_msg(res) { console.log("查询所需要编辑文章的信息", res); const that = this; if (res.stateCode == "200") { that.art_form.article_id = res.data.article_id; // 文章id that.art_form.article_name = res.data.article_name; // 文章名字 that.art_form.style_name = res.data.style_name; // 样式名字 that.art_form.style_id = res.data.style_id; // 样式id that.art_form.article_url = res.data.article_url; // 文章跳转链接 that.art_form.update_time = res.data.update_time; // 更新时间 that.art_form.release_time = res.data.release_time; // 发布时间 that.art_form.show_status = res.data.show_status; // 是否显示 that.art_form.recommend_status = res.data.recommend_status; // 是否推荐 that.art_form.stick_status = res.data.stick_status; // 是否置顶 that.art_form.publisher = res.data.publisher; // 发布人 that.art_form.article_clicks = res.data.article_clicks; // 访问量 that.art_form.article_keyword = res.data.article_keyword != "" ? res.data.article_keyword.split(",") : []; // 关键词 that.art_form.article_labels = res.data.article_labels != "" ? res.data.article_labels.split(",") : []; // 标签 that.art_form.article_describe = res.data.article_describe; // 描述 that.art_form.additional_cover = res.data.additional_cover; // 封面 that.art_form.additional_thumbnail = res.data.additional_thumbnail; // 封面 that.art_form.additional_background = res.data.additional_background; // 封面 that.art_form.additional_bannar = res.data.additional_bannar; // 封面
that.art_form.article_text = res.data.article_text; // 正文 that.art_form.article_picture = []; if (res.data.article_picture.length == 0) { that.art_form.article_picture.push({ file_img: "", file_id: "" }); } else { for (var pi = 0; pi < res.data.article_picture.length; pi++) { that.art_form.article_picture.push({ file_img: res.data.article_picture[pi].file_img, file_id: res.data.article_picture[pi].file_id }); } } // 文章图片 that.art_form.article_vedio = []; if (res.data.article_vedio.length == 0) { that.art_form.article_vedio.push({ file_img: "", file_id: "" }); } else { for (var vi = 0; vi < res.data.article_vedio.length; vi++) { that.art_form.article_vedio.push({ file_img: res.data.article_vedio[vi].file_img, file_id: res.data.article_vedio[vi].file_id }); } } // 文章视频 that.art_form.article_file = []; if (res.data.article_file.length == 0) { that.art_form.article_file.push({ file_url: "", file_id: "" }); } else { for (var fi = 0; fi < res.data.article_file.length; fi++) { that.art_form.article_file.push({ file_url: res.data.article_file[fi].file_url, file_id: res.data.article_file[fi].file_id }); } } // 文章附件 that.art_form.ueditor_text = Base64.decode(res.data.ueditor_text); // 转码富文本 editor.html(that.art_form.ueditor_text); // 赋值富文本 } else { that.$message({ message: res.stateMsg ? res.stateMsg : res.msg, type: "info", duration: 3000 }); } },
/** * 资源列表 */ GoResource() { const that = this; var resourse_type, // img video sys_type, // 系统或者用户 resourse_page_num, // 页码 resourse_page_size; // 每页数量 that.video_arr = []; if (that.addVisibleVideo) { console.log("视频弹框"); // 视频列表 resourse_type = "vedio"; that.video_act = that.video_act == "system_data" ? "custom_data" : "system_data"; sys_type = that.video_act; // resourse_page_num = that.video_page_num; // resourse_page_size = that.video_page_size; // 每页条数 resourse_page_num = 1; resourse_page_size = 99999; // 每页条数 var parm_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_explorer_list, // 具体接口 cbk: that.cb_module_explorer_list, // 回调 data: { explorer_type: resourse_type, system_type: sys_type, pageNum: resourse_page_num, pageSize: resourse_page_size } // 形参 }; console.log("执行视频列表请求", parm_data); pub._InitAjax(parm_data); } else if (that.coverVisable) { console.log("选择封面"); resourse_type = "img"; that.cover_act = that.cover_act == "system_data" ? "custom_data" : "system_data"; sys_type = that.cover_act; resourse_page_num = 1; resourse_page_size = 99999; // 每页条数 var parm_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_explorer_list, // 具体接口 cbk: that.cb_module_explorer_list, // 回调 data: { explorer_type: resourse_type, system_type: sys_type, pageNum: resourse_page_num, pageSize: resourse_page_size } // 形参 }; console.log("执行封面列表请求", parm_data); pub._InitAjax(parm_data); } else if (that.addVisibleDoc) { console.log("附件"); resourse_type = "attachment"; sys_type = "custom_data"; resourse_page_num = 1; resourse_page_size = 99999; // 每页条数 var parm_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_explorer_list, // 具体接口 cbk: that.cb_module_explorer_list, // 回调 data: { explorer_type: resourse_type, system_type: sys_type, pageNum: resourse_page_num, pageSize: resourse_page_size } // 形参 }; console.log("执行附件列表请求", parm_data); pub._InitAjax(parm_data); } }, /** * 资源回调 * @param {*} res */ cb_module_explorer_list(res) { console.log("资源回调", res); const that = this; if (res.code == "0") { if (that.addVisibleVideo) { // 视频 that.search_video_name = ""; that.video_page = res.page; // 中转后台返回参数 在滚动加载时做判断 看看发送的参数是否超过最大页码数 that.video_arr = res.page.list; for (var n = 0; n < that.video_arr.length; n++) { that.$set(that.video_arr[n], "pan_show", false); that.$set(that.video_arr[n], "sel", false); } console.log("视频列表", that.video_arr); } else if (that.coverVisable) { // tu pain that.search_cover_name = ""; that.cover_arr = res.page.list; for (var n = 0; n < that.cover_arr.length; n++) { that.$set(that.cover_arr[n], "pan_show", false); that.$set(that.cover_arr[n], "sel", false); } that.cover_arr = JSON.parse(JSON.stringify(that.cover_arr)); console.log("封面列表", that.cover_arr); } else if (that.addVisibleDoc) { // 附件 that.search_doc_name = ""; that.doc_arr = res.page.list; for (var n = 0; n < that.doc_arr.length; n++) { that.$set(that.doc_arr[n], "pan_show", false); that.$set(that.doc_arr[n], "sel", false); } that.doc_arr = JSON.parse(JSON.stringify(that.doc_arr)); console.log("附件列表", that.doc_arr); } } else { that.$message({ message: res.msg, type: "info", duration: 3000 }); } },
/** * 样式选择 相关函数 */ GoStylePannel() { const that = this; that.style_visible_out = true; var op_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_style_list, // 具体接口 cbk: that.cb_module_style_list, // 回调 data: { style_status: "style_use", // 可用 pageNum: that.style_page_num, pageSize: that.style_page_size, style_type: "style_article" // 文章样式 } // 形参 }; console.log("文章样式参数", op_data); pub._InitAjax(op_data); },
cb_module_style_list(res) { console.log("样式选择的回调", res); const that = this; if (res.code == "0") { that.style_obj = res.page; that.style_arr = res.page.list; // 自定义一些属性 在鼠标事件使用 for (var i = 0; i < that.style_arr.length; i++) { that.$set(that.style_arr[i], "pan_show", false); that.$set(that.style_arr[i], "sel", false); } } else { that.$message({ message: res.msg, type: "info", duration: 3000 }); } }, /** * 样式选择的 鼠标移入移出事件 * @param {*} id style_id */ MouseMoveStyle(id) { // console.log("鼠标", id); const that = this; if (that.style_visible_out) { for (var i = 0; i < that.style_arr.length; i++) { if (that.style_arr[i].style_id == id) { that.$set( that.style_arr[i], "pan_show", !that.style_arr[i].pan_show ); } } } }, /** * 选中样式 * @param {*} id */ MouseSelectStyle(id) { const that = this; console.log("选中样式"); if (that.style_visible_out) { for (var i = 0; i < that.style_arr.length; i++) { if (that.style_arr[i].style_id == id) { that.$set(that.style_arr[i], "sel", !that.style_arr[i].sel); if (that.style_arr[i].sel) { that.art_form.style_name = that.style_arr[i].style_name; that.art_form.style_id = that.style_arr[i].style_id; } } else { that.$set(that.style_arr[i], "sel", false); } } } }, /** * 预览样式图片 * @param {*} url 图片的地址 */ GoStylePreview(url) { const that = this; that.style_preview_img = url; that.style_visible_inner = true; },
// 样式事件结束 // 查询文章相关事件 /** * 查询编辑文章 */ GoSearchArticle() { const that = this; var op_data = { that: that, _url: pub._url, ur: pub._DetailApi.api_find_article_msg, // 具体接口 cbk: that.cb_api_find_article_msg, // 回调 data: { article_id: that.a_id, column_id: that.c_id } // 形参 }; console.log("查询文章参数", op_data); pub._InitAjax(op_data); },
/** * 关键字 标签事件 开始 */
/** * 删除关键词 * @param {*} tag 关键词 */ GoArticleKeywordClose(tag) { const that = this; that.art_form.article_keyword.splice( that.art_form.article_keyword.indexOf(tag), 1 ); }, /** * 新建关键词的确认事件 回车可用 */ GoArtKeyConfirm() { const that = this; let inputValue = that.art_form.article_keyword_input_value; //新建关键词输入框的赋值 if (inputValue) { // 新建关键词放入关键词数组 判断是否重复 if (that.art_form.article_keyword.indexOf(inputValue) < 0) { if (that.art_form.article_keyword.length < 3) { that.art_form.article_keyword.push(inputValue); } else { that.$message({ message: "关键词最多有三个！", type: "info", duration: 3000 }); } } else { that.$message({ message: "关键词已使用！", type: "info", duration: 3000 }); } } that.art_form.article_keyword_input_visible = false; // 新建关键词的输入框隐藏 that.art_form.article_keyword_input_value = ""; // 新建关键词的输入框清空 }, /** * 关键字新增按钮 */ GoArtKeyIptShow() { const that = this; that.art_form.article_keyword_input_visible = true; that.$nextTick(_ => { that.$refs.saveArticleKeys.$refs.input.focus(); }); },
/** * 删除标签 * @param {*} tag 标签 */ GoArticleLabelsClose(tag) { const that = this; that.art_form.article_labels.splice( that.art_form.article_labels.indexOf(tag), 1 ); }, /** * 新建标签的确认事件 回车可用 */ GoArtLabelsConfirm() { const that = this; let inputValue = that.art_form.article_labels_input_value; //新建关键词输入框的赋值 if (inputValue) { // 新建关键词放入关键词数组 判断是否重复 if (that.art_form.article_labels.indexOf(inputValue) < 0) { if (that.art_form.article_labels.length < 3) { that.art_form.article_labels.push(inputValue); } else { that.$message({ message: "标签最多有三个！", type: "info", duration: 3000 }); } } else { that.$message({ message: "标签已使用！", type: "info", duration: 3000 }); } } that.art_form.article_labels_input_visible = false; // 新建关键词的输入框隐藏 that.art_form.article_labels_input_value = ""; // 新建关键词的输入框清空 },
/** * 标签新增按钮 */ GoArtLabelsIptShow() { const that = this; that.art_form.article_labels_input_visible = true; that.$nextTick(_ => { that.$refs.saveArticleLabels.$refs.input.focus(); }); }, // 关键字 标签事件结束 GoBack() { window.history.go(-1); }, GoColumnList() { window.location.href = "./ma_cloumn.html"; },
/** * 选择栏目的相关事件 */ /** * 查询文章所属二级栏目 */ go_art_column_two() { const that = this; var op_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_article_column_list, // 具体接口 cbk: that.cb_module_article_column_list_two, // 回调 data: { article_id: that.a_id, column_type: "column_2" } // 形参 }; console.log("文章对应二级栏目的参数", op_data); pub._InitAjax(op_data); }, /** * 文章对应二级栏目的回调 * @param {*} res */ cb_module_article_column_list_two(res) { console.log("文章对应的二级栏目", res); const that = this; if (res.stateCode == "200") { // 设置文章所属一级栏目 that.art_form.column_two_id = []; that.tree_two = []; // 树形控件 二级栏目 if (res.data.length) { for (var i = 0; i < res.data.length; i++) { that.art_form.column_two_id.push(res.data[i].column_id); that.tree_two.push(res.data[i].column_id); } // 查询文章对应的二级栏目 然后使用第一个二级栏目的pid查询该栏目的所有同级 为了页面可以展示出来二级栏目的名字 // var op_data = { // that: that, // _url: pub._url, // ur: pub._DetailApi.module_column_find_list, // 具体接口 // cbk: that.cb_column_two_parent, // 回调 // data: { // column_type: "column_2", // column_pid: res.data[0].column_pid // } // 形参 // }; // console.log("查询第一个二级的同级栏目的参数", op_data); // pub._InitAjax(op_data); } else { // that.GoDefaultColumnTwo(); } } else { that.$message({ message: res.stateMsg, type: "info", duration: 3000 }); } },
/** * 查询文章所属二级栏目的第一个二级栏目父级的回调 */ cb_column_two_parent(res) { console.log("第一个二级栏目父级的回调", res); const that = this; if (res.stateCode == "200") { that.art_form.column_two_arr = res.data; } else { that.$message({ message: res.stateMsg, type: "info", duration: 3000 }); } },
/** * 查询文章所属一级栏目 */ go_art_column_one() { const that = this; var op_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_article_column_list, // 具体接口 cbk: that.cb_module_article_column_list_one, // 回调 data: { article_id: that.a_id, column_type: "column_1" } // 形参 }; console.log("文章对应一级栏目的参数", op_data); pub._InitAjax(op_data); }, /** * 文章对应一级栏目的回调 * @param {*} res */ cb_module_article_column_list_one(res) { console.log("文章对应的一级栏目", res); const that = this; if (res.stateCode == "200") { // 设置文章所属一级栏目 that.art_form.column_one_id = []; that.tree_one = []; // 树形控件一级栏目 if (res.data.length) { for (var i = 0; i < res.data.length; i++) { if (res.data[i].column_type == "column_1") { that.art_form.column_one_id.push(res.data[i].column_id); that.tree_one.push(res.data[i].column_id); } } } } else { that.$message({ message: res.stateMsg, type: "info", duration: 3000 }); } },
/** * 查询一级栏目 */ // GoColumnOne() { // const that = this; // var op_data = { // that: that, // _url: pub._url, // ur: pub._DetailApi.module_column_find_list, // 具体接口 // cbk: that.cb_module_column_find_list, // 回调 // data: { // column_type: "column_1" // } // 形参 // }; // // console.log("查询一级栏目列表", op_data); // pub._InitAjax(op_data); // },
/** * 查询一级栏目的回调 * @param {*} res */ // cb_module_column_find_list(res) { // console.log("查询一级栏目回调", res); // const that = this; // if (res.stateCode == "200") { // that.art_form.column_one_arr = res.data; // if (!that.page_fg) { // //新建的时候默认执行查询第一个栏目的二级栏目 // that.GoDefaultColumnTwo(); // } // } else { // that.$message({ // message: res.stateMsg, // type: "info", // duration: 3000 // }); // } // }, /** * 一级栏目的选中事件 * 一级栏目的id 就是 pid * @param {*} el 所有选中的一级栏目 */ // GoColumnTwo(el) { // console.log(el); // const that = this; // var one_len = el.length - 1; // var c_id = el[one_len];
// var c_pid; // for (var i = 0; i < that.art_form.column_one_arr.length; i++) { // if (c_id == that.art_form.column_one_arr[i].column_id) { // c_pid = that.art_form.column_one_arr[i].column_pid; // } // }
// var op_data = { // that: that, // _url: pub._url, // ur: pub._DetailApi.module_column_find_list, // 具体接口 // cbk: that.cb_module_column_find_list_two, // 回调 // data: { // column_type: "column_2", // column_pid: c_pid // } // 形参 // }; // console.log("查询二级栏目参数", op_data); // pub._InitAjax(op_data); // }, /** * 通过一级查询二级栏目的回调 * @param {*} res */ // cb_module_column_find_list_two(res) { // console.log("二级栏目回调", res); // const that = this; // if (res.stateCode == "200") { // that.art_form.column_two_arr = res.data; // } else { // that.$message({ // message: res.stateMsg, // type: "info", // duration: 3000 // }); // } // }, /** * 二级栏目的选择事件 * @param {*} el */ GoColumnTwoChange(el) { // console.log(el); }, GoDefaultColumnTwo() { const that = this; // var op_data = { // that: that, // _url: pub._url, // ur: pub._DetailApi.module_column_find_list, // 具体接口 // cbk: that.cb_module_column_find_list_two, // 回调 // data: { // column_type: "column_2", // column_pid: that.art_form.column_one_arr[0].column_pid // } // 形参 // }; // console.log("新建状态下默认查询二级栏目参数", op_data); // pub._InitAjax(op_data); // setTimeout(function(){ // var op_data = { // that: that, // _url: pub._url, // ur: pub._DetailApi.module_column_find_list, // 具体接口 // cbk: that.cb_module_column_find_list_two, // 回调 // data: { // column_type: "column_2", // column_pid: that.art_form.column_one_arr[0].column_pid // } // 形参 // }; // console.log("新建状态下默认查询二级栏目参数", op_data); // pub._InitAjax(op_data); // },2000) }, // 选择栏目相关事件结束 // 封面事件 /** * 封面弹框的左侧的上下切换事件 * @param {*} tab * @param {*} event */ GoCoverTabHandleClick(tab, event) { // console.log(tab, event) // console.log(tab.name); const that = this; if (tab.name == "system_data") { that.GoResource(); } },
/** * 输入框搜索封面 */ GoIptSearchCover() { const that = this; var parm_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_explorer_list, // 具体接口 cbk: that.cb_module_explorer_list, // 回调 data: { explorer_type: "img", explorer_name: that.search_cover_name, pageNum: "1", pageSize: "99999" } // 形参 }; console.log("搜索封面参数", parm_data); pub._InitAjax(parm_data); },
/** * 封面的鼠标事件 * @param {*} id 资源id */ MouseMoveCover(id) { const that = this; if (that.coverVisable) { for (var i = 0; i < that.cover_arr.length; i++) { if (that.cover_arr[i].explorer_id == id) { that.$set( that.cover_arr[i], "pan_show", !that.cover_arr[i].pan_show ); } } } }, /** * 选择封面事件 * @param {*} id */ MouseSelectCover(id) { const that = this; console.log("选中照片"); if (that.coverVisable) { for (var i = 0; i < that.cover_arr.length; i++) { if (that.cover_arr[i].explorer_id == id) { that.$set(that.cover_arr[i], "sel", !that.cover_arr[i].sel); if (that.cover_arr[i].sel) { if (that.cover_fg == -1) { // 封面 console.log("设置封面"); that.art_form.additional_cover = that.cover_arr[i].explorer_path; } else if (that.cover_fg == -2) { console.log("设置缩略"); that.art_form.additional_thumbnail = that.cover_arr[i].explorer_path; } else if (that.cover_fg == -3) { console.log("设置背景"); that.art_form.additional_background = that.cover_arr[i].explorer_path; } else if (that.cover_fg == -4) { console.log("设置横幅"); that.art_form.additional_bannar = that.cover_arr[i].explorer_path; } else { console.log("设置图片"); console.log(that.cover_fg); that.art_form.article_picture[that.cover_fg].file_img = that.cover_arr[i].explorer_path; } } else { // if (that.cover_fg < 0) { // // 封面 // console.log("设置封面"); // that.art_form.additional_cover = ""; // } else { // // 选择图片 // console.log("设置图片"); // that.art_form.article_picture[that.cover_fg].file_img = ""; // } if (that.cover_fg == -1) { // 封面 console.log("设置封面"); that.art_form.additional_cover = ""; } else if (that.cover_fg == -2) { console.log("设置缩略"); that.art_form.additional_thumbnail = ""; } else if (that.cover_fg == -3) { console.log("设置背景"); that.art_form.additional_background = ""; } else if (that.cover_fg == -4) { console.log("设置横幅"); that.art_form.additional_bannar = ""; } else { console.log("设置图片"); console.log(that.cover_fg); that.art_form.article_picture[that.cover_fg].file_img = ""; } } } else { that.$set(that.cover_arr[i], "sel", false); } } } },
/** * 上传封面的检查 * @param {*} file */ goCoverBeforeUpoad(file) { const isJPG = file.type === "image/jpeg"; const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) { this.$message.error("上传头像图片只能是 jpg 格式!"); } if (!isLt2M) { this.$message.error("上传头像图片大小不能超过 2MB!"); } return isJPG && isLt2M; // const isJPG = file.type === "image/jpeg"; // const isGIF = file.type === "image/gif"; // const isPNG = file.type === "image/png"; // const isBMP = file.type === "image/bmp"; // const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG && !isGIF && !isPNG && !isBMP) { // this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!"); // } // if (!isLt2M) { // this.common.errorTip("上传图片大小不能超过 2MB!"); // } // return (isJPG || isBMP || isGIF || isPNG) && isLt2M; }, /** * 预览封面 * @param {*} file */ goPreviewCover(file) { console.log("预览封面", file); this.dialogImageUrlLookCover = file.url; this.dialogVisibleLookCover = true; },
/** * 删除封面 * @param {*} file * @param {*} fileList */ goRemoveCover(file, fileList) { console.log("删除封面上传图片"); console.log(file, fileList); },
/** * 封面上传图片的成功 同时设置封面链接 * @param {*} res * @param {*} file */ goSuccessCover(res, file) { console.log("上传成功", res, file); const that = this; // this.imageUrl = URL.createObjectURL(file.raw); // that.art_form.article_img = res; if (that.cover_fg < 0) { // 封面 console.log("设置封面"); that.art_form.additional_cover = res; } else { // 选择图片 console.log("设置图片"); that.art_form.article_picture[that.cover_fg].file_img = res; } },
/** * 封面图片的预览 * @param {*} src */ GoCoverGellaryLook(src) { console.log("图片库预览链接", src); const that = this; that.photo_look_cover_url = src; that.photo_look_cover = true; },
// 封面事件结束 // 图片数组事件开始 /** * 新增图片 * @param {*} idx 图片数据下标 */ GoSelPicture(idx) { const that = this; that.GoResource(); that.coverVisable = true; that.cover_fg = idx; },
/** * 新加图片的条目 */ AddPictureItem() { const that = this; that.art_form.article_picture.push({ file_img: "" }); },
/** * 删除 图片条目 * @param {*} idx */ DelPictureItem(idx) { // this.art_form.article_picture.splice(idx, 1); const that = this; console.log( "删除图片", that.art_form.article_picture.length, that.art_form.article_picture ); if (that.art_form.article_picture.length == "1") { that.art_form.article_picture[0].file_id = ""; that.art_form.article_picture[0].file_img = ""; } else { this.art_form.article_picture.splice(idx, 1); } }, // 图片数组事件结束 // 视频事件开始 /** * 视频 * 资源管理的左侧的用户上传与图片的切换 * @param {*} tab * @param {*} event */ VideoTabHandleClick(tab, event) { console.log(tab.name, event, "点击视频的左侧");
const that = this; if (tab.name == "system_data") { that.GoResource(); } },
/** * 预览视频 * @param {*} file */ handleVideoCardPreview(file) { console.log("预览视频", file); this.dialog_video_look_Url = file.response; this.dialogVisible_look = true; },
/** * 视频的上传成功 * @param {*} res 链接 * @param {*} file */ handleVideoSuccess(res, file) { console.log("视频上传成功 设置中转参数"); console.log(res, file); // this.imageUrl = URL.createObjectURL(file.raw); const that = this; that.art_form.article_vedio[that.video_fg].file_img = file.response; },
/** * 删除上传的视频 * @param {*} file * @param {*} fileList */ handleVideoRemove(file, fileList) { console.log("删除文件", file, fileList); }, /** * 判断视频格式 * @param {*} file */ beforeVideoUpload(file) { const isLt100M = file.size / 1024 / 1024 < 100; if ( [ "video/mp4", "video/avi" // "video/wmv", // "video/rmvb", // "video/ogg" ].indexOf(file.type) == -1 ) { this.$message.error("请上传正确的视频格式"); return false; }
if (!isLt100M) { this.$message.error("上传视频大小不能超过100MB哦!"); return false; } },
/** * 视频的鼠标移入移出事件 * @param {*} id 编号id */ mouseMoveVideo(id) { // console.log('鼠标移入',id) var that = this; for (var i = 0; i < that.video_arr.length; i++) { that.$set(that.video_arr[i], "pan_show", false); if (that.video_arr[i].explorer_id == id) { that.$set(that.video_arr[i], "pan_show", !that.video_arr[i].pan_show); } } },
/** * 查询视频 */ GoIptSearchVideo() { const that = this; var parm_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_explorer_list, // 具体接口 cbk: that.cb_module_explorer_list, // 回调 data: { explorer_type: "video", explorer_name: that.search_video_name, pageNum: "1", pageSize: "99999" } // 形参 }; console.log("搜索视频参数", parm_data); pub._InitAjax(parm_data); },
/** * 选择封面 * @param {*} id 编号id */ GoAddVideoCheck(id) { var that = this; for (var i = 0; i < that.video_arr.length; i++) { if (that.video_arr[i].explorer_id == id) { that.$set(that.video_arr[i], "sel", !that.video_arr[i].sel); if (that.video_arr[i].sel) { that.art_form.article_vedio[that.video_fg].file_img = that.video_arr[i].explorer_path; } else { that.art_form.article_vedio[that.video_fg].file_img = ""; } } else { that.$set(that.video_arr[i], "sel", false); } } },
/** * 视频的添加事件 * @param {*} idx 视频数组下标 */ GoSelectVideo(idx) { console.log("显示选择视频的弹框", idx); const that = this; that.video_fg = idx; that.addVisibleVideo = true; }, /** * 视频新增事件 */ AddViewItem() { const that = this; this.art_form.article_vedio.push({ file_img: "" }); }, /** * 删除视频事件 * @param {*} idx 视频数组下标 */ DelViewItem(idx) { const that = this; if (that.art_form.article_vedio.length == 1) { that.art_form.article_vedio[0].file_id = ""; that.art_form.article_vedio[0].file_img = ""; } else { this.art_form.article_vedio.splice(idx, 1); } }, // 视频事件结束 // 附件 事件开始 /** * 附件 * 附件弹框的左侧的切换 * @param {*} tab * @param {*} event */ DocTabHandleClick(tab, event) { const that = this; if (tab.name == "system_data") { console.log("执行附件的系统事件"); that.GoResource(); } },
/** * 添加附件弹框 * @param {*} idx 下标 */ GoSelectDoc(idx) { const that = this; that.doc_fg = idx; that.addVisibleDoc = true; }, /** * 添加 附件条目 */ AddDocItem() { this.art_form.article_file.push({ file_url: "" }); }, /** * 删除 附件条目 * @param {*} index 数组下标 */ DelDocItem(index) { const that = this; if (that.art_form.article_file.length == 1) { that.art_form.article_file[0].file_id = ""; that.art_form.article_file[0].file_img = ""; } else { this.art_form.article_file.splice(index, 1); } },
/** * 附件 上传成功 * @param {*} res * @param {*} file */ goSuccessDoc(res, file) { // 需要建立一个数组 存放已经上传的文件列表 // console.log("附件上传成功"); // console.log(res, file); const that = this; that.art_form.article_file[that.doc_fg].file_url = res; }, /** * 删除附件文件 * @param {*} file * @param {*} fileList */ goRemoveDoc(file, fileList) { console.log("删除文件", file, fileList); }, /** * 上传附件检查 * @param {*} file */ goUploadDoc(file) { var FileExt = file.name.replace(/.+\./, ""); if ( [ "doc", "docx", "xls", "txt", "xlsx", "ppt", "pptx", "pdf", "zip", "rar" ].indexOf(FileExt.toLowerCase()) === -1 ) { this.$message({ type: "warning", message: "请上传后缀名为[doc,docx,xls,xlsx,ppt,pptx,pdf,zip,rar]的附件！" }); return false; } const isLt100M = file.size / 1024 / 1024 < 100; if (!isLt100M) { this.$message.error("上传视频大小不能超过100MB哦!"); return false; } }, /** * 选择附件 * @param {*} id 附件id */ goDocSelItem(id) { const that = this; for (var di = 0; di < that.doc_arr.length; di++) { if (that.doc_arr[di].explorer_id == id) { that.$set(that.doc_arr[di], "sel", !that.doc_arr[di].sel); if (that.doc_arr[di].sel) { that.art_form.article_file[that.doc_fg].file_url = that.doc_arr[di].explorer_path; } else { that.art_form.article_file[that.doc_fg].file_url = ""; } } else { that.$set(that.doc_arr[di], "sel", false); } } }, /** * 搜索附件 */ GoIptSearchDoc() { const that = this; var parm_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_explorer_list, // 具体接口 cbk: that.cb_module_explorer_list, // 回调 data: { explorer_type: "attachment", explorer_name: that.search_doc_name, pageNum: "1", pageSize: "99999" } // 形参 }; console.log("搜索附件参数", parm_data); pub._InitAjax(parm_data); }, // 附件事件结束
/** * * @param {*} sta 标注删除的哪一个字段 */ GoDelCover(sta) { const that = this; switch (sta) { case "additional_cover": // 封面 that.art_form.additional_cover = ""; break; case "additional_thumbnail": // 缩略图 that.art_form.additional_thumbnail = ""; break; case "additional_background": // 背景 that.art_form.additional_background = ""; break; case "additional_bannar": // 横幅 that.art_form.additional_bannar = ""; break; } },
/** * 一级栏目的展开 * @param {*} idx 下标 * @param {*} c_id 栏目column_id */ GoMoreShowChild(idx, c_id) { const that = this; that.$set( that.tree_arr[idx], "child_show", !that.tree_arr[idx].child_show ); },
/** * 栏目树形列表回调 * @param {*} res */ cb_module_column_find_list_tree(res) { const that = this; console.log("栏目树形列表回调", res); if (res.stateCode == "200") { that.tree_arr = []; if (that.page_fg) { // 编辑 双层循环设置 已知的一级与二级栏目 console.log("编辑对应的二级栏目", that.tree_two); for (var x = 0; x < res.data.length; x++) { that.$set(res.data[x], "sel", false); that.$set(res.data[x], "child_show", false); for (var y = 0; y < that.tree_one.length; y++) { if (that.tree_one[y] == res.data[x].column_id) { that.$set(res.data[x], "sel", true); } }
for (let w = 0; w < res.data[x].children.length; w++) { that.$set(res.data[x].children[w], "sel", false); for (var z = 0; z < that.tree_two.length; z++) { if (res.data[x].children[w].column_id == that.tree_two[z]) { that.$set(res.data[x].children[w], "sel", true); } else { } } } } } else { // 新建的状态下 for (var n = 0; n < res.data.length; n++) { that.$set(res.data[n], "sel", false); that.$set(res.data[n], "child_show", false); if (res.data[n].children.length) { for (var c = 0; c < res.data[c].children.length; c++) { that.$set(res.data[n].children[c], "sel", false); } } } }
// 数据 for (var i = 0; i < res.data.length; i++) { that.tree_arr.push(res.data[i]); // 页面大树形数据数组 that.default_arr.push(res.data[i]); // 编辑设置默认栏目使用 } } },
/** * 点击一级栏目事件 * @param {*} idx 下标 * @param {*} c_id 栏目column_id */ GoTreeParent(idx, c_id) { const that = this; console.log("点击一级栏目", that.tree_arr[idx]); that.$set(that.tree_arr[idx], "sel", !that.tree_arr[idx].sel); if (!that.tree_arr[idx].sel) { //放弃一级栏目 同时设置所属二级为不选中 that.$set(that.tree_arr[idx], "child_show", false); // if (that.tree_arr[idx].children.length) { // for (var c = 0; c < that.tree_arr[idx].children.length; c++) { // that.$set(that.tree_arr[idx].children[c], "sel", false); // // 同时将已经选中的二级栏目从数组中删除 // for (var d = 0; d < that.art_form.column_two_id.length; d++) { // if ( // that.art_form.column_two_id[d] == // that.tree_arr[idx].children[c].column_id // ) { // that.art_form.column_two_id.splice(d, 1); // } // } // } // } that.EditParent(that.tree_arr[idx].sel, c_id); } else { // 保存id that.$set(that.tree_arr[idx], "child_show", true); console.log("保存一级", c_id); that.EditParent(that.tree_arr[idx].sel, c_id); } },
/** * 保存或者删除一级栏目 添加需要去重 * @param {*} fg 状态 true保存 false 删除 * @param {*} id 栏目column_id */ EditParent(fg, id) { const that = this; var flag = false; if (fg) { for (var i = 0; i < that.art_form.column_one_id.length; i++) { if (that.art_form.column_one_id[i] == id) { flag = true; } } if (!flag) { that.art_form.column_one_id.push(id); } } else { for (var di = 0; di < that.art_form.column_one_id.length; di++) { if (that.art_form.column_one_id[di] == id) { that.art_form.column_one_id.splice(di, 1); } } } console.log("编辑一级数组", that.art_form.column_one_id); },
/** * 点击二级栏目的事件 添加需要去重 * @param {*} p_idx 所属一级栏目的下标 * @param {*} idx 点击二级的下标 * @param {*} c_id 栏目column_id */ GoTreeChild(p_idx, idx, c_id) { console.log("点击二级栏目", p_idx, idx, c_id); const that = this; that.$set( that.tree_arr[p_idx].children[idx], "sel", !that.tree_arr[p_idx].children[idx].sel ); if (that.tree_arr[p_idx].children[idx].sel) { console.log("保存二级栏目", c_id); that.EditChild(that.tree_arr[p_idx].children[idx].sel, c_id); } else { that.EditChild(false, c_id); } },
/** * 保存 删除 二级栏目 * @param {*} fg 状态 true保存 false 删除 * @param {*} id 栏目column_id */ EditChild(fg, id) { const that = this; var flag = false; if (fg) { for (var i = 0; i < that.art_form.column_two_id.length; i++) { if (that.art_form.column_two_id[i] == id) { flag = true; } } if (!flag) { that.art_form.column_two_id.push(id); } } else { for (var di = 0; di < that.art_form.column_two_id.length; di++) { if (that.art_form.column_two_id[di] == id) { that.art_form.column_two_id.splice(di, 1); } } } console.log("编辑二级栏目", that.art_form.column_two_id); },
/** * 查询栏目的树形列表 */ GoColumnTree() { const that = this; var op_data = { that: that, _url: pub._url, ur: pub._DetailApi.module_column_find_list_tree, // 具体接口 cbk: that.cb_module_column_find_list_tree, // 回调 data: {} // 形参 }; // console.log(op_data); pub._InitAjax(op_data); } }});
复制代码本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
