@smallwei/avue 3.8.1 → 3.8.3

package/es/packages/element-plus/input-tag/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-input-tag
+    v-model="text"
+    :class="b()"
+    @click="handleClick"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @change="handleValueChange"
+    :placeholder="placeholder"
+    :size="size"
+    :min="min"
+    :max="max"
+    :draggable="drag"
+    :clearable="clearableVal"
+    :readonly="readonly"
+    :disabled="disabled"
+  >
+    <template #prefix v-if="prefix">
+      <span @click="prefixClick(text)">{{ prefix }}</span>
+    </template>
+    <template #suffix v-if="suffix">
+      <span @click="suffixClick(text)">{{ suffix }}</span>
+    </template>
+    <template #tag="{ value }">
+      <slot :value="value" v-if="$slots.default"> </slot>
+      <span v-else>{{ value }}</span>
+    </template>
+  </el-input-tag>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+export default create({
+  name: "input-tag",
+  mixins: [props(), event()],
+  data() {
+    return {};
+  },
+  props: {
+    clearValidate: Function,
+    drag: Boolean,
+    min: {
+      type: Number,
+      default: -Infinity,
+    },
+    max: {
+      type: Number,
+      default: Infinity,
+    },
+    prefix: {
+      type: String,
+    },
+    prefixClick: {
+      type: Function,
+      default: () => {},
+    },
+    suffix: {
+      type: String,
+    },
+    suffixClick: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleValueChange(val) {
+      setTimeout(() => {
+        if (!this.validatenull(val) && this.rules && this.clearValidate) {
+          this.clearValidate(this.prop);
+        }
+      });
+    },
+  },
+});
+</script>

package/es/packages/element-plus/input-tree/index.vue

