<template>
  <el-container class="fullheight" style="border: 1px solid #eee">
    <div>
      <el-aside class="fullheight" v-show="asideShow" :width="width">
        <el-scrollbar class="dic-data-scrollbar">
          <ht-tree
            :data="dicDatas"
            node-key="id"
            :props="defaultProps"
            :support-filter="true"
            :highlight-current="true"
            :expand-on-click-node="false"
            :default-expand-all="isExpandDic"
            :lazy-filter-text="true"
            @refresh="getType"
            ref="dicDataTree"
            :load="loadNode"
            lazy
            @req-filter-text="reqFilterText"
            @node-click="dicClick"
          >
            <template slot="custom-button">
              <i
                class="el-icon-circle-plus-outline"
                title="新增分类"
                @click="handleCommand({action: 'typeAdd'})"
              ></i>
            </template>
            <span class="custom-tree-node" slot-scope="{node, data}">
              <span class="show-ellipsis" :title="node.label">{{
                node.label
              }}</span>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <i class="icon-more" title="更多操作" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    icon="el-icon-plus"
                    v-if="data.parentId == '5'"
                    :command="{node: node, data, action: 'dicAdd'}"
                    >添加</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="el-icon-edit"
                    :command="{node: node, data, action: 'edit'}"
                    >编辑</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="el-icon-delete"
                    v-if="data.parentId != '5'"
                    :command="{node: node, data, action: 'dicDelete'}"
                    >删除</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="el-icon-delete"
                    v-if="data.parentId == '5'"
                    :command="{node: node, data, action: 'delete'}"
                    >删除</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="el-icon-upload2"
                    v-if="data.parentId == '5'"
                    :command="{node: node, data, action: 'import'}"
                    >导入</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="el-icon-download"
                    :command="{node: node, data, action: 'export'}"
                    >导出</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </ht-tree>
        </el-scrollbar>
      </el-aside>
      <div
        class="navbar-collapse"
        :style="navbarCollapseStyle"
        @click="asideShow = !asideShow"
      >
        <div class="navbar-collapse-bg">
          <i
            class="navbar-collapse-arrow"
            :class="{
              'el-icon-arrow-left': asideShow,
              'el-icon-arrow-right': !asideShow
            }"
          ></i>
        </div>
      </div>

      <!-- 导入 -->
      <el-dialog
        :visible.sync="dialogImportVisible"
        title="导入"
        width="40%"
        top="30vh"
        custom-class="upload-dialog"
      >
        <el-form ref="form" label-width="150px" class="upload-dialog__contnt">
          <ht-form-item label="默认模板">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-download"
              @click="downloadTemplate()"
              >模板下载
            </el-button>
          </ht-form-item>
          <ht-form-item label="文件">
            <el-upload
              :action="importUrl"
              :http-request="importData"
              :before-upload="beforeUpload"
              :on-exceed="onExceed"
              :file-list="fileList"
              accept=".xls,.xlsx"
              :limit="1"
              :auto-upload="false"
              ref="upload"
              :on-error="onError"
            >
              <el-button size="small" icon="el-icon-upload">选择文件</el-button>
              <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
            </el-upload>
          </ht-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelConfirm()">取 消</el-button>
          <el-button
            type="primary"
            @click="submitImport"
            element-loading-text="拼命导入中"
            v-loading.fullscreen.lock="fullscreenLoading"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <el-dialog
        title="温馨提示"
        :visible="myDialogVisible"
        :before-close="beforeClose2"
        name="myDialogVisible"
        width="30%"
        custom-class="upload-dialog"
        top="30vh"
      >
        <span>部分数据字典项已存在，请确认重复项的导入操作！</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="default" @click="beforeClose2">取消</el-button>
          <el-button type="primary" @click="confirmSubmit('jump')"
            >跳过重复项</el-button
          >
          <el-button type="primary" @click="confirmSubmit('cover')"
            >覆盖更新</el-button
          >
        </span>
      </el-dialog>

      <!-- 添加字典 -->
      <el-dialog
        :title="dicTitle"
        :visible="dicDialogVisible"
        :before-close="beforeClose2"
        name="myDialogVisible"
        width="30%"
        custom-class="upload-dialog"
        top="30vh"
      >
        <el-form :model="dicData" data-vv-scope="editDic">
          <ht-form-item
            :label="dicTitle == '新增字典项' ? '字典项名称' : '数据字典名称'"
            label-width="110px"
          >
            <ht-input
              v-model="dicData.name"
              autocomplete="off"
              :validate="{required: true, max: 40}"
              :maxlength="40"
              :showWordLimit="true"
            >
              <el-button
                icon="icon-guojihua"
                slot="append"
                style="width: 80px"
                @click="
                  editI18nMessage(`dictionary.${dicData.typeId}.${dicData.key}`)
                "
                >国际化</el-button
              >
            </ht-input>
          </ht-form-item>
          <ht-form-item label="别名" label-width="110px">
            <ht-input
              v-model="dicData.key"
              v-pinyin="dicData.name"
              autocomplete="off"
              :validate="{required: true, max: 40}"
              placeholder="请输入key"
              :disabled="dicData.id ? true : false"
              :maxlength="40"
              :showWordLimit="true"
            />
          </ht-form-item>
          <ht-form-item label label-width="80px"
            >当前{{
              dicTitle == '新增字典项' ? '字典项别名' : '数据字典别名'
            }}必须唯一</ht-form-item
          >
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dicDialogVisible = false">取 消</el-button>
          <ht-submit-button
            :url="saveDicDataUrl"
            :model="dicData"
            scope-name="editDic"
            @after-save-data="afterSaveDicData"
            >{{ $t('eip.common.save') }}</ht-submit-button
          >
        </div>
      </el-dialog>

      <!-- 添加分类 -->
      <el-dialog
        :title="typeTitle"
        :visible="dialogVisible"
        :before-close="beforeClose2"
        name="myDialogVisible"
        width="30%"
        custom-class="upload-dialog"
        top="30vh"
      >
        <el-form :model="sysType" data-vv-scope="editSysTypeForm">
          <ht-form-item label="分类名称" label-width="100px">
            <ht-input
              v-model="sysType.name"
              autocomplete="off"
              :validate="{required: true, max: 40}"
              :maxlength="30"
              :showWordLimit="true"
            >
            </ht-input>
          </ht-form-item>
          <ht-form-item label="分类Key" label-width="100px">
            <ht-input
              v-model="sysType.typeKey"
              v-pinyin="sysType.name"
              autocomplete="off"
              :validate="{
                required: true,
                regex: {
                  exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                  message: '只能输入字母、数字、下划线，且以字母开头'
                },
                max: 40
              }"
              placeholder="请输入key"
              :disabled="sysType.id ? true : false"
              :maxlength="30"
              :showWordLimit="true"
            />
          </ht-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <ht-submit-button
            :url="saveSysTypeUrl"
            :model="sysType"
            scope-name="editSysTypeForm"
            @after-save-data="afterSaveData"
            >{{ $t('eip.common.save') }}</ht-submit-button
          >
        </div>
      </el-dialog>
    </div>
    <el-container>
      <el-main class="fullheight">
        <ht-table
          ref="dataDicTable"
          @load="loadData"
          :data="dicList"
          :pageResult="pageResult"
          :selection="true"
          quick-search-props="name,key"
          :show-export="false"
          @selection-change="handleSelectionChange"
        >
          <template v-slot:toolbar>
            <el-button
              icon="el-icon-plus"
              @click="handleCommand({action: 'dicAdd', typesLevel: 'two'})"
              type="primary"
              >添加</el-button
            >
            <ht-delete-button
              :url="dicDeleteUrl"
              :htTable="$refs.dataDicTable"
              style="margin-left:10px;"
              :disabled="isDelDisabled"
              >删除</ht-delete-button
            >
          </template>
          <template>
            <ht-table-column
              type="index"
              width="78"
              align="center"
              label="序号"
            />
            <ht-table-column
              prop="name"
              label="字典项名称"
              width="330"
              :sortable="true"
            >
              <template v-slot="{row}">
                <el-link
                  type="primary"
                  @click="handleCommand({data: row, action: 'edit'})"
                  >{{ row.name }}</el-link
                >
              </template>
            </ht-table-column>
            <ht-table-column
              prop="key"
              label="别名"
              width="266"
              :sortable="true"
            />
            <ht-table-column prop="createName" label="创建人" />
            <ht-table-column
              prop="createTime"
              label="创建时间"
              :sortable="true"
            />
            <ht-table-column width="192" label="操作">
              <template v-slot="{row, index}">
                <el-button
                  type="text"
                  @click="handleCommand({moveIndex: index, action: 'dicUp'})"
                  :disabled="index == 0"
                  >上移</el-button
                >
                <el-button
                  type="text"
                  @click="handleCommand({moveIndex: index, action: 'dicDown'})"
                  :disabled="index == dicList.length - 1"
                  >下移</el-button
                >
                <el-button
                  type="text"
                  @click="handleCommand({data: row, action: 'dicDelete'})"
                  >删除</el-button
                >
              </template>
            </ht-table-column>
          </template>
        </ht-table>
      </el-main>
    </el-container>
    <i18n-message-edit ref="i18nMessageEdit" :messageKey="i18nMessageKey" />
  </el-container>
