@sker/ui

> TODO: description

Usage no npm install needed!

<script type="module">
  import skerUi from 'https://cdn.skypack.dev/@sker/ui';
</script>

README

npm install @scker/ui

EntityComponent

demo

<template>
  <EntityComponent
    :type="type"
    @saveAdd="saveAdd"
    @saveEdit="saveEdit"
    @upload="upload"
    @downloadFind="downloadFind"
    @downloadSelect="downloadSelect"
    @downloadTemplate="downloadTemplate"
    @deleteOne="deleteOne"
    @deleteSelect="deleteSelect"
    @search="search"
  ></EntityComponent>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { EntityComponent } from "@sker/ui";
import { User } from "./sdk/user";
import { Department } from "./sdk/department";

const list = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
  { id: 9 },
  { id: 10 },
  { id: 11 },
  { id: 12 },
  { id: 13 },
  { id: 14 },
  { id: 15 },
  { id: 16 },
  { id: 17 },
  { id: 18 },
  { id: 19 },
  { id: 20 },
  { id: 21 },
  { id: 22 },
  { id: 23 },
  { id: 24 },
  { id: 25 },
  { id: 26 },
  { id: 27 },
  { id: 28 },
  { id: 29 },
  { id: 30 },
];

export default defineComponent({
  components: {
    EntityComponent,
  },
  setup() {
    const saveAdd = () => {
      console.log(`saveAdd`);
    };
    const saveEdit = () => {
      console.log(`saveEdit`);
    };
    const upload = () => {
      console.log(`upload`);
    };
    const downloadFind = () => {
      console.log(`downloadFind`);
    };
    const downloadSelect = () => {
      console.log(`downloadSelect`);
    };
    const downloadTemplate = () => {
      console.log(`downloadTemplate`);
    };
    const deleteOne = () => {
      console.log(`deleteOne`);
    };
    const deleteSelect = (ids: number[]) => {
      console.log(`deleteSelect`, ids);
    };
    const search = (
      where: any,
      page: number,
      psize: number,
      setList: Function,
      setCount: Function
    ) => {
      const allList = [...list];
      setList(allList.splice((page - 1) * psize, psize));
      setCount(list.length);
    };
    onMounted(() => {
      const departmentOnMounted = Reflect.get(Department, "onMounted");
      departmentOnMounted();
    });
    return {
      type: User,
      saveAdd,
      saveEdit,
      upload,
      downloadFind,
      downloadSelect,
      downloadTemplate,
      deleteOne,
      deleteSelect,
      search,
    };
  },
});
</script>

import { Schema } from "@sker/core";
import { ref, onMounted } from "vue";
export class Department {
  @Schema({
    label: "部门编号",
    showInTable: true,
    tableRender: (table: any) => {
      return <el-table-column></el-table-column>;
    },
  })
  id: number;
  /**
   *部门名称
   *
   * @type {string}
   * @memberof Department
   */
  @Schema({
    label: "部门名称",
    showInTable: true,
    showInAdd: true,
    showInEdit: true,
    showInSearch: true,
  })
  title: string;

  /**
   *全局函数
   *
   * @static
   * @memberof Department
   */
  static _allDepartments = ref<Department[]>([]);
  static get allDepartment() {
    return Department._allDepartments.value;
  }
  static set allDepartment(val: Department[]) {
    Department._allDepartments.value = val;
  }
  static async findAllDepartment(title?: string): Promise<Department[]> {
    return [
      { id: 1, title: "交警支队" },
      { id: 2, title: "山羊分局" },
    ];
  }
  static async onMounted() {
    Department.allDepartment = await Department.findAllDepartment();
  }
  static getDepartment(id: number): Department {
    return Department.allDepartment.find((it) => it.id === id) || ({} as any);
  }
}

import { EmitFn, Schema } from "@sker/core";
import { Entity } from "@sker/ui";
import { Department } from "./department";

