From 0f8bfb954485288519f7553374c31b6db26f5632 Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Mon, 6 Jun 2022 23:13:49 +0800
Subject: [PATCH] =?UTF-8?q?:rocket:=20=E4=BF=AE=E6=94=B9=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=BA=95=E5=B1=82=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kicc-ui/src/components/AMap/src/TaskModal.vue |  73 ++++-
 kicc-ui/src/components/AMap/src/map.data.ts   |  16 +-
 .../src/components/editable/EditableCell.vue  |   8 +-
 .../Table/src/components/editable/index.ts    |  14 +-
 kicc-ui/src/views/map/EditRowTable.vue        | 262 ++++++++++++++++++
 5 files changed, 347 insertions(+), 26 deletions(-)
 create mode 100644 kicc-ui/src/views/map/EditRowTable.vue

diff --git a/kicc-ui/src/components/AMap/src/TaskModal.vue b/kicc-ui/src/components/AMap/src/TaskModal.vue
index d4302ff8..212443a4 100644
--- a/kicc-ui/src/components/AMap/src/TaskModal.vue
+++ b/kicc-ui/src/components/AMap/src/TaskModal.vue
@@ -8,9 +8,12 @@
     <BasicTable @register="registerTable">
       <template #toolbar>
         <a-button type="primary"
-                  @click="handleAdd()"
+                  @click="handleTaskAdd()"
         >新增任务</a-button>
       </template>
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)"/>
+      </template>
     </BasicTable>
     <AForm ref="formElRef"
            :labelCol="{ style: { width: '120px' } }"
@@ -37,12 +40,11 @@
   import { reactive, ref } from 'vue';
   import { Form, Input, Radio, Row, Col } from 'ant-design-vue';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
-  import { BasicTable, useTable, EditRecordRow, BasicColumn } from '/@/components/Table';
+  import { BasicTable, useTable, EditRecordRow, BasicColumn, ActionItem, TableAction } from '/@/components/Table';
   import { formColumns } from './map.data';
 
   /** 类型规范统一声明定义区域 */
   interface WindowState {
-    tag: string;
     modelRef: {
       id: string;
       smallHospital: string;
@@ -50,6 +52,7 @@
       file: string;
     };
     rulesRef: Recordable;
+    currentEditKeyRef: string;
   }
 
   /** 通用变量统一声明区域 */
@@ -63,7 +66,6 @@
 
   const formElRef = ref();
   const state = reactive<WindowState>({
-    tag: '',
     modelRef: {
       id: undefined!,
       smallHospital: undefined!,
@@ -77,7 +79,8 @@
       largeHospital: [
         { required: true, whitespace: true, message: '上级医院不能为空', validateTrigger: 'blur' }
       ]
-    }
+    },
+    currentEditKeyRef: ''
   });
   const emit = defineEmits(['success', 'register']);
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
@@ -108,18 +111,68 @@
     showTableSetting: false,
     bordered: true,
     showIndexColumn: false,
-    canResize: false
+    canResize: false,
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    }
   });
 
   /** 处理新增 */
