xs-common-plugins 1.1.2 → 1.1.6

package/src/components/Search_filter/methods.js

@@ -1,43 +1,43 @@
-export default {
-  // ------------------------------------------------------------------
-  // pragma mark - inti(初始化行为)
-  // ------------------------------------------------------------------
-  createdInit() {
-      this.reqSeleOtion(this.selectCont, {});
-  },
-  mountedInit() {
-
-  },
-
-  // ------------------------------------------------------------------
-  // pragma mark - Event Response(响应事件)
-  // 命名规范: Name + EventHandler
-  // ------------------------------------------------------------------
-  visibleChange(status, val) {
-    if (status) {
-      this.curDataSourceObj = val;
-      this.selectOption = [];
-      this.reqSeleOtion(val, {})
-    }
-  },
-  remoteMethod(query) {
-    if (query) {
-      let sourceObj = this.curDataSourceObj;
-      let paramName = sourceObj.urlParam;
-      let params = {};
-      if (paramName) {
-        params = {
-          [paramName]: query
-        }
-      }
-      this.reqSeleOtion(sourceObj, params)
-    }
-  },
-  reqSeleOtion(val, params) {
-    this.$http.get(val.url, params).then(res => {
-      if (res.data) {
-        this.selectOption = res.data;
-      }
-    })
-  }
-}
+export default {
+  // ------------------------------------------------------------------
+  // pragma mark - inti(初始化行为)
+  // ------------------------------------------------------------------
+  createdInit() {
+      this.reqSeleOtion(this.selectCont, {});
+  },
+  mountedInit() {
+
+  },
+
+  // ------------------------------------------------------------------
+  // pragma mark - Event Response(响应事件)
+  // 命名规范: Name + EventHandler
+  // ------------------------------------------------------------------
+  visibleChange(status, val) {
+    if (status) {
+      this.curDataSourceObj = val;
+      this.selectOption = [];
+      this.reqSeleOtion(val, {})
+    }
+  },
+  remoteMethod(query) {
+    if (query) {
+      let sourceObj = this.curDataSourceObj;
+      let paramName = sourceObj.urlParam;
+      let params = {};
+      if (paramName) {
+        params = {
+          [paramName]: query
+        }
+      }
+      this.reqSeleOtion(sourceObj, params)
+    }
+  },
+  reqSeleOtion(val, params) {
+    this.$http.get(val.url, params).then(res => {
+      if (res.data) {
+        this.selectOption = res.data;
+      }
+    })
+  }
+}

package/src/components/TableCmp/data.js

@@ -1,4 +1,4 @@
-export default () => {
-  return {
-  }
+export default () => {
+  return {
+  }
 };

package/src/components/TableCmp/index.scss

@@ -1,23 +1,23 @@
-.table-wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .t-search {
-    // box-shadow: 0 2px 4px rgba(0, 0, 0, .12),
-    //   0 0 6px rgba(0, 0, 0, .04);
-  }
-
-  .t-table {
-    flex: 99;
-    overflow: hidden;
-  }
-
-  .t-page {
-    height: 32px;
-    background-color: #fff;
-    border-top: 1px solid #eee;
-  }
-
+.table-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .t-search {
+    // box-shadow: 0 2px 4px rgba(0, 0, 0, .12),
+    //   0 0 6px rgba(0, 0, 0, .04);
+  }
+
+  .t-table {
+    flex: 99;
+    overflow: hidden;
+  }
+
+  .t-page {
+    height: 32px;
+    background-color: #fff;
+    border-top: 1px solid #eee;
+  }
+
 }

package/src/components/TableCmp/index.vue

