front-end/admin-update/src/sass/fest/list.vue

<template>
	<div class="app-list-content">
		<x-crud class="liu-crud-wrap" @load="onLoad">
			<!-- 日期 -->
			<template #table-column-month="{scope}">
				<span>{{ scope.row.month + '.' + scope.row.day }}</span>
			</template>
		</x-crud>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// x-crud
			app: null
		};
	},
	mounted() {},
	methods: {
		// crud
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.sassFest)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'name',
							label: '名称',
							align: 'center'
						},
						{
							prop: 'month',
							label: '时间',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['edit']
					}
				})
				.set('upsert', {
					props: {
						width: '500px'
					},
					items: [
						{
							prop: 'name',
							label: '名称',
							span: 24,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '名称不能为空'
							}
						},
						{
							prop: 'month',
							label: '月份',
							span: 24,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '月份不能为空'
							}
						},
						{
							prop: 'day',
							label: '日',
							span: 24,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '日不能为空'
							}
						}
					]
				})
				.set('layout', [['slot-tabs'], ['flex1', 'add-btn', 'refresh-btn'], ['data-table']])
				.done();
			app.refresh();
		}
	}
};
</script>