init

15a7f651 · 吴上海 · 15a7f651 · 15a7f651 · 15a7f651 · 15a7f651
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
--- a/README.md
+++ b/README.md
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "components",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^1.0.1",
+    "element-plus": "^2.0.5",
+    "mockjs": "^1.1.0",
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.2.0",
+    "unplugin-auto-import": "^0.6.1",
+    "unplugin-vue-components": "^0.17.21",
+    "vite": "^2.8.0"
+  }
+}
--- a/prettier.config.js
+++ b/prettier.config.js
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'always',
+  htmlWhitespaceSensitivity: 'ignore',
+  vueIndentScriptAndStyle: true,
+  endOfLine: 'lf',
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
+<script setup>
+  import Table from './components/table/index.vue'
+  import schema from './schema.json'
+  import * as handles from './handles'
+</script>
+
+<template>
+  <Table :schema="schema" :handles="handles" />
+</template>
+
+<style></style>
--- a/src/components/table/components/ElSearch.vue
+++ b/src/components/table/components/ElSearch.vue
+<script setup>
+  import { resolveComponent, h } from 'vue'
+  const ElForm = resolveComponent('ElForm')
+  const ElFormItem = resolveComponent('ElFormItem')
+  const ElInput = resolveComponent('ElInput')
+  const ElButton = resolveComponent('ElButton')
+
+  const props = defineProps({
+    schema: Object,
+  })
+  const emit = defineEmits(['click'])
+  const {
+    table: { column },
+    search,
+  } = props.schema
+  const list = [...search, ...column.filter((item) => item.search)]
+
+  const render = () => {
+    return h(
+      ElForm,
+      {
+        inline: true,
+      },
+      () => [
+        ...list.map((item) => h(ElFormItem, item, () => h(ElInput, item))),
+        h(ElFormItem, null, () =>
+          h(
+            ElButton,
+            {
+              type: 'primary',
+              onClick() {
+                emit('click', {
+                  handle: item.handle,
+                })
+              },
+            },
+            () => '查询'
+          )
+        ),
+      ]
+    )
+  }
+</script>
+
+<template>
+  <render />
+</template>
+
+<style></style>
--- a/src/components/table/components/ElTable.vue
+++ b/src/components/table/components/ElTable.vue
+<script setup>
+  import { resolveComponent, h } from 'vue'
+  const ElTable = resolveComponent('ElTable')
+  const ElTableColumn = resolveComponent('ElTableColumn')
+  const props = defineProps({
+    schema: Object,
+    data: Array,
+  })
+  const {
+    table: { column },
+  } = props.schema
+
+  const render = () => {
+    return h(
+      ElTable,
+      {
+        data: props.data,
+      },
+      () => column.map((item) => h(ElTableColumn, item))
+    )
+  }
+</script>
+
+<template>
+  <render />
+</template>
+
+<style></style>
--- a/src/components/table/components/ElTools.vue
+++ b/src/components/table/components/ElTools.vue
+<script setup>
+  import { resolveComponent, h } from 'vue'
+  const ElButton = resolveComponent('ElButton')
+
+  const props = defineProps({
+    schema: Object,
+  })
+  const { tools } = props.schema
+
+  const emit = defineEmits(['click'])
+  const render = () => {
+    return h(
+      'div',
+      null,
+      tools.map((item) =>
+        h(
+          ElButton,
+          {
+            ...item,
+            onClick() {
+              emit('click', {
+                handle: item.handle,
+              })
+            },
+          },
+          () => item.label
+        )
+      )
+    )
+  }
+</script>
+
+<template>
+  <render />
+</template>
+
+<style></style>
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
+<template>
+  <ElSearch :schema="schema" />
+  <ElTools :schema="schema" @click="handles" />
+  <ElTable :schema="schema" :data="data" />
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import ElSearch from './components/ElSearch.vue'
+  import ElTools from './components/ElTools.vue'
+  import ElTable from './components/ElTable.vue'
+
+  const props = defineProps({
+    schema: Object,
+    handles: Object,
+  })
+
+  const data = ref([])
+
+  const handles = (state) => {
+    props.handles[state.handle]({
+      data,
+    })
+  }
+</script>
+
+<style></style>
--- a/src/handles.js
+++ b/src/handles.js
+import { getList } from './mock'
+
+const query = ({ data }) => {
+  data.value = getList().data
+}
+
+export { query }
--- a/src/main.js
+++ b/src/main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+createApp(App).use(ElementPlus).mount('#app')
--- a/src/mock.js
+++ b/src/mock.js
+import Mock from 'mockjs'
+
+function getList() {
+  return Mock.mock({
+    'data|1-10': [
+      {
+        'id|+1': 1,
+        name: /[\u4e00-\u9fa5]{2,3}/,
+        phone: /[1-9]{11}/,
+      },
+    ],
+    code: 200,
+  })
+}
+
+export { getList }
--- a/src/schema.json
+++ b/src/schema.json
+{
+  "search": [
+    {
+      "typedef": "ElInput",
+      "prop": "key",
+      "label": "关键字",
+      "placeholder": "请输入关键字"
+    },
+    {
+      "typedef": "ElButton",
+      "label": "查询",
+      "type": "primary",
+      "handle": "query"
+    }
+  ],
+  "tools": [
+    {
+      "label": "删除",
+      "type": "primary",
+      "handle": "delete"
+    }
+  ],
+  "table": {
+    "align": "center",
+    "show-overflow-tooltip": true,
+    "column": [
+      {
+        "prop": "name",
+        "label": "姓名"
+      },
+      {
+        "prop": "phone",
+        "label": "手机号码"
+      }
+    ]
+  }
+}
--- a/vite.config.js
+++ b/vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})