</template>
<script>
import {Message} from 'element-ui'
import styles from '@/assets/css/element-variables.scss'
import portalApi from '@/api/portal.js'
import req from '@/request.js'
import i18nMessageEdit from '@/components/system/I18nMessageEdit.vue'
export default {
  components: {
    i18nMessageEdit
  },
  props: {
    width: {
      type: String,
      default: styles.aside_width
    },
    supportFilter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dicData: {
        key: '',
        name: '',
        parentId: '',
        typeId: ''
      },
      dicParentId: '', //存储数据字典父类id用于刷新数据字典树
      title: '添加数据字典分类',
      dicTitle: '',
      typeTitle: '',
      asideShow: true,
      isExpand: true,
      isExpandDic: false,
      dialogVisible: false,
      dicDialogVisible: false,
      dialogImportVisible: false,
      fullscreenLoading: false,
      fileList: [],
      sysType: {
        children: [],
        icon: '{}',
        isLeaf: 'N',
        struType: 0,
        typeKey: '',
        name: ''
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      data: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      bpmForm: {
        key: '',
        bos: '',
        desc: ''
      },
      myFormData: {},
      myDialogVisible: false,
      dicDatas: [],
      noDataImg: require('@/assets/nodata_images/no-data-dictionary.png'),
      i18nMessageKey: '',
      dicList: [],
      isDisabled: true,
      isDelDisabled: true,
      selectedList: [],
      parentNode: {},
      typesLevel: ''
    }
  },
  watch: {
    dialogImportVisible(val) {
      if (!val) {
        this.fileList = []
      }
    },
    dicList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    },
    selectedList: {
      handler(val) {
        this.isDelDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  computed: {
    navbarCollapseStyle: function() {
      if (this.asideShow) {
        return {
          left: parseInt(this.width) + 'px'
        }
      }
      return {
        left: '0px'
      }
    },
    dicDeleteUrl: function() {
      return window.context.portal + '/sys/dataDict/v1/remove'
    },
    saveSysTypeUrl: function() {
      return `${window.context.portal}/sys/sysType/v1/save?parentId=5&isRoot=1&isPriNode=0`
    },
    saveDicDataUrl: function() {
      return `${window.context.portal}/sys/dataDict/v1/save`
    },
    importUrl: function() {
      return window.context.portal + '/sys/dataDict/v1/import'
    },
    treeUrl() {
      return (
        window.context.portal +
        '/sys/sysType/v1/getByParentIdOrLikeName?catId=5'
      )
    }
  },
  mounted() {
    this.getType()
  },
  methods: {
    //懒加载
    loadNode(node, resolve) {
      if (
        node &&
        node.data &&
        node.data instanceof Object &&
        node.data.parentId == 5
      ) {
        req.get(this.treeUrl + '&parentId=' + node.data.id).then(res => {
          if (res && res.status == 200) {
            let list = res.data
            list.forEach(item => {
              item.leaf = true
            })
            this.dicDatas.forEach(item => {
              if (item.id == node.data.id) {
                item.children = list
              }
            })
            resolve(list)
          } else {
            resolve([])
          }
        })
      }
    },
    //树搜索
    reqFilterText(val) {
      req.get(this.treeUrl + '&typeName=' + val).then(res => {
        if (res && res.status == 200) {
          this.dicDatas = res.data
        } else {
          this.$message({
            type: 'error',
            message: '分类加载失败'
          })
        }
      })
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    loadData(param, cb) {
      let this_ = this
      let _param = {querys: [], sorter: []}
      _param = {..._param, ...param}
      if (this_.currentNode && this_.currentNode.parentId != '5') {
        _param.querys.push({
          property: 'parentId',
          value: this_.currentNode.id,
          group: 'parentId',
          operation: 'EQUAL',
          relation: 'AND'
        })
        _param.sorter.push({
          property: 'sn',
          direction: 'ASC'
        })
        req
          .post(window.context.portal + '/sys/dataDict/v1/listJson', _param)
          .then(res => {
            if (res) {
              this_.dicList = res.data.rows
              this_.pageResult = {
                page: res.data.page,
                pageSize: res.data.pageSize,
                total: res.data.total
              }
            }
          })
          .finally(() => cb())
      } else {
        this_.dicList = []
        cb()
      }
    },
    getType() {
      // typeKey=DIC
      req
        .get(
          window.context.portal +
            '/sys/sysType/v1/getByParentIdOrLikeName?catId=5'
        )
        .then(res => {
          if (res && res.status == 200) {
            this.dicDatas = res.data
          } else {
            this.$message({
              type: 'error',
              message: '分类加载失败'
            })
          }
        })
    },
    beforeClose2() {
      this.myDialogVisible = false
      this.dicDialogVisible = false
      this.dialogVisible = false
    },
    confirmSubmit(arg) {
      const this_ = this
      let url =
        window.context.portal +
        '/sys/dataDict/v1/importData?typeId=' +
        this_.sysType.id +
        '&status=' +
        arg
      req.post(url, this_.myFormData).then(function(rep) {
        let res = rep.data
        if (res && res.state) {
          Message.success(res.message)
        } else {
          Message.error(res.message || '保存失败')
        }
        this_.dialogImportVisible = false
        this_.$refs.upload.clearFiles()
        this_.fileList = []
        this_.beforeClose2()
        this_.getType()
        this_.$refs.dataDicTable.load()
      })
    },
    handleCommand(command) {
      let node = command.node
      let data = command.data
      let action = command.action

      //判断是树的add 还是 表格上面的add
      if (command.typesLevel) {
        this.typesLevel = command.typesLevel
      } else {
        this.typesLevel = ''
      }
      if (node) {
        this.parentNode = node.parent.data
      }

      switch (action) {
        case 'typeAdd':
          this.typeTitle = '新增数据字典分类'
          this.dialogVisible = true
          this.dicTypeAdd = true
          this.sysType.id = ''
          this.sysType.name = ''
          this.sysType.typeKey = ''
          this.sysType.parentId = '5'
          this.sysType.typeGroupKey = 'DIC'
          break
        case 'import':
          var newDicdata = {}
          Object.assign(newDicdata, data)
          this.sysType = newDicdata
          this.dialogImportVisible = true
          break
        case 'delete':
          if (data.id) {
            let this_ = this
            this.$confirm(
              `是否确定删除 [${data.name}]  及其子分类（包含分类下数据字典项数据）?`,
              '提示',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }
            ).then(() => {
              this_.$http
                .get(
                  '${portal}/sys/dataDict/v1/removeByTypeId?typeIds=' + data.id
                )
                .then(
                  resp => {
                    let data = resp.data
                    if (data.state) {
                      this.$message({
                        type: 'success',
                        message: data.message || '删除成功'
                      })
                      this.$refs.htDataDicTree.loadData()
                      this.getType()
                      this.dicDatas = null
                    } else {
                      this.$message.error(data.message || '删除失败')
                    }
                  },
                  error => {
                    this.$message.error(error || '删除失败')
                  }
                )
                .catch(() => {
                  this.dialogVisible = false
                })
            })
          }
          break
        case 'dicAdd': //数据字典添加
          if (data) {
            this.dicTitle = '新增数据字典'
            this.dicData.typeId = data.id
            this.dicData.parentId = data.id
          } else {
            if (!this.currentNode || this.currentNode.parentId == '5') {
              this.$message.warning('请先选择数据字典')
              return
            }
            this.dicTitle = '新增字典项'
            this.dicData.typeId = this.currentNode.parentId
            this.dicData.parentId = this.currentNode.id
          }

          this.dicDialogVisible = true
          this.dicData.name = ''
          this.dicData.key = ''
             this.dicData.id = ''

          break
        case 'dicDelete':
          if (data.id) {
            this.$confirm(`是否确定删除 [${data.name}] ?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              portalApi
                .delDataDict(data.id)
                .then(
                  data => {
                    if (data.state) {
                      this.$message({
                        type: 'success',
                        message: data.message || '删除成功'
                      })
                    } else {
                      this.$message.error(data.message || '删除成功')
                    }
                  },
                  error => {
                    this.$message.error(error || '删除失败')
                  }
                )
                .catch(() => {
                  this.dicDialogVisible = false
                })
                .finally(() => {
                  this.$refs.dataDicTable.load()
                  // this.getType()
                })
            })
          }
          break
        case 'edit':
          if (data.parentId != '5') {
            this.editDic(data)
          } else {
            this.editType(data)
          }
          break
        case 'dicUp':
          this.movePosition(command.moveIndex, 'up')
          break
        case 'dicDown':
          this.movePosition(command.moveIndex, 'down')
          break
        case 'export':
          //导出成excel
          this.exportExcel(node.data)
          break
        default:
          break
      }
    },
    movePosition(index, action) {
      let param = {}
      if (action == 'up') {
        param['first'] = this.dicList[index].id
        param['second'] = this.dicList[index - 1].id
      } else {
        param['first'] = this.dicList[index].id
        param['second'] = this.dicList[index + 1].id
      }
      req
        .post(window.context.portal + '/sys/dataDict/v1/movePosition', param)
        .then(req => {
          if (req && req.status == 200) {
            this.$refs.dataDicTable.load()
            this.$message.success('移动成功')
          } else {
            this.$message.error('移动失败')
          }
        })
    },
    editDic(data) {
      this.dicTitle = '编辑数据字典'
      if (!data.key) {
        data.key = data.typeKey
      }
      if (!data.typeId) {
        data.typeId = data.parentId
      }
      //克隆一个对象 以免数据与树动态绑定
      this.dicData = {
        ...data
      }
      this.dicDialogVisible = true
    },
    editType(data) {
      this.typeTitle = '编辑数据字典分类'
      //克隆一个对象 以免数据与树动态绑定
      var newDicdata = {}
      //克隆一个对象 以免数据与树动态绑定
      Object.assign(newDicdata, data)
      this.sysType = newDicdata
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      this.dicDialogVisible = false
    },
    afterSaveData() {
      if (this.sysType.id) {
        // this.getType()
        this.dicDatas.forEach(item => {
          if (item.id === this.sysType.id) {
            item.name = this.sysType.name
            item.typeKey = this.sysType.typeKey
          }
        })
        this.dialogVisible = false
        return
      }
      this.sysType.name = ''
      this.sysType.typeKey = ''
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      })
        .then(() => {
          this.getType()
        })
        .catch(() => {
          this.getType()
          this.dialogVisible = false
        })
    },
    addChangeTree() {
      this.dicDatas.forEach(item => {
        if (item.id == this.parentNode.id) {
          item.children.forEach(chiItem => {
            if (chiItem.id == this.dicData.id) {
              chiItem.name = this.dicData.name
              chiItem.typeKey = this.dicData.typeKey
            }
          })
        }
      })
    },
    afterSaveDicData() {
      if (this.dicData.id) {
        this.dicDialogVisible = false

        this.$refs.dataDicTable.load()
        // this.getType()

        this.addChangeTree()
        return
      }
      this.dicData.name = ''
      this.dicData.key = ''
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      })
        .then(() => {})
        .catch(() => {
          this.dicData = {
            key: '',
            name: '',
            parentId: '',
            typeId: ''
          }
          this.dicDialogVisible = false
        })
        .finally(() => {
          if (this.typesLevel === 'two') {
            this.addChangeTree()
          } else {
            this.getType()
          }
          this.$refs.dataDicTable.load()
        })
    },
    //导入
    importData(param) {
      let formData = new FormData()
      formData.append('file', param.file)
      portalApi
        .importDataDict(formData, this.sysType.id)
        .then(data => {
          this.fullscreenLoading = false
          if (data.state) {
            if (data.message && data.message == 'confirmUpload') {
              this.myFormData = formData
              this.myDialogVisible = true
            } else {
              this.$message({
                type: 'success',
                message: data.message
              })
              param.onSuccess()
              this.dialogImportVisible = false
              this.$refs.upload.clearFiles()
              this.fileList = []
              this.$refs.dataDicTable.load()
              this.getType()
            }
          } else {
            this.$message.error(data.message)
            param.onError()
          }
        })
        .catch(() => {
          this.fullscreenLoading = false
          this.fileList = []
        })
    },
    beforeUpload(file) {
      var FileExt = file.name.replace(/.+\./, '')
      if ('xls' != FileExt.toLowerCase() && 'xlsx' != FileExt.toLowerCase()) {
        this.$message({
          type: 'warning',
          message: '请上传后缀名为xls或xlsx的文档'
        })
        return false
      }
      this.fullscreenLoading = true
    },
    onError() {
      this.fileList = []
    },
    onExceed(file) {
      this.$message.warning('只能选择一个xls/xlsx文件!')
    },
    submitImport() {
      if (
        !this.$refs.upload.uploadFiles ||
        this.$refs.upload.uploadFiles.length == 0
      ) {
        this.$message.warning('请上传数据字典文件进行导入')
        return false
      }
      if (this.sysType.id && this.sysType.id == '') {
        this.$message.warning('请选择某一个分类进行导入!')
      }
      this.$refs.upload.submit()
    },
    cancelConfirm() {
      this.$refs.upload.clearFiles()
      this.fileList = []
      this.dialogImportVisible = false
    },
    //下载模板
    downloadTemplate() {
      window.location.href =
        window.context.manage + '/static/excel/dictionary.xls'
    },
    exportExcel(data) {
      let typeId = ''
      let dictId = ''
      if (data.parentId == '5') {
        typeId = data.id
      } else {
        typeId = data.parentId
        dictId = data.id
      }
      let url =
        window.context.portal +
        '/sys/dataDict/v1/export?typeId=' +
        typeId +
        '&dictId=' +
        dictId
      req.download(url).then(resp => {
        if (resp.status == 200) {
          this.$message({
            type: 'success',
            message: '导出成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: '导出失败'
          })
        }
      })
    },
    dicClick(data) {
      this.currentNode = data
      this.$refs.dataDicTable.load()
    },
    editI18nMessage(data) {
      this.i18nMessageKey = data
      this.$refs.i18nMessageEdit.handleOpen()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0px;
}
.el-tree__empty-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .no-data-text {
    margin: 0;
  }
}
>>> .navbar-collapse {
  position: absolute;
  top: 41%;
  cursor: pointer;
  z-index: 999;
  width: 20px;
}

>>> .el-dropdown {
  display: none;
}

>>> .el-tree-node__content:hover .el-dropdown {
  display: inline-block;
}

>>> .navbar-collapse:hover {
  transform: scale(1.1) translateY(2px);
}

>>> .navbar-collapse:hover .navbar-collapse-arrow {
  color: #333333;
}

>>> .navbar-collapse-arrow {
  position: absolute;
  top: 38%;
  right: 4px;
  font-size: 18px;
  color: #a8a8a8;
}

>>> .navbar-collapse-bg {
  -webkit-transition: all 0.12s ease;
  height: 50px;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 12px solid #ebebeb;
  border-top: 8px solid transparent;
  opacity: 0.9;
}

.el-aside-footer {
  position: absolute;
  bottom: 21px;
}

>>> .custom-tree-node {
  width: calc(100% - 40px);
  // flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.custom-tree-node i {
  visibility: hidden;
  font-weight: bold;
}

.custom-tree-node:hover i {
  visibility: visible;
}

.dic-data-scrollbar {
  height: 100%;
  border-right: 1px solid #eee;
}

.dic-data-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}

/deep/ .el-dialog.upload-dialog {
  .upload-dialog__content {
    height: 150px;
  }
}

.dialog-footer-margin {
  margin-left: 80px;
}

.tree-icon {
  margin-right: 8px;
  cursor: pointer;
}

.main-div {
  padding: 20px;
}
</style>
