front-end/admin-code/src/views/staff/operate.vue

<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap" @load="onLoad">
			<template #table-column-addTime="{scope}">
				<span>{{ scope.row.addTime | formatTime }}</span>
			</template>

			<!-- search -->
			<template #slot-sel-serch="{scope}">
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label="员工">
						<el-select
							v-model="form.adminId"
							size="mini"
							placeholder="请选择"
							style="width: 150px;"
							:clearable="true"
						>
							<el-option
								v-for="(item, index) in staffList"
								:key="index"
								:label="item.adminName"
								:value="item.id"
								>{{ item.adminName }}</el-option
							>
						</el-select>
					</el-form-item>
					<el-form-item label="日期">
						<el-date-picker
							type="date"
							placeholder="选择开始日期"
							v-model="form.startTime"
							value-format="yyyy-MM-dd"
							style="width: 150px;"
							size="mini"
						></el-date-picker>
						<span class="picker-separate">-</span>
						<el-date-picker
							type="date"
							placeholder="选择结束日期"
							v-model="form.endTime"
							value-format="yyyy-MM-dd"
							style="width: 150px;"
							size="mini"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="">
						<el-button type="primary" size="mini" @click="serchFn">确认</el-button>
					</el-form-item>
				</el-form>
			</template>
		</cl-crud>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// cl-crud
			app: null,
			// ======
			staffList: [],
			form: {
				adminId: '',
				startTime: '',
				endTime: ''
			}
		};
	},
	mounted() {
		this.getStaff();
	},
	methods: {
		// api
		getStaff() {
			this.$service.staff.list().then(res => {
				this.staffList = res.list;
			});
		},
		// operate
		serchFn() {
			this.app.refresh(this.form);
		},
		// crud
		onLoad({ ctx, app }) {
			this.app = app;
			let logHost = () => {
				return this.$service.single.log(this.form);
			};
			ctx.service({
				page: logHost
			})
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'adminName',
							label: '操作者',
							align: 'center'
						},
						{
							prop: 'addTime',
							label: '操作日期',
							align: 'center'
						},
						{
							prop: 'ip',
							label: 'IP地址',
							align: 'center'
						},
						{
							prop: 'content',
							label: '操作记录',
							align: 'center',
							emptyText: '无'
						}
					],
					// 操作列
					op: {
						visible: false, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: []
					}
				})
				.set('layout', [
					['slot-tabs'],
					['slot-sel-serch', 'flex1', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh(this.form);
		}
	}
};
</script>

<style lang="scss" scoped>
.demo-form-inline {
	.el-form-item {
		margin-bottom: 0;
	}
	/deep/.el-form-item__label {
		line-height: 28px !important;
	}
	/deep/.el-form-item__content {
		line-height: 28px;
	}
	.picker-separate {
		display: inline-block;
		margin: 0 10px;
	}
}
</style>