export class User extends Entity {
  @Schema({
    label: "用户编号",
    showInTable: true,
    tableRender: (instance: any) => {
      return <span>{instance.id}</span>;
    },
    detailRender: (that: User) => {
      return <span>{that.id}</span>;
    },
  })
  id: number;
  /**
   * @Ref()
   *  可变参数 @sker/ui 中实现，可以让vue监控值得变化，从而更新到dom
   * @Column()
   *  定义数据库结构使用，说明是数据库的字段
   * @type {string}
   * @memberof User
   */
  @Schema({
    label: "姓名",
    displayOrder: 1,
    showInTable: true,
    showInEdit: true,
    showInAdd: true,
    showInSearch: true,
    formRender: (that: User) => {
      return (
        <el-input
          label="姓名"
          placeholder="请输入姓名"
          required={true}
          modelValue={that.realname}
          type="text"
        ></el-input>
      );
    },
  })
  realname: string;
  /**
   * 用户邮箱
   * @IsEmail()
   * 参数校验，一般在添加表单时使用，用来做参数校验
   * @type {string}
   * @memberof User
   */
  @Schema({
    label: "邮箱",
    displayOrder: 2,
    showInTable: true,
    showInEdit: true,
    showInAdd: true,
    showInSearch: true,
    formRender: (that: User) => {
      return (
        <el-input
          label="邮箱"
          placeholder="请输入邮箱"
          modelValue={that.email}
          type="text"
        ></el-input>
      );
    },
  })
  email: string;

  @Schema({
    label: "组织部门",
    displayOrder: 3,
    showInTable: true,
    showInEdit: true,
    showInAdd: true,
    showInSearch: true,
    detailRender: (that: User) => {
      return (
        <el-tag>{Department.getDepartment(that.departmentId)!.title}</el-tag>
      );
    },
    formRender: (user: User) => {
      return (
        <el-select modelValue={user.departmentId} placeholder="请选择部门">
          {Department.allDepartment.map((department) => {
            return (
              <el-option
                label={department.title}
                value={department.id}
              ></el-option>
            );
          })}
        </el-select>
      );
    },
    tableRender: (instance: any, emit: EmitFn) => {
      return (
        <el-tag disable-transitions>
          {Department.getDepartment(instance.departmentId).title}
        </el-tag>
      );
    },
  })
  departmentId: number;

  @Schema({
    label: "用户名",
    displayOrder: 4,
    showInTable: true,
    showInEdit: true,
    showInAdd: true,
    showInSearch: true,
    formRender: (that: User) => {
      return (
        <el-input
          label="用户名"
          placeholder="请输入用户名"
          modelValue={that.username}
          type="text"
        ></el-input>
      );
    },
  })
  username: string;

  @Schema({
    label: "头像",
    displayOrder: 4,
    showInTable: true,
    showInEdit: true,
    showInAdd: true,
    tableRender: (instance: any) => (
      <el-avatar src={instance.avatar}></el-avatar>
    ),
    formRender: (row: User) => {
      return <i class="el-icon-plus avatar-uploader-icon"></i>;
    },
  })
  avatar: string;

  @Schema({
    label: "用户密码",
    displayOrder: 5,
    showInTable: true,
    showInAdd: true,
    formRender: (that: User) => {
      return (
        <el-input
          label="用户密码"
          placeholder="请输入用户密码"
          modelValue={that.password}
          type="password"
        ></el-input>
      );
    },
  })
  password: string;

  @Schema({
    label: "创建日期",
    showInTable: true,
    displayOrder: 5,
  })
  createDate: Date;

  @Schema({
    label: "更新日期",
    showInTable: false,
    displayOrder: 5,
  })
  updateDate: Date;

  constructor(obj: any = {}) {
    super();
    Object.keys(obj).map((key) => {
      Reflect.set(this, key, Reflect.get(obj, key));
    });
  }

  static title: string = `用户`;
}

EntityComponent Attributes

参数 说明 类型 可选值 默认值
list --- --- --- ---
count --- --- --- ---

EntityComponent Events

事件 说明 参数
upload 上传 ---
downloadFind 下载找到的 ---
downloadSelect 下载选中的 ---
deleteSelect 删除选中 ---
deleteOne 删除一条 ---
downloadTemplate 下载模板 ---
saveAdd 新增保存(点击新增弹框保存按钮时触发) instance
saveEdit 编辑保存(点击编辑弹框保存按钮时触发) id,instnace