1.1.0 • Published 3 years ago

@codser/crud v1.1.0

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

@codser/crud

  • 基于ElementUI 表单增删改查组件

使用方式

安装ElementUI(已安装跳过)
npm i element-ui -S
yarn add element-ui
引入ElementUI(已引入跳过)
// 全局引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 更多参考官方文档[https://element.eleme.cn/#/zh-CN/component/quickstart]
安装该组件
yarn add @codser/crud
npm install @codser/crud --save
引入
import CRUD from '@codser/crud';
Vue.use(CRUD)
使用
<!--详情查看examples/App.vue,examples/main.js-->
<template>
  <div id="app" class="container">
    <CodserCrudList
      :query="list.query"
      :add="list.add"
      :refresh="list.refresh"
      @handle="handle"
      :list="list.list"
    >
      <template slot="queryExt" slot-scope="{ query }">
        <el-input
          v-model="query.a"
          clearable
          placeholder="输入A"
          style="width: 200px"
          class="query-item"
          @keyup.enter.native="getDatas"
        />
        <el-input
          v-model="query.b"
          clearable
          placeholder="输入B"
          style="width: 200px"
          class="query-item"
          @keyup.enter.native="getDatas"
        />
      </template>

      <el-tag slot="etc_id" slot-scope="scope">{{
        scope.row.name + scope.row.tag
      }}</el-tag>
      <el-tag slot="etc_tag" slot-scope="scope">{{
        scope.row.name + scope.row.tag
      }}</el-tag>

      <!-- <span slot="newExt"> - </span> -->
      <!-- <span slot="rowOptExt" slot-scope="{ row }">
        <el-button style="margin-left:10px" @click="vvv(row)">作废</el-button>
      </span> -->
    </CodserCrudList>

    <!--详情-st-->
    <CodserCrudDetailFormModal
      v-if="detail.show"
      :modal="detail.modal"
      :rowData="detail.rowData"
      :showData="detail.showData"
      :desc="detail.desc"
      @closeHandle="detail.close"
    >
      <el-tag slot="edi_tag" slot-scope="{ row, data }">{{ data }}</el-tag>
    </CodserCrudDetailFormModal>
    <!--详情-ed-->

    <!--编辑-st-->
    <CodserCrudEditFormModal
      v-if="edit.show"
      :modals="edit.modals"
      :type="edit.type"
      :editRowData="edit.editRowData"
      :submitDataKeys="edit.submitDataKeys"
      :submitMethods="edit.submitMethods"
      :formModel="edit.formModel"
      @closeHandle="edit.close"
    >
      <template slot-scope="{ form }">
        <el-form-item
          label="名称"
          prop="name"
          :rules="[
            {
              required: true,
              message: '请填写名称',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="form.model['name']" placeholder="名称" />
        </el-form-item>
        <el-form-item
          label="标签"
          prop="tag"
          :rules="[
            {
              required: true,
              message: '请填写标签',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="form.model['tag']" placeholder="标签" />
        </el-form-item>
      </template>
    </CodserCrudEditFormModal>
    <!--编辑-ed-->
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: { // 列表数据
        query: { // 查询参数
          show: true, // 是否显示查询
          model: { // 查询表单数据
            a: "",
            b: "",
          },
        },
        add: { // 是否显示新建按钮
          show: true,
        },
        refresh: { // 是否显示刷新按钮
          show: true,
        },
        list: { // 列表参数
          loading: false, // 是否加载列表数据
          pageSize: 2, // 每页数据大小
          total: 13, // 数据总数【组件按照这个分页】
          isOpt: true, // 是否显示表格操作列
          isRowDetail: (row)=>{
            return row.createBy=='root'
          }, // 是否显示详情按钮
          isRowEdit: ()=>{
            return true
          }, // 是否显示编辑按钮
          isRowRemove: ()=>{
            return false
          }, // 是否显示删除按钮
          data: [], // 数据
          props: [ // 显示数据属性
            {
              label: "ID", // 显示数据字段名称
              prop: "id", // 显示数据字段属性名
              ext: true, // 是否扩展自定义 [<el-tag slot="etc_该字段属性名prop" slot-scope="scope:行数据">{{scope.row.name + scope.row.tag}}</el-tag>]
            },
            {
              label: "名称",
              prop: "name",
            },
            {
              label: "标签",
              prop: "tag",
              ext: true,
            },
            {
              label: "创建者",
              prop: "createBy"
            },
          ],
        },
      },
      // 详情参数
      detail: {
        modal: {
          title: "测试详情", // 标题
        },
        rowData: {}, // 详情行数据
        showData: [
          // 需要查看的详情列表说明
          {
            label: "ID", // 字段中文名称
            prop: "id", // 字段英文名称
            span: 3, // 字段合并列数
          },
          {
            label: "名称",
            prop: "name",
            span: 3,
          },
          {
            label: "标签",
            prop: "tag",
            span: 3,
            ext: true, // 是否扩展自定义该列[<el-tag slot="edi_tag" slot-scope="{ row:showData的item, data:该数据的数据 }">{{ data }}</el-tag>]
          },
          {
              label: "创建者",
              prop: "createBy",
              span: 3,
          },
        ],
        desc: {
          column: 3, // 详情显示列表
        },
        show: false, // 是否显示详情对话框
        close: () => {
          // 详情对话框关闭事件
          this.detail.show = false;
        },
      },
      // 编辑参数
      edit: {
        show: false, // 是否显示编辑对话框
        modals: {
          title: "新建表单测试", // 编辑对话框名称
        },
        type: "add", // 是添加还是编辑
        editRowData: {}, // 编辑行数据
        submitDataKeys: [], // 编辑提交时除编辑表单外的数据,如:主键id
        formModel: {
          // 编辑表单对象
          name: "",
          tag: "",
        },
        close: (isLoad = false) => {
          // 编辑对话框关闭事件
          this.edit.show = false;
          isLoad &&
            this.handle({
              type: "get",
              params: {},
            });
        },
        submitMethods: {
          // 提交方法
          add: (p) => {
            // 添加提交方法:p为添加提交的表单数据
            console.warn("添加表单:提交前拦截:", p);
            return new Promise((resolve) => {
              resolve("");
            });
          },
          alter: (p) => {
            // 修改提交方法:p为编辑提交的表单数据
            console.warn("编辑表单:提交前拦截:", p);
            return new Promise((resolve) => {
              resolve("");
            });
          },
        },
      },
    };
  },
  methods: {
    // list列表处理器
    handle({ type, params }) {
      if (type == "get") {
        // 获取数据
        this.list.list.loading = true;
        console.warn("get:", params);
        setTimeout(() => {
          this.list.list.data = [
            {
              id: "123456",
              name: "测试",
              tag: "0",
              createBy:'root'
            },
            {
              id: "123456",
              name: "测试",
              tag: "0",
              createBy:'gaoshuai'
            },
            {
              id: "8888",
              name: "测试2",
              tag: "1",
              createBy:'zhangsan'
            },
          ];
          this.list.list.total = 23;
          this.list.list.loading = false;
        }, 2000);
      }

      if (type == "remove") {
        // 删除行数据
        let idx = (this.list.list.data || [])
          .map((item) => item.id)
          .indexOf(params.id);
        if (idx != -1) {
          this.list.list.data.splice(idx, 1);
        }
      }
      if (type == "detail") {
        // 详情行数据
        this.detail.rowData = params;
        this.detail.show = true;
      }

      if (type == "add") {
        // 添加行数据
        this.edit.type = "add";
        this.edit.modals.title = "新建";
        this.edit.show = true;
      }

      if (type == "edit") {
        // 编辑行数据
        this.edit.type = "alter";
        this.edit.modals.title = "编辑";
        this.edit.editRowData = JSON.parse(JSON.stringify(params));
        this.edit.submitDataKeys = ["id"];
        this.edit.show = true;
      }
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>
1.1.0

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago