From eed29804d3973801f8eac3ad9bead1e608f05b6a Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期六, 20 七月 2024 22:31:56 +0800
Subject: [PATCH] 工单及自定义弹出窗口更新
---
src/views/demo/system/account/index.vue | 166 +++++++++++++++++++++++++-----------------------------
1 files changed, 77 insertions(+), 89 deletions(-)
diff --git a/src/views/demo/system/account/index.vue b/src/views/demo/system/account/index.vue
index 32d196c..86e0dbc 100644
--- a/src/views/demo/system/account/index.vue
+++ b/src/views/demo/system/account/index.vue
@@ -4,6 +4,7 @@
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleCreate">鏂板璐﹀彿</a-button>
+ <a-button type="primary" @click="handleExport">瀵煎嚭璐﹀彿</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
@@ -24,8 +25,7 @@
color: 'error',
tooltip: '鍒犻櫎姝よ处鍙�',
popConfirm: {
- title: '鏄惁纭鍒犻櫎?',
- placement: 'left',
+ title: '鏄惁纭鍒犻櫎',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
@@ -38,101 +38,89 @@
<AccountModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, reactive } from 'vue';
+<script lang="ts" setup>
+ import { reactive } from 'vue';
- import { BasicTable, useTable, TableAction } from '/@/components/Table';
- import { getAccountList } from '/@/api/demo/system';
- import { PageWrapper } from '/@/components/Page';
+ import { BasicTable, useTable, TableAction } from '@/components/Table';
+ import { getAccountList } from '@/api/demo/system';
+ import { PageWrapper } from '@/components/Page';
import DeptTree from './DeptTree.vue';
- import { useModal } from '/@/components/Modal';
+ import { useModal } from '@/components/Modal';
import AccountModal from './AccountModal.vue';
import { columns, searchFormSchema } from './account.data';
- import { useGo } from '/@/hooks/web/usePage';
+ import { useGo } from '@/hooks/web/usePage';
- export default defineComponent({
- name: 'AccountManagement',
- components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction },
- setup() {
- const go = useGo();
- const [registerModal, { openModal }] = useModal();
- const searchInfo = reactive<Recordable>({});
- const [registerTable, { reload, updateTableDataRecord }] = useTable({
- title: '璐﹀彿鍒楄〃',
- api: getAccountList,
- rowKey: 'id',
- columns,
- formConfig: {
- labelWidth: 120,
- schemas: searchFormSchema,
- autoSubmitOnEnter: true,
- },
- useSearchForm: true,
- showTableSetting: true,
- bordered: true,
- handleSearchInfoFn(info) {
- console.log('handleSearchInfoFn', info);
- return info;
- },
- actionColumn: {
- width: 120,
- title: '鎿嶄綔',
- dataIndex: 'action',
- // slots: { customRender: 'action' },
- },
- });
+ defineOptions({ name: 'AccountManagement' });
- function handleCreate() {
- openModal(true, {
- isUpdate: false,
- });
- }
-
- function handleEdit(record: Recordable) {
- console.log(record);
- openModal(true, {
- record,
- isUpdate: true,
- });
- }
-
- function handleDelete(record: Recordable) {
- console.log(record);
- }
-
- function handleSuccess({ isUpdate, values }) {
- if (isUpdate) {
- // 婕旂ず涓嶅埛鏂拌〃鏍肩洿鎺ユ洿鏂板唴閮ㄦ暟鎹��
- // 娉ㄦ剰锛歶pdateTableDataRecord瑕佹眰琛ㄦ牸鐨剅owKey灞炴�т负string骞朵笖瀛樺湪浜庢瘡涓�琛岀殑record鐨刱eys涓�
- const result = updateTableDataRecord(values.id, values);
- console.log(result);
- } else {
- reload();
- }
- }
-
- function handleSelect(deptId = '') {
- searchInfo.deptId = deptId;
- reload();
- }
-
- function handleView(record: Recordable) {
- go('/system/account_detail/' + record.id);
- }
-
- return {
- registerTable,
- registerModal,
- handleCreate,
- handleEdit,
- handleDelete,
- handleSuccess,
- handleSelect,
- handleView,
- searchInfo,
- };
+ const go = useGo();
+ const [registerModal, { openModal }] = useModal();
+ const searchInfo = reactive<Recordable>({});
+ const [registerTable, { reload, updateTableDataRecord, getSearchInfo }] = useTable({
+ title: '璐﹀彿鍒楄〃',
+ api: getAccountList,
+ rowKey: 'id',
+ columns,
+ formConfig: {
+ labelWidth: 120,
+ schemas: searchFormSchema,
+ autoSubmitOnEnter: true,
+ },
+ useSearchForm: true,
+ showTableSetting: true,
+ bordered: true,
+ handleSearchInfoFn(info) {
+ console.log('handleSearchInfoFn', info);
+ return info;
+ },
+ actionColumn: {
+ width: 120,
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ // slots: { customRender: 'action' },
},
});
+
+ function handleCreate() {
+ openModal(true, {
+ isUpdate: false,
+ });
+ }
+
+ function handleEdit(record: Recordable) {
+ console.log(record);
+ openModal(true, {
+ record,
+ isUpdate: true,
+ });
+ }
+
+ function handleDelete(record: Recordable) {
+ console.log(record);
+ }
+
+ function handleExport() {
+ console.log(getSearchInfo());
+ }
+
+ function handleSuccess({ isUpdate, values }) {
+ if (isUpdate) {
+ // 婕旂ず涓嶅埛鏂拌〃鏍肩洿鎺ユ洿鏂板唴閮ㄦ暟鎹��
+ // 娉ㄦ剰锛歶pdateTableDataRecord瑕佹眰琛ㄦ牸鐨剅owKey灞炴�т负string骞朵笖瀛樺湪浜庢瘡涓�琛岀殑record鐨刱eys涓�
+ const result = updateTableDataRecord(values.id, values);
+ console.log(result);
+ } else {
+ reload();
+ }
+ }
+
+ function handleSelect(deptId = '') {
+ searchInfo.deptId = deptId;
+ reload();
+ }
+
+ function handleView(record: Recordable) {
+ go('/system/account_detail/' + record.id);
+ }
</script>
--
Gitblit v1.9.3