feat:新增pure-admin前端

Yi.Pure.Vue3/src/views/table/edit/demo2/columns.tsx

@@ -0,0 +1,116 @@
+import { ref } from "vue";
+import { tableData, options } from "../data";
+import { clone, delObjectProperty } from "@pureadmin/utils";
+
+export function useColumns() {
+  const editMap = ref({});
+  const dataList = ref(clone(tableData, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-input v-model={row.name} />
+          ) : (
+            <p>{row.name}</p>
+          )}
+        </>
+      )
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-switch
+              v-model={row.sex}
+              inline-prompt
+              active-value={0}
+              inactive-value={1}
+              active-text="男"
+              inactive-text="女"
+            />
+          ) : (
+            <p>{row.sex === 0 ? "男" : "女"}</p>
+          )}
+        </>
+      )
+    },
+    {
+      label: "爱好",
+      prop: "hobby",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-select v-model={row.hobby} clearable placeholder="请选择爱好">
+              {options.map(item => {
+                return (
+                  <el-option
+                    key={item.value}
+                    label={item.label}
+                    value={item.value}
+                  />
+                );
+              })}
+            </el-select>
+          ) : (
+            <el-tag type="primary">
+              {options.filter(opt => opt.value == row.hobby)[0]?.label}
+            </el-tag>
+          )}
+        </>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-date-picker
+              v-model={row.date}
+              type="date"
+              format="YYYY/MM/DD"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择日期"
+            />
+          ) : (
+            <p>{row.date}</p>
+          )}
+        </>
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function onEdit(row, index) {
+    editMap.value[index] = Object.assign({ ...row, editable: true });
+  }
+
+  function onSave(index) {
+    editMap.value[index].editable = false;
+  }
+
+  function onCancel(index) {
+    editMap.value[index].editable = false;
+    dataList.value[index] = delObjectProperty(editMap.value[index], "editable");
+  }
+
+  return {
+    editMap,
+    columns,
+    dataList,
+    onEdit,
+    onSave,
+    onCancel
+  };
+}

Yi.Pure.Vue3/src/views/table/edit/demo2/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { editMap, columns, dataList, onEdit, onSave, onCancel } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar>
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      row-key="id"
+      align-whole="center"
+      :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }"
+      :data="dataList"
+      :columns="columns"
+    >
+      <template #operation="{ row, index }">
+        <el-button
+          v-if="!editMap[index]?.editable"
+          class="reset-margin"
+          link
+          type="primary"
+          @click="onEdit(row, index)"
+        >
+          修改
+        </el-button>
+        <div v-else>
+          <el-button
+            class="reset-margin"
+            link
+            type="primary"
+            @click="onSave(index)"
+          >
+            保存
+          </el-button>
+          <el-button class="reset-margin" link @click="onCancel(index)">
+            取消
+          </el-button>
+        </div>
+      </template>
+    </pure-table>
+  </div>
+</template>