构建版本

index.js

+/* Automatically generated by './build/bin/build-entry.js' */
+import CyTable from './packages/table/index.js';
+import CyLayout from './packages/layout/index.js';
+import CyUpload from './packages/form/upload/index.js';
+
+const components = [
+  CyTable,
+  CyLayout,
+  CyUpload,
+];
+
+const install = function(Vue, opts = {}) {
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
+
+};
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  version: '1.0.0',
+  install,
+};

package.json

+{
+  "name": "cy-admin-ui",
+  "version": "1.0.0",
+  "description": "菜芽软件管理端公共组件库",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@cy-dev.com:webpack/cy-admin-ui.git"
+  },
+  "keywords": [
+    "菜芽软件公共组件库"
+  ],
+  "author": "毛线",
+  "license": "ISC"
+}

packages/form/upload/index.js

+import Upload from './src/upload-img-list';
+
+/* istanbul ignore next */
+Upload.install = function(Vue) {
+  Vue.component(Upload.name, Upload);
+};
+
+export default Upload;

packages/form/upload/src/upload-file.vue

+<template>
+  <div>
+    文件上传
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    
+  },
+}
+</script>

packages/form/upload/src/upload-img-list.vue

+<template>
+  <div class="upload-imags-list">
+    <div v-for="(item, index) in list" :key="index" class="avatar-uploader img">
+      <div class="img-box" >
+        <i v-if="edit" class="el-icon-close delete-icon" title="删除" @click.stop="list.splice(index, 1)"/>
+        <UploadImg
+          v-model="list[index]"
+          :multiple="false"
+          :show-del="false"
+          :tips="tips"
+          :source="source"
+          :size="size"
+          class="uploadImg"/>
+      </div>
+    </div>
+    <div v-if="list.length < limit && edit" class="avatar-uploader" >
+      <UploadImg
+        ref="upload"
+        :label="label"
+        :multiple="true"
+        :show="false"
+        :tips="tips"
+        :source="source"
+        :size="size"
+        class="uploadImg"
+        @on-success="(e) => handler().upload(e)"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadImg from './upload-img'
+
+export default{
+  name: 'CyUpload',
+  components: {
+    UploadImg,
+  },
+  props: {
+    label: {
+      type: String,
+      default: '上传',
+    },
+    limit: { // 图片上传数量限制，默认10
+      type: Number,
+      default: 1,
+    },
+    value: {
+      type: null,
+      default: null,
+    },
+    edit: { // 是否可编辑
+      type: Boolean,
+      default: true,
+    },
+    // 是否使用图片库组件
+    dialog: {
+      type: Boolean,
+      default: true,
+    },
+    // 图片列表数据结构，json，array，string
+    dataType: {
+      type: String,
+      default: 'string',
+    },
+    tips: {
+      type: String,
+      default: '',
+    },
+    source: { // 上传服务器
+      type: String,
+      default: 'local', // local：本站点，qiniu：七牛云，oss：阿里云，tencent：腾讯云
+    },
+    // 组件大小
+    size: {
+      type: Number,
+      default: 100,
+    },
+  },
+  data() {
+    return {
+      dialog_visible: false,
+      qiniuToken: '',
+      list: [], // 文件列表
+      index: '',
+    }
+  },
+  watch: {
+    value(value) {
+      this.list = this.init().data(value)
+    },
+    list(value) {
+      const data = this.init().value(value)
+      this.$emit('input', data)
+    },
+  },
+  created() {
+    this.list = this.init().data(this.value)
+  },
+  methods: {
+    init() {
+      return {
+        // 初始化返回数据
+        value: (list) => {
+          let value = ''
+          const { dataType } = this
+          switch(dataType) {
+            case 'string': // 字符串类型以逗号隔开
+              value = list.join(',')
+              break
+            case 'json':
+              value = JSON.stringify(list)
+              break
+            case 'array':
+              value = list
+              break
+          }
+          return value
+        },
+        // 初始化数据
+        data: (value) => {
+          let data = ''
+          const { dataType } = this
+          switch(dataType) {
+            case 'string': // 字符串类型以逗号隔开
+              data = value ? value.split(',') : []
+              break
+            case 'json':
+              data = value ? JSON.parse(value) : []
+              break
+            case 'array':
+              data = value
+              break
+          }
+          data = Array.isArray(data) ? data : []
+          return data
+        },
+      }
+    },
+    handler() {
+      return {
+        upload: (key) => {
+          this.list.push(key)
+        },
+        choiceImg: (index) => {
+          if (!this.edit) {
+            return
+          }
+          this.index = index
+          this.$refs.uploadImg.show()
+        },
+        confirm: (data) => {
+          const { index, limit } = this
+          let { list } = this
+          if (index === '') {
+            list = list.concat(data)
+          } else {
+            list.splice(index, 1, data)
+          }
+          this.list = list.slice(0, limit)
+          const value = this.init().value(this.list)
+          this.$emit('input', value)
+        },
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-imags-list{
+  font-size: 0;
+  .avatar-uploader{
+    display: block;
+    display: inline-block;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    float: left;
+    .img-box{
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border-radius: 4px;
+      position: relative;
+      .delete-icon{
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 16px;
+        background: red;
+        color: white;
+        border-radius: 4px;
+        z-index: 100;
+        cursor: pointer;
+      }
+      .img{
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .avatar-uploader-icon{
+      box-sizing: border-box;
+    }
+  }
+}
+
+</style>

packages/form/upload/src/upload-img.vue

+<template>
+  <div>
+    <el-upload :show-file-list="false" :on-success="(file) => handler().imageSuccess(file)" :action="uploadDomain" :data="{ token: qiniuToken, 'X-Access-Token': token }" :before-upload="init().beforeUpload" :multiple="multiple" :headers="headers" class="avatar-uploader" >
+      <div v-if="data && show" :style="style" class="avatar">
+        <i v-if="showDel" class="el-icon-close delete-icon" title="删除" @click.stop="handler().del()"/>
+        <div :style="`background-image:url(${src})`" class="img"/>
+      </div>
+      <i v-else :style="style" class="avatar el-icon-plus avatar-uploader-icon">
+        <span class="upload-label">{{ label }}</span>
+      </i>
+    </el-upload>
+    <span class="upload-tips">{{ tips }}</span>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { mapState } from 'vuex'
+import { getToken } from '@/utils/auth' // 验权
+
+export default{
+  props: {
+    label: {
+      type: String,
+      default: '上传',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    // 组件大小(px)
+    size: {
+      type: [String, Number],
+      default: 100,
+    },
+    // 图片大小限制(kb)
+    sizeLimit: {
+      type: Number,
+      default: 3000,
+    },
+    showDel: {
+      type: Boolean,
+      default: true,
+    },
+    // 上传图片后是否显示图
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    tips: {
+      type: String,
+      default: '',
+    },
+    source: { // 上传服务器
+      type: String,
+      default: 'local', // local：本站点，qiniu：七牛云，oss：阿里云，tencent：腾讯云
+    },
+  },
+  data() {
+    return {
+      data: '',
+      qiniuToken: '',
+      imgDomain: '',
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+    }
+  },
+  computed: {
+    ...mapState({
+      ossConfig: state => state.ossConfig,
+      appConfig: state => state.appConfig,
+    }),
+    uploadDomain() {
+      const { source } = this
+      let uploadDomain = ''
+      switch(source) {
+        case 'qiniu': // 七牛云
+          break
+        case 'oss': // 阿里云
+          break
+        case 'tencent': // 腾讯云
+          break
+        default: // 默认，本地上传接口
+          uploadDomain = process.env.VUE_APP_BASE_API + "/file/upload" // 上传的图片服务器地址
+          break
+      }
+      return uploadDomain
+    },
+    src() {
+      const { data, imgDomain } = this
+      const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
+      if (reg.test(data)) {
+        return data
+      }
+      return data ? imgDomain + data : ''
+    },
+    style() {
+      const style = {
+        height: `${this.size}px`,
+        width: `${this.size}px`,
+        lineHeight: `${this.size}px`,
+      }
+      return style
+    },
+    avatarStyle() {
+      const style = {
+        lineHeight: `${this.size}px`,
+      }
+      return style
+    },
+    OssClient() {
+      const { access_key, bucket, region_id, secret } = this.ossConfig
+      if (!access_key) {
+        return ''
+      }
+      const client = new OSS({
+        region: region_id,
+        // 阿里云账号AccessKey拥有所有API的访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式访问API。
+        accessKeyId: access_key,
+        accessKeySecret: secret,
+        // stsToken: '<Your securityToken(STS)>',
+        bucket,
+      })
+      return client
+    },
+    // 大小转换
+    sizeText() {
+      const { sizeLimit } = this
+      const text = sizeLimit > 1000 ? (sizeLimit / (1024)).toFixed(2) + 'm' : sizeLimit + 'kb'
+      return text
+    },
+  },
+  watch: {
+    value() {
+      this.data = this.value
+    },
+    data() {
+      this.$emit('input', this.data)
+      this.$emit('on-success', this.data)
+    },
+  },
+  created() {
+    this.data = this.value
+    this.init().token()
+  },
+  methods: {
+    init() {
+      return {
+        // 上传前置操作
+        beforeUpload: async(file) => {
+          const { sizeText, sizeLimit, } = this
+          if (file.size > (sizeLimit * 1000)) {
+            this.$alert(`图片大小不能超过${sizeText}`)
+            return
+          }
+          if (this.uploadDomain) {
+            return true
+          }
+
+          const { name } = file
+          let path = `${dayjs().format('YYYY/MM/DD')}/${dayjs().format('YYYYMMDDHHmmss')}${Math.ceil(Math.random() * 1000000 % 1000000)}`
+          console.log('path', path)
+          path = path.replace('(', '')
+          path = path.replace(')', '')
+          path = path.replace(' ', '')
+          this.putObject(path, file)
+          // try {
+          //   // 获取七牛云token
+          //   const res = await this.$request.post('/admin/getQiniuToken')
+          //   this.qiniuToken = res.data.token
+          //   return res.data.token
+          // } catch (err) {
+          //   this.$message('请求出错')
+          //   return false
+          // }
+        },
+        token: () => {
+          const { source } = this
+          let token = ''
+          switch (source) {
+            case 'local': // 本地点上传
+              token = getToken()
+              this.token = token
+              break
+          }
+        },
+      }
+    },
+    handler() {
+      return {
+        // 图片上传成功回调
+        imageSuccess: ({ data }) => {
+          const { url } = data
+          this.data = url
+        },
+        del: () => {
+          this.data = ''
+          this.$emit('delete')
+        },
+      }
+    },
+    /**
+     * key 文件吗
+     * data 文件
+     */
+    async putObject(key, data) {
+      try {
+        console.log('file', data)
+        console.log('OssClient', this.OssClient)
+        const { OssClient } = this
+        // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
+        const result = await OssClient.put(key, data)
+        const { name } = result
+        this.data = name
+        this.$emit('on-confirm', this.data)
+      } catch (e) {
+        console.log('error', e)
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar-uploader{
+  display: block;
+  margin-bottom: 2px;
+  margin-right: 2px;
+  position: relative;
+  line-height: 0;
+  .avatar-uploader-icon{
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
+  }
+  .avatar{
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgb(241, 241, 241);
+    box-sizing: border-box;
+    &.avatar-uploader-icon{
+    }
+    .delete-icon{
+      position: absolute;
+      top: 0;
+      right: 0;
+      font-size: 16px;
+      background: red;
+      color: white;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .img{
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat;
+      width: 100%;
+      height: 100%;
+    }
+    .upload-label{
+      font-size: 14px;
+    }
+    .upload-tips{
+      display: block;
+      font-size: 12px;
+    }
+  }
+}
+</style>

packages/layout/index.js

+import Layout from './src/layout';
+
+/* istanbul ignore next */
+Layout.install = function(Vue) {
+  Vue.component(Layout.name, Layout);
+};
+
+export default Layout;

packages/layout/src/drag.vue

+<template>
+  <div class="drag" @mousedown="(event) => move(event)"/>
+</template>
+
+<script>
+export default {
+  props: {
+    lockX: { // 锁定横向拖动
+      type: Boolean,
+      default: false,
+    },
+    lockY: { // 锁定纵向拖动
+      type: Boolean,
+      default: false,
+    },
+    minX: {
+      type: Number,
+      default: 0,
+    },
+    minY: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {}
+  },
+  directives: {
+    // 指令名称
+    darg: { // 拖拽
+      inserted(el, binding, vnode) {
+        // 指令中第一个参数是当前使用指令的DOM
+        console.log(el);
+        console.log(arguments);
+        // 对DOM进行操作
+        // el.style.width = '200px';
+        // el.style.height = '200px';
+        // el.style.background = '#000';
+
+        let odiv = el;   //获取当前元素
+        odiv.onmousedown = (e) => {
+          //算出鼠标相对元素的位置
+          let disX = e.clientX - odiv.offsetLeft;
+          let disY = e.clientY - odiv.offsetTop;
+          
+          document.onmousemove = (e)=>{
+            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+            let left = e.clientX - disX;    
+            let top = e.clientY - disY;
+          
+            //绑定元素位置到positionX和positionY上面
+            this.positionX = top;
+            this.positionY = left;
+    
+            //移动当前元素
+            odiv.style.left = left + 'px';
+            // odiv.style.top = top + 'px';
+          };
+          document.onmouseup = (e) => {
+            document.onmousemove = null;
+            document.onmouseup = null;
+          }
+        };
+      }
+    }
+  },
+  methods: {
+    move(event, data) {
+      const { minX, minY } = this
+      const odiv = event.target // 获取目标元素
+
+      // 算出鼠标相对元素的位置
+      const disX = event.clientX - odiv.offsetLeft;
+      const disY = event.clientY - odiv.offsetTop;
+      let left = ''
+      let top = ''
+      document.onmousemove = (e) => { // 鼠标按下并移动的事件
+        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+        left = e.clientX - disX
+        top = e.clientY - disY
+
+        // 绑定元素位置到/>和positionY上面
+        if (left < minX) {
+          left = minX
+        }
+
+        if (top < minY) {
+          top = minY
+        }
+
+        // if (left * 1 + this.data.w * 1 >= this.boxWidth * 1) {
+        //   left = this.boxWidth * 1 * 1 - this.data.w * 1
+        // }
+
+        // if (top * 1 + this.data.h * 1 >= this.boxHeight * 1) {
+        //   top = this.boxHeight * 1 - this.data.h * 1
+        // }
+
+        // data.x = left
+        // data.y = top
+
+        // 移动当前元素
+        !this.lockX && (odiv.style.left = `${left}px`)
+        !this.lockY && (odiv.style.top = `${top}px`)
+      };
+      document.onmouseup = (e) => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        if (left !== '' && top !== '') {
+          this.$emit('on-drag', { x: left, y: top })
+        }
+        // document.onmousedown = null;
+      };
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.drag{
+}
+</style>

packages/layout/src/layout-button-group.vue

+<template>
+  <el-row :gutter="10" class="mb8">
+    <el-col v-for="(item, index) in buttonGroup" :key="index" :span="1.5">
+      <slot v-if="item.type == 'slot'" :name="item.slotName" :data="item" :index="index"/>
+      <el-button
+        v-else
+        :type="item.attr.type"
+        :plain="item.attr.plain"
+        :icon="item.attr.icon"
+        :size="size"
+        :disabled="init().disabled(item)"
+        @click="handler().clickButton(item)"
+        v-hasPermi="item.hasPermi"
+      >{{ item.label }}</el-button>
+    </el-col>
+    <right-toolbar :showSearch.sync="showSearch" @queryTable="$emit('on-search')"></right-toolbar>
+  </el-row>
+</template>
+
+<script>
+export default {
+  props: {
+    props: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    // 选中的数据
+    selection: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  },
+  watch: {
+    showSearch() {
+      this.$emit('on-show-search', this.showSearch)
+    },
+  },
+  computed: {
+    buttonGroup() {
+      const buttonGroup = this.props.length ? this.props : this.init().getDefaultButtonGroup()
+      this.init().buttonGroup(buttonGroup)
+      return buttonGroup
+    },
+  },
+  data() {
+    return {
+      size: 'mini',
+      showSearch: true,
+    }
+  },
+  methods: {
+    init() {
+      return {
+        // button: ({ type = 'btn', label = '', hasPermi = [''], attr = '' }) => {
+        //   return {
+
+        //   }
+        // },
+        // 初始化按钮组
+        buttonGroup: (buttonGroup) => {
+          buttonGroup.forEach(button => {
+            this.init().button(button)
+          })
+        },
+        // 初始化默认按钮相关参数
+        button: (button) => {
+          const { type } = button
+          let attr = {}
+          switch(type) {
+            case 'add': // 添加按钮
+              button.label = button.label ?? '新增'
+              button.hasPermi = button.hasPermi ?? ['']
+              button.click = button.click ?? (() => {
+                this.$emit('on-create')
+              })
+
+              attr = button.attr ?? {}
+              attr.type = attr.type ?? 'primary'
+              attr.plain = attr.plain ?? true
+              attr.icon = attr.icon ?? 'el-icon-plus'
+              button.attr = { ...attr }
+              break
+            case 'edit': // 编辑按钮
+              button.label = button.label ?? '修改'
+              button.hasPermi = button.hasPermi ?? ['']
+              button.disabledFlag = 'single'
+              button.click = button.click ?? (() => {
+                this.$emit('on-update')
+              })
+
+              attr = button.attr ?? {}
+              attr.type = attr.type ?? 'success'
+              attr.plain = attr.plain ?? true
+              attr.icon = attr.icon ?? 'el-icon-edit'
+              button.attr = { ...attr }
+              break
+            case 'delete': // 删除按钮
+              button.label = button.label ?? '删除'
+              button.hasPermi = button.hasPermi ?? ['']
+              button.disabledFlag = 'multiple'
+              button.click = button.click ?? (() => {
+                this.$emit('on-delete')
+              })
+
+              attr = button.attr ?? {}
+              attr.type = attr.type ?? 'danger'
+              attr.plain = attr.plain ?? true
+              attr.icon = attr.icon ?? 'el-icon-delete'
+              button.attr = { ...attr }
+              break
+            case 'export': // 导出按钮
+              button.label = button.label ?? '导出'
+              button.hasPermi = button.hasPermi ?? ['']
+              button.click = button.click ?? (() => {
+                this.$emit('on-export')
+              })
+
+              attr = button.attr ?? {}
+              attr.type = attr.type ?? 'warning'
+              attr.plain = attr.plain ?? true
+              attr.icon = attr.icon ?? 'el-icon-download'
+              button.attr = { ...attr }
+              break
+            default:
+              button.type = button.type ?? ''
+              button.label = button.label ?? ''
+              button.hasPermi = button.hasPermi ?? ['']
+
+              attr = button.attr ?? {}
+              attr.type = attr.type ?? 'primary'
+              attr.plain = attr.plain ?? true
+              attr.icon = attr.icon ?? ''
+              button.attr = { ...attr }
+              break
+          }
+          return button
+        },
+        // 默认显示的按钮类型
+        getDefaultButtonGroup: () => {
+          const buttonGroup = [
+            {
+              type: 'add',
+            },
+            {
+              type: 'edit',
+            },
+            {
+              type: 'delete',
+            },
+            {
+              type: 'export',
+            },
+          ]
+          return buttonGroup
+        },
+        disabled: (button) => {
+          const { disabledFlag } = button
+          let disabled = false
+          switch(disabledFlag) {
+            case 'single':
+              disabled = this.selection.length !== 1
+              break
+            case 'multiple':
+              disabled = !this.selection.length
+              break
+            default:
+              break
+          }
+          return disabled
+        },
+      }
+    },
+    handler() {
+      return {
+        clickButton: (item) => {
+          const { click } = item
+          if (click) {
+            click()
+          }
+        },
+      }
+    }
+  },
+}
+</script>
\ No newline at end of file

packages/layout/src/layout-query-form.vue

+<template>
+  <el-form :model="params" ref="queryForm" :inline="true" v-show="props.showSearch !== false" label-suffix=":">
+    <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label" :prop="item.field">
+      <slot v-if="item.type == 'slot'" :name="item.slotName" :data="item" :index="index"/>
+      <el-select
+        v-else-if="item.type == 'select'"
+        v-model="params[item.field]"
+        :placeholder="item.placeholder === null ? '请输入...' : item.placeholder "
+        :multiple="item.multiple"
+        clearable
+        @change="item.change"
+        @keyup.enter.native="() => handler().query()"
+      >
+        <el-option v-for="(item, index) in item.options" :key="index" :value="item.value" :label="item.label" />
+      </el-select>
+      <el-input
+        v-else
+        v-model="params[item.field]"
+        :placeholder="item.placeholder === null ? '请输入...' : item.placeholder "
+        clearable
+        @change="item.change"
+        @keyup.enter.native="() => handler().query()"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" icon="el-icon-search" @click="() => handler().query()">搜索</el-button>
+      <el-button icon="el-icon-refresh" @click="() => handler().reset()">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { getDicts } from '@/api/system/dict/data'
+export default {
+  props: {
+    props: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  dicts: [],
+  data() {
+    return {
+      params: {},
+    }
+  },
+  watch: {
+    props() {
+      this.init().params(this.props)
+    },
+  },
+  computed: {
+    formItem() {
+      const { formItem } = this.props
+      formItem.forEach(item => {
+        item.change = item.change || (() => {})
+      })
+      return formItem
+    },
+  },
+  created() {
+    this.init().params(this.props)
+  },
+  methods: {
+    init() {
+      return {
+        // 初始化参数
+        params: (props) => {
+          const params = {}
+          const { formItem } = props
+          formItem.forEach(item => {
+            const { field, value, } = item
+            params[field] = value
+            if (item.dict) {
+              const options = []
+              getDicts(item.dict).then(({ data }) => {
+                data.forEach(dict => {
+                  const option = {
+                    label: dict.dictLabel,
+                    value: dict.dictCode,
+                  }
+                  options.push(option)
+                })
+                item.options = options
+              })
+            }
+          })
+          this.params = params
+        },
+      }
+    },
+    handler() {
+      return {
+        // 搜索
+        query: () => {
+          this.$emit('on-query', this.params)
+        },
+        // 重置
+        reset: () => {
+          this.resetForm('form')
+          this.$emit('on-query', this.params)
+        },
+      }
+    },
+  },
+}
+</script>
\ No newline at end of file

packages/layout/src/layout-table.vue

+<template>
+  <cy-table v-loading="loading" :row-key="primaryKey" :list="data" :columns="columns" :height="height" @selectRow="(selection) => handler().selectionChange(selection)">
+    <template v-for="(column, index) in columns.filter(i => i.type == 'slot')" #[column.slotName]="{ data, $index }">
+      <slot :name="column.slotName" :data="data" :index="$index"/>
+    </template>
+  </cy-table>
+</template>
+
+<script>
+import request from '@/utils/request'
+export default {
+  props: {
+    primaryKey: {
+      type: String,
+      default: 'id',
+    },
+    listApi: {
+      type: null,
+      default: null,
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return {
+        }
+      }
+    },
+    params: {
+      type: Object,
+      default: () => {
+        return {
+        }
+      }
+    },
+  },
+  computed: {
+    columns() {
+      return this.props.columns
+    },
+    height() {
+      return this.props.height ?? '100%'
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      data: [],
+      total: 0,
+    }
+  },
+  created() {
+    this.network().getData()
+  },
+  methods: {
+    network() {
+      return {
+        getData: () => {
+          const { params, props, listApi } = this
+          let { api, method, callback, } = listApi
+          method = method ? method : 'post'
+          
+          if (!callback) {
+            callback = (response) => {
+              this.data = response.rows
+              this.total = response.total
+              this.$set(this.props, 'total', response.total)
+              // this.loading = false
+              this.$nextTick(() => {
+                this.loading = false
+              })
+            }
+          }
+
+          switch(typeof api) {
+            case 'function':
+              this.loading = true
+              api(params).then((response) => callback(response, this))
+              break
+            case 'string':
+              switch(method) {
+                case 'get':
+                  request({
+                    url: api,
+                    params,
+                    method: 'get',
+                  }).then((response) => callback(response, this))
+                  break
+                case 'post':
+                  request({
+                    url: api,
+                    data: params,
+                    method: 'post',
+                  }).then((response) => callback(response, this))
+                  break
+              }
+              break
+          }
+        },
+      }
+    },
+    handler() {
+      return {
+        selectionChange: (selection) => {
+          this.$emit('selectRow', selection)
+        },
+      }
+    },
+  },
+}
+</script>

packages/table/index.js

+import Table from './src/main';
+
+/* istanbul ignore next */
+Table.install = function(Vue) {
+  Vue.component(Table.name, Table);
+};
+
+export default Table;

packages/table/src/main.vue

+<template>
+  <el-table
+    ref="table"
+    :data="tableData"
+    :height="height"
+    :max-height="maxHeight"
+    :row-class-name="(row, rowIndex) => handler().rowclass(row, rowIndex)"
+    :tree-props="{children: 'children'}"
+    :row-key="rowKey"
+    default-expand-all
+    @select="(select, row) => handler().select(select, row)"
+    @row-click="(row, column, event) => handler().rowClick(row, column, event)"
+    @selection-change="(value) => handler().selectionChange(value)">
+    <template v-for="item in tableColumns">
+      <template v-if="!(item.show === 0 || item.show === false)">
+        <el-table-column
+          v-if="!item.header && item.type === 'slot'"
+          :key="item.key"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width ? item.width : ''"
+          :min-width="item.minWidth ? item.minWidth : ''"
+          :align="item.align"
+          :show-overflow-tooltip="(showOverflowTooltip || item['show-overflow-tooltip']) && item['show-overflow-tooltip'] !== false">
+          <!-- 作用域 -->
+          <template slot-scope="{ row, $index }">
+            <slot :name="item.slotName" :data="row" :index="$index"/>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else-if="item.header && item.type === 'slot'"
+          :key="item.key"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width ? item.width : ''"
+          :min-width="item.minWidth ? item.minWidth : ''"
+          :align="item.align"
+          :render-header="(h, {column}) => handler().renderHeader(h,{column},item)"
+          :show-overflow-tooltip="(showOverflowTooltip || item['show-overflow-tooltip']) && item['show-overflow-tooltip'] !== false">
+          <!-- 作用域 -->
+          <template slot-scope="{ row, $index }">
+            <slot :name="item.slotName" :data="row" :index="$index"/>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else-if="item.type==='selection'"
+          :key="item.key"
+          :prop="item.prop"
+          :width="'55px'"
+          :label="item.label"
+          :align="'center'"
+          type="selection"/>
+        <el-table-column
+          v-else
+          :key="item.key"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align"
+          :min-width="item.minWidth ? item.minWidth : ''"
+          :show-overflow-tooltip="(showOverflowTooltip || item['show-overflow-tooltip']) && item['show-overflow-tooltip'] !== false">
+          <template slot-scope="{ row }">
+            <span>{{ row[item.prop] !== '' || row[item.prop] !== null ? row[item.prop] : '/' }}</span>
+          </template>
+        </el-table-column>
+      </template>
+    </template>
+  </el-table>
+</template>
+
+<script>
+
+export default {
+  name: 'CyTable',
+  props: {
+    rowKey: {
+      type: String,
+      default: 'id',
+    },
+    data: { // 表头和表格数据
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    columns: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    height: {
+      type: null,
+      default: null,
+    },
+    maxHeight: {
+      type: null,
+      default: null,
+    },
+    showOverflowTooltip: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      init: true,
+      selectData: [], // 选中的数据
+    }
+  },
+  computed: {
+    tableColumns() {
+      return this.columns.length ? this.columns : this.data.columns
+    },
+    tableData() {
+      const tableData = this.list.length ? this.list : this.data.tableList
+      return tableData
+    },
+    tableHeight() {
+      const height = this.height.replace('px', '')
+      return height
+    },
+  },
+  watch: {
+    data(val) {
+    },
+    height() {
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    // 设置选中的数据
+    setSelectRows(rows = []) {
+      const { rowKey } = this
+      const ids = rows.map(item => item[rowKey])
+      const { tableData } = this
+      if (!tableData) {
+        return
+      }
+      this.init = false
+      tableData.forEach((row, index) => {
+        if (ids.includes(row[rowKey])) {
+          this.$refs.table.toggleRowSelection(row)
+        }
+      })
+      this.init = true
+    },
+    handler() {
+      return {
+        // 复选框
+        select: (select, row) => {
+          if (this.radio) {
+            this.$refs.table.clearSelection()
+            this.$nextTick(() => {
+              this.$refs.table.toggleRowSelection(row)
+            })
+          }
+        },
+        // 行点击回调
+        rowClick: (row, column, event) => {
+          if (this.radio) {
+            this.$refs.table.clearSelection()
+          }
+          this.$refs.table.toggleRowSelection(row)
+        },
+        selectionChange: (select) => {
+          this.selectData = select
+          if (this.init) {
+            this.$emit('selectRow', this.selectData)
+            this.$emit('select-row', this.selectData)
+          }
+        },
+        rowclass: ({ row, rowIndex }) => {
+          if (row.time) {
+            return 'deleteFlag'
+          } else {
+            return ''
+          }
+        },
+        // 自定义表头--提示
+        renderHeader: (h, { column }, item) => {
+          return (
+            <div>{column.label}
+              <el-tooltip class='item' effect={'dark'} content={item.text} placement={'top'}>
+                <i class='el-icon-warning-outline'>
+                </i>
+              </el-tooltip>
+            </div>
+          )
+        },
+      }
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-table th.el-table__cell > .cell{
+  padding-left: 14px;
+  padding-right: 14px;
+}
+</style>