介绍

page—model是一个依赖于element-plus(vue@3)的后台管理页面组件，组件通过config配置驱动渲染。

如何引入

// page-model.ts
// 可以导出注册方法在main中进行注册

import { App } from 'vue'
// 引入组件样式
import '@juzhenfe/page-model/dist/index.min.css'
// 引入组件
import PageModel from '@juzhenfe/page-model'
// 引入组件请求实例
import { processdRequest } from '@/utils/request'

// 全局注册组件
export default {
  install(app: App) {
    app.use(PageModel, {
      request: processdRequest
    })
  }
}

// @/utils/request
import { createRequest } from '@juzhenfe/request'

// 构建请求实例
export const processdRequest = createRequest({
  // 请求基础地址
  baseURL: baseURL,
  // 授权头模式 JWT | NORMAL(参数携带)
  auth: 'JWT',
  arrayFormat: 'repeat',
  // 获取token
  getToken() {
    return tokenStorage.get() ?? ''
  },
  // 如何判断请求是成功的
  resolveJudge(response) {
    return successChain.passRequest(response)
  }
}, {
  process: true
}, {
  timeout: 3 * 60 * 1000
})

如何使用

<script setup lang="tsx">
import { ref } from "vue";
import { defineConfig } from "@juzhenfe/page-model";
import APIS from "@/constants/apis";

/**
 * pageModel组件实例
 */
const pageModelRef = ref<any>();

/**
 * 当前选中的数据
 */
let currentSelections: any[] = [];

const config = defineConfig<WorkTypeModel, any>({
  url: APIS.STATION_URL,
  delKey: "id",
  reflect: true,
  isAutoAddButton: false,
  getDataCallback(data) {
    return data;
  },
  searchForm: {
    els: [
      {
        eType: "el-input",
        prop: "name",
        label: "名称",
        props: { placeholder: "名称", clearable: true },
      },
    ],
  },
  table: {
    // el-table属性，参考https://element-plus.gitee.io/zh-CN/component/table.html#table-属性
    props: {
      // 开启斑马纹
      stripe: true,
      // 开启边框
      border: true,
    },
    // el-table事件，参考https://element-plus.gitee.io/zh-CN/component/table.html#table-事件
    events: {
      selectionChange(selections) {
        currentSelections = selections;
      },
    },

    // 是否多选按钮无依赖存活 注：通常开启多选时才会渲染多选按钮数据
    selectableButtonLiveAlone: true,
    // 多选按钮配置
    selectableButtons: [
      {
        text: "新增",
        event: "add",
        props: {
          type: "primary",
        },
      },
    ],
    // 操作栏配置
    operate: {
      width: 120,
      props: {
        fixed: "right",
      },
      els: [
        {
          text: "编辑",
          isEdit: true,
          props: {
            type: "primary",
            link: true,
          },
        },
        {
          text: "删除",
          isDel: true,
          props: {
            type: "primary",
            link: true,
          },
        },
      ],
    },
    els: [
      { label: "名称", prop: "name", minWidth: 100 },
      { label: "创建时间", prop: "createTime", minWidth: 100 },
    ],
  },
  form: {
    // 表单必填字段列表
    required: ["name"],
    // 弹窗模式dialog、全页面模式fullpage
    mode: "dialog",
    dialogProps: {
      width: "500px",
    },
    // 表单el-form的props，参考https://element-plus.gitee.io/zh-CN/component/form.html#form-属性
    props: {
      labelWidth: "100px",
    },
    // 新增表单时的初始化数据，会被bindData捕获到
    initialData: {},
    // 表单组件绑定数据前的处理方法
    async bindData(formData) {
      return formData;
    },
    // 表单组件提交数据前的处理方法
    async beforeSubmit(formData) {
      return formData;
    },
    els: [
      {
        eType: "el-input",
        prop: "name",
        label: "工种名称",
        props: { placeholder: "工种名称", clearable: true },
      }
    ],
  },
});

/**
 * 校验是否选中数据
 */
const selectDataValidate = () => {
  if (!currentSelections.length) {
    ElMessage.warning("请选择一条数据");
    return false;
  }
  return true;
};

/**
 * 刷新列表数据
 * @param clear 是否清空选中数据(默认true)
 */
const refreshTableData = (clear: boolean = true) => {
  pageModelRef.value.refreshTableData();
  clear && pageModelRef.value.clearSelection();
};

/**
 * 监听新增事件
 */
const handleAdd = () => {
  pageModelRef.value.handleAddEvent();
};
</script>

<template>
  <div class="gen-page" style="height: 100%">
    <page-model ref="pageModelRef" :config="config" @add="handleAdd" />
  </div>
</template>