byt-ui 0.0.5

package/packages/components/form-view/index.vue

@@ -0,0 +1,195 @@
+<!--
+ * @Description:
+ * @Author: 王国火
+ * @Date: 2022-07-13 08:46:34
+ * @LastEditTime: 2022-09-15 10:08:10
+ * @LastEditors: 王国火
+-->
+<!--  -->
+<template>
+  <el-form ref="form" :model="form" :inline="inline" label-width="80px">
+    <el-form-item :label="item.label" :key="index" v-for="(item,index) in searchList">
+      <template v-if="item.type=='input' || !item.type">
+        <el-input v-model="form[item.key]" clearable :placeholder="`请输入${item.label}`"></el-input>
+      </template>
+
+      <template v-if="item.type=='cascader'">
+        <el-cascader
+          :options="item.options||[]"
+          filterable
+          clearable
+          :props="item.props||{}"
+          v-model="form[item.key]"
+          :show-all-levels="false"
+        ></el-cascader>
+      </template>
+
+      <template v-if="item.type=='select'">
+        <el-select clearable v-model="form[item.key]" :multiple="item.multiple" placeholder="请选择">
+          <el-option
+            v-for="(opt,i) in item.options"
+            :key="i"
+            :label="opt.label"
+            :value="opt.value"
+          >
+          </el-option>
+        </el-select>
+      </template>
+
+      <template v-if="item.type=='datepicker'">
+        <el-date-picker
+          v-model="form[item.key]"
+          :type="item.fields||'date'"
+          placeholder="选择日期"
+          :value-format="formateDate(item.fields)"
+        >
+        </el-date-picker>
+        <!-- fields可选值:date、month、year -->
+      </template>
+
+      <template v-if="item.type=='daterange'">
+        <el-date-picker
+          v-model="form[item.key]"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+        >
+        </el-date-picker>
+        <!-- fields可选值:date、month、year -->
+      </template>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
+      <el-button icon="el-icon-refresh-right" @click="onReset">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import moment from 'moment'
+/**
+ * 通用表格组件
+ * @displayName FormView
+ */
+export default {
+  name: 'FormView',
+  props: {
+    inline: {
+      type: Boolean,
+      defualt: false
+    },
+    searchList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    value: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      form: {},
+      options: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = moment().subtract(7, 'day').toDate();
+            const start = new Date();
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = moment().subtract(1, 'month').toDate();
+            const start = new Date();
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = moment().subtract(3, 'month').toDate();
+            const start = new Date();
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      }
+    };
+  },
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    formateDate(type) {
+      // date、week 、month、year
+      switch (type) {
+        case 'date':
+          return 'yyyy-MM-dd'
+        case 'month':
+          return 'yyyy-MM'
+        case 'year':
+          return 'yyyy'
+        case 'datetime':
+          return 'yyyy-MM-dd HH:mm:ss';
+        default:
+          return 'yyyy-MM-dd'
+      }
+    },
+    onSearch() {
+      /** 点击搜索
+      * @event search
+      * @type {Event}
+      */
+      this.$emit('search')
+    },
+    onReset() {
+      this.form = {};
+      /** 点击重置
+      * @event reset
+      * @type {Event}
+      */
+      this.$emit('reset')
+    },
+    validate() {
+      return new Promise((resolve) => {
+        this.$refs.form.validate(v => {
+          if (v)resolve(v)
+        })
+      })
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (JSON.stringify(val) != JSON.stringify(this.form)) {
+          this.form = Object.assign({}, this.form, val);
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    form: {
+      handler(val) {
+        /** 表单数据双向绑定
+        * @event input
+        * @type {Input}
+        */
+        this.$emit('input', val)
+      },
+      deep: true
+    }
+  }
+}
+
+</script>
+<style lang='scss' scoped>
+</style>

package/packages/components.js

@@ -0,0 +1,16 @@
+/*
+ * @Description: 
+ * @Author: 王国火
+ * @Date: 2022-09-19 14:31:00
+ * @LastEditTime: 2022-09-19 14:32:39
+ * @LastEditors: 王国火
+ */
+import BaseView from "./components/basic-view/index"
+import FormView from "./components/form-view/index"
+
+const components=[
+  BaseView,
+  FormView
+]
+
+export default components

package/packages/index.js

@@ -0,0 +1,38 @@
+/*
+ * @Description: 
+ * @Author: 王国火
+ * @Date: 2022-09-15 17:02:55
+ * @LastEditTime: 2022-09-19 14:33:33
+ * @LastEditors: 王国火
+ */
+import Vue from 'vue'
+//通用组件
+import components from "./components.js"
+//公用方法
+import utils from "./common/index"
+
+// 第三方依赖
+import 'xe-utils'
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(VXETable)
+Vue.use(ElementUI, {
+  size: 'small',
+  menuType: 'text'
+})
+
+
+// install组件api
+const install = function (Vue) {
+  components.map(component => {
+    Vue.component(component.name, component);
+  })
+  Vue.prototype.$byt=utils;
+}
+
+export default{
+  install,
+  ...components
+}