-  function handleAdd() {
+  function handleTaskAdd() {
     getDataSource().push({
-      id: '1',
-      smallHospitalId: '1',
-      largeHospitalId: '1'
+      id: '',
+      smallHospitalId: '',
+      largeHospitalId: ''
     });
   }
 
+  /** 创建操作列 */
+  function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+    if (!record.editable) {
+      return [
+        {
+          label: '编辑',
+          disabled: state.currentEditKeyRef ? state.currentEditKeyRef !== 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 handleEdit(record: EditRecordRow) {
+    state.currentEditKeyRef = record.key;
+    record.onEdit?.(true);
+  }
+
+  function handleCancel(record: EditRecordRow) {
+    state.currentEditKeyRef = '';
+    record.onEdit?.(false, false);
+  }
+
+  async function handleSave(record: EditRecordRow) {
+    const valid = await record.onValid?.();
+    if (valid) {
+      const pass = await record.onEdit?.(false, true);
+      pass && (currentEditKeyRef.value = '');
+    }
+  }
+
   /** 处理弹出框提交 */
   async function handleSubmit() {
     console.log(getDataSource());
diff --git a/kicc-ui/src/components/AMap/src/map.data.ts b/kicc-ui/src/components/AMap/src/map.data.ts
index 8994bb51..872d17b1 100644
--- a/kicc-ui/src/components/AMap/src/map.data.ts
+++ b/kicc-ui/src/components/AMap/src/map.data.ts
@@ -45,8 +45,8 @@ export const formColumns: BasicColumn[] = [
   {
     title: '下级医院',
     dataIndex: 'smallHospitalId',
-    edit: true,
     editRow: true,
+    editRule: true,
     editComponent: 'Select',
     editComponentProps: {
       options: [
@@ -67,25 +67,25 @@ export const formColumns: BasicColumn[] = [
   },
   {
     title: '上级医院',
-    dataIndex: '0',
-    edit: true,
+    dataIndex: 'largeHospitalId',
     editRow: true,
+    editRule: true,
     editComponent: 'Select',
     editComponentProps: {
       options: [
         {
           label: 'Option1',
-          value: '1',
+          value: '1'
         },
         {
           label: 'Option2',
-          value: '2',
+          value: '2'
         },
         {
           label: 'Option3',
-          value: '3',
-        },
-      ],
+          value: '3'
+        }
+      ]
     }
   }
 ];
diff --git a/kicc-ui/src/components/Table/src/components/editable/EditableCell.vue b/kicc-ui/src/components/Table/src/components/editable/EditableCell.vue
index 1bb75125..574a8c75 100644
--- a/kicc-ui/src/components/Table/src/components/editable/EditableCell.vue
+++ b/kicc-ui/src/components/Table/src/components/editable/EditableCell.vue
@@ -324,13 +324,7 @@
         /* eslint-disable */
         props.record.onSubmitEdit = async () => {
           if (isArray(props.record?.submitCbs)) {
-            const validFns = (props.record?.validCbs || []).map((fn) => fn());
-
-            const res = await Promise.all(validFns);
-
-            const pass = res.every((item) => !!item);
-
-            if (!pass) return;
+            if (!props.record?.onValid?.()) return;
             const submitFns = props.record?.submitCbs || [];
             submitFns.forEach((fn) => fn(false, false));
             table.emit?.('edit-row-end');
diff --git a/kicc-ui/src/components/Table/src/components/editable/index.ts b/kicc-ui/src/components/Table/src/components/editable/index.ts
index 4ea515b5..bfaff50c 100644
--- a/kicc-ui/src/components/Table/src/components/editable/index.ts
+++ b/kicc-ui/src/components/Table/src/components/editable/index.ts
@@ -1,7 +1,7 @@
 import type { BasicColumn } from '/@/components/Table/src/types/table';
 
 import { h, Ref } from 'vue';
-
+import { isArray } from '/@/utils/is';
 import EditableCell from './EditableCell.vue';
 
 interface Params {
@@ -12,12 +12,23 @@ interface Params {
 
 export function renderEditCell(column: BasicColumn) {
   return ({ text: value, record, index }: Params) => {
+    record.onValid = async () => {
+      if (isArray(record?.validCbs)) {
+        const validFns = (record?.validCbs || []).map((fn) => fn());
+        const res = await Promise.all(validFns);
+        return res.every((item) => !!item);
+      } else {
+        return false;
+      }
+    };
+
     record.onEdit = async (edit: boolean, submit = false) => {
       if (!submit) {
         record.editable = edit;
       }
 
       if (!edit && submit) {
+        if (!(await record.onValid())) return false;
         const res = await record.onSubmitEdit?.();
         if (res) {
           record.editable = false;
@@ -44,6 +55,7 @@ export function renderEditCell(column: BasicColumn) {
 export type EditRecordRow<T = Recordable> = Partial<
   {
     onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
+    onValid: () => Promise<boolean>;
     editable: boolean;
     onCancel: Fn;
     onSubmit: Fn;
diff --git a/kicc-ui/src/views/map/EditRowTable.vue b/kicc-ui/src/views/map/EditRowTable.vue
new file mode 100644
index 00000000..da7e65c3
--- /dev/null
+++ b/kicc-ui/src/views/map/EditRowTable.vue
@@ -0,0 +1,262 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" @edit-change="onEditChange">
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    BasicColumn,
+    ActionItem,
+    EditRecordRow,
+  } from '/@/components/Table';
+  import { cloneDeep } from 'lodash-es';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const columns: BasicColumn[] = [
+    {
+      title: '输入框',
+      dataIndex: 'name',
+      editRow: true,
+      editComponentProps: {
+        prefix: '$',
+      },
+      width: 150,
+    },
+    {
+      title: '默认输入状态',
+      dataIndex: 'name7',
+      editRow: true,
+      width: 150,
+    },
+    {
+      title: '输入框校验',
+      dataIndex: 'name1',
+      editRow: true,
+      align: 'left',
+      // 默认必填校验
+      editRule: true,
+      width: 150,
+    },
+    {
+      title: '输入框函数校验',
+      dataIndex: 'name2',
+      editRow: true,
+      align: 'right',
+      editRule: async (text) => {
+        if (text === '2') {
+          return '不能输入该值';
+        }
+        return '';
+      },
+    },
+    {
+      title: '数字输入框',
+      dataIndex: 'id',
+      editRow: true,
+      editRule: true,
+      editComponent: 'InputNumber',
+      width: 150,
+    },
+    {
+      title: '下拉框',
+      dataIndex: 'name3',
+      editRow: true,
+      editComponent: 'Select',
+      editComponentProps: {
+        options: [
+          {
+            label: 'Option1',
+            value: '1',
+          },
+          {
+            label: 'Option2',
+            value: '2',
+          },
+          {
+            label: 'Option3',
+            value: '3',
+          },
+        ],
+      },
+      width: 200,
+    },
+    {
+      title: '远程下拉',
+      dataIndex: 'name4',
+      editRow: true,
+      editComponent: 'ApiSelect',
+      width: 200,
+    },
+    {
+      title: '远程下拉树',
+      dataIndex: 'name8',
+      editRow: true,
+      editComponent: 'ApiTreeSelect',
+      editRule: false,
+      width: 200,
+    },
+    {
+      title: '日期选择',
+      dataIndex: 'date',
+      editRow: true,
+      editComponent: 'DatePicker',
+      editComponentProps: {
+        valueFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD',
+      },
+      width: 150,
+    },
+    {
+      title: '时间选择',
+      dataIndex: 'time',
+      editRow: true,
+      editComponent: 'TimePicker',
+      editComponentProps: {
+        valueFormat: 'HH:mm',
+        format: 'HH:mm',
+      },
+      width: 100,
+    },
+    {
+      title: '勾选框',
+      dataIndex: 'name5',
+      editRow: true,
+
+      editComponent: 'Checkbox',
+      editValueMap: (value) => {
+        return value ? '是' : '否';
+      },
+      width: 100,
+    },
+    {
+      title: '开关',
+      dataIndex: 'name6',
+      editRow: true,
+      editComponent: 'Switch',
+      editValueMap: (value) => {
+        return value ? '开' : '关';
+      },
+      width: 100,
+    },
+  ];
+  export default defineComponent({
+    components: { BasicTable, TableAction },
+    setup() {
+      const { createMessage: msg } = useMessage();
+      const currentEditKeyRef = ref('');
+      const [registerTable, { getDataSource }] = useTable({
+        title: '可编辑行示例',
+        titleHelpMessage: [
+          '本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
+        ],
+        dataSource: [{
+          date: "1981-11-27",
+          id: "0",
+          name: "",
+          name1: "曾刚",
+          name2: "杨伟",
+          name3: "赖静",
+          name4: "曹平",
+          name5: "邱勇",
+          name6: "韩刚",
+          name7: "乔磊",
+          name8: "杨娟",
+          time: "03:14"
+        }],
+        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) {
+        console.log(getDataSource(),record)
+        // 校验
+        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,
+      };
+    },
+  });
+</script>