bf-admin-standard 标准化控件使用指南

基础表格

传的参数

tableSchema: Array, // 表格参数
tableApi: Function, // 表格接口
tableData: Array, // 静态的表格数据
extra: Object, // 比如表格上方或者下方的添加数据的按钮
extraQuery: Object, // 额外的查询参数
tableLayout: String, // 暂时仅支持auto ，也就是不会为每一列固定width
showPagination: { // 是否显示分页
  type: Boolean,
  default: true
},
highlightCurrentRow: { // 是否高亮
  type: Boolean,
  default: false
},
pageSize: { // 每页显示多少条
  type: Number,
  required: false,
  default: 5
},
showHeader: { // 是否显示表头
  type: Boolean,
  default: true
}

用法

table: {
        tableSchema: [
          {
            name: 'name',
            title: '假期名称'
          },
          { name: 'unit', title: '请假单位' },
          { name: 'account_form', title: '计算请假时长方式' },
          { name: 'provide_rule', title: '余额规则' },
          {
            name: 'operate',
            title: '操作',
            type: 'operate',
            width: 0.2,
            content: (scope, tableData) => <div><el-button
              type='text'
              onclick={() => { this.handleUpdateHolidayTableData(scope.$index, tableData) }}>编辑</el-button><el-button
              type='text'
              onclick={() => { this.handleRemoveHolidayTableData(scope.$index, tableData) }}>删除</el-button></div>
          }
        ],
        showPagination: false,
        tableApi: getAttendanceHoliday,
        extra: { pos: 'top', content: () => <el-button type='primary' onclick={this.addAttendanceHoliday}>+新增加班规则</el-button> }
      }

基础form

  props: {
    formSchema: Object, // 定义的表单格式化数据
    layout: String, // 定义的格式 header 这个是表单位于表格头部的内联样式
    showDialogFooter: { // 对话框里的话 对话框底部的确认按钮被表单的确认按钮替换
      type: Boolean,
      default: false
    }
  },

用法

formSchema: {
         code: {
           title: '编码',
           type: 'input',
           rules: [
             {
               type: 'string', required: true, message: '请输入编码', trigger: 'change'
             }
           ]
         },
         Holiday_name: {
           title: '名称',
           type: 'input',
           rules: [
             {
               type: 'string', required: true, message: '请输入名称', trigger: 'change'
             }
           ]
         },
         start_time: {
           title: '上班时间',
           type: 'select',
           selectData: [
             { label: 'aaa', value: 11 }
           ],
           rules: [
             {
               type: 'string', required: true, message: '请输入编码', trigger: 'change'
             }
           ]
         },
         end_time: {
           title: '下班时间',
           type: 'input',
           rules: [
             {
               type: 'string', required: true, message: '请输入下班时间', trigger: 'change'
             }
           ]
         },
         work_hours: {
           title: '合计工作时长',
           type: 'input',
           rules: [
             {
               type: 'string', required: true, message: '请输入合计工作时长', trigger: 'change'
             }
           ]
         },
         yshx: {
           title: '延时还休',
           type: 'checkbox'
         }
       }
     },

支持input，date-picker，complex-tableSingleCheckbox（就是选择表格式的单选框），checkbox，upload-drag（上传，拖曳），select（单选）