npmapps 1.1.6 → 1.3.1

package/app/wujie-wk/wujie-vue2-child/src/views/element/elTableJsx/formTable.vue

@@ -1,595 +0,0 @@
-<template>
-  <div>
-    <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 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: {
-    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/wujie-wk/wujie-vue2-child/src/views/element/elTableJsx/index.vue

@@ -1,29 +0,0 @@
-<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>