npmapps 1.0.24 → 1.0.26

package/app/src/views/element/elTableJsx/formTable.vue

@@ -0,0 +1,598 @@
+<template>
+  <div>
+    <PageHeader title="表单表格" description="展示带表单项编辑的 JSX 表格，支持 input/select/switch/slider/date-picker 等单元格编辑" usage="input.type 指定单元格编辑器类型（text/select/number/switch/slider/date-picker 等），showInputType 控制触发方式（click/doubleClick）" />
+    <elTableJsx ref="elTableJsx" :columns="columns" :tableData="tableData" stripe @cell-click="onCellClick"
+      :formOptions="formOptions">
+      <template #header-left>
+        <el-button type="primary" size="mini" @click="test">测试</el-button>
+      </template>
+      <!-- <template #header-right>
+
+      </template> -->
+    </elTableJsx>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@/components/PageHeader/index.vue';
+import elTableJsx from "./elTableJsx.vue";
+import dialogInput from "./dialogInput.vue";
+const list = [
+  {
+    name: "",
+    gender: "1",
+    gender1: "1",
+    age: 28,
+    age1: 28,
+    status: true,
+    progress: 10,
+    time: "",
+    date: '2024-05-01',
+    phone: "13812345678",
+    email: "",
+    address: "",
+    department: "",
+    position: "高级工程师",
+    entryDate: "2020-01-15 11:11:11",
+  },
+  {
+    name: "李四",
+    gender: "",
+    gender1: "",
+    age: 32,
+    age1: 32,
+    status: false,
+    progress: 10,
+    time: "12:00:00",
+    date: '',
+    phone: "13987654321",
+    email: "lisi@example.com",
+    address: "上海市浦东新区陆家嘴环路888号",
+    department: "产品部",
+    position: "产品经理",
+    entryDate: "2019-06-20 11:11:11",
+  },
+  {
+    name: "",
+    gender: "1",
+    gender1: "1",
+
+    age: 35,
+    age1: 35,
+    status: true,
+    progress: 10,
+    time: "12:00:00",
+    date: '2024-05-01',
+    phone: "13567891234",
+    email: "wangwu@example.com",
+    address: "广州市天河区珠江新城华夏路10号",
+    department: "市场部",
+    position: "市场总监",
+    entryDate: "2018-03-10 11:11:11",
+  },
+  {
+    name: "赵六",
+    gender: "0",
+    gender1: "0",
+    age: 26,
+    age1: 26,
+    status: true,
+    progress: 10,
+    time: "12:00:00",
+    date: '2024-05-01',
+    phone: "13789012345",
+    email: "zhaoliu@example.com",
+    address: "深圳市南山区科技园科发路8号",
+    department: "设计部",
+    position: "UI设计师",
+    entryDate: "2021-09-01 11:11:11",
+  },
+  {
+    name: "钱七",
+    gender: "1",
+    gender1: "1",
+    age: 40,
+    age1: 40,
+    status: false,
+    progress: 10,
+    time: "12:00:00",
+    date: '2024-05-01',
+    phone: "13456789012",
+    email: "qianqi@example.com",
+    address: "成都市武侯区天府大道1234号",
+    department: "财务部",
+    position: "财务总监",
+    entryDate: "2017-12-05 11:11:11",
+  },
+  {
+    name: "孙八",
+    gender: "1",
+    gender1: "1",
+    age: 29,
+    age1: 29,
+    status: true,
+    progress: 10,
+    time: "12:00:00",
+    date: '2024-05-01',
+    phone: "13234567890",
+    email: "sunba@example.com",
+    address: "武汉市江汉区解放大道456号",
+    department: "人力资源部",
+    position: "HR经理",
+    entryDate: "2020-07-15 11:11:11",
+  },
+];
+const getList = () => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve(list);
+    }, 1000);
+  });
+};
+export default {
+  components: {
+    PageHeader,
+    elTableJsx,
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: "基本信息",
+          key: "basic",
+          width: "600",
+          props: {
+            align: "center",
+          },
+          children: [
+            {
+              label: "姓名(input始终显示/必填)",
+              key: "name",
+              input: {
+                type: "text",
+                showInputType: "always",
+                rules: [
+                  {
+                    required: true,
+                    message: "请输入姓名",
+                    trigger: "blur",
+                  },
+                ],
+                props: {
+                  clearable: true,
+                },
+                on: {
+                  change: (val) => {
+                    console.log("change", val);
+                  },
+                  blur: (val) => {
+                    console.log("blur", val);
+                  },
+                },
+              },
+              props: {
+                align: "center",
+                width: "220",
+              },
+              slots: {
+                header: (slotData) => {
+                  const { column } = slotData;
+                  return (
+                    <span class={{ required: column.input && column.input.rules && column.input.rules.length }}>
+                      {column.label + 1}
+                    </span>
+                  )
+                }
+              }
+            },
+            {
+              label: "性别(必填)",
+              key: "gender",
+              input: {
+                type: "select",
+                columnOptions: {
+                  formatter: ({ row }) => {
+                    if (row["gender"] === "1") {
+                      return "男";
+                    } else if (row["gender"] === "0") {
+                      return "女";
+                    } else {
+                      return <i class="el-icon-edit"></i>;
+                    }
+                  },
+                },
+                // showInputType: 'always',
+                rules: [
+                  {
+                    required: true,
+                    message: "请选择性别",
+                    trigger: "blur",
+                  },
+                ],
+                options: [
+                  {
+                    label: "男",
+                    value: "1",
+                  },
+                  {
+                    label: "女",
+                    value: "0",
+                  },
+                ],
+                delayedShutdown: 300,
+                on: {
+                  change: (val) => {
+                    const { e: value, row, vm } = val;
+                    if (value === '1') {
+                      this.$set(row, "progress", 80);
+                      this.$set(row, "department", '测试');
+                      vm.__columns[0].children[0].input.rules = [];
+                      this.$nextTick(() => {
+                        vm.updateView()
+                      })
+
+                    }
+                    if (value === '0') {
+                      this.$set(row, "progress", 20);
+                      this.$set(row, "department", '测试222');
+                      vm.__columns[0].children[0].input.rules = [
+                        {
+                          required: true,
+                          message: "请输入姓名",
+                          trigger: "blur",
+                        },
+                      ]
+                     this.$nextTick(() => {
+                        vm.updateView()
+                      })
+
+                    }
+                  },
+                }
+              },
+              props: {
+                align: "center",
+                width: "180",
+              },
+            },
+            {
+              label: "性别(双击)",
+              key: "gender1",
+              input: {
+                type: "select",
+                columnOptions: {
+                  formatter: ({ row }) => {
+                    if (row["gender1"] === "1") {
+                      return "男";
+                    } else if (row["gender1"] === "0") {
+                      return "女";
+                    } else {
+                      return <i class="el-icon-edit"></i>;
+                    }
+                  },
+                },
+                showInputType: 'doubleClick',
+                options: [
+                  {
+                    label: "男",
+                    value: "1",
+                  },
+                  {
+                    label: "女",
+                    value: "0",
+                  },
+                ],
+              },
+              props: {
+                align: "center",
+                width: "180",
+              },
+            },
+            {
+              label: "年龄",
+              key: "age",
+              input: {
+                type: "number",
+              },
+              props: {
+                align: "center",
+                width: "180",
+              },
+            },
+            {
+              label: "年龄1(doubleClick)",
+              key: "age1",
+              input: {
+                type: "number",
+                showInputType: "doubleClick",
+              },
+              props: {
+                align: "center",
+                width: "180",
+              },
+            },
+          ],
+        },
+        {
+          label: "状态",
+          key: "status",
+          input: {
+            type: "switch",
+            // showInputType: "always",
+            columnOptions: {
+              formatter: ({ row }) => {
+                if (row["status"]) {
+                  return "启用";
+                } else if (!row["status"]) {
+                  return "禁用";
+                }
+              },
+            },
+            delayedShutdown: 300
+          },
+
+          props: {
+            align: "center",
+            width: "180",
+          }
+        },
+        {
+          label: "进度",
+          key: "progress",
+          input: {
+            type: "slider",
+            delayedShutdown: 300
+            // showInputType: "always",
+            // props: {
+            //   disabled: true,
+            // }
+          },
+          props: {
+            align: "center",
+            width: "180",
+          }
+        },
+        {
+          label: '时间',
+          key: 'time',
+          input: {
+            type: 'time-picker',
+            // showInputType: 'always',
+            props: {
+              valueFormat: 'HH:mm:ss',
+              format: 'HH:mm:ss',
+            }
+          },
+          props: {
+            align: "center",
+            width: "180",
+          }
+        },
+        {
+          label: '日期',
+          key: 'date',
+          input: {
+            type: 'date-picker',
+            // showInputType: 'always',
+            props: {
+              valueFormat: 'yyyy-MM-dd',
+              format: 'yyyy-MM-dd',
+            },
+            rules: [
+              {
+                required: true,
+                message: "请输入日期",
+                trigger: "blur",
+              },
+            ]
+          },
+          props: {
+            align: "center",
+            width: "180",
+          }
+        },
+        {
+          label: "电话(点击不聚焦)",
+          key: "phone",
+          input: {
+            type: "text",
+            columnOptions: {
+              formatter: ({ row }) => {
+                return <el-tag type="success">{row["phone"]}</el-tag>;
+              },
+              clickInputNoFoucs: true, // 点击不聚焦
+            },
+            props: {
+              clearable: true,
+            },
+            on: {
+              change: (val) => {
+                console.log("change", val);
+              },
+              blur: (val) => {
+                console.log("blur", val);
+              },
+            },
+          },
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "邮箱",
+          key: "email",
+          input: {
+
+            type: "text",
+            rules: [
+              {
+                required: true,
+                message: "请输入邮箱",
+                trigger: "blur",
+              },
+            ],
+          },
+          props: {
+            align: "center",
+            minWidth: "300",
+          },
+        },
+        {
+          label: "住址(doubleClick)",
+          key: "address",
+          input: {
+            type: "text",
+            showInputType: "doubleClick",
+            rules: [
+              {
+                required: true,
+                message: "请输入地址",
+                trigger: "blur",
+              },
+            ],
+            props: {
+              clearable: true,
+            }
+          },
+          props: {
+            align: "center",
+            minWidth: "350",
+          },
+        },
+
+        {
+          label: "部门(customize)",
+          key: "department",
+          input: {
+            type: "customize",
+            slotFn: (slotData) => {
+              // console.log(slotData, "slotFn");
+              return <dialogInput slotData={slotData} />
+            },
+            rules: [
+              {
+                required: true,
+                message: "请输入部门",
+                trigger: "blur",
+              },
+            ]
+          },
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "职位",
+          key: "position",
+          input: {
+            type: "text",
+          },
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "入职时间",
+          key: "entryDate",
+          input: {
+            type: "date-picker",
+            props: {
+              type: "datetime",
+              valueFormat: "yyyy-MM-dd HH:mm:ss",
+              format: "yyyy-MM-dd HH:mm:ss",
+            },
+          },
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "操作",
+          key: "action",
+          props: {
+            align: "center",
+            minWidth: "250",
+            fixed: "right",
+          },
+          input: {
+            type: "customize",
+            props: {
+              // disabled: true
+            },
+            slotFn: (slotData) => {
+              const { row, column, vm, $index } = slotData;
+              return (
+                <span>
+                  <el-button type="primary" size={vm.tableSize} onClick={() => {
+                    vm.spliceTableData($index + 1, 0, {
+                      name: "",
+                      gender: "",
+                      gender1: "",
+                      age: "",
+                      age1: "",
+                      status: false,
+                      progress: 0,
+                      time: "",
+                      date: '',
+                      phone: "",
+                      email: "",
+                      address: "",
+                      department: "",
+                      position: "",
+                      entryDate: "",
+                    })
+                  }}>新增行</el-button>
+                  <el-button disabled={row.status} type="primary" size={vm.tableSize} onClick={() => {
+                    vm.spliceTableData($index, 1)
+                  }}>删除行</el-button>
+                </span>
+              )
+            }
+          },
+
+        }
+      ],
+      formOptions: {
+        show: true,
+        props: {},
+        // 输入框显示模式，always: 点击 click 双击 double-click
+        showInputType: "click",
+      },
+      tableData: [],
+    };
+  },
+  methods: {
+    onCellClick(row, column, cell, event) {
+      console.log("onCellClick", row, column, cell, event);
+    },
+    async test() {
+      console.log("test", this.$refs.elTableJsx.getData());
+      const tableData = this.$refs.elTableJsx.getData();
+      try {
+        await tableData.formRef.validate()
+      } catch (error) {
+        console.log(error, "error");
+      }
+    },
+  },
+  created() {
+    getList().then((res) => {
+      this.tableData = res;
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.required{
+  &::before{
+    content: '*';
+    color: red;
+    margin-right: 4px;
+  }
+}
+</style>

package/app/src/views/element/elTableJsx/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <el-tabs type="border-card" v-model="activeName">
+      <el-tab-pane label="简单表格" name="first">
+        <simple-table v-if="activeName === 'first'"></simple-table>
+      </el-tab-pane>
+      <el-tab-pane label="表单表格" name="second">
+        <form-table v-if="activeName === 'second'"></form-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import simpleTable from "./simpleTable";
+import formTable from "./formTable.vue";
+export default {
+  components: {
+    simpleTable,
+    formTable,
+  },
+  data() {
+    return {
+      activeName: "second",
+    };
+  },
+  methods: {},
+};
+</script>