管理后台常用渲染组件GTable、GSearch、GForm（vue2+element-ui）

说明

针对管理端常用组件进行了针对性的组件封装，一个data.js文件控制该显示什么字段。

文件	说明
GTable.vue	通用表格，搭配 useTable、useCrudSchemas 使用
GForm.vue	通用表单，搭配 useCrudSchemas 使用
GSearch.vue	通用搜索表单，搭配 useTable、useCrudSchemas 使用
useTable.js	表格混入，内置搜索及表格相关参数及逻辑
useCrudSchemas.js	处理字段默认显示或隐藏，格式化各个组件所需参数

使用范例

demo/index.vue

<template>
	<div>
		<!-- 搜索栏 -->
		<div class="search-bar">
			<GSearch
				:schema="allSchemas.searchSchema"
				:model="queryParams"
				@search="setSearchParams"
				@reset="setSearchParams">
				<div
					slot="actionMore"
					class="default-btn primary-btn"
					@click="openForm()">
					{{ $t("crud.addBtn") }}
				</div>
			</GSearch>
		</div>
		<!-- 搜索栏end -->
		<!-- 表格 -->
		<div class="main-container">
			<GTable
				@pagination="getList"
				:schema="allSchemas.tableSchema"
				:data="dataList"
				:loading="tableLoading"
				:pagination="{ total: total }"
				:current-page.sync="queryParams.current"
				:page-size.sync="queryParams.size">
				<template slot="action" slot-scope="{ row }">
					<div class="text-btn-con">
            <el-link type="primary" @click="openForm(row.id)">编辑</el-link>
            <el-link type="danger" @click="delList(row.id)">删除</el-link>
					</div>
				</template>
			</GTable>
		</div>
		<!-- 编辑 | 新增 -->
		<FormPop
			ref="formPopRef"
			:schema="allSchemas.formSchema"
			@success="getList" />
	</div>
</template>

<script>
import useTable from "@/mixins/useTable";
import useCrudSchemas from "@/mixins/useCrudSchemas";
import { crudSchema } from "./drug.data";
import FormPop from "./form-pop.vue";
export default {
	mixins: [useTable, useCrudSchemas],
	components: { FormPop },
	data() {
		return {
			crudSchema,
			getListApiUrl: "/recipe/parameter/page",
			delApiUrl: "/recipe/parameter/delete",
		};
	},
	methods: {
		openForm(id) {
			this.$refs.formPopRef.open(id);
		},
	},
};
</script>

demo/form-pop.vue

<template>
	<el-dialog
		:title="dialogTitle"
		:visible.sync="visible"
		:close-on-click-modal="false">
		<GForm :schema="schema" ref="gFormRef">
			<div slot="spuId" slot-scope="{form}">
        这是个自定义组件内容
			</div>
		</GForm>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="beforeSubmit()">确认</el-button>
  		<el-button @click="visible = false">取消</el-button>
		</div>
	</el-dialog>
</template>

<script>

export default {
	props: {
		schema: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			visible: false,
      dialogTitle: ''
		};
	},
	methods: {
		async beforeSubmit() {
      const value = this.$refs.gFormRef.formModel
      await this.$http({
        url: 'updateOrAddApi',
        method: 'post',
        data: value
      })
      this.$message.success(this.dialogTitle + '成功')
			this.$emit("success");
			this.visible = false
		},
    async open(id) {
      this.dialogTitle = id ? '编辑' : '新增'
      this.visible = true
      await this.$nextTick()
			this.$refs.gFormRef.getElFormRef().resetFields()
      if (id) {
				const { data } = await this.$http({
        url: 'getDetailApi',
					method: 'get',
				})
				this.$refs.gFormRef.setValues(data)
      }
    }
	},
};
</script>

<style lang="scss" scoped>
.mr-10px {
	margin-right: 10px;
}
</style>

demo/demo.data.js

export const cfTypeEnum = {
  0: {
    label: '药品1',
    value: 0
  },
  1: {
    label: '药品2',
    value: 1
  }
}
export const crudSchema = [
  {
    label: 'spuId',
    prop: 'spuId',
    fileType: 'inputNumber'
  },
  {
    label: '类型',
    prop: 'type',
    fileType: 'select',
		options: [
			{ label: '类型1', value: '1' },
			{ label: '类型2', value: '2' },
		]
  },
  {
    label: '商品名',
    prop: 'prodName',
    fileType: 'input',
    isSearch: true,
    form: {
      componentProps: {
        disabled: true
      }
    }
  },
  {
    label: '症状名称',
    prop: 'indication',
    fileType: 'select',
    form: {
      componentProps: {
        placeholder: '请输入名称以创建症状',
        multiple: true,
        allowCreate: true,
        filterable: true
      }
    }
  },
  {
    label: '操作',
    prop: 'action',
    isForm: false
  },
]

代码

代码地址