egova-jerry-component v1.4.3

通用 CommonCurd 组件

概述

基于 Vue2 和 Ant Design Vue 1.78 版本 实现的通用 CRUD 组件。此组件是一个强大的工具，可帮助开发者在 web 应用程序中快速实现 CRUD（创建、读取、更新、删除）操作。支持表格视图和自定义视图切换、查询、新增、编辑、导出、批量删除等操作。

何时使用

当你的 web 应用需要实现以下功能时，你可以考虑使用此组件：

• 查询：通过搜索表单查找特定的数据。
• 新增：添加新的数据。
• 编辑：更改现有的数据。
• 导出：将数据导出为一个文件，如 CSV 或 Excel。
• 批量删除：一次删除多行数据。
• 视图切换：在表格视图和自定义视图之间切换。

如何使用

首先，你需要在你的 Vue 项目中引入该组件： 安装：pnpm install egova-jerry-components

```js
import {CommonCurd} from 'egova-jerry-components'
import "egova-jerry-component/dist/style.scss";

示例

<template>
  <CommonCurd
    :columns="columns"
    :searchItems="searchItems"
    :getListFunction="getListFunction"
    :showExpand="true"
    :rowKey="'id'"
    :pageSize="10"
    :showCreateButton="true"
    :showEditButton="true"
    :showExportButton="true"
    :showBatchDeleteButton="true"
    :actionFunctions="{
      create: createItem,
      edit: editItem,
      export: exportData,
      batchDelete: batchDeleteItems,
    }"
  >
  </CommonCurd>
</template>

<script>
import { CommonCurd } from "egova-jerry-components";
import "egova-jerry-component/dist/style.scss";

export default {
  components: {
    CommonCurd,
  },
  data() {
    return {
      columns: [
        //...
      ],
      searchItems: [
        //...
      ],
      getListFunction: () => {
        //...
      },
    };
  },
};
</script>

API

通用 CommonAction 组件

概述

CommonAction 是一个基于 Vue2 实现的通用动作组件。这个组件主要负责提供一个模态框的功能，当需要弹出模态框时，你可以考虑使用此组件。

如何使用

首先，你需要在你的 Vue 项目中引入该组件：

<template>
  <CommonAction :title="Your Title" :visible="isVisible">
    <!-- Your Content Here -->
  </CommonAction>
</template>

<script>
import CommonAction from "path/to/common-action-component";

export default {
  components: {
    CommonAction,
  },
  data() {
    return {
      isVisible: true, // 控制模态框是否可见
    };
  },
};
</script>

方法

handleClose 关闭模态框，触发 update:visible 事件并将 visible 设置为 false。

methods: { handleClose() { this.$emit("update:visible", false); } }

事件

update:visible 当模态框的可见状态变化时，会触发该事件。

watch: { visible(newVal, oldVal) { console.log("visible changed from", oldVal,
"to", newVal); } }

请注意，此组件使用了 Vue 的 .sync 修饰符，因此可以使用 v-model 来双向绑定 visible 属性。

<template>
  <CommonAction v-model:visible="isVisible">
    <!-- Your Content Here -->
  </CommonAction>
</template>

API

Props

CommonForm Component

通用表单组件，支持多种表单项和自定义额外按钮。

API

Props

Methods

handleSubmit

表单提交方法，首先进行表单验证，通过则触发 submit 事件并传出表单数据。

methods: {
  handleSubmit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        this.$emit("submit", this.localFormModel);
      } else {
        console.log("提交出错！");
      }
    });
  }
}

handleBack

返回按钮的点击方法，触发 back 事件并传出表单数据。

methods: {
handleBack() {
  this.$emit("back", this.localFormModel);
}
}

updateModel

更新表单数据模型，并触发 update:formModel 事件。

methods: {
updateModel(key, value) {
  this.$set(this.localFormModel, key, value);
  this.$emit("update:formModel", this.localFormModel);
}
}

Events

submit 提交表单时触发的事件。

back 点击返回按钮时触发的事件。

update:formModel 更新表单数据模型时触发的事件。

Slots

default 默认插槽，用于在表单下方添加额外的内容。

<common-form
    title="Login Form"
>
    <!-- 这是一个自定义内容 -->
    <div>This is an auto content.</div>
</common-form>