demo

.gitignore

@@ -9,3 +9,4 @@ docs/_book
 # TODO: where does this rule come from?
 test/
 
+/node_modules

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

examples/App.vue

@@ -0,0 +1,53 @@
+<template>
+    <WkbTag>ssss</WkbTag>
+    <ListTable :data="data" :height="500" :props="prop"></ListTable>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted } from "vue";
+import { useStore } from "vuex";
+import { WkbTag, ListTable } from "../packages";
+
+const store = useStore();
+
+const data = [
+    { caseName: 111, taskName: 111, userId: 'test', content: 'content', createTime: 'createTime' }
+]
+
+const prop = [
+    {
+        code: "caseName",
+        name: "案件名称",
+        width: 110,
+    },
+    {
+        code: "taskName",
+        name: "任务名称",
+        width: 110,
+    },
+    {
+        code: "userId",
+        name: "用户名",
+        width: 100,
+    },
+    {
+        code: "content",
+        name: "日志内容",
+        width: 500,
+    },
+    {
+        code: "createTime",
+        name: "产生时间",
+        width: 170,
+    },
+];
+
+onMounted(() => {
+
+});
+
+</script>
+
+<style>
+@charset "UTF-8";
+</style>

examples/main.ts

@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
+
+const app = createApp(App);
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component);
+}
+app.use(ElementPlus, { size: 'default', locale: zhCn });
+app.use(store).use(router).mount('#app');

examples/router/index.ts

@@ -0,0 +1,11 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+
+const routes: Array<RouteRecordRaw> = [
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;

examples/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

examples/store/actions.ts

@@ -0,0 +1 @@
+export default {};

examples/store/index.ts

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex';
+import state from './state';
+import mutations from './mutations';
+import actions from './actions';
+
+export default createStore({
+  state,
+  getters: {},
+  mutations,
+  actions,
+  modules: {},
+});

examples/store/mutations.js

@@ -0,0 +1 @@
+export default {};

examples/store/state.ts

@@ -0,0 +1 @@
+export default {};

package.json

@@ -0,0 +1,48 @@
+{
+    "name": "noob",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {
+        "core-js": "^3.8.3",
+        "vue": "^3.2.13",
+        "vue-class-component": "^8.0.0-0",
+        "element-plus": "2.2.18",
+        "vue-router": "^4.0.3",
+        "vuex": "^4.0.0"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "~5.0.0",
+        "@vue/cli-plugin-router": "~5.0.0",
+        "@vue/cli-plugin-typescript": "~5.0.0",
+        "@vue/cli-plugin-vuex": "~5.0.0",
+        "@vue/cli-service": "~5.0.0",
+        "sass": "^1.32.7",
+        "sass-loader": "^12.0.0",
+        "typescript": "~4.5.5"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/vue3-essential",
+            "@vue/typescript/recommended"
+        ],
+        "parserOptions": {
+            "ecmaVersion": 2020
+        },
+        "rules": {}
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead",
+        "not ie 11"
+    ]
+}

packages/index.ts

@@ -0,0 +1,4 @@
+import WkbTag from './tag';
+import ListTable from './list-table';
+
+export { WkbTag, ListTable };

packages/list-table/index.ts

@@ -0,0 +1,2 @@
+import listTable from "./src/listTable.vue"
+export default listTable;

packages/list-table/src/listTable.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="my-table">
+        <el-table :data="page ? data.data : data"
+            :height="height ? height : (page ? state.sizes.pTableHei : state.sizes.tableHei)" highlight-current-row>
+            <el-table-column v-for="item in props" :key="item.code" :prop="item.code" :label="item.name"
+                :min-width="item.width" :width="item.type ? item.width : ''" :align="item.align ? item.align : 'center'"
+                show-overflow-tooltip :formatter="formatter">
+                <template v-if="item.slot" #default="scope">
+                    <slot :name="item.code" :row="scope.row"></slot>
+                </template>
+            </el-table-column>
+            <el-table-column v-if="prop.actionWidth" label="操作" :min-width="prop.actionWidth" align="center">
+                <template #default="scope">
+                    <slot v-bind:row="scope.row" v-bind:$index="scope.$index"></slot>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+    <div v-if="page" class="my-pagination">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="example.page"
+            :page-sizes="[10, 20, 50, 100, 200]" :page-size="example.size" layout="total, sizes, prev, pager, next, jumper"
+            :total="data.total">
+        </el-pagination>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, defineEmits, defineProps } from "vue";
+
+const {
+    state: { dict },
+} = useStore();
+
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: null
+    },
+    props: {
+        type: Array<any>(),
+        default: [],
+    },
+    page: {
+        type: Boolean,
+        default: false,
+    },
+    actionWidth: {
+        type: Number,
+        default: null,
+    },
+    height: {
+        type: Number,
+        default: null,
+    },
+    example: {
+        type: Object,
+        default: null,
+    },
+});
+const { state } = useStore();
+
+const emit = defineEmits(["query"]);
+
+const handleSizeChange = (val) => {
+    prop.example.size = val;
+    emit("query");
+};
+
+const handleCurrentChange = (val) => {
+    prop.example.page = val;
+    emit("query");
+};
+
+const getValue = (
+    row: any,
+    column: string,
+    value: any,
+    index?: number
+) => {
+    if ((value == null || value == '') && value !== 0) {
+        return '--';
+    }
+    return value;
+};
+
+const formatter = (row: any, column: any, value: any, index: number) => {
+    if (row.scheme)
+        return formatterByDist(row.scheme + '_' + column.property, value);
+    return getValue(null, '', value);
+};
+
+const formatterByDist = (dictKey, value) => {
+    if (!dictKey) {
+        return getValue(null, '', value);
+    }
+    const mapping = dict[dictKey];
+    if (mapping == null) {
+        return getValue(null, '', value);
+    }
+    return mapping[value] == null ? value : mapping[value];
+};
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+</style>

