From de7e6c408b6209158b08991d729c4bcc72055eec Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 20 六月 2024 00:30:52 +0800
Subject: [PATCH] 产品工艺路线
---
src/views/demo/table/EditRowTable.vue | 194 ++++++++++++++++++++++-------------------------
1 files changed, 91 insertions(+), 103 deletions(-)
diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
index 7cc2d45..c98ea94 100644
--- a/src/views/demo/table/EditRowTable.vue
+++ b/src/views/demo/table/EditRowTable.vue
@@ -3,14 +3,14 @@
<BasicTable @register="registerTable" @edit-change="onEditChange">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
- <TableAction :actions="createActions(record, column)" />
+ <TableAction :actions="createActions(record)" />
</template>
</template>
</BasicTable>
</div>
</template>
-<script lang="ts">
- import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+ import { ref } from 'vue';
import {
BasicTable,
useTable,
@@ -18,13 +18,13 @@
BasicColumn,
ActionItem,
EditRecordRow,
- } from '/@/components/Table';
- import { optionsListApi } from '/@/api/demo/select';
+ } from '@/components/Table';
+ import { optionsListApi } from '@/api/demo/select';
- import { demoListApi } from '/@/api/demo/table';
- import { treeOptionsListApi } from '/@/api/demo/tree';
+ import { demoListApi } from '@/api/demo/table';
+ import { treeOptionsListApi } from '@/api/demo/tree';
import { cloneDeep } from 'lodash-es';
- import { useMessage } from '/@/hooks/web/useMessage';
+ import { useMessage } from '@/hooks/web/useMessage';
const columns: BasicColumn[] = [
{
@@ -221,102 +221,90 @@
width: 200,
},
];
- export default defineComponent({
- components: { BasicTable, TableAction },
- setup() {
- const { createMessage: msg } = useMessage();
- const currentEditKeyRef = ref('');
- const [registerTable] = useTable({
- title: '鍙紪杈戣绀轰緥',
- titleHelpMessage: [
- '鏈緥涓慨鏀筟鏁板瓧杈撳叆妗哴杩欎竴鍒楁椂锛屽悓涓�琛岀殑[杩滅▼涓嬫媺]鍒楃殑褰撳墠缂栬緫鏁版嵁涔熶細鍚屾鍙戠敓鏀瑰彉',
- ],
- api: demoListApi,
- columns: columns,
- showIndexColumn: false,
- showTableSetting: true,
- tableSetting: { fullScreen: true },
- actionColumn: {
- width: 160,
- title: 'Action',
- dataIndex: 'action',
- // slots: { customRender: 'action' },
- },
- });
- function handleEdit(record: EditRecordRow) {
- currentEditKeyRef.value = record.key;
- record.onEdit?.(true);
- }
-
- function handleCancel(record: EditRecordRow) {
- currentEditKeyRef.value = '';
- record.onEdit?.(false, false);
- }
-
- async function handleSave(record: EditRecordRow) {
- // 鏍￠獙
- msg.loading({ content: '姝ｅ湪淇濆瓨...', duration: 0, key: 'saving' });
- const valid = await record.onValid?.();
- if (valid) {
- try {
- const data = cloneDeep(record.editValueRefs);
- console.log(data);
- //TODO 姝ゅ灏嗘暟鎹彁浜ょ粰鏈嶅姟鍣ㄤ繚瀛�
- // ...
- // 淇濆瓨涔嬪悗鎻愪氦缂栬緫鐘舵��
- const pass = await record.onEdit?.(false, true);
- if (pass) {
- currentEditKeyRef.value = '';
- }
- msg.success({ content: '鏁版嵁宸蹭繚瀛�', key: 'saving' });
- } catch (error) {
- msg.error({ content: '淇濆瓨澶辫触', key: 'saving' });
- }
- } else {
- msg.error({ content: '璇峰～鍐欐纭殑鏁版嵁', key: 'saving' });
- }
- }
-
- function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
- if (!record.editable) {
- return [
- {
- label: '缂栬緫',
- disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
- onClick: handleEdit.bind(null, record),
- },
- ];
- }
- return [
- {
- label: '淇濆瓨',
- onClick: handleSave.bind(null, record, column),
- },
- {
- label: '鍙栨秷',
- popConfirm: {
- title: '鏄惁鍙栨秷缂栬緫',
- confirm: handleCancel.bind(null, record, column),
- },
- },
- ];
- }
-
- function onEditChange({ column, value, record }) {
- // 鏈緥
- if (column.dataIndex === 'id') {
- record.editValueRefs.name4.value = `${value}`;
- }
- console.log(column, value, record);
- }
-
- return {
- registerTable,
- handleEdit,
- createActions,
- onEditChange,
- };
+ const { createMessage: msg } = useMessage();
+ const currentEditKeyRef = ref('');
+ const [registerTable] = useTable({
+ title: '鍙紪杈戣绀轰緥',
+ titleHelpMessage: [
+ '鏈緥涓慨鏀筟鏁板瓧杈撳叆妗哴杩欎竴鍒楁椂锛屽悓涓�琛岀殑[杩滅▼涓嬫媺]鍒楃殑褰撳墠缂栬緫鏁版嵁涔熶細鍚屾鍙戠敓鏀瑰彉',
+ ],
+ api: demoListApi,
+ columns: columns,
+ showIndexColumn: false,
+ showTableSetting: true,
+ tableSetting: { fullScreen: true },
+ actionColumn: {
+ width: 160,
+ title: 'Action',
+ dataIndex: 'action',
},
});
+
+ function handleEdit(record: EditRecordRow) {
+ currentEditKeyRef.value = record.key;
+ record.onEdit?.(true);
+ }
+
+ function handleCancel(record: EditRecordRow) {
+ currentEditKeyRef.value = '';
+ record.onEdit?.(false, false);
+ }
+
+ async function handleSave(record: EditRecordRow) {
+ // 鏍￠獙
+ msg.loading({ content: '姝ｅ湪淇濆瓨...', duration: 0, key: 'saving' });
+ const valid = await record.onValid?.();
+ if (valid) {
+ try {
+ const data = cloneDeep(record.editValueRefs);
+ console.log(data);
+ //TODO 姝ゅ灏嗘暟鎹彁浜ょ粰鏈嶅姟鍣ㄤ繚瀛�
+ // ...
+ // 淇濆瓨涔嬪悗鎻愪氦缂栬緫鐘舵��
+ const pass = await record.onEdit?.(false, true);
+ if (pass) {
+ currentEditKeyRef.value = '';
+ }
+ msg.success({ content: '鏁版嵁宸蹭繚瀛�', key: 'saving' });
+ } catch (error) {
+ msg.error({ content: '淇濆瓨澶辫触', key: 'saving' });
+ }
+ } else {
+ msg.error({ content: '璇峰～鍐欐纭殑鏁版嵁', key: 'saving' });
+ }
+ }
+
+ function createActions(record: EditRecordRow): ActionItem[] {
+ if (!record.editable) {
+ return [
+ {
+ label: '缂栬緫',
+ disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+ onClick: handleEdit.bind(null, record),
+ },
+ ];
+ }
+ return [
+ {
+ label: '淇濆瓨',
+ onClick: handleSave.bind(null, record),
+ },
+ {
+ label: '鍙栨秷',
+ popConfirm: {
+ title: '鏄惁鍙栨秷缂栬緫',
+ confirm: handleCancel.bind(null, record),
+ },
+ },
+ ];
+ }
+
+ function onEditChange({ column, value, record }) {
+ // 鏈緥
+ if (column.dataIndex === 'id') {
+ record.editValueRefs.name4.value = `${value}`;
+ }
+ console.log(column, value, record);
+ }
</script>
--
Gitblit v1.9.3