diff --git a/web/src/components/dvaHtml2pdf/index.vue b/web/src/components/dvaHtml2pdf/index.vue
new file mode 100644
index 0000000..1160891
--- /dev/null
+++ b/web/src/components/dvaHtml2pdf/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div style="position: absolute;z-index: 10000">
+      <el-button
+        type="success"
+        round
+        size="small"
+        v-if="downloadButtonShow"
+        :style="downloadButtonStyle"
+        @click="generateReport"
+        :loading="downloadLoading"
+      >{{ downloadButtonTitle }}
+      </el-button>
+      <el-button
+        type="primary"
+        round
+        size="small"
+        v-if="previewButtonShow"
+        style="position: fixed; right: 50px; bottom: 70px"
+        @click="previewPdf"
+        :loading="previewLoading"
+      >{{ previewButtonTitle }}
+      </el-button>
+    </div>
+    <vue-html2pdf
+      :show-layout="true"
+      :float-layout="false"
+      :enable-download="false"
+      :preview-modal="preview"
+      :filename="filename"
+      :paginate-elements-by-height="1100"
+      :pdf-quality="2"
+      pdf-format="a4"
+      pdf-orientation="portrait"
+      pdf-content-width="100%"
+      :manual-pagination="true"
+      :html-to-pdf-options="{ margin: [5, 5, 0, 5] }"
+      @beforeDownload="beforeDownload($event)"
+      ref="html2Pdf"
+    >
+      <section slot="pdf-content">
+        <slot></slot>
+      </section>
+    </vue-html2pdf>
+  </div>
+</template>
+
+<script>
+import SongtiSCBlack from '@/assets/fonts/SongtiSCBlack'
+import VueHtml2pdf from 'vue-html2pdf'
+
+export default {
+  name: 'dvaHtml2pdf',
+  components: {
+    VueHtml2pdf
+  },
+  props: {
+    filename: { // 导出pdf文件名称
+      type: String,
+      require: true
+    },
+    company: { // 企业名称
+      type: String,
+      default: 'xxx '
+    },
+    // 是否显示下载按钮
+    downloadButtonShow: {
+      type: Boolean,
+      default: true
+    },
+    // 下载按钮样式
+    downloadButtonStyle: {
+      type: Object,
+      default () {
+        return {
+          position: 'fixed', right: '50px', bottom: '30px'
+        }
+      }
+    },
+    // 下载按钮标题
+    downloadButtonTitle: {
+      type: String,
+      default: '下载报告'
+    },
+    // 是否显示预览按钮
+    previewButtonShow: {
+      type: Boolean,
+      default: true
+    },
+    // 预览按钮样式
+    previewButtonStyle: {
+      type: Object,
+      default () {
+        return {
+          position: 'fixed', right: '50px', bottom: '70px'
+        }
+      }
+    },
+    // 预览按钮标题
+    previewButtonTitle: {
+      type: String,
+      default: '预览报告'
+    }
+  },
+  data () {
+    return {
+      preview: false,
+      downloadLoading: false,
+      previewLoading: false
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    async beforeDownload ({ html2pdf, options, pdfContent }) {
+      if (this.preview) return
+      await html2pdf()
+        .set(options)
+        .from(pdfContent)
+        .toPdf()
+        .get('pdf')
+        .then((pdf) => {
+          const totalPages = pdf.internal.getNumberOfPages()
+          for (let i = 1; i <= totalPages; i++) {
+            pdf.setPage(i)
+            pdf.addFileToVFS('MyFont.ttf', SongtiSCBlack)
+            pdf.addFont('MyFont.ttf', 'MyFont', 'normal')
+            pdf.setFont('MyFont')
+            pdf.setFontSize(10)
+            pdf.setTextColor(150)
+            pdf.text(
+              '第 ' + i + '页  共 ' + totalPages + '页',
+              pdf.internal.pageSize.getWidth() * 0.45,
+              pdf.internal.pageSize.getHeight() - 2
+            )
+            pdf.text(
+              this.company,
+              pdf.internal.pageSize.getWidth() * 0.79,
+              pdf.internal.pageSize.getHeight() - 2
+            )
+          }
+        })
+        .save(this.filename)
+    },
+    generateReport () {
+      this.preview = false
+      this.downloadLoading = true
+      this.$nextTick(() => {
+        this.$refs.html2Pdf.generatePdf()
+        const _this = this
+        setTimeout(function () {
+          _this.downloadLoading = false
+        }, 4000)
+      })
+    },
+    previewPdf () {
+      this.preview = true
+      this.previewLoading = true
+      this.$nextTick(() => {
+        this.$refs.html2Pdf.generatePdf()
+        const _this = this
+        setTimeout(function () {
+          _this.previewLoading = false
+        }, 4000)
+      })
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/web/src/components/index.js b/web/src/components/index.js
index 8338d7a..7ad05b2 100644
--- a/web/src/components/index.js
+++ b/web/src/components/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
 import d2Container from './d2-container'
-
+import tableProgress from './table-progress/lib/table-progress.vue'
 // 注意 有些组件使用异步加载会有影响
 Vue.component('d2-container', d2Container)
 Vue.component('d2-icon', () => import('./d2-icon'))
@@ -11,3 +11,5 @@ Vue.component('foreignKey', () => import('./foreign-key/index.vue'))
 Vue.component('manyToMany', () => import('./many-to-many/index.vue'))
 Vue.component('d2p-tree-selector', () => import('./tree-selector/lib/tree-selector.vue'))
 Vue.component('dept-format', () => import('./dept-format/lib/dept-format.vue'))
+Vue.component('dvaHtml2pdf', () => import('./dvaHtml2pdf/index.vue'))
+Vue.component('table-progress', tableProgress)
diff --git a/web/src/components/selector-table/group.js b/web/src/components/selector-table/group.js
new file mode 100644
index 0000000..495ae80
--- /dev/null
+++ b/web/src/components/selector-table/group.js
@@ -0,0 +1,20 @@
+/*
+ * @创建文件时间: 2021-08-02 23:55:30
+ * @Auther: 猿小天
+ * @最后修改人: 猿小天
+ * @最后修改时间: 2021-08-08 12:27:45
+ * 联系Qq:1638245306
+ * @文件介绍:
+ */
+export default {
+  // 字段类型配置，注册之后即可在crud.js中使用了
+  'selector-table': {
+    // 表单组件配置
+    form: { component: { name: 'selector-table-input', props: { color: 'danger' } } },
+    // 行组件配置
+    component: { name: 'values-format', props: {} },
+    // 行展示时居中
+    align: 'center'
+    // 您还可以写更多默认配置
+  }
+}
diff --git a/web/src/components/selector-table/index.js b/web/src/components/selector-table/index.js
new file mode 100644
index 0000000..ac07646
--- /dev/null
+++ b/web/src/components/selector-table/index.js
@@ -0,0 +1,14 @@
+import { d2CrudPlus } from 'd2-crud-plus'
+import group from './group'
+
+function install (Vue, options) {
+  Vue.component('selector-table-input', () => import('./selector-table'))
+  if (d2CrudPlus != null) {
+    // 注册字段类型`demo-extend`
+    d2CrudPlus.util.columnResolve.addTypes(group)
+  }
+}
+// 导出install
+export default {
+  install
+}
diff --git a/web/src/components/selector-table/selector-table.vue b/web/src/components/selector-table/selector-table.vue
new file mode 100644
index 0000000..2968875
--- /dev/null
+++ b/web/src/components/selector-table/selector-table.vue
@@ -0,0 +1,397 @@
+<template>
+  <div ref="selectedTableRef">
+    <el-popover
+      placement="bottom"
+      width="400"
+      trigger="click"
+      @show="visibleChange">
+      <div class="option">
+        <el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict"
+                  @clear="getDict">
+          <el-button style="width: 100px" slot="append" icon="el-icon-search"></el-button>
+        </el-input>
+        <el-table
+          ref="tableRef"
+          :data="tableData"
+          size="mini"
+          border
+          :row-key="dict.value"
+          style="width: 400px"
+          max-height="200"
+          height="200"
+          :highlight-current-row="!_elProps.tableConfig.multiple"
+          @selection-change="handleSelectionChange"
+          @row-click="handleCurrentChange"
+        >
+          <el-table-column v-if="_elProps.tableConfig.multiple" fixed type="selection" reserve-selection width="55"/>
+          <el-table-column fixed type="index" label="#" width="50"/>
+          <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
+                           v-for="(item,index) in _elProps.tableConfig.columns" :key="index"/>
+        </el-table>
+        <el-pagination style="margin-top: 10px;max-width: 200px" background
+                       small
+                       :current-page="pageConfig.page"
+                       :page-size="pageConfig.limit"
+                       layout="prev, pager, next"
+                       :total="pageConfig.total"
+                       @current-change="handlePageChange"
+        />
+      </div>
+      <div slot="reference" ref="divRef" :style="{'pointerEvents': disabled?'none':''}">
+        <div v-if="currentValue" class="div-input el-input__inner" :class="disabled?'div-disabled':''">
+          <div>
+            <el-tag
+              style="margin-right: 5px"
+              v-for="(item,index) in currentValue"
+              :key="index"
+              :closable="disabled"
+              size="small"
+              :hit="false"
+              type="info"
+              @close="itemClosed(item,index)"
+              disable-transitions
+            >
+              <span>{{ item[dict.label] }}</span>
+            </el-tag>
+          </div>
+        </div>
+        <el-input v-else placeholder="请选择" slot:reference  :disabled="disabled"></el-input>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import { request } from '@/api/service'
+import XEUtils from 'xe-utils'
+import { d2CrudPlus } from 'd2-crud-plus'
+
+export default {
+  name: 'selector-table-input',
+  model: {
+    prop: 'value',
+    event: ['change', 'input']
+  },
+  mixins: [d2CrudPlus.input, d2CrudPlus.inputDict],
+  props: {
+    // 值
+    value: {
+      type: [String, Number, Array],
+      required: false,
+      default: ''
+    },
+    // 数据字典配置
+    dict: {
+      type: Object,
+      require: false
+    },
+    // 其他配置
+    elProps: {
+      type: Object,
+      require: false,
+      default () {
+        return {
+          tableConfig: {
+            multiple: false,
+            columns: []
+          }
+        }
+      }
+    },
+    // 你可以定义一些参数，通过component.props传进来
+    color: {
+      required: false
+    },
+    styleName: {
+      type: [Object, String],
+      required: false,
+      default () {
+        return {}
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 由于value值是props参数，是不允许修改的，需要用别的值存起来
+      currentValue: [],
+      pageConfig: {
+        page: 1,
+        limit: 5,
+        total: 0
+      },
+      search: null,
+      tableData: [],
+      multipleSelection: [],
+      collapseTags: false
+    }
+  },
+  computed: {
+    // 你也可以通过computed来监听value的变化，跟watch作用类似，根据实际情况选用
+    _elProps () {
+      return this.elProps
+    }
+  },
+  watch: {
+    value: {
+      handler (value, oldVal) {
+        // 父组件收到input事件后会通过v-model改变value参数的值
+        // 然后此处会watch到value的改变，发出change事件
+        // change事件放在此处发射的好处是，当外部修改value值时，也能够触发form-data-change事件
+        this.$emit('change', value)
+        this.$emit('input', value)
+        // 如果值是被外部改变的，则修改本组件的currentValue
+        if (Array.isArray(value) && value.length === 0) {
+          this.currentValue = null
+          this.multipleSelection = null
+        } else {
+          if (value && this.dispatch) {
+            this.dispatch('ElFormItem', 'el.form.blur')
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    multipleSelection: {
+      handler (newValue, oldVal) {
+        const { tableConfig } = this._elProps
+        // 是否多选
+        if (!tableConfig.multiple) {
+          this.currentValue = [newValue]
+        } else {
+          this.currentValue = newValue
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+    // currentValue (newValue, oldVal) {
+    //   const { tableConfig } = this._elProps
+    //   const { value } = this.dict
+    //   if (newValue) {
+    //     if (!tableConfig.multiple) {
+    //       if (newValue[0]) {
+    //         this.$emit('input', newValue[0][value])
+    //         this.$emit('change', newValue[0][value])
+    //       }
+    //     } else {
+    //       console.log(newValue)
+    //       const result = newValue.map((item) => {
+    //         return item[value]
+    //       })
+    //       this.$emit('input', result)
+    //       this.$emit('change', result)
+    //     }
+    //   }
+    // }
+  },
+  mounted () {
+    // 给currentValue设置初始值
+    this.setCurrentValue(this.value)
+  },
+  methods: {
+    // 设置显示值
+    setCurrentValue (val) {
+      if (val.toString().length > 0) {
+        // 在这里对 传入的value值做处理
+        const { url, value, label } = this.dict
+        const params = {}
+        params[value] = val
+        return request({
+          url: url,
+          params: params,
+          method: 'get'
+        }).then(res => {
+          const { data } = res.data
+          if (data && data.length > 0) {
+            this.currentValue = data
+          } else {
+            this.currentValue = null
+          }
+        })
+      } else {
+        this.currentValue = null
+      }
+    },
+    // 获取数据
+    getDict () {
+      const that = this
+      let url
+      if (typeof that.dict.url === 'function') {
+        const form = that.d2CrudContext.getForm()
+        url = that.dict.url(that.dict, { form })
+      } else {
+        url = that.dict.url
+      }
+      let dictParams = {}
+      if (that.dict.params) {
+        dictParams = { ...that.dict.params }
+      }
+      const params = {
+        page: that.pageConfig.page,
+        limit: that.pageConfig.limit
+      }
+      if (that.search) {
+        params.search = that.search
+        params.page = 1
+      }
+      if (that._elProps.tableConfig.data === undefined || that._elProps.tableConfig.data.length === 0) {
+        request({
+          url: url,
+          method: 'get',
+          params: { ...params, ...dictParams }
+        }).then(res => {
+          const { data, page, limit, total } = res.data
+          that.pageConfig.page = page
+          that.pageConfig.limit = limit
+          that.pageConfig.total = total
+          if (that._elProps.tableConfig.isTree) {
+            that.tableData = XEUtils.toArrayTree(data, { parentKey: 'parent', key: 'id', children: 'children' })
+          } else {
+            that.tableData = data
+          }
+        })
+      } else {
+        that.tableData = that._elProps.tableConfig.data
+      }
+    },
+    /**
+     * 下拉框展开/关闭
+     * @param bool
+     */
+    visibleChange () {
+      const that = this
+      that.getDict()
+      const { tableConfig } = that._elProps
+      if (tableConfig.multiple) {
+        that.$refs.tableRef.clearSelection() // 先清空选择,再赋值选择
+        that.currentValue ? that.currentValue.forEach(item => {
+          that.$refs.tableRef.toggleRowSelection(item, true)
+        }) : null
+      }
+    },
+    /**
+     * 分页
+     * @param page
+     */
+    handlePageChange (page) {
+      this.pageConfig.page = page
+      this.getDict()
+    },
+    /**
+     * 表格多选
+     * @param val:Array
+     */
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+      this.$emit('checkChange', val)
+      const result = val.map((item) => {
+        return item[this.dict.value]
+      })
+      this.$emit('input', result)
+      this.$emit('change', result)
+    },
+    /**
+     * 表格单选
+     * @param val:Object
+     */
+    handleCurrentChange (val) {
+      const { tableConfig } = this._elProps
+      if (!tableConfig.multiple) {
+        this.multipleSelection = val
+        this.$emit('radioChange', val)
+        this.$emit('input', val[this.dict.value])
+        this.$emit('change', val[this.dict.value])
+      }
+    },
+    /***
+     * 清空
+     */
+    onClear () {
+      const { tableConfig } = this._elProps
+      if (!tableConfig.multiple) {
+        this.$emit('input', '')
+        this.$emit('change', '')
+      } else {
+        this.$emit('input', [])
+        this.$emit('change', [])
+      }
+    },
+    /**
+     * tag删除事件
+     * @param obj
+     */
+    itemClosed (obj, index) {
+      const { tableConfig } = this._elProps
+      XEUtils.remove(this.multipleSelection, index)
+      XEUtils.remove(this.currentValue, index)
+      if (!tableConfig.multiple) {
+        this.$emit('input', '')
+        this.$emit('change', '')
+      } else {
+        this.$refs.tableRef?.toggleRowSelection(obj, false)
+        // const { value } = this.dict
+        // const result = this.currentValue.map((item) => {
+        //   return item[value]
+        // })
+        // this.$emit('input', result)
+        // this.$emit('change', result)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.option {
+  height: auto;
+  line-height: 1;
+  padding: 5px;
+  background-color: #fff;
+}
+
+</style>
+<style lang="scss">
+.popperClass {
+  height: 320px;
+}
+
+.el-select-dropdown__wrap {
+  max-height: 310px !important;
+}
+
+.tableSelector {
+  .el-icon, .el-tag__close {
+    display: none;
+  }
+}
+
+.div-input {
+  -webkit-appearance: none;
+  background-color: #FFF;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  min-height: 40px;
+  line-height: 40px;
+  outline: 0;
+  padding: 0 15px;
+  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+  min-width: 120px;
+}
+.div-disabled{
+  background-color: #F5F7FA;
+  border-color: #E4E7ED;
+  color: #C0C4CC;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+</style>
diff --git a/web/src/components/table-progress/group.js b/web/src/components/table-progress/group.js
new file mode 100644
index 0000000..978f33d
--- /dev/null
+++ b/web/src/components/table-progress/group.js
@@ -0,0 +1,12 @@
+export default {
+  // 字段类型配置，注册之后即可在crud.js中使用了
+  'table-progress': {
+    // 表单组件配置
+    form: { component: { name: 'form-input', props: { color: 'danger' } } },
+    // 行组件配置
+    component: { name: 'table-progress', props: {} },
+    // 行展示时居中
+    align: 'center'
+    // 您还可以写更多默认配置
+  }
+}
diff --git a/web/src/components/table-progress/index.js b/web/src/components/table-progress/index.js
new file mode 100644
index 0000000..808380d
--- /dev/null
+++ b/web/src/components/table-progress/index.js
@@ -0,0 +1,13 @@
+import { d2CrudPlus } from 'd2-crud-plus'
+import group from './group'
+function install (Vue) {
+  Vue.component('table-progress', () => import('./lib/table-progress'))
+  if (d2CrudPlus != null) {
+    // 注册字段类型`demo-extend`
+    d2CrudPlus.util.columnResolve.addTypes(group)
+  }
+}
+
+export default {
+  install
+}
diff --git a/web/src/components/table-progress/lib/table-progress.vue b/web/src/components/table-progress/lib/table-progress.vue
new file mode 100644
index 0000000..630e7cf
--- /dev/null
+++ b/web/src/components/table-progress/lib/table-progress.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <el-progress :percentage="currentValue" :color="setColor" :format="format"></el-progress>
+  </div>
+</template>
+<script>
+// 行展示组件进阶版
+// 本示例演示要对传入的值做一些改变，然后再展示
+export default {
+  name: 'table-progress',
+  props: {
+    // 接收row.xxx的值
+    value: {
+      type: String || Number,
+      required: false
+    }
+  },
+  data () {
+    return {
+      currentValue: ''
+    }
+  },
+  watch: {
+    value (value) {
+      // this.$emit('change', value)
+      if (this.currentValue === value) {
+        return
+      }
+      this.setValue(value)
+    }
+  },
+  created () {
+    this.setValue(this.value)
+  },
+  methods: {
+    setValue (value) {
+      // 在这里对 传入的value值做处理
+      this.currentValue = Number(this.value)
+      // 根据值的key 递归获取对应的名称
+    },
+    setColor () {
+      if (this.value <= 50) {
+        return '#F56C6C'
+      } else if (this.value > 50 && this.value < 80) {
+        return '#E6A23C'
+      } else {
+        return '#67C23A'
+      }
+    },
+    format (percentage) {
+      return `${percentage}%`
+    }
+  }
+}
+</script>