元数据组件库

元数据控件类型定义

| 控件 | 常量 | 值(string) | | --- | --- | --- | | 单行文本 | FIELD_TYPE__SINGLE_LINE | 1 | | 下拉框单选 | FIELD_TYPE__DROPDOWN_RADIO | 2 | | 复选框 | FIELD_TYPE__CHECKBOX | 3 | | 下拉复选 | FIELD_TYPE__DROPDOWN_MULTIPLE | 4 | | 日期 | FIELD_TYPE__DATE | 5 | | 开关/布尔值 | FIELD_TYPE__SWITCH | 6 | | 多行文本 | FIELD_TYPE__MULTILINE | 7 | | 层叠选择/树形选择 | FIELD_TYPE__CASCADE | 8 | | 图片 | FIELD_TYPE__IMAGE | 9 | | 文件 | FIELD_TYPE__FILE | 10 | | 精确到秒的时间选择器 | FIELD_TYPE__DATETIME | 11 |

安裝

# 安装组件库
npm i meta_components -S

引入组件库

// 方式1 
import Vue from 'vue';
import mc from 'meta_components';
import 'meta_components/lib/index.css'

Vue.use(mc, http => {
  // 挂载 baseUrl
  http.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/oa_api' : ''
  // Add a request interceptor
  http.interceptors.request.use(function (config) {
    // config.headers['token'] = Vue.$cookies.get('token')
    return config
  }, function (error) {
    // Do something with request error
    return Promise.reject(error)
  })
  
  http.interceptors.response.use(function (response) {
    return response
  }, function (error) {
    // Do something with response error
    return Promise.reject(error)
  })
})

1、元数据 表格套装  mc-data-grid-base

Attributes

| 参数 | 默认值 | 类型 | 说明 | | --- | --- | --- | --- | | metaid | (无） | string | (必须值) | | formTitle | 表单 | string | 表单标题 |

Events

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | row-command | 特殊行级操作处理 | {type: string, row: object, metaid: string } | | table-command | 特殊表级操作处理 | {type: string, metaid: string } |

示例

<!--
 * User: CHT
 * Date: 2020/3/7
 * Time: 15:48
-->
<template>
  <div>
    <mc-data-grid-base
      @row-command="rowCommand"
      @table-command="tableCommand"
      metaid="oa_employee_next_birthday">
    </mc-data-grid-base>

    <!--    <mc-data-grid-base-->
    <!--      metaid="oa_employee_entry_record">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      metaid="oa_employee_schedule_sign">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      metaid="oa_sys_post_type">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      metaid="oa_resume_invite_record">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      @row-command="rowCommand"-->
    <!--      @table-command="tableCommand"-->
    <!--      metaid="oa_resume_invite">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      @row-command="rowCommand"-->
    <!--      @table-command="tableCommand"-->
    <!--      metaid="oa_talent_bank">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      @row-command="rowCommand"-->
    <!--      @table-command="tableCommand"-->
    <!--      metaid="oa_resume_ready">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      metaid="oa_resume_pre">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      metaid="oa_employee_contract">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      metaid="oa_employee_birthday">-->
    <!--    </mc-data-grid-base>-->

    <!--    <mc-data-grid-base-->
    <!--      metaid="oa_user_info">-->
    <!--    </mc-data-grid-base>-->

  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      // 内部无法处理的特殊类别的 [行级操作] 处理函数
      rowCommand(options) {
        console.log(options)
      },
      // 内部无法处理的特殊类别的 [表级操作] 处理函数
      tableCommand(options) {
        console.log(options)
      }
    }
  }
</script>

2. mc-file/mc-image

• mc-file 上传文件
• mc-image 上传图片

Attributes

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | inject-value.sync | array | [] | (必须参数) 使用时带上 .sync  | | accept | array | 上传文件： ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.zip', '.rar', '.jpg', '.png', '.jpeg', '.gif', '.txt'] 上传图片：['image/png',  'image/jpg',  'image/jpeg'] | 文件类型限制(参考input type=file 时 accept) | | max-size | number | 1024 * 1024 * 5 | 文件大小限制 | | number | number | 9 | 文件数量限制 | | readonly | boolean | false | 是否只读 |

Events

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | change | 文件上传成功/删除成功 后回调 | (无) |

示例

<!--
 * User: CHT
 * Date: 2020/3/5
 * Time: 13:59
