@tongfun/tf-widget 0.1.19 → 0.1.20

package/package/tf-widget/src/children/single-line-text.vue

@@ -1,82 +1,82 @@
-<template>
-  <el-input
-    :value="value"
-    :disabled="JSON.parse(disabled) "
-    :placeholder="placeholder"
-    :clearable="clearable"
-    @input="handleInput"
-    v-on="$listeners"
-  >
-    <i v-if="disabled" class="el-icon-lock el-input__icon" slot="suffix" />
-  </el-input>
-</template>
-<script>
-export default {
-  components: {
-
-  },
-  props: {
-    value: {
-      type: String,
-      default: ''
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    disabled: {
-      type: [Boolean, String],
-      default: false
-    },
-    defaultValue: {
-      type: String,
-      default: ''
-    },
-    clearable: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    return {
-    }
-  },
-  computed: {
-    debug () {
-      return typeof this.value
-    }
-  },
-  watch: {
-    value () {
-      if (!this.value) {
-        this.handleInput(null)
-      }
-    }
-  },
-  created () {
-    // 默认值
-    if (this.defaultValue && !this.value) {
-      return this.handleInput(this.defaultValue)
-    }
-    // 有值的情况下不进行初始化
-    if (!this.value) {
-      return this.handleInput(null)
-    }
-  },
-  methods: {
-    handleInput (newValue) {
-      this.$emit('input', newValue)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import '../assets/common-input.less';
-::v-deep .el-input__inner{
-  width: 100%;
-  border: none;
-  border-bottom: 1px solid #DCDCDC;
-  border-radius: 0;
-}
-</style>
+<template>
+  <el-input
+    :value="value"
+    :disabled="JSON.parse(disabled) "
+    :placeholder="placeholder"
+    :clearable="clearable"
+    @input="handleInput"
+    v-on="$listeners"
+  >
+    <i v-if="disabled" class="el-icon-lock el-input__icon" slot="suffix" />
+  </el-input>
+</template>
+<script>
+export default {
+  components: {
+
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: [Boolean, String],
+      default: false
+    },
+    defaultValue: {
+      type: String,
+      default: ''
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    debug () {
+      return typeof this.value
+    }
+  },
+  watch: {
+    value () {
+      if (!this.value) {
+        this.handleInput(null)
+      }
+    }
+  },
+  created () {
+    // 默认值
+    if (this.defaultValue && !this.value) {
+      return this.handleInput(this.defaultValue)
+    }
+    // 有值的情况下不进行初始化
+    if (!this.value) {
+      return this.handleInput(null)
+    }
+  },
+  methods: {
+    handleInput (newValue) {
+      this.$emit('input', newValue)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '../assets/common-input.less';
+::v-deep .el-input__inner{
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #DCDCDC;
+  border-radius: 0;
+}
+</style>

package/package/tf-widget/src/children/small-pictures.vue

@@ -1,223 +1,223 @@
-<template>
-  <div class="small-picture">
-    <el-button size="mini" @click="handleClickUploadPicture" :disabled="disabled">点击上传图片</el-button>
-    <el-dialog
-      title="图片上传"
-      :visible.sync="dialogVisible"
-      width="30%"
-    >
-      <div>
-        <el-upload
-          class="upload-demo"
-          action="qqq"
-          :on-preview="handlePreview"
-          :on-remove="handleRemove"
-          :on-change="handleChange"
-          :before-upload="beforeAvatarUpload"
-          accept="image/jpg,image/jpeg,image/png"
-          :auto-upload="false"
-          multiple
-          :limit="5"
-          :on-exceed="handleExceed"
-          :file-list="fileList"
-          list-type="picture"
-        >
-          <el-button size="mini" type="primary">选择图片</el-button>
-          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
-        </el-upload>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button size="mini" class="close" @click="handleClickClose">取 消</el-button>
-        <el-button size="mini" @click="handleClickSure">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: [Boolean, Object, String],
-      default: null
-    }
-  },
-  data () {
-    return {
-      dialogVisible: false,
-      fileList: [],
-      count: null,
-      // 上传图片的参数
-      fileListParam: []
-    }
-  },
-  created () {
-    if (!this.$route.query.receiptId) {
-      // eslint-disable-next-line no-return-assign
-      return this.count = null
-    }
-    this.count = 0
-  },
-  methods: {
-
-    // 打开上传图片模态框
-    handleClickUploadPicture () {
-      this.dialogVisible = true
-      if (!this.$route.query.receiptId) {
-        return
-      }
-      if (!this.value) {
-        this.fileListParam = []
-        this.fileList = []
-        return
-      }
-      this.fileListParam = []
-      this.fileList = []
-      this.value.split(',').forEach((v, i) => {
-        this.fileListParam.push(v)
-        this.fileList.push({
-          name: v.split('/')[v.split('/').length - 1],
-          url: v
-        })
-      })
-    },
-
-    // 上传图片之前
-    beforeAvatarUpload (file) {
-      const isJPG = file.type === 'image/jpeg'
-      const isPng = file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isJPG && !isPng) {
-        this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!')
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-      }
-      return isJPG && isLt2M
-    },
-
-    // 点击删除上传图片列表
-    handleRemove (file, fileList) {
-      // eslint-disable-next-line eqeqeq
-      const index = this.fileList.findIndex((ele) => { return ele.url == file.url })
-      this.fileList.splice(index, 1)
-      this.fileListParam.splice(index, 1)
-    },
-
-    // 点击已经上传的图片列表
-    handlePreview (file) {
-
-    },
-
-    // 文件超出个数限制时触发
-    handleExceed (files, fileList) {
-      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-    },
-
-    // 上传成功或者删除图片变化就会触发
-    handleChange (file, fileList) {
-      this.fileList = fileList
-      this.getBase64(file.raw).then((res) => {
-        const str = `${res.name}%${res.url}`
-        this.fileListParam.push(str)
-      })
-    },
-
-    // base64转码
-    getBase64 (file) {
-      return new Promise(function (resolve, reject) {
-        const reader = new FileReader()
-        const Result = {}
-        reader.readAsDataURL(file)
-        reader.onload = function () {
-          Result.name = file.name
-          Result.url = reader.result
-        }
-        reader.onerror = function (error) {
-          reject(error)
-        }
-        reader.onloadend = function () {
-          resolve(Result)
-        }
-      })
-    },
-
-    handleClickClose () {
-      this.dialogVisible = false
-    },
-
-    handleClickSure () {
-      this.$emit('input', this.fileListParam.join('@'))
-      this.dialogVisible = false
-    }
-
-  }
-}
-
-</script>
-<style lang='less' scoped>
-.small-picture{
-  ::v-deep .el-button--mini{
-    background-color: #0C4C8E;
-    border-color: #0C4C8E;
-    color: #FFFFFF;
-    margin-right: 2px;
-  }
-  .close{
-    background: #e5e5e5;
-    color: #666;
-    margin-right: 1.95vw;
-  }
-  ::v-deep .el-dialog__body{
-    padding-top: 0;
-  }
-  .dialog-footer{
-    display: flex;
-    justify-content: center;
-  }
-  /*去除upload组件过渡效果*/
-  ::v-deep.el-upload-list__item {
-    transition: none !important;
-  }
-  ::v-deep .el-upload-list--picture{
-    max-height: 30vh;
-    overflow: auto;
-    padding: 0 1vw;
-    box-sizing: border-box;
-  }
-  ::v-deep.el-upload-list__item-name{
-    cursor: pointer;
-  }
-  ::v-deep .el-upload-list--picture::-webkit-scrollbar{
-    width:10px;
-    height:10px;
-    }
-    /*正常情况下滑块的样式*/
-   ::v-deep .el-upload-list--picture::-webkit-scrollbar-thumb{
-    background-color:rgba(0,0,0,.05);
-    border-radius:10px;
-    }
-    /*鼠标悬浮在该类指向的控件上时滑块的样式*/
-   ::v-deep .el-upload-list--picture:hover::-webkit-scrollbar-thumb{
-    background-color:rgba(0,0,0,.2);
-    border-radius:10px;
-    }
-    /*鼠标悬浮在滑块上时滑块的样式*/
-   ::v-deep .el-upload-list--picture::-webkit-scrollbar-thumb:hover{
-    background-color:rgba(0,0,0,.4);
-    }
-    /*正常时候的主干部分*/
-   ::v-deep .el-upload-list--picture::-webkit-scrollbar-track{
-    border-radius:10px;
-    background-color:white;
-    }
-    /*鼠标悬浮在滚动条上的主干部分*/
-   ::v-deep .el-upload-list--picture::-webkit-scrollbar-track:hover{
-    background-color:rgba(0,0,0,.01);
-    }
-}
-</style>
+<template>
+  <div class="small-picture">
+    <el-button size="mini" @click="handleClickUploadPicture" :disabled="disabled">点击上传图片</el-button>
+    <el-dialog
+      title="图片上传"
+      :visible.sync="dialogVisible"
+      width="30%"
+    >
+      <div>
+        <el-upload
+          class="upload-demo"
+          action="qqq"
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          :on-change="handleChange"
+          :before-upload="beforeAvatarUpload"
+          accept="image/jpg,image/jpeg,image/png"
+          :auto-upload="false"
+          multiple
+          :limit="5"
+          :on-exceed="handleExceed"
+          :file-list="fileList"
+          list-type="picture"
+        >
+          <el-button size="mini" type="primary">选择图片</el-button>
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
+        </el-upload>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" class="close" @click="handleClickClose">取 消</el-button>
+        <el-button size="mini" @click="handleClickSure">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: [Boolean, Object, String],
+      default: null
+    }
+  },
+  data () {
+    return {
+      dialogVisible: false,
+      fileList: [],
+      count: null,
+      // 上传图片的参数
+      fileListParam: []
+    }
+  },
+  created () {
+    if (!this.$route.query.receiptId) {
+      // eslint-disable-next-line no-return-assign
+      return this.count = null
+    }
+    this.count = 0
+  },
+  methods: {
+
+    // 打开上传图片模态框
+    handleClickUploadPicture () {
+      this.dialogVisible = true
+      if (!this.$route.query.receiptId) {
+        return
+      }
+      if (!this.value) {
+        this.fileListParam = []
+        this.fileList = []
+        return
+      }
+      this.fileListParam = []
+      this.fileList = []
+      this.value.split(',').forEach((v, i) => {
+        this.fileListParam.push(v)
+        this.fileList.push({
+          name: v.split('/')[v.split('/').length - 1],
+          url: v
+        })
+      })
+    },
+
+    // 上传图片之前
+    beforeAvatarUpload (file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isPng = file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG && !isPng) {
+        this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+
+    // 点击删除上传图片列表
+    handleRemove (file, fileList) {
+      // eslint-disable-next-line eqeqeq
+      const index = this.fileList.findIndex((ele) => { return ele.url == file.url })
+      this.fileList.splice(index, 1)
+      this.fileListParam.splice(index, 1)
+    },
+
+    // 点击已经上传的图片列表
+    handlePreview (file) {
+
+    },
+
+    // 文件超出个数限制时触发
+    handleExceed (files, fileList) {
+      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+    },
+
+    // 上传成功或者删除图片变化就会触发
+    handleChange (file, fileList) {
+      this.fileList = fileList
+      this.getBase64(file.raw).then((res) => {
+        const str = `${res.name}%${res.url}`
+        this.fileListParam.push(str)
+      })
+    },
+
+    // base64转码
+    getBase64 (file) {
+      return new Promise(function (resolve, reject) {
+        const reader = new FileReader()
+        const Result = {}
+        reader.readAsDataURL(file)
+        reader.onload = function () {
+          Result.name = file.name
+          Result.url = reader.result
+        }
+        reader.onerror = function (error) {
+          reject(error)
+        }
+        reader.onloadend = function () {
+          resolve(Result)
+        }
+      })
+    },
+
+    handleClickClose () {
+      this.dialogVisible = false
+    },
+
+    handleClickSure () {
+      this.$emit('input', this.fileListParam.join('@'))
+      this.dialogVisible = false
+    }
+
+  }
+}
+
+</script>
+<style lang='less' scoped>
+.small-picture{
+  ::v-deep .el-button--mini{
+    background-color: #0C4C8E;
+    border-color: #0C4C8E;
+    color: #FFFFFF;
+    margin-right: 2px;
+  }
+  .close{
+    background: #e5e5e5;
+    color: #666;
+    margin-right: 1.95vw;
+  }
+  ::v-deep .el-dialog__body{
+    padding-top: 0;
+  }
+  .dialog-footer{
+    display: flex;
+    justify-content: center;
+  }
+  /*去除upload组件过渡效果*/
+  ::v-deep.el-upload-list__item {
+    transition: none !important;
+  }
+  ::v-deep .el-upload-list--picture{
+    max-height: 30vh;
+    overflow: auto;
+    padding: 0 1vw;
+    box-sizing: border-box;
+  }
+  ::v-deep.el-upload-list__item-name{
+    cursor: pointer;
+  }
+  ::v-deep .el-upload-list--picture::-webkit-scrollbar{
+    width:10px;
+    height:10px;
+    }
+    /*正常情况下滑块的样式*/
+   ::v-deep .el-upload-list--picture::-webkit-scrollbar-thumb{
+    background-color:rgba(0,0,0,.05);
+    border-radius:10px;
+    }
+    /*鼠标悬浮在该类指向的控件上时滑块的样式*/
+   ::v-deep .el-upload-list--picture:hover::-webkit-scrollbar-thumb{
+    background-color:rgba(0,0,0,.2);
+    border-radius:10px;
+    }
+    /*鼠标悬浮在滑块上时滑块的样式*/
+   ::v-deep .el-upload-list--picture::-webkit-scrollbar-thumb:hover{
+    background-color:rgba(0,0,0,.4);
+    }
+    /*正常时候的主干部分*/
+   ::v-deep .el-upload-list--picture::-webkit-scrollbar-track{
+    border-radius:10px;
+    background-color:white;
+    }
+    /*鼠标悬浮在滚动条上的主干部分*/
+   ::v-deep .el-upload-list--picture::-webkit-scrollbar-track:hover{
+    background-color:rgba(0,0,0,.01);
+    }
+}
+</style>