@@ -0,0 +1,194 @@
+<template>
+  <el-tree-select ref="tree"
+                  :class="b()"
+                  :cache-data="cacheData"
+                  v-model="text"
+                  :loading="loading"
+                  :lazy="lazy"
+                  :load="handleLoad"
+                  :size="size"
+                  @check="checkChange"
+                  :filter-node-method="filterNodeMethod"
+                  :render-after-expand="false"
+                  :loading-text="loadingText"
+                  :collapse-tags="tags"
+                  :clearable="clearableVal"
+                  :placeholder="placeholder"
+                  :popper-class="popperClass"
+                  :popper-append-to-body="popperAppendToBody"
+                  :multiple="multiple"
+                  :node-key="valueKey"
+                  :show-checkbox="multiple"
+                  :filterable="filterable"
+                  :check-strictly="checkStrictly"
+                  :disabled="disabled"
+                  :accordion="accordion"
+                  :icon-class="iconClass"
+                  :indent="indent"
+                  @focus="handleFocus"
+                  @blur="handleBlur"
+                  :check-on-click-leaf="checkOnClickLeaf"
+                  :default-checked-keys="keysList"
+                  :default-expanded-keys="defaultExpandedKeys?defaultExpandedKeys:keysList"
+                  :default-expand-all="defaultExpandAll"
+                  :check-on-click-node="checkOnClickNode"
+                  :expand-on-click-node="expandOnClickNode"
+                  @node-click.self="handleNodeClick"
+                  :props="treeProps"
+                  :data="netDic">
+    <template #="{data,node}">
+      <slot v-if="$slots.default"
+            :label="labelKey"
+            :value="valueKey"
+            :node="node"
+            :item="data"></slot>
+      <span v-else
+            style="margin-left:8px;">
+        <span>{{getLabelText(data)}}</span>
+        <span :class="b('desc')"
+              v-if="data[descKey]">{{ data[descKey] }}</span>
+      </span>
+    </template>
+  </el-tree-select>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+import { DIC_SHOW_SPLIT } from '../../../global/variable.mjs';
+import { DIC_PROPS } from '../../../global/variable.mjs';
+export default create({
+  name: "input-tree",
+  mixins: [props(), event()],
+  data () {
+    return {
+      netDic: [],
+      loading: false,
+    };
+  },
+  props: {
+    cacheData: [Object, Array],
+    indent: Number,
+    filterNodeMethod: Function,
+    nodeClick: Function,
+    treeLoad: Function,
+    checked: Function,
+    modelValue: {},
+    loadingText: {
+      type: String,
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    leafOnly: {
+      type: Boolean,
+      default: false
+    },
+    tags: {
+      type: Boolean,
+      default: false
+    },
+    limit: {
+      type: Number,
+      default: 0
+    },
+    checkOnClickLeaf: Boolean,
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: (props) => props.multiple ? false : true
+    },
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    parent: {
+      type: Boolean,
+      default: true
+    },
+    iconClass: {
+      type: String,
+    },
+    defaultExpandedKeys: Array,
+    checkOnClickNode: Boolean,
+    expandOnClickNode: Boolean,
+    defaultExpandAll: Boolean,
+    popperAppendToBody: Boolean,
+  },
+  watch: {
+    dic: {
+      handler (val) {
+        this.netDic = val;
+      },
+      immediate: true
+    },
+    netDic: {
+      handler () {
+        this.init();
+      },
+      immediate: true
+    },
+  },
+  computed: {
+    keysList () {
+      return this.multiple ? this.text : [this.text || '']
+    },
+    treeProps () {
+      return Object.assign(this.deepClone(DIC_PROPS), this.props, {
+        isLeaf: this.leafKey
+      })
+    }
+  },
+  methods: {
+    handleTextValue (value) {
+      this.init();
+    },
+    getHalfList () {
+      let list = this.$refs.tree.getCheckedNodes(false, true)
+      list = list.map(ele => ele[this.valueKey])
+      return list;
+    },
+    init () {
+      this.disabledParentNode(this.dic, this.parent);
+    },
+    disabledParentNode (dic, parent) {
+      dic.forEach(ele => {
+        const children = ele[this.childrenKey];
+        if (!this.validatenull(children)) {
+          if (!parent) {
+            ele.disabled = true;
+          }
+          this.disabledParentNode(children, parent);
+        }
+      });
+    },
+    checkChange (checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
+      if (typeof this.checked === "function") this.checked(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys);
+    },
+    handleNodeClick (data, node, nodeComp) {
+      if (typeof this.nodeClick === "function") this.nodeClick(data, node, nodeComp);
+    },
+    handleLoad (node, resolve) {
+      let callback = (list) => {
+        let findDic = (list, value, children) => {
+          list.forEach(ele => {
+            if (ele[this.valueKey] == value) {
+              ele[this.childrenKey] = children
+            } else if (ele[this.childrenKey]) {
+              findDic(ele[this.childrenKey])
+            }
+          })
+        }
+        findDic(this.netDic, node.key, list)
+        resolve(list);
+      }
+      this.treeLoad && this.treeLoad(node, callback)
+    }
+  }
+});
+</script>

