xianniu-ui 0.1.1

package/packages/style/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "xn-ui-style",
+  "version": "1.0.0",
+  "description": "",
+  "main": "lib/index.css",
+  "style": "lib/index.css",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "style": "gulp"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-cssmin": "^0.2.0",
+    "gulp-sass": "^5.1.0"
+  }
+}

package/packages/style/src/index.scss

@@ -0,0 +1,2 @@
+@import './table.scss';
+@import './page.scss';

package/packages/style/src/page.scss

@@ -0,0 +1,7 @@
+.xn-page{
+    margin-top: 15px;
+    text-align: right;
+    &.is-hidden{
+        display: none;
+    }
+}

package/packages/style/src/table.scss

@@ -0,0 +1,9 @@
+.xn-table-box{
+    &-tools{
+        text-align: right;
+        padding-bottom: 10px;
+        &.is-border{
+            border-bottom: 1px solid #f0f0f0;
+        }
+    }
+}

package/packages/table/column.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-table-column v-bind="$attrs" v-if="isShowColumn($attrs)">
+    <template v-if="$attrs.labelMsg">
+      <template slot="header">
+        <el-tooltip
+          class="item"
+          effect="dark"
+          :content="$attrs.labelMsg"
+          placement="right"
+        >
+          <span>{{ $attrs.label }} <i class="el-icon-question"></i></span>
+        </el-tooltip>
+      </template>
+    </template>
+    <template slot-scope="{ row, $index }">
+      <expandDom
+        v-if="$attrs.render"
+        :column="item"
+        :row="row"
+        :render="$attrs.render"
+        :index="$index"
+      ></expandDom>
+      <template v-else>
+        {{ row[$attrs.prop] }}
+      </template>
+      <!-- 更多操作 -->
+      <template v-if="$attrs.more && $attrs.more.options.length">
+        <template v-for="(itemBtn, idxBtn) in $attrs.more.options">
+          <expand-dom
+            v-if="itemBtn.render"
+            :key="idxBtn"
+            :column="itemBtn"
+            :row="row"
+            :render="itemBtn.render"
+            :index="idxBtn"
+          />
+          <template v-else>
+            <el-button
+              v-if="itemBtn.show ? itemBtn.show(row) : true"
+              :key="idxBtn"
+              :disabled="itemBtn.disabled ? itemBtn.disabled(row) : false"
+              :type="itemBtn.type || 'text'"
+              :size="itemBtn.size || 'mini'"
+              :icon="itemBtn.icon"
+              :plain="itemBtn.plain"
+              @click="handleClick(itemBtn.method, row, $index)"
+              >{{
+                typeof itemBtn.label === "function"
+                  ? itemBtn.label(row)
+                  : itemBtn.label
+              }}</el-button
+            >
+          </template>
+        </template>
+      </template>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+export default {
+  components: {
+    expandDom: {
+      functional: true,
+      props: {
+        row: Object,
+        render: Function,
+        index: Number,
+        column: {
+          type: Object,
+          default: null,
+        },
+      },
+      render: (h, ctx) => {
+        const params = {
+          row: ctx.props.row,
+          index: ctx.props.index,
+        };
+        if (ctx.props.column) params.column = ctx.props.column;
+        return ctx.props.render(h, params);
+      },
+    },
+  },
+  computed: {
+    isShowColumn() {
+      return (row) => {
+        if (row.show !== undefined) {
+          if (typeof row.show === "function") {
+            return row.show();
+          } else {
+            return row.show;
+          }
+        }
+        return true;
+      };
+    },
+  },
+
+  watch: {},
+  methods: {
+    handleClick(method, row, index) {
+      if(this.$parent){
+        this.$parent.$emit("on-buttons", { method, row, index });
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

package/packages/table/index.js

@@ -0,0 +1,7 @@
+import XnTable from './main.vue'
+
+XnTable.install = function (Vue) {
+  Vue.component(XnTable.name, XnTable)
+}
+
+export default XnTable

package/packages/table/main.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="xn-table-box">
+    <div
+      class="xn-table-box-tools"
+      v-if="isTools"
+      :class="{ 'is-border': !border }"
+    >
+      <slot name="tools">
+        <el-button
+          circle
+          size="mini"
+          @click="$emit('on-refresh')"
+          icon="el-icon-refresh"
+        ></el-button>
+      </slot>
+    </div>
+    <el-table
+      :data="data"
+      v-on="$listeners"
+      v-bind="$attrs"
+      :border="border"
+      :stripe="stripe"
+    >
+      <el-table-column
+        v-if="selection && data.length"
+        v-bind="$attrs"
+        type="selection"
+        width="50px"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        width="50px"
+        label="序号"
+        v-if="index && data.length"
+        type="index"
+      ></el-table-column>
+      <slot name="column">
+        <column
+          v-for="(item, idx) in columns"
+          :key="idx"
+          v-bind="item"
+        ></column>
+      </slot>
+    </el-table>
+    <xn-page
+      :hidden="!showPage"
+      :total="pageConfig.total"
+      :page.sync="pageConfig.pageNum"
+      :limit.sync="pageConfig.pageSize"
+      @pagination="getList"
+      layout="total, prev, pager, next, jumper"
+    ></xn-page>
+  </div>
+</template>
+
+<script>
+import column from "./column.vue";
+export default {
+  name: "XnTable",
+  components: { column },
+  props: {
+    data: {
+      type: Array,
+      default: () => {},
+    },
+    border: {
+      type: Boolean,
+      default: false,
+    },
+    columns: {
+      type: Array,
+      default: () => {},
+    },
+    stripe: Boolean,
+    selection: Boolean,
+    showPage: Boolean,
+    pageConfig: {
+      type: Object,
+      default: () => {
+        return {
+          pageSize: 15,
+          pageNum: 1,
+        };
+      },
+    },
+    index: Boolean,
+    expand: Boolean,
+    isTools: Boolean,
+  },
+  computed: {
+    isObj() {
+      return typeof this.pageConfig === "object";
+    },
+  },
+  methods: {
+    getList(val) {
+      this.$emit("on-page", val);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

package/public/index.html

@@ -0,0 +1,18 @@
+<!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><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css">
+  </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>