eta_front/src/views/mychart_manage/index.vue

<template>
  <div
    class="mychart_container"
    id="mychart_container"
  >
    <span
      class="slide-icon slide-right"
      @click="slideHandle"
      v-show="isSlideLeft"
    >
      <i class="el-icon-d-arrow-right"></i>
    </span>
    <div class="main-left left" id="left" v-show="!isSlideLeft">
      <span class="slide-icon slide-left" @click="slideHandle">
        <i class="el-icon-d-arrow-left"></i>
      </span>
      <span class="move-btn resize" v-drag id="resize"></span>
      <div class="left-top">
        <span v-permission="permissionBtn.myETAPermission.myChart_selectChart"
            class="add-cont" @click="chooseChartHandle">
          <img
            :src="$icons.choose_blue"
            alt=""
            style="width: 14px; height: 14px"
          />
          <!-- 选择图表 -->{{$t('MyEtaPage.choose_chart_btn')}}
        </span>
        <el-select
          v-model="search_txt"
          v-loadMore="searchLoad"
          :filterable="!search_txt"
          remote
          clearable
          :placeholder="$t('Chart.search_chart_placeholder')"
          style="width: 100%; margin-top: 20px"
          :remote-method="searchHandle"
          @click.native="inputFocusHandle"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-option
            v-for="item in searchOptions"
            :key="item.MyChartId"
            :label="chart_lang==='en'?(item.ChartNameEn||item.ChartName):item.ChartName"
            :value="item.MyChartId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="left-bottom">
        <div class="public-classify" v-if="publicClassifyList.length">
          <h3 
            @click="expandPublic = !expandPublic" 
            class="classify-type"
          > 
            <!-- 公共图库 -->{{$t('MyEtaPage.tab_public')}}
            <span><i :class="{'el-icon-arrow-down':!expandPublic,'el-icon-arrow-up':expandPublic}"></i></span>
          </h3>
         
          <div class="tree-wrap" v-show="expandPublic">
                <el-tree
                    ref="catalogTree"
                    class="catalog-tree other-tree"
                    empty-text="暂无图库"
                    :data="publicClassifyList"
                    node-key="nodeKeyId"
                    :expand-on-click-node="false"
                    @current-change="(data,node)=>{nodeChange(data,node)}"
                    >
                    <div class="custom-tree-node" slot-scope="{ data,node }">
                        <span class="tree-label">{{ data.name }}</span>
                        <div class="right-item right-item-box" >
                            <el-dropdown @command="handleCommand" trigger="click" v-if="isShowDropPublic&&data.MyChartClassifyId">
                            <span class="el-dropdown-link"> 
                                <i class="el-icon-more" style="font-size: 16px;transform: rotate(90deg);cursor: pointer"/>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="{key:'copy'}" :disabled="select_classify_userid === roleId"><!-- 复制 -->{{$t('MyEtaPage.option_op_copy')}}</el-dropdown-item>
                            </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </el-tree>
            </div>
        </div>
        <div class="classify" v-if="classifyList.length">
          <h3 class="classify-type"><!-- 我的图库 -->{{$t('MyEtaPage.tab_my')}}</h3>
          <draggable
            v-model="classifyList"
            class="classify-ul"
            animation="300"
            tag="ul"
            @start="menuDragStart"
            @update="menuDragenter"
            @end="menuDragOver"
          >
            <li
              :class="[
                'classify-item',
                { 'act': item.MyChartClassifyId === select_classify && item.fromPublic === ispublic },
              ]"
              v-for="item in classifyList"
              :key="item.MyChartClassifyId"
              @click="chooseClassify(item)"
            >
              <div>
                <img
                  src="~@/assets/img/data_m/move_ico.png"
                  alt=""
                  class="move"
                  style="width: 14px; height: 14px;margin-right: 5px;"
                />
                {{ item.MyChartClassifyName }}
              </div>
              <div class="right-item right-item-box">
                <el-dropdown v-if="isShowGroupBtn"
                    style="margin-right: 10px" @command="handleCommand" trigger="click">
                  <span class="el-dropdown-link  el-dropdown-link-img">
                     <img src="~@/assets/img/chart_m/Group.png" v-if="item.IsPublic === 0">
                     <img src="~@/assets/img/chart_m/User.png" v-else>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item 
                    :command="{key:'own',IsCompanyPublic:undefined,item}" 
                    :class="item.IsPublic === 0 ? 'el-dropdown-menu-item-chat-act' : ''"
                    class="el-dropdown-menu-item-chat"
                    >
                    <img v-if="item.IsPublic === 0" src="~@/assets/img/chart_m/Group_act.png">
                    <img v-else src="~@/assets/img/chart_m/Group.png">
                    <!-- 仅自己可见 -->{{$t('MyEtaPage.option_view_person')}}</el-dropdown-item>
                    <el-dropdown-item 
                    :command="{key:'public',IsCompanyPublic:undefined,item}" 
                    :class="item.IsPublic === 1 ? 'el-dropdown-menu-item-chat-act' : ''"
                    class="el-dropdown-menu-item-chat"
                    >
                    <img v-if="item.IsPublic === 1" src="~@/assets/img/chart_m/User_act.png">
                    <img v-else src="~@/assets/img/chart_m/User.png">
                    <!-- 所有人可见 -->{{$t('MyEtaPage.option_view_all')}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown @command="handleCommand" trigger="click" v-if="isShowDropMine">
                  <span class="el-dropdown-link"> 
                    <i class="el-icon-more" style="font-size: 16px;transform: rotate(90deg);cursor: pointer"/>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_rename')"
                        :command="{key:'edit'}"><!-- 重命名 -->{{$t('MyEtaPage.option_op_rename')}}</el-dropdown-item>
                    <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_delete')"
                        :command="{key:'del'}"><!-- 删除 -->{{$t('Table.delete_btn')}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </li>
          </draggable>
        </div>
        <div class="noclassify" @click="addClassify" v-permission="permissionBtn.myETAPermission.myChart_classifyOpt_edit">
          <img
            src="~@/assets/img/set_m/add_ico.png"
            alt=""
            style="width: 16px; height: 16px; margin-right: 10px"
          />
          <span><!-- 添加我的分类 -->{{$t('MyEtaPage.add_myclassify_btn')}}</span>
        </div>
      </div>
    </div>
    <div
      class="main-right right"
      id="right"
      :style="isSlideLeft ? 'width:100%' : ``"
    >
      <div class="chart-public-cont" v-if="haveData">
        
        <div class="cont-top">
          <span>{{$t('Chart.total_chart_show',{limit:total})}}</span>
          <span v-if="ispublic === 1"><!-- 分享人 -->{{$t('MyEtaPage.label_share_user')}}: {{ RealName }}</span>
        </div>
        <div
          class="chart-public-list"
          :infinite-scroll-disabled="!haveMove"
          v-infinite-scroll="loadMove"
          infinite-scroll-distance='1'
          infinite-scroll-delay="200"
        >
          <draggable
            v-model="chartList"
            class="drag-cont"
            animation="300"
            @start="dragStartHandler"
            @update="dragenter"
            @end="dragOverHandler"
            :disabled="ispublic===1"
          >
            <el-col
              :span="6"
              v-for="chart in chartList"
              :key="chart.ChartInfoId"
              style="margin-bottom: 20px; padding-right: 20px;min-width: 270px;"
            >
              <el-card class="public-chart-item">
                <div slot="header" class="item-top">
                  <span class="text_oneLine" :style="{'padding-left':chart.IsEnChart?'24px':''}">{{ chart_lang === 'en' ? (chart.ChartNameEn||chart.ChartName) : chart.ChartName }}</span>
                  <img
                    v-if="ispublic === 0"
                    src="~@/assets/img/data_m/move_ico.png"
                    alt=""
                    class="move"
                    style="width: 14px; height: 14px"
                  />
                </div>
                <img
                  :src="([1,11].includes(chart.Source)&&!chart.HaveOperaAuth) ? $icons.lock_big : chart.ChartImage"
                  alt=""
                  class="chart-img"
                  @click="viewChartDetail(chart)"
                />
                <div class="item-bottom">
                  <span class="last-time"
                    ><!-- 创建时间 -->{{$t('Chart.list_chart_time')}}: {{ chart.CreateTime.slice(0,10) }}</span
                  >
                  <div v-if="select_classify_userid === roleId">
                    <span v-permission="permissionBtn.myETAPermission.myChart_move"
                        class="join_txt" @click="removeMyChart(chart)">
                      <i
                        class="el-icon-remove-outline"
                        style="font-size: 14px"
                      ></i>
                      <!-- 移出 -->{{$t('Chart.chart_remove_btn')}}
                    </span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </draggable>
        </div>
      </div>
      <div v-else class="nodata">
        <span v-if="ispublic === 1" class="sharer"><!-- 分享人 -->{{$t('MyEtaPage.label_share_user')}}: {{ RealName }}</span>
        <tableNoData :text="$t('Common.no_chart_msg')"/>
      </div>
    </div>

    <choose-chart
      :isOpenChoose="isChoose"
      @cancel="isChoose = false"
      @addSuccess="addChartBack"
    />

    <pub-dialog
      :isShow="isClassifyDia"
      :title="dia_title"
      :keysArr="dialogKeyArrs"
      :formData="formData"
      :formRules="addRules"
      :selectArr="selectArr"
      @cancel="isClassifyDia = false"
      @ensureCallBack="addClassifyBack"
    />

    <!-- 图表详情弹窗 -->
    <chart-detail
      :isOpenDetail="isOpenDetail"
      :select_classify="select_classify"
      :chart_code="chart_code"
      :allChart="chartArrParams"
      :classifyUserId="select_classify_userid"
      @close="chartCallBack"
      @remove="removeCallBack"
    />

    <!-- 删除确认弹窗 -->
    <ClassifyDeleteCheck 
        :hintDialogShow="hintDialogShow"
        :detailArr="detailArr"
        @close="hintDialogShow=false"
    />
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import { mychartInterface } from '@/api/api.js';
import pubDialog from '@/components/pubDialog.vue';
import chooseChart from './components/chooseChart.vue';
import chartDetail from './components/chartDetailDia.vue';
import ClassifyDeleteCheck from './components/classifyDeleteCheck.vue';
export default {
  name: '',
  components: {
    chooseChart,
    pubDialog,
    draggable,
    chartDetail,
    ClassifyDeleteCheck
},
  directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var init = e.clientX;
        var box = $('#mychart_container')[0];
        let total_wid = box.offsetWidth;
        var left = $('#left')[0];
        var right = $('#right')[0];
        var initWidth = left.offsetWidth;
        document.onmousemove = function (e) {
          var end = e.clientX;
          if (end > 310) {
            var newWidth = end - init + initWidth;
            right.style.width = total_wid - newWidth + 'px';
            left.style.width = newWidth + 'px';
          } else {
            end = 350;
            // 最小宽度300
            left.style.width = 300 + 'px';
          }
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
          e.releaseCapture && e.releaseCapture();
        };
        e.setCapture && e.setCapture();
        return false;
      };
    },
  },
  data() {
    return {
      expandPublic:false,
      RealName:'',
      haveData: true,
      isSlideLeft: false, //收起分类
      search_txt: '',
      searchOptions: [],
      select_classify: 0,
      classifyList: [],
      total: 0,
      page_no: 1,
      page_size: 1200,
      chartList: [], //列表
      isRightClick: false, //右击弹窗
      rightClick_classify: '', //右击的分类
      rightActionArr: [
        {
          title: '编辑',
          key: 'edit',
        },
        {
          title: '删除',
          key: 'del',
        },
      ],
      startIndex: '', //初始位置id
      preIndex: '', //结束位置上一个id
      nextIndex: '', //结束位置下一个id
      /* 选择图表弹窗 */
      isChoose: false,
      /* 添加分类 */
      isClassifyDia: false,
      dia_title: '新增分类',
      dialogKeyArrs: [], //form key
      selectArr: [], //select data
      formData: {
        name: '',
      },
      addRules: {
        name: [
          { required: true, message: /* '分类名称不能为空'  */this.$t('Edb.Valids.common_msg',{label: this.$t('MyEtaPage.label_classify_name')}), trigger: 'blur' },
        ],
        classify: [
          { required: true, message: /* '复制分类不能为空' */this.$t('Edb.Valids.common_msg',{label: this.$t('MyEtaPage.label_classify_name')}), trigger: 'blur' },
        ]
      }, //添加分类规则
      move_id: '', //移动到 当前选中图表

      /* 图表详情弹窗 */
      isOpenDetail: false,
      chart_code: '',//图表code
      chartArrParams: [],//当前选择分类下的所有图表
      startMenuIndex: '', //初始位置id
      preMenuIndex: '', //结束位置上一个id
      nextMenuIndex: '', //结束位置下一个id

      publicClassifyList: [],//公共分类
      ispublic: '',//选中的是公共还是own
      select_classify_userid: 0,//选中图表的创建人id
      haveMove: false,

      hintDialogShow:false,
      detailArr:[]
    };
  },
  computed: {
    /* 登录角色id */
    roleId() {
      let id = Number(localStorage.getItem('AdminId'));
      return id;
    },
    //是否显示公共图库的下拉按钮
    isShowDropPublic(){
        return this.permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_copy')
    },
    //是否显示我的图库的下拉按钮
    isShowDropMine(){
        return this.permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_rename')
            || this.permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_delete')
    },
    //是否显示可见权限
    isShowGroupBtn(){
        return this.permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_show')
    },

    //语言版本
    chart_lang() {
      return this.$store.state.lang
    }
  },
  watch: {
    // 左侧选中分类
    select_classify(newval) {
      if (newval) {
        this.page_no = 1;
        this.chartList = [];
        this.getChartList();
      }
    },

    /*  */
    search_txt(newval) {
      if (newval) {
        const obj = this.searchOptions.find(
          (item) => item.MyChartId === newval
        );

        //所属分类列表 单个高亮左侧
        let classify_arr = obj.MyChartClassifyId.split(',');

        this.page_no = 1;
        this.select_classify = 0;

        if (classify_arr.length === 1) this.select_classify = Number(classify_arr[0]);
        this.getChartList();
      }
    },

    //页码
    page_no() {
      this.getChartList();
    },
  },
  methods: {
    /* 获取分类列表 */
    getClassify() {
      mychartInterface.classifyList().then((res) => {
        if (res.Ret !== 200) return;

        this.classifyList = res.Data ? res.Data.List.map(item => ({
          ...item,
          fromPublic: 0
        })) : [];
        if (!this.classifyList.length) this.haveData = false;

        this.select_classify =
          this.select_classify ||
          (this.classifyList.length
            ? this.classifyList[0].MyChartClassifyId
            : 0);
        this.ispublic =  this.ispublic ||
          (this.classifyList.length
            ? this.classifyList[0].fromPublic
            : '');
        this.select_classify_userid = this.select_classify_userid ||  (this.classifyList.length
            ? this.classifyList[0].AdminId
            : 0);   
      });
    },

    /* 获取公用分类 */
    getPublicClassify() {
      mychartInterface.publicClassify().then((res) => {
        if(res.Ret !== 200) return;
        this.publicClassifyList = res.Data?res.Data.List||[]:[]
        this.publicClassifyList = this.publicClassifyList.map(list=>{
            list.name = list.MenuName
            list.nodeKeyId = 'list' + list.MenuAdminId
            if(list.Items){
                list.children = list.Items.map(item=>{
                    return {
                        ...item,
                        ...{
                            nodeKeyId:'item'+ item.MyChartClassifyId,
                            name:item.MyChartClassifyName
                        }
                    }
                })
            }
            return list
        })
      })
    },

    /* 获取图表 MyChartId用于具体搜索和MyChartClassifyId互斥*/
    getChartList() {
      mychartInterface
        .myList({
          PageSize: this.page_size,
          CurrentIndex: this.page_no,
          MyChartClassifyId: this.select_classify || 0,
          MyChartId: this.search_txt || 0,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.haveData = res.Data ? true : false;
          this.haveMove = res.Data
            ? this.page_no < res.Data.Paging.Pages
            : false;
          this.chartList = res.Data
            ? this.page_no === 1
              ? res.Data.List
              : [...this.chartList, ...res.Data.List]
            : [];
          this.total = res.Data ? res.Data.Paging.Totals : 0;
        });
    },

    /* 加载下页 */
    loadMove() {
      this.page_no++;
    },

     /* 搜索 */
		searchHandle(query) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search)
		},

		searchApi(query,page=1) {
      if(!query) {
        this.searchOptions = [];
        return
      }
      /* 查找列表 */
      mychartInterface
        .mychartSearchByEs({
          Keyword: query,
          CurrentIndex: page
        })
        .then((res) => {
          if (res.Ret !== 200) return
          const { List,Paging } = res.Data;
          this.search_have_more = page < Paging.Pages;
          this.searchOptions = page === 1 ? List : [...this.searchOptions,...List];
        });
		},

		/* 聚焦获取当前检索 */
		inputFocusHandle(e) {
			this.search_page = 1;
			this.current_search = e.target.value;
      if(this.current_search) {
        this.searchApi(this.current_search)
      }else {
        this.searchOptions = [];
      }
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page);
		},
    nodeChange(data,node){
        if(node.level===1){
            this.select_classify = 0
            this.haveData = false
            this.total = 0
            this.page_no = 1
            this.chartList = []
            this.ispublic=''
            return
        }
        this.RealName = data.RealName
        this.chooseClassify({
            MyChartClassifyId:data.MyChartClassifyId,
            fromPublic:1,
            AdminId:data.AdminId
        })
    },
    /* 切换分类 */
    chooseClassify({MyChartClassifyId,fromPublic,AdminId}) {
      if(fromPublic!==1){
        this.$refs.catalogTree&&this.$refs.catalogTree.setCurrentKey(null)
      }
      this.select_classify = MyChartClassifyId;
      this.ispublic = fromPublic;
      this.select_classify_userid = AdminId;
      this.search_txt = '';
    },

    /* 选择图表添加 */
    chooseChartHandle() {
      this.isChoose = true;
    },
    /* 图表添加完成 */
    addChartBack() {
      this.isChoose = false;
      this.getClassify();
      this.getChartList();
    },

    /* 添加分类 */
    addClassify() {
      this.dia_title = /* '新增分类' */this.$t('MyEtaPage.label_add_classify');
      this.dialogKeyArrs = [
        {
          label: /* '分类名称' */this.$t('MyEtaPage.label_classify_name'),
          prop: 'name',
          type: 'input',
          maxlen: 10,
          placeholder: /* '请输入分类名称' */this.$t('MyEtaPage.ph_classify'),
        },
      ];
      this.formData = {
        name: '',
      };
      this.isClassifyDia = true;
    },

    /* 添加分类回调 */
    addClassifyBack(params, title) {
      title === this.$t('MyEtaPage.label_add_classify') &&
        mychartInterface
          .addClassify({
            MyChartClassifyName: params.name,
          })
          .then((res) => {
            if (res.Ret !== 200) return;
            this.$message.success(/* '新增成功' */this.$t('MsgPrompt.add_msg'));
            this.isClassifyDia = false;
            this.getClassify();
          });

      title === this.$t('MyEtaPage.label_rename_classify') &&
        mychartInterface
          .editClassify({
            MyChartClassifyName: params.name,
            MyChartClassifyId: this.select_classify,
          })
          .then((res) => {
            if (res.Ret !== 200) return;
            this.$message.success(/* '编辑成功' */this.$t('MsgPrompt.edit_msg'));
            this.isClassifyDia = false;
            this.getClassify();
            this.getPublicClassify();
          });

      title === this.$t('MyEtaPage.label_copy_classify') &&
        mychartInterface
          .copyMyChart({
            ChartInfoId: this.move_id,
            MyChartClassifyId: params.classify,
          })
          .then((res) => {
            if (res.Ret !== 200) return;
            this.$message.success(/* '复制成功' */this.$t('MsgPrompt.copy_success_msg'));
            this.isClassifyDia = false;
            this.resetStatus();
            this.getClassify();
            this.getChartList();
          });
    },

    resetStatus() {
      this.search_txt = '';
    },

    /*重命名分类  */
    editClassify({ MyChartClassifyName }) {
      this.isClassifyDia = true;
      this.formData = {
        name: MyChartClassifyName,
      };
      this.dialogKeyArrs = [
        {
          label: /* '分类名称' */this.$t('MyEtaPage.label_classify_name'),
          prop: 'name',
          type: 'input',
          maxlen: 10,
          placeholder: /* '请输入分类名称' */this.$t('MyEtaPage.ph_classify'),
        },
      ];
      this.dia_title = /* '重命名分类'  */this.$t('MyEtaPage.label_rename_classify');
    },

    /* 操作 */
    handleCommand({key,IsCompanyPublic,item}) {
      console.log({key,IsCompanyPublic,item});
      key === 'copy' && mychartInterface.copyclassify({
        MyChartClassifyId: this.select_classify
      }).then(res => {
        if(res.Ret !== 200) return;
        this.$message.success(/* '复制成功' */this.$t('MsgPrompt.copy_success_msg'));
        this.getClassify();
      });

      ['edit','del'].includes(key) && this.dealAction(key);

      ['own', 'public'].includes(key) && mychartInterface.setPublic({
        IsPublic: key === 'own' ? 0 : 1,
        MyChartClassifyId: this.select_classify
      }).then(res => {
        if(res.Ret !== 200) return;
        this.$message.success(/* '设置成功' */this.$t('MsgPrompt.set_success_msg'));
        if(key === 'own'){
          item.IsPublic=0
          item.IsCompanyPublic=0
        }else{
          item.IsPublic=1
        }
      })

      key==='auth' && mychartInterface.setClassifyAuthToUser({
          MyChartClassifyId:this.select_classify,
          IsCompanyPublic:IsCompanyPublic
        }).then(res=>{
          if(res.Ret !== 200) return;
          this.$message.success(/* '操作成功' */this.$t('MsgPrompt.operate_success_msg'));
          item.IsCompanyPublic=IsCompanyPublic
        })
      
    },

    /* 编辑 删除*/
    dealAction(key) {
      key === 'del' && this.handleDeleteClassify()
      const obj = this.classifyList.find(
        (x) => x.MyChartClassifyId === this.select_classify
      );
      key === 'edit' && this.editClassify(obj);
    },
    async handleDeleteClassify(){
        const res = await mychartInterface.getFrameNode({
            MyChartClassifyId:this.select_classify
        })
        if(res.Ret!==200) return
        this.detailArr = res.Data||[]
        if(this.detailArr.length){
            this.hintDialogShow = true
            return
        }
        this.$confirm(
          /* '若删除该分类，则分类下关联的所有图表将被全部删除, 是否继续?' */this.$t('Chart.OptMsg.del_classify_chart_msg'),
          /* '提示' */this.$t('Dialog.warn_tit'),
          {
            type: 'warning',
          }
        )
          .then(() => {
            mychartInterface
              .delClassify({
                MyChartClassifyId: this.select_classify,
              })
              .then((res) => {
                if (res.Ret !== 200) return;
                this.$message.success(/* '删除成功' */ this.$t('MsgPrompt.delete_msg'));
                this.getClassify();
                this.getPublicClassify();
              });
          })
          .catch(() => {});
      
    },

    /* 拖动开始 记录位置 */
    dragStartHandler({ oldIndex }) {
      this.startIndex = this.chartList[oldIndex].MyChartId;
    },

    /* 拖动结束 替换  */
    dragOverHandler() {
      mychartInterface
        .move({
          MyChartId: this.startIndex,
          MyChartClassifyId: this.select_classify,
          PrevMyChartId: this.preIndex || 0,
          NextMyChartId: this.nextIndex || 0,   
        })
        .then((res) => {
          if (res.Ret !== 200) return;
        });
    },

    /* 拖动时 获取移动后的上一个位置id 若移到第一位则取0 获取后一个id 若是最后一个取0*/
    dragenter({ newIndex }) {
      console.log(newIndex)
      this.preIndex = newIndex > 0 ? this.chartList[newIndex - 1].MyChartId : 0;
      this.nextIndex = newIndex ===  this.chartList.length - 1 ? 0 : this.chartList[newIndex + 1].MyChartId
    },

     /* 拖动开始 记录位置 */
    menuDragStart({ oldIndex }) {
      this.startMenuIndex = this.classifyList[oldIndex].MyChartClassifyId;
    },

    /* 拖动结束 替换  */
    menuDragOver() {
      mychartInterface.moveClassify({
          MyChartClassifyId:  this.startMenuIndex,
          NextClassifyId: this.nextMenuIndex || 0,
          PrevClassifyId:  this.preMenuIndex || 0,
      }).then(res => {
        if(res.Ret !== 200) return;
      })

    },

    /* 拖动时 获取移动后的上一个位置id 若移到第一位则取0 获取后一个id 若是最后一个取0*/
    menuDragenter({ newIndex }) {
      
      this.preMenuIndex = newIndex > 0 ? this.classifyList[newIndex - 1].MyChartClassifyId : 0;
      this.nextMenuIndex = newIndex ===  this.classifyList.length - 1 ? 0 : this.classifyList[newIndex + 1].MyChartClassifyId

    },

    /* 向左收起/展开 */
    slideHandle() {
      this.isSlideLeft = !this.isSlideLeft;
    },

    /* 页码改变 */
    handleCurrentChange(page) {
      this.page_no = page;
    },

    /* 进入图库详情 */
    async viewChartDetail({ UniqueCode }) {
      this.chart_code = UniqueCode;

      // 获取当前分类下的所有图表 取code
      const allcharts =  (this.select_classify || this.search_txt)  ? await mychartInterface
        .myList({
          PageSize: 1000000,
          CurrentIndex: 1,
          MyChartClassifyId: this.select_classify || 0,
          MyChartId: this.search_txt || 0,
        }) : []; 
      this.chartArrParams = allcharts.Data.List && allcharts.Data.List.length ? allcharts.Data.List.map(item => item.UniqueCode) : [];

      this.isOpenDetail = true;
    },


    chartCallBack() {
      this.page_no = 1;
      this.isOpenDetail = false;
      this.getChartList();
    },

    // 弹窗内移出删除图标后回调
    removeCallBack(code) {
      this.chartArrParams.splice(this.chartArrParams.findIndex(item => item === code), 1)
    },

    /* 移出我的图库 */
    removeMyChart({ MyChartId }) {
      if (!this.select_classify)
        return this.$message.warning(
          '当前图表所属多个分类，请选中具体分类移出'
        );
      mychartInterface
        .del({
          MyChartId,
          MyChartClassifyId: this.select_classify,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success(/* '移出成功' */this.$t('MsgPrompt.move_out_msg'));
          this.page_no = 1;
          this.getChartList();
        });
    },
    /* 移动到 打开分类弹窗 */
    async moveMychart(id) {
      this.dia_title = /* '复制图表分类' */ this.$t('MyEtaPage.label_copy_classify');
      this.move_id = id;
      this.dialogKeyArrs = [
        {
          label: /* '复制到' */ this.$t('MyEtaPage.label_copy_to'),
          prop: 'classify',
          type: 'select',
          placeholder: /* '请选择目录' */ this.$t('MyEtaPage.ph_menu'),
          multiple: true,
        },
      ];
      this.formData = {
        classify: [],
      };

      //获取当前图表所属分类并过滤
      const { Data } = await mychartInterface.getChartInClassify({ChartInfoId: id });

      this.selectArr = this.classifyList
        .map((item) => ({
          name: item.MyChartClassifyName,
          value: item.MyChartClassifyId,
        }))
        .filter((x) => !Data.includes(x.value));
      this.isClassifyDia = true;
    },
  },
  mounted() {
    if(this.$route.query.id) {
     this.select_classify = Number(this.$route.query.id)
     this.ispublic = 1
    }else {
    this.select_classify = sessionStorage.getItem('myChartOpt')
      ? Number(sessionStorage.getItem('myChartOpt'))
      : 0;
    this.ispublic=sessionStorage.getItem('myChartIspublic')? Number(sessionStorage.getItem('myChartIspublic')): '';
    }
    //从图库框架跳转来的
    if(this.$route.query.frameId){
        this.select_classify = Number(this.$route.query.frameId)
        this.ispublic = ''
    }
    this.getClassify();
    this.getPublicClassify();
  },
};
</script>
<style lang="scss">
@import "../chartFrame_manage/css/customTree.scss";
.mychart_container {
  position: relative;
  .right-item-box {
    display:flex;
    align-items: center;
    img {
      width: 16px;
    }
    .el-dropdown-link-img {
      width: 18px;
      cursor: pointer;
    }
  }
  .right-content {
    position: fixed;
    left: 40%;
    top: 20%;
    background: #fff;
    padding: 6px 0;
    border: 1px solid #999;
    box-shadow: 0 1px 4px #999;
    z-index: 2;
    li {
      padding: 5px 60px;
      margin: 5px 0;
      color: #333;
      &:hover {
        background: #ddd;
        cursor: pointer;
      }
    }
  }
  .flip-list-move {
    transition: transform 0.4s;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #409eff !important;
    border-color: #409eff;
  }
  .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
    background-color: #409eff !important;
    border-color: #409eff;
  }
  .el-card .el-card__header {
    padding: 14px 20px;
  }
  .slide-icon {
    padding: 20px 0;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    &.slide-left {
      right: 0;
    }
    &.slide-right {
      left: -30px;
    }
  }
  .el-icon-refresh {
    font-size: 17px;
    margin-left: 5px;
    cursor: pointer;
  }
  display: flex;
  div::-webkit-scrollbar {
    width: 5px !important;
  }

  .main-left {
    width: 300px;
    min-width: 300px;
    background: #fff;
    margin-right: 20px;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    min-height: calc(100vh - 113px);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    .left-top {
      padding: 30px 20px 15px;
      .add-cont {
        cursor: pointer;
        font-size: 15px;
        color: #409eff;
      }
    }
    .left-bottom {
      padding: 15px 0 30px;
      overflow: auto;
      max-height: calc(100vh - 290px);
      position: relative;
      margin-right: 20px;
      .classify-item {
        padding: 10px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.act {
          background: #e0eefd;
          color: #409eff;
        }
      }
      .classify-type {
        margin-bottom: 8px;
        padding-left: 15px;
      }
      .public-classify {
        margin-bottom: 20px;
        .tree-wrap{
            padding:15px;
        }
      }
    }
    .noclassify {
      margin: 50px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #409eff;
      font-size: 16px;
      cursor: pointer;
    }
    .move-btn {
      height: 100%;
      width: 4px;
      position: absolute;
      right: 0px;
      top: 0;
      z-index: 99;
      &:hover {
        cursor: col-resize;
      }
    }
  }
  .main-right {
    width: 80%;
    position: relative;
    .mx-datepicker {
      width: 220px !important;
    }
    .nodata {
      height: calc(100vh - 240px);
      text-align: center;
      font-size: 16px;
      color: #666;
      .sharer {
        color: #333;
        font-size: 14px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    /* =================== */
    .chart-min-cont {
      background: #fff;
      border: 1px solid #ececec;
      height: calc(100vh - 118px);
      overflow: auto;
      border-radius: 4px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
      .cont-top {
        padding: 12px 30px;
        border-bottom: 1px solid #ececec;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
        .top-left {
          .year-btn {
            font-size: 14px;
            margin-right: 5px;
            margin-bottom: 5px;
          }
          .btn-sty {
            font-size: 16px;
            padding: 10px;
            border: 1px solid #409eff;
          }
        }
        .top-right {
          .span-item {
            font-size: 16px;
            color: #409eff;
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
            .el-icon-collection,
            .el-icon-document-copy {
              color: #409eff;
            }
          }
        }
      }
      .cont-bottom {
        padding: 30px;
        .el-input__inner {
          height: 27px;
          line-height: 27px;
          padding: 0 4px;
        }
        .el-input-number .el-input__inner {
          padding: 0 34px 0 4px;
        }
        .el-color-picker--mini .el-color-picker__trigger {
          width: 60px;
          height: 25px;
          padding: 0;
        }
        .el-color-picker--mini .el-color-picker__mask {
          width: 60px;
          height: 25px;
        }
        .el-table__expanded-cell {
          padding: 20px 26px;
        }
        .highcharts-range-selector-group {
          display: none;
          .highcharts-input-group {
            display: none;
          }
        }
        .highcharts-axis-title {
          display: block;
        }
        .calendar-cont {
          display: block;
          margin: 10px auto 0;
          text-align: center;
        }
        /* =================== */
        .chart-show-cont {
          margin-bottom: 15px;
          padding: 0 120px 20px;
          position: relative;
          .chart-title {
            font-size: 16px;
            font-weight: normal;
            text-align: center;
            margin-bottom: 10px;
          }
          .chart-author {
            font-size: 14px;
            color: #333;
            position: absolute;
            bottom: 20px;
            right: 38px;
          }
          .chartWrapper {
            position: relative;
            .range-cont {
              position: absolute;
              top: 13%;
              .min-data-input {
                width: 70px;
                display: block;
                margin-top: 354px;
              }
              &.left {
                left: -80px;
              }
              &.right {
                right: -80px;
              }
            }
          }
        }
        .options-cont {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }
      }
    }
  }

  .drawImg {
    position: absolute;
    top: -999px;
    z-index: -100;
  }

  /* ===================== */
  .chart-public-cont {
    color: #333;
    .el-card .el-card__header,
    .el-card__body {
      padding: 10px;
    }
    .cont-top {
      display: flex;
      justify-content: space-between;
    }
    .chart-public-list {
      margin-top: 10px;
      height: calc(100vh - 143px);
      overflow: hidden;
      overflow-y: auto;
      .drag-cont {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .dragShdow {
        box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
        opacity: 0.5;
      }
      .public-chart-item {
        .item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
          position: relative;
        }
        .chart-img {
          width: 100%;
          height: 230px;
          object-fit: fill !important;
          cursor: pointer;
        }
        .item-bottom {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          color: #666;
          font-size: 12px;
          .join_txt {
            color: #f00;
            cursor: pointer;
            &.move_txt {
              color: #409eff;
            }
          }
        }
      }
    }
  }  
}
.el-dropdown-menu-item-chat {
    display: flex !important;
    align-items: center !important;
     img {
      width: 16px;
      margin-right: 8px;
    }
    &:hover {
      background-color: #F5F7FA  !important;
      color: #606266 !important;
    }
  }
  .el-dropdown-menu .el-dropdown-menu-item-chat-act {
      color: #66b1ff !important;
 }
</style>