srbt-ui v1.0.5

说明

将 el-table 与 el-page 封装在一起， 减少重复代码的重复使用

使用

  npm i -D srbt-ui
  import Vue from 'vue'
  import SrbtUi from 'srbt-ui'
  Vue.use(SrbtUi)

<template>
  <div class="user-container">
    <el-button type="primary" @click="openDialog">打开全屏dialog</el-button>
    <full-screen-dialog ref="userDetailDialog">
      <el-form
        ref="userAddForm"
        :model="searchForm"
        :rules="rules"
        status-icon
        label-width="150px"
      >
        <el-form-item label="工号" prop="userNo">
          <el-input v-model="searchForm.userNo" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ensure">确 认</el-button>
        </el-form-item>
      </el-form>
    </full-screen-dialog>
    <div>
      <el-form :model="searchForm" :inline="true">
        <el-form-item>
          <el-button type="primary" @click="doSearch">搜 索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbars">
      <el-button type="primary" class="item" @click="handleBatchEdit">
        批量编辑
      </el-button>
    </div>
    <data-table
      ref="dataTable"
      :columns="columns"
      :query="query"
      :type="`index`"
      :check="handleDataChecked"
    >
      <template slot="userNoRender" slot-scope="{ scope }">
        <el-button type="text">{{ scope.row.userNo }}</el-button>
      </template>
      <template slot="operate" slot-scope="{ scope }">
        <el-button type="text" class="item" @click="handleEdit(scope.row.id)">
          编辑
        </el-button>
        <el-button type="text" @click="handleDelete(scope.row.id)">
          删除
        </el-button>
      </template>
    </data-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        userNo: '',
        userName: '',
      },
      rules: {
        userNo: [
          {
            required: true,
            message: '工号不能为空',
            trigger: 'blur',
          },
        ],
      },
      columns: [
        {
          prop: 'userNo',
          label: '工号',
          width: '160',
          template: true,
        },
        {
          prop: 'userName',
          label: '姓名',
          width: '220',
          overflow: true,
        },
      ],
      checkedKeys: [],
    }
  },
  methods: {
    handleBatchEdit() {
      alert(this.checkedKeys)
    },
    handleDataChecked(data) {
      const arr = []
      for (const item of data) {
        if (item.id) {
          arr.push(item.id)
        }
      }
      this.checkedKeys = arr
    },
    handleEdit(id) {
      alert(id)
    },
    handleDelete(id) {
      alert(id)
    },
    openDialog() {
      this.$refs.userDetailDialog.show()
    },
    doSearch() {
      this.$refs.dataTable.doSearch()
    },
    query() {
      return Promise.resolve({
        code: 0,
        msg: '',
        data: {
          list: [
            {
              id: 1,
              userNo: '123123',
              userName: '张三',
            },
            {
              id: 2,
              userNo: '123124',
              userName: '李四',
            },
          ],
          total: 100,
        },
      })
    },
    ensure() {
      const self = this
      self.$refs.userAddForm.validate((valid) => {
        if (valid) {
          self.$success(self.searchForm.userNo)
          self.$refs.userAddForm.resetFields()
          self.$refs.userDetailDialog.close()
        }
      })
    },
  },
}
</script>

<style scoped>
</style>