From 01637bade8fd28d8639b376f276321083bc6e3b0 Mon Sep 17 00:00:00 2001
From: zhangboxuan <zhangboxuan@kylinsec.com.cn>
Date: Fri, 18 Oct 2024 10:26:51 +0800
Subject: [PATCH] =?UTF-8?q?feat=20task=E6=96=B0=E5=A2=9E=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E7=BB=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mc-components/animate/loading-animate.vue | 133 +++
 .../mc-components/chart/Echarts.vue           |  80 ++
 .../mc-components/chart/echarts-update.vue    |  95 ++
 .../dialog/choose/choose-dialog.vue           | 496 ++++++++++
 .../choose/components/left-tree-group.vue     | 194 ++++
 .../choose/components/mid-group-list.vue      | 165 ++++
 .../dialog/choose/components/props.js         |  43 +
 .../choose/components/right-selected-list.vue | 129 +++
 .../mc-components/dialog/confirm-password.vue | 134 +++
 .../mc-components/dropdown/mc-dropdown.vue    | 226 +++++
 .../mc-components/input/mc-down-input.vue     | 126 +++
 .../mc-components/input/mc-input-choose.vue   | 116 +++
 .../mc-components/input/mc-input-ip.vue       | 358 ++++++++
 .../mc-components/select-file/select-file.vue | 191 ++++
 .../mc-components/select-tag/select-tag.vue   | 163 ++++
 .../table/mc-single-table/index.vue           | 154 ++++
 .../mc-components/table/mc-table-column.vue   | 220 +++++
 .../mc-components/table/mc-table.vue          | 554 ++++++++++++
 .../table/select-table/formatter.js           |  30 +
 .../table/select-table/mc-select-table.vue    | 586 ++++++++++++
 .../table/select-table/select-column.vue      | 220 +++++
 .../select-table-comp/selectTag.vue           | 115 +++
 .../mc-components/time/time-range-simple.vue  | 388 ++++++++
 .../mc-components/time/time-range.vue         | 368 ++++++++
 .../components/left-tree/index.vue            | 183 ++++
 .../components/left-tree/mixin.js             |  56 ++
 .../components/left-tree/tab-left-user.vue    | 144 +++
 .../components/left-tree/tab-right-label.vue  | 103 +++
 .../components/mid-table/index.vue            | 195 ++++
 .../components/mid-table/mix-table.js         | 167 ++++
 .../components/right-table/index.vue          |  58 ++
 .../components/right-table/table.vue          | 193 ++++
 .../tree/three-column-tree/index.vue          | 121 +++
 .../tree/three-column-tree/prop.js            | 170 ++++
 .../mc-components/tree/tree-group/index.vue   | 246 +++++
 .../mc-components/tree/tree-group/prop.js     |  86 ++
 .../mc-components/upload/index.js             | 193 ++++
 .../mc-components/upload/upload-file.vue      | 847 ++++++++++++++++++
 .../mc-components/upload/upload-list.vue      | 137 +++
 39 files changed, 8183 insertions(+)
 create mode 100644 src/components-new/mc-components/animate/loading-animate.vue
 create mode 100644 src/components-new/mc-components/chart/Echarts.vue
 create mode 100644 src/components-new/mc-components/chart/echarts-update.vue
 create mode 100644 src/components-new/mc-components/dialog/choose/choose-dialog.vue
 create mode 100644 src/components-new/mc-components/dialog/choose/components/left-tree-group.vue
 create mode 100644 src/components-new/mc-components/dialog/choose/components/mid-group-list.vue
 create mode 100644 src/components-new/mc-components/dialog/choose/components/props.js
 create mode 100644 src/components-new/mc-components/dialog/choose/components/right-selected-list.vue
 create mode 100644 src/components-new/mc-components/dialog/confirm-password.vue
 create mode 100644 src/components-new/mc-components/dropdown/mc-dropdown.vue
 create mode 100644 src/components-new/mc-components/input/mc-down-input.vue
 create mode 100644 src/components-new/mc-components/input/mc-input-choose.vue
 create mode 100644 src/components-new/mc-components/input/mc-input-ip.vue
 create mode 100644 src/components-new/mc-components/select-file/select-file.vue
 create mode 100644 src/components-new/mc-components/select-tag/select-tag.vue
 create mode 100644 src/components-new/mc-components/table/mc-single-table/index.vue
 create mode 100644 src/components-new/mc-components/table/mc-table-column.vue
 create mode 100644 src/components-new/mc-components/table/mc-table.vue
 create mode 100644 src/components-new/mc-components/table/select-table/formatter.js
 create mode 100644 src/components-new/mc-components/table/select-table/mc-select-table.vue
 create mode 100644 src/components-new/mc-components/table/select-table/select-column.vue
 create mode 100644 src/components-new/mc-components/table/select-table/select-table-comp/selectTag.vue
 create mode 100644 src/components-new/mc-components/time/time-range-simple.vue
 create mode 100644 src/components-new/mc-components/time/time-range.vue
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/components/left-tree/index.vue
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/components/left-tree/mixin.js
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/components/left-tree/tab-left-user.vue
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/components/left-tree/tab-right-label.vue
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/components/mid-table/index.vue
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/components/mid-table/mix-table.js
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/components/right-table/index.vue
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/components/right-table/table.vue
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/index.vue
 create mode 100644 src/components-new/mc-components/tree/three-column-tree/prop.js
 create mode 100644 src/components-new/mc-components/tree/tree-group/index.vue
 create mode 100644 src/components-new/mc-components/tree/tree-group/prop.js
 create mode 100644 src/components-new/mc-components/upload/index.js
 create mode 100644 src/components-new/mc-components/upload/upload-file.vue
 create mode 100644 src/components-new/mc-components/upload/upload-list.vue

