Home Explore Help
Sign In
patent-market
/
common
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

1

guhongwei 3 years ago
commit
e028a1c651
26 changed files with 1758 additions and 0 deletions
Split View Show Diff Stats
  1. 2 0
      .env
  2. 33 0
      .eslintrc.js
  3. 24 0
      .gitignore
  4. 24 0
      README.md
  5. 3 0
      babel.config.js
  6. 63 0
      package.json
  7. BIN
      public/favicon.ico
  8. 17 0
      public/index.html
  9. 7 0
      src/App.vue
  10. 96 0
      src/components/frame/e-upload.vue
  11. 52 0
      src/components/frame/filter-page-table.md
  12. 381 0
      src/components/frame/filter-page-table.vue
  13. 83 0
      src/components/frame/form.md
  14. 224 0
      src/components/frame/form.vue
  15. 11 0
      src/components/frame/pagination.md
  16. 51 0
      src/components/frame/pagination.vue
  17. 172 0
      src/components/frame/swiper-frame.md
  18. 64 0
      src/components/frame/swiper-frame.vue
  19. 264 0
      src/components/frame/vform.vue
  20. 89 0
      src/components/frame/wang-editor.vue
  21. 12 0
      src/main.js
  22. 18 0
      src/router/index.js
  23. 34 0
      src/store/user/mutations.js
  24. 2 0
      src/store/user/state.js
  25. 29 0
      src/views/index.vue
  26. 3 0
      vue.config.js

+ 2 - 0
.env
View File 

@@ -0,0 +1,2 @@
 
+VUE_APP_AXIOS_BASE_URL = ''
 
+VUE_APP_ROUTER="/studycommon"

+ 33 - 0
.eslintrc.js
View File 

@@ -0,0 +1,33 @@
 
+// https://eslint.org/docs/user-guide/configuring
 
+
 
+module.exports = {
 
+  root: true,
 
+  env: {
 
+    node: true,
 
+  },
 
+  extends: ["plugin:vue/essential", "@vue/prettier"],
 
+  plugins: ["vue"],
 
+  rules: {
 
+    "max-len": [
 
+      "warn",
 
+      {
 
+        code: 10000,
 
+      },
 
+    ],
 
+    "no-unused-vars": "off",
 
+    "no-console": "off",
 
+    "prettier/prettier": [
 
+      "warn",
 
+      {
 
+        singleQuote: true,
 
+        trailingComma: "es5",
 
+        bracketSpacing: true,
 
+        jsxBracketSameLine: true,
 
+        printWidth: 160,
 
+      },
 
+    ],
 
+  },
 
+  parserOptions: {
 
+    parser: "babel-eslint",
 
+  },
 
+};

+ 24 - 0
.gitignore
View File 

@@ -0,0 +1,24 @@
 
+.DS_Store
 
+node_modules
 
+package-lock.json
 
+/dist
 
+
 
+
 
+# local env files
 
+.env.local
 
+.env.*.local
 
+
 
+# Log files
 
+npm-debug.log*
 
+yarn-debug.log*
 
+yarn-error.log*
 
+pnpm-debug.log*
 
+
 
+# Editor directories and files
 
+.idea
 
+.vscode
 
+*.suo
 
+*.ntvs*
 
+*.njsproj
 
+*.sln
 
+*.sw?

+ 24 - 0
README.md
View File 

@@ -0,0 +1,24 @@
 
+# common
 
+
 
+## Project setup
 
+```
 
+npm install
 
+```
 
+
 
+### Compiles and hot-reloads for development
 
+```
 
+npm run serve
 
+```
 
+
 
+### Compiles and minifies for production
 
+```
 
+npm run build
 
+```
 
+
 
+### Lints and fixes files
 
+```
 
+npm run lint
 
+```
 
+
 
+### Customize configuration
 