-->
<template>
  <div>
    <br>
    <mc-file
      :readonly="false"
      :number="9"
      :maxSize="1024 * 1024 * 3"
      :inject-value.sync="files1"
      :acceptList="['.zip']">
    </mc-file>
    <br>
    <mc-file
      @change="files2Change"
      :inject-value.sync="files2">
    </mc-file>
    <br>
    <mc-image
      :readonly="false"
      :number="9"
      :maxSize="1024 * 1024 * 3"
      :acceptList="['image/png']"
      :inject-value.sync="images1">
    </mc-image>
    <mc-image
      @change="image2Change"
      :inject-value.sync="images2">
    </mc-image>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        files1: [],
        files2: [
          'https://trainpics.weiye360.cn/5c276da756824a64e47b7925bccec00c.jpg'
        ],
        images1: [
          'https://trainpics.weiye360.cn/5c276da756824a64e47b7925bccec00c.jpg'
        ],
        images2: []

      }
    },
    methods: {
      files2Change() {
        console.log(this.files2)
      },
      image2Change() {
        console.log(this.images2)
      }
    }
  }
</script>

3. mc-data-grid

• 元数据表格
• 包含搜索
• 包含表级操作按钮

Attributes

| 参数 | 默认值 | 类型 | 说明 | | --- | --- | --- | --- | | metaid | (无） | string | (必须值) |

Events

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | row-command | 特殊行级操作处理 | {type: string, row: object, metaid: string } | | table-command | 特殊表级操作处理 | {type: string, metaid: string } | | handler | 表级操作："add"行级操作："modify"、"view"这三种操作会触发该方法 | {metaid: string, operation: string, rowId?: string}// "modify"、"view"  时存在 rowId |

示例：

• mc-data-grid-base 实现源码
• 包含 mc-data-grid 、 mc-meta-form

<!--
 * User: CHT
 * Date: 2020/4/13
 * Time: 16:55
-->
<template>
  <div class="mc-date-grid-base__container">
    <mc-data-grid
      ref="dataGrid"
      :metaid="metaid"
      @row-command="rowCommand"
      @table-command="tableCommand"
      @handler="handler">
    </mc-data-grid>
    <el-drawer
      :visible.sync="drawerConf.visible"
      size="800px"
      :wrapper-closable="false"
      :title="formTitle">
      <mc-meta-form
        v-if="drawerConf.visible"
        ref="metaForm"
        size="medium"
        :label-width="120"
        :span="12"
        :metaid="metaid"
        :rowId="drawerConf.rowId"
        :operation="drawerConf.operation">
        <template v-slot="{form}">
          <el-col
            class="mc-date-grid-base__container-handler"
            :span="24">
            <el-button
              v-if="form.operation !== OPERATION_TYPE__VIEW"
              @click="metaFormSubmit"
              type="primary">
              提交
            </el-button>
            <el-button
              v-if="form.operation === OPERATION_TYPE__ADD"
              @click="metaFormReset">
              重置
            </el-button>
          </el-col>
        </template>
      </mc-meta-form>
    </el-drawer>
  </div>
</template>

<script>
  import mcDataGrid from './table'
  import {
    OPERATION_TYPE__ADD,
    OPERATION_TYPE__MODIFY,
    OPERATION_TYPE__VIEW,
    RESPONSE_CODE__SUCCESS
  } from '../types'
  import {apiMetaFormSubmit} from '../api'

  export default {
    props: {
      metaid: {
        type: String,
        default: '',
        required: true
      },
      formTitle: {
        type: String,
        default: '表单'
      }
    },
    data() {
      return {
        drawerConf: {
          visible: false,
          rowId: '',
          operation: '',
          metaid: '',
          reset() {
            this.visible = false
            this.rowId = ''
            this.operation = ''
            this.metaid = ''
          }
        },
        OPERATION_TYPE__ADD,
        OPERATION_TYPE__MODIFY,
        OPERATION_TYPE__VIEW
      }
    },
    components: {
      mcDataGrid
    },
    methods: {
      handler({metaid, operation, rowId = ''}) {
        Object.assign(this.drawerConf, {
          metaid,
          operation,
          rowId,
          visible: true
        })
      },
      metaFormSubmit() {
        this.$refs.metaForm.loading = true
        this.$refs.metaForm.validate()
          .then(data => {
            return apiMetaFormSubmit({
              metaid: this.metaid,
              operation: this.drawerConf.operation,
              data
            })
          })
          .then(result=> {
            if(result.state === RESPONSE_CODE__SUCCESS) {
              this.$message.success('添加成功!')
              this.drawerConf.reset()
              this.$refs.dataGrid.resetSearch()
            }
          })
          .catch(err => {
            console.error(err)
          })
          .finally(()=> {
            this.$refs.metaForm.loading = false
          })
      },
      metaFormReset() {
        this.$refs.metaForm.reset()
      },
      rowCommand(options) {
        this.$emit('row-command', options)
      },
      tableCommand(options) {
        this.$emit('table-command', options)
      }
    }
  }
</script>