@@ -1,98 +1,98 @@
-<template>
-  <div v-loading="glo_loading" class="table-wrapper" style="display: flex">
-    <div v-if="!hidSearch" class="t-search">
-      <search-cmp
-        v-model="query"
-        :form-content="formContent"
-        :btn-content="btnContent"
-        @search-click="handleSearch"
-        @btn-click="handleCommand"
-        @btns-click="btnsClick"
-      >
-        <div slot="search_custemBtn">
-          <slot name="custemBtn" />
-        </div>
-      </search-cmp>
-    </div>
-    <div class="t-handle">
-      <slot name="total" />
-    </div>
-    <div class="t-table">
-      <el-table
-        :data="query.data || []"
-        style="width: 100%"
-        size="mini"
-        border
-        fit
-        highlight-current-row
-        default-expand-all
-        :height="height ? height : '100%'"
-        :row-class-name="rowClassName"
-        @selection-change="handleSelectionChange"
-        @sort-change="customSortChange"
-        :row-key="rowKey"
-        :tree-props="treeProps"
-      >
-        <slot />
-      </el-table>
-    </div>
-    <div v-if="query.pageInfo" class="t-page">
-      <el-pagination
-        class="pages"
-        :current-page.sync="query.pageInfo.page"
-        :page-sizes="[10, 30, 50, 100, 200, 300, 400]"
-        :page-size="query.pageInfo.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="query.pageInfo.totalCount"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import data from "./data";
-import methods from "./methods";
-import SearchCmp from "../Search";
-import { ElTable } from "element-ui";
-import { mapState } from "vuex";
-
-export default {
-  name: "Table",
-  props: {
-    height: [String],
-    hidSearch: {
-      type: [Boolean],
-      default: false,
-    },
-    query: {
-      type: [Object],
-    },
-    formContent: {
-      type: [Object, Array],
-    },
-    btnContent: {
-      type: [Object, Array],
-    },
-    rowClassName: {
-      type: [String, Function],
-    },
-    treeProps: {
-      type: [Object],
-    },
-    rowKey: [String, Function],
-    defaultExpandAll: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data,
-  computed: {
-    ...mapState(["glo_loading"]),
-  },
-  mounted() {},
-  methods,
-  components: { SearchCmp },
-};
-</script>
-<style lang="scss" src="./index.scss" scoped></style>
+<template>
+  <div v-loading="glo_loading" class="table-wrapper" style="display: flex">
+    <div v-if="!hidSearch" class="t-search">
+      <search-cmp
+        v-model="query"
+        :form-content="formContent"
+        :btn-content="btnContent"
+        @search-click="handleSearch"
+        @btn-click="handleCommand"
+        @btns-click="btnsClick"
+      >
+        <div slot="search_custemBtn">
+          <slot name="custemBtn" />
+        </div>
+      </search-cmp>
+    </div>
+    <div class="t-handle">
+      <slot name="total" />
+    </div>
+    <div class="t-table">
+      <el-table
+        :data="query.data || []"
+        style="width: 100%"
+        size="mini"
+        border
+        fit
+        highlight-current-row
+        default-expand-all
+        :height="height ? height : '100%'"
+        :row-class-name="rowClassName"
+        @selection-change="handleSelectionChange"
+        @sort-change="customSortChange"
+        :row-key="rowKey"
+        :tree-props="treeProps"
+      >
+        <slot />
+      </el-table>
+    </div>
+    <div v-if="query.pageInfo" class="t-page">
+      <el-pagination
+        class="pages"
+        :current-page.sync="query.pageInfo.page"
+        :page-sizes="[10, 30, 50, 100, 200, 300, 400]"
+        :page-size="query.pageInfo.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="query.pageInfo.totalCount"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import data from "./data";
+import methods from "./methods";
+import SearchCmp from "../Search";
+import { ElTable } from "element-ui";
+import { mapState } from "vuex";
+
+export default {
+  name: "Table",
+  props: {
+    height: [String],
+    hidSearch: {
+      type: [Boolean],
+      default: false,
+    },
+    query: {
+      type: [Object],
+    },
+    formContent: {
+      type: [Object, Array],
+    },
+    btnContent: {
+      type: [Object, Array],
+    },
+    rowClassName: {
+      type: [String, Function],
+    },
+    treeProps: {
+      type: [Object],
+    },
+    rowKey: [String, Function],
+    defaultExpandAll: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data,
+  computed: {
+    ...mapState(["glo_loading"]),
+  },
+  mounted() {},
+  methods,
+  components: { SearchCmp },
+};
+</script>
+<style lang="scss" src="./index.scss" scoped></style>

package/src/components/TableCmp/methods.js

@@ -1,35 +1,35 @@
-export default {
-  // ------------------------------------------------------------------
-  // pragma mark - inti(初始化行为)
-  // ------------------------------------------------------------------
-  handleSelectionChange(val) {
-    this.$emit("select-change", val);
-  },
-  handleCommand(val) {
-    this.$emit("btn-click", val);
-  },
-  btnsClick(obj) {
-    this.$emit("btns-click", obj);
-  },
-  handleSearch() {
-    this.handleCurrentChange(1);
-  },
-
-  handleSizeChange(val) {
-    this.query.pageInfo.pageSize = val;
-    this.$emit("loadData");
-  },
-
-  handleCurrentChange(val) {
-    this.query.pageInfo.page = val;
-    this.$emit("loadData");
-  },
-
-  customSortChange(obj) {
-    this.query.orderAsc = obj.order == "ascending" ? true : false;
-    this.query.orderBy = obj.prop;
-    if (obj.order) {
-      this.$emit("loadData");
-    }
-  }
-};
+export default {
+  // ------------------------------------------------------------------
+  // pragma mark - inti(初始化行为)
+  // ------------------------------------------------------------------
+  handleSelectionChange(val) {
+    this.$emit("select-change", val);
+  },
+  handleCommand(val) {
+    this.$emit("btn-click", val);
+  },
+  btnsClick(obj) {
+    this.$emit("btns-click", obj);
+  },
+  handleSearch() {
+    this.handleCurrentChange(1);
+  },
+
+  handleSizeChange(val) {
+    this.query.pageInfo.pageSize = val;
+    this.$emit("loadData");
+  },
+
+  handleCurrentChange(val) {
+    this.query.pageInfo.page = val;
+    this.$emit("loadData");
+  },
+
+  customSortChange(obj) {
+    this.query.orderAsc = obj.order == "ascending" ? true : false;
+    this.query.orderBy = obj.prop;
+    if (obj.order) {
+      this.$emit("loadData");
+    }
+  }
+};

package/src/components/home/BarChart.vue

@@ -1,118 +1,118 @@
-<template>
-  <div :class="[className,'chart-wrapper']" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 6000
-
-export default {
-  mixins: [resize],
-  props: {
-
-    layoutItem: Object,
-    rootData: Object,
-    rootMeta: Object,
-    curData: Array,
-    curMeta: Object,
-
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            axisTick: {
-              alignWithLabel: true
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false
-            }
-          }
-        ],
-        series: [
-          {
-            name: 'pageA',
-            type: 'bar',
-            stack: 'vistors',
-            barWidth: '60%',
-            data: [79, 52, 200, 334, 390, 330, 220],
-            animationDuration
-          },
-          {
-            name: 'pageB',
-            type: 'bar',
-            stack: 'vistors',
-            barWidth: '60%',
-            data: [80, 52, 200, 334, 390, 330, 220],
-            animationDuration
-          },
-          {
-            name: 'pageC',
-            type: 'bar',
-            stack: 'vistors',
-            barWidth: '60%',
-            data: [30, 52, 200, 334, 390, 330, 220],
-            animationDuration
-          }
-        ]
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :class="[className,'chart-wrapper']" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+
+    layoutItem: Object,
+    rootData: Object,
+    rootMeta: Object,
+    curData: Array,
+    curMeta: Object,
+
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: 'pageA',
+            type: 'bar',
+            stack: 'vistors',
+            barWidth: '60%',
+            data: [79, 52, 200, 334, 390, 330, 220],
+            animationDuration
+          },
+          {
+            name: 'pageB',
+            type: 'bar',
+            stack: 'vistors',
+            barWidth: '60%',
+            data: [80, 52, 200, 334, 390, 330, 220],
+            animationDuration
+          },
+          {
+            name: 'pageC',
+            type: 'bar',
+            stack: 'vistors',
+            barWidth: '60%',
+            data: [30, 52, 200, 334, 390, 330, 220],
+            animationDuration
+          }
+        ]
+      })
+    }
+  }
+}
+</script>