bf-admin-standard 標準化控件使用指南

時間 2019-11-16

標籤 admin standard 標準化控件使用指南简体版

原文原文鏈接

基礎表格

傳的參數bash

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
}
複製代碼

用法ide

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
    }
  },
複製代碼

用法ui

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'
         }
       }
     },
複製代碼