diff --git a/magic-admin/web/package-lock.json b/magic-admin/web/package-lock.json index 8f2a3119..9f0ae28a 100644 --- a/magic-admin/web/package-lock.json +++ b/magic-admin/web/package-lock.json @@ -14,14 +14,13 @@ "@tmagic/form": "1.2.0", "@tmagic/schema": "1.2.0", "@tmagic/stage": "1.2.0", + "@tmagic/table": "1.2.0", "@tmagic/utils": "1.2.0", "axios": "^0.27.2", "axios-jsonp": "^1.0.4", "core-js": "^3.20.0", "element-plus": "^2.2.19", "js-cookie": "^3.0.0", - "moment": "^2.29.3", - "moment-timezone": "^0.5.34", "serialize-javascript": "^6.0.0", "vue": "^3.2.26", "vue-router": "^4.0.3" @@ -3068,6 +3067,25 @@ "node": ">=14" } }, + "node_modules/@tmagic/table": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@tmagic/table/-/table-1.2.0.tgz", + "integrity": "sha512-sXUeR/wkjAeeFo1XU/v4LVbzWCSNJ5ZtzmSPuZvWbDTUEDvsHNuujoEizGngsL0h+qYkAt+ZkzFdV95M++Y1fA==", + "dependencies": { + "@tmagic/design": "1.2.0", + "@tmagic/form": "1.2.0", + "@tmagic/utils": "1.2.0", + "lodash-es": "^4.17.21", + "vue": "^3.2.37" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@tmagic/form": "1.2.0", + "vue": "^3.2.37" + } + }, "node_modules/@tmagic/utils": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.2.0.tgz", @@ -12273,25 +12291,6 @@ "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==", "dev": true }, - "node_modules/moment": { - "version": "2.29.3", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz", - "integrity": "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==", - "engines": { - "node": "*" - } - }, - "node_modules/moment-timezone": { - "version": "0.5.34", - "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.34.tgz", - "integrity": "sha512-3zAEHh2hKUs3EXLESx/wsgw6IQdusOT8Bxm3D9UrHPQR7zlMmzwybC8zHEM1tQ4LJwP7fcxrWr8tuBg05fFCbg==", - "dependencies": { - "moment": ">= 2.9.0" - }, - "engines": { - "node": "*" - } - }, "node_modules/monaco-editor": { "version": "0.34.0", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.0.tgz", @@ -18982,6 +18981,18 @@ "moveable-helper": "^0.4.0" } }, + "@tmagic/table": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@tmagic/table/-/table-1.2.0.tgz", + "integrity": "sha512-sXUeR/wkjAeeFo1XU/v4LVbzWCSNJ5ZtzmSPuZvWbDTUEDvsHNuujoEizGngsL0h+qYkAt+ZkzFdV95M++Y1fA==", + "requires": { + "@tmagic/design": "1.2.0", + "@tmagic/form": "1.2.0", + "@tmagic/utils": "1.2.0", + "lodash-es": "^4.17.21", + "vue": "^3.2.37" + } + }, "@tmagic/utils": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.2.0.tgz", @@ -26062,19 +26073,6 @@ "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==", "dev": true }, - "moment": { - "version": "2.29.3", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz", - "integrity": "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==" - }, - "moment-timezone": { - "version": "0.5.34", - "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.34.tgz", - "integrity": "sha512-3zAEHh2hKUs3EXLESx/wsgw6IQdusOT8Bxm3D9UrHPQR7zlMmzwybC8zHEM1tQ4LJwP7fcxrWr8tuBg05fFCbg==", - "requires": { - "moment": ">= 2.9.0" - } - }, "monaco-editor": { "version": "0.34.0", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.0.tgz", diff --git a/magic-admin/web/package.json b/magic-admin/web/package.json index 5948cabd..1e6b3c8f 100644 --- a/magic-admin/web/package.json +++ b/magic-admin/web/package.json @@ -15,14 +15,13 @@ "@tmagic/form": "1.2.0", "@tmagic/schema": "1.2.0", "@tmagic/stage": "1.2.0", + "@tmagic/table": "1.2.0", "@tmagic/utils": "1.2.0", "axios": "^0.27.2", "axios-jsonp": "^1.0.4", "core-js": "^3.20.0", "element-plus": "^2.2.19", "js-cookie": "^3.0.0", - "moment": "^2.29.3", - "moment-timezone": "^0.5.34", "serialize-javascript": "^6.0.0", "vue": "^3.2.26", "vue-router": "^4.0.3" diff --git a/magic-admin/web/src/components/act-list.vue b/magic-admin/web/src/components/act-list.vue index eef74862..c5380f70 100644 --- a/magic-admin/web/src/components/act-list.vue +++ b/magic-admin/web/src/components/act-list.vue @@ -41,7 +41,14 @@ - +
- + @submit="submitHandler" + >
@@ -76,22 +81,25 @@ import { defineComponent, onMounted, watch } from '@vue/runtime-core'; import { ElMessage } from 'element-plus'; import Cookies from 'js-cookie'; -import actApi, { ActListItem, ActListQuery, ActListRes, CopyInfo, OrderItem } from '@src/api/act'; -import FormDialog from '@src/components/form-dialog.vue'; -import MTable from '@src/components/table.vue'; +import { MFormDialog } from '@tmagic/form'; +import { MagicTable } from '@tmagic/table'; + +import actApi, { ActInfoDetail, ActListItem, ActListQuery, ActListRes, CopyInfo, OrderItem } from '@src/api/act'; import { getActListFormConfig } from '@src/config/act-list-config'; import { BlankActFormConfig } from '@src/config/blank-act-config'; import { ActStatus } from '@src/config/status'; -import type { ActFormValue, ColumnItem } from '@src/typings'; +import type { ActFormValue } from '@src/typings'; import { status } from '@src/use/use-status'; import { Res } from '@src/util/request'; import { datetimeFormatter } from '@src/util/utils'; export default defineComponent({ name: 'act-list', - components: { FormDialog, MTable }, + components: { MFormDialog, MagicTable }, setup() { + const dialog = ref>(); + const actStatus = [...status.actStatus]; const pageStatus = [...status.pageStatus]; const router = useRouter(); @@ -119,7 +127,6 @@ export default defineComponent({ const tableData = reactive<{ res: ActListRes }>({ res: { data: [], fetch: false, errorMsg: '', total: 0 }, }); - const formDialogVisible = ref(false); // 更新活动列表 const getActs = async () => { const res = await actApi.getList({ @@ -165,7 +172,7 @@ export default defineComponent({ const copyActAfterHandler = async () => { await getActs(); }; - const columns: ColumnItem[] = getActListFormConfig( + const columns = getActListFormConfig( pageStatusFormatter, actStatusFormatter, router, @@ -240,7 +247,7 @@ export default defineComponent({ actBeginTime: datetimeFormatter(new Date()), actEndTime: datetimeFormatter(new Date()), }; - formDialogVisible.value = true; + dialog.value && (dialog.value.dialogVisible = true); }; const afterAction = (res: Res<{ actId: number }>) => { @@ -248,28 +255,30 @@ export default defineComponent({ router.push(`/editor/${actId}`); }; - const closeFormDialogHandler = () => { - formDialogVisible.value = false; + const submitHandler = async (info: ActInfoDetail) => { + const res = await actApi.saveAct({ + data: info, + }); + + afterAction(res); }; return { + dialog, actStatus, columns, query, tableData, actValues: toRefs(actValues).data, - formDialogVisible, formConfig: BlankActFormConfig, - action: actApi.saveAct, searchChangeHandler, actStatusChangeHandle, pageTitleChangeHandler, sortChange, handleSizeChange, handleCurrentChange, - afterAction, - closeFormDialogHandler, newHandler, + submitHandler, }; }, }); diff --git a/magic-admin/web/src/components/form-dialog.vue b/magic-admin/web/src/components/form-dialog.vue deleted file mode 100644 index 29a6e778..00000000 --- a/magic-admin/web/src/components/form-dialog.vue +++ /dev/null @@ -1,144 +0,0 @@ - - - - - - diff --git a/magic-admin/web/src/components/table.vue b/magic-admin/web/src/components/table.vue deleted file mode 100644 index cea49df0..00000000 --- a/magic-admin/web/src/components/table.vue +++ /dev/null @@ -1,155 +0,0 @@ - - - - - - diff --git a/magic-admin/web/src/config/act-list-config.ts b/magic-admin/web/src/config/act-list-config.ts index e31653b6..51eb5169 100644 --- a/magic-admin/web/src/config/act-list-config.ts +++ b/magic-admin/web/src/config/act-list-config.ts @@ -18,6 +18,8 @@ import type { Router } from 'vue-router'; +import { MagicTable } from '@tmagic/table'; + import type { ActListItem } from '@src/api/act'; import type { ColumnItem } from '@src/typings'; import { datetimeFormatter } from '@src/util/utils'; @@ -29,31 +31,38 @@ export const getActListFormConfig = ( router: Router, copyActHandler: ColumnItem['handler'], copyActAfterHandler: ColumnItem['handler'], -): ColumnItem[] => [ +) => [ { prop: '', type: 'expand', - table: [ - { - prop: 'pageTitle', - label: '页面标题', - }, - { - prop: 'pagePublishTime', - label: '页面发布时间', - formatter: datetimeFormatter, - }, - { - prop: 'pagePublishStatus', - label: '页面状态', - formatter: pageStatusFormatter, - }, - { - prop: 'pagePublishOperator', - label: '发布人', - formatter: (v: string | number | Date) => (v as string) || '-', - }, - ], + component: MagicTable, + props: (row: ActListItem) => ({ + data: row.pages, + border: true, + columns: [ + { + prop: 'pageTitle', + label: '页面标题', + }, + { + prop: 'pagePublishTime', + label: '页面发布时间', + formatter: datetimeFormatter, + }, + { + prop: 'pagePublishStatus', + label: '页面状态', + action: 'tag', + type: (v: number) => ['', 'success'][v], + formatter: pageStatusFormatter, + }, + { + prop: 'pagePublishOperator', + label: '发布人', + formatter: (v: string | number | Date) => (v as string) || '-', + }, + ], + }), }, { prop: 'actId', @@ -86,6 +95,7 @@ export const getActListFormConfig = ( prop: 'actStatus', label: '活动状态', action: 'tag', + type: (v: number) => ['info', '', 'success'][v], formatter: actStatusFormatter, }, { diff --git a/magic-admin/web/src/plugins/editor.ts b/magic-admin/web/src/plugins/editor.ts index 17825a47..e4ba3326 100644 --- a/magic-admin/web/src/plugins/editor.ts +++ b/magic-admin/web/src/plugins/editor.ts @@ -19,9 +19,9 @@ import { ElMessage, ElMessageBox } from 'element-plus'; import type { MNode } from '@tmagic/schema'; +import { isPage } from '@tmagic/utils'; import actApi from '@src/api/act'; -import { isPage } from '@tmagic/utils'; export default { /** diff --git a/magic-admin/web/src/typings/index.d.ts b/magic-admin/web/src/typings/index.d.ts index d039df7f..36fa49d4 100644 --- a/magic-admin/web/src/typings/index.d.ts +++ b/magic-admin/web/src/typings/index.d.ts @@ -134,8 +134,8 @@ export interface EditorInfo { // 新建活动的初始值类型 export interface ActFormValue { operator: string; - actBeginTime: string; - actEndTime: string; + actBeginTime: string | number; + actEndTime: string | number; } // 侧边栏配置 export interface AsideState { diff --git a/magic-admin/web/src/util/utils.ts b/magic-admin/web/src/util/utils.ts index c6316c28..4da07c93 100644 --- a/magic-admin/web/src/util/utils.ts +++ b/magic-admin/web/src/util/utils.ts @@ -16,25 +16,11 @@ * limitations under the License. */ -import momentTimezone from 'moment-timezone'; import serialize from 'serialize-javascript'; import { EditorInfo } from '@src/typings'; -export const datetimeFormatter = function (v: string | number | Date): string { - if (v) { - let time = null; - time = momentHandler(v); - // 格式化为北京时间 - if (time !== 'Invalid date') { - return time; - } - return '-'; - } - return '-'; -}; -const momentHandler = (v: string | number | Date) => - momentTimezone.tz(v, 'Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss'); +export { datetimeFormatter } from '@tmagic/utils'; export const serializeConfig = function (value: EditorInfo): string { return serialize(value, { diff --git a/magic-admin/web/tests/unit/components/act-list.spec.ts b/magic-admin/web/tests/unit/components/act-list.spec.ts index 5b0acd7a..1be5983a 100644 --- a/magic-admin/web/tests/unit/components/act-list.spec.ts +++ b/magic-admin/web/tests/unit/components/act-list.spec.ts @@ -236,7 +236,7 @@ describe('List', () => { const wrapper = getWrapper(); const createButton = wrapper.find('#create'); await createButton.trigger('click'); - expect(wrapper.vm.formDialogVisible).toBe(true); + expect(wrapper.vm.dialog?.dialogVisible).toBe(true); }); it('路由的活动状态值缺省', () => {