packages/tag/index.ts

@@ -0,0 +1,17 @@
+// import { PluginObject } from 'vue'
+import WkbTag from './src/tag.vue'
+
+// const injectInstallObject: PluginObject<null> = {
+//   install(Vue) {
+//     Vue.component('wkb-tag', WkbTag)
+//   },
+//   pluginName: 'wkb-tag'
+// }
+
+// const WkbComponent = Object.assign(WkbTag, injectInstallObject)
+
+// if (typeof window !== 'undefined' && window.Vue) {
+//   injectInstallObject.install(window.Vue as any)
+// }
+
+export default WkbTag

packages/tag/src/tag.vue

@@ -0,0 +1,45 @@
+<template>
+    <span :class="['wkb-tag', type]">
+        <slot />
+    </span>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, defineProps } from "vue";
+
+const { state, commit, dispatch } = useStore();
+const prop = defineProps({
+    type: {
+        type: String,
+        default: 'primary'
+    }
+});
+
+onMounted(() => { });
+</script>
+<style scoped lang="scss">
+.wkb-tag {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+    text-transform: uppercase;
+    padding: 2px 10px;
+    border-radius: 10.5px;
+
+    &.primary {
+        color: #387dff;
+        background-color: rgba(#387dff, 0.2);
+    }
+
+    &.success {
+        color: #23b899;
+        background-color: rgba(#23b899, 0.2);
+    }
+
+    &.danger {
+        color: #fe7c4b;
+        background-color: rgba(#fe7c4b, 0.2);
+    }
+}
+</style>

plugs/formatter.ts

@@ -0,0 +1,49 @@
+import { useStore } from 'vuex';
+// const {
+//   state: { dict },
+// } = useStore();
+const dict = {};
+
+export const getValue = (
+  row: any,
+  column: string,
+  value: any,
+  index?: number
+) => {
+  if ((value == null || value == '') && value !== 0) {
+    return '--';
+  }
+  return value;
+};
+
+export const formatter = (row: any, column: any, value: any, index: number) => {
+  return formatterByDist(row.scheme + '_' + column.property, value);
+};
+
+export const formatterByDist = (dictKey, value) => {
+  if (!dictKey) {
+    return getValue(null, '', value);
+  }
+  const mapping = dict[dictKey];
+  if (mapping == null) {
+    return getValue(null, '', value);
+  }
+  return mapping[value] == null ? value : mapping[value];
+};
+
+// export const formartLink = (row) => {
+//   const up = row.ambr.uplink;
+//   const down = row.ambr.downlink;
+//   return (
+//     down.value + dict.units[down.unit] + '/' + up.value + dict.units[up.unit]
+//   );
+// };
+
+// export const formartApn = (row, index) => {
+//   const session = row.slice[0].session[index];
+//   if (session) {
+//     return session.name + '-' + session.qos.index;
+//   } else {
+//     return '';
+//   }
+// };

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "noImplicitAny": false,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "examples/**/*.ts",
+    "examples/**/*.tsx",
+    // "examples/**/*.vue",
+    "packages/**/*.ts",
+    "packages/**/*.tsx",
+    "packages/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

vue.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const { config } = require('process');
+
+const resolve = (dir) => path.join(__dirname, dir);
+
+module.exports = {
+  pages: {
+    index: {
+      entry: 'examples/main.ts', // 入口文件
+      template: 'public/index.html',
+      filename: 'index.html',
+    },
+  },
+
+  chainWebpack: (config) => {
+    config.module
+      .rule('js')
+      .include.add(resolve('packages'))
+      .end()
+      .use('babel') // 编译器
+      .loader('babel-loader')
+      .tap((option) => {
+        return option;
+      });
+    config.resolve.alias
+      .set('noob', resolve('packages'))
+      .set('plugs', resolve('plugs'));
+  },
+};