+See [Configuration Reference](https://cli.vuejs.org/config/).

+ 3 - 0
babel.config.js
View File 

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

+ 63 - 0
package.json
View File 

@@ -0,0 +1,63 @@
 
+{
 
+  "name": "common",
 
+  "version": "0.1.0",
 
+  "private": true,
 
+  "scripts": {
 
+    "serve": "vue-cli-service serve",
 
+    "build": "vue-cli-service build",
 
+    "lint": "vue-cli-service lint"
 
+  },
 
+  "dependencies": {
 
+    "axios": "^0.21.1",
 
+    "core-js": "^3.6.5",
 
+    "echarts": "^5.0.1",
 
+    "element-ui": "^2.15.0",
 
+    "jsonwebtoken": "^8.5.1",
 
+    "lodash": "^4.17.20",
 
+    "moment": "^2.29.1",
 
+    "naf-core": "^0.1.2",
 
+    "swiper": "^5.3.6",
 
+    "vue": "^2.6.11",
 
+    "vue-awesome-swiper": "^4.1.1",
 
+    "vue-meta": "^2.4.0",
 
+    "vue-router": "^3.2.0",
 
+    "vuex": "^3.4.0",
 
+    "wangeditor": "^3.1.1"
 
+  },
 
+  "devDependencies": {
 
+    "@vue/cli-plugin-babel": "~4.5.0",
 
+    "@vue/cli-plugin-eslint": "~4.5.0",
 
+    "@vue/cli-plugin-router": "~4.5.0",
 
+    "@vue/cli-plugin-vuex": "~4.5.0",
 
+    "@vue/cli-service": "~4.5.0",
 
+    "@vue/eslint-config-prettier": "^6.0.0",
 
+    "babel-eslint": "^10.1.0",
 
+    "eslint": "^6.7.2",
 
+    "eslint-plugin-prettier": "^3.1.3",
 
+    "eslint-plugin-vue": "^6.2.2",
 
+    "less": "^3.0.4",
 
+    "less-loader": "^5.0.0",
 
+    "prettier": "^1.19.1",
 
+    "vue-template-compiler": "^2.6.11"
 
+  },
 
+  "eslintConfig": {
 
+    "root": true,
 
+    "env": {
 
+      "node": true
 
+    },
 
+    "extends": [
 
+      "plugin:vue/essential",
 
+      "eslint:recommended",
 
+      "@vue/prettier"
 
+    ],
 
+    "parserOptions": {
 
+      "parser": "babel-eslint"
 
+    },
 
+    "rules": {}
 
+  },
 
+  "browserslist": [
 
+    "> 1%",
 
+    "last 2 versions",
 
+    "not dead"
 
+  ]
 
+}

BIN
public/favicon.ico
View File


+ 17 - 0
public/index.html
View File 

@@ -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><%= htmlWebpackPlugin.options.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>

+ 7 - 0
src/App.vue
View File 

@@ -0,0 +1,7 @@
 
+<template>
 
+  <div id="app">
 
+    <router-view />
 
+  </div>
 
+</template>
 
+
 
+<style lang="less"></style>

+ 96 - 0
src/components/frame/e-upload.vue
View File 

@@ -0,0 +1,96 @@
 
+<template>
 
+  <div id="e-upload">
 
+    <el-upload
 
+      :action="url"
 
+      :http-request="upload"
 
+      :list-type="type"
 
+      :fileList="fileList"
 
+      :on-remove="onRemove"
 
+      :on-error="onError"
 
+      :on-preview="onPreview"
 
+      :limit="limit"
 
+      :on-exceed="onExceed"
 
+      :before-remove="beforeRemove"
 
+    >
 
+      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
 
+    </el-upload>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+const _ = require('lodash');
 
+import axios from 'axios';
 
+import { mapState, createNamespacedHelpers } from 'vuex';
 
+export default {
 
+  name: 'e-upload',
 
+  props: {
 
+    url: { type: String, required: true },
 
+    type: { type: String, default: 'picture-card' },
 
+    fileList: { type: Array },
 
+    limit: { type: Number },
 
+    remove: { type: Function },
 
+    extra: { type: Object, default: () => {} },
 
+  },
 
+  model: {
 
+    prop: 'fileList',
 
+    event: 'change',
 
+  },
 
+  components: {},
 
+  created() {},
 
+  methods: {
 
+    async upload({ file }) {
 
+      let formdata = new FormData();
 
+      formdata.append('file', file, file.name);
 
+      const res = await axios.post(this.url, formdata, {
 
+        headers: { 'Content-Type': 'multipart/form-data' },
 
+      });
 
+      if (res.status === 200 && res.data.errcode == 0) {
 
+        const { id, name, uri } = res.data;
 
+        const obj = { url: uri, name: file.name, ...this.extra, uid: id };
 
+        this.fileList.push(obj);
 
+      }
 
+    },
 
+    beforeRemove(file) {
 
+      if (this.remove && _.isFunction(this.remove)) {
 
+        const { result, msg } = this.remove(file);
 
+        if (!result) {
 
+          this.$message.error(msg);
 
+          return false;
 
+        }
 
+      }
 
+      return true;
 
+    },
 
+    onRemove(file) {
 
+      const index = this.fileList.findIndex(f => f.url === file.url);
 
+      this.fileList.splice(index, 1);
 
+    },
 
+    onError(err) {
 
+      this.$message.error(err);
 
+    },
 
+    // 点击事件
 
+    onPreview(file) {
 
+      const { url } = file;
 
+      window.open(url);
 
+    },
 
+    // 超出限制
 
+    onExceed() {
 
+      this.$message.error(`只能上传${this.limit}个文件`);
 
+    },
 
+  },
 
+  computed: {
 
+    ...mapState(['user', 'menuParams']),
 
+    pageTitle() {
 
+      return `${this.$route.meta.title}`;
 
+    },
 
+  },
 
+  metaInfo() {
 
+    return { title: this.$route.meta.title };
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+/deep/.el-upload-list__item.is-ready {
 
+  display: none;
 
+}
 
+</style>

+ 52 - 0
src/components/frame/filter-page-table.md
View File 

@@ -0,0 +1,52 @@
 
+## filter-page-table.vue
 
+#### prop
 
+|参数|类型|默认值|是否必填|说明|
 
+|:-:|:-:|:-:|:-:|:-:|
 
+|fields|Array|`-`|是|字段列表(下文会说明如何使用)|
 
+|data|Array|`-`|是|数据列表|
 
+|opera|Array|[ ]|否|操作列的列表(下文会说明如何使用)|
 
+|toFormat|Function|`-`|否|如果fields中的format不是function类型,则会走toFormat的方法,需要自己写过滤规则,多个的情况需要区分|
 
+|select|Boolean|false|否|需要选择就变成true|
 
+|total|NUmber|0|否|分页的总数据|
 
+|usePage|Boolean|true|否|是否使用分页|
 
+|options|Object|null|否|加些属性,不知道能加啥,反正我把合计加上好使了|
 
+|useSum|Boolean|false|否|使用合计|
 
+|sumcol|Array|`[]`|否|计算哪一列,就把哪一列的prop写进去|
 
+|sumres|String|`total`|否|处理每列结果的要求,默认计算总和(total),平均值(avg),最大值(max),最小值(min)|
 
+|filter|Array|`[]`|否|额外查询|
 
+|operaWidth|Number|200|否|操作栏宽度|
 
+
 
+>fields
 
+>>
 
+|参数|类型|默认值|是否必填|说明|
 
+|:-:|:-:|:-:|:-:|:-:|
 
+|label|String|`-`|是|列名称|
 
+|prop|String|`-`|是|字段名称|
 
+|format|Function/String|`-`|否|Function类型:数据需要过滤则将过滤方法写在这;String类型:走toFormat方法,参数位(model=>字段名,value=>值)|
 
+|custom|Boolean|false|否|自定义输出|
 
+|options|Object|`-`|否|添加额外属性,比如说样式之类的|
 
+|filter|String|`-`|否|如果填写,则这个字段会查询,这里只填写类型,input/select,select的选项在options插槽中使用|
 
+|selected|Array|`-`|false|多选选项的数据|
 
+|showTip|Boolean|false|否|是否使用tooltip显示过长内容|
 
+|filterReturn|Boolean|`-`|否|针对这个选项需要在选择后就做些逻辑处理时,改成true,然后再使用filterReturn方法处理,(例如二级联动的情况)|
 
+|notable|Boolean|false/undefined|否|不需要在表格中显示|
 
+|selected|Array|`-`|false|多选选项的数据|
 
+
 
+>opera
 
+>>
 
+|参数|类型|默认值|是否必填|说明|
 
+|:-:|:-:|:-:|:-:|:-:|
 
+|label|String|`-`|是|操作按钮提示文字|
 
+|icon|String|`-`|否|图标|
 
+|method|String|`-`|是|此按钮连接的父级方法($emit)|
 
+|confirm|Boolean|`-`|否|是否需要确认提示|
 
+|methodZh|String/Function|label|否|确认提示的操作文字,1,Function参数为这条数据,自己随意组合;2,String为纯自定义字符串,需要自己写整个提示语;3,默认,使用label字段提示|
 
+|display|Function|`-`|否|控制按钮是否显示(目前为简单版,只是根据此条数据中的内容判断,以后要是有需求会修改成toFormat的形式)|
 
+
 
+>methods
 
+>>
 
+|方法名|参数|说明|
 
+|:-:|:-:|:-:|
 
+|handleSelect|Array[object]|返回选择的内容|
 
+|query|{skip,limit,...info}|分页查询,及条件查询|
 
+|filterReturn|{data,prop}|查询条件栏过滤条件中filterReturn字段为true的回调方法|

+ 381 - 0
src/components/frame/filter-page-table.vue
View File 

@@ -0,0 +1,381 @@
 
+<template>
 
+  <div id="data-table">
 
+    <el-form :model="searchInfo" :inline="true" style="padding:0.9rem·1.875rem" size="mini" v-if="useFilter">
 
+      <el-row type="flex">
 
+        <el-col :span="22">
 
+          <el-form-item v-for="(item, index) in filterList" :key="index">
 
+            <template v-if="item.filter === 'select'">
 
+              <el-select
 
+                v-model="searchInfo[item.prop]"
 
+                size="mini"
 
+                clearable
 
+                filterable
 
+                :placeholder="`请选择${item.label}`"
 
+                @clear="toClear(item.prop)"
 
+                @change="data => filterReturn(data, item)"
 
+              >
 
+                <slot name="options" v-bind="{ item }"></slot>
 
+              </el-select>
 
+            </template>
 
+            <template v-else-if="item.filter === 'date'">
 
+              <el-date-picker
 
+                v-model="searchInfo[item.prop]"
 
+                value-format="yyyy-MM-dd"
 
+                format="yyyy-MM-dd"
 
+                type="daterange"
 
+                range-separator="-"
 
+                start-placeholder="开始日期"
 
+                end-placeholder="结束日期"
 
+                clearable
 
+              >
 
+              </el-date-picker>
 
+            </template>
 
+            <template v-else>
 
+              <el-input v-model="searchInfo[item.prop]" clearable size="mini" :placeholder="`请输入${item.label}`" @clear="toClear(item.prop)"></el-input>
 
+            </template>
 
+          </el-form-item>
 
+          <el-form-item>
 
+            <el-button type="primary" size="mini" @click="filterSearch">查询</el-button>
 
+          </el-form-item>
 
+        </el-col>
 
+        <el-col :span="2">
 
+          <slot name="selfbtn"></slot>
 
+        </el-col>
 
+      </el-row>
 
+    </el-form>
 
+
 
+    <el-table
 
+      ref="table"
 
+      row-key="id"
 
+      :data="data"
 
+      border
 
+      stripe
 
+      size="mini"
 
+      :max-height="height !== null ? height : ''"
 
+      @select="handleSelectionChange"
 
+      @select-all="handleSelectAll"
 
+      v-bind="options"
 
+      :show-summary="useSum"
 
+      @row-click="rowClick"
 
+      :summary-method="computedSum"
 
+    >
 
+      <el-table-column type="selection" width="55" v-if="select" prop="id" :reserve-selection="true"> </el-table-column>
 
+      <template v-for="(item, index) in fields">
 
+        <template v-if="!item.notable">
 
+          <template v-if="item.custom">
 
+            <el-table-column :key="index" align="center" :label="item.label" v-bind="item.options" :show-overflow-tooltip="item.showTip || true">
 
+              <template v-slot="{ row }">
 
+                <slot name="custom" v-bind="{ item, row }"></slot>
 
+              </template>
 
+            </el-table-column>
 
+          </template>
 
+          <template v-else>
 
+            <el-table-column
 
+              :key="index"
 
+              align="center"
 
+              :label="item.label"
 
+              :prop="item.prop"
 
+              :formatter="toFormatter"
 
+              sortable
 
+              v-bind="item.options"
 
+              :show-overflow-tooltip="item.showTip || true"
 
+            >
 
+            </el-table-column>
 
+          </template>
 
+        </template>
 
+      </template>
 
+      <template v-if="opera.length > 0">
 
+        <el-table-column label="操作" align="center" :width="operaWidth">
 
+          <template v-slot="{ row, $index }">
 
+            <template v-for="(item, index) in opera">
 
+              <template v-if="display(item, row)">
 
+                <el-tooltip v-if="item.icon" :key="index" effect="dark" :content="item.label" placement="bottom">
 
+                  <el-button
 
+                    :key="index"
 
+                    type="text"
 
+                    :icon="item.icon || ''"
 
+                    size="mini"
 
+                    @click="handleOpera(row, item.method, item.confirm, item.methodZh, item.label, $index)"
 
+                  ></el-button>
 
+                </el-tooltip>
 
+                <!-- <el-button v-else :key="index" type="text" size="mini" @click="handleOpera(row, item.method, item.confirm, item.methodZh, item.label, $index)">
 
+                  {{ item.label }}
 
+                </el-button> -->
 
+                <el-link
 
+                  v-else
 
+                  :key="`${item.model}-column-${index}`"
 
+                  :type="item.type || 'primary'"
 
+                  :icon="item.icon || ''"
 
+                  size="mini"
 
+                  style="padding-right:10px"
 
+                  :underline="false"
 
+                  @click="handleOpera(row, item.method, item.confirm, item.methodZh, item.label, $index)"
 
+                >
 
+                  {{ item.label }}
 
+                </el-link>
 
+              </template>
 
+            </template>
 
+          </template>
 
+        </el-table-column>
 
+      </template>
 
+    </el-table>
 
+    <el-row type="flex" align="middle" justify="end" style="padding-top:1rem" v-if="usePage">
 
+      <el-col :span="24" style="text-align:right;">
 
+        <el-pagination
 
+          background
 
+          layout="total, prev, pager, next"
 
+          :page-sizes="[10, 15, 20, 50, 100]"
 
+          :total="total"
 
+          :page-size="limit"
 
+          :current-page.sync="currentPage"
 
+          @current-change="changePage"
 
+          @size-change="sizeChange"
 
+        >
 
+        </el-pagination>
 
+        <!-- sizes -->
 
+      </el-col>
 
+    </el-row>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import _ from 'lodash';
 
+export default {
 
+  name: 'data-table',
 
+  props: {
 
+    fields: { type: Array, required: true },
 
+    data: { type: Array, required: true },
 
+    opera: { type: Array, default: () => [] },
 
+    toFormat: null,
 
+    height: null,
 
+    select: { type: Boolean, default: false },
 
+    selected: { type: Array, default: () => [] },
 
+    usePage: { type: Boolean, default: true },
 
+    total: { type: Number, default: 0 },
 
+    options: null,
 
+    useSum: { type: Boolean, default: false },
 
+    sumcol: { type: Array, default: () => [] },
 
+    sumres: { type: String, default: 'total' },
 
+    filter: { type: Array, default: () => [] },
 
+    operaWidth: { type: Number, default: 200 },
 
+    limit: { type: Number, default: _.get(this, `$limit`, undefined) !== undefined ? this.$limit : process.env.VUE_APP_LIMIT * 1 || 10 },
 
+  },
 
+  components: {},
 
+  data: () => ({
 
+    pageSelected: [],
 
+    currentPage: 1,
 
+    // limit: _.get(this, `$limit`, undefined) !== undefined ? this.$limit : process.env.VUE_APP_LIMIT * 1 || 10,
 
+    searchInfo: {},
 
+    useFilter: true,
 
+    filterList: [],
 
+  }),
 
+  created() {},
 
+  computed: {},
 
+  methods: {
 
+    toFormatter(row, column, cellValue, index) {
 
+      let this_fields = this.fields.filter(fil => fil.prop === column.property);
 
+      if (this_fields.length > 0) {
 
+        let format = _.get(this_fields[0], `format`, false);
 
+        if (format) {
 
+          let res;
 
+          if (_.isFunction(format)) {
 
+            res = format(cellValue);
 
+          } else {
 
+            res = this.toFormat({
 
+              model: this_fields[0].prop,
 
+              value: cellValue,
 
+            });
 
+          }
 
+          return res;
 
+        } else return cellValue;
 
+      }
 
+    },
 
+    handleOpera(data, method, confirm = false, methodZh, label, index) {
 
+      let self = true;
 
+      if (_.isFunction(methodZh)) {
 
+        methodZh = methodZh(data);
 
+      } else if (!_.isString(methodZh)) {
 
+        methodZh = label;
 
+        self = false;
 
+      }
 
+      if (confirm) {
 
+        this.$confirm(self ? methodZh : `您确认${methodZh}该数据?`, '提示', {
 
+          confirmButtonText: '确定',
 
+          cancelButtonText: '取消',
 
+          type: 'warning',
 
+        })
 
+          .then(() => {
 
+            this.$emit(method, { data, index });
 
+          })
 
+          .catch(() => {});
 
+      } else {
 
+        this.$emit(method, { data, index });
 
+      }
 
+    },
 
+    handleSelectionChange(selection, row) {
 
+      // console.log(selection);
 
+      // console.log(row);
 
+      //根据row是否再pageSelected中,判断是添加还是删除
 
+      let res = [];
 
+      if (this.pageSelected.find(i => i.id === row.id)) {
 
+        res = this.pageSelected.filter(f => f.id !== row.id);
 
+      } else {
 
+        this.pageSelected.push(row);
 
+        res = this.pageSelected;
 
+      }
 
+      this.$set(this, `pageSelected`, res);
 
+      this.$emit(`handleSelect`, _.uniqBy(res, 'id'));
 
+    },
 
+    handleSelectAll(selection) {
 
+      //处于没全选状态,选择之后一定是全选,只有处于全选状态时,才会反选(全取消)
 
+      // console.log(selection);
 
+      let res = [];
 
+      if (selection.length > 0) {
 
+        //全选
 
+        res = _.uniqBy(this.pageSelected.concat(selection), 'id');
 
+      } else {
 
+        //全取消
 
+        res = _.differenceBy(this.pageSelected, this.data, 'id');
 
+      }
 
+      this.$set(this, `pageSelected`, res);
 
+      this.$emit(`handleSelect`, res);
 
+    },
 
+    initSelection() {
 
+      this.$nextTick(() => {
 
+        this.$refs.table.clearSelection();
 
+        this.selected.forEach(info => {
 
+          let d = this.data.filter(p => p.id === info.id);
 
+          if (d.length > 0) this.$refs.table.toggleRowSelection(d[0]);
 
+        });
 
+      });
 
+    },
 
+    selectReset() {
 
+      this.$refs.table.clearSelection();
 
+    },
 
+    display(item, row) {
 
+      let display = _.get(item, `display`, true);
 
+      if (display === true) return true;
 
+      else {
 
+        let res = display(row);
 
+        return res;
 
+      }
 
+    },
 
+    //
 
+    changePage(page = this.currentPage) {
 
+      this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit, ...this.searchInfo });
 
+    },
 
+    sizeChange(limit) {
 
+      this.limit = limit;
 
+      this.currentPage = 1;
 
+      this.$emit('query', { skip: 0, limit: this.limit, ...this.searchInfo });
 
+    },
 
+    getFilterList() {
 
+      let res = this.fields.filter(f => _.get(f, 'filter', false));
 
+      this.$set(this, `useFilter`, res.length > 0);
 
+      res.map(i => {
 
+        if (i.filter === 'date' && this.searchInfo[i.porp] === undefined) this.$set(this.searchInfo, i.prop, []);
 
+      });
 
+      res = [...res, ...this.filter];
 
+      this.$set(this, `filterList`, res);
 
+    },
 
+    filterSearch() {
 
+      this.currentPage = 1;
 
+      this.$emit('query', { skip: 0, limit: this.limit, ...this.searchInfo });
 
+    },
 
+    rowClick(row, column, event) {
 
+      this.$emit(`rowClick`, row);
 
+    },
 
+    toClear(prop) {
 
+      delete this.searchInfo[prop];
 
+    },
 
+    filterReturn(data, item) {
 
+      let { prop, filterReturn } = item;
 
+      if (filterReturn) this.$emit('filterReturn', { data, prop });
 
+    },
 
+    // 计算合计
 
+    computedSum({ columns, data }) {
 
+      if (columns.length <= 0 || data.length <= 0) return '';
 
+      const result = [];
 
+      const reg = new RegExp(/^\d+$/);
 
+      for (const column of columns) {
 
+        // 判断有没有prop属性
 
+        const prop = _.get(column, 'property');
 
+        if (!prop) {
 
+          result.push('');
 
+          continue;
 
+        }
 
+        // 判断是否需要计算
 
+        const inlist = this.sumcol.find(f => f == prop);
 
+        if (!inlist) {
 
+          result.push('');
 
+          continue;
 
+        }
 
+        let res = 0;
 
+        // 整理出要计算的属性(只取出数字或者可以为数字的值)
 
+        const resetList = data.map(i => {
 
+          const d = _.get(i, prop);
 
+          const res = reg.test(d);
 
+          if (res) return d * 1;
 
+          else return 0;
 
+        });
 
+        if (this.sumres === 'total') {
 
+          res = this.totalComputed(resetList);
 
+        } else if (this.sumres === 'avg') {
 
+          res = this.avgComputed(resetList);
 
+        } else if (this.sumres === 'max') {
 
+          res = this.maxComputed(resetList);
 
+        } else if (this.sumres === 'min') {
 
+          res = this.minComputed(resetList);
 
+        }
 
+        result.push(res);
 
+      }
 
+      result[0] = '合计';
 
+      return result;
 
+    },
 
+    // 合计计算
 
+    totalComputed(data) {
 
+      const total = data.reduce((p, n) => p + n, 0);
 
+      return total;
 
+    },
 
+    // 平均值计算
 
+    avgComputed(data) {
 
+      const total = this.totalComputed(data);
 
+      return _.round(_.divide(total, data.length), 2);
 
+    },
 
+    // 最大值计算
 
+    maxComputed(data) {
 
+      return _.max(data);
 
+    },
 
+    // 最小值计算
 
+    minComputed(data) {
 
+      return _.min(data);
 
+    },
 
+  },
 
+  watch: {
 
+    selected: {
 
+      handler(val) {
 
+        if (val.length > 0) {
 
+          this.pageSelected = val;
 
+          this.initSelection();
 
+        }
 
+      },
 
+      immediate: true,
 
+    },
 
+    data: {
 
+      handler(val, oval) {
 
+        if (this.select) {
 
+          this.initSelection();
 
+        }
 
+      },
 
+    },
 
+    fields: {
 
+      handler(val, oval) {
 
+        if (val) this.getFilterList();
 
+      },
 
+      immediate: true,
 
+    },
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped></style>

+ 83 - 0
src/components/frame/form.md
View File 

@@ -0,0 +1,83 @@
 
+# 组件说明文档
 
+### form.vue
 
+### props
 
+
 
+|参数|类型|默认值|是否必填|说明|
 
+|:-:|:-:|:-:|:-:|:-:|
 
+|fields|Array|`-`|是|字段相关都在这里,用来自动输出,详情见下面|
 
+|submitText|String|`保存`|否|默认保存按钮的文字|
 
+|rules|Object|`-`|否|校验规则,不会找el-form的例子,不过使用的async-validator这个依赖为基础,会写这个也可以~~(那就厉害了,反正我是不行)~~|
 
+|isNew|Boolean|`-`|是|修改还是添加的提示|
 
+|data|Object|`-`|否|修改传来的数据|
 
+|needSave|Boolean|false|否|是否禁用保存按钮|
 
+|useEnter|Boolean|true|否|使用回车提交|
 
+|reset|Boolean|true|否|提交后是否重置表单|
 
+|filterReturn|Function|`-`|否|fields中,filterReturn为true的情况从这个函数走,参数:({data,model})|
 
+
 
+### fields
 
+>Array类型 必填
 
+>>
 
+|参数|类型|默认值|是否必填|说明|
 
+|:-:|:-:|:-:|:-:|:-:|
 
+|label|String|`-`|是|显示的字段中文|
 
+|type|String|input|否|这个字段要用什么类型来输出 input的基本类型可选值:date,datetime,radio,checkbox,select,text(只显示值),editor(富文本编辑器),password|
 
+|required|Boolean|`-`|否|是否必须输入|
 
+|model|String|`-`|是|字段名|
 
+|placeholder|String|`-`|否|占位,正常用,只是个透传|
 
+|options|object|`-`|否|标签的属性设置,例如:textarea 需要显示剩余字数,或者input限制长度,都往这里写,key-value形式(键值对,json的基本了解,不知道百度,具体属性看你具体用那个组件,那个组件有什么属性,瞎写不一定好使)|
 
+|custom|Boolean|`-`|否|是否使用自定义插槽|
 
+|tip|String|`-`|否|提示语,例如:请输入11位电话号码|
 
+|labelWidth|String|`120px`|否|表单label宽度,element的,默认120px|
 
+|format|Function|`-`|否|当type = text 时需要将该字段内容转换,可以使用format|
 
+|filterReturn|Boolean|`-`|否|是否返回这个字段,返回到filterReturn方法中|
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+### slot
 
+>
 
+|插槽名|说明|
 
+|:-:|:-:|
 
+|options|fields中type为select的,选项都写在这个插槽中,多个select则需要区分options所属问题|
 
+|radios|fields中type为radio的,选项都写在这个插槽中,多个radio则需要区分radios所属问题|
 
+|checkbox|fields中type为checkbox的,选项都写在这个插槽中,多个checkbox则需要区分checkboxs所属问题|
 
+|custom|自定义插槽,完全自己去写|
 
+|submit|提交按钮部分,当needSave为false时才可以使用|
 
+>>关于自定义的用法:
 
+>>在fields中,custom:true的情况即需要自定义,写法如下
 
+
 
+>>`<template #custom="{ item, form, fieldChange }"> ... </template>`
 
+>>
 
+|参数名|说明|
 
+|:-:|:-:|
 
+|item|fields循环出来的每一项|
 
+|form|组件内部的表单|
 
+|fieldChange|组件内部的修改方法,此方法不一定必须使用,看情况来;参数:{model:xxx,value:XXX}(model:字段名,value:值)|
 
+>>在使用时,此插槽内的v-model可以写成form[item.model],也可以写成form.字段名
 
+
 
+>>例如`<el-input v-model="form[item.model]">`或者`<el-input v-model="form.xxx">`
 
+
 
+>> **如果有多处需要自定义,请区分开去写**
 
+
 
+
 
+***
 
+### upload
 
+|参数|类型|默认值|是否必填|说明|
 
+|:-:|:-:|:-:|:-:|:-:|
 
+|url|String|`-`|是|上传地址|
 
+|limit|Number|`-`|是|限制上传数量|
 
+|data|any|`-`|否|上传数据|
 
+|model|String|`-`|否|上传返回的字段|
 
+|isBtn|Boolean|false|否|是否只显示按钮|
 
+|showList|Boolean|true|否|是否显示上传列表|
 
+|accept|String|`-`|否|可以上传的文件类型,不写就没限制|
 
+|tip|String|`-`|否|提示信息|
 
+|listType|String|picture-card|否|上传文件列表显示类型|
 
+
 
+>### method
 
+>|方法名|返回参数|说明|
 
+|:-:|:-:|:-:|
 
+|upload|{model,data}|上传成功返回

+ 224 - 0
src/components/frame/form.vue
View File 

@@ -0,0 +1,224 @@
 
+<template>
 
+  <div id="add">
 
+    <el-form
 
+      ref="form"
 
+      :model="form"
 
+      :rules="rules"
 
+      :label-width="labelWidth"
 
+      class="form"
 
+      size="small"
 
+      @submit.native.prevent
 
+      :style="styles"
 
+      :inline="inline"
 
+    >
 
+      <el-row type="flex" justify="end" align="middle" v-if="returns" style="padding:10px">
 
+        <el-col :span="2">
 
+          <el-button type="primary" size="mini" @click="toReturn">返回</el-button>
 
+        </el-col>
 
+      </el-row>
 
+      <template v-for="(item, index) in fields">
 
+        <template v-if="!loading">
 
+          <el-form-item v-if="display(item)" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
 
+            <template v-if="!item.custom">
 
+              <template v-if="item.type !== 'text'">
 
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="top-start" :disabled="!item.tip">
 
+                  <template v-if="item.type === `date` || item.type === `datetime`">
 
+                    <el-date-picker
 
+                      v-model="form[item.model]"
 
+                      :type="item.type"
 
+                      placeholder="选择择"
 
+                      :format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
 
+                      :value-format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
 
+                      v-bind="item.options"
 
+                    >
 
+                    </el-date-picker>
 
+                  </template>
 
+                  <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
 
+                    <el-date-picker
 
+                      v-model="form[item.model]"
 
+                      :type="item.type"
 
+                      placeholder="选择择"
 
+                      :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
 
+                      :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
 
+                      v-bind="item.options"
 
+                    >
 
+                    </el-date-picker>
 
+                  </template>
 
+                  <template v-else-if="item.type === 'time'">
 
+                    <el-time-picker v-model="form[item.model]" placeholder="请选择时间" format="HH:mm" value-format="HH:mm"></el-time-picker>
 
+                  </template>
 
+                  <template v-else-if="item.type === 'radio'">
 
+                    <el-radio-group v-model="form[item.model]" size="mini" v-bind="item.options">
 
+                      <slot name="radios" v-bind="{ item, form, fieldChange }"></slot>
 
+                    </el-radio-group>
 
+                  </template>
 
+                  <template v-else-if="item.type === 'checkbox'">
 
+                    <el-checkbox-group v-model="form[item.model]" v-bind="item.options">
 
+                      <slot name="checkboxs" v-bind="{ item, form, fieldChange }"></slot>
 
+                    </el-checkbox-group>
 
+                  </template>
 
+                  <template v-else-if="item.type === 'select'">
 
+                    <el-select v-model="form[item.model]" v-bind="item.options" filterable clearable @change="data => filterReturn(data, item)">
 
+                      <slot name="options" v-bind="{ item, form, fieldChange }"></slot>
 
+                    </el-select>
 
+                  </template>
 
+                  <template v-else-if="item.type === 'textarea'">
 
+                    <el-input clearable v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
 
+                  </template>
 
+                  <template v-else-if="item.type === 'editor'">
 
+                    <wang-editor v-model="form[item.model]" :url="item.url" :value="form[item.model]"></wang-editor>
 
+                  </template>
 
+                  <template v-else>
 
+                    <el-input
 
+                      clearable
 
+                      v-model="form[item.model]"
 
+                      :type="getField('type', item)"
 
+                      :placeholder="getField('placeholder', item)"
 
+                      :show-password="getField('type', item) === 'password'"
 
+                      v-bind="item.options"
 
+                    ></el-input>
 
+                  </template>
 
+                </el-tooltip>
 
+              </template>
 
+              <template v-else>
 
+                <template v-if="item.format">
 
+                  {{ item.format(form[item.model]) }}
 
+                </template>
 
+                <template v-else>
 
+                  {{ form[item.model] || '暂无' }}
 
+                </template>
 
+              </template>
 
+            </template>
 
+            <template v-else>
 
+              <slot name="custom" v-bind="{ item, form, fieldChange }"></slot>
 
+            </template>
 
+          </el-form-item>
 
+        </template>
 
+      </template>
 
+      <el-form-item label="" v-if="needSave" class="btn">
 
+        <el-row type="flex" align="middle" justify="start">
 
+          <el-col :span="6">
 
+            <el-button type="primary" @click="save">{{ submitText }}</el-button>
 
+          </el-col>
 
+        </el-row>
 
+      </el-form-item>
 
+      <el-form-item v-else>
 
+        <slot name="submit"></slot>
 
+      </el-form-item>
 
+    </el-form>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import _ from 'lodash';
 
+import wangEditor from './wang-editor.vue';
 
+export default {
 
+  name: 'add',
 
+  props: {
 
+    fields: { type: Array, default: () => [] },
 
+    rules: { type: Object, default: () => {} },
 
+    isNew: { type: Boolean, default: true },
 
+    data: null,
 
+    styles: { type: Object, default: () => {} },
 
+    needSave: { type: Boolean, default: true },
 
+    labelWidth: { type: String, default: '120px' },
 
+    useEnter: { type: Boolean, default: true },
 
+    submitText: { type: String, default: '保存' },
 
+    inline: { type: Boolean, default: false },
 
+    reset: { type: Boolean, default: true },
 
+    returns: { type: String },
 
+  },
 
+  components: {
 
+    wangEditor,
 
+  },
 
+  data: () => ({
 
+    form: {},
 
+    show: false,
 
+    dateShow: false,
 
+    loading: true,
 
+  }),
 
+  created() {
 
+    if (this.useEnter) {
 
+      document.onkeydown = () => {
 
+        let key = window.event.keyCode;
 
+        if (key == 13) {
 
+          this.save();
 
+        }
 
+      };
 
+    }
 
+  },
 
+  computed: {},
 
+  mounted() {},
 
+  watch: {
 
+    fields: {
 
+      handler(val) {
 
+        this.checkType();
 
+      },
 
+      immediate: true,
 
+    },
 
+    data: {
 
+      handler(val) {
 
+        this.loading = true;
 
+        if (val) this.$set(this, `form`, this.data);
 
+        this.loading = false;
 
+      },
 
+      immediate: true,
 
+      deep: true,
 
+    },
 
+  },
 
+  methods: {
 
+    getField(item, data) {
 
+      let res = _.get(data, item, null);
 
+      if (item === 'type') res = res === null ? `text` : res;
 
+      if (item === 'placeholder') res = res === null ? `请输入${data.label}` : res;
 
+      if (item === 'required') res = res === null ? false : res;
 
+      if (item === `error`) res = res === null ? `${data.label}错误` : res;
 
+      return res;
 
+    },
 
+    save() {
 
+      this.$refs['form'].validate(valid => {
 
+        if (valid) {
 
+          this.$emit(`save`, { isNew: this.isNew, data: JSON.parse(JSON.stringify(this.form)) });
 
+          if (this.reset) this.$refs.form.resetFields();
 
+        } else {
 
+          console.warn('form validate error!!!');
 
+        }
 
+      });
 
+    },
 
+    fieldChange({ model, value }) {
 
+      this.$set(this.form, model, value);
 
+    },
 
+    checkType() {
 
+      let arr = this.fields.filter(fil => fil.type === 'checkbox');
 
+      if (arr.length > 0 && this.isNew) {
 
+        for (const item of arr) {
 
+          this.$set(this.form, `${item.model}`, []);
 
+        }
 
+      }
 
+    },
 
+    display(field) {
 
+      let dis = _.get(field, `display`);
 
+      if (!_.isFunction(dis)) return true;
 
+      else return dis(field, this.form);
 
+    },
 
+    filterReturn(data, item) {
 
+      let { model, filterReturn } = item;
 
+      if (filterReturn) this.$emit('filterReturn', { data, model });
 
+    },
 
+    toReturn() {
 
+      if (this.returns) this.$router.push(this.returns);
 
+    },
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.form {
 
+  padding: 2rem 1rem;
 
+  background: #fff;
 
+  border-radius: 20px;
 
+}
 
+// /deep/.btn .el-form-item__content {
 
+//   margin-left: 0 !important;
 
+// }
 
+</style>

+ 11 - 0
src/components/frame/pagination.md
View File 

@@ -0,0 +1,11 @@
 
+# pagination.vue 分页组件
 
+#### props
 
+|参数|类型|默认值|是否必填|说明|
 
+|:-:|:-:|:-:|:-:|:-:|
 
+|position|String|'right'|否|组件的布局位置,默认为靠右侧|
 
+|total|Number|0|是|分页的总数据数,用来计算页码|
 
+|limit|Number|10|否|每页的数量|  
+#### methods
 
+|方法名|参数|说明|
 
+|:-:|:-:|:-:|
 
+|query|{skip,limit,...info}|分页查询|

+ 51 - 0
src/components/frame/pagination.vue
View File 

@@ -0,0 +1,51 @@
 
+<template>
 
+  <div id="pagination">
 
+    <el-row type="flex" align="middle" style="padding-top:1rem">
 
+      <el-col :span="24" :style="`text-align:${position};`">
 
+        <el-pagination
 
+          background
 
+          layout=" total, prev, pager, next"
 
+          :total="total"
 
+          :page-size="limit"
 
+          :current-page.sync="currentPage"
 
+          @current-change="changePage"
 
+        >
 
+        </el-pagination>
 
+        <!-- 
+          :page-sizes="[5, 10, 15, 20, 50, 100]"
 
+          @size-change="sizeChange"
 
+         -->
 
+      </el-col>
 
+    </el-row>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import _ from 'lodash';
 
+export default {
 
+  name: 'pagination',
 
+  props: {
 
+    position: { type: String, default: 'right' },
 
+    total: { type: Number, default: 0 },
 
+    limit: { type: Number, default: 10 },
 
+  },
 
+  components: {},
 
+  data: () => {
 
+    return {
 
+      currentPage: 1,
 
+    };
 
+  },
 
+  created() {},
 
+  methods: {
 
+    changePage(page) {
 
+      this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit });
 
+    },
 
+    sizeChange(limit) {
 
+      this.limit = limit;
 
+      this.$emit('query', { skip: 0, limit: this.limit });
 
+    },
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped></style>

+ 172 - 0
src/components/frame/swiper-frame.md
View File 

@@ -0,0 +1,172 @@
 
+# 组件文档说明
 
+
 
+## 下载依赖
 
+### npm install vue-awesome-swiper  --save
 
+### npm install swiper@5.3.6  --save
 
+
 
+## options设置
 
+### 1
 
+切换效果 fade cube coverflow flip
 
+effect: 'flip',
 
+样式设定
 
+fadeEffect: {
 
+淡出fade
 
+crossFade: true,
 
+方块切换 cube
 
+slideShadows: true,
 
+shadow: true,
 
+shadowOffset: 100,
 
+shadowScale: 0.6,
 
+coverflow
 
+slidesPerView: 3,
 
+centeredSlides: true,
 
+coverflowEffect: {
 
+  rotate: 30,
 
+  stretch: 10,
 
+  depth: 60,
 
+  modifier: 2,
 
+  slideShadows: true,
 
+},
 
+flip
 
+slideShadows: true,
 
+limitRotation: true,
 
+},
 
+### 2
 
+不可拖动文字
 
+noSwiping: true,
 
+### 3
 
+当你的Swiper在过渡时将无法滑动
 
+preventInteractionOnTransition : true,
 
+短切换，长切花
 
+shortSwipes: false,
 
+自由滑动，不知道滑过几个
 
+freeMode: true,
 
+### 4
 
+设置预览值 px
 
+slidesOffsetBefore: 100,
 
+显示多行
 
+slidesPerView: 3, //一行显示3个
 
+slidesPerColumn: 2, //显示2行
 
+### 5
 
+一页显示三个，一组为三个
 
+slidesPerView: 3,
 
+slidesPerGroup: 3,
 
+### 6
 
+slidesPerView: 2,
 
+//slidesPerView : 'auto',    根据slide的宽度自动调整展示数量。此时需要设置slide的宽度，如下style所示
 
+//slidesPerView : 3.7,
 
+### 7
 
+默认居中，并一页显示三个，第一条在左侧
 
+slidesPerView: 3,
 
+centeredSlides: true,
 
+centeredSlidesBounds: true,
 
+### 8
 
+默认居中，并一页显示三个，第一个在中间
 
+slidesPerView: 3,
 
+centeredSlides: true,
 
+### 9
 
+如果有一个数据时，所有分页，按钮，分页点全部失效
 
+watchOverflow: true,
 
+### 10
 
+滑过触发回调
 
+runCallbacksOnInit: true,
 
+on: {
 
+  slideChangeTransitionStart: function() {
 
+    选中值
 
+    console.log(this.activeIndex);
 
+  },
 
+},
 
+### 11
 
+自适应高度 随silde变化而变化
 
+autoHeight: true,
 
+### 12
 
+默认一页显示数
 
+slidesPerView: 4,
 
+数据间隔 px
 
+spaceBetween: 30,
 
+不同屏幕配置
 
+breakpoints: {
 
+  320: {
 
+    //当屏幕宽度大于等于320
 
+    slidesPerView: 2,
 
+    spaceBetween: 10,
 
+  },
 
+  768: {
 
+    //当屏幕宽度大于等于768
 
+    slidesPerView: 3,
 
+    spaceBetween: 20,
 
+  },
 
+  1280: {
 
+    //当屏幕宽度大于等于1280
 
+    slidesPerView: 4,
 
+    spaceBetween: 30,
 
+  },
 
+},
 
+### 13
 
+鼠标滑过显示小手
 
+grabCursor: true,
 
+### 14
 
+自动滑过贴合时间
 
+speed: 300,
 
+autoplay: {
 
+  默认3秒切换一次
 
+  delay: 3000,
 
+到最后一个自动停止
 
+stopOnLastSlide: true,
 
+触碰当前页自动停止
 
+disableOnInteraction: true,
 
+反向自动轮播
 
+reverseDirection: true,
 
+},
 
+### 15
 
+自动滑过
 
+autoplay: true,
 
+//鼠标覆盖停止自动切换
 
+### 16
 
+默认索引值，0：开始
 
+initialSlide: 0,
 
+### 17
 
+垂直切换选项
 
+direction: 'vertical',
 
+### 18
 
+循环轮播
 
+loop: true,
 
+### 19
 
+分页
 
+pagination: {
 
+el: '.swiper-pagination',
 
+clickable为true时，点击小点控制轮播
 
+clickable: true,
 
+分页类型
 
+type: 'bullets',//点
 
+type: 'fraction',//数字
 
+type: 'progressbar',//上条
 
+type: 'custom', //自定义
 
+progressbarOpposite: true,//progressbar-左条
 
+bulletElement: 'li',//指定标签
 
+dynamicBullets: true,//bullets-点数过多，隐藏
 
+dynamicMainBullets: 4,//显示点数量
 
+hideOnClick: true,//点击数据时，隐藏分页
 
+自定义点样式
 
+renderBullet: function(index, className) {
 
+  return '<span class="' + className + '">' + (index + 1) + '</span>';
 
+},
 
+设置分式
 
+type: 'fraction',
 
+renderFraction: function(currentClass, totalClass) {
 
+  return '<span class="' + currentClass + '"></span>' + ' of ' + '<span class="' + totalClass + '"></span>';
 
+},
 
+自定义点样式
 
+type: 'custom',
 
+renderCustom: function(swiper, current, total) {
 
+  return current + ' of ' + total;
 
+},
 
+bulletClass: 'my-bullet', //需设置.my-bullet样式
 
+bulletActiveClass: 'my-bullet-active', //需设置my-bullet-active样式
 
+},
 
+### 20
 
+按钮导航
 
+navigation: {
 
+  nextEl: '.swiper-button-next',
 
+  prevEl: '.swiper-button-prev',
 
+},

+ 64 - 0
src/components/frame/swiper-frame.vue
View File 

@@ -0,0 +1,64 @@
 
+<template>
 
+  <div id="swiper-frame">
 
+    <div class="container">
 
+      <div class="swiper-box">
 
+        <swiper ref="mySwiper" :options="options">
 
+          <swiper-slide v-for="(item, index) in list" :key="index">
 
+            <slot v-bind="{ index, item }"></slot>
 
+          </swiper-slide>
 
+          <!-- 分页 -->
 
+          <div class="swiper-pagination" slot="pagination"></div>
 
+          <!-- 按钮导航 -->
 
+          <div class="swiper-button-prev" slot="button-prev"></div>
 
+          <div class="swiper-button-next" slot="button-next"></div>
 
+        </swiper>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
 
+import 'swiper/css/swiper.css';
 
+export default {
 
+  name: 'swiper-frame',
 
+  props: {
 
+    // 循环列表
 
+    list: { type: Array, default: () => [] },
 
+    // 配置文件
 
+    options: { type: Object, default: () => {} },
 
+  },
 
+  components: { Swiper, SwiperSlide },
 
+  data: function() {
 
+    return {};
 
+  },
 
+  created() {},
 
+  methods: {},
 
+  computed: {},
 
+  watch: {},
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.swiper-box {
 
+  .swiper-container {
 
+    height: 45px;
 
+  }
 
+}
 
+// 选中背景颜色，字颜色
 
+// .swiper-slide-active {
 
+//   background: #ff6600;
 
+//   color: #fff;
 
+// }
 
+// 设定固定值
 
+// .swiper-slide {
 
+//   width: 300px; /*设为固定值*/
 
+//   width: auto; /*根据内容调整宽度*/
 
+// }
 
+// 自定义按钮样式
 
+// .swiper-container {
 
+//   --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
 
+//   --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
 
+//   --swiper-navigation-size: 30px; /* 设置按钮大小 */
 
+// }
 
+</style>

+ 264 - 0
src/components/frame/vform.vue
View File 

@@ -0,0 +1,264 @@
 
+<template>
 
+  <div id="add">
 
+    <el-form ref="form" :model="form" :label-width="labelWidth" class="form" size="small" @submit.native.prevent :style="styles" :inline="inline">
 
+      <template v-for="(item, index) in fields">
 
+        <el-form-item
 
+          v-if="display(item)"
 
+          :key="'form-field-' + index"
 
+          :label="getField('label', item)"
 
+          :prop="item.model"
 
+          :required="item.required"
 
+          :rules="getRules(item)"
 
+        >
 
+          <template v-if="!item.custom">
 
+            <template v-if="item.type !== 'text'">
 
+              <el-tooltip class="item" effect="dark" :content="item.remark" placement="top-start" :disabled="!item.remark">
 
+                <template v-if="item.type === `date` || item.type === `datetime`">
 
+                  <el-date-picker
 
+                    v-model="form[item.model]"
 
+                    :type="item.type"
 
+                    placeholder="选择择"
 
+                    :format="`yyyy-MM-dd${item.type == 'datetime' ? ' HH:mm:ss' : ''}`"
 
+                    :value-format="`yyyy-MM-dd${item.type == 'datetime' ? ' HH:mm:ss' : ''}`"
 
+                    v-bind="item.options"
 
+                  >
 
+                  </el-date-picker>
 
+                </template>
 
+                <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
 
+                  <el-date-picker
 
+                    v-model="form[item.model]"
 
+                    :type="item.type"
 
+                    placeholder="选择择"
 
+                    :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
 
+                    :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
 
+                    v-bind="item.options"
 
+                  >
 
+                  </el-date-picker>
 
+                </template>
 
+                <template v-else-if="item.type === 'number'">
 
+                  <el-input-number v-model="form[item.model]" placeholder="" controls-position="right" style="width:200px"></el-input-number>
 
+                </template>
 
+                <template v-else-if="item.type === 'time'">
 
+                  <el-time-picker v-model="form[item.model]" placeholder="请选择时间" format="HH:mm" value-format="HH:mm"></el-time-picker>
 
+                </template>
 
+                <template v-else-if="item.type === 'radio'">
 
+                  <el-radio-group v-model="form[item.model]" size="mini" v-bind="item.options">
 
+                    <template v-if="item.list">
 
+                      <el-radio v-for="(i, iIndex) in item.list" :key="`radio-${iIndex}`" :label="i.value">{{ i.label }}</el-radio>
 
+                    </template>
 
+                    <template v-else>
 
+                      <slot name="radios" v-bind="{ item, form, fieldChange }"></slot>
 
+                    </template>
 
+                  </el-radio-group>
 
+                </template>
 
+                <template v-else-if="item.type === 'checkbox'">
 
+                  <el-checkbox-group v-model="form[item.model]" v-bind="item.options">
 
+                    <template v-if="item.list">
 
+                      <el-checkbox v-for="(i, iIndex) in item.list" :key="`checkbox-${iIndex}`" :label="i.value">{{ i.label }}</el-checkbox>
 
+                    </template>
 
+                    <template v-else>
 
+                      <slot name="checkboxs" v-bind="{ item, form, fieldChange }"></slot>
 
+                    </template>
 
+                  </el-checkbox-group>
 
+                </template>
 
+                <template v-else-if="item.type === 'select'">
 
+                  <el-select
 
+                    v-model="form[item.model]"
 
+                    v-bind="item.options"
 
+                    filterable
 
+                    clearable
 
+                    @change="data => filterReturn(data, item)"
 
+                    default-first-option
 
+                  >
 
+                    <template v-if="item.list">
 
+                      <el-option v-for="(i, iIndex) in item.list" :key="`checkbox-${iIndex}`" :label="i.label" :value="i.value"></el-option>
 
+                    </template>
 
+                    <template v-else>
 
+                      <slot name="options" v-bind="{ item, form, fieldChange }"> </slot>
 
+                    </template>
 
+                  </el-select>
 
+                </template>
 
+                <template v-else-if="item.type === 'textarea'">
 
+                  <el-input clearable v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
 
+                </template>
 
+                <template v-else-if="item.type === 'editor'">
 
+                  <wang-editor v-model="form[item.model]"></wang-editor>
 
+                </template>
 
+                <template v-else>
 
+                  <el-input
 
+                    clearable
 
+                    v-model="form[item.model]"
 
+                    :type="getField('type', item)"
 
+                    :placeholder="getField('placeholder', item)"
 
+                    :show-password="getField('type', item) === 'password'"
 
+                    v-bind="item.options"
 
+                  ></el-input>
 
+                </template>
 
+              </el-tooltip>
 
+            </template>
 
+            <template v-else>
 
+              <template v-if="item.format">
 
+                {{ item.format(form[item.model]) }}
 
+              </template>
 
+              <template v-else>
 
+                {{ form[item.model] }}
 
+              </template>
 
+            </template>
 
+          </template>
 
+          <template v-else>
 
+            <slot name="custom" v-bind="{ item, form, fieldChange }"></slot>
 
+          </template>
 
+        </el-form-item>
 
+      </template>
 
+      <el-form-item label="" v-if="needSave" class="btn">
 
+        <el-row type="flex" align="middle" justify="start">
 
+          <el-col :span="6">
 
+            <el-button type="primary" @click="save">{{ submitText }}</el-button>
 
+          </el-col>
 
+        </el-row>
 
+      </el-form-item>
 
+      <el-form-item v-else>
 
+        <slot name="submit"></slot>
 
+      </el-form-item>
 
+    </el-form>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import _ from 'lodash';
 
+import wangEditor from '@common/src/components/frame/wang-editor.vue';
 
+export default {
 
+  name: 'vform',
 
+  model: {
 
+    prop: 'form',
 
+    event: 'change',
 
+  },
 
+  props: {
 
+    fields: { type: Array, default: () => [] },
 
+    rules: { type: Object, default: () => ({}) },
 
+    isNew: { type: Boolean, default: true },
 
+    form: { type: Object, default: () => {} },
 
+    styles: { type: Object, default: () => {} },
 
+    needSave: { type: Boolean, default: true },
 
+    labelWidth: { type: String, default: '120px' },
 
+    useEnter: { type: Boolean, default: true },
 
+    submitText: { type: String, default: '保存' },
 
+    inline: { type: Boolean, default: false },
 
+    reset: { type: Boolean, default: true },
 
+  },
 
+  components: {
 
+    wangEditor,
 
+  },
 
+  data: () => {
 
+    // form: {},
 
+    const _this = this;
 
+    return {
 
+      show: false,
 
+      dateShow: false,
 
+    };
 
+  },
 
+  created() {
 
+    if (this.useEnter) {
 
+      document.onkeydown = () => {
 
+        let key = window.event.keyCode;
 
+        if (key == 13) {
 
+          this.save();
 
+        }
 
+      };
 
+    }
 
+  },
 
+  computed: {},
 
+  mounted() {},
 
+  watch: {
 
+    fields: {
 
+      handler(val) {
 
+        this.checkType();
 
+      },
 
+      immediate: true,
 
+      deep: true,
 
+    },
 
+  },
 
+  methods: {
 
+    getField(item, data) {
 
+      let res = _.get(data, item, null);
 
+      if (item === 'type') res = res === null ? `text` : res;
 
+      if (item === 'placeholder') res = res === null ? `请输入${data.label}` : res;
 
+      if (item === 'required') res = res === null ? false : res;
 
+      if (item === `error`) res = res === null ? `${data.label}错误` : res;
 
+      return res;
 
+    },
 
+    save() {
 
+      this.$refs['form'].validate(valid => {
 
+        if (valid) {
 
+          this.$emit(`save`, { isNew: this.isNew, data: JSON.parse(JSON.stringify(this.form)) });
 
+          if (this.reset) this.$refs.form.resetFields();
 
+        } else {
 
+          console.warn('form validate error!!!');
 
+        }
 
+      });
 
+    },
 
+    fieldChange({ model, value }) {
 
+      this.$set(this.form, model, value);
 
+    },
 
+    //
 
+    checkType() {
 
+      let arr = this.fields.filter(fil => fil.type === 'checkbox');
 
+      if (arr.length > 0 && this.isNew) {
 
+        for (const item of arr) {
 
+          this.$set(this.form, `${item.model}`, []);
 
+        }
 
+      }
 
+    },
 
+    getRules(data) {
 
+      let rules = [];
 
+      const { model, required, label } = data;
 
+      if (this.rules && _.get(this.rules, model)) {
 
+        const r = _.get(this.rules, model);
 
+        let has_required = false;
 
+        if (_.isArray(r)) {
 
+          for (const rule of r) {
 
+            if (_.get(rule, 'required')) {
 
+              has_required = true;
 
+              break;
 
+            }
 
+          }
 
+          rules = r;
 
+        } else {
 
+          if (_.get(rule, 'required')) has_required = true;
 
+          rules.push(r);
 
+        }
 
+        if (!has_required) rules.push({ required: true, message: `请填写${label}`, trigger: 'blur' });
 
+      } else {
 
+        if (required) {
 
+          let obj = { required: true, message: `请填写${label}`, trigger: 'blur' };
 
+          rules.push(obj);
 
+        }
 
+      }
 
+      return rules;
 
+    },
 
+    display(field) {
 
+      // 添加noform属性,与列表fields共用
 
+      let noform = _.get(field, `noform`);
 
+      if (noform) return false;
 
+      let dis = _.get(field, `display`);
 
+      if (!_.isFunction(dis)) return true;
 
+      else return dis(field, this.form);
 
+    },
 
+    filterReturn(data, item) {
 
+      let { model, filterReturn } = item;
 
+      if (filterReturn) this.$emit('filterReturn', { data, model });
 
+    },
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.form {
 
+  padding: 1.5rem 1rem;
 
+  background: #fff;
 
+  border-radius: 20px;
 
+}
 
+// /deep/.btn .el-form-item__content {
 
+//   margin-left: 0 !important;
 
+// }
 
+</style>

+ 89 - 0
src/components/frame/wang-editor.vue
View File 

@@ -0,0 +1,89 @@
 
+<template>
 
+  <div>
 
+    <div ref="editor" style="text-align:left"></div>
 
+  </div>
 
+</template>
 
+<script>
 
+import E from 'wangeditor';
 
+
 
+const menus = [
 
+  'head', // 标题
 
+  'bold', // 粗体
 
+  'fontSize', // 字号
 
+  'fontName', // 字体
 
+  'italic', // 斜体
 
+  'underline', // 下划线
 
+  'strikeThrough', // 删除线
 
+  'foreColor', // 文字颜色
 
+  'backColor', // 背景颜色
 
+  'link', // 插入链接
 
+  'list', // 列表
 
+  'justify', // 对齐方式
 
+  'quote', // 引用
 
+  // 'emoticon', // 表情
 
+  'table', // 表格
 
+  // 'video', // 插入视频
 
+  // 'code', // 插入代码
 
+  'undo', // 撤销
 
+  'redo', // 重复
 
+];
 
+
 
+export default {
 
+  name: 'wang-editor',
 
+  model: {
 
+    prop: 'value',
 
+    event: 'change', // 默认为input时间，此处改为change
 
+  },
 
+  props: {
 
+    value: { type: String, required: false, default: '' },
 
+    url: { type: String },
 
+  },
 
+  data() {
 
+    return {
 
+      editorContent: this.value,
 
+      editor: {},
 
+    };
 
+  },
 
+  mounted() {
 
+    var editor = new E(this.$refs.editor);
 
+    editor.customConfig.onchange = html => {
 
+      this.editorContent = html;
 
+      this.$emit('change', html);
 
+    };
 
+    // 自定义菜单配置
 
+    editor.customConfig.menus = menus;
 
+    editor.customConfig.zIndex = 0;
 
+    editor.customConfig.uploadImgServer = this.url;
 
+    editor.customConfig.uploadImgMaxLength = 1;
 
+    editor.customConfig.uploadImgHooks = {
 
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
 
+      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
 
+      customInsert: function(insertImg, result, editor) {
 
+        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
 
+        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
 
+
 
+        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
 
+        var url = result.uri;
 
+        insertImg(url);
 
+
 
+        // result 必须是一个 JSON 格式字符串！！！否则报错
 
+      },
 
+    };
 
+    editor.create();
 
+    editor.txt.html(this.value);
 
+    this.$set(this, 'editor', editor);
 
+  },
 
+  methods: {
 
+    getContent: function() {
 
+      return this.editorContent;
 
+    },
 
+  },
 
+  watch: {
 
+    value: {
 
+      handler(val) {
 
+        this.editor.txt.html(val);
 
+      },
 
+    },
 
+  },
 
+};
 
+</script>

+ 12 - 0
src/main.js
View File 

@@ -0,0 +1,12 @@
 
+import Vue from 'vue';
 
+import App from './App.vue';
 
+import router from './router';
 
+import store from './store';
 
+
 
+Vue.config.productionTip = false;
 
+
 
+new Vue({
 
+  router,
 
+  store,
 
+  render: h => h(App),
 
+}).$mount('#app');

+ 18 - 0
src/router/index.js
View File 

@@ -0,0 +1,18 @@
 
+import Vue from 'vue';
 
+import VueRouter from 'vue-router';
 
+import Home from '../views/Home.vue';
 
+
 
+Vue.use(VueRouter);
 
+
 
+const routes = [
 
+  {
 
+    path: '/',
 
+    component: () => import('../views/index.vue'),
 
+  },
 
+];
 
+
 
+const router = new VueRouter({
 
+  routes,
 
+});
 
+
 
+export default router;

+ 34 - 0
src/store/user/mutations.js
View File 

@@ -0,0 +1,34 @@
 
+export const setUser = (state, payload) => {
 
+  state.user = payload;
 
+  // let res = true;
 
+  // //登陆时
 
+  // if (payload) {
 
+  //   state.token = payload;
 
+  // } else {
 
+  //   //已经登陆,切换路由时取出客户信息放在总store中
 
+  //   let token = localStorage.getItem('token');
 
+  //   if (token && token !== 'guest') {
 
+  //     state.user = jwt.decode(token);
 
+  //   } else if (token && token == 'guest') {
 
+  //     let user = localStorage.getItem('user');
 
+  //     state.user = JSON.parse(user);
 
+  //   } else {
 
+  //     let timestamp = new Date().getTime();
 
+  //     let user = {
 
+  //       // id: `guest${timestamp}`,
 
+  //       name: `游客${timestamp}`,
 
+  //     };
 
+  //     state.user = user;
 
+  //     localStorage.setItem('token', 'guest');
 
+  //     localStorage.setItem('user', JSON.stringify(user));
 
+  //     console.warn('游客身份');
 
+  //   }
 
+  // }
 
+  // return res;
 
+};
 
+
 
+export const deleteUser = (state, payload) => {
 
+  state.user = {};
 
+  localStorage.removeItem('token');
 
+  localStorage.removeItem('type');
 
+};

+ 2 - 0
src/store/user/state.js
View File 

@@ -0,0 +1,2 @@
 
+export const user = {};
 
+export const menuList = [];

+ 29 - 0
src/views/index.vue
View File 

@@ -0,0 +1,29 @@
 
+<template>
 
+  <div id="index">
 
+    <el-row>
 
+      <el-col :span="24">
 
+        <p>index</p>
 
+      </el-col>
 
+    </el-row>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  metaInfo() {
 
+    return { title: this.$route.meta.title };
 
+  },
 
+  name: 'index',
 
+  props: {},
 
+  components: {},
 
+  data: function() {
 
+    return {};
 
+  },
 
+  created() {},
 
+  methods: {},
 
+  computed: {},
 
+  watch: {},
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped></style>

+ 3 - 0
vue.config.js
View File 

@@ -0,0 +1,3 @@
 
+module.exports = {
 
+  lintOnSave: false,
 
+};