tianheng-ui 0.0.2 → 0.0.6

package/packages/table/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="th-table">
+    <el-table
+      ref="th_table"
+      v-loading="loading"
+      :data="data"
+      :row-key="rowKey"
+      stripe
+      :highlight-current-row="selectType === 'single'"
+      :tree-props="treeProps"
+      @current-change="handleSingleSelect"
+      @row-dblclick="dblclick"
+      @selection-change="handleSelectionChange"
+    >
+      <template v-for="(item, index) in options">
+        <template v-if="!item.hide">
+          <el-table-column
+            v-if="item.type"
+            :key="index"
+            :type="item.type"
+            :label="item.label"
+            width="50"
+          >
+          </el-table-column>
+          <el-table-column
+            v-else-if="item.children"
+            :key="index"
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+            :align="item.align || 'left'"
+            :fixed="item.fixed || null"
+            :sortable="item.sortable"
+            :sort-method="item.sortMethod"
+            show-overflow-tooltip
+          >
+            <table-column :options="item.children"></table-column>
+          </el-table-column>
+          <el-table-column
+            v-else
+            :key="index"
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+            :align="item.align || 'left'"
+            :fixed="item.fixed || null"
+            :sortable="item.sortable"
+            :sort-method="item.sortMethod"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <slot
+                v-if="item.slot"
+                :name="item.slot"
+                :scope="scope"
+                :option="item"
+              />
+              <div v-else>{{ scope.row[item.prop] }}</div>
+            </template>
+          </el-table-column>
+        </template>
+      </template>
+      <!-- <table-column :options="options">
+        <template #slot="{ scope,option }">
+          <slot :name="option.slot" :scope="scope" :option="option" />
+        </template>
+      </table-column> -->
+      <template #empty>
+        <div>
+          {{ loading ? loadingText || "加载中" : emptyText || "暂无数据" }}
+        </div>
+      </template>
+    </el-table>
+    <!-- <i class="th-table-more el-icon-setting"></i> -->
+
+    <div v-if="Object.keys(pageInfo).length > 0 && showPage" class="pagination">
+      <el-pagination
+        :current-page="pageInfo.currentPage"
+        :page-sizes="pageInfo.sizes"
+        :page-size="pageInfo.pageSize"
+        layout="total, prev, pager, next, sizes"
+        :total="pageInfo.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        @prev-click="handlePrevClick"
+        @next-click="handleNextClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import TableColumn from "./column.vue";
+
+export default {
+  name:'ThTable',
+  components: {
+    TableColumn,
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // single:单行选中    multiple:多行选中
+    selectType: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+    // 行双击事件
+    dblclick: {
+      type: Function,
+      default: () => {
+        return null;
+      },
+    },
+    treeProps: {
+      type: Object,
+      default: function() {
+        return {};
+      },
+    },
+    // 对象，不传表示没有分页,包含三个参数,均必填pageSize：每页展示的条数。currentPage：当前页码。pageCount：总页数
+    pageInfo: {
+      type: Object,
+      default: function() {
+        return {};
+      },
+    },
+    loading: {
+      type: Boolean,
+      default: () => {
+        return false;
+      },
+    },
+    height: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+    rowKey: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+    showPage: {
+      type: Boolean,
+      default: () => {
+        return true;
+      },
+    },
+    emptyText: {
+      type: String,
+      default: () => {
+        return "暂无数据";
+      },
+    },
+    loadingText: {
+      type: String,
+      default: () => {
+        return "加载中";
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleSelectionChange(currentRow) {
+      if (currentRow) {
+        this.$emit("selection-change", currentRow);
+      }
+    },
+    // 选中行--单选
+    handleSingleSelect(currentRow, oldCurrentRow) {
+      if (currentRow) {
+        this.$emit("select-row-change", currentRow);
+      }
+    },
+    // 每页展示的条数 改变时
+    handleSizeChange(val) {
+      this.pageInfo.pageSize = val;
+      this.$emit(
+        "pageNumberChange",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 当前页码 改变时
+    handleCurrentChange(val) {
+      this.pageInfo.currentPage = val;
+      this.$emit(
+        "pageNumberChange",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 点击上一页
+    handlePrevClick() {
+      if (this.pageInfo.currentPage === 1) return;
+      this.pageInfo.currentPage -= 1;
+      this.$emit(
+        "pageNumberChange",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 点击下一页
+    handleNextClick() {
+      if (this.pageInfo.currentPage === this.pageInfo.pageCount) return;
+      this.pageInfo.currentPage += 1;
+      this.$emit(
+        "pageNumberChange",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    getTable() {
+      return this.$refs["th_table"];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.th-table {
+  position: relative;
+  width: 100%;
+  .pagination {
+    margin-top: 20px;
+  }
+  &-more {
+    position: absolute;
+    top: 13px;
+    right: 5px;
+    cursor: pointer;
+  }
+}
+</style>

package/packages/table/search.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="table-search">
+    <template v-for="(item, index) in options">
+      <el-input
+        v-if="item.type === 'input'"
+        class="table-search-item"
+        v-model="params[item.value]"
+        :key="index"
+        :style="{ width: item.width + 'px' }"
+        :placeholder="item.placeholder || '请输入'"
+        :size="item.size || 'mini'"
+        clearable
+      ></el-input>
+      <el-date-picker
+        v-if="item.type === 'date'"
+        class="table-search-item"
+        v-model="params[item.value]"
+        :key="index"
+        :style="{ width: item.width + 'px' }"
+        :type="item.dateType || 'date'"
+        :format="item.format"
+        :value-format="item.valueFormat"
+        :size="item.size || 'mini'"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
+      </el-date-picker>
+    </template>
+
+    <el-button
+      type="primary"
+      icon="el-icon-search"
+      size="mini"
+      plain
+      @click="doSearch"
+      >查询</el-button
+    >
+    <el-button
+      type="primary"
+      icon="el-icon-refresh-right"
+      size="mini"
+      plain
+      @click="doReset"
+      >重置</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    params: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      datePickerTypes: [
+        "year",
+        "month",
+        "date",
+        "dates",
+        "week",
+        "datetime",
+        "datetimerange",
+        "daterange",
+        "monthrange",
+      ],
+    };
+  },
+  methods: {
+    doSearch() {
+      this.$emit("on-search", this.params);
+    },
+    doReset() {
+      this.params = {};
+      this.$emit("on-reset", this.params);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.table-search {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  &-item {
+    margin-right: 10px;
+  }
+}
+.table-search-item:last-child {
+  margin-right: 20px !important;
+}
+</style>

package/packages/table/tools.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="tableTools">
+    <template v-for="(item, index) in options">
+      <el-button
+        v-if="item.act_type === 'add'"
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doAdd(item)"
+        >{{ item.btn_name }}</el-button
+      >
+      <el-button
+        v-if="item.act_type === 'refresh'"
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doRefresh(item)"
+        >{{ item.btn_name }}</el-button
+      >
+      <el-button
+        v-if="item.act_type === 'export'"
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doExport(item)"
+        >{{ item.btn_name }}</el-button
+      >
+      <el-button
+        v-if="item.act_type === 'batch'"
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled || selectionDisabled"
+        :loading="loadingDel"
+        @click="doBatch(item)"
+        >{{ item.btn_name }}</el-button
+      >
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    selectionDisabled: {
+      type: Boolean,
+      default: () => {
+        return true;
+      },
+    },
+  },
+  data() {
+    return {
+      loadingDel: false,
+    };
+  },
+  methods: {
+    doEval(item) {
+      this.$emit("on-eval", item);
+    },
+    doAdd(item) {
+      this.$emit("on-add", item);
+    },
+    doRefresh(item) {
+      this.$emit("on-refresh", item);
+    },
+    doExport(item) {
+      this.$emit("on-export", item);
+    },
+    doBatch(item) {
+      this.loadingDel = true;
+      const callback = (bool) => {
+        this.loadingDel = false;
+      };
+      this.$emit("on-batch", item, callback);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.tableTools {
+  margin-bottom: 10px;
+}
+</style>

package/src/App.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import ThCell from "./component/cell/index.vue";
+import ThCell from "../packages/cell/index.vue";
 export default {
   name: "app",
   components: { ThCell },

package/src/index.js

@@ -0,0 +1,21 @@
+import Cell from "../packages/cell/index.js";
+import Icons from "../packages/icons/index.js";
+import Table from "../packages/table/index.js";
+
+const components = [Cell, Icons, Table];
+
+const install = function(Vue, opts = {}) {
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
+};
+
+if (typeof window !== "undefined" && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  version: "0.0.6",
+  install,
+  ...components
+};

package/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": [
-    ["env", { "modules": false }],
-    "stage-3"
-  ]
-}

package/.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

package/dist/tianheng-ui.js

@@ -1,2 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("tianheng-ui",[],t):"object"==typeof exports?exports["tianheng-ui"]=t():e["tianheng-ui"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,n){"use strict";t.a={name:"ThCell",props:{title:{type:String,default:function(){return""}},value:{type:String,default:function(){return""}},label:{type:String,default:function(){return""}},icon:{type:String,default:function(){return""}},customStyle:{type:String,default:function(){return""}},loading:{type:Boolean,default:function(){return!1}}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2);r.a.install=function(e){e.component(r.a.name,r.a)},t.default=r.a},function(e,t,n){"use strict";function r(e){n(3)}var a=n(0),o=n(9),i=n(8),s=r,l=i(a.a,o.a,!1,s,"data-v-28bf3db5",null);t.a=l.exports},function(e,t,n){var r=n(4);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(6)("4b242edc",r,!0,{})},function(e,t,n){t=e.exports=n(5)(!1),t.push([e.i,".th-cell[data-v-28bf3db5]{position:relative;display:flex;align-items:center;padding:10px 15px;border-radius:4px;border:1px solid #ebeef5;background-color:#fff;overflow:hidden;transition:.3s}.th-cell .th-cell-icon[data-v-28bf3db5]{margin-right:10px;font-size:18px}.th-cell .th-cell-content[data-v-28bf3db5]{flex:1}.th-cell-title[data-v-28bf3db5]{font-size:16px;color:#333}.th-cell-label[data-v-28bf3db5]{margin-top:5px;font-size:14px;color:#666;word-wrap:break-word;word-break:break-all}.th-cell-value[data-v-28bf3db5]{margin-left:10px;max-width:50%;font-size:14px;color:#999;word-wrap:break-word;word-break:break-all}.th-cell[data-v-28bf3db5]:hover{box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.skeleton[data-v-28bf3db5]{display:flex;align-items:center;margin-bottom:20px;padding:10px 15px;border-radius:4px;border:1px solid #ebeef5}.skeleton-icon[data-v-28bf3db5]{width:30px;height:30px;margin-right:10px;font-size:18px}.skeleton-content[data-v-28bf3db5]{flex:1}.skeleton-title[data-v-28bf3db5]{width:100px}.skeleton-label[data-v-28bf3db5]{margin-top:5px}.skeleton-value[data-v-28bf3db5]{margin-left:10px;width:100px}",""])},function(e,t){function n(e,t){var n=e[1]||"",a=e[3];if(!a)return n;if(t&&"function"==typeof btoa){var o=r(a);return[n].concat(a.sources.map(function(e){return"/*# sourceURL="+a.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},a=0;a<this.length;a++){var o=this[a][0];"number"==typeof o&&(r[o]=!0)}for(a=0;a<e.length;a++){var i=e[a];"number"==typeof i[0]&&r[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),t.push(i))}},t}},function(e,t,n){function r(e){for(var t=0;t<e.length;t++){var n=e[t],r=d[n.id];if(r){r.refs++;for(var a=0;a<r.parts.length;a++)r.parts[a](n.parts[a]);for(;a<n.parts.length;a++)r.parts.push(o(n.parts[a]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var i=[],a=0;a<n.parts.length;a++)i.push(o(n.parts[a]));d[n.id]={id:n.id,refs:1,parts:i}}}}function a(){var e=document.createElement("style");return e.type="text/css",u.appendChild(e),e}function o(e){var t,n,r=document.querySelector("style["+g+'~="'+e.id+'"]');if(r){if(v)return h;r.parentNode.removeChild(r)}if(m){var o=p++;r=f||(f=a()),t=i.bind(null,r,o,!1),n=i.bind(null,r,o,!0)}else r=a(),t=s.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}function i(e,t,n,r){var a=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=x(t,a);else{var o=document.createTextNode(a),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function s(e,t){var n=t.css,r=t.media,a=t.sourceMap;if(r&&e.setAttribute("media",r),b.ssrId&&e.setAttribute(g,t.id),a&&(n+="\n/*# sourceURL="+a.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var c=n(7),d={},u=l&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,v=!1,h=function(){},b=null,g="data-vue-ssr-id",m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n,a){v=n,b=a||{};var o=c(e,t);return r(o),function(t){for(var n=[],a=0;a<o.length;a++){var i=o[a],s=d[i.id];s.refs--,n.push(s)}t?(o=c(e,t),r(o)):o=[];for(var a=0;a<n.length;a++){var s=n[a];if(0===s.refs){for(var l=0;l<s.parts.length;l++)s.parts[l]();delete d[s.id]}}}};var x=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var n=[],r={},a=0;a<t.length;a++){var o=t[a],i=o[0],s=o[1],l=o[2],c=o[3],d={id:e+":"+a,css:s,media:l,sourceMap:c};r[i]?r[i].parts.push(d):n.push(r[i]={id:i,parts:[d]})}return n}},function(e,t){e.exports=function(e,t,n,r,a,o){var i,s=e=e||{},l=typeof e.default;"object"!==l&&"function"!==l||(i=e,s=e.default);var c="function"==typeof s?s.options:s;t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),a&&(c._scopeId=a);var d;if(o?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=d):r&&(d=r),d){var u=c.functional,f=u?c.render:c.beforeCreate;u?(c._injectStyles=d,c.render=function(e,t){return d.call(t),f(e,t)}):c.beforeCreate=f?[].concat(f,d):[d]}return{esModule:i,exports:s,options:c}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-skeleton",{attrs:{loading:e.loading,animated:""}},[n("template",{slot:"template"},[n("div",{staticClass:"skeleton"},[n("el-skeleton-item",{staticClass:"skeleton-icon",attrs:{variant:"image"}}),e._v(" "),n("div",{staticClass:"skeleton-content"},[n("el-skeleton-item",{staticClass:"skeleton-title",attrs:{variant:"h4"}}),e._v(" "),n("el-skeleton-item",{staticClass:"skeleton-label",attrs:{variant:"text"}})],1),e._v(" "),n("el-skeleton-item",{staticClass:"skeleton-value",attrs:{variant:"text"}})],1)])],2),e._v(" "),e.loading?e._e():n("div",{staticClass:"th-cell",style:e.customStyle},[e.icon?n("i",{staticClass:"th-cell-icon",class:e.icon}):e._t("icon"),e._v(" "),n("div",{staticClass:"th-cell-content"},[e.title?n("div",{staticClass:"th-cell-title"},[e._v(e._s(e.title))]):e._t("title"),e._v(" "),e.label?n("div",{staticClass:"th-cell-label"},[e._v(e._s(e.label))]):e._t("label")],2),e._v(" "),e.value?n("div",{staticClass:"th-cell-value"},[e._v(e._s(e.value))]):e._t("default")],2)],1)},a=[],o={render:r,staticRenderFns:a};t.a=o}])});
-//# sourceMappingURL=tianheng-ui.js.map