From b5215b33bfe7a76f996c1bf4acaf2673483f3726 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 23 Nov 2022 18:29:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20`@pureadmin/table`?=
 =?UTF-8?q?=20=E7=BC=96=E8=BE=91=E5=8D=95=E5=85=83=E6=A0=BC=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pure-table/high/data.ts          | 11 +++
 src/views/pure-table/high/edit/columns.tsx | 94 ++++++++++++++++++++++
 src/views/pure-table/high/edit/index.vue   |  9 +++
 src/views/pure-table/high/list.tsx         |  7 ++
 4 files changed, 121 insertions(+)
 create mode 100644 src/views/pure-table/high/edit/columns.tsx
 create mode 100644 src/views/pure-table/high/edit/index.vue

diff --git a/src/views/pure-table/high/data.ts b/src/views/pure-table/high/data.ts
index 0ad9b38e6..a76fdda78 100644
--- a/src/views/pure-table/high/data.ts
+++ b/src/views/pure-table/high/data.ts
@@ -79,10 +79,21 @@ const tableDataDrag = clone(tableData, true).map((item, index) => {
   );
 });
 
+const tableDataEdit = clone(tableData, true).map((item, index) => {
+  return Object.assign(
+    {
+      id: index + 1,
+      date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+    },
+    item
+  );
+});
+
 export {
   tableData,
   tableDataDrag,
   tableDataMore,
+  tableDataEdit,
   tableDataImage,
   tableDataSortable
 };
diff --git a/src/views/pure-table/high/edit/columns.tsx b/src/views/pure-table/high/edit/columns.tsx
new file mode 100644
index 000000000..3dc5426e1
--- /dev/null
+++ b/src/views/pure-table/high/edit/columns.tsx
@@ -0,0 +1,94 @@
+import { ref, computed } from "vue";
+import { tableDataEdit } from "../data";
+import { message } from "@pureadmin/components";
+import { clone, delay } from "@pureadmin/utils";
+
+// 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
+export function useColumns() {
+  const inputValMap = ref({});
+  const activeIndex = ref(-1);
+  const dataList = ref(clone(tableDataEdit, true));
+
+  const comVal = computed(() => {
+    return index => {
+      return inputValMap.value[index]?.value;
+    };
+  });
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id",
+      // class="flex-bc" flex-bc 代表 flex justify-between items-center 具体看 src/style/tailwind.css 文件
+      cellRenderer: ({ row, index }) => (
+        <div
+          class="flex-bc"
+          onMouseenter={() => (activeIndex.value = index)}
+          onMouseleave={() => onMouseleave(index)}
+        >
+          <p v-show={!comVal.value(index)}>{row.id}</p>
+          <el-input
+            v-show={comVal.value(index)}
+            modelValue={comVal.value(index)}
+            onInput={value => onChange(value, index)}
+          />
+          <iconify-icon-offline
+            v-show={comVal.value(index)}
+            icon="check"
+            class="cursor-pointer ml-2 transition delay-100 hover:scale-150 hover:text-red-500"
+            onClick={() => onSure(index)}
+          />
+          <iconify-icon-offline
+            v-show={activeIndex.value === index && !comVal.value(index)}
+            icon="edits"
+            class="cursor-pointer ml-2 transition delay-100 hover:scale-110 hover:text-red-500"
+            onClick={() => onEdit(row, index)}
+          />
+        </div>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  function onEdit({ id }, index) {
+    inputValMap.value[index] = Object.assign({}, inputValMap.value[index], {
+      value: id
+    });
+  }
+
+  function onMouseleave(index) {
+    inputValMap.value[index]?.value
+      ? (activeIndex.value = index)
+      : (activeIndex.value = -1);
+  }
+
+  function onChange(value, index) {
+    inputValMap.value[index].value = value;
+  }
+
+  function onSure(index) {
+    dataList.value[index].id = inputValMap.value[index].value;
+    message.success(
+      `您编辑了第 ${index + 1} 行，编辑后数据为：${JSON.stringify(
+        dataList.value[index]
+      )}`
+    );
+    delay().then(() => (inputValMap.value[index].value = null));
+  }
+
+  return {
+    columns,
+    dataList
+  };
+}
diff --git a/src/views/pure-table/high/edit/index.vue b/src/views/pure-table/high/edit/index.vue
new file mode 100644
index 000000000..03b8484f0
--- /dev/null
+++ b/src/views/pure-table/high/edit/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList } = useColumns();
+</script>
+
+<template>
+  <pure-table row-key="id" border :data="dataList" :columns="columns" />
+</template>
diff --git a/src/views/pure-table/high/list.tsx b/src/views/pure-table/high/list.tsx
index ed5c3d00a..c66161e20 100644
--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@@ -2,6 +2,7 @@ import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
 import Execl from "./execl/index.vue";
+import Edit from "./edit/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
@@ -30,5 +31,11 @@ export const list = [
     content: rendContent("execl"),
     title: "导出execl",
     component: Execl
+  },
+  {
+    key: "edit",
+    content: rendContent("edit"),
+    title: "单元格编辑",
+    component: Edit
   }
 ];