@juzhenfe/page-model NPM

介绍

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>

vue element-plus page-model config page-config

clipboard lodash-es sortablejs

@everything-registry/sub-chunk-505 @infinitebrahmanuniverse/nolb-_juz @zalastax/nolb-_juz

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago