|
|
@@ -0,0 +1,176 @@
|
|
|
+<script setup>
|
|
|
+import {Page} from "@vben/common-ui";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import {useVbenForm} from "#/adapter/form.js";
|
|
|
+import {$t} from "@vben/locales";
|
|
|
+import {useVbenVxeGrid} from "#/adapter/vxe-table.js";
|
|
|
+import {Card, Input, InputGroup, Select, SelectOption, Tag} from "ant-design-vue";
|
|
|
+import {getLogBehaviorList} from "#/api/player/log_operation.js";
|
|
|
+
|
|
|
+const disabledDate = (current) => {
|
|
|
+ return current && current > dayjs().endOf('day');
|
|
|
+};
|
|
|
+const [QueryForm, formApi] = useVbenForm({
|
|
|
+ // 默认展开
|
|
|
+ collapsed: false,
|
|
|
+ // 所有表单项共用,可单独在表单内覆盖
|
|
|
+ commonConfig: {
|
|
|
+ // 所有表单项
|
|
|
+ componentProps: {
|
|
|
+ class: 'w-full',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 提交函数
|
|
|
+ handleSubmit: onSubmit,
|
|
|
+ handleReset: onReset,
|
|
|
+ // 垂直布局,label和input在不同行,值为vertical
|
|
|
+ // 水平布局,label和input在同一行
|
|
|
+ layout: 'horizontal',
|
|
|
+ schema: [
|
|
|
+ {
|
|
|
+ // 组件需要在 #/adapter.ts内注册,并加上类型
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'user_name',
|
|
|
+ label: $t('log.log_login.user_name'),
|
|
|
+ componentProps: {
|
|
|
+ allowClear: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 组件需要在 #/adapter.ts内注册,并加上类型
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'behavior',
|
|
|
+ label: $t('log.search.behavior'),
|
|
|
+ componentProps: {
|
|
|
+ allowClear: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Select',
|
|
|
+ defaultValue:"",
|
|
|
+ componentProps: {
|
|
|
+ filterOption: true,
|
|
|
+ name:'behavior_status',
|
|
|
+ options: [
|
|
|
+ {label: $t('common.all'), value: ""},
|
|
|
+ {label: $t('common.success'), value: "1"},
|
|
|
+ {label: $t('common.error'), value: "0"},
|
|
|
+ ],
|
|
|
+ placeholder: $t('common.placeholder_select'),
|
|
|
+ },
|
|
|
+ fieldName: 'behavior_status',
|
|
|
+ label: $t('log.search.behavior_status'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:$t("common.range_time"),
|
|
|
+ component: 'RangePicker',
|
|
|
+ defaultValue: undefined,
|
|
|
+ fieldName: 'range_time',
|
|
|
+ componentProps: {
|
|
|
+ disabledDate: disabledDate,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 是否可展开
|
|
|
+ submitButtonOptions: {
|
|
|
+ content: '查询',
|
|
|
+ },
|
|
|
+ wrapperClass: 'grid-cols-1 md:grid-cols-3',
|
|
|
+});
|
|
|
+function onSubmit(values) {
|
|
|
+ gridApi.reload();
|
|
|
+}
|
|
|
+function onReset() {
|
|
|
+ formApi.resetForm();
|
|
|
+ gridApi.reload();
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 列表
|
|
|
+const gridOptions = {
|
|
|
+ border: true,
|
|
|
+ stripe: true,
|
|
|
+ scrollbarConfig: {
|
|
|
+ x: {
|
|
|
+ visible: 'visible'
|
|
|
+ },
|
|
|
+ y: {
|
|
|
+ visible: 'auto'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ { fixed: 'left', title: $t('common.serial'), type: 'seq', width: 50},
|
|
|
+ { field: 'create_time', title: $t('log.log_operation.create_time')},
|
|
|
+ { field: 'user_name', title: $t('log.log_operation.user_name')},
|
|
|
+ { field: 'behavior', title: $t('log.log_operation.behavior')},
|
|
|
+ { field: 'behavior_desc', title: $t('log.log_operation.behavior_desc')},
|
|
|
+ { field: 'behavior_status', title: $t('log.log_operation.behavior_status'), slots:{'default':'behavior_status'}},
|
|
|
+ { field: 'behavior_url', title: 'URL'},
|
|
|
+ ],
|
|
|
+ keepSource: true,
|
|
|
+ proxyConfig: {
|
|
|
+ ajax: {
|
|
|
+ query: async ({ page }) => {
|
|
|
+ let form = {
|
|
|
+ page: page.currentPage,
|
|
|
+ limit: page.pageSize,
|
|
|
+ compress: 0
|
|
|
+ };
|
|
|
+ const search = await formApi.getValues();
|
|
|
+ for(let key in search) {
|
|
|
+ if(search[key]) {
|
|
|
+ form[key] = search[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(search.range_time) {
|
|
|
+ if(form.range_time) {
|
|
|
+ delete form.range_time;
|
|
|
+ }
|
|
|
+ form['start_time'] = search.range_time[0].format('YYYY-MM-DD');
|
|
|
+ form['end_time'] = search.range_time[1].format('YYYY-MM-DD');
|
|
|
+ }
|
|
|
+ const list = await getLogBehaviorList(form);
|
|
|
+ return {
|
|
|
+ total: list.total,
|
|
|
+ items: list.list
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ rowConfig: {
|
|
|
+ isHover: true,
|
|
|
+ },
|
|
|
+ toolbarConfig: {
|
|
|
+ custom: true,
|
|
|
+ export: true,
|
|
|
+ // import: true,
|
|
|
+ refresh: true,
|
|
|
+ zoom: true,
|
|
|
+ },
|
|
|
+};
|
|
|
+const [Grid, gridApi] = useVbenVxeGrid({
|
|
|
+ gridOptions,
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <Page>
|
|
|
+ <Card class="mb-5">
|
|
|
+ <QueryForm>
|
|
|
+ </QueryForm>
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <Grid>
|
|
|
+ <template #behavior_status="{ row }">
|
|
|
+ <Tag v-if="row.behavior_status == 1" color="green">{{$t('common.success')}}</Tag>
|
|
|
+ <Tag v-else color="red">{{$t('common.error')}}</Tag>
|
|
|
+ </template>
|
|
|
+ </Grid>
|
|
|
+ </Card>
|
|
|
+ </Page>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|