tarsier-vue-tools用户管理组件

2021-07-09 by uino 27 tarsier-vue 研发

使用


// *.vue:
<template>
  <User :saveUrl="saveUrl" @edit-self="editSelf" />
</template>

<script>
  import { User } from  'uino-tarsier-vue-lib';

  export default {
    components: {
      User
    },
    data(){
      return {
        saveUrl:'url path'
      }
    },
    methods:{
      editSelf(e){
        console.log(e)
      }
    }
  }
</script>
  

props 地址配置说明

  • preUrl : 前缀地址 默认值:/tarsier-comm/permission
  • saveUrl : 新增/修改用户信息保存地址 默认值:/user/saveOrUpdate
  • queryUrl : 获取用户列表 默认值:/user/queryInfoPage
  • resetPwdUrl : 重置密码 默认值:/user/resetUserPasswdByAdmin
  • deleteByIdUrl : 删除用户 默认值:/user/removeUserById
  • queryRoleListUrl : 获取角色列表 默认值:/role/getRolePageByQuery
  • importUrl : 导入地址 默认值:/user/importUserExcel
  • exportUrl : 导出地址 默认值:/user/exportUserExcel
  • tplUrl : 模板地址 默认值:/user/downloadUserExcelTpl
  • slots-datas: 扩展配置数据(slot)

自定义事件 配置说明

  • add-user : 添加用户 参数,用户信息
  • edit-user : 修改用户 参数,用户信息
  • edit-self : 修改当前登录用户 参数,用户信息

slot 扩展 使用说明


// *.vue:
<template>
  <User :slots-datas="slotsDatas">
    <template v-slot:trade>
      <Select
        v-model="slotsDatas.trade.value"
        clearable
        filterable
        filter-only-label
        placeholder="slot扩展功能"
      >
        <Option v-for="n in 5" :key="n" :value="n">选项 {{ n }}</Option>
      </Select>
    </template>
  </User>
</template>

<script>
  import { User } from  'uino-tarsier-vue-lib';

  export default {
    components: {
      User
    },
    data(){
      return {
        slotsDatas: {
          trade: { // slot name
            name: '扩展项', //显示Lable
            value: '',  // 输入值
            validate: []  // 校验规则
          }
        }
      }
    }
  }
</script>
  

扩展说明

  • slotsDataskey 值需要和 slot name 一一对应
  • slotv-model 的值,必须使用 slotsDatas[name].value 否则保存数据时保存不上
  • slotsDatas 中的 validate 参考 form组件 中的 validate 进行设置