diff --git a/src/components-new/mc-components/animate/loading-animate.vue b/src/components-new/mc-components/animate/loading-animate.vue
new file mode 100644
index 0000000..9fc77a9
--- /dev/null
+++ b/src/components-new/mc-components/animate/loading-animate.vue
@@ -0,0 +1,133 @@
+<!--加载中仿进度条-->
+<template>
+  <el-dialog
+    :title="$t(loadingTitle)"
+    :visible="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="!isAll"
+    width="600px"
+    class="loading-animate"
+    :class="isAll ? 'loading-all-animate' : ''"
+    :top="top"
+    :append-to-body="appendToBody"
+    :before-close="handleClose"
+    @close="handleClose"
+  >
+    <div class="content">
+      <p v-if="isAll" class="title">{{ $t('loading.title') }}</p>
+      <el-progress :text-inside="true" :stroke-width="15" :percentage="percent" status="success" />
+      <p class="info">{{ tipsInfo }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+// @group 组件组合的封装 mc-components
+//  加载中仿进度条
+export default {
+  // 动态加载中组件是否显示
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // 默认大概20s可以走完进度条
+    time: {
+      type: Number,
+      default: 20
+    },
+    // 提示文字
+    tipsInfo: {
+      type: String,
+      default: ''
+    },
+    // 弹窗类型，空表示一般弹窗，all 表示覆盖弹窗，此时不显示关闭按钮
+    loadingType: {
+      type: String,
+      default: ''
+    },
+    top: {
+      type: String,
+      default: '15vh'
+    },
+    loadingTitle: {
+      type: String,
+      default: 'loading.title'
+    },
+    appendToBody: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      percent: 5,
+      isAll: this.loadingType === 'all' // 是否属于覆盖弹窗
+    }
+  },
+  created () {
+    this.randomPercent()
+  },
+  methods: {
+    handleClose () {
+      this.$emit('update:show', false)
+      this.$emit('close')
+    },
+    randomPercent () {
+      const timer = setInterval((res) => {
+        const percent = Math.round(Math.random() * (99 / this.time) + 1) // 每秒进度
+        if (this.percent + percent >= 99) {
+          clearInterval(timer)
+          return
+        }
+        this.percent += percent
+      }, 1000)
+    },
+    end () {
+      this.percent = 100
+      this.$emit('update:show', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.loading-animate {
+  .el-progress-bar__outer {
+    border: 1px #13ce66 solid;
+  }
+}
+
+.loading-all-animate {
+  .el-dialog__header,
+  .el-dialog__footer {
+    display: none;
+  }
+  .el-dialog {
+    background: #efefef;
+    box-shadow: none;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.loading-animate {
+  .content {
+    padding: 0 10%;
+    .info {
+      line-height: 1.5;
+    }
+  }
+}
+.loading-all-animate {
+  .content {
+    .title {
+      font-size: 18px;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/chart/Echarts.vue b/src/components-new/mc-components/chart/Echarts.vue
new file mode 100644
index 0000000..edc39a1
--- /dev/null
+++ b/src/components-new/mc-components/chart/Echarts.vue
@@ -0,0 +1,80 @@
+<template>
+  <div :id="id" ref="canvasMap" :class="[className]" style="{height: 100%,width: 100%}" />
+</template>
+<script>
+import echarts from 'echarts'
+// @group 组件组合的封装 mc-components
+//  echart 控件，使用文档请参考 https://echarts.apache.org/v4/zh/api.html#echarts
+export default {
+  props: {
+    // className
+    className: {
+      type: String,
+      default: ''
+    },
+    // 图表唯一id
+    id: {
+      type: String,
+      required: true,
+      default: 'chart'
+    },
+    // 图表的相关参数
+    chartData: {
+      type: Object,
+      default: function () {
+        return null
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      immediate: true,
+      deep: true,
+      handler (newVal, oldVal) {
+        if (this.chart) {
+          if (newVal) {
+            this.setOption(newVal)
+          } else {
+            this.setOption(oldVal)
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      let ele = document.getElementById(this.id)
+      if (!ele) {
+        ele = this.$refs.canvasMap
+      }
+      this.chart = echarts.init(ele)
+      this.setOption(this.chartData)
+      window.addEventListener('resize', () => {
+        this.chart && this.resize()
+      })
+    },
+    resize () {
+      this.chart.resize()
+    },
+    setOption (option) {
+      this.chart.clear()
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
diff --git a/src/components-new/mc-components/chart/echarts-update.vue b/src/components-new/mc-components/chart/echarts-update.vue
new file mode 100644
index 0000000..da4391b
--- /dev/null
+++ b/src/components-new/mc-components/chart/echarts-update.vue
@@ -0,0 +1,95 @@
+<template>
+  <div :id="id" ref="canvasMap" :class="[className]" style="{height: 100%,width: 100%}" />
+</template>
+<script>
+import * as echarts from 'echarts522'
+
+// @group 组件组合的封装 mc-components
+//  echart 控件
+export default {
+  props: {
+    // className
+    className: {
+      type: String,
+      default: ''
+    },
+    // 图表唯一id
+    id: {
+      type: String,
+      required: true,
+      default: 'chart'
+    },
+    // 图表的相关参数
+    chartData: {
+      type: Object,
+      default: function () {
+        return null
+      }
+    },
+    // 是否启动每个分类区域鼠标click事件
+    isRunClick: {
+      type: Boolean,
+      default: false
+    },
+    // 鼠标click事件，isRunClick为true时候才执行
+    clickEvent: {
+      type: Function,
+      default: () => {
+        return function () {}
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      immediate: true,
+      deep: true,
+      handler (newVal, oldVal) {
+        if (this.chart) {
+          if (newVal) {
+            this.setOption(newVal)
+          } else {
+            this.setOption(oldVal)
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      let ele = document.getElementById(this.id)
+      if (!ele) {
+        ele = this.$refs.canvasMap
+      }
+      this.chart = echarts.init(ele)
+      if (this.isRunClick) {
+        this.clickEvent()
+      }
+      this.setOption(this.chartData)
+      window.addEventListener('resize', () => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      })
+    },
+    setOption (option) {
+      this.chart.clear()
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
diff --git a/src/components-new/mc-components/dialog/choose/choose-dialog.vue b/src/components-new/mc-components/dialog/choose/choose-dialog.vue
new file mode 100644
index 0000000..d5058b9
--- /dev/null
+++ b/src/components-new/mc-components/dialog/choose/choose-dialog.vue
@@ -0,0 +1,496 @@
+<template>
+  <mc-dialog
+    :visible="true"
+    width="1100px"
+    :title="title||$t('mc-ui.tree.select.dialog.title')"
+    :to-body="true"
+    top="5vh"
+    custom-class="select-dialog"
+    :before-close="handleCancel"
+    @confirm="handleConfirm"
+    @close="handleCancel"
+  >
+    <template #title>
+      <slot name="title" />
+    </template>
+    <div v-loading="isLoading" element-loading-background="rgba(255, 255, 255, 1)" class="flex select-dialog">
+      <left-tree-group
+        ref="left-tree-group"
+        class="left-tree-group"
+        :data="leftTreeData"
+        :load="leftTreeLoad"
+        :lazy="leftTreeLazy"
+        :node-key="leftTreeNodeKey"
+        :current-node-key="leftTreeCurrentNodeKey"
+        :props="leftTreeProps"
+        :pagination="leftTreeSearchPagination"
+        v-bind="$props"
+        @getSearchValue="getSearchValue"
+        @loadMoreSearch="treeLoadMore"
+        @select="getSelectNode"
+        v-on="$listeners"
+      />
+      <mid-group-list
+        ref="mid-group-list"
+        class="mid-group-list"
+        :group-id="groupId"
+        :get-table-list="getMiddleTableList"
+        :table-column="middleTableColumn"
+        :table-key="middleTableKey"
+        :table-search-key="middleTableSearchKey"
+        :table-group-key="middleTableGroupKey"
+        v-bind="$props"
+        :choosed-id="choosedIdList"
+        @selectChange="handleSelectChange"
+      />
+      <right-selected-list
+        ref="right-selected-list"
+        v-model="selectedList"
+        class="right-selected-list"
+        :table-key="middleTableKey"
+        :seletced-column="rightSeletcedColumn"
+        @beforeRemove="beforeRemove"
+        @beforeClear="beforeClear"
+      />
+    </div>
+  </mc-dialog>
+</template>
+<script>
+import { cloneDeep, findIndex, isEmpty } from 'lodash'
+import mcDialog from '@/components-new/mc-ui/dialog/mc-dialog.vue'
+import leftTreeGroup from './components/left-tree-group'
+import midGroupList from './components/mid-group-list'
+import rightSelectedList from './components/right-selected-list'
+import mcTreeProps from '@/components-new/mc-ui/tree/props.js'
+import props from './components/props.js'
+import i18n from '@/lang'
+import { getUserGroupChild, getUserGroupTree, getSearchUserGroupTree } from '@/api/mc-components/components.js'
+
+/**
+ * @group 组件组合的封装 mc-components
+ * 三列分组选择弹窗(左边分组是虚拟树,支持大量数据渲染)
+ *
+ * 使用示例:
+ * [显示控制]
+ *    <choose-dialog v-if="addShow" v-model="addShow" />
+ *
+ * [选择用户与用户分组](mode为user时,只需要设置已选数据choosedList和处理选择结果confirm)
+ *    <choose-dialog v-if="addShow" v-model="addShow"
+ *    mode="user" :choosed-list="[]" @confirm="()=>{}"/>
+ *
+ * [左侧分组数据--一次性加载]
+ *    <choose-dialog v-if="addShow" v-model="addShow" :tree-data="treeData"
+ *    :props="{children:'children',label:'groupName',isLeaf:'leaf' }"/>
+ *
+ * [左侧分组数据--懒加载](loadNode方法参照el-tree懒加载)
+ *    <choose-dialog v-if="addShow" v-model="addShow" tree-lazy
+ *    :tree-load="loadNode" :props="{label:'name',children:'zones',isLeaf:'leaf'}" />
+ *
+ * [左侧分组数据搜索--开启分页模式](默认是搜索后加载所有数据的长列表模式)
+ *    <choose-dialog v-if="addShow" v-model="addShow" tree-search-pagination />
+ *
+ * [点击左侧分组查中间待选择数据]
+ *    <choose-dialog v-if="addShow" v-model="addShow" :tree-data="treeData"
+ *    :props="{label:'name',children:'zones',isLeaf:'leaf'}"
+ *    :get-table-list="getTableList" :table-column="[ {label:'111',value:'name'} ]" />
+ *
+ * [选择中间待选择数据到右侧已选数据,点击"确定"按钮触发confirm方法获取已选](confirm方法会关闭弹窗)
+ *    <choose-dialog v-if="addShow" v-model="addShow" :tree-data="treeData"
+ *    :props="{label:'name',children:'zones',isLeaf:'leaf'}"
+ *    :get-table-list="getTableList" :table-column="[ {label:'111',value:'name'} ]"
+ *    :seletced-column="[ {label:'111',value:'name'}, {label:'路径',value:'path'} ]"
+ *    @confirm="getSelect" />
+ *
+ * [初始化右侧已选数据]
+ *    <choose-dialog v-if="addShow" v-model="addShow" :tree-data="treeData"
+ *    :props="{label:'name',children:'zones',isLeaf:'leaf'}"
+ *    :get-table-list="getTableList" :table-column="[ {label:'111',value:'name'} ]"
+ *    :seletced-column="[ {label:'111',value:'name'}, {label:'路径',value:'path'} ]"
+ *    :choosed-list="[{ id: 2 , name:'123' , path: '456' }]" />
+ *
+ * [点击"确定"按钮触发提示弹窗]
+ *    <choose-dialog v-if="addShow" v-model="addShow" show-confirm-tips
+ *    confirm-tips-title="弹窗标题" confirm-tips-content="弹窗内容" />
+ *
+ * [在右侧已选数据中点击"移除"按钮触发beforeRemove]
+ *    <choose-dialog v-if="addShow" v-model="addShow" @beforeRemove="beforeRemove" />
+ *    beforeRemove (data, resolve) {
+ *      this.confirmTips({
+ *        title: '标题',
+ *        content: '内容'
+ *      }).then(res => {
+ *        //其他逻辑
+ *        //确定
+ *        resolve()
+ *      }).catch(err => {
+ *        //取消
+ *      })
+ *    }
+ *
+ * [在右侧已选数据中点击"清空"按钮触发beforeClear]
+ *    <choose-dialog v-if="addShow" v-model="addShow" @beforeClear="beforeClear" />
+ *    beforeClear (data, resolve) {
+ *      this.confirmTips({
+ *        title: '标题',
+ *        content: '内容'
+ *      }).then(res => {
+ *        //其他逻辑
+ *        //确定
+ *        resolve()
+ *      }).catch(err => {
+ *        //取消
+ *      })
+ *    }
+ */
+export default {
+  components: {
+    mcDialog,
+    leftTreeGroup,
+    midGroupList,
+    rightSelectedList
+  },
+  mixins: [mcTreeProps, props],
+  model: {
+    prop: 'show',
+    event: 'change'
+  },
+  props: {
+    //  弹窗是否显示,请使用v-model
+    show: {
+      type: Boolean,
+      default: true
+    },
+    // 弹窗标题
+    dialogTitle: {
+      type: String,
+      default: ''
+    },
+    // 数据是否加载中
+    isLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 组件类型,目前仅内置用户选择类型,后续可以扩展
+    mode: {
+      // `'custom:自定义'` / `'user:用户'`
+      type: String,
+      default: 'custom'
+    },
+    // tree数据
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    // 加载子树数据的方法，仅当 treeLazy 属性为true 时生效
+    treeLoad: {
+      // `Function(node, resolve)`
+      type: Function,
+      default: () => {}
+    },
+    // 是否懒加载子节点，需与 treeLoad 方法结合使用
+    // 当此项为true时,mc-tree设置的height属性虚拟滚动不会生效
+    treeLazy: {
+      type: Boolean,
+      default: false
+    },
+    // 树搜索是否开启分页模式,此项根据搜索接口是否分页而定,主要是针对接口返回数据的优化(例:用户分组)
+    // 默认:加载所有搜索数据的长列表模式,没有页面性能限制,但是数据量大时对接口的查询不友好(例:终端管理分组)
+    treeSearchPagination: {
+      type: Boolean,
+      default: false
+    },
+    // 右侧已选数据
+    choosedList: {
+      type: Array,
+      default: () => []
+    },
+    // 显示confirmTips弹窗
+    showConfirmTips: {
+      type: Boolean,
+      default: false
+    },
+    // confirmTips弹窗标题,showConfirmTips为true时生效
+    confirmTipsTitle: {
+      type: String,
+      default: i18n.t('mc-ui.tree.select.dialog.confirmTips.title')
+    },
+    // confirmTips弹窗正文,showConfirmTips为true时生效
+    confirmTipsContent: {
+      type: String,
+      default: i18n.t('mc-ui.tree.select.dialog.confirmTips.content')
+    }
+  },
+  data () {
+    return {
+      groupId: this.currentNodeKey || 0, // 最左侧树选择的分组节点id
+      tableSelectionRow: {}, // 中间单选的用户 / 组
+      tableSelectionInfo: {}, // {中间全选的用户 / 组 , 当前表格的数据}
+      selectedList: [], // 右侧已选的列表
+      choosedIdList: [], // 已选id列表
+      leftTreeLazy: false,
+      leftTreeLoad: () => {},
+      leftTreeNodeKey: '',
+      leftTreeCurrentNodeKey: '',
+      leftTreeProps: {},
+      title: '',
+      leftTreeData: [],
+      searchUserPage: 1,
+      leftTreeSearchPagination: false,
+      getMiddleTableList: null,
+      middleTableColumn: [],
+      middleTableKey: '',
+      middleTableSearchKey: '',
+      middleTableGroupKey: '',
+      rightSeletcedColumn: []
+    }
+  },
+  watch: {
+    mode: {
+      immediate: true,
+      handler (val) {
+        this.leftTreeData = this.treeData
+        if (val === 'custom') {
+          this.title = this.dialogTitle
+          // 左边分组树
+          this.leftTreeNodeKey = this.nodeKey
+          this.leftTreeCurrentNodeKey = this.currentNodeKey
+          this.leftTreeSearchPagination = this.treeSearchPagination
+          this.leftTreeLazy = this.treeLazy
+          this.leftTreeLoad = this.treeLoad
+          this.leftTreeProps = this.props
+          // 中间表格
+          this.getMiddleTableList = this.getTableList
+          this.middleTableColumn = this.tableColumn
+          this.middleTableKey = this.tableKey
+          this.middleTableSearchKey = this.tableSearchKey
+          this.middleTableGroupKey = this.tableGroupKey
+          // 右边已选
+          this.rightSeletcedColumn = isEmpty(this.seletcedColumn) ? this.tableColumn : this.seletcedColumn
+        } else if (val === 'user') {
+          // 开启用户选择,设置默认数据
+          this.title = this.dialogTitle || this.$t('choose-dialog.middleTable.select_user')
+          this.leftTreeNodeKey = 'id'
+          this.leftTreeCurrentNodeKey = '0'
+          this.leftTreeSearchPagination = true
+          this.leftTreeLazy = true
+          this.leftTreeLoad = (node, resolve) => {
+            if (node.level === 0) {
+              return resolve([{ name: this.$t('common.all'), id: 0 }])
+            }
+            getUserGroupTree({ groupId: node.data['id'] }).then(res => {
+              resolve(res)
+            })
+          }
+          this.leftTreeProps = {
+            children: 'children',
+            label: 'name',
+            isLeaf: 'leaf'
+          }
+          this.getMiddleTableList = (params) => {
+            return getUserGroupChild(params)
+          }
+          const column = {
+            label: this.$t('choose-dialog.middleTable.user_group'),
+            value: 'name',
+            formatter: (row) => {
+              return (<span><i class={row.itemType === 1 ? 'el-icon-user' : 'el-icon-folder-opened'} />{row.name}</span>)
+            }
+          }
+          this.middleTableColumn = [column]
+          this.middleTableKey = 'uniqueId'
+          this.middleTableSearchKey = 'search'
+          this.middleTableGroupKey = 'groupId'
+          this.rightSeletcedColumn = [column, {
+            label: this.$t('choose-dialog.middleTable.path'),
+            value: 'groupPath'
+          }]
+        }
+      }
+    },
+    selectedList: {
+      deep: true,
+      handler (val) {
+        this.choosedIdList = this.selectedList.map(item => item[this.middleTableKey])
+      }
+    },
+    choosedList: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        // 初始化已选数据
+        this.selectedList = cloneDeep(this.choosedList)
+      }
+    }
+  },
+  methods: {
+    // 内部方法,重新加载树,只有treeLazy为true时且treeSearchPagination为false情况下生效
+    // @arg nodeId:需要开始加载的节点id
+    reloadTree (nodeId) {
+      if (nodeId && nodeId > 0 && !this.treeSearchPagination) {
+        this.$nextTick(() => {
+          const tree = this.$refs['left-tree-group'].refTree()
+          const node = tree.getNode(nodeId) // 要刷新的tree id
+          node.loaded = false
+          node.expand()
+        })
+      }
+    },
+    getSearchValue (val) {
+      if (this.mode === 'user') {
+        if (!val) {
+          this.searchUserPage = 1
+          getUserGroupTree({ groupId: 0 }).then(res => {
+            this.leftTreeData = [{ name: this.$t('common.all'), id: 0, children: res }]
+          })
+          return
+        }
+        this.searchUserTree({ searchVal: val })
+      }
+      // 外部通过此方法可以获取树搜索框的内容
+      // 在搜索框输入内容后点击搜索图标或者回车时触发
+      // @arg val:树搜索时的内容
+      this.$emit('getTreeSearchValue', val)
+    },
+    // 搜索结果,只有mode为user时生效
+    searchUserTree ({ type = '', searchVal = '' } = {}) {
+      getSearchUserGroupTree({ search: searchVal, rows: 20, page: this.searchUserPage }).then(res => {
+        const leftTreeData = res.records.map(item => {
+          item.size = 26
+          return item
+        })
+        if (!isEmpty(this.leftTreeData) && this.leftTreeData[this.leftTreeData.length - 1].id === 'more') {
+          this.leftTreeData.splice(this.leftTreeData.length - 1, 1)
+        }
+        if (this.searchUserPage >= res.totalPage) {
+          // 没有了
+          this.$refs['left-tree-group'].noMore = true
+          setTimeout(() => {
+            this.$refs['left-tree-group'].noMore = false
+          }, 500)
+        } else {
+          this.searchUserPage += 1
+          leftTreeData.push({ name: this.$t('common.getMoreText'), id: 'more', size: 40 })
+        }
+        if (type === 'add') {
+          setTimeout(() => {
+            this.$refs['left-tree-group'].loading = false
+          }, 500)
+          this.leftTreeData = this.leftTreeData.concat(leftTreeData)
+        } else {
+          this.leftTreeData = leftTreeData
+        }
+      })
+    },
+    treeLoadMore () {
+      this.searchUserTree({ type: 'add' })
+    },
+    handleConfirm () {
+      if (this.showConfirmTips) {
+        // 展示confirmTips
+        this.beforeConfirm()
+      } else {
+        // 不展示confirmTips,直接confirm
+        this.toConfirm()
+      }
+    },
+    toConfirm () {
+      // 不展示confirmTips情况下点击确定时触发,
+      // 展示confirmTips情况下点击confirmTips的确定时触发
+      // @arg 返回已选的表格数据
+      this.$emit('confirm', this.selectedList)
+      this.handleClose()
+    },
+    beforeConfirm () {
+      // 点"确定"之后关闭弹窗之前的提示
+      this.confirmTips({
+        title: this.confirmTipsTitle,
+        content: this.confirmTipsContent
+      }).then(_ => {
+        this.toConfirm()
+      }).catch(_ => {})
+    },
+    handleCancel () {
+      // 点击"取消"按钮或者关闭按钮时触发
+      this.$emit('cancel')
+      this.handleClose()
+    },
+    handleClose () {
+      // 内部方法,关闭弹窗时触发,会被v-model绑定,无需调用
+      this.$emit('change', false)
+    },
+    beforeRemove (data, resolve) {
+      // 删除某条已选数据时触发,
+      // @arg data返回即将删除的已选数据,resolve是异步回调,可调用resolve()通知组件进行下一步的删除,不调用则取消删除
+      this.$emit('beforeRemove', data, this.$listeners['beforeRemove'] ? resolve : resolve())
+    },
+    beforeClear (data, resolve) {
+      // 清空全部已选数据时触发,
+      // @arg data返回即将删除的已选数据,resolve是异步回调,可调用resolve()通知组件进行下一步的删除,不调用则取消删除
+      this.$emit('beforeClear', data, this.$listeners['beforeClear'] ? resolve : resolve())
+    },
+    closeLoading () {
+      this.isLoading = false
+    },
+    getSelectNode (data) {
+      this.groupId = data[this.nodeKey]
+    },
+    handleSelectChange (selection, type) {
+      const selectedList = cloneDeep(this.selectedList)
+      for (const select of selection) {
+        if (type === 'add') {
+          if (selectedList.length === 0) {
+            this.selectedList.push(select)
+            continue
+          }
+          if (selectedList.filter(item => item[this.middleTableKey] === select[this.middleTableKey]).length === 0) {
+            this.selectedList.push(select)
+          }
+        } else if (type === 'reduce') {
+          this.selectedList.splice(findIndex(this.selectedList, [this.middleTableKey, select[this.middleTableKey]]), 1)
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.select-dialog{
+  .el-dialog__body{
+    padding: 0;
+  }
+  .sub-title{
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 15px;
+    border-bottom: 1px $lightBorderColor solid;
+  }
+  .mc-table{
+    margin-top: 0;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.select-dialog{
+  overflow: hidden;
+  min-height: 500px;
+  border-top: 1px $lightBorderColor solid;
+  border-bottom: 1px $lightBorderColor solid;
+  .left-tree-group{
+    width: 230px;
+  }
+  .mid-group-list{
+    width: 400px;
+  }
+  .right-selected-list{
+   width: 470px;
+  }
+  ::v-deep .el-icon-folder-opened {
+    color: #ffcd2e;
+    margin-right: 5px;
+  }
+  ::v-deep .el-icon-user {
+    color: #409eff;
+    margin-right: 5px;
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/dialog/choose/components/left-tree-group.vue b/src/components-new/mc-components/dialog/choose/components/left-tree-group.vue
new file mode 100644
index 0000000..6dd3b4b
--- /dev/null
+++ b/src/components-new/mc-components/dialog/choose/components/left-tree-group.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="tree-group">
+    <div class="sub-title flex">
+      <span>{{ $t('mc-ui.tree.select.dialog.filter') }}</span>
+      <mc-input v-model="searchVal" width="160px" margin="0" :search="true" />
+    </div>
+    <div
+      class="tree-node"
+    >
+      <!-- 分页加载 -->
+      <recycle-scroller
+        v-if="searchVal && pagination"
+        v-slot="{ item }"
+        style="height:495px"
+        :items="data"
+        :buffer="50"
+        :key-field="nodeKey"
+      >
+        <div v-if="item[nodeKey]=='more'" class="tree-label tree-search-more" :title="item[props.label]" @click="loadMore">
+          <div class="tree-search-more-text">
+            <i class="el-icon-circle-plus-outline" /> {{ item[props.label] }}
+          </div>
+        </div>
+        <div v-else class="tree-label tree-search-item">
+          <i class="el-icon-folder-opened" />{{ item[props.label] }}
+        </div>
+      </recycle-scroller>
+
+      <!-- 懒加载非分页 -->
+      <mc-tree
+        v-else
+        ref="treeNode"
+        height="495px"
+        v-bind="$props"
+        :filter-node-method="filterNode"
+        @node-click="handleNodeClick"
+      >
+        <template #default="{ node, data }">
+          <span class="tree-label">
+            <i :class="data[nodeKey] == currentNodeKey? 'el-icon-s-grid':'el-icon-folder-opened' " />
+            {{ node.label }}
+          </span>
+        </template>
+      </mc-tree>
+
+      <div v-if="loading" class="tree-loading">
+        <span><span class="el-icon-loading" /> {{ $t('common.loadingText') }}</span>
+      </div>
+      <div v-if="noMore" class="tree-loading">
+        <span><span class="el-icon-warning-outline" /> {{ $t('common.noMoreText') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mcInput from '@/components-new/mc-ui/input/mc-input.vue'
+import mcTree from '@/components-new/mc-ui/tree/mc-tree.vue'
+import { RecycleScroller } from 'vue-virtual-scroller1-1-2'
+import props from '@/components-new/mc-ui/tree/props.js'
+import { isEmpty } from 'lodash'
+
+export default {
+  components: {
+    mcTree,
+    mcInput,
+    RecycleScroller
+  },
+  mixins: [props],
+  props: {
+    // 搜索开启分页
+    pagination: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      searchVal: '',
+      currentPage: 1,
+      loading: false,
+      noMore: false
+    }
+  },
+  computed: {
+    disReachBottom () {
+      return isEmpty(this.searchVal) || this.loading || this.noMore
+    }
+  },
+  watch: {
+    searchVal (val) {
+      // 后端搜索
+      // 后端接口是在三列选择组件外部调用的,所以此处抛出由外部处理
+      this.$emit('getSearchValue', this.searchVal)
+    }
+  },
+  methods: {
+    refTree () {
+      return this.$refs.treeNode.refTree()
+    },
+    filterNode (value, data, node) {
+      if (!value) return true
+      return node.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data) {
+      this.$emit('select', data)
+    },
+    loadMore () {
+      // 加载更多
+      if (!this.loading && !this.noMore) {
+        this.loading = true
+        this.$emit('loadMoreSearch')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-group{
+  border-right: 1px $lightBorderColor solid;
+
+  ::v-deep  {
+    .vue-recycle-scroller.direction-vertical:not(.page-mode) {
+      width: 100%;
+    }
+    .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{
+      width: 500px;
+    }
+
+    .tree-label{
+      width: 160px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+  >div{
+      &.sub-title{
+        background-color: $subMenuActiveText;
+      }
+      &.tree-node{
+        width: 100%;
+        height: 495px;
+        position: relative;
+        overflow: hidden;
+
+        .tree-search-item{
+          margin-left: 15px;
+          height: 26px;
+          line-height: 26px;
+        }
+
+        .tree-search-more{
+          width: 100%;
+          height: 40px;
+          cursor: pointer;
+          border-top: dashed 1px #ccc;
+
+          &:hover{
+            background-color: #8bc5ff;
+          }
+
+          &-text{
+            width: 228px;
+            text-align: center;
+            height: 40px;
+            line-height: 40px;
+          }
+        }
+
+        .tree-loading{
+          width: 100%;
+          color: #aaa;
+          padding: 8px 0;
+          text-align: center;
+          background-color: #fff;
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+          position: absolute;
+          left: 0;
+          bottom: 0;
+        }
+      }
+  }
+  .el-icon-folder-opened {
+    color: #ffcd2e;
+    margin-right: 5px;
+  }
+  .el-icon-s-grid {
+    color: #409eff;
+    margin-right: 5px;
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/dialog/choose/components/mid-group-list.vue b/src/components-new/mc-components/dialog/choose/components/mid-group-list.vue
new file mode 100644
index 0000000..4bfdc19
--- /dev/null
+++ b/src/components-new/mc-components/dialog/choose/components/mid-group-list.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="user-group-list">
+    <div class="flex sub-title">
+      <mc-input v-model="searchVal" margin="0" :search="true" />
+    </div>
+    <mc-table
+      ref="mcTable"
+      :key="groupId"
+      :row-key="tableKey"
+      style="width:calc(100% - 1px)"
+      height="438px"
+      :class-name="'white'"
+      :list-handler="getTableList"
+      :setting-visible="false"
+      pagination-layout="prev, pager, next"
+      :pager-count="5"
+      :is-loading="false"
+      :options="options"
+      @select="selectChange"
+      @selectAll="selectAll"
+      @selectRow="selectRow"
+      @row-click="rowClick"
+      @getTableData="getTableData"
+    >
+      <el-table-column v-if="tableColumn.length" type="selection" width="40" fixed />
+      <el-table-column
+        v-for="column in tableColumn"
+        :key="column.value"
+        :label="column.label"
+        align="center"
+        :prop="column.value"
+        show-overflow-tooltip
+        min-width="160px"
+        :fixed="column.fixed"
+      >
+        <template slot-scope="{row}">
+          <formatter :row="row" :column="column" />
+        </template>
+      </el-table-column>
+    </mc-table>
+  </div>
+</template>
+
+<script>
+import mcInput from '@/components-new/mc-ui/input/mc-input.vue'
+import mcTable from '@/components-new/mc-components/table/mc-table.vue'
+import props from '@/components-new/mc-components/dialog/choose/components/props.js'
+import formatter from '@/components-new/mc-components/table/select-table/formatter.js'
+
+export default {
+  components: {
+    mcInput,
+    mcTable,
+    formatter
+  },
+  mixins: [props],
+  props: {
+    // 要查询的分组id
+    groupId: {
+      required: true,
+      type: [Number, String],
+      default: 0
+    },
+    // 编辑时，展示已有数据
+    choosedId: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      searchVal: '',
+      tableData: []
+    }
+  },
+  computed: {
+    options () {
+      const op = {}
+      op[this.tableGroupKey] = this.groupId
+      return Object.assign(op, this.tableOptions)
+    }
+  },
+  watch: {
+    searchVal (val) {
+      const params = {}
+      params[this.tableSearchKey] = val
+      this.$refs.mcTable.reloadTable(params)
+    },
+    choosedId: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        // 右边已选数据修改时关联中间表格数据
+        this.$nextTick(() => {
+          const renderTable = this.$refs.mcTable.renderTable()
+          renderTable.clearSelection()
+          val.forEach(row => {
+            if (this.tableData.length && this.tableData.some(item => row === item[this.tableKey])) {
+              renderTable.toggleRowSelection(this.tableData.find(item => row === item[this.tableKey]))
+            }
+          })
+        })
+      }
+    },
+    tableColumn: {
+      deep: true,
+      immediate: true,
+      handler (list) {
+        // 中间表格数据
+        for (const column of list) {
+          if (!column.formatter) {
+            // 初始化formatter
+            column.formatter = function (row, column) {
+              return (<span>{row[column.value]}</span>)
+            }
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    getTableData (table) {
+      this.tableData = table
+      this.toggleSelectStatus()
+    },
+    // 点击行
+    selectRow (row) {
+      this.$emit('selectChange', [row], 'add')
+    },
+    // 单选
+    selectChange (selection, row) {
+      const includes = selection.includes(row)
+      this.$emit('selectChange', includes ? selection : [row], includes ? 'add' : 'reduce')
+    },
+    // 全选
+    selectAll (selection) {
+      this.$emit('selectChange', selection.length > 0 ? selection : this.tableData, selection.length > 0 ? 'add' : 'reduce')
+    },
+    // 点击每行
+    rowClick (row) {
+      this.$emit('selectChange', [row], 'add')
+    },
+    // 切换中间表格数据时关联右边已选数据
+    toggleSelectStatus () {
+      // 不可直接赋值,需等待子组件渲染完成
+      this.$nextTick(() => {
+        const renderTable = this.$refs.mcTable.renderTable()
+        this.tableData.forEach(row => {
+          this.choosedId.includes(row[this.tableKey]) && renderTable.toggleRowSelection(row)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-group-list{
+    border-right: 1px $lightBorderColor solid;
+
+    .sub-title{
+      justify-content: flex-end;
+    }
+}
+</style>
diff --git a/src/components-new/mc-components/dialog/choose/components/props.js b/src/components-new/mc-components/dialog/choose/components/props.js
new file mode 100644
index 0000000..8f1b48c
--- /dev/null
+++ b/src/components-new/mc-components/dialog/choose/components/props.js
@@ -0,0 +1,43 @@
+export default {
+  props: {
+    // 中间获取table数据的接口方法
+    getTableList: {
+      type: Function,
+      default: () => {
+        return Promise.resolve({})
+      }
+    },
+    // 中间table展示的列,每项由label(头部名称),fixed(是否固定列),value(每列字段名)组成
+    tableColumn: {
+      type: Array,
+      default: () => []
+    },
+    // 中间table搜索时传往后台接口的字段名
+    tableSearchKey: {
+      type: String,
+      default: ''
+    },
+    // 中间列表数据唯一标识,默认是id字段
+    tableKey: {
+      type: String,
+      default: 'id'
+    },
+    // 中间table查询时的分组字段名，默认为groupId
+    tableGroupKey: {
+      type: String,
+      default: 'groupId'
+    },
+    // 中间table要传入的其他请求参数
+    tableOptions: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 右侧已选展示的列,每项由label(头部名称),fixed(是否固定列),value(每列字段名)组成
+    seletcedColumn: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
diff --git a/src/components-new/mc-components/dialog/choose/components/right-selected-list.vue b/src/components-new/mc-components/dialog/choose/components/right-selected-list.vue
new file mode 100644
index 0000000..6f5884e
--- /dev/null
+++ b/src/components-new/mc-components/dialog/choose/components/right-selected-list.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="right-selected-list">
+    <div class="sub-title flex">
+      <span>{{ $t('common.selected') }}（{{ tableData.length }}）</span>
+      <el-link type="primary" @click="clearList">{{ $t('common.emptyContent') }}</el-link>
+    </div>
+    <mc-table
+      ref="mcTable"
+      style="width:calc(100% - 1px)"
+      height="438px"
+      :row-key="tableKey"
+      :table-data="tableData"
+      :class-name="'white'"
+      :setting-visible="false"
+      pagination-layout="sizes, prev, pager, next"
+      :pager-count="5"
+      :is-loading="false"
+    >
+      <el-table-column
+        v-for="column in seletcedColumn"
+        :key="column.value"
+        :label="column.label"
+        align="center"
+        :prop="column.value"
+        show-overflow-tooltip
+        min-width="160px"
+        :fixed="column.fixed"
+      >
+        <template slot-scope="{row}">
+          <formatter :row="row" :column="column" />
+        </template>
+      </el-table-column>
+      <el-table-column v-if="seletcedColumn.length" :label="$t('mc-ui.tree.select.dialog.operation')" width="80" align="center" fixed="right">
+        <template slot-scope="{row}">
+          <el-link type="primary" @click="removeSelected(row)">{{ $t('mc-ui.tree.select.dialog.operation.remove') }}</el-link>
+        </template>
+      </el-table-column>
+    </mc-table>
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash'
+import mcTable from '@/components-new/mc-components/table/mc-table.vue'
+import props from './props.js'
+import formatter from '@/components-new/mc-components/table/select-table/formatter.js'
+
+export default {
+  components: {
+    mcTable,
+    formatter
+  },
+  mixins: [props],
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    // 编辑时,展示已有数据,请使用v-model
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      tableData: []
+    }
+  },
+  watch: {
+    // 用于和待选择联动
+    'tableData.length': {
+      handler (val) {
+        this.$emit('change', this.tableData)
+      }
+    },
+    value: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        this.tableData = cloneDeep(val)
+      }
+    },
+    seletcedColumn: {
+      deep: true,
+      immediate: true,
+      handler (list) {
+        // 中间表格数据
+        for (const column of list) {
+          if (!column.formatter) {
+            // 初始化formatter
+            column.formatter = function (row, column) {
+              return (<span>{row[column.value]}</span>)
+            }
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    removeSelected (data) {
+      this.$emit('beforeRemove', data, () => {
+        this.tableData = this.tableData.filter(item => item[this.tableKey] !== data[this.tableKey])
+        this.$emit('delete', data)
+      })
+    },
+    clearList () {
+      this.$emit('beforeClear', this.tableData, () => {
+        this.tableData = []
+        this.$emit('clear')
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.right-selected-list{
+      .sub-title{
+        padding: 18px 15px
+    }
+}
+</style>
+<style lang="scss">
+.right-selected-list{
+  .el-checkbox__inner{
+    display: none;
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/dialog/confirm-password.vue b/src/components-new/mc-components/dialog/confirm-password.vue
new file mode 100644
index 0000000..cb52a8e
--- /dev/null
+++ b/src/components-new/mc-components/dialog/confirm-password.vue
@@ -0,0 +1,134 @@
+<!-- 二次密码校验 -->
+<template>
+  <mc-alert
+    :title="title"
+    :content-title="contentTitle"
+    size="mini"
+    top="30vh"
+    :visible="true"
+    icon="el-icon-warning"
+    :before-close="closeHandle"
+    :to-body="toBody"
+    :loading="loading"
+    @confirm="comfirmHandle"
+    @close="closeHandle"
+  >
+    <p style="line-height: 1.5" v-html="contentMsg || $t('input_manger_password')" />
+    <el-form ref="form" :model="form" :label-width="labelWidth" :rules="rulesModal" @submit.native.prevent>
+      <el-form-item :label="passwordTitle" prop="pas">
+        <el-input
+          v-model="form.pas"
+          type="password"
+          size="mini"
+          @keyup.enter.native="comfirmHandle"
+        />
+      </el-form-item>
+    </el-form>
+    <slot name="append" />
+  </mc-alert>
+</template>
+
+<script>
+import mcAlert from '@/components/mc-ui/dialog/mc-alert'
+import { getConfirmPass } from '@/api/storage-pool/storage-pool'
+import i18n from '@/lang'
+
+// @group 组件组合的封装 mc-components
+//  确认密码
+export default {
+  components: {
+    mcAlert
+  },
+  props: {
+    title: {
+      type: String,
+      default: i18n.t('common.tips')
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    contentTitle: {
+      type: String,
+      default: ''
+    },
+    contentMsg: {
+      type: String,
+      default: ''
+    },
+    // Dialog 自身是否插入至 body 元素上, 嵌套的 Dialog 必须指定该属性并赋值为 true
+    toBody: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    istherPassword: {
+      type: Boolean,
+      default: false
+    },
+    passwordTitle: {
+      type: String,
+      default: i18n.t('mc-components.enter.administrator.password')
+    },
+    labelWidth: {
+      type: String,
+      default: '130px'
+    }
+  },
+  data () {
+    return {
+      form: {
+        pas: ''
+      },
+      rulesModal: {
+        pas: { trigger: 'blur', required: true, message: this.$t('password_emtpy') }
+      }
+    }
+  },
+  watch: {
+    show (val) {
+      if (!val) {
+        this.form.pas = ''
+      }
+    }
+  },
+  methods: {
+    closeHandle () {
+      this.$emit('update:show', false)
+    },
+    comfirmHandle () {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (!this.istherPassword) {
+            getConfirmPass({
+              password: this.form.pas
+            }).then((res) => {
+              this.$emit('successHandle', this.form.pas)
+            }).catch((err) => {
+              this.$refs['form'].fields[0].validateMessage = err
+              this.$refs['form'].fields[0].validateState = 'error'
+            })
+          } else {
+            this.$emit('successHandle', this.form.pas)
+          }
+        }
+      })
+    },
+    async checkPas (rule, value, callback) {
+      const data = await getConfirmPass()
+      if (!data) {
+        callback(new Error(this.$t('get_password_err')))
+        return
+      }
+      if (!value) {
+        callback(new Error(this.$t('password_emtpy')))
+        return
+      }
+      callback()
+    }
+  }
+}
+</script>
diff --git a/src/components-new/mc-components/dropdown/mc-dropdown.vue b/src/components-new/mc-components/dropdown/mc-dropdown.vue
new file mode 100644
index 0000000..2d22589
--- /dev/null
+++ b/src/components-new/mc-components/dropdown/mc-dropdown.vue
@@ -0,0 +1,226 @@
+<template>
+  <el-dropdown :trigger="trigger" :placement="placement" class="mc-dropdown" v-on="$listeners">
+    <slot v-if="isSlot" />
+    <template v-else>
+      <el-button v-if="type === 'button'" type="primary" :disabled="disabled">{{ label || $t('common.moreLabel') }}<svg-icon icon-class="tab_down" /></el-button>
+      <el-link v-else type="primary" :disabled="disabled">{{ label || $t('common.moreLabel') }}<svg-icon icon-class="tab_down" /></el-link>
+    </template>
+    <el-dropdown-menu slot="dropdown" :class="isShow" class="dropdownPop">
+      <el-scrollbar wrap-class="scrollbar-wrapper">
+        <el-tooltip
+          v-for="(item,index) in dropdownMenuList"
+          :key="index"
+          popper-class="tooltip-style"
+          effect="light"
+          :class="calcClass(item)"
+          :disabled="calcDisabled(item)"
+          :content="item.errorTitle"
+          :placement="popoverPlacement"
+          v-bind="$attrs"
+        >
+          <!-- 如果需要传入标签使用插槽 -->
+          <div v-if="item.slotContent" slot="content" v-html="item.slotContent" />
+          <!--  因为el-dropdown-item的disabled生效会禁用掉鼠标事件,导致el-tooltip失效，所以包裹一个div -->
+          <div>
+            <el-dropdown-item
+              :disabled="item.disabled"
+              :command="item.command"
+              :type="item.type"
+              :icon="item.startIcon"
+              :class="['dropdownItem',downItemClass]"
+            >
+              <mc-dropdown
+                :dropdown-menu-list="item.dropdownMenuList"
+                :placement="item.placement"
+                trigger="hover"
+                v-bind="$attrs"
+                v-on="$listeners"
+              >
+                <div :class="calcColorClass(item)">
+                  <!-- 这里的title是已经国际化之后的内容-->
+                  {{ item.title }}
+                  <i v-if="item.endIcon" :class="item.endIcon" />
+                </div>
+              </mc-dropdown>
+            </el-dropdown-item>
+          </div>
+        </el-tooltip>
+      </el-scrollbar>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+/**
+ * @group  组件组合的封装 mc-components
+ * 二次封装 el-dropdown 下拉菜单，目前只能嵌套两层，具有带文字提示以及显示错误手势的功能
+ * * 使用示例:
+ * // html
+ * <template slot-scope="{row}">
+ *    <mc-dropdown :dropdown-menu-list="dropdownMenuList" @command="handleCommand($event,row)">
+ *        <mc-link class="common_a">{{ $t('common.moreLabel') }}</mc-link>
+ *    </mc-dropdown>
+ * </template>
+ * // js
+ *   import mcDropdown from '@/components-new/mc-ui/dropdown/mc-dropdown.vue'
+ *   import mcLink from '@/components-new/mc-ui/link/mc-link.vue'
+ *   export default {
+ *     components: {
+ *       mcDropdown,
+ *       mcLink
+ *    },
+ *    data(){
+ *      return {
+ *       dropdownMenuList: [
+ *            {
+ *              title:this.$t('common.power'), command: 'handlePowerClick'
+ *            },
+ *            {
+ *              title:this.$t('common.delete') , command: 'handleDeleteClick', disabled: true, errorTitle: '下载中，无法操作' //注意国际化
+ *            },
+ *            {
+ *              title: this.$t('common.modify'), command: 'handleCopyClick', disabled: true, errorTitle: '维护中,无法操作',
+ *              endIcon: 'el-icon-caret-bottom',
+ *              dropdownMenuList: [
+ *                {
+ *                  title: this.$t('common.startSession'), command: 'handleStartClick', disabled: true, errorTitle: '维护中,无法操作'
+ *                },
+ *                {
+ *                  title: this.$t('common.closeSession'), command: 'handleStartClick'
+ *                }
+ *              ]
+ *            }
+ *          ]
+ *       }
+ *     },
+ *    methods: {
+ *        handleCommand (value,row) {
+ *          //拿到对应操作的command值，进行后续的处理
+ *          this[value]?.(row) 这里拿到的value是点击该项的回调函数名称，是自己设定的值
+ *        }
+ *   }
+ * }
+ */
+export default {
+  name: 'McDropdown',
+  props: {
+    type: {
+      type: String,
+      default: 'link' // button / link
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * dropdownMenuList子项包含:
+     *     command:  //command值就是一个标识符,是选中某一项之后返回出去的值,这里推荐传的值是选中项对应的回调函数名称,也可以不是。
+     *     disabled：Boolean, //表示是否显示禁止点击效果 即cursor: not-allowed
+     *     endIcon: String, //尾部的icon,
+     *     startIcon: String //头部的icon
+     *     title: String, //显示的label
+     *     errorTitle: String,//禁止点击时,显示的错误原因
+     *     placement: 菜单位置 默认'left-start'
+     *     dropdownMenuList:嵌套的内容
+     *     注意：目前一级菜单和二级菜单点击触发的方法为同一个方法，因此一级菜单和二级菜单的command值都是唯一的
+     */
+    dropdownMenuList: {
+      type: Array,
+      default: () => []
+    },
+    // 菜单弹出位置
+    placement: {
+      type: String,
+      default: 'left-start'
+    },
+    // 触发下拉的行为
+    trigger: {
+      type: String,
+      default: 'click'
+    },
+    // 出现位置 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
+    popoverPlacement: {
+      type: String,
+      default: 'left-start'
+    },
+    downItemClass: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isShow () {
+      return this.dropdownMenuList.length ? '' : 'isNoShow'
+    },
+    isSlot () {
+      return !!this.$scopedSlots.default
+    }
+  },
+  methods: {
+    // 抛出当前选中值
+    handleCommand (value) {
+      this.$emit('handleCommand', value)
+    },
+    // 判断是否启用el-tooltip
+    calcDisabled (item) {
+      return !item.disabled || (item.disabled && !item.errorTitle && !item.slotContent)
+    },
+    // 判断是否添加错误手势
+    calcClass (item) {
+      return item.disabled && 'isDiabled'
+    },
+    // 禁止点击时，需要单独去设置字体颜色
+    calcColorClass (item) {
+      return item.disabled ? 'disabled_color' : 'title_div'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ ::v-deep .scrollbar-wrapper{
+    max-height: 60vh;
+    & + .is-horizontal{
+      display: none;
+      overflow-x: hidden;
+    }
+  }
+svg{
+  margin-left: 5px;
+  width: 0.8em !important;
+}
+.isDiabled{
+  cursor: not-allowed;
+}
+.title_div{
+  &:hover{
+    color:$colorPrimary;
+  }
+}
+.el-dropdown-menu__item[type="delete"]{
+  .title_div{
+    &:hover{
+      color:$colorDanger;
+    }
+  }
+}
+.dropdownItem{
+  text-align: left;
+}
+.isNoShow{
+  display: none;
+}
+.disabled_color{
+  color: $colorDisabled;
+}
+</style>
+<style lang="scss">
+.tooltip-style.is-light {
+  color: #606266;
+  border: none;
+}
+</style>
diff --git a/src/components-new/mc-components/input/mc-down-input.vue b/src/components-new/mc-components/input/mc-down-input.vue
new file mode 100644
index 0000000..92ebbd1
--- /dev/null
+++ b/src/components-new/mc-components/input/mc-down-input.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <el-input
+      v-model="searchText"
+      :placeholder="placeholder"
+      :style="{width:width}"
+      class="input-with-select"
+      clearable
+      @keyup.enter.native="changeSearch"
+      @clear="changeSearch"
+    >
+      <el-select slot="prepend" v-model="select">
+        <el-option v-for="item in dropdownList" :key="item[defaultProps.value]" :value="item[defaultProps.value]" :label="item[defaultProps.label]" />
+      </el-select>
+      <i slot="suffix" class="el-input__icon el-icon-search" @click="changeSearch" />
+    </el-input>
+  </div>
+</template>
+<script>
+/**
+ * @group 单个组件的封装 mc-components
+ * 二次封装的input 组件,针对有下拉的input框的场景
+ */
+import i18n from '@/lang'
+export default {
+  props: {
+    // 整个下拉input框的宽度设置
+    width: {
+      type: String,
+      default: '300px'
+    },
+    /**
+     * dropdownList数组中每一项包含
+     * label:String, //每一选项名称，可通过props修改
+     * value:String,//每一选项的value值，可通过props修改
+     */
+    // 下拉选项的列表设置，参照props的默认值,一般设置为[{label:'',value:''}]
+    dropdownList: {
+      type: Array,
+      default: () => []
+    },
+    props: {
+      /**
+       * `label:国际化，可自定义，string`
+       * `value:国际化对应的字段名，可自定义，string`
+       */
+      type: Object,
+      default: () => {}
+    },
+    // input框的placeholder值设置
+    placeholder: {
+      type: String,
+      default: i18n.t('common.columnSearch')
+    },
+    // 默认下拉展示的选项
+    defaultSelect: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      select: '',
+      searchText: ''
+    }
+  },
+  computed: {
+    defaultProps () {
+      return Object.assign({
+        label: 'label',
+        value: 'value'
+      }, this.props)
+    }
+  },
+  watch: {
+    dropdownList: {
+      immediate: true,
+      handler () {
+        this.initSelect()
+      }
+    }
+  },
+  methods: {
+    // 给select设置初始值
+    initSelect () {
+      this.select = this.defaultSelect || this.dropdownList[0][this.defaultProps.value]
+    },
+    // 重置
+    resetSearch () {
+      this.initSelect()
+      this.searchText = ''
+      this.changeSearch()
+    },
+    changeSearch () {
+      const params = {}
+      const objectKeys = this.dropdownList.map(item => item[this.defaultProps.value])
+      objectKeys.forEach(search => {
+        if (search === this.select) {
+          params[search] = this.searchText
+        } else {
+          params[search] = ''
+        }
+      })
+      this.$emit('changeTableSearch', params)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep{
+  .el-input-group__prepend {
+    overflow: hidden;
+    .el-select .el-input__inner{
+      width:100px
+    }
+  }
+  .el-select--small{
+    .el-input--small{
+      .el-input__inner{
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/input/mc-input-choose.vue b/src/components-new/mc-components/input/mc-input-choose.vue
new file mode 100644
index 0000000..ba8cd51
--- /dev/null
+++ b/src/components-new/mc-components/input/mc-input-choose.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="mcChoose" :class="[readOnly ? 'mcChoose-readonly' : '',disabled? 'mcChoose-disabled' : '']" @click.stop="handlerSelectAll">
+    <el-input v-model="currentVal" :disabled="disabled" :placeholder="placeholder" :style="{width: width}" @input="handlerInput">
+      <template slot="append">
+        <span class="select-span" @click.stop="handlerSelect">{{ dialog_choose }}</span>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script>
+// 用户弹窗选择的input组件
+export default {
+  props: {
+    //   输入框是否可以输入文字，如果true， 则点击整体呼出弹窗，否则只允许点击选择按钮才可以呼出弹窗
+    readOnly: {
+      type: Boolean,
+      default: true
+    },
+    // 输入框默认的内容
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    // 输入框内容
+    value: {
+      type: String,
+      default: ''
+    },
+    selectText: {
+      type: String,
+      default: ''
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data () {
+    return {
+      currentVal: this.value,
+      dialog_choose: this.selectText || this.$t('common.choose')
+    }
+  },
+  watch: {
+    value (val) {
+      this.currentVal = val
+    }
+  },
+  methods: {
+    //  readOnly 为true 点击整体呼出弹窗
+    handlerSelectAll () {
+      if (this.disabled) {
+        return
+      }
+      if (this.readOnly) {
+        this.handlerSelect()
+      }
+    },
+    handlerSelect () {
+      if (this.disabled) {
+        return
+      }
+      this.$emit('select', this.currentVal)
+    },
+    handlerInput () {
+      // 配合v-model 使用
+      this.$emit('input', this.currentVal)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mcChoose{
+    &.mcChoose-readonly{
+        position: relative;
+        &::before{
+            content: '';
+            position: absolute;
+            top: 0;bottom: 0;left: 0;right: 0;z-index: 10;
+            cursor: pointer;
+        }
+    }
+    &.mcChoose-disabled{
+        &::before{
+            cursor: not-allowed;
+        }
+    }
+    .select-span{
+        cursor: pointer;
+        padding: 0 20px;
+    }
+
+}
+.mcChoose ::v-deep{
+    .el-input-group__append{
+            padding: 0;
+    }
+    &.mcChoose-disabled{
+        &::before{
+            cursor: unset !important;
+        }
+        .el-input__inner{
+          background-color: #ececec !important;
+          border-color: #E4E7ED!important;;
+          color: #C0C4CC!important;;
+          cursor: not-allowed!important;;
+        }
+    }
+}
+</style>
diff --git a/src/components-new/mc-components/input/mc-input-ip.vue b/src/components-new/mc-components/input/mc-input-ip.vue
new file mode 100644
index 0000000..9b46d87
--- /dev/null
+++ b/src/components-new/mc-components/input/mc-input-ip.vue
@@ -0,0 +1,358 @@
+<template>
+  <div
+    :class="['mc-input-ip', 'el-input', `el-input--${size}`,{'is-disabled':disabled},{'is-error':showErrorBorder}]"
+    :style="mcWidth"
+    @click.stop="focusInput"
+  >
+    <div class="el-input__inner flex align-center">
+      <div
+        v-for="(item,index) in ipList"
+        :key="index"
+        class="mc-input-ip-input"
+      >
+        <!-- 不用input是因为无法定位光标 -->
+        <textarea
+          :ref="'mc-input-ip-'+index"
+          :data-tag="`mc-input-${key}`"
+          rows="1"
+          cols="3"
+          :value="item"
+          maxlength="4"
+          autocomplete="off"
+          :disabled="disabled"
+          :style="{width:inputWidth}"
+          @input="handlerInput($event,index)"
+          @keydown.left="handlerKeydown($event)"
+          @keydown.right="handlerKeydown($event)"
+          @keydown.46="handlerKeydown($event)"
+          @keydown.8="handlerKeydown($event)"
+          @keyup.left="handlerKeyup($event,index,'left')"
+          @keyup.right="handlerKeyup($event,index,'right')"
+          @keyup.46="handlerDelete($event,index)"
+          @keyup.8="handlerKeyup($event,index,'left')"
+          @focus.stop="handlerFocus"
+          @click.stop="()=>{}"
+        />
+      </div>
+    </div>
+    <div v-if="error" class="mc-input-ip-error">
+      {{ error }}
+    </div>
+  </div>
+</template>
+<script>
+import { isEmpty, cloneDeep, uniqueId, takeWhile, eq } from 'lodash'
+import emitter from 'element-ui/lib/mixins/emitter'
+
+/**
+ * @group 单个组件的封装 mc-components
+ * 二次封装的input 组件,针对输入ip的场景
+ * 支持：←左移光标，→右移光标，tab切换输入位，↑光标移到某位最前，↓光标移到某位最后，
+ *       backspace连续删除光标左移，delete连续删除光标右移，仅允许输入数字，支持el-form表单校验样式
+ * 事件：input / blur / change [通过@/v-on触发]
+ * 方法：focus() / validate() [通过ref调用]
+ * 校验：支持el-form的rules使用trigger: ['blur', 'change']
+ * 注意：不在此组件内支持校验功能是与el-form功能统一，组件的最小宽度为146px，设计上要预留足够空间
+ */
+const ipList = ['', '', '', '']
+const cursorObj = { ele: null, vue: null }
+let cursorLastEle = cloneDeep(cursorObj) // 光标上次的聚焦元素
+let cursorCurEle = cloneDeep(cursorObj) // 光标当前的聚焦元素
+export default {
+  mixins: [emitter],
+  model: {
+    event: 'input',
+    prop: 'value'
+  },
+  props: {
+    // 组件的宽度
+    width: {
+      type: String,
+      default: '180px'
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 组件尺寸，同elementUI组件尺寸，当size为mini时，width将设置为最小值146px
+    size: {
+      type: String,
+      default: 'small'
+    },
+    // 组件的错误提示，一般用于非form表单校验，比如table中用到此组件时(要去除cell自带的overflow:hidden)
+    // 注意：此属性有值时会同时显示红色的组件边框
+    error: {
+      type: String,
+      default: ''
+    },
+    errorBorder: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      wide: '',
+      key: uniqueId('mc-input-ip-'), // 区别同时多处使用的组件
+      ipList: cloneDeep(ipList),
+      cursorLastPos: '' // 光标上次的位置
+    }
+  },
+  computed: {
+    mcWidth () {
+      return `min-width:${this.wide};max-width:${this.wide};`
+    },
+    inputWidth () {
+      return `calc((${this.wide} - 32px)/4)`
+    },
+    // 显示校验错误的红色边框
+    showErrorBorder () {
+      return this.error || this.errorBorder
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        // ip对位赋值给ipList
+        this.ipList = cloneDeep(ipList)
+        val.split('.').slice(0, 4).forEach((ip, index) => {
+          this.ipList.fill(ip, index, index + 1)
+        })
+        this.$forceUpdate()
+      }
+    },
+    size: {
+      immediate: true,
+      handler (val) {
+        // size为mini时，width将设置为最小值146px
+        this.wide = val === 'mini' ? '146px' : this.width
+      }
+    }
+  },
+  mounted () {
+    this.handlerBlur()
+    cursorLastEle = cloneDeep(cursorObj) // 光标上次的聚焦元素
+    cursorCurEle = cloneDeep(cursorObj) // 光标当前的聚焦元素
+  },
+  methods: {
+    // 校验ip是否已填
+    validate () {
+      return takeWhile(this.ipList).length === 4
+    },
+    // 点击组件之外，模拟组件失焦
+    handlerBlur () {
+      document.onclick = window.onblur = () => {
+        // 点击组件之外
+        // 记录聚焦元素
+        cursorLastEle = cursorCurEle
+        cursorCurEle = { ele: null, vue: null }
+        this.blurInput()
+      }
+      this.$once('hook:beforeDestroy', () => {
+        document.onclick = window.onblur = null
+      })
+    },
+    clearCursorCurEle () {
+      if (cursorCurEle.ele) {
+        cursorCurEle.ele = null
+      }
+    },
+    handlerInput (evt, index) {
+      let val = evt.target.value.trim()
+      const hasPoint = val.includes('.')
+      val = val.replace('.', '')
+      if (val && hasPoint) {
+        // 输入内容为'.'时，光标后移一位
+        this.handlerKeydown(evt)
+        this.handlerKeyup(evt, index, 'right')
+      }
+      if (val && !isNaN(val) && val <= 255 && val >= 0) {
+        this.ipList[index] = Number(val)
+      } else if (val === '') {
+        this.ipList[index] = ''
+      }
+      this.$forceUpdate()
+      this.handlerChange()
+    },
+    handlerChange () {
+      const ip = this.ipList.some(ip => ip) ? this.ipList.join('.') : ''
+      this.$emit('input', ip)
+      this.$emit('change', ip)
+      this.dispatch('ElFormItem', 'el.form.change', [ip])
+    },
+    handlerKeydown (evt, type) {
+      const cursorLastPos = this.getCursorPos(evt.target)
+      if (this.cursorLastPos !== cursorLastPos) {
+        this.cursorLastPos = cursorLastPos
+      }
+    },
+    handlerDelete (evt, index) {
+      // 光标位于当前输入框内容末尾时，光标后移一位
+      String(this.ipList[index]).length === this.cursorLastPos && this.handlerKeyup(evt, index, 'right')
+    },
+    handlerKeyup (evt, index, type) {
+      if (this.cursorLastPos === this.getCursorPos(evt.target)) {
+        const i = type === 'left' ? Math.max(index - 1, 0) : Math.min(index + 1, this.ipList.length)
+        i !== index && i !== this.ipList.length && this.$nextTick(() => {
+          this.setCursorPos(this.$refs['mc-input-ip-' + i][0], type === 'left' ? String(this.ipList[i]).length : 0)
+        })
+      }
+    },
+    // 非当前组件判断
+    isNotCurInput () {
+      return cursorCurEle.ele && cursorCurEle.ele.dataset.tag !== `mc-input-${this.key}`
+    },
+    // 获取光标位置，此方法只适用于textarea
+    getCursorPos (element) {
+      let cursorLastPos = 0
+      if (document.selection) {
+        // IE
+        var selectRange = document.selection.createRange()
+        selectRange.moveStart('character', -element.value.length)
+        cursorLastPos = selectRange.text.length
+      } else {
+        cursorLastPos = element.selectionStart ?? 0
+      }
+      return cursorLastPos
+    },
+    // 设置光标位置
+    setCursorPos (textDom, pos) {
+      if (textDom.setSelectionRange) {
+        // IE
+        textDom.focus()
+        textDom.setSelectionRange(pos, pos)
+      } else if (textDom.createTextRange) {
+        var range = textDom.createTextRange()
+        range.collapse(true)
+        range.moveEnd('character', pos)
+        range.moveStart('character', pos)
+        range.select()
+      }
+      this.handlerFocus()
+    },
+    handlerFocus () {
+      const focusEle = document.activeElement
+      if (focusEle.dataset.tag === `mc-input-${this.key}`) {
+        // 记录聚焦元素
+        cursorLastEle = cursorCurEle
+        cursorCurEle = { ele: focusEle, vue: this }
+      }
+      if (cursorLastEle.vue && cursorCurEle.vue && !eq(cursorLastEle.vue, cursorCurEle.vue)) {
+        // 在不同的ip组件
+        this.blurInput()
+      }
+    },
+    focusInput () {
+      if (this.isNotCurInput() || !cursorCurEle.ele) {
+        this.clearCursorCurEle()
+        this.focus()
+      } else {
+        cursorCurEle.ele.focus()
+      }
+    },
+    // 聚焦
+    focus () {
+      const index = this.ipList.findIndex(val => isEmpty(val))
+      this.$nextTick(() => {
+        this.$refs['mc-input-ip-' + (index < 0 ? this.ipList.length - 1 : index)][0].focus()
+      })
+    },
+    // 失焦
+    blurInput () {
+      if (cursorLastEle.vue || cursorCurEle.vue) {
+        const that = cursorLastEle.vue || cursorCurEle.vue
+        that.$emit('blur')
+        that.dispatch('ElFormItem', 'el.form.blur', [])
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-input__inner:focus-within{
+    border-color: $colorPrimary;
+}
+
+.el-form-item.is-error .el-input__inner:focus-within{
+    border-color: $colorDanger;
+}
+
+.el-input.is-disabled textarea{
+    color: #c0c4cc;
+    cursor: not-allowed;
+}
+
+.el-input.is-error .el-input__inner{
+    border-color: $colorDanger;
+}
+
+.mc-input-ip{
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: 4px;
+    min-width: 146px!important;
+    cursor: text;
+    position: relative;
+
+    &-input{
+        display: inline-block;
+        height: 16px;
+        line-height: 16px;
+        position: relative;
+
+        textarea{
+            border: 0;
+            padding: 0;
+            color: #333;
+            outline: none;
+            resize: none;
+            min-width: 29px;
+            height: 16px;
+            line-height: 16px;
+            text-align: center;
+            background-color: transparent;
+            vertical-align: top;
+
+            &:focus .mc-input-ip>.el-input__inner{
+                border-color: $colorPrimary;
+                outline: none;
+                border-color: #2096ff;
+            }
+        }
+
+        &::after{
+            content: '.';
+            display: inline-block;
+            width: 10px;
+            height: 100%;
+            font-size: 20px;
+            line-height: 14px;
+            text-align: center;
+            vertical-align: top;
+            position: absolute;
+            right: -5px;
+            top: 0;
+        }
+
+        &:last-of-type::after{
+            display: none;
+        }
+    }
+
+    &-error{
+      word-break: break-all;
+      color: $colorDanger;
+      font-size: 12px;
+      line-height: 1;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 1000;
+    }
+}
+</style>
diff --git a/src/components-new/mc-components/select-file/select-file.vue b/src/components-new/mc-components/select-file/select-file.vue
new file mode 100644
index 0000000..88f2eec
--- /dev/null
+++ b/src/components-new/mc-components/select-file/select-file.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="select-file">
+    <div v-if="type==='image'" class="flex">
+      <mc-image
+        v-if="src"
+        :disabled="disUse"
+        :src="src"
+        :show-delete="showDelete"
+        @delet="handlerDelet"
+      />
+      <div>
+        <mc-upload
+          ref="mc-upload"
+          :disabled="disUse"
+          :accept="accept"
+          :size="size"
+          @select="handlerSelect"
+        >
+          <el-button :loading="loading" :disabled="disUse">{{ $t('mc-ui.upload.file.selectImage') }}</el-button>
+        </mc-upload>
+        <mc-tooltip
+          v-if="tooltipContent"
+          place="right"
+          :content="tooltipContent"
+        />
+      </div>
+    </div>
+
+    <el-input
+      v-if="type==='file'"
+      v-model="src"
+      :disabled="disUse"
+      readonly
+      :placeholder="placeholder"
+      :style="inputStyle"
+    >
+      <template slot="append">
+        <mc-upload :disabled="disUse" :accept="accept" :size="size" @select="handlerSelect">
+          <el-button :loading="loading" :disabled="disUse">{{ $t('mc-ui.upload.file.selectFile') }}</el-button>
+        </mc-upload>
+      </template>
+    </el-input>
+
+  </div>
+</template>
+
+<script>
+import { isEmpty } from 'lodash'
+import mcUpload from '@/components-new/mc-ui/upload/mc-upload.vue'
+import mcTooltip from '@/components-new/mc-ui/tooltip/mc-tooltip.vue'
+import mcImage from '@/components-new/mc-ui/image/mc-image.vue'
+import uploadProps from '@/components-new/mc-ui/upload/props.js'
+
+/**
+  * @group 组件组合的封装 mc-components
+  * 单张图片/单个文件的选择与展示
+  * ！！! 多图片/多文件可参考本组件后请使用 mc-upload 组件定制
+  * 示例：
+  * [选图片]
+  * <select-file
+  *   v-model="xxx"
+  *   show-delete
+  *   :disabled="disabled"
+  *   accept=".jpg"  // 默认无限制格式
+  *   :size="10"  // 默认5MB
+  *   :tooltip-content="这是提示，支持html"
+  * />
+  *
+  * [选文件]
+  * <select-file
+  *   :disabled="disabled"
+  *   :file="new Blob()"  // 可以使用v-model="new Blob()"
+  *   type="file"
+  *   accept=".bat,.sh"
+  *   :size="0"  // 为0不限制大小
+  *   @select="selectFile"
+  * />
+  */
+export default {
+  components: {
+    mcUpload,
+    mcTooltip,
+    mcImage
+  },
+  mixins: [uploadProps],
+  model: {
+    prop: 'file',
+    event: 'change'
+  },
+  props: {
+    // 组件样式功能类型:image file
+    type: {
+      // `'image'` / `'file'`
+      type: String,
+      default: 'image'
+    },
+    // 文件流,可以直接使用v-model
+    // file设置为空时请尽量赋值为new Blob():file = new Blob()
+    file: {
+      type: Blob,
+      default: () => {
+        return new Blob()
+      }
+    },
+    // 显示删除图片按钮,仅type="image"生效
+    showDelete: {
+      type: Boolean,
+      default: false
+    },
+    // 图片提示内容,仅type="image"生效
+    tooltipContent: {
+      type: String,
+      default: ''
+    },
+    // 选择文件的placeholder,仅type="file"生效
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    // 选择文件的样式,仅type="file"生效
+    inputStyle: {
+      type: String,
+      default: ''
+    },
+    // 等待动画，等待时会开启禁用
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      src: ''
+    }
+  },
+  computed: {
+    // 禁用
+    disUse () {
+      return this.loading || this.disabled
+    }
+  },
+  watch: {
+    file: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        // file = new Blob() 时也为空
+        if (isEmpty(val)) {
+          this.src = ''
+        } else {
+          this.setSrc(val)
+        }
+      }
+    }
+  },
+  methods: {
+    setSrc (file) {
+      if (this.type === 'image' && file.type.includes('image')) {
+        this.src = window.URL.createObjectURL(file)
+      } else {
+        this.src = file.name
+      }
+    },
+    handlerSelect (file) {
+      this.setSrc(file)
+      this.handlerChange(file)
+      // 选择文件时触发
+      // @arg 返回file实体
+      this.$emit('select', file)
+    },
+    handlerDelet (file) {
+      this.src = ''
+      this.$refs['mc-upload'].clearFiles()
+      this.handlerChange(new Blob())
+      // 删除文件时触发
+      // @arg 返回file实体
+      this.$emit('delet', file)
+    },
+    handlerChange (file) {
+      // 内部方法,选择文件时触发,会被v-model绑定,无需调用
+      this.$emit('change', file)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.select-file{
+  display: inline-block;
+  width: 100%;
+}
+</style>
diff --git a/src/components-new/mc-components/select-tag/select-tag.vue b/src/components-new/mc-components/select-tag/select-tag.vue
new file mode 100644
index 0000000..68f928d
--- /dev/null
+++ b/src/components-new/mc-components/select-tag/select-tag.vue
@@ -0,0 +1,163 @@
+<template>
+  <div v-show="visibleTag" :emit="emitVisible()" class="select-tag">
+    <div class="select-tag-content">
+      <span class="filter-title">{{ $t('common.filter') }}</span>
+      <span v-for="(item,key) in filterList" :key="key" class="tag-item">
+        <el-tag
+          v-show="item.length"
+          v-if="type=='string'"
+          class="tag-item-eltag"
+          closable
+          size="mini"
+          @close="closeFilterItem(key)"
+        >
+          <span class="tag-item-text">{{ item }}</span>
+        </el-tag>
+        <el-tag
+          v-show="item.val"
+          v-if="type=='object'"
+          closable
+          size="mini"
+          @close="closeFilterItem(item,key)"
+        >
+          <span class="tag-item-text">{{ $t(item.label) }}:{{ item.val }}</span>
+        </el-tag>
+      </span>
+    </div>
+    <div class="clearFilter" @click="clearFilter">{{ $t('common.emptyFilter') }}</div>
+  </div>
+</template>
+
+<script>
+/**
+	 * @group 组件组合的封装 mc-components
+	 * 筛选后的tag数据标签管理,tag标签内文字支持字符串与键值对展示,一般放在table上方
+	 * 建议配合 mc-table-column(th头部筛选弹窗) 组件使用
+*/
+export default {
+  props: {
+    // 标签内部文字的展示形式
+    // string:字符串('val1;val2');
+    // object:键值对对象({val:'val1;val2',label:'label'})
+    type: {
+      type: String,
+      default: 'string'
+    },
+    /**
+     * 传入的数据
+     * 当type为string时,tagList为{name:'val1;val2',name:'val1;val2'},name为table对应表头数据的字段名
+     * 当type为object时,tagList为{name:{val:'val1;val2',label:'label'}},name为table对应表头数据的字段名,
+     * val为筛选的值,label为国际化的字段,通过$t(label)能获取正确的国际化值
+     * */
+    tagList: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      filterList: null
+    }
+  },
+  computed: {
+    visibleTag () {
+      return Object.values(this.tagList).filter((item) =>
+        this.type === 'object' ? item.val.length : item.length
+      ).length
+    }
+  },
+  watch: {
+    tagList: {
+      immediate: true,
+      deep: true,
+      handler (obj) {
+        if (this.type === 'object') {
+          this.filterList = []
+          for (const key in obj) {
+            this.filterList.push({
+              name: key,
+              val: obj[key].val,
+              label: obj[key].label
+            })
+          }
+        } else {
+          this.filterList = obj
+        }
+      }
+    }
+  },
+  methods: {
+    closeFilterItem (item, index) {
+      if (this.type === 'object') {
+        this.filterList.splice(index, 1)
+      } else {
+        this.$set(this.filterList, item, '')
+      }
+      // 关闭单个tag触发
+      // @arg 返回关闭的单个tag数据
+      this.$emit('close', item)
+    },
+    clearFilter () {
+      Object.keys(this.filterList).forEach((item) => {
+        this.$set(this.filterList, item, '')
+      })
+      // 清空全部tag触发
+      this.$emit('clear')
+    },
+    emitVisible () {
+      // 获取select-tag的显示状态
+      // @arg 返回true或者false
+      this.$emit('getShow', !!this.visibleTag)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-tag {
+  width: 100%;
+  min-height: 35px;
+  background: $lightBgColor;
+  border: 1px solid rgba(23, 33, 71, 1);
+  margin-top: 20px;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &-content{
+    width: calc(100% - 100px);
+  }
+
+  .filter-title {
+    color: #ffffff;
+    font-size: 12px;
+    line-height: 35px;
+    margin-right: 10px;
+  }
+  .tag-item {
+    line-height: 35px;
+
+    .el-tag{
+      margin-right: 10px;
+      max-width: calc(100% - 72px);
+    }
+
+    &-text{
+      display: inline-block;
+      max-width: calc(100% - 12px);
+      vertical-align: middle;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .clearFilter {
+    min-width: 80px;
+    text-align: center;
+    color: #409eff;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/table/mc-single-table/index.vue b/src/components-new/mc-components/table/mc-single-table/index.vue
new file mode 100644
index 0000000..c4c6025
--- /dev/null
+++ b/src/components-new/mc-components/table/mc-single-table/index.vue
@@ -0,0 +1,154 @@
+<!--基于mc-select-table 扩展的单页表格
+1. 下拉筛选，搜索由前端过滤
+2. 没有分页
+3. 适用于弹窗简单提示
+-->
+<template>
+  <mc-select-table
+    ref="mcSelectTable"
+    class-name="white"
+    :table-data="newTableData"
+    :column-list="columnList"
+    :height="tableHeight"
+    :pagination-show="false"
+    @onFilter="handleFilter"
+    @closeTag="closeTag"
+    @clearTag="clearTag"
+    @selectionChange="handleSelectionChange"
+  >
+    <template #toolbar>
+      <div class="toolbar">
+        <div class="header">
+          <mc-search
+            v-model="searchVal"
+            :search="true"
+            :placeholder="searchPlaceholder"
+            @change="handleSearch"
+          />
+        </div>
+      </div>
+    </template>
+    <template #unshift>
+      <slot name="unshift" />
+    </template>
+    <template #append>
+      <slot name="append" />
+    </template>
+  </mc-select-table>
+</template>
+<script>
+import mcSearch from '@/components-new/mc-ui/input/mc-search'
+import mcSelectTable from '@/components-new/mc-components/table/select-table/mc-select-table'
+export default {
+  components: {
+    mcSelectTable,
+    mcSearch
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    columnList: {
+      type: Array,
+      default: () => []
+    },
+    tableHeight: {
+      type: String,
+      default: '500px'
+    },
+    // 搜索时要过滤的属性
+    searchProps: {
+      type: [Array, String],
+      default: ''
+    },
+    searchPlaceholder: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      newTableData: this.tableData,
+      searchVal: '',
+      tableParams: {}
+    }
+  },
+  methods: {
+    handleSelectionChange (selections) {
+      this.$emit('select-table', selections)
+    },
+    // 下拉筛选处理
+    handleFilter (prop, texts) {
+      this.handleComFunc(prop, texts)
+    },
+    // 关闭单个
+    closeTag (data) {
+      this.handleComFunc(data.prop)
+    },
+    // 全部清空
+    clearTag (list) {
+      list.forEach(item => {
+        this.handleComFunc(item.prop)
+      })
+    },
+    // 搜索
+    handleSearch (val) {
+      this.setNewData()
+    },
+    // val 为数组或者字符串
+    handleComFunc (prop, val) {
+      this.tableParams[prop] = val
+      this.setNewData()
+    },
+    // 根据 tableParams的属性过滤tableData
+    setNewData () {
+      const arr = this.tableData.map(item => {
+        item.match = false
+        item.search_match = false
+        // 筛选的数据要满足对象里的每一项
+        const match = []
+        for (const key in this.tableParams) {
+          if (item[key]) {
+            // 表格里的每一项 (这里会使用includes，值只能为 number 或者 string)
+            const originVal = isNaN(item[key]) ? item[key] : String(item[key])
+            const curVal = this.tableParams[key]
+            // 即将筛选的每一项目，转为数组
+            const filterVal = Array.isArray(curVal) ? curVal : curVal?.split(',') ?? []
+            if (filterVal.length) {
+              match.push(filterVal.some(ev => originVal.includes(ev)))
+            } else {
+              // 取消筛选
+              match.push(true)
+            }
+          } else {
+            // 过滤里无关属性
+            match.push(true)
+          }
+        }
+        const props = Array.isArray(this.searchProps) ? this.searchProps : [this.searchProps]
+        props.forEach(prop => {
+          if (!this.searchVal || (item[prop] && item[prop].includes(this.searchVal))) {
+            item.search_match = true
+          }
+        })
+        if (Object.keys(this.tableParams).length && !match.length) {
+          item.match = false
+        } else {
+          item.match = match.every(item => item)
+        }
+        return item
+      })
+      this.newTableData = arr.filter(item => item.match && item.search_match)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.header{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/components-new/mc-components/table/mc-table-column.vue b/src/components-new/mc-components/table/mc-table-column.vue
new file mode 100644
index 0000000..bc7b8bd
--- /dev/null
+++ b/src/components-new/mc-components/table/mc-table-column.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="mc-table-column">
+    <!-- TODO 预留排序 -->
+    <el-popover v-model="visible" placement="bottom" :width="filterWidth" trigger="hover">
+      <i slot="reference" class="el-icon-arrow-down el-icon-arrow-up" />
+      <div class="filter-box el-table-filter__content">
+        <el-input v-model="search" size="mini" clearable :placeholder="$t('common.columnSearch')" />
+        <div class="filter-list">
+          <el-checkbox-group v-model="checkList">
+            <el-checkbox v-for="item in searchArr" :key="item[defaultProps.key]" :label="item[defaultProps.label]">
+              <span v-if="item[defaultProps.name]">{{ item[defaultProps.name] }}</span>
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <div class="el-table-filter__bottom">
+        <el-link
+          :underline="false"
+          :disabled="!checkList.length"
+          @click="handleConfirm"
+        >{{ $t('common.columnFilter') }}</el-link>
+        <el-link :underline="false" :disabled="disReset" @click="handleReset">{{ $t('common.columnReset') }}</el-link>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<script>
+/**
+ * @group 组件组合的封装 mc-components
+ * 二次封装的table-column 头部筛选组件,用于在table头部加入下拉筛选功能
+ */
+import { isEmpty } from 'lodash'
+
+export default {
+  props: {
+    /**
+     * 筛选的选项列表
+     * filterProps['label']:String, // 节点的勾选框属性值,一般是国际化描述文本或者给后台接口的值
+     * filterProps['name']:String, // 节点的国际化描述文本
+     * filterProps['key']:[String,Number] // 节点的勾选框属性值,一般是传给后台接口的值
+     * filterProps['checked']:Boolean // 是否选中
+     */
+    filters: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    /**
+     * 列表项的属性,只需要传需要设置的部分
+     * 设置了label和name时无需设置key，此时label是传给后台接口的值，name是国际化描述文本，key会自动设置为label的值
+     * 设置了key和label时无需设置name，此时key是传给后台接口的值，label是国际化描述文本
+     */
+    filterProps: {
+      type: Object,
+      default: () => {
+        return {
+          key: 'key',
+          label: 'value',
+          name: 'name',
+          checked: 'checked'
+        }
+      }
+    },
+    // 属性
+    prop: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    // 筛选组件的宽度
+    filterWidth: {
+      type: String,
+      default: '200'
+    }
+  },
+  data () {
+    return {
+      search: '',
+      checkList: [],
+      visible: false,
+      searchArr: [],
+      emitUpdate: false, // 触发update标识
+      disReset: false // 禁用重置
+    }
+  },
+  computed: {
+    defaultProps () {
+      return Object.assign({
+        key: this.filterProps.key || this.filterProps.label,
+        label: 'value',
+        name: 'name',
+        checked: 'checked'
+      }, this.filterProps)
+    }
+  },
+  watch: {
+    search (val) {
+      this.searchArr = this.filters.filter((item) => {
+        // 查找不区分大小写
+        return item[this.defaultProps.name].match(new RegExp(val, 'i'))
+      })
+    },
+    filters: {
+      deep: true,
+      immediate: true,
+      handler (list) {
+        // 优化之前的多次触发handleConfirm问题
+        // @arg prop:属性 texts:选择的所有项
+        this.handleCheck() > 0 && this.$emit('onInit', {
+          prop: this.prop,
+          texts: this.checkList
+        }) && this.update()
+      }
+    },
+    visible (val) {
+      if (val) {
+        this.emitUpdate = false
+        this.search = '' // 气泡出现时清空搜索
+        this.disReset = this.getCheckedNum() === 0 // 气泡出现时是否启用重置
+      }
+      if (!val && !this.emitUpdate) {
+        // 没有点击"筛选""重置"隐藏气泡时应当做数据同步,修正勾选项
+        this.handleCheck()
+      }
+    }
+  },
+  methods: {
+    handleCheck () {
+      // 此处处理初始化设置默认checked时进行筛选
+      // 每次手动点击筛选后也会进入这里，但是checkList与手动选择的是相同的
+      // 可以通过判断前后筛选的checkList是否相同来过滤
+      this.searchArr = this.filters
+      return this.getCheckedNum()
+    },
+    getCheckedNum () {
+      let num = 0
+      this.checkList = []
+      for (const item of this.filters) {
+        item[this.defaultProps.checked] && this.checkList.push(item[this.defaultProps.label]) && num++
+      }
+      return num
+    },
+    setChecked () {
+      const sta = !isEmpty(this.checkList)
+      for (const item of this.filters) {
+        item[this.defaultProps.checked] = sta && this.checkList.includes(item[this.defaultProps.label])
+      }
+    },
+    handleConfirm () {
+      this.setChecked()
+      // 仅"筛选"触发
+      // @arg prop:属性 texts:选择的每一项
+      this.$emit('onFilter', {
+        prop: this.prop,
+        texts: this.checkList
+      })
+      this.update()
+    },
+    handleReset () {
+      this.clearFilter()
+      this.setChecked()
+      // 仅"重置"触发
+      // @arg prop:属性
+      this.$emit('onReset', { prop: this.prop })
+      this.update()
+    },
+    // 清除Filter事件，供外部（mc-select-table组件等）使用
+    clearFilter () {
+      this.checkList = []
+      this.search = ''
+    },
+    update () {
+      this.emitUpdate = true
+      // 返回的数据,"筛选"和"重置"都会触发
+      // @arg prop:属性 texts:选择的每一项
+      this.$emit('handleFilter', {
+        prop: this.prop,
+        texts: this.checkList
+      })
+      this.visible = false
+    }
+  }
+}
+</script>
+<style lang="scss">
+.filter-box {
+  .filter-list {
+    .el-checkbox {
+      margin-top: 8px;
+      display: block;
+    }
+  }
+  & + .el-table-filter__bottom {
+    margin: 15px -12px -8px -12px;
+    padding-left: 15px;
+    .el-link {
+      margin-right: 10px;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.el-checkbox-group{
+  max-height:240px;
+  overflow-y:auto;
+  padding-bottom: 17px;
+}
+.mc-table-column {
+  display: inline-block;
+  i {
+    cursor: pointer;
+    outline: 0;
+  }
+}
+.filter-list {
+  ::v-deep .el-checkbox__label {
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/table/mc-table.vue b/src/components-new/mc-components/table/mc-table.vue
new file mode 100644
index 0000000..a9bd838
--- /dev/null
+++ b/src/components-new/mc-components/table/mc-table.vue
@@ -0,0 +1,554 @@
+<template>
+  <div class="mc-table" :class="[className]">
+    <el-table
+      ref="multipleTable"
+      v-loading="listLoading"
+      :class="[className]"
+      :empty-text="emptyText"
+      element-loading-background="rgba(0, 0, 0, 0.1)"
+      :data="list"
+      tooltip-effect="dark"
+      :border="isBorder"
+      style="width: 100%;height: 100%;overflow:auto"
+      :height="tableHeight"
+      :span-method="spanMethod"
+      :row-key="rowKey"
+      :tree-props="treePropsObj"
+      :default-expand-all="isExpand"
+      :row-class-name="rowClassName"
+      :default-sort="defaultSort"
+      v-bind="$attrs"
+      v-on="new$listeners"
+    >
+      <!-- 插入表格的每一列 -->
+      <slot />
+    </el-table>
+    <div v-if="paginationShow" class="flex pagination">
+      <el-pagination
+        v-if="paginationShow"
+        :hide-on-single-page="hideSinglePage"
+        :page-sizes="[10, 20, 30, 50, 100]"
+        :total="tableTotal"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :pager-count="pagerCount"
+        :layout="paginationLayout"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import { cloneDeep, kebabCase, isEmpty } from 'lodash'
+import bus from '@/utils/bus'
+// @group 组件组合的封装 mc-components
+// 二次封装的table 组件,el-table组件能使用的属性/方法此组件都能直接使用,具体属性/方法请参考el-table组件文档
+export default {
+  props: {
+    // 接受请求，获取表格数据
+    listHandler: {
+      type: Function,
+      default: null
+    },
+    // 直接给表格赋值
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    // 设置rowname
+    rowClassName: {
+      type: Function,
+      default: () => () => {}
+    },
+    // 行id
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    // 是否显示翻页
+    paginationShow: {
+      type: Boolean,
+      default: true
+    },
+    // 表格固定高度，不会根据屏幕宽带变化而变化, eg: 20vh / 600px  传进来的value为’auto‘时 表示表格高度由内容撑开
+    height: {
+      type: String,
+      default: '0'
+    },
+    // 减去的表格高度，部分情况下计算的表格高度不准确，需要额外增减一些
+    shortHeight: {
+      type: Number,
+      default: 0
+    },
+    // 接受到额外参数，用于获取表格数据
+    options: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    // 表格为空时展示的提示文字
+    emptyText: {
+      type: String,
+      default () {
+        return this.$t('common.noData')
+      }
+    },
+    // 表格每列的数据，用于设置筛选展示的列
+    filterData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 表格的classname
+    className: {
+      type: String,
+      default: ''
+    },
+    // 是否带有纵向边框
+    isBorder: {
+      type: Boolean,
+      default: false
+    },
+    // 表格合并function
+    spanMethod: {
+      type: Function,
+      default: () => () => {}
+    },
+    // 不选中列，此列点击不会触发行选中
+    columnUncheck: {
+      type: [Array, Boolean],
+      default: () => {
+        return []
+      }
+    },
+    // 特殊的key，数组取得不是data
+    specialKey: {
+      type: String,
+      default: 'data'
+    },
+    // 分页layout设置
+    paginationLayout: {
+      type: String,
+      default: 'sizes, prev, pager, next, jumper, total'
+    },
+    // 页码按钮的数量，当总页数超过该值时会折叠, 只能设置为5-21的奇数，否则会报错
+    pagerCount: {
+      type: Number,
+      default: 7
+    },
+    // 表格加载时是否需要使用loading
+    isLoading: {
+      type: Boolean,
+      default: true
+    },
+    // 赋值之前先对表格数据进行处理
+    handleTableData: {
+      type: Function,
+      default: () => ({})
+    },
+    // 指定树形数据的关联属性
+    treePropsObj: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    // 是否默认展开树形结构
+    isExpand: {
+      type: Boolean,
+      default: true
+    },
+    // 表格是否在created周期中去调用getTableList方法,因为可能会有默认筛选
+    getTableListFuncTag: {
+      type: Boolean,
+      default: true
+    },
+    // 只有一页时是否隐藏
+    hideSinglePage: {
+      type: Boolean,
+      default: false
+    },
+    // 默认排序的字段
+    defaultSort: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      list: this.tableData.length ? this.tableData : [],
+      tableHeight: null,
+      listLoading: false,
+      tableTotal: this.tableData.length, // 表格总的数据个数
+      currentPage: 1,
+      pageSize: 20, // 每页显示20条
+      sortName: '', // 排序类型
+      order: 'desc',
+      extraParams: cloneDeep(this.options), // 下拉，搜索等传递来的额外参数
+      screenWidth: document.documentElement.clientWidth, // 屏幕宽度
+      screenHeight: document.documentElement.clientHeight, // 屏幕高度
+      selectSetting: [] // 展示的筛选列数据
+    }
+  },
+  computed: {
+    // 使用 new$listeners 继承$listeners属性，并重写$listeners原有事件
+    // new$listeners解决 $listeners 与自定义事件同时使用会触发两次的问题
+    new$listeners () {
+      const rewrite = {
+        // 这里的重写的方法,后续若有新的el-table方法被重写
+        // 一定要加进来,不然调用会触发两次
+        'sort-change': this.handleTableSort,
+        'cell-click': this.handleClickCell,
+        'row-click': this.handleClickTableRow
+      }
+      const obj = ['selectionChange', 'select', 'selectAll', 'filterChange']
+      const listeners = {}
+      for (const key in this.$listeners) {
+        if (obj.includes(key)) {
+          // key为驼峰写法的转为短横线写法
+          listeners[kebabCase(key)] = this.$listeners[key]
+        } else {
+          listeners[key] = this.$listeners[key]
+        }
+      }
+      return Object.assign({}, listeners, rewrite)
+    }
+  },
+  watch: {
+    screenWidth () {
+      this.calcTableHeight()
+    },
+    screenHeight () {
+      this.calcTableHeight()
+    },
+    height (newVal, oldVal) {
+      if (newVal !== oldVal) {
+        // 固定高度时修改高度时
+        this.$nextTick(() => {
+          this.calcTableHeight()
+        })
+      }
+    },
+    // 监听筛选列
+    filterData: {
+      handler (val) {
+        const data = val.filter((res) => res.isShow)
+        this.$emit('tableColumn', data)
+      },
+      deep: true,
+      immediate: true
+    },
+    tableData (table) {
+      this.tableTotal = table.length
+      this.handleListData()
+    },
+    defaultSort: {
+      immediate: true,
+      handler (val) {
+        if (!isEmpty(val)) {
+          this.order = val.order === 'descending' ? 'desc' : 'asc'
+          this.sortName = val.prop
+          this.$emit('expressOrder', { sidx: this.sortName, sord: this.order })
+        }
+      }
+    }
+  },
+  created () {
+    this.defaultSetting()
+    this.getTableListFuncTag && this.getTableList()
+  },
+  mounted () {
+    this.calcTableHeight()
+    window.onresize = () => {
+      this.screenWidth = document.body.clientWidth
+      this.screenHeight = document.body.clientHeight
+    }
+    bus.$on('resizeWindow', () => {
+      this.screenWidth = document.body.clientWidth
+      this.screenHeight = document.body.clientHeight
+      this.calcTableHeight()
+    })
+  },
+  beforeDestroy () {
+    this.$off('resizeWindow')
+  },
+  methods: {
+    calcTableHeight () {
+      // 表格高度
+      // 注意!!! 在mc-table祖先元素中使用 vue的transition组件transform模式 或者 css位移动画 等会导致 this.$refs.multipleTable.$el.offsetTop 获取不准确
+      // 在上面这种情况中建议给定mc-table的height
+      this.tableHeight = this.height === 'auto' ? '' : isNaN(this.height) ? this.height : window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 110 - this.shortHeight
+    },
+    getTableList () {
+      this.listLoading = this.isLoading
+      if (!this.listHandler) {
+        this.listLoading = false
+        this.handleListData()
+        return
+      }
+      // 部分只需要展示表格,不用翻页,此时不传rows 会返回所有内容
+      const pageSize = this.extraParams.pageSizeHide ? {} : { rows: this.pageSize }
+      this.listHandler({
+        page: this.currentPage,
+        sidx: this.sortName,
+        sord: this.order,
+        ...pageSize,
+        ...this.extraParams
+      }).then((res) => {
+        // 由于之前的接口回调未统一，目前有3种回调
+        // 1. {page:1,rows:[],records:1}
+        // 2. {status: 200,data: {page:1,rows:[],records:1}}
+        // 3. {status: 200,data: []}
+        if (res[this.specialKey] && Array.isArray(res[this.specialKey])) {
+          this.list = res[this.specialKey]
+        } else {
+          /**
+           * 后台参数调整, 丢弃 rows,使用新字段
+           * records 分页记录
+           * total 总条数
+           * pageSize 页面大小
+           * currentPage 当前页
+           * totalPage 总页数
+           */
+          const { data = {} } = res
+          const tableInfo = (data && Object.keys(data).length > 0) ? data : res
+          this.tableTotal = tableInfo.total || 0
+          this.pageSize = tableInfo.pageSize || 20
+          this.currentPage = tableInfo.currentPage || 1
+          this.list = tableInfo.records || []
+        }
+        // 对表格数据进行处理再赋值
+        const handeledArrayData = this.handleTableData(this.list)
+        this.list = Array.isArray(handeledArrayData) ? handeledArrayData : this.list
+        // 主动抛出表格返回数据
+        // @arg 返回处理过的数据 rows.data
+        this.$emit('getTableData', Array.from(this.list), res)
+      }).finally(_ => {
+        // 优化交互，防止请求太快看不见loading，让用户知道确实刷新了
+        setTimeout(() => {
+          this.listLoading = false
+        }, 0.5 * 1000)
+      })
+    },
+    // 前端分页
+    handleListData () {
+      // 如果显示分页,则计算分页,否则显示全部数据
+      this.list = this.paginationShow ? this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize) : this.tableData
+    },
+    // 每页显示内容个数
+    handleSizeChange (val) {
+      this.pageSize = val
+      this.getTableList()
+    },
+    // 翻页
+    handleCurrentChange (val) {
+      this.currentPage = val
+      this.getTableList()
+    },
+    // 排序
+    handleTableSort (column) {
+      this.order = column.order ? (column.order === 'descending' ? 'desc' : 'asc') : ''
+      this.sortName = this.order ? column.prop : ''
+      // 点击排序按钮会触发该事件
+      // @arg 返回排序的字段名与排序值
+      this.$emit('expressOrder', { sidx: this.sortName, sord: this.order })
+      this.getTableList()
+    },
+    clearFilter () {
+      this.$refs.multipleTable.clearFilter()
+    },
+    handleClickTableRow (row, column, event) {
+      // 当某一行被点击时会触发该事件
+      // @arg 返回当前勾选行数据
+      this.$emit('selectRow', row, column, event)
+    },
+    // 单元格被选中
+    handleClickCell (row, column, cell) {
+      // 操作栏/详情等  不触发行选中
+      if (typeof this.columnUncheck !== 'boolean') {
+        const columnUnchecks = [this.$t('mc-table.column.details'), this.$t('mc-table.column.operation'), ...this.columnUncheck]
+        if (!columnUnchecks.includes(column.label)) {
+          this.$refs.multipleTable.toggleRowSelection(row, true)
+        }
+      }
+      this.$emit('cell-click', { row, column, cell })
+    },
+    // 父组件抓取
+    // @vuese
+    // 刷新表格数据，返回第一页
+    refresh () {
+      this.currentPage = 1
+      this.getTableList()
+    },
+    // @vuese
+    // 获取当前组件ref，可调用原来elementui提供的api
+    renderTable () {
+      return this.$refs.multipleTable
+    },
+    // @vuese
+    // 父组件有额外参数渲染
+    // 用于初始化接受额外参数、搜索、下拉等接受额外参数重新渲染表格
+    // @arg params:{search，select等额外参数}, allParams:去除options参数数据,默认为false, resetPage:重置页码,默认为true
+    reloadTable (params, allParams = false, resetPage = true) {
+      if (allParams) {
+        this.extraParams = Object.assign({}, params)
+      } else {
+        this.extraParams = Object.assign(this.extraParams, params)
+      }
+      resetPage ? this.refresh() : this.getTableList()
+    },
+    // 抛出给父组件
+    // 选择设置
+    confirmSetting () {
+      const arr = this.filterData.filter((item) => {
+        return this.selectSetting.includes(item.label) && item.key
+      })
+      // 自定义显示表格显示哪几列，保存
+      const showArr = arr.map((item) => item.key)
+      const hideSetting = []
+      this.filterData.forEach((item) => {
+        item.isShow = showArr.includes(item.key)
+        if (!item.isShow) {
+          hideSetting.push(item.key)
+        }
+      })
+      Cookies.set('virual-setting', hideSetting)
+    },
+    // 默认设置，隐藏列
+    defaultSetting () {
+      let arr
+      try {
+        arr = JSON.parse(Cookies.get('virual-setting'))
+      } catch (error) {
+        arr = []
+      }
+      this.filterData.forEach((item) => {
+        if (arr.includes(item.key)) {
+          item.isShow = false
+        } else {
+          this.selectSetting.push(item.label)
+        }
+      })
+    },
+    // 供外部调用的方法，切换某行数据是否选中 isToSelect的值来控制 rowData对应行的选中与不选中
+    toggleSelection (rowData, isToSelect) {
+      if (rowData) {
+        if (rowData.length) { // 数组
+          rowData.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row, isToSelect)
+          })
+        } else { // 单个对象
+          this.$refs.multipleTable.toggleRowSelection(rowData, isToSelect)
+        }
+      } else { // 全不选
+        this.$refs.multipleTable.clearSelection()
+      }
+    },
+    // 单行刷新
+    reloadTableTargetRow (key, val) {
+      // 存在加载中的数据禁止刷新
+      if (this.listLoading) {
+        return
+      }
+      // 遍历列表，找到匹配的行
+      const rowToRefresh = this.list.find(row => row[key] === val)
+      // 部分只需要展示表格,不用翻页,此时不传rows 会返回所有内容
+      if (rowToRefresh) {
+        const pageSize = this.extraParams.pageSizeHide ? {} : { rows: this.pageSize }
+        this.listHandler({
+          page: this.currentPage,
+          sidx: this.sortName,
+          sord: this.order,
+          ...pageSize,
+          ...this.extraParams
+        }).then((res) => {
+          let list = null
+          // 由于之前的接口回调未统一，目前有3种回调
+          // 1. {page:1,rows:[],records:1}
+          // 2. {status: 200,data: {page:1,rows:[],records:1}}
+          // 3. {status: 200,data: []}
+          if (res[this.specialKey] && Array.isArray(res[this.specialKey])) {
+            list = res[this.specialKey]
+          } else {
+          /**
+           * 后台参数调整, 丢弃 rows,使用新字段
+           * records 分页记录
+           * total 总条数
+           * pageSize 页面大小
+           * currentPage 当前页
+           * totalPage 总页数
+           */
+            const { data = {} } = res
+            const tableInfo = (data && Object.keys(data).length > 0) ? data : res
+            list = tableInfo.records || []
+          }
+          // 对表格数据进行处理再赋值
+          const handeledArrayData = this.handleTableData(list)
+          list = Array.isArray(handeledArrayData) ? handeledArrayData : list
+          const newRowToRefresh = list.find(row => row[key] === val)
+          const newRowToRefreshIndex = list.findIndex(row => row[key] === val)
+          this.$set(this.list, newRowToRefreshIndex, newRowToRefresh)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.setting-item {
+  margin-bottom: 5px;
+}
+.mc-table {
+  margin-top: 20px;
+
+  .pagination {
+    margin-top: 15px;
+    .setting-icon {
+      font-size: 20px;
+      margin-top: 6px;
+      margin-left: 15px;
+      cursor: pointer;
+    }
+  }
+  .el-pagination {
+    text-align: center;
+    width: 100%;
+  }
+  &:not(.white) {
+    .el-pagination {
+      text-align: center;
+      width: 100%;
+      color: #fff;
+      .el-input__inner,
+      .more,
+      [class*='el-pagination__'],
+      [class*='btn-'] {
+        color: #fff;
+        line-height: 30px;
+      }
+    }
+  }
+  .el-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    .el-checkbox {
+      width: calc(calc(100% / 5) - 10px);
+      margin: 5px;
+    }
+  }
+  .el-dialog__footer {
+    text-align: center;
+    button {
+      margin-left: 0;
+      margin-right: 0;
+      margin: 0 10px;
+    }
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/table/select-table/formatter.js b/src/components-new/mc-components/table/select-table/formatter.js
new file mode 100644
index 0000000..9a8dcbf
--- /dev/null
+++ b/src/components-new/mc-components/table/select-table/formatter.js
@@ -0,0 +1,30 @@
+
+// 报错[ReferenceError: h is not defined]时注意！
+// formatter要写在data里面，不能写在export default之外，可以在生命周期函数添加到data的变量中
+// data是成员函数，所以会把h注入，而像methods,computed这些都只是对象，不会注入h
+// 如果vue用的是3.4以上的版本，method，getter就支持自动注入h
+
+export default {
+  name: 'Formatter',
+  props: {
+    row: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    column: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    renderName: {
+      type: String,
+      default: 'formatter'
+    }
+  },
+  render () {
+    return this.column[this.renderName](this.row, this.column)
+  }
+}
diff --git a/src/components-new/mc-components/table/select-table/mc-select-table.vue b/src/components-new/mc-components/table/select-table/mc-select-table.vue
new file mode 100644
index 0000000..68b87a7
--- /dev/null
+++ b/src/components-new/mc-components/table/select-table/mc-select-table.vue
@@ -0,0 +1,586 @@
+<template>
+  <!-- emitVisible必须加(),不然不会触发 -->
+  <div
+    class="mc-select-table"
+    :emit="emitVisible()"
+  >
+    <!-- 工具栏 -->
+    <div v-if="showSelectColumn||$scopedSlots.toolbar" class="mc-select-table-select-column flex align-center" :style="selectColumnStyle">
+      <!-- 控制列的显示 -->
+      <select-column
+        v-if="showSelectColumn"
+        :style="{order:['right','end'].includes(selectColumnPosition)?'10':'-10'}"
+        :column-array="columnList"
+        v-bind="$attrs"
+        :props="{ key: 'prop', name: 'label'}"
+        @changeColumn="changeColumn"
+      />
+      <div :style="{flex:selectColumnPosition!='right'?1:''}">
+        <slot name="toolbar" />
+      </div>
+    </div>
+
+    <slot name="afterTool" />
+
+    <!-- 筛选栏 -->
+    <transition name="select-animation">
+      <div v-if="showSelectTag" ref="selectTag" class="mc-select-table-select-tag flex align-center">
+        <div
+          v-show="tagList.length"
+          :style="{width:'100%',order:selectTagPosition=='right'?'10':'-10'}"
+        >
+          <select-tag
+            :key="new Date().getTime()"
+            :class-name="className"
+            :class="$attrs['class-name']"
+            :column-table="columnTable"
+            @closeTag="closeTag"
+            @clearTag="clearTag"
+          />
+        </div>
+        <div :style="{flex:selectTagPosition!='right'?1:''}">
+          <slot name="selectbar" />
+        </div>
+      </div>
+    </transition>
+
+    <slot name="afterSelect" />
+
+    <mc-table
+      ref="mcTable"
+      style="margin-top:10px"
+      :setting-visible="false"
+      :height="tableHeight"
+      :class-name="className"
+      v-bind="$newAttrs"
+      v-on="$listeners"
+    >
+      <!-- 插入表格的每一列 -->
+      <template>
+        <!-- 解决筛选操作表头不更新问题 -->
+        <el-table-column type="selection" class-name="mc-select-table-selection-class" fixed width="1px" />
+        <slot name="unshift" />
+        <el-table-column
+          v-for="column in columnTable"
+          :key="column.prop"
+          align="left"
+          :prop="column.prop"
+          :sortable="column.sortable?'custom':false"
+          :show-overflow-tooltip="column.showOverflowTooltip"
+          :width="column.width"
+          :min-width="column.minWidth"
+          :fixed="column.fixed"
+        >
+          <template slot="header" slot-scope="{col=column}">
+            <formatter :column="column" render-name="headExpand" />
+            <span :style="{color:col.filterChecked?selectedColor:''}">{{ col.label }}
+              <span v-if="filtersLoad" class="el-icon-loading" />
+              <mc-table-column
+                v-else-if="col.filters.length"
+                :ref="col.prop"
+                :filters="col.filters"
+                :filter-props="{ label: 'key', name: 'label'}"
+                filter-width="220"
+                :prop="col.prop"
+                @handleFilter="handleFilter"
+                @onInit="handleFilter($event,'onInitFilter')"
+                @onFilter="handleFilter($event,'onFilter')"
+                @onReset="handleFilter($event,'onResetFilter')"
+              />
+            </span>
+          </template>
+          <template slot-scope="{row}">
+            <formatter :row="row" :column="column" />
+          </template>
+        </el-table-column>
+
+        <slot name="append" />
+      </template>
+    </mc-table>
+  </div>
+</template>
+
+<script>
+import { isEqual, cloneDeep, isEmpty } from 'lodash'
+import mcTable from '@/components-new/mc-components/table/mc-table.vue'
+import selectColumn from '@/components-new/mc-components/table/select-table/select-column.vue'
+import mcTableColumn from '@/components-new/mc-components/table/mc-table-column.vue'
+import selectTag from './select-table-comp/selectTag.vue'
+import formatter from '@/components-new/mc-components/table/select-table/formatter.js'
+import variables from '@/styles/variables.scss'
+
+/**
+ * @group 组件组合的封装 mc-components
+ * 二次封装的 table 组件,集合了表头控制器/表头下拉筛选功能
+ * mc-table组件能使用的属性/方法此组件都能直接使用,具体属性/方法请参考mc-table组件内容
+ * 请配合 src/components/mc-components/table/mc-table-column.vue 组件使用
+ *
+ * 使用示例:
+ * // html
+ * <mc-select-table
+ *   ref="mcSelectTable"
+ *   :list-handler="getTableList"  // 表格数据方法
+ *   :select-request="getTableSelectList"  // 获取筛选数据方法
+ *   :short-height="40"
+ *   storage-key="uniphoneConversation"  // 设置存储在sessionStorage中的唯一key,不设置则不会存储在sessionStorage中
+ *   :options="selectObject"  // 表格获取数据的请求参数
+ *   :column-list="columnList"  // 表头配置项,包含表头的下拉筛选/表头控制器
+ *   show-select-column  // 是否显示表头字段控制器(右上角那个控制哪些表头字段显示的那个)
+ *   @closeTag="closeTag"  // 关闭单个筛选的tag时触发,返回参数要删除的单个tag数据
+ *   @clearTag="clearTag"  // 清空全部筛选的tag时触发,返回参数全部tag数据
+ *   @onFilter="handleFilter"
+ *   @selectionChange="selectionChange"  // 勾选表格一行数据时触发,返回参数选中的数据
+ * >
+ *   <template v-slot:unshift>
+ *     <el-table-column type="selection" width="40" fixed />
+ *   </template>
+ * </mc-select-table>
+ *
+ * // js
+ *  import { throttle } from 'lodash'
+ *  import mcSelectTable from '@/components/mc-components/select-table/mc-select-table.vue'
+ *  import * as api from '@/api/desktop-publish/uniphone.js'
+ *  export default {
+ *    components: {
+ *      mcSelectTable,
+ *    },
+ *    data () {
+ *      return {
+ *        color:'#fff',
+ *        selectObject: {},
+ *        columnList: [
+ *          { prop: 'mirrorName', label: this.$t('uniphone.conversation.list.column.mirror'), formatter: this.nameFormatter },
+ *          { prop: 'user', label: this.$t('uniphone.conversation.list.column.user') },
+ *          { prop: 'ip', label: this.$t('uniphone.conversation.list.column.ip') },
+ *          { prop: 'os', label: this.$t('uniphone.conversation.list.column.os') },
+ *          { prop: 'rule', label: this.$t('uniphone.conversation.list.column.rule') },
+ *          { prop: 'state', label: this.$t('uniphone.conversation.list.column.state') },
+ *          { prop: 'serve', label: this.$t('uniphone.conversation.list.column.serve') },
+ *          { prop: 'location', label: this.$t('uniphone.conversation.list.column.location') },
+ *          { prop: 'mode', label: this.$t('uniphone.conversation.list.column.mode') },
+ *          { prop: 'updateTime', label: this.$t('uniphone.conversation.list.column.updateTime') },
+ *          { prop: 'performance', label: this.$t('uniphone.conversation.list.column.performance') }
+ *        ]
+ *      }
+ *    },
+ *    methods: {
+ *      // 获取表格数据
+ *      getTableList (params) {
+ *        return api.getConversationList(params)
+ *      },
+ *      // 获取筛选数据
+ *      getTableSelectList () {
+ *        return api.getConversationSelectList().then(res => {
+ *          this.columnList.forEach((column, index) => {
+ *            // 对columnList的column设置filters属性
+ *          })
+ *        })
+ *      },
+ *      // 镜像名formatter
+ *      nameFormatter (row, column) {
+ *        // 传参数不能使用 onClick={this.navigateDetail(params)}，这样子会每次 render 的时候都会自动执行一次方法
+ *        // 应该使用 bind，或者箭头函数来传参:onClick={this.navigateDetail.bind(this, row)}
+ *        return (<el-link type='primary' style={{ color: this.color }} onClick={() => { this.navigateDetail(row) }}>{row.name}</el-link>)
+ *      },
+ *      // 跳转详情
+ *      navigateDetail (row) {},
+ *      // 获取表格选中的数据
+ *      selectionChange (select) {},
+ *      setSelectObject: function () {
+ *        // 设置发送到后端的请求参数
+ *        // this.selectObject......
+ *        this.$refs.mcSelectTable.reloadTable(this.selectObject)
+ *      },
+ *      // 处理筛选
+ *      handleFilter (prop, texts) {},
+ *      // 关闭单个tag
+ *      closeTag (data) {},
+ *      // 清空tag
+ *      clearTag (list) {}
+ *    }
+ *  }
+ */
+export default {
+  components: {
+    mcTable,
+    formatter,
+    selectTag,
+    selectColumn,
+    mcTableColumn
+  },
+  props: {
+    /**
+     * 表头字段
+     * columnList子项包含:
+     *    prop: String, // th表头字段名
+     *    label: String, // th表头字段名对应的国际化文字
+     *    sortable: Boolean, // 排序
+     *    default: Boolean, // 默认显示
+     *    required: Boolean, // 必须显示
+     *    fixed: Boolean, // 是否固定[true/false/'left'/'right']
+     *    showOverflowTooltip: Boolean, // 超出部分显示...,鼠标悬浮显示tooltip
+     *    width: String, // 固定的列宽度，尽量使用自适应宽度的minWidth
+     *    minWidth: String, // 列最小宽度
+     *    formatter: Function (row, column) => {}, // 这一列html内容处理事件
+     *    load: false, // 下拉数据加载动画(默认关闭)
+     *    filters: Array, // 下拉筛选
+     *      filters子项包含:
+     *        key: String, // checkbox选项的字段值,一般是传给接口的内容
+     *        label: String, // checkbox字段值对应的国际化文本描述
+     *        checked: Boolean // checkbox是否选中
+     * tips:在设置default或者required属性无效时请清空浏览器的sessionStorage或者点击“重置”来重置表格的显示列
+     */
+    columnList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 表格风格
+    className: {
+      type: String,
+      default: ''
+    },
+    // 显示selectColumn,为false时会columnList中的所有字段都会显示在表头
+    showSelectColumn: {
+      type: Boolean,
+      default: false
+    },
+    // selectColumn组件的位置
+    selectColumnPosition: {
+      // `'left'` / `'right'` / `'start'` / `'end'`
+      type: String,
+      default: 'end'
+    },
+    // selectTag组件的位置
+    selectTagPosition: {
+      // `'left'` / `'right'`
+      type: String,
+      default: 'left'
+    },
+    // 下拉筛选请求方法
+    selectRequest: {
+      type: Function,
+      default: () => {
+        return Promise.resolve()
+      }
+    },
+    // 表格固定高度，不会根据屏幕宽带变化而变化, eg: 20vh / 600px
+    height: {
+      type: String,
+      default: '0'
+    },
+    controlsGetListObj: {
+      type: Object,
+      default: () => ({ isNotAllowgetTableList: false })
+    }
+  },
+  data () {
+    return {
+      tagList: [],
+      columnTable: [],
+      showSelectTag: false, // 筛选栏是否显示标识
+      selectTagHeight: 0, // 筛选栏高度
+      tableHeight: '', // 表格高度
+      filtersLoad: false, // 下拉筛选数据加载loading
+      selectedColor: variables.colorPrimary// 列筛选之后的label字体颜色
+    }
+  },
+  computed: {
+    selectColumnStyle () {
+      let style = {}
+      if (this.selectColumnPosition === 'end') {
+        style = { 'justify-content': 'space-between' }
+      }
+      return style
+    },
+    $newAttrs () {
+      const oldAttrs = this.$attrs
+      const tableData = oldAttrs['table-data'] && oldAttrs['table-data'].length
+      return {
+        ...oldAttrs,
+        ...{ 'list-handler': tableData ? null : this.resetListRequest }
+      }
+    },
+    getCurrentPageInfo () {
+      const { pageSize, currentPage, sidx, sord } = this.$refs.mcTable
+      return { pageSize, currentPage, sidx, sord }
+    }
+  },
+  watch: {
+    height: {
+      immediate: true,
+      handler (val) {
+        this.tableHeight = val
+      }
+    },
+    tagList: {
+      immediate: true,
+      handler (val) {
+        this.calcTableHeight()
+      }
+    },
+    columnList: {
+      deep: true,
+      immediate: true,
+      handler (list) {
+        list.forEach(column => {
+          column.headExpand = column.headExpand ?? function (row, column) {
+            return
+          }
+          column.formatter = column.formatter ?? function (row, column) {
+            return (<span>{row[column.prop]}</span>)
+          }
+          this.$set(column, 'filters', column.filters ?? [])
+        })
+
+        if (!this.showSelectColumn) {
+          this.setTableColumn(list)
+        }
+      }
+    }
+  },
+  created () {
+    this.lastFilter = {} // 上一次的handleFilter数据
+    this.getSelectList = false // 是否已获取里下拉筛选数据
+    this.initCheckedColumnNum = 0 // 有多少列带有checked选中项的
+    this.initFilterNum = 0 // 计算onInitFilter触发多少次
+    this.initFilter = [] // onInitFilter触发时的Filter
+    this.initFilterReady = false // initFilter是否触发
+  },
+  methods: {
+    // @vuese
+    // 获取el-table组件，可调用原来elementui提供的api
+    renderTable () {
+      return this.$refs.mcTable.renderTable()
+    },
+    // 表格请求
+    async resetListRequest (params) {
+      // selectHandler只需要触发一次
+      if (!this.getSelectList) {
+        await this.selectHandler()
+        this.getInitCheckedColumnNum()
+      }
+      // 此时initFilterNum还未清0
+      return (this.initCheckedColumnNum === 0 || (this.initFilterReady && this.initCheckedColumnNum > 0) || this.initFilterNum === 0) &&
+      !this.controlsGetListObj.isNotAllowgetTableList
+        ? this.$attrs['list-handler'](params) : false
+    },
+
+    // 处理筛选请求
+    selectHandler () {
+      this.changeSelectListLoad(true)
+      return this.selectRequest().then(res => {
+        this.getSelectList = true
+      }).finally(_ => {
+        setTimeout(() => {
+          this.changeSelectListLoad()
+        }, 500)
+      })
+    },
+
+    // 计算表格高度
+    calcTableHeight () {
+      this.$nextTick(() => {
+        if (!isNaN(this.height)) {
+          // selectTag显示/隐藏时重新计算table高度
+          this.$refs.mcTable.calcTableHeight()
+        } else {
+        /* 设置height时的类型(还有其他的请继续补充):
+         * 'calc(100% - 10px)'  isNaN(this.height):true
+         * '100%'或'100vh'或'500px'  isNaN(this.height):true
+         * 500或'500'  isNaN(this.height):false
+         */
+          this.selectTagHeight = this.showSelectTag ? this.$refs.selectTag.offsetHeight : 0
+          this.tableHeight = this.height.includes('calc')
+            ? this.height.replace(')', ' - ' + (this.selectTagHeight + 'px') + ')')
+            : this.height === 'auto' ? 'auto' : `calc(${this.height} - ${this.selectTagHeight + 'px'})`
+        }
+      })
+    },
+
+    // 设置表格数据
+    setTableColumn (list) {
+      this.columnTable = []
+      list.forEach(column => {
+        this.columnTable.push(column)
+      })
+    },
+
+    // 修改下拉筛选的load
+    changeSelectListLoad (bool = false) {
+      const array = this.showSelectColumn ? this.columnTable : this.columnList
+      this.filtersLoad = bool
+      array.forEach((column, index) => {
+        column.filters.every(fil => { fil.checked = fil.checked ?? false })
+      })
+      this.setTableColumn(array)
+    },
+
+    // 获取带有checked选中项的列数
+    getInitCheckedColumnNum () {
+      this.initCheckedColumnNum = 0
+      for (const column of this.columnTable) {
+        if (!isEmpty(column.filters)) {
+          column.filters.some(f => f.checked) && this.initCheckedColumnNum++
+        }
+      }
+    },
+
+    // 改变展示的列
+    changeColumn (column) {
+      this.setTableColumn(column)
+      this.$nextTick(() => {
+        // 部分浏览器在改变列数量后需要重新计算布局
+        this.$refs.mcTable?.renderTable().doLayout()
+      })
+      this.setTagList()
+      // filters含有checked才计算initCheckedColumnNum
+      this.tagList.length && this.getInitCheckedColumnNum()
+    },
+
+    // 设置selectTag
+    setTagList () {
+      const tagList = this.columnTable.filter(col => col.filters.some(item => item.checked))
+      if (!isEqual(tagList, this.tagList)) {
+        // 不相等才赋值，减少不必要的更新
+        this.tagList = cloneDeep(tagList)
+      }
+    },
+
+    reloadTable (params, allParams = true, resetPage) {
+      if (this.$refs.mcTable) {
+        this.$refs.mcTable.reloadTable(params, allParams, resetPage)
+      }
+    },
+
+    refresh () {
+      this.$refs.mcTable.refresh()
+    },
+
+    emitVisible () {
+      // 获取select-tag的显示状态
+      this.showSelectTag = !!(this.tagList.length || this.$scopedSlots.selectbar)
+      // @arg 返回高度和显示状态
+      this.$nextTick(() => {
+        this.$emit('getSelectTagInfo', {
+          height: this.selectTagHeight,
+          show: this.showSelectTag
+        })
+      })
+    },
+
+    // 设置filters的选中
+    handleFilter ({ prop, texts = [] }, type) {
+      if (!isEqual(this.lastFilter[prop], texts)) {
+        this.lastFilter[prop] = texts
+        let hasFilters = false
+        // 修改columnTable对应prop项的filters中的对应item的checked
+        for (let index = 0; index < this.columnTable.length; index++) {
+          const column = this.columnTable[index]
+          if (column.prop === prop) {
+            let filterChecked = false
+            for (const item of column.filters) {
+              item.checked = false
+              if (texts.length && texts.some(text => item.key === text)) {
+                item.checked = true
+                filterChecked = true
+                hasFilters = true
+              }
+            }
+            // 标识是否有选中
+            this.$set(column, 'filterChecked', filterChecked)
+            break
+          }
+        }
+        if (type === 'onInitFilter') {
+          // filters不为空才计算initCheckedColumnNum
+          hasFilters && this.getInitCheckedColumnNum()
+          // 在多列下拉筛选的checked如果有true,则有几列就会触发几次该事件
+          this.initFilterNum++ // 计算onInitFilter触发多少次
+          this.initCheckedColumnNum > 0 && this.initFilter.push({ prop, texts })
+          if (this.initCheckedColumnNum === this.initFilterNum) {
+            // 在手动修改checked时触发且
+            // 理想情况下不管有多少列含有checked,都应该只触发一次initFilter事件
+            // @arg 返回筛选选中的列表
+            this.initFilterReady = true
+            this.$emit('initFilter', this.initFilter)
+            this.initFilterNum = 0 // 次数统计清0
+          }
+        } else if (['onFilter', 'onResetFilter'].includes(type)) {
+          // onFilter事件只用于在点击"筛选"与"重置"时触发
+          this.$emit('onFilter', prop, texts)
+        }
+
+        this.setTagList()
+      }
+    },
+
+    // 关闭单个tag
+    closeTag (data, emit = true) {
+      // el-table会根据fixed列的数量来进行拷贝表单,重置表单的时候要注意
+      // 比如 selection列 和 操作列 有设置fixed时,这时的el-table会有2+1个
+      this.$refs[data.prop].map(item => {
+        // closeTag与clearTag不应该触发onFilter
+        item.clearFilter()
+        // update会触发handleFilter自动更新checked
+        item.update()
+      })
+      emit && this.$emit('closeTag', data)
+    },
+
+    // 清空tag
+    clearTag () {
+      const tagList = cloneDeep(this.tagList)
+      for (const item of tagList) {
+        this.closeTag(item, false)
+      }
+      this.$emit('clearTag', tagList)
+    },
+    reloadTableTargetRow (key, val) {
+      console.log(key, val)
+      if (!key || !val) {
+        return
+      }
+       this.$refs.mcTable?.reloadTableTargetRow(key, val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mc-select-table{
+  ::v-deep &-selection-class{
+    border: none!important;
+    .cell,.el-checkbox__input{
+      display: none!important;
+    }
+  }
+
+  &-select-column{
+    box-sizing: content-box;
+    padding-top: 10px;
+  }
+
+  .select-animation{
+    &-enter-active{
+      transition: opacity 1s;
+    }
+    &-leave-active{
+      transition: opacity 0.5s;
+    }
+    &-enter, &-leave-to{
+      opacity: 0;
+    }
+  }
+
+  &-select-tag{
+    box-sizing: content-box;
+    margin-top: 10px;
+  }
+
+  &-tooltip-content{
+    max-width: 300px;
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/table/select-table/select-column.vue b/src/components-new/mc-components/table/select-table/select-column.vue
new file mode 100644
index 0000000..f090c30
--- /dev/null
+++ b/src/components-new/mc-components/table/select-table/select-column.vue
@@ -0,0 +1,220 @@
+<template>
+  <div id="select-column" class="table-select-column">
+    <el-popover v-model="visible" placement="bottom" width="200" height="100" trigger="click">
+      <div class="pop-content">
+        <el-input v-model="search" size="mini" clearable :placeholder="$t('common.columnSearch')" />
+        <el-checkbox-group v-model="columnSelect" class="checkbox-group">
+          <el-checkbox
+            v-for="(item,index) in searchArr"
+            :key="index"
+            :label="item[defaultProps.key]"
+            class="checkbox-item"
+            :disabled="item[defaultProps.required]"
+          >{{ item[defaultProps.name] }}</el-checkbox>
+        </el-checkbox-group>
+        <div class="pop-button">
+          <span @click="applyColumn">{{ $t('common.apply') }}</span>
+          <span @click="resetColumn">{{ $t('common.reset') }}</span>
+        </div>
+      </div>
+      <svg-icon slot="reference" icon-class="filter" class="filter-icon" />
+    </el-popover>
+  </div>
+</template>
+<script>
+import { cloneDeep } from 'lodash'
+
+/**
+ * @group 组件组合的封装 mc-components
+ * 二次封装的字段控制器组件,用于控制哪些字段显示
+ * 请配合 table 组件使用
+ */
+export default {
+  name: 'SelectColumn',
+  props: {
+    /**
+     * columnArray 多选的列表内容
+     * item项包含:
+     *  key - 表头字段key
+     *  name - 国际化字段
+     *  required - 是否是必选表头字段,为true则默认选中不可取消
+     *  default - 是否为始化显示字段，重置的时候会显示初始化字
+     * */
+    columnArray: {
+      type: Array,
+      default: () => []
+    },
+    // 存储在sessionStorage中的唯一key,不设置则不会存储在sessionStorage中
+    storageKey: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 节点的属性值字段名,只需要传需要设置的部分
+     * key:checkbox节点的勾选框属性值,一般时传给后台接口的值,
+     * name:checkbox节点的国际化描述文本,
+     * required:checkbox节点是否必选,不可取消选中,
+     * default:checkbox节点是否默认选中,
+     * */
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          key: 'key',
+          name: 'name',
+          required: 'required',
+          default: 'default'
+        }
+      }
+    },
+    // 初始化是否调用setColumn函数
+    isInitCallSetColumn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      // 选择后的字段
+      columnSelect: [],
+      visible: false,
+      emitUpdate: false, // 触发update标识
+      search: '',
+      searchArr: []
+    }
+  },
+  computed: {
+    defaultProps () {
+      return Object.assign({
+        key: 'key',
+        name: 'name',
+        required: 'required',
+        default: 'default'
+      }, this.props)
+    }
+  },
+  watch: {
+    columnArray: {
+      deep: true,
+      immediate: true,
+      handler (list) {
+        this.handleCheck()
+      }
+    },
+    visible (val) {
+      this.search = ''
+      if (val) {
+        this.emitUpdate = false
+      }
+      if (!val && !this.emitUpdate) {
+        // 没有点击"筛选""重置"隐藏气泡时应当做数据同步,修正勾选项
+        this.handleCheck()
+      }
+    },
+    search (val) {
+      this.searchArr = this.columnArray.filter((item) => {
+        // 查找不区分大小写
+        return item.label.match(new RegExp(val, 'i'))
+      })
+    }
+  },
+  methods: {
+    handleCheck () {
+      // 初始化默认选择字段
+      this.columnDefault = []
+      // 存储默认选择字段
+      for (const column of this.columnArray) {
+        if (column[this.defaultProps.required]) {
+          column[this.defaultProps.default] = true
+        }
+        column[this.defaultProps.default] && this.columnDefault.push(column[this.defaultProps.key])
+      }
+      // 设置已选
+      this.columnSelect = cloneDeep(this.columnDefault)
+      // 存储在sessionStorage中的选项
+      const columnStorage = sessionStorage.getItem(this.storageKey)
+      if (columnStorage && JSON.parse(columnStorage).length) {
+        // 设置已选
+        // sessionStorage中的选项优先级比默认选择字段的高
+        this.columnSelect = JSON.parse(columnStorage).map(column => column[this.defaultProps.key])
+      }
+      this.searchArr = this.columnArray
+      this.isInitCallSetColumn && this.setColumn()
+    },
+    // 应用
+    applyColumn () {
+      this.emitUpdate = true
+      this.visible = false
+      this.setColumn()
+    },
+    // 重置
+    resetColumn () {
+      // 重置默认选择字段到已选
+      this.columnSelect = cloneDeep(this.columnDefault)
+      this.applyColumn()
+    },
+    setColumn () {
+      const column = this.columnArray.filter(item => this.columnSelect.includes(item[this.defaultProps.key]))
+      // 存储已选字段
+      this.storageKey && sessionStorage.setItem(this.storageKey, JSON.stringify(column))
+      this.$emit('changeColumn', column)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.table-select-column {
+  display: inline-block;
+  margin-right: 10px;
+  order: 10;
+
+  ::v-deep .el-checkbox-group {
+    font-size: 0;
+    display: flex;
+    flex-direction: column;
+    ::v-deep .el-checkbox {
+      line-height: 40px;
+    }
+  }
+}
+.el-checkbox-group{
+  overflow-y:auto;
+  max-height:490px;
+}
+
+::v-deep .el-select-dropdown__item {
+  display: flex;
+  align-items: center;
+}
+
+.filter-icon {
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 10px;
+  &:hover{
+   color:$menuHover;
+  }
+}
+.pop-content {
+  width: 100%;
+  height: auto;
+  .pop-button {
+    width: 100%;
+    height: 30px;
+    border-top: 1px solid #f2f2f2;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #2e8ff4;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  .checkbox-item {
+    line-height: 28px;
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/table/select-table/select-table-comp/selectTag.vue b/src/components-new/mc-components/table/select-table/select-table-comp/selectTag.vue
new file mode 100644
index 0000000..aa11d6f
--- /dev/null
+++ b/src/components-new/mc-components/table/select-table/select-table-comp/selectTag.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="select-tag" :class="className">
+    <div class="select-tag-content">
+      <span class="filter-title">{{ $t('common.filter') }}</span>
+      <span v-for="(item,key) in columnTable" :key="key" class="tag-item">
+        <span v-if="showTag(item.filters)">
+          <el-tag closable size="mini" @close="closeTag(item)">
+            <el-tooltip effect="dark" placement="bottom">
+              <span class="tag-item-text">{{ $t(item.label) }}:{{ changeFilters(item.filters) }}</span>
+              <div slot="content" class="mc-select-table-tooltip-content">{{ changeFilters(item.filters) }}</div>
+            </el-tooltip>
+          </el-tag>
+        </span>
+      </span>
+    </div>
+    <div class="clearFilter" @click="clearTag">{{ $t('common.emptyFilter') }}</div>
+  </div>
+</template>
+
+<script>
+/**
+ * mc-select-table专属子组件，负责下拉筛选后的tag筛选标签列显示
+ * 用于拆分mc-select-table业务逻辑，减少mc-select-table代码冗余，降低逻辑复杂度
+ */
+import { isEmpty } from 'lodash'
+
+export default {
+  props: {
+    columnTable: {
+      type: Array,
+      default: () => []
+    },
+    // 表格风格
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    showTag (filters) {
+      return !isEmpty(filters.filter(item => item.checked))
+    },
+    changeFilters (filters) {
+      const checkedArr = filters.filter(item => item.checked)
+      return !isEmpty(checkedArr) ? checkedArr.reduce((total, cur, index) => (total += (cur.value || cur.label) + ';'), '') : ''
+    },
+
+    // 关闭单个tag
+    closeTag (data) {
+      this.$emit('closeTag', data)
+    },
+
+    // 清空tag
+    clearTag () {
+      this.$emit('clearTag')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-tag{
+    box-sizing: border-box;
+    min-height: 35px;
+    background: $lightBgColor;
+    border: 1px solid $subBorderColor;
+    border-radius: 2px;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &.white{ // 白色主题
+      background: #fff;
+      border-color: $lightFormColor;
+      .filter-title {
+        color: $subTextColor;
+      }
+    }
+
+    &-content{
+        width: calc(100% - 100px);
+    }
+
+    .filter-title {
+        color: #ffffff;
+        font-size: 12px;
+        line-height: 35px;
+        margin-right: 10px;
+    }
+    .tag-item {
+        line-height: 35px;
+
+        .el-tag{
+        margin-right: 10px;
+        max-width: calc(100% - 72px);
+        }
+
+        &-text{
+        display: inline-block;
+        max-width: 200px;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        }
+    }
+    .clearFilter {
+        min-width: 80px;
+        text-align: center;
+        color: #409eff;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/src/components-new/mc-components/time/time-range-simple.vue b/src/components-new/mc-components/time/time-range-simple.vue
new file mode 100644
index 0000000..9d587c7
--- /dev/null
+++ b/src/components-new/mc-components/time/time-range-simple.vue
@@ -0,0 +1,388 @@
+<template>
+  <div>
+    <div class="flex_week flex">
+      <span
+        v-for="(item, weekIndex) in week"
+        :key="weekIndex"
+        :class="{active: weekActiveGroup[item]}"
+        @click="toggleActive(item)"
+      >
+        {{ item }}
+      </span>
+    </div>
+    <div class="byted-schedule">
+      <table :key="itemKey" class="byted-schedule-calendar-table">
+        <tbody @mouseleave="handelMouseLeave">
+          <tr v-for="(item, weekIndex) in [1]" :key="item">
+            <td
+              v-for="timeIndex of timeLength"
+              :ref="`td${weekIndex * timeLength + timeIndex - 1}`"
+              :key="timeIndex"
+              :colspan="48 / timeLength"
+              :data-week="weekIndex"
+              :data-time="timeIndex"
+              :class="
+                timeArray[weekIndex * timeLength + timeIndex - 1] === '1'
+                  ? 'selected'
+                  : ''
+              "
+              class="byted-schedule-calendar-atom-time"
+              @mousedown="handelMouseDown(weekIndex, timeIndex - 1,$event)"
+              @mousemove="handelMouseMove(weekIndex, timeIndex - 1,$event)"
+              @mouseup="handelMouseUp(weekIndex, timeIndex - 1,$event)"
+            />
+          </tr>
+        </tbody>
+      </table>
+      <div class="flex">
+        <span v-for="index of 24" :key="index" class="flex_index"> {{ index - 1 }}</span>
+        <span class="flex_index" style="position: absolute;right: -7px;">24</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TimeChoiceRange',
+  props: {
+    value: {
+      type: Object,
+      default: () => {}
+    },
+    timeWidth: {
+      type: Number,
+      default: 7
+    },
+    timeLength: {
+      type: Number,
+      default: 24
+    }
+  },
+  data () {
+    return {
+      is_show_mask: false,
+      startWeekIndex: null,
+      startTimeIndex: null,
+      endWeekIndex: null,
+      endTimeIndex: null,
+      week: [
+        '星期一',
+        '星期二',
+        '星期三',
+        '星期四',
+        '星期五',
+        '星期六',
+        '星期日'
+      ],
+      cellStyle: {
+        // color: 'red'
+      },
+      weekActiveGroup: {
+        星期一: false,
+        星期二: false,
+        星期三: false,
+        星期四: false,
+        星期五: false,
+        星期六: false,
+        星期日: false
+      },
+      timeArray: [],
+      itemKey: '',
+      timeObject: {
+        星期一: []
+      },
+      box_screen_left: 0, // 定位td的left位置
+      box_screen_top: 0, // 定位td的top位置
+      start_x: 0,
+      start_y: 0,
+      end_x: 0,
+      end_y: 0
+    }
+  },
+  computed: {
+    mask_width () {
+      return `${Math.abs(this.end_x - this.start_x)}px;`
+    },
+    mask_height () {
+      return `${Math.abs(this.end_y - this.start_y)}px;`
+    },
+    mask_left () {
+      return `${Math.min(this.start_x, this.end_x) - this.box_screen_left}px;`
+    },
+    mask_top () {
+      return `${Math.min(this.start_y, this.end_y) - this.box_screen_top}px;`
+    }
+  },
+  created () {
+    if (Object.keys(this.value).length) {
+      // [1,3] 1011011111
+      const { week, time } = this.value
+      week.forEach(item => {
+        this.weekActiveGroup[this.week[item - 1]] = true
+      })
+      this.timeArray = time.split('')
+      for (var weekIndex = 0; weekIndex < this.timeWidth; weekIndex++) {
+        this.handelClick(weekIndex)
+      }
+    } else {
+      this.timeArray = []
+      for (var i = 0; i < this.timeWidth * this.timeLength; i++) {
+        this.timeArray[i] = '0'
+      }
+    }
+  },
+  mounted () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    toggleActive (week) {
+      this.weekActiveGroup[week] = !this.weekActiveGroup[week]
+      this.emitParams()
+    },
+    emitParams () {
+      const timeVal = this.timeArray.slice(0, 24)
+      const activeWeek = Object.keys(this.weekActiveGroup).filter(item => this.weekActiveGroup[item])
+      this.$emit('input', {
+        time: timeVal.join(''), // 11110101010111
+        week: activeWeek.map(item => this.week.indexOf(item) + 1), // [2,4]
+        timeText: this.timeObject['星期一'], // ['星期二','星期四']
+        weekText: Object.keys(this.weekActiveGroup).filter(item => this.weekActiveGroup[item]) // ['02:00-04:00','08:00-12:00']
+      })
+    },
+    handleScroll () {
+      const dom_box = document.querySelector('.byted-schedule-calendar-atom-time')
+      this.box_screen_left = dom_box.getBoundingClientRect().left - 76
+      this.box_screen_top = dom_box.getBoundingClientRect().top
+    },
+    handelClick (weekIndex, timeIndex) {
+      var rowStartIndex = weekIndex * this.timeLength
+      var i = 0
+      var startAndEndTimeList = [] // 记录开始和结束时间
+      while (i < this.timeLength) {
+        if (this.timeArray[rowStartIndex + i] === '1') {
+          var item = {
+            startTime: null,
+            endTime: null
+          }
+          item.startTime = i * (24 / this.timeLength)
+          var obj = this.findEndTime(weekIndex, i)
+          i = obj.index
+          item.endTime = obj.endTime
+          startAndEndTimeList.push(item)
+        }
+        i++
+      }
+      var checkedTimeList = []
+      for (let k = 0; k < startAndEndTimeList.length; k++) {
+        var start = this.numToTime(startAndEndTimeList[k].startTime)
+        var end = this.numToTime(startAndEndTimeList[k].endTime)
+        var str = start + '~' + end
+        checkedTimeList.push(str)
+      }
+      this.timeObject[this.week[weekIndex]] = JSON.parse(
+        JSON.stringify(checkedTimeList)
+      )
+    },
+    findEndTime (weekIndex, timeIndex) {
+      var index = weekIndex * this.timeLength + timeIndex
+      var obj = {}
+      obj.index = timeIndex
+      if (this.timeArray[index] === '0') {
+        obj.endTime = timeIndex * (24 / this.timeLength)
+        return obj
+      }
+      // 如果选择了当天最后时段
+      if (timeIndex === this.timeLength - 1 && this.timeArray[index] === '1') {
+        obj.endTime = this.timeLength * (24 / this.timeLength)
+        return obj
+      }
+      return this.findEndTime(weekIndex, timeIndex + 1)
+    },
+    numToTime (num) {
+      var hour = parseInt(num)
+      var minute = num % 1
+      hour = hour < 10 ? '0' + hour : hour + ''
+      minute = minute === 0 ? '00' : minute * 60 + ''
+      return hour + ':' + minute
+    },
+    findStartAndEndTime (weekIndex, timeIndex) {
+      var startX
+      var startY
+      var endX
+      var endY
+      startX =
+          this.startWeekIndex < weekIndex ? this.startWeekIndex : weekIndex
+      startY =
+          this.startTimeIndex < timeIndex ? this.startTimeIndex : timeIndex
+      endX = this.startWeekIndex < weekIndex ? weekIndex : this.startWeekIndex
+      endY = this.startTimeIndex < timeIndex ? timeIndex : this.startTimeIndex
+      return {
+        startX,
+        startY,
+        endX,
+        endY
+      }
+    },
+    handelMouseDown (weekIndex, timeIndex, event) {
+      // this.clearAllTime()
+      this.handleScroll()// 获取一下组件在视窗的位置
+      this.startWeekIndex = weekIndex
+      this.startTimeIndex = timeIndex
+      // 选择框
+      this.is_show_mask = true
+      this.start_x = event.clientX
+      this.start_y = event.clientY
+      this.end_x = event.clientX
+      this.end_y = event.clientY
+    },
+    handelMouseMove (weekIndex, timeIndex, event) {
+      this.endWeekIndex = weekIndex
+      this.endTimeIndex = timeIndex
+      if (this.startWeekIndex !== null) {
+        // event.path[0].style.background='#7594ef'
+        const { startX, endX, startY, endY } = this.findStartAndEndTime(
+          weekIndex,
+          timeIndex
+        )
+        for (var i = startX; i <= endX; i++) {
+          for (var j = startY; j <= endY; j++) {
+            this.$refs[`td${i * this.timeLength + j}`][0].style.background =
+                '#7594ef'
+          }
+        }
+      }
+      this.end_x = event.clientX
+      this.end_y = event.clientY
+    },
+    handelMouseLeave (event) {
+      if (this.startWeekIndex !== null) {
+        this.handelMouseUp(this.endWeekIndex, this.endTimeIndex)
+      }
+    },
+    handelMouseEnter (event) {
+      if (this.startWeekIndex !== null) {
+        this.handelMouseUp(this.endWeekIndex, this.endTimeIndex)
+      }
+    },
+    handelMouseUp (weekIndex, timeIndex) {
+      if (this.startWeekIndex !== null) {
+        const { startX, endX, startY, endY } = this.findStartAndEndTime(
+          weekIndex,
+          timeIndex
+        )
+        var value =
+            this.timeArray[
+              this.startWeekIndex * this.timeLength + this.startTimeIndex
+            ]
+        for (var i = startX; i <= endX; i++) {
+          for (var j = startY; j <= endY; j++) {
+            this.timeArray[i * this.timeLength + j] = value === '1' ? '0' : '1'
+            this.itemKey = Math.random()
+            this.handelClick(i, j)
+          }
+        }
+      }
+      this.startWeekIndex = null
+      this.startTimeIndex = null
+      this.endWeekIndex = null
+      this.endTimeIndex = null
+      this.emitParams()
+      // this.$emit('input', this.timeArray.join(''))
+      this.is_show_mask = false
+      this.resSetXY()
+    },
+    resSetXY () {
+      this.start_x = 0
+      this.start_y = 0
+      this.end_x = 0
+      this.end_y = 0
+    },
+    clearAllTime () {
+      for (var i = 0; i < this.timeWidth * this.timeLength; i++) {
+        this.timeArray[i] = '0'
+      }
+      this.timeObject = {
+        星期一: []
+      }
+      this.$emit('input', '')
+    }
+  }
+}
+</script>
+
+  <style scoped lang="scss">
+  .byted-schedule {
+    user-select: none;
+  }
+  .byted-schedule table {
+    border: 1px solid #ebebeb;
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    font-size: 12px;
+  }
+  .byted-schedule-calendar-table {
+    border-collapse: separate;
+    border-radius: 4px;
+  }
+  .byted-schedule-calendar-table tr td,
+  .byted-schedule-calendar-table tr th {
+    border-left: none;
+    border-top: none;
+    border-bottom: 1px solid;
+    border-bottom-color: #ebebeb;
+    border-right: 1px solid;
+    border-right-color: #ebebeb;
+    font-size: 14px;
+    text-align: center;
+    min-width: 11px;
+    line-height: 1.8em;
+    /* transition: background 200ms ease; */
+    color: $lightDefaultTextColor;
+    background: transparent;
+    padding: 0;
+    height: 20px;
+  }
+  .byted-schedule-week-td {
+    width: 75px;
+    padding: 20px 0;
+  }
+  .byted-schedule-calendar-table .selected {
+    background: #1890ff !important;
+  }
+  .byted-schedule-calendar-atom-time:hover {
+    background: #edf1fd;
+  }
+  tbody{
+    position: relative;
+      overflow: hidden;
+  }
+  .mask {
+      position: absolute;
+      background: red;
+      opacity: 0.4;
+      z-index: 999;
+  }
+  .flex{
+      .flex_index{
+          flex: 1;
+          margin-left: -6px;
+      }
+      &.flex_week{
+        border: 1px $lightBorderColor solid;
+        border-right: none;
+        span{
+          flex: 1;
+          border-right: 1px $lightBorderColor solid;
+          box-sizing: border-box;
+          text-align: center;
+          cursor: pointer;
+          &.active{
+            color: #fff;
+            background: $colorPrimary;
+          }
+        }
+      }
+  }
+  </style>
diff --git a/src/components-new/mc-components/time/time-range.vue b/src/components-new/mc-components/time/time-range.vue
new file mode 100644
index 0000000..32439bb
--- /dev/null
+++ b/src/components-new/mc-components/time/time-range.vue
@@ -0,0 +1,368 @@
+<template>
+  <div>
+    <div class="byted-schedule">
+      <table :key="itemKey" class="byted-schedule-calendar-table">
+        <thead>
+          <tr>
+            <th rowspan="8" class="byted-schedule-week-td">星期/时间</th>
+            <th colspan="24">00:00 - 12:00</th>
+            <th colspan="24">12:00 - 24:00</th>
+          </tr>
+          <tr>
+            <td v-for="index of 24" :key="index" colspan="2">
+              {{ index - 1 }}
+            </td>
+          </tr>
+        </thead>
+        <tbody @mouseleave="handelMouseLeave">
+          <!-- <div v-show="is_show_mask" class="mask" :style="'width:' + mask_width + 'left:' + mask_left + 'height:' + mask_height + 'top:' + mask_top" /> -->
+          <tr v-for="(item, weekIndex) in week" :key="item">
+            <td @mouseenter="handelMouseEnter">{{ item }}</td>
+            <td
+              v-for="timeIndex of timeLength"
+              :ref="`td${weekIndex * timeLength + timeIndex - 1}`"
+              :key="timeIndex"
+              :colspan="48 / timeLength"
+              :data-week="weekIndex"
+              :data-time="timeIndex"
+              :class="
+                timeArray[weekIndex * timeLength + timeIndex - 1] === '1'
+                  ? 'selected'
+                  : ''
+              "
+              class="byted-schedule-calendar-atom-time"
+              @mousedown="handelMouseDown(weekIndex, timeIndex - 1,$event)"
+              @mousemove="handelMouseMove(weekIndex, timeIndex - 1,$event)"
+              @mouseup="handelMouseUp(weekIndex, timeIndex - 1,$event)"
+            />
+          </tr>
+          <tr @mouseenter="handelMouseEnter">
+            <td colspan="49">
+              <div style="display: flex; justify-content: space-between">
+                <span style="margin-left: 10px">高峰时间段:</span>
+                <a
+                  :underline="false"
+                  style="margin-right: 10px;color: #1890FF;cursor:pointer"
+                  @click="clearAllTime"
+                >清空</a>
+              </div>
+              <div style="text-align: start; padding: 0 10px">
+                <div v-for="(item, key) in timeObject" :key="key">
+                  <span v-if="item.length" style="margin-right: 10px">{{
+                    key
+                  }}</span>
+                  <span v-if="item.length">{{ item.join("、") }}</span>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TimeChoiceRange',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    timeWidth: {
+      type: Number,
+      default: 7
+    },
+    timeLength: {
+      type: Number,
+      default: 48
+    }
+  },
+  data () {
+    return {
+      is_show_mask: false,
+      startWeekIndex: null,
+      startTimeIndex: null,
+      endWeekIndex: null,
+      endTimeIndex: null,
+      week: [
+        '星期一',
+        '星期二',
+        '星期三',
+        '星期四',
+        '星期五',
+        '星期六',
+        '星期日'
+      ],
+      cellStyle: {
+        // color: 'red'
+      },
+      timeArray: [],
+      itemKey: '',
+      timeObject: {
+        星期一: [],
+        星期二: [],
+        星期三: [],
+        星期四: [],
+        星期五: [],
+        星期六: [],
+        星期日: []
+      },
+      box_screen_left: 0, // 定位td的left位置
+      box_screen_top: 0, // 定位td的top位置
+      start_x: 0,
+      start_y: 0,
+      end_x: 0,
+      end_y: 0
+    }
+  },
+  computed: {
+    mask_width () {
+      return `${Math.abs(this.end_x - this.start_x)}px;`
+    },
+    mask_height () {
+      return `${Math.abs(this.end_y - this.start_y)}px;`
+    },
+    mask_left () {
+      return `${Math.min(this.start_x, this.end_x) - this.box_screen_left}px;`
+    },
+    mask_top () {
+      return `${Math.min(this.start_y, this.end_y) - this.box_screen_top}px;`
+    }
+  },
+  created () {
+    if (this.value) {
+      this.timeArray = this.value.split('')
+      for (var weekIndex = 0; weekIndex < this.timeWidth; weekIndex++) {
+        this.handelClick(weekIndex)
+      }
+    } else {
+      this.timeArray = []
+      for (var i = 0; i < this.timeWidth * this.timeLength; i++) {
+        this.timeArray[i] = '0'
+      }
+    }
+  },
+  mounted () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    handleScroll () {
+      const dom_box = document.querySelector('.byted-schedule-calendar-atom-time')
+      this.box_screen_left = dom_box.getBoundingClientRect().left - 76
+      this.box_screen_top = dom_box.getBoundingClientRect().top
+    },
+    handelClick (weekIndex, timeIndex) {
+      var rowStartIndex = weekIndex * this.timeLength
+      var i = 0
+      var startAndEndTimeList = [] // 记录开始和结束时间
+      while (i < this.timeLength) {
+        if (this.timeArray[rowStartIndex + i] === '1') {
+          var item = {
+            startTime: null,
+            endTime: null
+          }
+          item.startTime = i * (24 / this.timeLength)
+          var obj = this.findEndTime(weekIndex, i)
+          i = obj.index
+          item.endTime = obj.endTime
+          startAndEndTimeList.push(item)
+        }
+        i++
+      }
+      var checkedTimeList = []
+      for (let k = 0; k < startAndEndTimeList.length; k++) {
+        var start = this.numToTime(startAndEndTimeList[k].startTime)
+        var end = this.numToTime(startAndEndTimeList[k].endTime)
+        var str = start + '~' + end
+        checkedTimeList.push(str)
+      }
+      this.timeObject[this.week[weekIndex]] = JSON.parse(
+        JSON.stringify(checkedTimeList)
+      )
+    },
+    findEndTime (weekIndex, timeIndex) {
+      var index = weekIndex * this.timeLength + timeIndex
+      var obj = {}
+      obj.index = timeIndex
+      if (this.timeArray[index] === '0') {
+        obj.endTime = timeIndex * (24 / this.timeLength)
+        return obj
+      }
+      // 如果选择了当天最后时段
+      if (timeIndex === this.timeLength - 1 && this.timeArray[index] === '1') {
+        obj.endTime = this.timeLength * (24 / this.timeLength)
+        return obj
+      }
+      return this.findEndTime(weekIndex, timeIndex + 1)
+    },
+    numToTime (num) {
+      var hour = parseInt(num)
+      var minute = num % 1
+      hour = hour < 10 ? '0' + hour : hour + ''
+      minute = minute === 0 ? '00' : minute * 60 + ''
+      return hour + ':' + minute
+    },
+    findStartAndEndTime (weekIndex, timeIndex) {
+      var startX
+      var startY
+      var endX
+      var endY
+      startX =
+          this.startWeekIndex < weekIndex ? this.startWeekIndex : weekIndex
+      startY =
+          this.startTimeIndex < timeIndex ? this.startTimeIndex : timeIndex
+      endX = this.startWeekIndex < weekIndex ? weekIndex : this.startWeekIndex
+      endY = this.startTimeIndex < timeIndex ? timeIndex : this.startTimeIndex
+      return {
+        startX,
+        startY,
+        endX,
+        endY
+      }
+    },
+    handelMouseDown (weekIndex, timeIndex, event) {
+      this.handleScroll()// 获取一下组件在视窗的位置
+      this.startWeekIndex = weekIndex
+      this.startTimeIndex = timeIndex
+      // 选择框
+      this.is_show_mask = true
+      this.start_x = event.clientX
+      this.start_y = event.clientY
+      this.end_x = event.clientX
+      this.end_y = event.clientY
+    },
+    handelMouseMove (weekIndex, timeIndex, event) {
+      this.endWeekIndex = weekIndex
+      this.endTimeIndex = timeIndex
+      if (this.startWeekIndex !== null) {
+        // event.path[0].style.background='#7594ef'
+        const { startX, endX, startY, endY } = this.findStartAndEndTime(
+          weekIndex,
+          timeIndex
+        )
+        for (var i = startX; i <= endX; i++) {
+          for (var j = startY; j <= endY; j++) {
+            this.$refs[`td${i * this.timeLength + j}`][0].style.background =
+                '#7594ef'
+          }
+        }
+      }
+      this.end_x = event.clientX
+      this.end_y = event.clientY
+    },
+    handelMouseLeave (event) {
+      if (this.startWeekIndex !== null) {
+        this.handelMouseUp(this.endWeekIndex, this.endTimeIndex)
+      }
+    },
+    handelMouseEnter (event) {
+      if (this.startWeekIndex !== null) {
+        this.handelMouseUp(this.endWeekIndex, this.endTimeIndex)
+      }
+    },
+    handelMouseUp (weekIndex, timeIndex) {
+      if (this.startWeekIndex !== null) {
+        const { startX, endX, startY, endY } = this.findStartAndEndTime(
+          weekIndex,
+          timeIndex
+        )
+        var value =
+            this.timeArray[
+              this.startWeekIndex * this.timeLength + this.startTimeIndex
+            ]
+        for (var i = startX; i <= endX; i++) {
+          for (var j = startY; j <= endY; j++) {
+            this.timeArray[i * this.timeLength + j] = value === '1' ? '0' : '1'
+            this.itemKey = Math.random()
+            this.handelClick(i, j)
+          }
+        }
+      }
+      this.startWeekIndex = null
+      this.startTimeIndex = null
+      this.endWeekIndex = null
+      this.endTimeIndex = null
+      this.$emit('input', this.timeArray.join(''))
+      this.is_show_mask = false
+      this.resSetXY()
+    },
+    resSetXY () {
+      this.start_x = 0
+      this.start_y = 0
+      this.end_x = 0
+      this.end_y = 0
+    },
+    clearAllTime () {
+      for (var i = 0; i < this.timeWidth * this.timeLength; i++) {
+        this.timeArray[i] = '0'
+      }
+      this.timeObject = {
+        星期一: [],
+        星期二: [],
+        星期三: [],
+        星期四: [],
+        星期五: [],
+        星期六: [],
+        星期日: []
+      }
+      this.$emit('input', '')
+    }
+  }
+}
+</script>
+
+  <style scoped>
+  .byted-schedule {
+    user-select: none;
+  }
+  .byted-schedule table {
+    border: 1px solid #ebebeb;
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    font-size: 12px;
+  }
+  .byted-schedule-calendar-table {
+    border-collapse: separate;
+    border-radius: 4px;
+  }
+  .byted-schedule-calendar-table tr td,
+  .byted-schedule-calendar-table tr th {
+    border-left: none;
+    border-top: none;
+    border-bottom: 1px solid;
+    border-bottom-color: #ebebeb;
+    border-right: 1px solid;
+    border-right-color: #ebebeb;
+    font-size: 14px;
+    text-align: center;
+    min-width: 11px;
+    line-height: 1.8em;
+    /* transition: background 200ms ease; */
+    color: $lightDefaultTextColor;
+    background: transparent;
+    padding: 0;
+  }
+  .byted-schedule-week-td {
+    width: 75px;
+    padding: 20px 0;
+  }
+  .byted-schedule-calendar-table .selected {
+    background: #1890ff !important;
+  }
+  .byted-schedule-calendar-atom-time:hover {
+    background: #edf1fd;
+  }
+  tbody{
+    position: relative;
+      overflow: hidden;
+  }
+  .mask {
+      position: absolute;
+      background: red;
+      opacity: 0.4;
+      z-index: 999;
+  }
+  </style>
diff --git a/src/components-new/mc-components/tree/three-column-tree/components/left-tree/index.vue b/src/components-new/mc-components/tree/three-column-tree/components/left-tree/index.vue
new file mode 100644
index 0000000..60af138
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/components/left-tree/index.vue
@@ -0,0 +1,183 @@
+<!--在tree-group的基础上增加了tab-->
+<template>
+  <div
+    class="tree-uesr-group--left flex"
+    :class="{
+      'tree-uesr-group--left-white': white,
+      'tree-uesr-group--left-onlyleft': onlyLeft,
+      'tree-uesr-group--left-hide': !showHeader
+    }"
+  >
+    <div class="left">
+      <mc-tabs
+        v-model="activeName"
+        :panes="tabGroup"
+        :theme="white ? 'light':'dark'"
+        @tab-click="handleTabClick"
+      >
+        <div class="tab-content">
+          <tab-user
+            v-if="activeName === 'left-tab'"
+            ref="left-tab"
+            v-bind="$props"
+            v-on="$listeners"
+            @nodeClick="handleNodeClick"
+          >
+            <template #left-oper="{ node,data }">
+              <slot name="left-oper" :node="node" :data="data" />
+            </template>
+          </tab-user>
+          <tab-label
+            v-else-if="activeName === 'right-tab'"
+            ref="right-tab"
+            v-bind="$props"
+            v-on="$listeners"
+            @nodeClick="handleNodeClick"
+          >
+            <template #right-oper="{ node,data }">
+              <slot name="right-oper" :node="node" :data="data" />
+            </template>
+          </tab-label>
+        </div>
+      </mc-tabs>
+    </div>
+    <div v-if="!onlyLeft">
+      <mid-table
+        :active-node="tabActiveNodeData"
+        :get-mid-table-filter="getMidTableFilter"
+        :mid-placeholder="midPlaceholder"
+        :before-exclude="beforeExclude"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import mixProp from '../../prop'
+import midTable from '../mid-table/index'
+import tabUser from './tab-left-user'
+import tabLabel from './tab-right-label'
+import mcTabs from '@/components-new/mc-ui/nav-tab/mc-tabs'
+export default {
+  components: {
+    tabUser,
+    tabLabel,
+    midTable,
+    mcTabs
+  },
+  mixins: [mixProp],
+  // 透传参数，不用通过prop 逐级传递
+  provide () {
+    return {
+      nodeKey: this.nodeKey,
+      isRidOf: this.isRidOf,
+      deaultSelectData: this.deaultSelectData,
+      midColumn: this.midColumn,
+      rightColumn: this.rightColumn,
+      midRelated: this.midRelated,
+      isUserGroup: this.isUserGroup,
+      pushlishTip: this.pushlishTip,
+      beforeCancelSelect: this.beforeCancelSelect,
+      beforeCancelExclude: this.beforeCancelExclude
+    }
+  },
+  data () {
+    return {
+      activeName: 'left-tab',
+      tabActiveNodeData: {} // node 选中的node信息
+    }
+  },
+  computed: {
+    tabGroup () {
+      const arr = this.onlyLabel ? ['left-tab'] : ['left-tab', 'right-tab']
+      return arr.map(item => {
+        const info = {}
+        info.name = item
+        info.label = item === 'left-tab'
+          ? (this.leftTabText || this.$t('three-column-tree.tab1'))
+          : (this.rightTabText || this.$t('three-column-tree.tab2'))
+        info.lazy = item === 'right-tab'
+        return info
+      })
+    }
+  },
+  methods: {
+    handleTabClick (tab) {
+      this.activeName = tab.activeName
+      this.$emit('leftTabChange', tab.activeName)
+    },
+    reloadTree (id, params) {
+      const refEle = Array.isArray(this.$refs[this.activeName]) ? this.$refs[this.activeName][0] : this.$refs[this.activeName]
+      refEle.reloadTree(id, params)
+    },
+    handleNodeClick (params) {
+      if (!this.onlyUser) {
+        this.tabActiveNodeData = params
+        return
+      }
+      if (params.node.isUser) {
+        this.tabActiveNodeData = params
+      }
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.tree-label{
+  display: flex;
+  align-items: center;
+}
+.tree-uesr-group--left{
+  border: 1px $defaultBorderColor solid;
+  width: max-content;
+  .tab-content{
+    margin-top: 10px
+  }
+  .left{
+    width: 300px;
+  }
+}
+.tree-uesr-group--left ::v-deep{
+  .el-tabs__nav{
+    width: 100%;
+    display: flex;
+    >div{
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .el-tabs__item{
+    max-width: 160px;
+  }
+}
+.tree-uesr-group--left-white ::v-deep{
+  .el-tabs__item.is-active,
+  .el-tabs__header,
+  .el-tabs__nav,
+  .el-tabs__item{
+    border-color: transparent !important;
+  }
+  .el-tabs__header{
+    border-bottom: 1px $defaultBorderColor solid !important;
+  }
+}
+// 只展示侧边栏时，覆盖上面的样式
+.tree-uesr-group--left-onlyleft{
+  .left{
+    width: auto;
+  }
+}
+.tree-uesr-group--left-onlyleft ::v-deep{
+  width: auto;
+  display: block;
+  border-color: transparent;
+}
+// 比较简单的tree时，可不显示tab
+.tree-uesr-group--left-hide ::v-deep{
+  .el-tabs__header{
+    display: none;
+  }
+}
+
+</style>
diff --git a/src/components-new/mc-components/tree/three-column-tree/components/left-tree/mixin.js b/src/components-new/mc-components/tree/three-column-tree/components/left-tree/mixin.js
new file mode 100644
index 0000000..8c2f1ee
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/components/left-tree/mixin.js
@@ -0,0 +1,56 @@
+import treeGroup from '@/components-new/mc-components/tree/tree-group/index.vue'
+import bus from '@/utils/bus'
+export default {
+  components: {
+    treeGroup
+  },
+  data () {
+    return {
+      activeNodeId: null,
+      filterData: [],
+      searchVal: '',
+      isLoading: false
+    }
+  },
+  mounted () {
+    bus.$on('treeloadOver', () => {
+      this.isLoading = false
+    })
+  },
+  beforeDestroy () {
+    bus.$off('treeloadOver')
+  },
+  created () {
+    this.getTreeData(-1, true)
+  },
+  methods: {
+    reloadTree (id = -1, params = {}) {
+      if (this.searchVal) {
+        this.handleSearch(this.searchVal, id)
+        return
+      }
+      const defaultParams = {
+        reload: true // 是否刷新tree
+      }
+      const setParams = Object.assign({}, defaultParams, params)
+      if (setParams.reload) {
+        this.getTreeData(id)
+        return
+      }
+      this.activeNodeId = id || -1
+    },
+    searchTree (request, val) {
+      this.isLoading = true
+      request({
+        name: val
+      }).then(res => {
+        this.filterData = res.map(item => {
+          item[this.props['label']] = item.name || item[this.props['label']]
+          return item
+        })
+      }).finally(() => {
+        this.isLoading = false
+      })
+    }
+  }
+}
diff --git a/src/components-new/mc-components/tree/three-column-tree/components/left-tree/tab-left-user.vue b/src/components-new/mc-components/tree/three-column-tree/components/left-tree/tab-left-user.vue
new file mode 100644
index 0000000..f2639db
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/components/left-tree/tab-left-user.vue
@@ -0,0 +1,144 @@
+<template>
+  <div
+    v-loading="isLoading"
+    class="tab-user"
+    :element-loading-background="white ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.3)'"
+  >
+    <tree-group
+      ref="userTree"
+      :props="props"
+      :white="white"
+      :height="height"
+      :tree-data="userTreeData"
+      :filter-data="filterData"
+      :active-node-id="activeNodeId"
+      :show-checkbox="showCheckbox"
+      :check-strictly="checkStrictly"
+      :only-user="onlyUser"
+      @nodeClick="handleNodeClick"
+      @handleSearch="handleSearch"
+      @check-change="handleCheckChange"
+      @update-node="handleUpdateNode"
+    >
+      <template #tree="{ node,data }">
+        <div class="flex justify-between align-center" style="width: 100%;padding-right: 10px">
+          <!-- 这里固定是 label -->
+          <span class="tree-label">
+            <svg-icon icon-class="file" class="tree-icon file" />
+            <span>{{ node.label }}</span>
+          </span>
+          <slot name="left-oper" :node="node" :data="data" />
+        </div>
+      </template>
+      <template #list="{data}">
+        <div class="flex justify-between align-center search-list">
+          <span class="tree-label">
+            <el-row>
+              <el-col :span="12">
+                <mc-overflow-tooltip>
+                  <div slot="content">{{ data[props.label] }}</div>
+                  <span class="flex align-center"> <svg-icon icon-class="file" class="tree-icon file" />{{ data[props.label] }}</span>
+                </mc-overflow-tooltip>
+              </el-col>
+              <el-col :span="12">
+                <mc-overflow-tooltip>
+                  <div slot="content">{{ data.groupNamePath }}</div>
+                  <span class="groupNamePath">{{ data.groupNamePath }}</span>
+                </mc-overflow-tooltip>
+              </el-col>
+            </el-row>
+          </span>
+          <span class="left-oper">
+            <slot name="left-oper" :node="data" :data="data" />
+          </span>
+        </div>
+      </template>
+    </tree-group>
+  </div>
+</template>
+
+<script>
+import mixProp from '../../prop'
+import mixinFun from './mixin'
+import * as api from '@/api/desktop-publish/user-management/user-management.js'
+import mcOverflowTooltip from '@/components-new/mc-ui/tooltip/mc-overflow-tooltip'
+export default {
+  components: {
+    mcOverflowTooltip
+  },
+  mixins: [mixProp, mixinFun],
+  data () {
+    return {
+      userTreeData: []
+    }
+  },
+  methods: {
+    // 手动点击回调
+    handleNodeClick (node) {
+      this.$emit('nodeClick', { node, tab: 'left-tab' })
+    },
+    // reloadTree 回调
+    handleUpdateNode (node) {
+      node && this.$emit('updateNode', { node, tab: 'left-tab' })
+    },
+    handleCheckChange ({ data, checked, indeterminate }) {
+      this.$emit('check-change', { data, checked, indeterminate, tab: 'left-tab' })
+    },
+    getTreeData (curId, isInit = false) {
+      const id = curId || -1
+      this.isLoading = true
+      const request = this.getTreeLeftList || api.getUserGroupTree
+      request().then(res => {
+        this.userTreeData = [
+          {
+            [this.nodeKey]: '',
+            isAll: true,
+            [this.props['label']]: this.$t('common.all'),
+            [this.props['children']]: res.map(item => {
+              item[this.props['label']] = item.name || item[this.props['label']]
+              return item
+            })
+          }
+        ]
+        // 这里tree会重新渲染，异步赋值
+        setTimeout(() => {
+          this.$refs.userTree.setCurrentKey(this.userTreeData, id)
+          // 初始化的时候，更新currentNode 值
+          isInit && this.$emit('nodeClick', { tab: 'left-tab', node: this.userTreeData[0] })
+        }, 200)
+      }).finally(() => {
+        // 这里不用finally，用bus 在组件渲染完成后触发
+        this.isLoading = false
+      })
+    },
+    handleSearch (val, id) {
+      if (val) {
+        this.searchVal = val
+        const request = this.filterTreeData || api.searchUserGroupTree
+        this.searchTree(request, val)
+        this.$refs.userTree.setListNodeId(id)
+        return
+      }
+      // 清空勾选
+      this.searchVal = ''
+      this.reloadTree(-1)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.search-list{
+  width: 100%;
+  padding-right: 5px;
+  .tree-label{
+    flex: 1;
+  }
+  .left-oper{
+    margin-left: 5px;
+  }
+  .groupNamePath{
+    margin: 0 5px;
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/tree/three-column-tree/components/left-tree/tab-right-label.vue b/src/components-new/mc-components/tree/three-column-tree/components/left-tree/tab-right-label.vue
new file mode 100644
index 0000000..b234af1
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/components/left-tree/tab-right-label.vue
@@ -0,0 +1,103 @@
+<template>
+  <div
+    v-loading="isLoading"
+    class="tab-label"
+    :element-loading-background="white ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.3)'"
+  >
+    <tree-group
+      ref="labelTree"
+      :props="props"
+      :tree-data="labelTreeData"
+      :white="white"
+      :height="height"
+      :filter-data="filterData"
+      :active-node-id="activeNodeId"
+      :show-checkbox="showCheckbox"
+      :check-strictly="checkStrictly"
+      :is-show-right-label-icon="isShowRightLabelIcon"
+      @nodeClick="handleNodeClick"
+      @update-node="handleUpdateNode"
+      @handleSearch="handleSearch"
+      @check-change="handleCheckChange"
+    >
+      <template #tree="{ node,data }">
+        <div class="flex justify-between align-center" style="width: 100%;padding-right: 10px">
+          <span class="tree-label">
+            <!-- 这里固定是 label -->
+            <svg-icon v-if="isShowRightLabelIcon" icon-class="file" class="tree-icon file" />
+            <span>{{ node.label }}</span>
+          </span>
+          <slot name="right-oper" :node="node" :data="data" />
+        </div>
+      </template>
+    </tree-group>
+  </div>
+</template>
+
+<script>
+import mixProp from '../../prop'
+import mixinFun from './mixin'
+import * as api from '@/api/desktop-publish/user-management/user-management.js'
+export default {
+  mixins: [mixProp, mixinFun],
+  data () {
+    return {
+      labelTreeData: []
+    }
+  },
+  methods: {
+    handleNodeClick (node) {
+      this.$emit('nodeClick', { node, tab: 'right-tab' })
+    },
+    handleUpdateNode (node) {
+      node && this.$emit('updateNode', { node, tab: 'right-tab' })
+    },
+    getTreeData (curId, isInit = false) {
+      const id = curId || -1
+      this.isLoading = true
+      const request = this.getTreeRightList || api.getUserLabel
+      request().then(res => {
+        this.labelTreeData = [
+          {
+            [this.nodeKey]: '',
+            isAll: true,
+            [this.props['label']]: this.$t('common.all'),
+            [this.props['children']]: res.map(item => {
+              item[this.props['label']] = item.name || item[this.props['label']]
+              return item
+            })
+          }
+        ]
+        // 这里tree会重新渲染，异步赋值
+        setTimeout(() => {
+          this.$refs.labelTree.setCurrentKey(this.labelTreeData, id)
+          // 初始化的时候，更新currentNode 值
+          isInit && this.$emit('nodeClick', { tab: 'right-tab', node: this.labelTreeData[0] })
+        }, 200)
+      }).finally(() => {
+        this.isLoading = false
+      })
+    },
+    handleCheckChange ({ data, checked, indeterminate }) {
+      this.$emit('check-change', { data, checked, indeterminate, tab: 'right-tab' })
+    },
+    handleSearch (val, id) {
+      if (val) {
+        this.searchVal = val
+        const request = this.filterLabelData || api.getUserLabel
+        this.searchTree(request, val)
+        this.$refs.labelTree.setListNodeId(id)
+        return
+      }
+      this.searchVal = ''
+      this.reloadTree(-1)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+// .tree-icon{
+//    color: $colorPrimary
+// }
+</style>
diff --git a/src/components-new/mc-components/tree/three-column-tree/components/mid-table/index.vue b/src/components-new/mc-components/tree/three-column-tree/components/mid-table/index.vue
new file mode 100644
index 0000000..9bea389
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/components/mid-table/index.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="flex mid-column" :class="{'mid-column--ridof': isRidOf}">
+    <div class="mid-table" :style="{'padding-bottom': isPageStatus ? '20px' : '0'}">
+      <mc-select-table
+        ref="mcSelectTable"
+        :list-handler="getTableList"
+        :column-list="columnList"
+        :pager-count="5"
+        :pagination-show="isPageStatus"
+        :height="isPageStatus ? '580px' : '640px'"
+        class-name="white"
+        pagination-layout="sizes, prev, pager, next"
+        v-bind="new$Props"
+        @onFilter="handleFilter"
+        @closeTag="closeTag"
+        @clearTag="clearTag"
+        @selectAll="handleSelectAll"
+        @selectRow="handleSelectRow"
+        @selectionChange="handleSelectionChange"
+        @select="handleSelect"
+        @getTableData="handleGetTableData"
+      >
+        <template #toolbar>
+          <div class="toolbar">
+            <div class="header flex justify-between align-center">
+              <span>{{ $t('mc-ui.tree.select.dialog.selecting') }} ({{ total }})</span>
+              <mc-search
+                v-model="searchVal"
+                :search="true"
+                :placeholder="midPlaceholder"
+                @change="handleSearch"
+              />
+            </div>
+          </div>
+        </template>
+        <template #unshift>
+          <el-table-column type="selection" :selectable="renderSelected" width="40" />
+        </template>
+        <template #append>
+          <el-table-column
+            v-if="isRidOf"
+            prop="desc"
+            :label="$t('common.explain')"
+            show-overflow-tooltip
+            :formatter="formatterDesc"
+          />
+          <el-table-column v-if="isRidOf" :label="$t('mc-ui.tree.select.dialog.operation')" width="100">
+            <template slot-scope="{row}">
+              <mc-link
+                v-if="row.showRidOf"
+                nomargin
+                :disabled="ridOfRows.map(item=> item[nodeKey]).includes(row[nodeKey])"
+                @click="handleRidOf(row)"
+              >
+                {{ $t('three-column-tree.ridof') }}
+              </mc-link>
+            </template>
+          </el-table-column>
+        </template>
+      </mc-select-table>
+    </div>
+    <div style="flex: 1">
+      <right-table
+        :select-table-data="selectedRows"
+        :rid-of-table-data="ridOfRows"
+        @updateSelectRow="updateSelectRow"
+        @updateRidOfRow="updateRidOfRow"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import mixTable from './mix-table'
+import mcSearch from '@/components-new/mc-ui/input/mc-search'
+import mcLink from '@/components-new/mc-ui/link/mc-link'
+import rightTable from '../right-table/index'
+import bus from '@/utils/bus'
+import _ from 'lodash'
+export default {
+  inject: ['nodeKey', 'deaultSelectData', 'isRidOf', 'midColumn', 'midRelated', 'isUserGroup'],
+  components: {
+    rightTable,
+    mcSearch,
+    mcLink
+  },
+  mixins: [mixTable],
+  props: {
+    activeNode: {
+      type: Object,
+      default: () => {}
+    },
+    // api 点击左边tree，中间的表格同步更新数据，所调用的接口
+    getMidTableFilter: {
+      type: Function,
+      default: null
+    },
+    // mid 排除的时候，进行拦截，return promise
+    beforeExclude: {
+      type: Function,
+      default: null
+    },
+    midPlaceholder: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      selectedRows: _.cloneDeep(this.deaultSelectData.select) || [], // 已选中
+      ridOfRows: _.cloneDeep(this.deaultSelectData.exclude) || [] // 待排除数组
+    }
+  },
+  computed: {
+    selectedRowsIds () {
+      return this.selectedRows.map(item => item[this.nodeKey])
+    },
+    ridOfRowsIds () {
+      return this.ridOfRows.map(item => item[this.nodeKey])
+    }
+  },
+  watch: {
+    // 左边树点击时，表格数据跟着切换
+    activeNode: {
+      handler (val) {
+        this.reloadTable()
+      },
+      immediate: true
+    },
+    // 抛出去
+    'selectedRows.length': {
+      handler (len) {
+        bus.$emit('selectArrayChange', this.selectedRows)
+      }
+    },
+    'ridOfRows.length': {
+      handler (len) {
+        bus.$emit('ridofArrayChange', this.ridOfRows)
+      }
+    }
+  },
+  methods: {
+    // 如果父级已发布，下面的用户不可以再发布，此时才可以排除
+    renderSelected (row) {
+      if (!this.selectedRowsIds.length || !row.parentGroupIds || !row.parentGroupIds.length) {
+        return true
+      }
+      // 如果父子关联，父级被选择，子级要被禁止勾选
+      return this.midRelated ? _.intersection(this.selectedRowsIds, row.parentGroupIds).length <= 0 : true
+    },
+    // 排除
+    async handleRidOf (row) {
+      const callback = () => {
+        this.ridOfRows.push(row)
+      }
+      try {
+        this.beforeExclude && await this.beforeExclude(row, callback)
+      } catch (error) {
+        return
+      }
+      callback()
+    },
+    // 删除已选中
+    updateSelectRow (selections) {
+      this.selectedRows = selections
+      // 当前路径id 是否在已选id里，只有已选才可以排除
+      this.ridOfRows = this.ridOfRows.filter(item => _.intersection(this.selectedRowsIds, item.parentGroupIds).length > 0)
+      this.renderTableSelection()
+    },
+    // 取消排除
+    updateRidOfRow (selections) {
+      this.ridOfRows = selections
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mid-column{
+  min-width: 600px;
+  &--ridof{
+    min-width: 680px;
+  }
+}
+.mid-table ::v-deep{
+  border-left: 1px $defaultBorderColor solid;
+  border-right: 1px $defaultBorderColor solid;
+  padding: 5px 0 ;
+}
+.mid-table{
+  flex: 1;
+  min-width: 300px;
+  .header{
+    margin: -6px 15px -3px 15px
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/tree/three-column-tree/components/mid-table/mix-table.js b/src/components-new/mc-components/tree/three-column-tree/components/mid-table/mix-table.js
new file mode 100644
index 0000000..300949f
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/components/mid-table/mix-table.js
@@ -0,0 +1,167 @@
+import mcSelectTable from '@/components-new/mc-components/table/select-table/mc-select-table.vue'
+import { getmiddleUserList } from '@/api/desktop-publish/desktop-management/scheduled-task.js'
+import _ from 'lodash'
+export default {
+  components: {
+    mcSelectTable
+  },
+  data () {
+    return {
+      originTable: [],
+      selections: [],
+      total: 0,
+      pageSize: 20,
+      searchVal: '',
+      tableParams: {},
+      isPageStatus: true // 是否是分页模式
+    }
+  },
+  computed: {
+    new$Props () {
+      const newProps = {}
+      for (const key in this.$props) {
+        // key为驼峰写法的转为短横线写法
+        newProps[_.kebabCase(key)] = this.$props[key]
+      }
+      return newProps
+    },
+    columnList () {
+      if (this.isUserGroup) {
+        return [{
+          prop: 'user',
+          label: this.$t('choose-dialog.middleTable.user_group'),
+          formatter: this.formatterUser,
+          showOverflowTooltip: true
+        }]
+      }
+      return this.midColumn
+    }
+  },
+  methods: {
+    // 表格渲染回调
+    handleGetTableData (data) {
+      this.originTable = data
+      this.renderTableSelection()
+    },
+    getTableList (params) {
+      if (!Object.keys(this.activeNode).length) {
+        return Promise.resolve({})
+      }
+      const requestName = this.getMidTableFilter ?? getmiddleUserList
+      // 默认function 时，传参searchStr 和 groupId
+      const defalutParams = this.getMidTableFilter ? params : {
+        ...params,
+        searchStr: this.searchVal,
+        groupId: this.activeNode.node.id || ''
+      }
+      return requestName(defalutParams, {
+        activeNode: this.activeNode,
+        searchVal: this.searchVal
+      }).then(res => {
+        // 如果不存在records 则表示不分页，直接展示后台给的内容
+        this.isPageStatus = !!res.records
+        res.records = this.resetTableData(this.isPageStatus ? res.records : res)
+        this.total = this.isPageStatus ? res.total : res.length
+        this.pageSize = res.pageSize
+        return res
+      })
+    },
+    formatterUser (row) {
+      return (<span>
+        {row.isUser ? <svg-icon icon-class='user' class='tree-icon user' /> : <svg-icon icon-class='file' class='tree-icon file' />}
+        {row.label}
+      </span>)
+    },
+    formatterDesc (row) {
+      return row.paName ? '已发布（' + row.paName + '）' : ''
+    },
+    // 下拉筛选处理
+    handleFilter (prop, texts) {
+      const { queryName } = this.columnList.find(item => item.prop === prop)
+      this.handleComFunc(queryName, prop, texts)
+    },
+    // 刷新表格
+    reloadTable (params = {}) {
+      if (this.$refs.mcSelectTable) {
+        this.tableParams = Object.assign(this.tableParams, params)
+        this.$refs.mcSelectTable.reloadTable(this.tableParams)
+      }
+    },
+    // 关闭单个
+    closeTag (data) {
+      this.handleComFunc(data.queryName, data.prop)
+    },
+    // 全部清空
+    clearTag (list) {
+      list.forEach(item => {
+        this.handleComFunc(item.queryName, item.prop)
+      })
+    },
+    // 搜索
+    handleSearch (val) {
+      this.reloadTable()
+    },
+    handleComFunc (queryName, prop, texts = []) {
+      this.tableParams[ queryName || prop] = texts
+      this.reloadTable()
+    },
+    // 表格当前行是否选中
+    itemIsSelect (item) {
+      // 自身选中或者父子关联时，父亲被选中
+      const curSelect = this.selectedRowsIds.includes(item[this.nodeKey])
+      const parentSelect = this.midRelated ? _.intersection(this.selectedRowsIds, item.parentGroupIds).length > 0 : false
+      return curSelect || parentSelect
+    },
+    // 为table添加自定义变量
+    resetTableData (arr) {
+      return arr.map(item => {
+        item.isSelected = this.itemIsSelect(item)
+        // 排除按钮出现的时机，祖先已选择，但是未排除
+        const hasSelect = _.intersection(this.selectedRowsIds, item.parentGroupIds).length > 0
+        const noExclude = _.intersection(this.ridOfRowsIds, item.parentGroupIds).length <= 0
+        item.showRidOf = hasSelect && noExclude
+        item.disabled = !this.renderSelected(item)
+        return item
+      })
+    },
+    // 获取数据后，将之前保存的勾选状态恢复
+    renderTableSelection () {
+      const refTable = this.$refs.mcSelectTable.renderTable()
+      this.$nextTick(() => {
+        refTable.clearSelection()
+        this.originTable.forEach(item => {
+          this.itemIsSelect(item) && refTable.toggleRowSelection(item, true)
+        })
+      })
+    },
+    handleSelectRow (row) {
+      !row.disabled && this.handleSelect(this.selections, row)
+    },
+    handleSelectAll (selections) {
+      this.originTable.forEach(item => {
+        this.handleSelect(selections, item)
+      })
+    },
+    handleSelectionChange (selections) {
+      this.selections = selections
+    },
+    // select 配合 select-all 完成跨页勾选记住选项
+    handleSelect (selections, row) {
+      if (selections.length === this.pageSize) {
+        row.isSelected = true
+      } else if (!selections.length) {
+        row.isSelected = false
+      } else {
+        row.isSelected = !row.isSelected
+      }
+      // 取消勾选时，从selectedRows 中剔除
+      !row.isSelected && (this.selectedRows = [...this.selectedRows.filter(item => item[this.nodeKey] !== row[this.nodeKey])])
+      // 要从之前勾选的内容里剔除这次勾选的，防止重复
+      const currentSelectIds = selections.map(item => item[this.nodeKey])
+      this.selectedRows = [
+        ...this.selectedRows.filter(item => !currentSelectIds.includes(item[this.nodeKey])),
+        ...selections
+      ]
+    }
+  }
+}
diff --git a/src/components-new/mc-components/tree/three-column-tree/components/right-table/index.vue b/src/components-new/mc-components/tree/three-column-tree/components/right-table/index.vue
new file mode 100644
index 0000000..3536574
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/components/right-table/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="right-table">
+    <r-table
+      :table-data="selectTableData"
+      :height="tableHeight"
+      :class="{isRidOf : 'r-table--first'}"
+      @updateTable="updateSelectRow"
+    />
+    <r-table
+      v-if="isRidOf"
+      :is-rid-of="isRidOf"
+      :table-data="ridOfTableData"
+      :height="tableHeight"
+      @updateTable="updateRifOfRow"
+    />
+  </div>
+</template>
+
+<script>
+import rTable from './table'
+export default {
+  components: {
+    rTable
+  },
+  inject: ['isRidOf'],
+  props: {
+    // 待发布数组
+    selectTableData: {
+      type: Array,
+      default: () => []
+    },
+    // 排除数组
+    ridOfTableData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    tableHeight () {
+      return this.isRidOf ? '280px' : '640px'
+    }
+  },
+  methods: {
+    updateSelectRow (selections) {
+      this.$emit('updateSelectRow', selections)
+    },
+    updateRifOfRow (selections) {
+      this.$emit('updateRidOfRow', selections)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.r-table--first{
+  border-bottom: 1px $defaultBorderColor solid;
+}
+</style>
+
diff --git a/src/components-new/mc-components/tree/three-column-tree/components/right-table/table.vue b/src/components-new/mc-components/tree/three-column-tree/components/right-table/table.vue
new file mode 100644
index 0000000..09c3b62
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/components/right-table/table.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="table">
+    <div class="header flex justify-between align-center">
+      <span>
+        {{ isRidOf ? $t('three-column-tree.ridof') : $t('three-column-tree.topublish') }}
+        (<span class="total" :title="tableData.length">{{ tableData.length }}</span>)
+        <mc-tooltip
+          v-if="pushlishTip"
+          place="right"
+          max-width="280px"
+          style="margin: 0"
+          :content="$t( isRidOf ? 'three-column-tree.topublish.tip1' : 'three-column-tree.topublish.tip2' )"
+        />
+      </span>
+      <div>
+        <mc-search v-model="searchVal" width="125px" />
+        <el-link icon="el-icon-delete" style="margin-left: 5px" @click="removeAll">{{ $t('common.emptyContent') }}</el-link>
+      </div>
+    </div>
+    <div>
+      <el-table
+        ref="multipleTable"
+        :data="filterTableData()"
+        class="white"
+        :height="height"
+        :row-key="row => row[nodeKey]"
+      >
+        <template v-if="columnList.length">
+          <el-table-column
+            v-for="{prop,label,width,formatter} in columnList"
+            :key="prop"
+            :prop="prop"
+            :width="width"
+            :label="label"
+            :formatter="(row, column, cellValue, index)=>handleFormatter(row, column, cellValue, index,formatter)"
+          />
+        </template>
+        <template v-else>
+          <el-table-column
+            prop="user"
+            :label="$t('choose-dialog.middleTable.user_group')"
+            show-overflow-tooltip
+          >
+            <template slot-scope="{row}">
+              <svg-icon v-if="row.isUser" icon-class="user" class="tree-icon user" />
+              <svg-icon v-else icon-class="file" class="tree-icon file" />
+              {{ row.label }}
+            </template>
+          </el-table-column>
+          <el-table-column v-if="!hidePath" prop="groupNamePath" show-overflow-tooltip :label="$t('mc-ui.tree.select.dialog.path')" />
+        </template>
+        <el-table-column :label="$t('mc-ui.tree.select.dialog.operation')" width="100">
+          <template slot-scope="{row}">
+            <div class="flex align-center" @click="removeSelectRow(row)">
+              <mc-link v-if="isRidOf" nomargin :is-stop-propagation="false">{{ $t('three-column-tree.cancel.ridof') }}</mc-link>
+              <i v-else class="el-icon-delete" />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import mcSearch from '@/components-new/mc-ui/input/mc-search'
+import mcTooltip from '@/components-new/mc-ui/tooltip/mc-tooltip'
+import mcLink from '@/components-new/mc-ui/link/mc-link'
+import _ from 'lodash'
+export default {
+  components: {
+    mcSearch,
+    mcLink,
+    mcTooltip
+  },
+  inject: ['nodeKey', 'midColumn', 'rightColumn', 'midRelated', 'pushlishTip', 'beforeCancelSelect'],
+  props: {
+    //   是否是剔除操作
+    isRidOf: {
+      type: Boolean,
+      default: false
+    },
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      searchVal: '',
+      hidePath: false // 是否隐藏路径
+    }
+  },
+  computed: {
+    searchProp () {
+      if (this.rightColumn && this.rightColumn.length) {
+        return this.rightColumn.map(item => item.prop)
+      } else if (this.midColumn && this.midColumn.length) {
+        return this.midColumn.map(item => item.prop)
+      }
+      return ['label', 'groupNamePath']
+    },
+    columnList () {
+      if (this.rightColumn.length) {
+        this.rightColumn.forEach(item => {
+          item.width = item.width || '160px'
+        })
+        return this.rightColumn
+      } else if (this.midColumn.length) {
+        return this.midColumn
+      }
+      return []
+    }
+  },
+
+  methods: {
+    filterTableData () {
+      // 数组中如果是后代，则会被覆盖,且该后代取消选中
+      const arr = this.tableData.filter(item => this.searchProp.some(search => item[search]?.includes(this.searchVal)))
+      // 如果父子关联，子要被父包含，否则两个独立
+      if (this.midRelated) {
+        arr.forEach(item => {
+          const otherIds = arr.filter(_new => _new[this.nodeKey] !== item[this.nodeKey])?.map(item => item[this.nodeKey])
+          // 其他id和当前路径id是否有交际
+          if (_.intersection(otherIds, item.parentGroupIds).length > 0) {
+            this.removeSelectRow(item)
+          }
+        })
+        if (arr.length) {
+          const data = arr[0]
+          this.hidePath = !Object.hasOwnProperty.call(data, 'groupNamePath')
+        }
+      }
+      return arr.sort((a, b) => a.isUser - b.isUser)
+    },
+    removeAll () {
+      const callback = () => {
+        this.$emit('updateTable', [])
+      }
+      this.handleRemove({}, callback)
+    },
+    removeSelectRow (row) {
+      const callback = () => {
+        const selectedRows = this.tableData.filter(item => item[this.nodeKey] !== row[this.nodeKey])
+        this.$emit('updateTable', selectedRows)
+      }
+      this.handleRemove(row, callback)
+    },
+    async handleRemove (row, callback) {
+      const request = this.isRidOf ? this.beforeCancelExclude : this.beforeCancelSelect
+      try {
+        request && await request(row, callback)
+      } catch (error) {
+        return
+      }
+      callback()
+    },
+    handleFormatter (row, column, cellValue, index, formatter) {
+      return formatter(row, { ...column, prop: column.property }, cellValue, index)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+.total{
+  max-width: 80px;
+  display: inline-block;
+  vertical-align: middle;
+  @include text-overflow
+}
+.table ::v-deep{
+  padding: 5px 0;
+}
+.table{
+  .header{
+    margin: 3px 15px 8px 15px
+  }
+  .el-icon-delete{
+    cursor: pointer;
+    font-size: 16px;
+    margin-left: 3px;
+    &:hover{
+      color: $colorPrimary;
+    }
+  }
+}
+</style>
diff --git a/src/components-new/mc-components/tree/three-column-tree/index.vue b/src/components-new/mc-components/tree/three-column-tree/index.vue
new file mode 100644
index 0000000..b03cf09
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/index.vue
@@ -0,0 +1,121 @@
+
+<!--三列可剔除-->
+<template>
+  <div class="three-column-tree">
+    <left-tree
+      ref="leftTree"
+      :props="props"
+      :node-key="nodeKey"
+      :deault-select-data="deaultSelectData"
+      :only-left="onlyLeft"
+      :only-label="onlyLabel"
+      :only-user="onlyUser"
+      :white="white"
+      :is-rid-of="isRidOf"
+      :is-user-group="isUserGroup"
+      :height="height"
+      :left-tab-text="leftTabText"
+      :right-tab-text="rightTabText"
+      :show-header="showHeader"
+      :show-checkbox="showCheckbox"
+      :pushlish-tip="pushlishTip"
+      :check-strictly="checkStrictly"
+      :filter-tree-data="filterTreeData"
+      :filter-label-data="filterLabelData"
+      :get-tree-left-list="getTreeLeftList"
+      :get-tree-right-list="getTreeRightList"
+      :mid-column="midColumn"
+      :right-column="rightColumn"
+      :get-mid-table-filter="getMidTableFilter"
+      :mid-related="midRelated"
+      :is-show-right-label-icon="isShowRightLabelIcon"
+      :before-exclude="beforeExclude"
+      :before-cancel-select="beforeCancelSelect"
+      :before-cancel-exclude="beforeCancelExclude"
+      :mid-placeholder="midPlaceholder"
+      @nodeClick="handleNodeClick"
+      @updateNode="handleUpdateNode"
+      @check-change="handleCheckChange"
+      @leftTabChange="leftTabChange"
+    >
+      <template #left-oper="{ node,data }">
+        <slot name="left-oper" :node="node" :data="data" />
+      </template>
+      <template #right-oper="{ node,data }">
+        <slot name="right-oper" :node="node" :data="data" />
+      </template>
+    </left-tree>
+  </div>
+</template>
+
+<script>
+import leftTree from './components/left-tree/index'
+import mixProp from './prop'
+import bus from '@/utils/bus'
+import _ from 'lodash'
+export default {
+  components: {
+    leftTree
+  },
+  mixins: [mixProp],
+  data () {
+    return {
+      selectArray: _.clone(this.deaultSelectData.select), // 选择的用户
+      ridofArray: _.clone(this.deaultSelectData.exclude) // 排除的用户
+    }
+  },
+  mounted () {
+    // 待发布数组内容变化时
+    bus.$on('selectArrayChange', (arr) => {
+      this.selectArray = arr
+      this.$emit('rightSelectChange', arr)
+    })
+    // 待排除数组内容变化时
+    bus.$on('ridofArrayChange', (arr) => {
+      this.ridofArray = arr
+      this.$emit('rightRidofChange', arr)
+    })
+  },
+  destroyed () {
+    bus.$off('selectArrayChange')
+    bus.$off('ridofArrayChange')
+  },
+  methods: {
+    reloadTree (id, params) {
+      this.$refs.leftTree.reloadTree(id, params)
+    },
+    // node 节点点击回调
+    handleNodeClick (params) {
+      this.$emit('nodeClick', params)
+    },
+    // tree 的active node更新时
+    handleUpdateNode (params) {
+      this.$emit('updateNode', params)
+    },
+    // checkbox 时，勾选回调
+    handleCheckChange (params) {
+      this.$emit('check-change', params)
+    },
+    // load结束时，初始化回调tree信息
+    initTree (params) {
+      this.$emit('init-tree', params)
+    },
+    // 左侧tree上的tab，切换时回调
+    leftTabChange (activeName) {
+      this.$emit('leftTabChange', activeName)
+    },
+    selections () {
+      return {
+        selectArray: this.selectArray,
+        excludeArray: this.ridofArray
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.choose-use-group{
+  color: #000;
+}
+</style>
diff --git a/src/components-new/mc-components/tree/three-column-tree/prop.js b/src/components-new/mc-components/tree/three-column-tree/prop.js
new file mode 100644
index 0000000..5c64141
--- /dev/null
+++ b/src/components-new/mc-components/tree/three-column-tree/prop.js
@@ -0,0 +1,170 @@
+export default {
+  props: {
+    props: {
+      /*
+      * `label:指定节点标签为节点对象的某个属性值, string, function(data, node)`
+      * `children:指定子树为节点对象的某个属性值, string`
+      * `disabled:指定节点选择框是否禁用为节点对象的某个属性值,	boolean, function(data, node)`
+      */
+      type: Object,
+      default () {
+        return {
+          children: 'children',
+          label: 'label',
+          disabled: 'disabled'
+        }
+      }
+    },
+    // 唯一标识的属性,默认id字段
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+    // tree 搜索, 左边
+    filterTreeData: {
+      type: [String, Function],
+      default: ''
+    },
+    // 标签 搜索，右边
+    filterLabelData: {
+      type: [String, Function],
+      default: ''
+    },
+    // 是否显示tab 头部
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    // 编辑时，传递已选值
+    deaultSelectData: {
+      type: Object,
+      default: () => {
+        return {
+          select: [],
+          exclude: []
+        }
+      }
+    },
+    // 存在只需要选择树不需要展示列表的情况，此时only-left 为true
+    onlyLeft: {
+      type: Boolean,
+      default: false
+    },
+    // 只有一个tab标签
+    onlyLabel: {
+      type: Boolean,
+      default: false
+    },
+    // 是否只能选择用户，不选择组
+    onlyUser: {
+      type: Boolean,
+      default: false
+    },
+    // 是否是白色主题，默认为false，暗色主题
+    white: {
+      type: Boolean,
+      default: false
+    },
+    // 是否需要展示剔除操作
+    isRidOf: {
+      type: Boolean,
+      default: false
+    },
+    // tree 的高度
+    height: {
+      type: String,
+      default: '600px'
+    },
+    // 左边tab的文案
+    leftTabText: {
+      type: String,
+      default: ''
+    },
+    // 右边tab的文案
+    rightTabText: {
+      type: String,
+      default: ''
+    },
+    // 是否展示可选择
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法, false 表示关联，true 表示不关联
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    // api 获取左边tab内数据的方法
+    getTreeLeftList: {
+      type: Function,
+      default: null
+    },
+    // api 获取右边tab内数据的方法
+    getTreeRightList: {
+      type: Function,
+      default: null
+    },
+    // 优先级：midColumn > user相关（大部分都是用户选择，所以将user相关设置为默认table列）
+    midColumn: {
+      type: Array,
+      default: () => []
+    },
+    // 优先级: midColumn > rightColumn > user相关
+    // 默认中间表格和右侧的table列应该一样的
+    rightColumn: {
+      type: Array,
+      default: () => []
+    },
+    // api 点击左边tree，中间的表格同步更新数据，所调用的接口
+    getMidTableFilter: {
+      type: Function,
+      default: null
+    },
+    // 父级选中，子级是否禁止勾选，即父子是否关联
+    midRelated: {
+      type: Boolean,
+      default: true
+    },
+    // 是否是用户相关，用户相关的有默认值（用户相关最常用）
+    isUserGroup: {
+      type: Boolean,
+      default: false
+    },
+    // 三列最右侧，问号提示是否展示
+    pushlishTip: {
+      type: Boolean,
+      default: true
+    },
+    // 是否展示tree，right tab的icon
+    isShowRightLabelIcon: {
+      type: Boolean,
+      default: true
+    },
+    // mid 选择的时候，进行拦截，return promise
+    beforeSelect: {
+      type: Function,
+      default: null
+    },
+    // mid 排除的时候，进行拦截，return promise
+    beforeExclude: {
+      type: Function,
+      default: null
+    },
+    // right 取消选择的时候，进行拦截，return promise
+    beforeCancelSelect: {
+      type: Function,
+      default: null
+    },
+    // right 取消排除的时候，进行拦截，return promise
+    beforeCancelExclude: {
+      type: Function,
+      default: null
+    },
+    // 中间表格input框的placeholder
+    midPlaceholder: {
+      type: String,
+      default: ''
+    }
+  }
+}
diff --git a/src/components-new/mc-components/tree/tree-group/index.vue b/src/components-new/mc-components/tree/tree-group/index.vue
new file mode 100644
index 0000000..434a4da
--- /dev/null
+++ b/src/components-new/mc-components/tree/tree-group/index.vue
@@ -0,0 +1,246 @@
+<!--折叠树，可全部打开，折叠和搜索-->
+<template>
+  <div :class="{'tree-group-box--white': white}" class="tree-group-box">
+    <div class="head flex">
+      <div v-if="visibleExpand">
+        <span :title="$t('logWarning.expandAll')">
+          <svg-icon icon-class="tree_open_all" class="filter" @click="openAllHandle" />
+        </span>
+        <span :title="$t('logWarning.packUpAll')">
+          <svg-icon icon-class="tree_close_all" class="filter" @click="closeAllHandle" />
+        </span>
+      </div>
+      <mc-search v-model="searchVal" :placeholder="$t('data.extractLog.searchTip')" width="160px" @change="handleSearch" />
+    </div>
+    <div class="container">
+      <div v-if="searchVal" class="recycle-scroller">
+        <!-- 分页加载 -->
+        <recycle-scroller
+          v-slot="{item}"
+          :items="filterData"
+          :item-size="30"
+          :key-field="nodeKey"
+          :buffer="50"
+          infinite-scroll-distance="50"
+          :style="{
+            height,
+            'overflow-y': 'auto',
+            'scroll-behavior': 'smooth',
+            'padding-top': '5px'
+          }"
+        >
+          <div class="scroll-list" :class="{'scroll-list--active': item[nodeKey] === activeListNodeId}" @click.stop="handleNodeClick(item)">
+            <template v-if="$scopedSlots.list">
+              <slot name="list" :data="item" />
+            </template>
+            <template v-else>
+              <span class="tree-label flex align-center">
+                <svg-icon v-if="isShowRightLabelIcon" icon-class="file" class="tree-icon file" />
+                <span> {{ item[props['label']] }}</span>
+              </span>
+            </template>
+          </div>
+        </recycle-scroller>
+      </div>
+      <div v-else>
+        <mc-tree
+          ref="treeNode"
+          :key="activeListNodeId"
+          :props="props"
+          :height="height"
+          :data="treeData"
+          :white="white"
+          :lazy="lazy"
+          :load="load"
+          :node-key="nodeKey"
+          :only-user="onlyUser"
+          :current-node-key="currentNodeKey"
+          :default-expand-all="expandAll"
+          :show-checkbox="showCheckbox"
+          :check-strictly="checkStrictly"
+          @node-click="handleNodeClick"
+          @check-change="handleCheckChange"
+        >
+          <template #default="{ node,data }">
+            <template v-if="$scopedSlots.tree">
+              <slot name="tree" :node="node" :data="data" />
+            </template>
+            <template v-else>
+              <span class="tree-label flex align-center">
+                <!-- 这里固定是 label -->
+                <svg-icon icon-class="file" class="tree-icon file" />
+                <span> {{ node.label }}</span>
+              </span>
+            </template>
+          </template>
+        </mc-tree>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mcSearch from '@/components-new/mc-ui/input/mc-search'
+import mcTree from '@/components-new/mc-ui/tree/mc-tree'
+import { RecycleScroller } from 'vue-virtual-scroller1-1-2'
+import mixProp from './prop'
+export default {
+  components: {
+    mcSearch,
+    mcTree,
+    RecycleScroller
+  },
+  mixins: [mixProp],
+  data () {
+    return {
+      searchVal: '',
+      expandAll: false,
+      activeListNodeId: null // 虚拟树当前的id
+    }
+  },
+  computed: {
+    treeRef () {
+      return this.$refs.treeNode.refTree()
+    }
+  },
+  mounted () {
+    this.setCurrentKey(this.treeData, -1)
+  },
+  methods: {
+    setListNodeId (val) {
+      val && (this.activeListNodeId = val)
+    },
+    setCurrentKey (arr, id) {
+      if (id === -1) {
+        this.$refs.treeNode.setCurrentKey(this.treeData[0])
+        this.updateCurNode()
+        return
+      }
+      setTimeout(() => {
+        for (let index = 0; index < arr.length; index++) {
+          const item = arr[index]
+          if (Number(item[this.nodeKey]) === Number(id)) {
+            this.$refs.treeNode.setCurrentKey(item)
+            this.updateCurNode()
+            break
+          } else if (item[this.props.children] && item[this.props.children].length > 0) {
+            this.setCurrentKey(item[this.props.children], id)
+          }
+        }
+      }, 200)
+    },
+    handleSearch (val) {
+      this.$emit('handleSearch', val)
+    },
+    handleNodeClick (data) {
+      if (this.searchVal) {
+        this.activeListNodeId = data[this.nodeKey]
+      }
+      // 只能选择用户，不能选择组
+      if (!this.onlyUser) {
+        this.$emit('nodeClick', data)
+        return
+      }
+      if (data.isUser) {
+        this.$emit('nodeClick', data)
+      }
+    },
+    // 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
+    handleCheckChange (data, checked, indeterminate) {
+      this.$emit('check-change', { data, checked, indeterminate })
+    },
+    openAllHandle () {
+      if (this.searchVal) {
+        return
+      }
+      this.expandAll = true
+      this.$refs.treeNode.expandAll()
+    },
+    closeAllHandle () {
+      if (this.searchVal) {
+        return
+      }
+      this.expandAll = false
+      // 这里有个问题,内容太长在底部关闭全部时,无法关闭
+      const treeNode = this.$refs.treeNode.$el
+      const recycle = treeNode.getElementsByClassName('vue-recycle-scroller')[0]
+      const oldHeight = recycle.offsetHeight
+      recycle.style.height = '0px'
+      recycle.scrollTop = 0
+      this.$refs.treeNode.closeAll()
+      setTimeout(() => {
+        recycle.style.height = oldHeight + 'px'
+      }, 500)
+    },
+    updateCurNode () {
+      setTimeout(() => {
+        this.$emit('update-node', this.getCurrentNode())
+      }, 300)
+    },
+    getCurrentNode () {
+      return this.$refs.treeNode.getCurrentNode()
+    },
+    getCurrentKey () {
+      return this.$refs.treeNode.getCurrentKey()
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.tree-group-box ::v-deep{
+  .recycle-scroller .vue-recycle-scroller__item-view{
+    margin-top: 5px
+  }
+}
+.tree-group-box{
+  .head{
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    padding-right: 5px;
+  }
+  .svg-icon.filter{
+      color: #fff;
+      cursor: pointer;
+      font-size: 22px;
+      &:first-child{
+        margin: 0 5px 0 5px;
+      }
+  }
+  .container{
+    min-height: 600px;
+    background-color: #090F26;
+  }
+  .scroll-list{
+    padding: 0 10px;
+    cursor: pointer;
+    position: relative;
+    &::after{
+      content: "";
+      position: absolute;
+      left: 0px;
+      top: -5px;
+      bottom: -5px;
+      right: 0;
+      z-index: -1;
+    }
+    &:hover{
+      &::after{
+        background-color: rgba($ligthTabBgColor,0.3);
+      }
+    }
+    &--active{
+      &::after{
+        background-color: rgba($ligthTabBgColor,0.6)  !important;
+      }
+    }
+  }
+}
+.tree-group-box--white {
+  .container{
+    background-color: #fff;
+  }
+}
+
+</style>
diff --git a/src/components-new/mc-components/tree/tree-group/prop.js b/src/components-new/mc-components/tree/tree-group/prop.js
new file mode 100644
index 0000000..72d24e1
--- /dev/null
+++ b/src/components-new/mc-components/tree/tree-group/prop.js
@@ -0,0 +1,86 @@
+export default {
+  props: {
+    visibleExpand: {
+      type: Boolean,
+      default: true
+    },
+    // 左边树的高度
+    height: {
+      type: String,
+      default: '600px'
+    },
+    props: {
+      /*
+      * `label:指定节点标签为节点对象的某个属性值, string, function(data, node)`
+      * `children:指定子树为节点对象的某个属性值, string`
+      * `disabled:指定节点选择框是否禁用为节点对象的某个属性值,	boolean, function(data, node)`
+      * `isLeaf:指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效,	boolean, function(data, node)`
+      */
+      type: Object,
+      default () {
+        return {
+          children: 'children',
+          label: 'label',
+          disabled: 'disabled'
+        }
+      }
+    },
+    // 唯一标识的属性,默认id字段
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+    // tree信息
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    // tree 搜索之后的结果
+    filterData: {
+      type: Array,
+      default: () => []
+    },
+    // 是否是白色主题，默认为false，暗色主题
+    white: {
+      type: Boolean,
+      default: false
+    },
+    // 当前选中的节点
+    currentNodeKey: {
+      type: [String, Number],
+      default: ''
+    },
+    // 主动赋值，更新nodeid
+    activeNodeId: {
+      type: [String, Number],
+      default: ''
+    },
+    // 是否展示可选择
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    // 是否只能选择用户，不选择组
+    onlyUser: {
+      type: Boolean,
+      default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    load: {
+      type: [Function, null],
+      default: null
+    },
+    isShowRightLabelIcon: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
diff --git a/src/components-new/mc-components/upload/index.js b/src/components-new/mc-components/upload/index.js
new file mode 100644
index 0000000..264032f
--- /dev/null
+++ b/src/components-new/mc-components/upload/index.js
@@ -0,0 +1,193 @@
+import Vue from 'vue'
+import { merge, hasIn, omitBy } from 'lodash'
+import vueSimpleUploader from 'vue-simple-uploader'
+Vue.use(vueSimpleUploader)
+
+/* uploader使用方法
+1.注册组件
+在全局的视图vue中引入upload-list.vue文件，注册到components中，在html中调用<upload-list @viewLinkTo="handlerLinkTo" />
+全局的视图vue包括：layout.vue,headerBar.vue,App.vue等，只需要选其中一个即可
+2.调用uploader
+在相关业务页面引入本js文件
+import { uploader } from '@/components-new/mc-components/upload'
+然后调用挂载在uploader上的方法，建议在this.$nextTick中调用，除非能够保证页面已经渲染完成
+如：
+    this.$nextTick(() => {
+      // 设置uploader默认参数（公共参数），这里设置了后面selectFile就可以不用设置
+      uploader.setUploaderProps({
+        cancelRequest: {
+          apiFun: () => {},
+          params: { id: 1 }
+        },
+        autoUpload: true, // 是否自动上传
+        uploaderRequest: {
+          url: 'http://192.5.7.10:8084/appshop/app-info/upload',
+          params: {}, // 上传的额外参数
+          headers: { // 上传的请求头
+            'X-ACCESS-KYLINSEC-TOKEN': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc0FkbWluIjp0cnVlLCJ1c2VybmFtZSI6Im1jYWRtaW4xIn0.uwXhHQpv29PimTCUMlEkTC6KasbNFnBUnFKSuT_oUH4'
+          }
+        }
+      })
+    })
+    // 选择文件
+    uploader.selectFile({
+      cancelRequest: {
+        apiFun: () => {},
+        params: { appid: 132132 }，可以设置单独的参数
+      },
+      uploaderRequest: {
+        params: {
+          uniqueIdentifier: 24,
+          appId: 24
+        }, // 上传的额外参数
+        viewLinkTo: '4564654654'
+      },
+      typelabel: '黄金镜像',
+      autoUpload: false, // 是否自动上传，会覆盖setUploaderProps设置的默认值
+      showAfterSelected: true
+    })
+ */
+
+// 默认值
+const defaultProps = {
+  cancelRequest: {
+    apiFun: '', // 取消上传接口，用于通知服务器取消上传
+    params: {} // 请求参数
+  },
+  uploaderRequest: {
+    url: '', // 上传请求路径，每个业务每条上传记录的上传路径都有可能不一样
+    chunkSize: '',
+    params: { // 请求参数
+    },
+    headers: {}, // 请求头
+    viewLinkTo: '' // 上传完成后的查看按钮跳转地址
+  },
+  typelabel: '', // 文件类型label
+  autoUpload: false, // 选择文件后是否立刻上传
+  showAfterSelected: true // 选择文件后是否弹出上传弹窗,
+}
+
+const uploaderProps = merge({}, defaultProps)
+// 选择文件时，保存参数
+let selectFileProps = {}
+const instantiate = {
+  uploader: null, // uploader实例
+  uploaderBtn: null, // uploaderBtn上传按钮实例
+  uploaderFile: '', // 将要上传的文件实例，与原生的file不一样,
+  batchUploaderBtn: null // 批量上传按钮实例
+}
+
+// 合并，将其他对象的属性赋值到objects[0]中
+const mergeFun = (objects = [], arg = {}, sources = []) => {
+  // 使用omitBy过滤非uploaderProps中的参数
+  merge(...objects, omitBy(arg, (val, key) => {
+    return !hasIn(uploaderProps, key)
+  }), ...sources)
+}
+
+const uploader = new Vue()
+
+// 初始化uploader
+uploader.uploaderInit = (comp) => {
+  // 弹窗显示方法
+  uploader.showUploader = (callback) => {
+    comp.$emit('toggleUploader', true)
+    callback && callback()
+  }
+
+  // 弹窗隐藏方法
+  uploader.hideUploader = (uploaderInstance) => {
+    selectFileProps = {}
+    // 是否刷新列表
+    const freshListBol = uploaderProps.uploaderRequest.extraParams && uploaderProps.uploaderRequest.extraParams.freshListBol
+    if (freshListBol) {
+      uploader.freshFileList(uploaderInstance)
+    }
+    comp.$emit('toggleUploader', false)
+  }
+  uploader.freshFileList = (uploaderInstance) => {
+    const fileList = uploaderInstance.files
+    fileList.forEach(file => {
+      // 删除文件需要异步进行
+      setTimeout(() => {
+        file.cancel()
+        uploader.getInstantiation('uploader').removeFile(file)
+      }, 500)
+    })
+  }
+  // 设置uploaderProps参数方法，设置默认值，调用startUploader与selectFile时没有设置的参数会使用默认值
+  uploader.setUploaderProps = ({ ...args } = {}) => {
+    mergeFun([uploaderProps], args)
+    mergeFun([defaultProps], args)
+    args.callback && args.callback()
+  }
+
+  // 开始上传方法，参数是selectFile返回的uploaderFile实例
+  uploader.startUploader = (uploaderFile) => {
+    if (uploaderFile) {
+      // startUploader还要强制开启自动上传autoUpload
+      merge(uploaderFile, { autoUpload: true })
+      comp.$emit('startUploader', uploaderFile)
+    } else {
+      throw new Error('startUploader方法的参数必须是selectFile方法返回的uploaderFile实例')
+    }
+  }
+}
+
+// 获取uploaderProps参数方法
+uploader.getUploaderProps = (key) => {
+  return key ? uploaderProps[key] : uploaderProps
+}
+
+// 设置实例化的uploader对象
+uploader.setInstantiation = ({ ...args } = {}) => {
+  Object.assign(instantiate, args)
+}
+
+// 获取实例化的uploader对象
+uploader.getInstantiation = (key) => {
+  return key ? instantiate[key] : instantiate
+}
+
+// 选择文件方法，用来打开选择文件弹窗
+// 参数与uploaderProps相同，此外还有confirm, cancel回调事件
+uploader.selectFile = ({ ...args } = {}) => {
+  selectFileProps = {}
+  const { singleFile } = uploaderProps.uploaderRequest.props
+  uploaderProps.showAfterSelected = args.showAfterSelected ?? defaultProps.showAfterSelected
+  // 通过传参singleFile设置是否多选，默认单选
+  const targetBtn = singleFile ? instantiate.uploaderBtn : instantiate.batchUploaderBtn
+  // 设置可选文件类型之后，再触发点击事件
+  targetBtn.$refs.btn.querySelector('input').setAttribute('accept', args.accept)
+  targetBtn.$emit('click', defaultProps)
+  targetBtn.$el.click()
+  merge(selectFileProps, { ...args })
+
+  // 需要等待onFileAdded事件执行完毕之后再开始上传
+  // 原生有回调方法
+  // const timer = setInterval(() => {
+
+  // }, 100)
+}
+uploader.afterSelect = (uploaderFile) => {
+  const _uploaderFile = uploaderFile
+  if (_uploaderFile?.fileAdded) {
+    const { confirm, cancel } = selectFileProps
+    if (_uploaderFile) {
+      // 设置uploader参数
+      const props = {}
+      mergeFun([props, uploaderProps], selectFileProps)
+      merge(_uploaderFile, props)
+      // 选择了文件
+      confirm && confirm(_uploaderFile)
+      // 是否自动上传
+      _uploaderFile.autoUpload && uploader.startUploader(_uploaderFile)
+    } else {
+      // 没有选文件
+      cancel && cancel()
+    }
+  }
+}
+export {
+  uploader
+}
diff --git a/src/components-new/mc-components/upload/upload-file.vue b/src/components-new/mc-components/upload/upload-file.vue
new file mode 100644
index 0000000..4ca1cd3
--- /dev/null
+++ b/src/components-new/mc-components/upload/upload-file.vue
@@ -0,0 +1,847 @@
+<template>
+  <div>
+    <div class="flex upload-file-tips">
+      <span class="el-icon-warning" />{{ $t('mc-components.upload.uploader.tips') }}
+    </div>
+    <div class="upload-card">
+      <uploader
+        ref="uploader"
+        :options="options"
+        :auto-start="false"
+        class="upload-file-content"
+        @file-added="onFileAdded"
+        @files-added="onFilesAdded"
+        @file-success="onFileSuccess"
+        @file-error="onFileError"
+        @file-progress="onFileProgress"
+        @files-submitted="onFilesSubmitted"
+      >
+        <uploader-drop v-show="showUploadBtn">
+          <uploader-btn ref="uploader-btn" single />
+          <uploader-btn ref="batch-uploader-btn" :single="false" />
+        </uploader-drop>
+
+        <uploader-list>
+          <template slot-scope="list_props">
+            <div :handleList="handleList(list_props)">
+              <div v-for="file in list_props.fileList" :key="file.id" class="upload-card-item flex">
+                <uploader-file
+                  ref="uploaderFile"
+                  :file="file"
+                  class="upload-file"
+                  :list="true"
+                >
+                  <template slot-scope="props">
+                    <div class="flex upload-card-prop">
+                      <div class="upload-card-content">
+                        <div class="flex upload-card-downText">
+                          <div class="upload-card-appName">
+                            <!-- 名称 -->
+                            <mc-overflow-tooltip :key="file.name">
+                              {{ file.name }}
+                            </mc-overflow-tooltip>
+                          </div>
+                          <!-- 上传完成时显示 -->
+                          <div v-if="props.status!=='success'" class="upload-card-text flex">
+                            <!-- 文件大小 -->
+                            <span>{{ $t('mc-components.upload.size') }}:{{ size2Unit(file.size) }}</span>
+                            <!-- 存储位置 -->
+                            <span>{{ $t('mc-components.upload.storagePath') }}:
+                              <mc-overflow-tooltip :key="file.location+new Date().getTime()" :disabled="!file.location">
+                                {{ file.location }}
+                              </mc-overflow-tooltip>
+                            </span>
+                            <!-- MD5 -->
+                            <span>MD5:
+                              <mc-overflow-tooltip :key="file.md5" :disabled="!file.md5" :content="file.md5">
+                                {{ file.md5 }}
+                              </mc-overflow-tooltip>
+                            </span>
+                          </div>
+                          <!-- 其他状态时显示 -->
+                          <div v-else class="upload-card-text flex">
+                            <!-- 已上传/总大小 -->
+                            <span>{{ $t('mc-components.upload.uploaded') }}:{{ props.status!='error'?(parseFloat(props.formatedSize)*props.file._prevProgress).toFixed(1):'--' }}/{{ props.formatedSize }}</span>
+                            <!-- 上传速度 -->
+                            <span class="upload-card-speed">{{ $t('mc-components.upload.speed') }}:{{ file.paused? 0: getSpeedFunc(file,props) }}</span>
+                          </div>
+                        </div>
+                        <div class="flex" style="align-items:center">
+                          <!-- 进度 -->
+                          <el-progress
+                            style="flex:1"
+                            :percentage="getProgress(props)"
+                            :show-text="false"
+                            :color="exchangeStatus(props,file).color"
+                          />
+                          <span
+                            class="upload-card-desc"
+                          >{{ parseInt((props.file._prevUploadedSize/props.size)*100)+'%' }}</span>
+                          <!-- 状态 -->
+                          <span
+                            class="upload-card-desc"
+                            :style="{width:'120px',textAlign:'center',color:exchangeStatus(props,file).color}"
+                          >{{ file.retryLoad?'':$t('mc-components.upload.uploader.'+exchangeStatus(props,file).status) }}
+                          </span>
+                        </div>
+                        <div class="flex upload-card-downText" style="height:21px">
+                          <!-- 文件类型，selectFile时自定义传入 -->
+                          <div class="upload-card-appName" style="width:180px;color:#aaa">{{ file.typelabel }}</div>
+                          <!-- 创建时间，由后端生成 -->
+                          <div class="upload-card-text flex" style="color:#aaa">{{ file.createAt }}</div>
+                        </div>
+                      </div>
+
+                      <div class="upload-card-btn">
+                        <div v-if="['uploading','paused'].includes(props.status)">
+                          <el-button
+                            :type="file.isUploading()?'primary':'warning'"
+                            :loading="file.pauseLoad||file.frontCalculating||file.calculating"
+                            @click="pauseFile(file,file.isUploading())"
+                          >{{ file.isUploading()?$t('mc-components.upload.pause'):$t('mc-components.upload.continue') }}</el-button>
+                          <el-button
+                            type="danger"
+                            :loading="file.cancelLoad"
+                            @click="handlerCancel(file,1)"
+                          >{{ $t('common.cancel') }}</el-button>
+                        </div>
+                        <el-button
+                          v-else-if="props.status=='waiting'"
+                          type="danger"
+                          :loading="file.cancelLoad"
+                          @click="handlerCancel(file,1)"
+                        >{{ $t('common.cancel') }}</el-button>
+                        <div v-else-if="props.status=='error'">
+                          <el-button
+                            type="warning"
+                            :loading="file.retryLoad"
+                            @click="handlerRetry(file)"
+                          >{{ $t('mc-components.upload.retry') }}</el-button>
+                          <el-button
+                            type="danger"
+                            :loading="file.cancelLoad"
+                            @click="handlerCancel(file,2)"
+                          >{{ $t('common.delete') }}</el-button>
+                        </div>
+                        <div v-else-if="['success','calculating'].includes(props.status)">
+                          <!-- 查看 -->
+                          <el-button
+                            type="primary"
+                            :disabled="file.calculating"
+                            @click="handlerView(file)"
+                          >{{ $t('mc-components.upload.view') }}</el-button>
+                          <el-button
+                            type="danger"
+                            :loading="file.cancelLoad||file.calculating"
+                            @click="handlerCancel(file,2)"
+                          >{{ $t('common.delete') }}</el-button>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </uploader-file>
+              </div>
+            </div>
+          </template>
+        </uploader-list>
+      </uploader>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+	 * uploadFile  文件上传
+	 * @description 文件上传组件，用于选择应用，文件流分片断点续传。
+	 * @tutorial https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md
+	 * @tutorial https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E9%85%8D%E7%BD%AE
+	 */
+import { uploader } from './index.js'
+import { cloneDeep } from 'lodash'
+import { size2Unit, volumeUnit } from '@/utils/unit.js'
+import variables from '@/styles/variables.scss'
+import mcOverflowTooltip from '@/components-new/mc-ui/tooltip/mc-overflow-tooltip.vue'
+import SparkMD5 from 'spark-md5'
+import MD5 from 'js-md5'
+import { mcUploadFileFunc } from '@/api/mc-components/components.js'
+
+// const fileTypes = ['rpm', 'rar', '7z', 'java-archive', 'msdownload', 'ms-dos-executable', 'zip', 'msi', 'jar', 'MSIX']
+
+export default {
+  components: { mcOverflowTooltip },
+  inject: ['uploaderShow'],
+  props: {
+    params: {
+      type: Object,
+      default: () => ({
+        appId: 0
+      })
+    },
+    showUploadBtn: {
+      type: Boolean,
+      default: false
+    },
+    fileData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      fileList: [],
+      fileAdded: false,
+      variables: variables,
+      options: {
+        target: '', // 目标上传 URL
+        chunkSize: 10 * 1024 * 1024, // 分块时按照该值来分
+        forceChunkSize: true, // 是否强制所有的块都是小于等于 chunkSize 的值
+        simultaneousUploads: 3, // 并发上传数
+        maxChunkRetries: 1, // 最大自动失败重试上传次数
+        chunkRetryInterval: 500, // 重试间隔
+        // 其他额外的参数,可以是一个对象或者是一个函数
+        query: (file, chunk) => {
+          return {
+            // 可以针对于每个file对象设置自定义的params
+            ...file.uploaderRequest?.params
+          }
+        },
+        generateUniqueIdentifier: () => {
+          return null
+        }, // 文件唯一标识
+        // 服务器分片校验函数，实现断点续传和秒传
+        checkChunkUploadedByResponse: (chunk, message) => {
+          const _chunk = chunk
+          return uploader.checkChunkUploadedByResponseFunc(_chunk, message)
+        },
+        allowDuplicateUploads: true, // 同一个文件多次上传
+        successStatuses: [200],
+        permanentErrors: [-1, 1],
+        headers: {}
+      },
+      singleFile: true // 多文件
+    }
+  },
+  computed: {
+    show () {
+      return this.uploaderShow()
+    }
+  },
+  watch: {
+    fileData: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        this.fileList = cloneDeep(val)
+        for (const item of this.fileList) {
+          this.$set(item, 'in_list', false)
+        }
+        this.$forceUpdate()
+      }
+    }
+  },
+  mounted () {
+    // 设置uploader实例
+    uploader.setInstantiation({
+      uploader: this.$refs.uploader.uploader,
+      uploaderBtn: this.$refs['uploader-btn'],
+      batchUploaderBtn: this.$refs['batch-uploader-btn']
+    })
+  },
+  methods: {
+    size2Unit (val) {
+      return size2Unit(val)
+    },
+    // 设置参数
+    setUploaderProps (uploaderFile) {
+      const { uploaderRequest } = uploaderFile
+      const uploaderObj = uploader.getInstantiation('uploader')
+      // 通过uploader实例修改参数
+      uploaderObj.opts.target = uploaderRequest.url
+      uploaderObj.opts.chunkSize = uploaderRequest.chunkSize
+      uploaderObj.opts.headers = uploaderRequest.headers
+      // 合并额外新增参数
+      Object.assign(uploaderRequest.params, uploaderRequest.extraParams)
+    },
+    // 添加单一文件
+    onFileAdded (file) {
+      file.fileAdded = true
+      this.fileAdded = true
+    },
+    // 添加批量文件
+    onFilesAdded (files) {
+      const checkFildsBol = uploader.checkFildsFunc(files)
+      if (!checkFildsBol) {
+        files.ingored = true
+        files.fileAdded = false
+        this.fileAdded = checkFildsBol
+        return false
+      }
+      uploader.setInstantiation({ 'uploaderFile': files })
+      files.forEach(file => {
+        file.fileAdded = true
+        this.fileAdded = true
+        setTimeout(() => {
+          uploader.setInstantiation({ 'uploaderFile': null })
+          uploader.afterSelect(file)
+        }, 50)
+      })
+    },
+    // 添加完成
+    onFilesSubmitted (files, fileList) {
+      const uploaderFile = uploader.getInstantiation('uploaderFile')
+      if (uploaderFile && this.fileAdded) {
+        // 是否弹出上传弹窗
+        !this.show && uploader.getUploaderProps('showAfterSelected') && uploader.showUploader()
+        uploader.setInstantiation({ 'uploaderFile': null })
+      }
+    },
+    setFileError (file) {
+      file.status = 'error'
+      file.error = true
+    },
+    // 兼容低版本的Firefox浏览器response数据
+    trimFirefoxResponse (response, str) {
+      if (response.includes(`<${str}>`) && `<${str}>`.length > 0) {
+        return response.substring(response.indexOf(`<${str}>`) + `<${str}>`.length, response.indexOf(`</${str}>`))
+      } else {
+        return ''
+      }
+    },
+    // 文件上传成功
+    onFileSuccess (rootFile, file, message, chunk) {
+      try {
+        let res = {}
+        try {
+          res = JSON.parse(message)
+        } catch (err) {
+          res = {
+            status: this.trimFirefoxResponse(message, 'status'),
+            msg: this.trimFirefoxResponse(message, 'msg')
+          }
+        }
+        if (file.isComplete() && String(res.status) === '200') {
+          this.alertTips(this.$t('mc-components.upload.uploader.success.tips'), 'success')
+
+          const json = res.data
+          file.location = json.location
+          if (json.md5) { // 小文件
+            file.md5 = json.md5
+            this.$set(file, 'status', 'success')
+          } else {
+            // 大文件,md5需要后台异步计算
+            file.uploaderRequest.getMd5Value(file)
+          }
+        } else {
+          this.setFileError(file)
+          this.alertTips(res.msg, 'error')
+        }
+      } catch (error) {
+        this.setFileError(file)
+        this.alertTips(this.$t('mc-components.upload.uploader.error.tips'), 'error')
+      }
+    },
+    // 文件上传出错
+    onFileError (rootFile, file, message, chunk) {
+      if (String(chunk.xhr.status) === '401') {
+        this.alertTips(this.$t('mc-components.upload.uploader.auth.tips'), 'error')
+        return false
+      }
+      this.pauseFile(file, true)
+      this.alertTips(this.$t('mc-components.upload.uploader.fail.tips'), 'error')
+    },
+
+    onFileProgress (rootFile, file, chunk) {
+      const { name: filename, size: totalSize } = file.file
+      if (chunk.processedState?.res) {
+        const res = JSON.parse(chunk.processedState.res)
+        if (res.status !== 200) {
+          this.fileAbortFunc(file)
+          this.pauseFile(file, true)
+          mcUploadFileFunc({ identifier: file.uniqueIdentifier, filename, totalSize }, file.uploaderRequest.props.url).then(({ chunkIdList }) => {
+            if ([1, 2, 3].every(item => chunkIdList.includes(item))) {
+              this.setFileError(file)
+            } else {
+              // 当重试从第一块上传并开启 并发上传3块时,插件会遗漏第一次并发上传的部分块,因此满足条件时取消重试功能,直接删除
+              file.cancel && file.cancel()
+            }
+            this.alertTips(res.msg, 'error')
+          }).catch(_ => {
+            file.cancel && file.cancel()
+          })
+        }
+      }
+      // if (Number(chunkNumber) === 1) {
+      //   // 在第一个分片的响应数据中赋值开始上传时间，时间数据从接口获取
+      //   const res = JSON.parse(chunk.processedState.res)
+      //   if (res.status === 200) {
+      //     // code：200上传完成，201：分包上传成功，-1：上传错误
+      //     res.data.code === 201 && this.$set(file, 'createAt', res.data.createAt)
+      //   }
+      // }
+    },
+    getProgress (props) {
+      // parseInt((props.file._prevUploadedSize/props.size)*100)<0?0:parseInt((props.file._prevUploadedSize/props.size)*100)
+      const progress = parseInt(props.progress * 100)
+      return Math.min(Math.max(0, progress), 100)
+    },
+    handleList (val) {
+      for (const file of val.fileList) {
+        this.$set(file, 'retryLoad', false)
+        this.$set(file, 'pauseLoad', false)
+        this.$set(file, 'cancelLoad', false)
+        for (const item of this.fileList) {
+          if (String(file.uniqueIdentifier) === String(item.appId)) {
+            Object.assign(file, item)
+            item.in_list = true
+            break
+          }
+        }
+      }
+    },
+    // 单个暂停/继续上传
+    pauseFile (file, type) {
+      if (file.size - file._prevUploadedSize > 1048576) {
+        file.pauseLoad = true
+        if (type && file.pause) {
+          this.$set(file, 'manualPaused', false)
+          file.pause()
+          file.status = 'paused'
+        } else if (file.resume) {
+          if (file.uniqueIdentifier) {
+            file.resume()
+            file.status = ''
+          } else {
+            const isLargeFile = file.size > 1024 * 1024 * 500
+            file.uniqueIdentifierType = isLargeFile ? 0 : 1
+            if (isLargeFile) {
+              // 完整计算整个文件MD5值
+              file.isAllMd5 = this.computeMD5(file, true, 1)
+            }
+            this.computeMD5(file, !isLargeFile).then(file => {
+              file.uploaderRequest = { params: {} }
+              file.uploaderRequest.params.md5 = file.uniqueIdentifierType ? file.md5 : ''
+              file.resume()
+              file.status = ''
+            })
+          }
+        }
+        setTimeout(() => {
+          file.pauseLoad = false
+          this.$forceUpdate()
+        }, 800)
+      }
+    },
+    // 开始上传
+    startUploader (file) {
+      const isLargeFile = file.size > 1024 * 1024 * 500
+      file.uniqueIdentifierType = isLargeFile ? 0 : 1
+      if (isLargeFile) {
+        // 完整计算整个文件MD5值
+        file.isAllMd5 = this.computeMD5(file, true, 1)
+      }
+      this.computeMD5(file, !isLargeFile).then(newfile => {
+        this.setUploaderProps(newfile)
+        this.handlerUpolad(newfile)
+      })
+    },
+    handlerUpolad (file) {
+      const _file = file
+      if (_file) {
+        _file.uploaderRequest.params.md5 = _file.uniqueIdentifierType ? file.md5 : ''
+        _file.resume && _file.resume()
+        uploader.setInstantiation({ 'uploaderFile': null })
+      }
+      // file && setTimeout(() => {
+      //   file.uploaderRequest.params.md5 = file.uniqueIdentifierType ? file.md5 : ''
+      //   file.resume && file.resume()
+      //   uploader.setInstantiation({ 'uploaderFile': null })
+      // }, 500)
+    },
+    // 重试上传
+    handlerRetry (file) {
+      const { fileId: fileIdName, uploadFileMd5Func } = file.uploaderRequest.props
+      const isLargeFile = file.size > 1024 * 1024 * 500
+      if (isLargeFile) {
+        // 异步计算大文件的md5还未计算完成和请求，需要重新计算并请求
+        if (typeof file.isAllMd5 !== 'string') {
+          this.computeMD5(file, true, 1).then(({ file, md5 }) => {
+            file.isAllMd5 = md5
+            const fileId = file.uploaderRequest.params[fileIdName]
+            uploadFileMd5Func({ fileId, clientMd5: md5 })
+          })
+        }
+      }
+      if (file.retry) {
+        file.retryLoad = true
+        file.resume && file.resume()
+        file.retry && file.retry()
+        setTimeout(() => {
+          file.retryLoad = false
+          file.status = ''
+          this.$forceUpdate()
+        }, 800)
+      }
+    },
+    // 查看
+    handlerView (file) {
+      if (file.typelabel === this.$t('platformUpgrade.upload.UpgradePackage')) {
+        sessionStorage.setItem('fileManagetabName', 'upgradeFile')
+      }
+      // 跳转到重构之后的文件管理
+      sessionStorage.setItem('redirectUrl', '/systemPreserveUpgrade/fileManagement')
+      top.location.href = process.env.VUE_APP_BASE_API + `/systemManagement/systemManagement?fileName=${file.name}`
+    },
+    // 取消上传：已经开始上传的并且在服务器有记录的请使用此方法
+    handlerCancel (file, type) {
+      if (!file.paused) {
+        this.pauseFile(file, true)
+        // 添加手动暂停标识
+        this.$set(file, 'manualPaused', true)
+      }
+      this.confirmTips({
+        title: this.$t('mc-components.upload.uploader.cancel' + type + '.title'),
+        content: this.$t('mc-components.upload.uploader.cancel' + type + '.tips')
+      }).then(res => {
+        this.fileAbortFunc(file)
+        file.cancelLoad = true
+        if (type === 1) {
+          // 取消
+          this.cancelUploaded(file)
+        } else {
+          // 删除
+          this.createLoading()
+          file.cancelRequest.apiFun(
+            {
+              cancelParmas: { ...file.cancelRequest.params },
+              requestParams: { ...file.uploaderRequest.params }
+            }
+          ).then(res => {
+            this.cancelUploaded(file)
+            this.alertTips(this.$t('mc-components.upload.uploader.cancel' + type + '.success'), 'success')
+          }).finally(() => {
+            this.hideLoading()
+            setTimeout(() => {
+              file.cancelLoad = false
+              this.$forceUpdate()
+            }, 800)
+          })
+        }
+      }).catch(_ => {
+        file.manualPaused && this.pauseFile(file, false)
+      })
+    },
+    // 此方法从上传队列中移除未开始上传的文件，删除不了服务器记录
+    removeFile (file) {
+      uploader.getInstantiation('uploader').removeFile(file)
+    },
+    // 此方法从上传队列中移除已上传的文件，并停止后台上传任务，删除不了服务器记录
+    cancelUploaded (file) {
+      file.cancel && file.cancel()
+    },
+    exchangeStatus (props, file) {
+      if (file.status) {
+        props.status = file.status
+      }
+      if (props && props.status) {
+        const val = this.getCOlorStatus(file, props)
+        return { color: variables[val[0]], status: val[1] }
+      }
+      return { color: '#aaa', text: '' }
+    },
+    computeMD5 (file, isComCalc, type) {
+      const fileReader = new FileReader()
+      // const time = new Date().getTime()
+      const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
+      let currentChunk = 0
+      const chunkSize = 1024 * 1024 * 10
+      const chunks = Math.ceil(file.size / chunkSize)
+      const spark = new SparkMD5.ArrayBuffer()
+      !type && this.$set(file, 'frontCalculating', true)
+      this.$forceUpdate()
+      loadNext()
+      file.reader = fileReader
+      return new Promise((resolve, reject) => {
+        fileReader.onload = (e) => {
+          spark.append(e.target.result)
+          /*
+            1.判断条件分文件大于500M，和小于500M
+              大于500M的先计算前500M的MD5值，再异步进行第二步,计算整个文件MD5值
+            2.异步再调用此方法为固定计算完整文件的MD5值
+          */
+          const judCon = isComCalc ? (currentChunk < chunks) : (currentChunk * chunkSize < 1024 * 1024 * 500)
+          if (judCon) {
+            currentChunk++
+            loadNext()
+          } else {
+            const md5 = spark.end()
+            if (type) {
+              resolve({ file, md5 })
+            } else {
+              file.uniqueIdentifier = MD5(md5 + file.name + file.size)
+              file.md5 = md5
+              this.$set(file, 'frontCalculating', false)
+              this.$set(file, 'paused', false)
+              // md5计算完毕
+              resolve(file)
+            }
+          }
+        }
+        fileReader.onerror = () => {
+          this.alertTips(this.$t('mc-components.upload.uploader.reade.error', [file.name]), 'error')
+          reject()
+          /*
+            普通读取出错直接删除
+            大文件异步计算读取出错,不删除,可以重试
+          */
+          if (!isComCalc || !type) {
+            file.cancel()
+          }
+        }
+      })
+      function loadNext () {
+        const start = currentChunk * chunkSize
+        const end = start + chunkSize >= file.size ? file.size : start + chunkSize
+        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
+      }
+    },
+    // 如果处于md5计算状态，终止文件的读取过程
+    fileAbortFunc (file) {
+      if (file.frontCalculating && file.reader) {
+        file.reader.abort()
+      }
+    },
+    getCOlorStatus (file, props) {
+      return [
+        {
+          key: file.frontCalculating, // 前端计算md5中
+          value: ['colorSuccess', 'frontCalculation']
+        },
+        {
+          key: file.calculating, // 后端校验md5中
+          value: ['colorSuccess', 'calculating']
+        },
+        {
+          key: props.status === 'paused',
+          value: ['colorWarning', 'paused']
+        },
+        {
+          key: file.isUploading(),
+          value: ['colorPrimary', 'uploading']
+        },
+        {
+          key: props.status === 'waiting',
+          value: ['colorDisabled', 'waiting']
+        },
+        {
+          key: props.status === 'success',
+          value: ['colorSuccess', 'success']
+        },
+        {
+          key: props.status === 'error',
+          value: ['colorDanger', 'error']
+        }
+      ].find(({ key }) => key)?.value || ['colorWarning', 'paused']
+    },
+    getSpeedFunc (file, props) {
+      if (!file.startSize) {
+        file.startSize = file.sizeUploaded()
+      }
+      if (!file.uploadingTime) {
+        file.uploadingTime = Date.now()
+      }
+      const nowDate = Date.now()
+      // 1s更新一次上传速度
+      if (nowDate - file.uploadingTime > 1000 && (file.sizeUploaded() - file.startSize > 0)) {
+        const sizeUploaded = file.sizeUploaded()
+        file.speed = volumeUnit(((sizeUploaded - file.startSize) / 1024) / ((nowDate - file.uploadingTime) / 1000), { tofix: 1 })
+        file.uploadingTime = nowDate
+        file.startSize = sizeUploaded
+      }
+      return Number(!(props.status === 'waiting' || !file.speed)) && file.speed + '/s'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-file-content{
+  .uploader-drop {
+    padding: 0;
+		width: 360px;
+		height: 100px;
+		background-color: #fff;
+		border: 1px dashed #d9d9d9;
+		border-radius: 6px;
+
+    &:hover {
+      border-color: #409EFF;
+    }
+	}
+
+  .uploader-btn {
+		margin-right: 4px;
+		width: 100%;
+		height: 100%;
+		border: none;
+		padding: 0;
+    text-align: center;
+
+    &:hover {
+      background-color: #fff !important;
+    }
+
+    .el-icon-upload {
+      font-size: 67px;
+      color: #C0C4CC;
+      margin: 10px 0 6px;
+      line-height: 50px;
+    }
+	}
+
+  &__text {
+    color: #606266;
+    font-size: 14px;
+    text-align: center;
+
+    em {
+      color: #409EFF;
+      font-style: normal;
+    }
+	}
+
+  .el-upload__tip{
+    div{
+      line-height: 20px;
+    }
+
+    p{
+      text-indent: 2em;
+      line-height: 20px;
+    }
+  }
+}
+
+.upload-file{
+  width:100%;
+  border:none;
+  height:60px;
+
+  &-tips{
+    height: 40px;
+    padding: 0 12px;
+    border: solid 1px #eee;
+    color: #E6A23C;
+    font-size: 14px;
+    align-items: center;
+
+    >.el-icon-warning{
+      margin-right: 10px;
+    }
+  }
+}
+
+.upload-card{
+    width: 100%;
+    height: 400px;
+    padding-top: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    font-size: 14px;
+    color: #000;
+
+    &-options{
+      background-color: #fff;
+      padding-bottom: 10px;
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+    }
+
+    &-item{
+      width: 100%;
+      margin-bottom: 20px;
+    }
+
+    ::v-deep .el-checkbox-group {
+      font-size: inherit;
+    }
+
+    &-checkbox{
+      margin-top: 20px;
+      margin-right: 20px;
+
+      ::v-deep .el-checkbox__label{
+        display: none;
+      }
+    }
+
+    &-prop{
+      height:100%;
+      padding-left: 20px;
+    }
+
+    &-content{
+      flex: 1;
+      width: 600px;
+      height: 60px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+
+    &-appName{
+      width: 200px;
+      height: 100%;
+      display: inherit;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-downText{
+      width: 100%;
+      justify-content: space-between;
+      align-content: space-around;
+      align-items: center;
+      line-height: 1.2;
+      .overflow-tooltip{
+        text-align: left;
+      }
+    }
+
+    &-text{
+      width: 500px;
+      justify-content: flex-end;
+
+      >span{
+        width: 150px;
+        text-align: right;
+        display: flex;
+        justify-content: center;
+        white-space: nowrap;
+        padding-left: 25px;
+      }
+    }
+
+    &-speed{
+      margin-left: 10px;
+      color: #aaa;
+    }
+
+    &-desc{
+      width:50px;
+      margin-left:20px;
+      line-height:1.5
+    }
+
+    &-btn{
+      width: 160px;
+      height: 60px;
+      margin-left: 20px;
+      padding-top: 15px;
+      line-height: 1;
+    }
+  }
+</style>
diff --git a/src/components-new/mc-components/upload/upload-list.vue b/src/components-new/mc-components/upload/upload-list.vue
new file mode 100644
index 0000000..8d0baa3
--- /dev/null
+++ b/src/components-new/mc-components/upload/upload-list.vue
@@ -0,0 +1,137 @@
+<template>
+  <transition name="el-fade-in-linear">
+    <div v-show="show" class="upload-list">
+      <div class="upload-list-box">
+        <div class="upload-list-box-title flex">
+          <span>{{ $t('mc-components.upload.uploader.title') }}</span>
+          <div class="el-icon-close" @click="handleClose" />
+        </div>
+        <upload-file ref="uploadFile" v-on="$listeners" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import uploadFile from './upload-file.vue'
+import { uploader } from './index.js'
+
+export default {
+  name: 'UploadList',
+  components: {
+    uploadFile
+  },
+  provide () {
+    return {
+      uploaderShow: () => {
+        return this.show
+      }
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  created () {
+    this.$on(['toggleUploader'], show => {
+      this.show = show
+    })
+    this.$once('hook:beforeDestroy', () => {
+      this.$off(['toggleUploader'])
+    })
+    this.$on(['startUploader'], uploaderFile => {
+      this.$refs.uploadFile.startUploader(uploaderFile)
+    })
+    uploader.uploaderInit(this)
+  },
+  mounted () {
+    this.keyDown()
+    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    })
+  },
+  methods: {
+    handleClose () {
+      const uploaderInstance = this.$refs.uploadFile.$refs.uploader
+      uploader.hideUploader(uploaderInstance)
+    },
+    beforeunloadHandler (e) {
+      // 关闭页面/刷新页面触发
+      // e.returnValue = true
+    },
+    keyDown () {
+      document.onkeydown = function (e) {
+        e = window.event || e
+        var k = e.keyCode
+        // 屏蔽 shift+F10菜单
+        if ((e.shiftKey && k === 121) || (e.ctrlKey && k === 121)) {
+          e.keyCode = 0
+          e.returnValue = false
+          e.stopPropagation()
+          return false
+        }
+      }
+
+      // 屏蔽右键菜单
+      document.oncontextmenu = function (event) {
+        if (window.event) {
+          event = window.event
+        }
+        try {
+          var the = event.srcElement
+          if (!((the.tagName === 'INPUT' && the.type.toLowerCase() === 'text') || the.tagName === 'TEXTAREA')) {
+            return false
+          }
+          return true
+        } catch (e) {
+          return false
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-list{
+  user-select: none;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba($color: #000000, $alpha: 0.5);
+  z-index: 2000;
+
+  &-box{
+    display: block;
+    width: 880px;
+    background-color: #fff;
+    border-radius:4px;
+    margin: calc((100vh - 500px) / 2) auto;
+    overflow: hidden;
+    position: relative;
+
+    &-title{
+      padding: 20px;
+      justify-content: space-between;
+
+      >span{
+        font-size: 18px;
+        color: #303133;
+      }
+
+      .el-icon-close{
+        cursor: pointer;
+        color: #909399;
+      }
+
+      .el-icon-close:hover{
+        color: #409EFF;
+      }
+    }
+  }
+}
+</style>
-- 
Gitee