package/es/packages/element-plus/license/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div :class="b()"
+       style="position:relative">
+    <canvas :id="'canvas'+id"
+            ref="canvas"></canvas>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import { downFile } from '../../../utils/util.mjs';
+export default create({
+  name: 'license',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    option: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  watch: {
+    option: {
+      handler () {
+        this.init();
+      },
+      deep: true
+    }
+  },
+  data () {
+    return {
+      base64: '',
+      draw: false,
+      canvas: '',
+      context: '',
+    }
+  },
+  computed: {
+    img () {
+      return this.option.img
+    },
+    list () {
+      return this.option.list || []
+    }
+  },
+  mounted () {
+    this.canvas = document.getElementById("canvas" + this.id);
+    this.context = this.canvas.getContext("2d");
+    this.init();
+  },
+  methods: {
+    init () {
+      this.draw = false;
+      const beauty = new Image();
+      beauty.src = this.img;
+      beauty.onload = () => {
+        const width = this.option.width || beauty.width;;
+        const height = this.option.width ? ((beauty.height / beauty.width) * this.option.width) : beauty.height;
+        this.$refs.canvas.width = width;
+        this.$refs.canvas.height = height
+        this.context.clearRect(0, 0, width, height);
+        this.context.drawImage(beauty, 0, 0, width, height);
+        this.list.forEach((ele, index) => {
+          const callback = () => {
+            if (index == this.list.length - 1) {
+              setTimeout(() => {
+                this.draw = true;
+              }, 0)
+            }
+          }
+          if (ele.img) {
+            const img = new Image();
+            img.src = ele.img
+            img.onload = () => {
+              const widths = ele.width || img.width;;
+              const heights = ele.width ? ((img.height / img.width) * ele.width) : img.height;
+              this.context.drawImage(img, ele.left, ele.top, widths, heights);
+              callback();
+            }
+          } else {
+            if (ele.bold) {
+              this.context.font = `bold ${ele.size}px ${ele.style}`
+            } else {
+              this.context.font = `${ele.size}px ${ele.style}`
+            }
+            this.context.fillStyle = ele.color;
+
+            this.context.fillText(ele.text, ele.left, ele.top);
+            this.context.stroke();
+            callback();
+          }
+        })
+
+      };
+    },
+    getFile (name = new Date().getTime()) {
+      return new Promise((resolve) => {
+        const time = setInterval(() => {
+          if (this.draw) {
+            const data = this.canvas.toDataURL('image/jpeg', 1.0);
+            const file = this.dataURLtoFile(data, name)
+            clearInterval(time)
+            resolve(file)
+          }
+        }, 1000)
+      })
+      return file;
+    },
+    downFile (filename = new Date().getTime()) {
+      downFile(this.base64, filename)
+    },
+    getBase64 () {
+      return new Promise((resolve) => {
+        const time = setInterval(() => {
+          if (this.draw) {
+            const data = this.canvas.toDataURL('image/jpeg', 1.0);
+            this.base64 = data;
+            clearInterval(time)
+            resolve(data)
+          }
+        }, 100)
+      })
+    },
+    getPdf (name = new Date().getTime()) {
+      const contentWidth = this.canvas.width;
+      const contentHeight = this.canvas.height;
+      const pageHeight = (contentWidth / 592.28) * 841.89;
+      let leftHeight = contentHeight;
+      let position = 0;
+      const imgWidth = 595.28;
+      const imgHeight = (592.28 / contentWidth) * contentHeight;
+      const pageData = this.canvas.toDataURL('image/jpeg', 1.0);
+      const PDF = new window.jsPDF('', 'pt', 'a4');
+      if (leftHeight < pageHeight) {
+        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+      } else {
+        while (leftHeight > 0) {
+          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
+          leftHeight -= pageHeight;
+          position -= 841.89;
+          if (leftHeight > 0) {
+            PDF.addPage();
+          }
+        }
+      }
+      PDF.save(`${name}.pdf`);
+    }
+  }
+})
+</script>

package/es/packages/element-plus/login/index.vue

