初步樹形
圖片
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); } }});
複製程式碼