eta_front/src/views/dataEntry_manage/thirdBase/BAIINFOTargetbase.vue

<template>
  <div class="smmTarget-container target-container" id="box">
    <span
        v-show="!isLeftWrapShow"
        class="slide-btn-icon slide-right"
        @click="isLeftWrapShow = !isLeftWrapShow"
    >
        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
    </span>
    <div class="left-cont minHeight" id="left" v-show="isLeftWrapShow">
        <span
            v-show="isLeftWrapShow"
            class="slide-btn-icon slide-left"
            @click="isLeftWrapShow = !isLeftWrapShow"
        >
            <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
        </span>
      <div class="left-top">
        <el-button
          v-permission="permissionBtn.dataSourcePermission.bcyfData_export"
          style="width: 100%"
          type="primary"
          plain
          size="medium"
          @click="exportClick"
          :loading="btnload"
          >导出Excel</el-button
        >
        <el-autocomplete
          style="margin: 20px 0; width: 100%"
          prefix-icon="el-icon-search"
          v-model="leftSearchVal"
          :fetch-suggestions="handleLeftSearch"
          :trigger-on-focus="false"
          placeholder="指标名称/指标ID"
          @select="handleSelectLeftSearchval"
          popper-class="el-autocomplete-suggestion-data-entry"
          clearable
        >
          <template slot-scope="scope">
            <div v-if="scope.item.nodata" style="text-align: center">
              暂无数据
            </div>
            <div v-else>
              {{ scope.item.IndexName }}
            </div>
          </template>
        </el-autocomplete>
      </div>
      <div class="scroll-wrap">
        <el-tree
          ref="treeRef"
          class="target_tree custom-tree"
          :data="classifyList"
          node-key="UniqueCode"
          :props="{
            label: 'ClassifyName',
            children: 'Children',
          }"
          draggable
          :current-node-key="select_node"
          :expand-on-click-node="false"
          check-strictly
          empty-text="暂无分类"
          @current-change="nodeChangeHandle"
          :default-expanded-keys="defaultShowNodes"
          @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse"
          :allow-drag="canDragHandle"
          :allow-drop="canDropHandle"
          @node-drop="dropOverHandle"
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span
              class="text_oneLine"
              :style="`width:${
                (select_node === data.UniqueCode &&
                  (node.Nodewidth || data.NodeWidth + 'px')) ||
                ''
              }`"
              >{{ data.ClassifyName }}</span
            >
            <div v-if="select_node === data.UniqueCode">
              <img
                src="~@/assets/img/data_m/move_ico.png"
                v-if="data.Button.MoveButton"
                alt=""
                style="width: 14px; height: 14px; margin-right: 5px"
                @click.stop="clickClassifyHandle('move', data, node)"
              />
              <img
                src="~@/assets/img/set_m/add.png"
                style="width: 14px; height: 14px; margin-right: 5px"
                @click.stop="clickClassifyHandle('add', data, node)"
                v-if="data.Button.AddButton&&permissionBtn.isShowBtn('dataSourcePermission','bcyfData_classifyOpt_add')"
              />
              <img
                v-permission="permissionBtn.dataSourcePermission.bcyfData_edit"
                src="~@/assets/img/set_m/edit.png"
                v-if="data.Button.OpButton&&permissionBtn.isShowBtn('dataSourcePermission','bcyfData_classifyOpt_edit')"
                alt=""
                style="width: 14px; height: 14px; margin-right: 5px"
                @click.stop="clickClassifyHandle('edit', data, node)"
              />
              <img
                src="~@/assets/img/set_m/clean.png"
                v-if="data.Button.cleanButton"
                alt=""
                style="width: 14px; height: 14px; margin-right: 5px"
                @click.stop="clickClassifyHandle('clean', data, node)"
              />
              <img
                src="~@/assets/img/set_m/del.png"
                v-if="data.Button.DeleteButton&&permissionBtn.isShowBtn('dataSourcePermission','bcyfData_classifyOpt_delete')"
                alt=""
                style="width: 14px; height: 14px"
                @click.stop="clickClassifyHandle('del', data, node)"
              />
              <img
                src="~@/assets/img/set_m/del_icon.png"
                v-if="data.Button.targetDelButton&&permissionBtn.isShowBtn('dataSourcePermission','bcyfData_classifyOpt_delete')"
                alt=""
                style="width: 14px; height: 14px; margin-right: 5px"
                @click.stop="clickClassifyHandle('delTarget', data, node)"
              />
            </div>
          </div>
        </el-tree>

        <div class="add-cont" @click="addClassifyHandle" v-if="permissionBtn.isShowBtn('dataSourcePermission','bcyfData_classifyOpt_add')">
          <img
            src="~@/assets/img/set_m/add_ico.png"
            alt=""
            style="width: 16px; height: 16px; margin: 10px"
          />
          <span>添加分类</span>
        </div>
      </div>
      <span
        class="move-btn resize"
        v-drag
        id="resize"
        @mousemove="dynamicNode && resetNodeStyle(dynamicNode)"
      >
      </span>
    </div>
    <div
      class="right-cont minHeight"
      id="right"
      v-loading="dataloading"
      element-loading-text="获取数据中..."
    >
      <template v-if="rightShow">
        <div class="right-box" @scroll="scrollHandle">
          <div class="data-header">
            <lz-table
              :tableOption="tableOption"
              tableType="header"
              ref="table"
              source="baiinfo"
              @editTarget="editTargetByTable"
            />
          </div>
          <div class="data-cont" v-if="dateArr.length">
            <lz-table
              :tableOption="tableOption"
              tableType="data"
              :dateArr="dateArr"
              source="baiinfo"
            />
          </div>
          <div v-else class="nodata"></div>
        </div>
        <div
          class="frequency-list"
          v-if="rightShow && !isShowSingleData && frequencyList.length > 1"
        >
          <el-button
            type="primary"
            class="frequency-btn"
            :plain="select_frequency !== item.key"
            v-for="item in frequencyList"
            :key="item.key"
            @click="changeFrequency(item.key)"
            >{{ item.key || "全部" }}</el-button
          >
        </div>
      </template>
      <div v-else class="nodata-cont">
        <tableNoData text="暂无数据"/>
      </div>
    </div>
    <!-- 添加/编辑分类弹窗 -->
    <m-dialog
      :show.sync="openClassifyDia"
      width="700px"
      :title="classifyForm.title"
      @close="cancelDialogHandle"
    >
      <div class="dialog-cont smmTarget-dialog-cont">
        <el-form
          ref="classifyFormRef"
          label-position="left"
          hide-required-asterisk
          label-width="80px"
          :model="classifyForm"
          :rules="classifyFormRules"
        >
          <!-- 是二级分类 -->
          <el-form-item
            label="一级目录"
            v-if="classifyForm.parent_classify_name"
          >
            <span>{{ classifyForm.parent_classify_name }}</span>
          </el-form-item>
          <!-- 是分类 -->
          <el-form-item
            label="分类名称"
            prop="classify_name"
            v-if="classifyForm.type === 'classify'"
          >
            <el-input
              v-model="classifyForm.classify_name"
              style="width: 80%"
              placeholder="请输入分类名称"
            />
          </el-form-item>
          <!-- 是指标 -->
          <template v-else>
            <el-form-item label="指标名称">
              <span>{{ classifyForm.classify_name }}</span>
            </el-form-item>
            <el-form-item label="频度" prop="frequency">
              <el-select
                placeholder="请选择频度"
                style="width: 80%"
                v-model="classifyForm.frequency"
              >
                <el-option
                  v-for="item in frequencyArr"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
              <el-select
                placeholder="请选择单位"
                style="width: 80%"
                v-model="classifyForm.unit"
              >
                <el-option
                  v-for="item in unitArr"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="分类名称"
              prop="classifys_id"
              v-if="classifyForm.by !== 'table'"
            >
              <el-cascader
                style="width: 80%"
                :key="cascaderKey"
                placeholder="请选择分类名称"
                v-model="classifyForm.classifys_id"
                :options="cascaderList"
                :props="{
                  value: 'ClassifyId',
                  label: 'ClassifyName',
                  children: 'Children',
                }"
              />
            </el-form-item>
          </template>
        </el-form>
      </div>
      <div class="dia-bot">
        <el-button
          type="primary"
          style="margin-right: 20px"
          @click="saveClassifyHandle"
          >保存</el-button
        >
        <el-button type="primary" plain @click="cancelDialogHandle"
          >取消</el-button
        >
      </div>
    </m-dialog>
  </div>
</template>

<script>
import lzTable from "@/components/lzTable.vue";
import { baiinfoInterface } from "@/api/api.js";
import mDialog from "@/components/mDialog.vue";
import leftMixin from "./mixins/leftMixin.js";
import { unitArr } from "@/utils/defaultOptions";
export default {
  name: "",
  components: { lzTable, mDialog },
  mixins: [leftMixin],
  watch: {},
  data() {
    return {
      isLeftWrapShow:true,
      exportBase:
        process.env.VUE_APP_API_ROOT + "/datamanage/export/baiinfoList", //ssm数据导出接口
      dataloading: false,
      rightShow: false,
      select_classify: 0,
      classifyList: [],
      select_frequency: "",
      frequencyList: [],
      tableOption: [],
      dateArr: [], //最长的日期数组
      btnload: false,
      page_no: 1,
      page_size: 20,
      havemore: true, //是否还有数据

      leftSearchVal: "", //左侧搜索值
      leftSearchTradeCode: "", //如果是搜索选择的 则有此code
      select_quota: "", // 选择的指标名
      select_Unit: "", // 选择的单位
      select_ModifyTime: "", //选中的更新时间
      select_breed: "", // 选中的分类名称
      isShowSingleData: false, //右侧是否展示的是单个指标数据
      singleDataCode: "",
      cascaderList: [], //移动指标分类列表
      cascaderKey: 0,
      openClassifyDia: false, //分类弹窗
      classifyForm: {
        title: "添加分类",
        classify_name: "", //分类名称
        classify_id: "", //分类id
        parent_classify_name: "", //如果是二级分类，这是所属一级分类的名称
        parent_classify_id: "", //如果是二级分类，这是所属一级分类的id
        type: "classify", //classify|index 对分类还是指标进行操作
        classifys_id: [], //如果是指标，这是选中的分类id[一级分类id,二级分类id]
        BaseFromBaiinfoIndexId: "", //如果是指标，这是指标的唯一id
      }, //弹窗可编辑信息
      classifyFormRules: {
        classify_name: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
        ],
      }, //可编辑信息校验
      frequencyArr: ["日度", "周度", "旬度", "月度", "季度", "年度"],
      unitArr,
    };
  },
  methods: {
    /* 获取分类 */
    getClassify() {
      baiinfoInterface.classifyList().then((res) => {
        if (res.Ret !== 200) return;
        let Data = res.Data.List || [];
        //对分类数据做处理：
        this.classifyList = this.formatClassifyData(Data, 1, 0);
      });
    },
    formatClassifyData(arr, level, topParentNodeId) {
      arr.forEach((item) => {
        const { ClassifyId, BaseFromBaiinfoIndexId, BaseFromBaiinfoIndexCode } =
          item;
        //每条数据添加UniqueCode属性，由ClassifyId BaseFromBaiinfoIndexId BaseFromBaiinfoIndexCode拼接
        item.UniqueCode = `${ClassifyId}_${BaseFromBaiinfoIndexId}_${BaseFromBaiinfoIndexCode}`;
        //添加Button属性，用于控制操作栏
        item.Button = {
          AddButton: true,
          OpButton: true,
          DeleteButton: true,
          MoveButton: true,
          cleanButton: false,
          targetDelButton: false,
        };
        //未分类禁用所有操作栏
        if (item.ClassifyId === 0) {
          item.Button = {
            AddButton: false,
            OpButton: false,
            DeleteButton: false,
            MoveButton: false,
            cleanButton: false,
            targetDelButton: false,
          };
        }
        //二级分类禁用添加按钮
        if (item.Level === 2) {
          item.Button = {
            AddButton: false,
            OpButton: true,
            DeleteButton: true,
            MoveButton: true,
            cleanButton: false,
            targetDelButton: false,
          };
        }
        //指标禁用删除按钮
        if (item.BaseFromBaiinfoIndexCode) {
          item.Button = {
            AddButton: false,
            OpButton: true,
            DeleteButton: false,
            MoveButton: true,
            cleanButton: true,
            targetDelButton: true,
          };
          //未分类下的指标，禁用清除按钮
          if (topParentNodeId === 0) {
            item.Button["cleanButton"] = false;
          }
        }
        //非一级分类添加一级父节点id
        if (level !== 1) {
          item.topParentNodeId = topParentNodeId;
        }
        if (item.Children && item.Children.length) {
          this.formatClassifyData(
            item.Children,
            level + 1,
            level === 1 ? item.ClassifyId : item.ParentId
          );
        }
      });
      return arr;
    },
    /* 获取频度 */
    async getFrequency(defaultSelect) {
      const res = await baiinfoInterface.frequencyList({
        ClassifyId: this.select_classify,
      });
      if (res.Ret !== 200) return;
      this.frequencyList = res.Data
        ? res.Data.map((item) => {
            return {
              key: item.Frequency,
            };
          })
        : [];
      //设置当前选中的频度,若传入有默认选项则选中默认频度,否则选中列表第一个
      this.select_frequency =
        defaultSelect ||
        (this.frequencyList.length ? this.frequencyList[0].key : "");
      !this.frequencyList.length && this.nodataDeal();
    },
    /* 获取数据 */
    getDataList: _.throttle(function () {
      this.isShowSingleData = false;
      this.dataloading = true;
      baiinfoInterface
        .dataList({
          ClassifyId: this.select_classify,
          Frequency: this.select_frequency,
          PageSize: this.page_size,
          CurrentIndex: this.page_no,
        })
        .then((res) => {
          this.rightShow = true;
          if (res.Ret !== 200) return;

          // 找出最多的页码 判断是否还有数据
          let page_arrs = res.Data.map((item) => item.Paging.Pages);
          let totalPage = Math.max.apply(Math, page_arrs);
          this.havemore = this.page_no < totalPage ? true : false;

          // 合并数据
          if (this.page_no === 1) {
            this.tableOption = res.Data;
          } else {
            this.tableOption.forEach((item) => {
              res.Data.forEach((_item) => {
                if (item.IndexCode === _item.IndexCode) {
                  item.DataList = item.DataList.concat(_item.DataList);
                }
              });
            });
          }

          // 合并所有指标中的日期 作为日期数组
          let arr = res.Data.map((item) => {
            return item.DataList;
          });

          let obj = [];
          for (let i of arr) {
            for (let j of i) {
              obj.push(j.DataTime);
            }
          }
          let arr2 = [...new Set(obj)].sort().reverse();
          let concatArr = [...new Set([...this.dateArr, ...arr2])]
            .sort()
            .reverse();
          this.dateArr = this.page_no === 1 ? arr2 : concatArr;

          /* 不满6个追加6个空的显示一排 别问 问就是为了美观  */
          if (this.tableOption.length < 7)
            for (let i = 0; i < 7; i++) {
              this.tableOption.push({
                DataList: [],
              });
              if (this.tableOption.length >= 7) break;
            }

          //数据最大长度小于12个 追加数据满12个 别问 问就是为了美观
          if (this.dateArr.length < 12)
            for (let i = 0; i < 12; i++) {
              this.dateArr.push("");
              if (this.dateArr.length >= 12) break;
            }

          this.dataloading = false;
          this.page_no === 1 &&
            this.$nextTick(() => {
              this.rightShow && this.initWidth();
            });
        });
    }, 200),
    // 获取单个指标数据
    async getTargetDataList(code) {
      this.isShowSingleData = true;
      this.dataloading = true;
      try {
        const res = await baiinfoInterface.getTargetDataList({
          IndexCode: code,
        });
        this.rightShow = true;
        if (res.Ret !== 200) return;
        const DataList = res.Data.Data || [];
        // 设置为没有更多数据
        this.haveMore = false;
        // 合并数据
        this.tableOption = [
          {
            DataList: DataList,
            ...res.Data,
          },
        ];
        // 这里是单个指标所以不用合并日期
        const arr = DataList.map((item) => item.DataTime);
        this.dateArr = [...new Set(arr)].sort().reverse();
        /* 不满6个追加6个空的显示一排 别问 问就是为了美观  */
        for (let i = 0; i < 7; i++) {
          this.tableOption.push({
            DataList: [],
          });
          if (this.tableOption.length >= 7) break;
        }
        //数据最大长度小于12个 追加数据满12个 别问 问就是为了美观
        if (this.dateArr.length < 12)
          for (let i = 0; i < 12; i++) {
            this.dateArr.push("");
            if (this.dateArr.length >= 12) break;
          }
        this.select_quota = res.Data.IndexName;
        this.select_Unit = res.Data.Unit;
        this.select_frequency = res.Data.Frequency;
        this.select_ModifyTime = res.Data.ModifyTime || "";
        this.dataloading = false;
        this.rightShow && this.initWidth();
      } catch (err) {
        console.log(err);
      }
    },
    /* 改变品种 */
    changeClassify(id) {
      this.select_classify = id;
      this.select_breed = id;
      this.leftSearchVal = "";
      this.leftSearchTradeCode = "";
      this.select_Unit = "";
      this.select_ModifyTime = "";
    },
    /* 改变频度 */
    changeFrequency(key) {
      this.select_frequency = key;
      this.leftSearchVal = "";
      this.getDataList();
    },
    initWidth() {
      this.$nextTick(() => {
        $(".right-box")[0].style.width =
          this.$refs.table.$el.clientWidth + 5 + "px";
        $(".right-box")[0].scrollTop = 0;
        $(".right-box")[0].scrollLeft = 0;
      });
    },
    /* 无频度的异常显示处理 7*12*/
    nodataDeal() {
      this.tableOption = [];
      this.dateArr = [];
      for (let i = 0; i < 7; i++) {
        this.tableOption.push({
          DataList: [],
        });
        if (this.tableOption.length >= 7) break;
      }
      for (let i = 0; i < 12; i++) {
        this.dateArr.push("");
        if (this.dateArr.length >= 12) break;
      }
    },
    /* 滚动加载 */
    scrollHandle(e) {
      if (this.isShowSingleData) return;
      const dom = e.target;
      let total = dom.scrollTop + dom.clientHeight;
      if (total >= dom.scrollHeight && this.havemore) {
        this.page_no++;
        console.log("load下一页");
        this.getDataList();
      }
    },
    /* 数据导出 */
    exportClick() {
      this.btnload = true;
      const link = document.createElement("a");
      link.href = this.exportSmmapi;
      link.download = "";
      link.click();
      console.log({
        IndexName: this.select_quota,
        IndexCode: this.leftSearchTradeCode,
        sendIndexCode: this.escapeStr(this.leftSearchTradeCode),
        TypeName: this.select_breed,
        sendTypeName: this.escapeStr(this.select_breed),
        Frequency: this.select_frequency,
        UnitName: this.select_Unit,
        ModifyTime: this.select_ModifyTime,
        sendToken: this.escapeStr(localStorage.getItem("auth") || ""),
        url: this.exportSmmapi,
      });
      setTimeout(() => {
        this.btnload = false;
      }, 5000);
    },
    //左侧搜索
    async handleLeftSearch(query, cb) {
      cb([]);
      if (!query) return;
      const res = await baiinfoInterface.getTargetListByName({
        Keyword: query,
      });
      if (res.Ret === 200) {
        let arr = res.Data || [];
        if (!arr.length) {
          cb([{ nodata: true }]);
        } else {
          cb(arr);
        }
      }
    },
    // 选中左侧搜索值
    handleSelectLeftSearchval(e) {
      if (!e.IndexCode) return;
      //this.select_frequency=e.Frequency
      //this.select_classify=e.Type2+'#'+e.Type3
      this.leftSearchTradeCode = e.IndexCode;
      this.leftSearchVal = e.IndexName;
      this.select_quota = e.IndexName;
      this.select_Unit = e.Unit;
      this.select_ModifyTime = e.ModifyTime;
      this.select_breed = "";
      // 关闭watcher
      this.isAuto = false;

      // 获取单独指标数据
      this.getTargetDataList(e.IndexCode);

      this.$nextTick(() => {
        //找到父节点并展开
        const targetData = this.getTargetData(e.IndexCode, this.classifyList);
        if (targetData) {
          //一级节点
          const { topParentNodeId, UniqueCode } = targetData;
          this.handleNodeExpand({ UniqueCode: `${topParentNodeId}_0_` });
          //二级节点
          if (topParentNodeId !== 0) {
            const secondNodeId = UniqueCode.split("_")[0];
            this.handleNodeExpand({ UniqueCode: `${secondNodeId}_0_` });
          }
          //节点样式变化
          const tree = $(".target_tree")[0];
          let width = tree.offsetWidth;
          let label_width =
            width > 500 ? "auto" : width <= 500 ? 90 : 0.7 * width;
          targetData.NodeWidth = label_width;
          this.select_node = UniqueCode;
          this.$refs.treeRef.setCurrentNode(targetData);
          const node = this.$refs.treeRef.getCurrentNode();
          this.resetNodeStyle(node);
        }
        //this.handleScrollLeftWrap()
      });
    },
    // 左侧滚动
    handleScrollLeftWrap() {
      let top = $(".act")[0].offsetTop;
      $(".classify-list").animate({
        scrollTop: top - 200,
      });
    },
    getTargetData(code, arr) {
      for (const item of arr) {
        if (item.BaseFromBaiinfoIndexCode === code) return item;
        if (item.Children && item.Children.length) {
          const _item = this.getTargetData(code, item.Children);
          if (_item) return _item;
        }
      }
    },
    // 对[#,;]转义
    escapeStr(str) {
      return str.replace(/#/g, escape("#")).replace(/;/g, escape(";"));
    },
    //节点操作:
    clickClassifyHandle(type, data, node) {
      const optionMap = {
        /*  'move':this.moveNode,移动 */
        add: this.addClassifyHandle, //添加分类
        edit: this.editClassifyHandle, //编辑分类/移动指标
        del: this.deleteClassifyHandle, //删除分类
        clean: this.cleanClassifyHandle, //清除指标分类
        delTarget: this.deleteTarget, //删除指标
      };
      optionMap[type] && optionMap[type](data, node);
    },
    //添加一二级分类
    addClassifyHandle(data = null, node = null) {
      this.classifyForm = {
        ...this.classifyForm,
        ...(data
          ? {
              title: "添加分类",
              classify_name: "",
              parent_classify_name: data.ClassifyName,
              parent_classify_id: data.ClassifyId,
            }
          : {
              title: "添加分类",
              classify_name: "",
            }),
      };
      this.openDialogHandle();
    },
    //编辑一二级分类，编辑指标
    async editClassifyHandle(data, node) {
      //console.log('data',data,'node',node)
      console.log("dataClassify", data);
      const { level, parent } = node;
      const parentNodeId = parent.data.ClassifyId;
      const {
        ClassifyName,
        topParentNodeId,
        ClassifyId,
        BaseFromBaiinfoIndexId,
      } = data;
      let tempForm = {
        parent_classify_name: "",
        parent_classify_id: "",
      };
      let type = "classify";
      let classifys_id = [];
      //是二级分类(二级，且父节点不是未分类节点)
      if (level === 2 && parentNodeId !== 0) {
        const { parent } = node;
        tempForm.parent_classify_id = data.ParentId;
        tempForm.parent_classify_name = parent.data.ClassifyName;
      }
      //是指标(三级，或二级，父节点为未分类节点)
      if (level === 3 || (level === 2 && parentNodeId === 0)) {
        type = "index";
        this.cascaderKey++; //更新el-cascader
        //获取cascaderList数据
        const res = await baiinfoInterface.classifyNameList();
        if (res.Ret !== 200) return;
        this.cascaderList = res.Data.List;
        //如果指标不在未分类节点下，需回显值
        if (parentNodeId) {
          classifys_id = [topParentNodeId, parentNodeId];
        }
      }
      this.classifyForm = {
        ...{
          title: type === "index" ? "编辑指标" : "编辑分类",
          classify_name: ClassifyName,
          classify_id: ClassifyId,
          type,
          classifys_id,
          BaseFromBaiinfoIndexId: BaseFromBaiinfoIndexId || "",
          unit: this.select_Unit,
          frequency: this.select_frequency,
        },
        ...tempForm,
      };
      this.openDialogHandle();
    },
    //从表格点击编辑指标
    editTargetByTable(data) {
      console.log("dataTable", data);
      const { Unit, Frequency, IndexName, ClassifyId, BaseFromBaiinfoIndexId } =
        data;
      this.classifyForm = {
        title: "编辑指标",
        classify_name: IndexName,
        classify_id: ClassifyId || this.select_classify,
        classifys_id: [0, ClassifyId || this.select_classify || 0],
        BaseFromBaiinfoIndexId: BaseFromBaiinfoIndexId || "",
        type: "index",
        unit: Unit,
        frequency: Frequency,
        by: "table",
      };
      this.openDialogHandle();
    },
    //删除一二级分类
    deleteClassifyHandle(data, node) {
      const { Children, ClassifyId } = data;
      //如果分类下有子分类或指标
      let hintText =
        Children && Children.length
          ? "删除分类将同步删除分类下所有子分类，确认删除吗？"
          : "删除分类不可恢复，确定删除吗？";
      this.$confirm(hintText, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除接口
          baiinfoInterface
            .deleteClassifyItem({
              ClassifyId,
            })
            .then((res) => {
              if (res.Ret !== 200) return;
              this.$message.success("删除成功");
              this.getClassify();
            });
        })
        .catch(() => {});
    },
    //清除指标分类
    cleanClassifyHandle(data, node) {
      const { BaseFromBaiinfoIndexId } = data;
      baiinfoInterface
        .cleanClassify({
          BaseFromBaiinfoIndexId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("清除分类成功");
          this.getClassify();
        });
    },
    //删除指标
    deleteTarget(data, node) {
      const { BaseFromBaiinfoIndexId } = data;
      this.$confirm("指标删除后不可被引用，确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          baiinfoInterface
            .deleteSMMtarget({
              BaseFromBaiinfoIndexId,
            })
            .then((res) => {
              if (res.Ret !== 200) return;
              this.$message.success("删除成功");
              this.getClassify();
            });
          //删除指标接口
        })
        .catch(() => {});
    },
    //打开分类弹窗
    openDialogHandle() {
      //this.$refs.classifyFormRef.clearValidate();
      this.openClassifyDia = true;
    },
    //关闭分类弹窗
    cancelDialogHandle() {
      this.$refs.classifyFormRef.clearValidate();
      this.openClassifyDia = false;
      this.classifyForm.classify_name = "";
      this.classifyForm.type = "classify";
    },
    //保存更改
    async saveClassifyHandle() {
      const {
        type,
        title,
        classify_name,
        classifys_id,
        parent_classify_id,
        classify_id,
        BaseFromBaiinfoIndexId,
      } = this.classifyForm;
      let res = null;
      let optionType = title.includes("添加") ? "添加" : "编辑";
      //对分类进行操作
      if (type === "classify") {
        //检查classify_name
        if (!classify_name.length) {
          this.$message.warning("请输入分类名称");
          return;
        }
        //添加分类
        if (title.includes("添加")) {
          res = await baiinfoInterface.addClassifyItem({
            ParentId: parent_classify_id || 0,
            ClassifyName: classify_name,
          });
          //编辑分类
        } else {
          res = await baiinfoInterface.editClassifyItem({
            ClassifyId: classify_id,
            ClassifyName: classify_name,
          });
        }
      }
      //对指标进行操作
      if (type === "index") {
        //检查classifys_id
        if (!classifys_id.length) {
          this.$message.warning("请选择分类");
          return;
        }
        //编辑指标
        res = await baiinfoInterface.editSmmTarget({
          ClassifyId: classifys_id[1] || 0,
          BaseFromBaiinfoIndexId: BaseFromBaiinfoIndexId,
          //单位,频度
          Unit: this.classifyForm.unit || "",
          Frequency: this.classifyForm.frequency || "",
        });
      }
      if (res.Ret !== 200) return;
      this.$message.success(`${optionType}成功`);
      this.getClassify();
      this.cancelDialogHandle();
      //判断是分类还是指标,请求对应详情
      this.checkNode(this.dynamicNode.data, this.dynamicNode);
    },
    checkNode(data, node) {
      const { level, parent } = node;
      const parentNodeId = parent.data.ClassifyId;
      const Children = data.Children || [];
      //如果是二级分类 或是一级分类的未分类
      if (
        (level === 2 && parentNodeId !== 0 && Children.length) ||
        (level === 1 && data.ClassifyId === 0 && Children.length)
      ) {
        this.getClassifyData(data.ClassifyId);
        //如果是指标
      } else if (level === 3 || (level === 2 && parentNodeId === 0)) {
        this.getBaiinfoData(data.BaseFromBaiinfoIndexCode);
        //如果是一级分类或空的二级指标
      } else if (level === 1 || (level === 2 && !Children.length)) {
        this.rightShow = false;
        this.isShowSingleData = false;
      }
    },
    //改变选中节点
    nodeChangeHandle(data, node) {
      if (data.UniqueCode === this.select_node) return;
      this.dynamicNode = node;
      this.select_node = data.UniqueCode;
      this.page_no = 1;
      this.page_size = 20;
      this.resetNodeStyle(node);
      this.checkNode(data, node);
    },
    //获取二级分类的表格数据
    async getClassifyData(id) {
      this.select_classify = id;
      this.select_frequency = "";
      await this.getFrequency();
      this.getDataList();
    },
    //获取指标数据
    getBaiinfoData(code) {
      this.singleDataCode = code;
      this.getTargetDataList(code);
    },
    //判断节点是否能放入
    canDropHandle(draggingNode, dropNode, type) {
      //console.log('drag',draggingNode)
      //console.log('drop',dropNode)
      const { level } = draggingNode;
      const dragParentId = draggingNode.data.ParentId;
      const dropClassifyId = dropNode.data.ClassifyId;
      const dropParentId = dropNode.data.ParentId;
      let canDrop = false;
      //level===1 一级节点 可以在一级节点之间移动 当dropNode不为未分类时，可以移动
      if (
        level === 1 &&
        dropNode.level === 1 &&
        type !== "inner" &&
        dropClassifyId !== 0
      ) {
        canDrop = true;
      }
      //level===2 二级节点 或 未分类下的指标
      if (level === 2) {
        //是未分类下的指标
        if (dragParentId === 0) {
          //在当前目录（未分类）内移动
          //移动到其他分类下的二级目录内
          if (
            (dropNode.level === 2 && dropParentId === 0 && type !== "inner") ||
            (dropNode.level === 2 && dropParentId !== 0 && type === "inner") ||
            (dropNode.level === 3 && type !== "inner") ||
            (dropNode.level === 1 && type === "inner" && dropClassifyId === 0)
          ) {
            canDrop = true;
          }
        } else {
          //是二级节点
          //在目录内移动
          //跨目录移动
          if (
            (dropNode.level === 2 && type !== "inner" && dropParentId !== 0) ||
            (dropNode.level === 1 && type === "inner" && dropClassifyId !== 0)
          ) {
            canDrop = true;
          }
        }
      }
      //level===3 指标
      if (level === 3) {
        if (
          (dropNode.level === 2 && type === "inner" && dropParentId !== 0) ||
          (dropNode.level === 3 && type !== "inner")
        ) {
          canDrop = true;
        }
      }
      return canDrop;
    },
    //拖拽移动节点处理
    dropOverHandle(draggingNode, dropNode, type, event) {
      const { level, data } = draggingNode;
      const parentNodeId = data.ParentId;
      //是指标
      if (level === 3 || (level === 2 && parentNodeId === 0)) {
        this.moveSMMTarge(draggingNode, dropNode, type, event);
      }
      //是目录
      if (level === 1 || (level == 2 && parentNodeId !== 0)) {
        this.moveCatalog(draggingNode, dropNode, type, event);
      }
    },
    //移动目录
    moveCatalog(drag, drop, type, event) {
      let PrevClassifyId = 0,
        NextClassifyId = 0,
        ClassifyId = 0,
        ParentId = 0;
      const list = drop.parent.childNodes;
      ParentId = drop.parent.data.ClassifyId || 0;
      ClassifyId = drag.data.ClassifyId;
      //目录间移动
      if (drag.level === drop.level) {
        //console.log(drop.data.ClassifyName)
        //找到最后进入的节点处于父节点的哪个位置
        const index = list.findIndex((item) => {
          return item.data.ClassifyId === drag.data.ClassifyId;
        });
        //如果在第一个
        if (index === 0) {
          PrevClassifyId = 0;
          NextClassifyId = list[index + 1].data.ClassifyId;
        } else if (index === list.length - 1) {
          //如果在最后一个
          PrevClassifyId = list[index - 1].data.ClassifyId;
          NextClassifyId = 0;
        } else {
          PrevClassifyId = list[index - 1].data.ClassifyId;
          NextClassifyId = list[index + 1].data.ClassifyId;
        }
        //跨目录移动，默认在第一个
      } else if (drag.level === 2 && type === "inner") {
        ParentId = drop.data.ClassifyId;
        PrevClassifyId = 0;
        NextClassifyId =
          drop.data.Children.length > 1 ? drop.data.Children[0].ClassifyId : 0;
      }
      //console.log('移动目录')
      /* console.log('ClassifyId',ClassifyId,'ParentId',ParentId)
      console.log('PrevClassifyId',PrevClassifyId,'NextClassifyId',NextClassifyId) */
      baiinfoInterface
        .moveCatalog({
          ClassifyId,
          ParentId,
          PrevClassifyId,
          NextClassifyId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("移动成功！");
          this.getClassify();
        });
    },
    //移动指标
    moveSMMTarge(drag, drop, type, event) {
      let PrevBaseFromBaiinfoIndexId = 0,
        NextBaseFromBaiinfoIndexId = 0,
        ClassifyId = 0,
        BaseFromBaiinfoIndexId = 0;
      BaseFromBaiinfoIndexId = drag.data.BaseFromBaiinfoIndexId;
      const list = drop.parent.childNodes;
      ClassifyId = drop.data.ClassifyId;
      if (type === "inner") {
        PrevBaseFromBaiinfoIndexId = 0;
        NextBaseFromBaiinfoIndexId =
          drop.data.Children > 1
            ? drop.data.Children[0].BaseFromBaiinfoIndexId
            : 0;
      } else {
        const index = list.findIndex((item) => {
          return (
            item.data.BaseFromBaiinfoIndexId ===
            drag.data.BaseFromBaiinfoIndexId
          );
        });
        if (index === 0) {
          PrevBaseFromBaiinfoIndexId = 0;
          NextBaseFromBaiinfoIndexId =
            list[index + 1].data.BaseFromBaiinfoIndexId;
        } else if (index === list.length - 1) {
          PrevBaseFromBaiinfoIndexId =
            list[index - 1].data.BaseFromBaiinfoIndexId;
          NextBaseFromBaiinfoIndexId = 0;
        } else {
          PrevBaseFromBaiinfoIndexId =
            list[index - 1].data.BaseFromBaiinfoIndexId;
          NextBaseFromBaiinfoIndexId =
            list[index + 1].data.BaseFromBaiinfoIndexId;
        }
      }
      /* console.log('ClassifyId',ClassifyId,'BaseFromBaiinfoIndexId',BaseFromBaiinfoIndexId)
      console.log('PrevBaseFromBaiinfoIndexId',PrevBaseFromBaiinfoIndexId,'NextBaseFromBaiinfoIndexId',NextBaseFromBaiinfoIndexId)
      console.log('移动指标') */
      baiinfoInterface
        .moveSMMtarget({
          ClassifyId,
          BaseFromBaiinfoIndexId,
          PrevBaseFromBaiinfoIndexId,
          NextBaseFromBaiinfoIndexId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("移动成功！");
          this.getClassify();
        });
    },
  },
  computed: {
    exportSmmapi() {
      // smm数据导出接口
      let urlStr = this.exportBase;
      // token
      urlStr += `?${localStorage.getItem("auth") || ""}`;
      if (this.isShowSingleData) {
        // 指标id
        urlStr += `&IndexCode=${
          this.isShowSingleData ? this.singleDataCode : ""
        }`;
        // 指标名称参数
        urlStr += `&IndexName=${this.select_quota}`;
        /* // 指标id
        urlStr+=`&IndexCode=${this.leftSearchTradeCode}` */
        // 分类名称
        urlStr += `&TypeName=${this.select_breed}`;
        // 频度
        urlStr += `&Frequency=${this.select_frequency}`;
        // 单位
        urlStr += `&UnitName=${this.select_Unit}`;
        // 修改时间
        urlStr += `&ModifyTime=${this.select_ModifyTime}`;
      } else {
        // 目录id
        urlStr += `&ClassifyId=${
          this.isShowSingleData ? "" : this.select_classify
        }`;
      }
      return this.escapeStr(urlStr);
    },
  },
  created() {},
  mounted() {
    this.getClassify();
  },
};
</script>
<style lang="scss">
@import "../css/customtree.scss";
@import "../css/baseTargetPage.scss";
.smmTarget-dialog-cont {
  .el-cascader {
    .el-input {
      width: 100% !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.smmTarget-container {
  display: flex;
  * {
    box-sizing: border-box;
  }
  .minHeight {
    height: calc(100vh - 120px);
    background-color: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  div::-webkit-scrollbar {
    width: 5px !important;
  }
  .left-cont {
    min-width: 300px;
    width: 300px;
    margin-right: 20px;
    padding: 30px 0;
    overflow: hidden;
    position: relative;
    .left-top {
      padding: 0 20px;
    }
    .scroll-wrap {
      padding: 0 10px;
      height: calc(100vh - 280px);
      overflow-y: auto;
      .target_tree {
        color: #333;
        .label-input .el-input__inner {
          height: 25px;
          line-height: 25px;
        }
        .custom-tree-node {
          display: flex !important;
          justify-content: space-between;
          align-items: center;
          display: block;
          flex: 1;
          .node_label {
            margin-right: 2px;
          }
          .el-icon-view {
            color: #409eff;
            font-size: 18px;
            margin-left: 5px;
          }
        }
      }
      .add-cont {
        margin: 50px 0 20px;
        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;
      &:hover {
        cursor: col-resize;
      }
    }
    .classify-list {
      padding: 0 20px;
      /* margin-top: 20px; */
      height: calc(100vh - 280px);
      overflow-y: auto;
      .classify-item {
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
        &:hover {
          cursor: pointer;
          color: #409eff;
        }
        &.act {
          color: #409eff;
        }
      }
    }
  }
  .right-cont {
    padding: 30px;
    .right-box {
      max-width: 100%;
      max-height: calc(100vh - 240px);
      border-left: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
      overflow: auto;
      .data-header {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 2;
      }
      .data-cont {
        height: calc(100vh - 444px);
      }
      .nodata {
        height: calc(100vh - 460px);
        border: 1px solid #dcdfe6;
        font-size: 16px;
        color: #999;
      }
    }
    .frequency-list {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      .frequency-btn {
        width: 112px;
      }
    }
    .nodata-cont {
      width: 150px !important;
      text-align: center;
      color: #666;
      font-size: 16px;
      margin: 0 auto;
    }
  }
}
.dialog-cont {
  padding-left: 50px;
}
.dia-bot {
  display: flex;
  justify-content: center;
}
</style>