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

悠悠 2022-01-20 00:37 228阅读 0赞

#### 基础表格 ####

传的参数

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（单选）