@@ -0,0 +1,203 @@
+<template>
+  <div :class="b()"
+       :style="{width:setPx(width)}">
+    <el-form :model="form"
+             ref="form"
+             :size="$AVUE.size"
+             label-suffix=":"
+             :label-width="setPx(labelWidth)">
+      <el-form-item :label="username.label || t('login.usernameLabel')"
+                    :rules="username.rules"
+                    :label-width="setPx(username.labelWidth)"
+                    v-if="!username.hide"
+                    prop="username">
+        <el-tooltip :content="username.tip"
+                    :disabled="username.tip===undefined"
+                    placement="top-start">
+          <el-input v-model="form.username"
+                    :prefix-icon="username.prefixIcon || 'el-icon-user'"
+                    :placeholder="username.placeholder || t('login.usernamePlaceholder')"
+                    :autocomplete="username.autocomplete"></el-input>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item :label="password.label || t('login.passwordLabel')"
+                    :rules="password.rules"
+                    :label-width="setPx(password.labelWidth)"
+                    v-if="!password.hide"
+                    prop="password">
+        <el-tooltip :content="password.tip"
+                    :disabled="password.tip===undefined"
+                    placement="top-start">
+          <el-input type="password"
+                    :prefix-icon="password.prefixIcon || 'el-icon-unlock'"
+                    :placeholder="password.placeholder || t('login.passwordPlaceholder')"
+                    show-password
+                    v-model="form.password"
+                    :autocomplete="password.autocomplete"></el-input>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item :label="code.label || t('login.codeLabel')"
+                    :rules="code.rules"
+                    v-if="!code.hide"
+                    :label-width="setPx(code.labelWidth)"
+                    prop="code">
+        <el-tooltip :content="code.tip"
+                    :disabled="code.tip===undefined"
+                    placement="top-start">
+          <el-input v-model="form.code"
+                    :prefix-icon="code.prefixIcon || 'el-icon-c-scale-to-original'"
+                    :placeholder="code.placeholder || t('login.codePlaceholder')"
+                    :autocomplete="code.autocomplete">
+
+            <template #append>
+              <el-button type="primary"
+                         :class="b('send')"
+                         v-if="isPhone"
+                         :disabled="sendDisabled"
+                         @click="onSend">{{sendText}}</el-button>
+              <span v-if="isImg">
+                <img :src="codesrc"
+                     alt=""
+                     @click="onRefresh"
+                     width="80"
+                     height="25">
+              </span>
+            </template>
+          </el-input>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary"
+                   @click="onSubmit"
+                   :class="b('submit')">{{t('login.submitBtn')}}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import locale from "../../../core/locale.mjs";
+export default create({
+  name: 'login',
+  mixins: [locale],
+  emits: ['update:modelValue','send','refresh','submit'],
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    codesrc: {
+      type: String,
+    },
+    option: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  computed: {
+    labelWidth () {
+      return this.option.labelWidth || 80
+    },
+    time () {
+      return this.option.time || 60
+    },
+    isImg () {
+      return this.codeType === 'img'
+    },
+    isPhone () {
+      return this.codeType === 'phone'
+    },
+    codeType () {
+      return this.option.codeType || 'img'
+    },
+    width () {
+      return this.option.width || '100%'
+    },
+    username () {
+      return this.column.username || {}
+    },
+    password () {
+      return this.column.password || {}
+    },
+    code () {
+      return this.column.code || {}
+    },
+    column () {
+      return this.option.column || {};
+    },
+    sendDisabled () {
+      return !this.validatenull(this.check)
+    },
+    sendText () {
+      return this.nowtime > 0
+        ? this.t('login.resendCode', { time: this.nowtime })
+        : this.t('login.sendCode');
+    }
+
+  },
+  watch: {
+    modelValue: {
+      handler () {
+        this.form = this.modelValue
+      },
+      deep: true
+    },
+    form: {
+      handler () {
+        this.$emit('update:modelValue', this.form)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data () {
+    return {
+      nowtime: 0,
+      check: null,
+      form: {}
+    }
+  },
+  methods: {
+    onSend () {
+      const callback = () => {
+        this.nowtime = this.time;
+        this.check = setInterval(() => {
+          this.nowtime--
+          if (this.nowtime === 0) {
+            clearInterval(this.check);
+            this.check = null;
+          }
+        }, 1000)
+      }
+      if (this.sendDisabled) return
+      this.$emit('send', callback)
+    },
+    onRefresh () {
+      this.$emit('refresh');
+    },
+    onSubmit () {
+      const onCover = () => {
+        const form = {};
+        for (let o in this.form) {
+          let key = o;
+          if (this[o].prop) {
+            key = this[o].prop
+          }
+          form[key] = this.form[o]
+        }
+        return form;
+      }
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit('submit', onCover())
+        }
+      });
+    }
+  }
+});
+</script>