feat(ui): 细节优化

This commit is contained in:
廖彦棋 2024-03-11 12:02:20 +08:00
parent a48cb7bc34
commit d4d1fb26f6
8 changed files with 33 additions and 11 deletions

View File

@ -19,7 +19,9 @@ const requestParams = computed(() => ({
const [tableConfig, getList] = useAsyncTable(props.request, requestParams); const [tableConfig, getList] = useAsyncTable(props.request, requestParams);
const _columns = computed(() => { const _columns = computed(() => {
return props.columns.map((item) => ({ return props.columns
.filter((item) => !item.hideInTable)
.map((item) => ({
ellipsis: true, ellipsis: true,
tooltip: true, tooltip: true,
...item, ...item,
@ -46,7 +48,7 @@ onActivated(handleSearch);
<FormSection <FormSection
v-model="formData" v-model="formData"
:columns="columns" :columns="columns"
:submitting="(tableConfig.loading as boolean)" :submitting="tableConfig.loading as boolean"
@request="handleSearch" @request="handleSearch"
> >
<template v-for="slot in Object.keys($slots)" #[slot]="config"> <template v-for="slot in Object.keys($slots)" #[slot]="config">
@ -60,7 +62,7 @@ onActivated(handleSearch);
...tableConfig, ...tableConfig,
...props, ...props,
scroll: useTableScroll(_columns, tableContainerRef as HTMLElement), scroll: useTableScroll(_columns, tableContainerRef as HTMLElement),
columns: _columns columns: _columns,
}" }"
> >
<template v-for="slot in Object.keys($slots)" #[slot]="config"> <template v-for="slot in Object.keys($slots)" #[slot]="config">

View File

@ -12,7 +12,7 @@ function useSubmit<T extends Record<string, any> = Record<string, any>, R = any>
const hasError = await formRef.value?.validate(); const hasError = await formRef.value?.validate();
if (!hasError) { if (!hasError) {
const { data, message } = await api({ ...formData ?? {}, ...unref(params) }); const { data, message } = await api({ ...formData ?? {}, ...unref(params) });
Message.success(message); message && Message.success(message);
return Promise.resolve({ formData, data }); return Promise.resolve({ formData, data });
} }
return Promise.reject(false); return Promise.reject(false);

View File

@ -19,6 +19,7 @@ const columns = [
{ {
title: "key", title: "key",
dataIndex: "value", dataIndex: "value",
slotName: "value",
}, },
{ {
title: "用途", title: "用途",
@ -100,6 +101,11 @@ const handleStatusChange = ({ filed, value, record, reload }) => {
><template #icon> <icon-plus /> </template>新增 ><template #icon> <icon-plus /> </template>新增
</a-button> </a-button>
</template> </template>
<template #value="{ record, column }">
<a-typography-text copyable ellipsis style="margin: 0">
{{ record[column.dataIndex] }}
</a-typography-text>
</template>
<template #status="{ record, reload }"> <template #status="{ record, reload }">
<a-switch <a-switch
v-model="record.enabled" v-model="record.enabled"

View File

@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, h } from "vue"; import { ref, h } from "vue";
import { Message, Modal } from "@arco-design/web-vue"; import { Message, Modal } from "@arco-design/web-vue";
import { dateFormat } from "@gpt-vue/packages/utils";
import SearchTable from "@/components/SearchTable/SearchTable.vue"; import SearchTable from "@/components/SearchTable/SearchTable.vue";
import type { SearchTableColumns } from "@/components/SearchTable/type"; import type { SearchTableColumns } from "@/components/SearchTable/type";
import app from "@/main"; import app from "@/main";
@ -51,6 +52,7 @@ const columns: SearchTableColumns[] = [
search: { search: {
valueType: "range", valueType: "range",
}, },
render: ({ record }) => dateFormat(record.created_at),
}, },
{ {
title: "操作", title: "操作",

View File

@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import SearchTable from "@/components/SearchTable/SearchTable.vue"; import SearchTable from "@/components/SearchTable/SearchTable.vue";
import type { SearchTableColumns } from "@/components/SearchTable/type"; import type { SearchTableColumns } from "@/components/SearchTable/type";
import { dateFormat } from "@gpt-vue/packages/utils";
import { getList } from "./api"; import { getList } from "./api";
const columns: SearchTableColumns[] = [ const columns: SearchTableColumns[] = [
@ -10,6 +11,7 @@ const columns: SearchTableColumns[] = [
search: { search: {
valueType: "input", valueType: "input",
}, },
width: 280,
}, },
{ {
dataIndex: "username", dataIndex: "username",
@ -30,6 +32,8 @@ const columns: SearchTableColumns[] = [
{ {
dataIndex: "created_at", dataIndex: "created_at",
title: "下单时间", title: "下单时间",
render: ({ record }) => dateFormat(record.created_at),
width: 200,
}, },
{ {
dataIndex: "status", dataIndex: "status",
@ -52,6 +56,8 @@ const columns: SearchTableColumns[] = [
search: { search: {
valueType: "range", valueType: "range",
}, },
slotName: "pay_time",
width: 200,
}, },
{ {
dataIndex: "pay_way", dataIndex: "pay_way",
@ -60,11 +66,17 @@ const columns: SearchTableColumns[] = [
{ {
title: "操作", title: "操作",
slotName: "actions", slotName: "actions",
fixed: "right",
width: 80,
}, },
]; ];
</script> </script>
<template> <template>
<SearchTable :request="getList" :columns="columns"> <SearchTable :request="getList" :columns="columns">
<template #pay_time="{ record }">
<a-tag v-if="!record.pay_time" color="blue">未支付</a-tag>
<span v-else>{{ dateFormat(record.pay_time) }}</span>
</template>
<template #actions="{ record }"> <template #actions="{ record }">
<a-link :key="record.id" status="danger">删除</a-link> <a-link :key="record.id" status="danger">删除</a-link>
</template> </template>

View File

@ -148,7 +148,7 @@ onMounted(async () => {
</a-space> </a-space>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button type="primary" :loading="submitting" @click="handleSave">提交</a-button> <a-button type="primary" :loading="submitting" @click="handleSave">保存</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-card> </a-card>

View File

@ -141,7 +141,7 @@ onMounted(reload);
/> />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button type="primary" :loading="submitting" @click="handleSave">提交</a-button> <a-button type="primary" :loading="submitting" @click="handleSave">保存</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-card> </a-card>

View File

@ -61,7 +61,7 @@ onMounted(reload);
<md-editor v-model="formData.content" @on-upload-img="onUploadImg" /> <md-editor v-model="formData.content" @on-upload-img="onUploadImg" />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button type="primary" :loading="submitting" @click="handleSave">提交</a-button> <a-button type="primary" :loading="submitting" @click="handleSave">保存</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</template> </template>