vue的树形控件

初步树形

图片





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);    }  }});
复制代码


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值