shijiplus-web-plugin 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shijiplus-web-plugin",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "files": [
     "src"
   ],
@@ -15,7 +15,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "iview": "^3.5.4"
+    "html2canvas": "^1.4.1",
+    "iview": "^3.5.4",
+    "qrcodejs2": "0.0.2",
+    "xlsx": "^0.13.3"
   },
   "devDependencies": {
     "vue": "^2.6.14",
@@ -46,7 +49,8 @@
     },
     "rules": {
       "no-unused-vars": "off",
-      "no-prototype-builtins": "off"
+      "no-prototype-builtins": "off",
+      "vue/no-mutating-props": "off"
     }
   },
   "browserslist": [
@@ -54,4 +58,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

package/src/App.vue

@@ -1,14 +1,16 @@
 <template>
   <div id="app">
     <img id="img" alt="Vue logo" src="./assets/logo.png" />
+    <plus-city-cascader></plus-city-cascader>
   </div>
 </template>
 
 <script>
+import PlusCityCascader from './components/plus-comp/plus-city-cascader/plus-city-cascader.vue'
 
 export default {
   name: 'App',
-  components: {},
+  components: {PlusCityCascader},
   mounted() {
     console.log(
       'web-tool mounted!',

package/src/components/plus-comp/index.js

@@ -0,0 +1,15 @@
+const compFiles = ['plus-icon', 'plus-city-cascader', 'plus-count-down', 'plus-city-cascader', 'plus-common-header', 'plus-poptip', 'plus-qr-code', 'plus-drawer', 'plus-tabs', 'plus-remote-selector', 'plus-select', 'plus-form', 'plus-scrollview', 'plus-table', 'plus-modal', 'plus-card', 'permission-component']
+
+const install = (vue, opts = {}) => {
+  compFiles.forEach(file => {
+    let compName = ''
+    file.split('-').forEach(word => {
+      compName += word[0].toLocaleUpperCase() + word.substring(1, word.length)
+    })
+    vue.component(compName, require(`./${file}/${file}.vue`).default)
+  })
+}
+
+export default {
+  install
+}

package/src/components/plus-comp/permission-component/permission-component.vue

@@ -0,0 +1,78 @@
+<template>
+  <div @click="onclick">
+    <slot></slot>
+  </div>
+</template>
+<script>
+import { getIntersection } from '../../../libs/tools'
+export default {
+  props: {
+    hideWhenNoAuth: {
+      type: Boolean,
+      default: false
+    },
+    authCode: {
+      type: [String, Array],
+      default: ''
+    }
+  },
+  watch: {
+    hideWhenNoAuth: {
+      handler(val) {
+        if (
+          document.location.hostname == 'localhost' ||
+          document.location.hostname.indexOf('192.168') != -1 ||
+          !this.authCode ||
+          !this.$store.state.user.access ||
+          this.$store.state.user.access.length == 0
+        ) {
+          this.hasAccess = true
+        }
+        if (typeof this.authCode == 'string') {
+          if (
+            this.$store.state.user.access &&
+            this.$store.state.user.access.indexOf(this.authCode) != -1
+          ) {
+            this.hasAccess = true
+          }
+        } else if (this.authCode instanceof Array) {
+          const rst = getIntersection(
+            this.$store.state.user.access,
+            this.authCode
+          )
+          if (rst.length) {
+            this.hasAccess = true
+          }
+        }
+        if (val && !this.hasAccess) {
+          this.$nextTick(() => {
+            this.$el.parentNode.removeChild(this.$el)
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      hasAccess: false
+    }
+  },
+  methods: {
+    onclick() {
+      console.log('------this.hasAccess---------', this.hasAccess)
+      if (this.hasAccess) {
+        this.$emit('click')
+      } else {
+        this.$Message.success('无权限，请联系管理员~')
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.permission-component {
+  cursor: pointer;
+}
+</style>

package/src/components/plus-comp/plus-card/plus-card.vue

@@ -0,0 +1,21 @@
+<template>
+  <Card class="plus-card" dis-hover :bordered="false">
+    <slot></slot>
+  </Card>
+</template>
+<script>
+export default {
+  props: {},
+  data() {
+    return {}
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-card {
+  position: relative;
+  /deep/.ivu-card-body {
+    height: 100%;
+  }
+}
+</style>

package/src/components/plus-comp/plus-city-cascader/plus-city-cascader.vue

@@ -0,0 +1,108 @@
+<template>
+  <Cascader
+    :data="provinceList"
+    :load-data="loadData"
+    ref="plusCascaderRef"
+    v-model="selectResult"
+    @on-change="onchange"
+  ></Cascader>
+</template>
+
+<script>
+import Emitter from 'iview/src/mixins/emitter'
+export default {
+  name: 'AreaSelector',
+  mixins: [Emitter],
+  props: {
+    province: [String, Number],
+    city: [String, Number],
+    getAllProvince: { type: Function, default: null },
+    getCityByPid: { type: Function, default: null }
+  },
+  data() {
+    return {
+      provinceList: [],
+
+      provinceCode: '',
+      cityCode: '',
+
+      selectResult: []
+    }
+  },
+  computed: {},
+  watch: {
+    province: function (val) {
+      if (!val) {
+        this.$refs.plusCascaderRef.clearSelect()
+      } else {
+        this.selectResult = [this.province, this.city]
+      }
+    },
+    city: function (val) {
+      this.selectResult = [this.province, this.city]
+    }
+  },
+  methods: {
+    onchange(value, selectedData) {
+      const result = {
+        province: selectedData[0] || {},
+        city: selectedData[1] || {}
+      }
+      this.$emit('change', result)
+      console.log('----------onchange-------------', result)
+      this.dispatch('FormItem', 'on-form-change', result)
+    },
+    // 查询省份列表
+    getAllProvinces() {
+      if (this.getAllProvince === null) {
+        return
+      }
+      this.getAllProvince().then((res) => {
+        let provinceArr = res.data.data
+        provinceArr.forEach((pi) => {
+          this.provinceList.push({
+            value: pi.id,
+            label: pi.name,
+            loading: false,
+            children: [],
+            lvl: 'province',
+            rawData: pi
+          })
+        })
+      })
+    },
+    loadCity(item, callback) {
+      item.children = []
+      if (this.getCityByPid === null) {
+        return
+      }
+      this.getCityByPid(item.value).then((res) => {
+        let citiesArr = res.data.data
+        if (citiesArr != null) {
+          citiesArr.forEach((ci) => {
+            item.children.push({
+              value: ci.id,
+              label: ci.name,
+              rawData: ci
+            })
+          })
+        }
+        item.loading = false
+        callback()
+      })
+    },
+    loadData(item, callback) {
+      item.loading = true
+      if (item.lvl === 'province') {
+        this.loadCity(item, callback)
+      }
+    }
+  },
+  mounted() {
+    this.getAllProvinces()
+  }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/plus-comp/plus-common-header/plus-common-header.vue

@@ -0,0 +1,58 @@
+<template>
+  <Header class="plus-common-header">
+    <div class="header-wrap align-center">
+      <img class="logo" src="/images/hd/plus-icon.png" />
+      <slot></slot>
+    </div>
+  </Header>
+</template>
+<script>
+export default {
+  name: 'HeaderBar',
+  components: {},
+  props: {},
+  computed: {
+    moudelType() {
+      const breadCrumbs = this.$store.state.app.breadCrumbList
+      if (breadCrumbs && breadCrumbs.length) {
+        return breadCrumbs[0].meta && breadCrumbs[0].meta.moudelType
+      }
+      return ''
+    }
+  },
+  methods: {
+    toMarket() {
+      this.$router.push({
+        name: 'activity-market'
+      })
+    },
+    toPlatform() {
+      this.$router.push({
+        name: 'order'
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-common-header {
+  padding: 0;
+  background: #ffffff;
+  z-index: 1000;
+  height: 72px;
+  line-height: 72px;
+  .header-wrap {
+    position: relative;
+    background-color: #ffffff;
+    box-shadow: var(--shadow-down);
+    padding: 0 16px;
+    height: 100%;
+    .logo {
+      margin-left: 32px;
+      width: 120px;
+      height: 38px;
+      object-fit: contain;
+    }
+  }
+}
+</style>

package/src/components/plus-comp/plus-count-down/plus-count-down.vue

@@ -0,0 +1,51 @@
+<template>
+  <div @click="onclick">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    beginNum: {
+      type: Number,
+      default: 60
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      currentNumber: 0
+    }
+  },
+  methods: {
+    onclick() {
+      this.currentNumber = this.beginNum
+      this.$emit('start')
+      this.countdownFun()
+    },
+    countdownFun() {
+      this.currentNumber = this.currentNumber - 1
+      this.$emit('change', { target: this, value: this.currentNumber })
+      if (this.currentNumber <= 0) {
+        this.$emit('end')
+        return
+      }
+      this.timer = setTimeout(() => {
+        this.countdownFun()
+      }, 1000)
+    },
+    removeTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+    }
+  },
+  beforeDestroy() {
+    this.removeTimer()
+  },
+  mounted() {
+    this.removeTimer()
+  }
+}
+</script>

package/src/components/plus-comp/plus-drawer/plus-drawer.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="plus-drawer">
+    <Drawer
+      :class-name="className + ' plus-drawer'"
+      v-model="visiable"
+      :title="props.title"
+      :mask-closable="maskClosable"
+      :width="width"
+      @on-close="onClose"
+      @on-visible-change="onVisibleChange"
+    >
+      <div class="body-inner">
+        <slot></slot>
+      </div>
+
+      <div class="drawer-footer i-flex-wrap justify-center align-center">
+        <slot name="footer">
+          <Button type="primary" @click="onClose"> 关闭 </Button>
+        </slot>
+      </div>
+      <Spin v-if="props.loading" fix>
+        <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
+        <div>{{ props.loadingTip || '正在处理...' }}</div>
+      </Spin>
+    </Drawer>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    width: {
+      type: [String, Number],
+      default: '40'
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    props: {
+      type: Object,
+      default() {
+        return {
+          show: false,
+          title: '',
+          loading: false,
+          loadingTip: null
+        }
+      }
+    }
+  },
+  watch: {
+    'props.show': {
+      handler(nValue) {
+        this.visiable = nValue
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      visiable: false
+    }
+  },
+  methods: {
+    onVisibleChange(e) {
+      this.props.show = e
+      if (!e) {
+        this.$emit('on-close')
+      }
+    },
+    onClose() {
+      this.props.show = false
+      this.$emit('on-close')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-drawer {
+  /deep/&.ivu-drawer-wrap {
+    .ivu-drawer-header {
+      height: 60px;
+      line-height: 60px;
+      padding: 0 24px;
+      .ivu-drawer-header-inner {
+        font-weight: 600;
+      }
+    }
+    .ivu-drawer-body {
+      padding: 0;
+    }
+    .body-inner {
+      height: ~'calc(100% - 80px)';
+      padding: 24px 24px 0px;
+      overflow: auto;
+    }
+    .drawer-footer {
+      height: 80px;
+      border-top: 1px solid #e8eaec;
+      padding: 0 24px;
+      background-color: #ffffff;
+      .ivu-btn {
+        margin-right: 40px;
+        &:last-child {
+          margin-right: 0px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/plus-comp/plus-form/plus-form.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="plus-form-wrap" ref="plusFormRef">
+    <slot></slot>
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+export default {
+  props: {
+    disabled: {
+      type: [Boolean],
+      default: false
+    }
+  },
+  watch: {
+    disabled: {
+      handler(nVal) {
+        this.$nextTick(() => {
+          this.findDisabledChildren(this.$refs.plusFormRef.__vue__)
+        })
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    findDisabledChildren(comp) {
+      if (!comp) {
+        return
+      }
+      if (comp._props && comp._props.hasOwnProperty('disabled')) {
+        comp._props.disabled = this.disabled
+      }
+      if (comp.$children) {
+        comp.$children.forEach((item) => {
+          this.findDisabledChildren(item)
+        })
+      }
+    }
+  },
+  updated() {},
+  mounted() {
+    Vue.config.warnHandler = (e, vm, info) => {
+      if (e.indexOf('Prop being mutated') == -1) {
+        console.warn(e, vm, info)
+      }
+    }
+    this.$children[0].fields.forEach((fVm) => {
+      if (fVm.$watch) {
+        fVm.$watch('validateState', (nVal, oVal) => {
+          this.$emit('on-validated-change', {
+            field: fVm.prop,
+            state: nVal,
+            el: fVm
+          })
+        })
+      }
+    })
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-form-wrap {
+  /deep/.ivu-form {
+    .ivu-form-item {
+      --error-left: 0px;
+      --error-pd-tp: 6px;
+      --form-item-mg-bt: 24px;
+      display: flex;
+      align-items: center;
+      margin-bottom: var(--form-item-mg-bt);
+
+      .ivu-form-item-label {
+        font-family: PingFangSC-SNaNpxibold;
+        font-weight: 600;
+        font-size: 14px;
+        color: #515a6e;
+        letter-spacing: 0.7px;
+        padding: 0;
+        flex-shrink: 0;
+        & + .ivu-form-item-content {
+          margin-left: 16px !important;
+        }
+      }
+
+      .ivu-form-item-content {
+        flex-grow: 1;
+      }
+      &.ivu-form-item-required {
+        .ivu-form-item-label:before {
+          margin-right: 0;
+        }
+      }
+      &.slot-label {
+        .ivu-form-item-label {
+          display: flex;
+          justify-content: flex-end;
+          label {
+            margin-right: 0;
+          }
+        }
+        &.ivu-form-item-required {
+          .ivu-form-item-label {
+            &::before {
+              display: none;
+            }
+            .required::before {
+              content: '*';
+              display: inline-block;
+              margin-right: 0px;
+              line-height: 1;
+              font-family: SimSun;
+              font-size: 14px;
+              color: #ff0000;
+            }
+          }
+        }
+      }
+      &.flex-start {
+        align-items: flex-start;
+        .ivu-form-item-label {
+          margin-top: 10px;
+        }
+      }
+      &.compact-form-item {
+        margin-bottom: 0px;
+      }
+      &.ivu-form-item-error {
+        margin-bottom: var(--form-item-mg-bt);
+        .ivu-form-item-error-tip {
+          left: var(--error-left);
+          padding-top: var(--error-pd-tp);
+        }
+        .form-item-other-tips {
+          margin-top: 26px !important;
+        }
+      }
+    }
+
+    .ivu-radio-wrapper {
+      font-size: 14px;
+    }
+    &.ivu-form-inline {
+      display: inline-flex;
+      flex-wrap: wrap;
+    }
+  }
+}
+</style>