Skip to content

O
office-web
Commit 7030a38a by 无尘
Options

add: 增加公共上传/公共输入框限制组件

parent ba36a1ca
Showing with 693 additions and 3 deletions
src/components/limit-input.vue 0 → 100644
<!--
限制输入框组件
<limitInput
:inputWidth="500"
:inputValue.sync="ruleForm.addressDetail"
:holder="'请输入详细地址'"
:getByType="'word'"
:maxLength="40">
</limitInput>
-->
<template>
<div class="input-line-cell" :style="{width: inputWidth + 'px'}">
<el-input :style="{width: inputWidth + 'px'}" v-model="itemValue" :placeholder="holder" @focus="inputFocus()" @keyup.native="(value) => toInput(value)"></el-input>
<span class="tip"><span class="len_span">{{inputNum}}</span>/{{limitLength}}</span>
</div>
</template>
<script>
import strLength from '@/common/js/strlen';
export default {
name: "limitinput",
props: {
inputValue: {// 传入 input value
type: String,
default: ''
},
maxLength: {// 限制长度
type: Number,
default: 10
},
inputWidth: {// input 长度
type: Number,
default: 500
},
getByType: { // 字或字符判断类型
type: String,
default: 'word' // word: 字, char: 字符
},
holder: {
type: String,
default: '请输入'
}
},
data() {
return {
inputNum: 0,
limitLength: 10,
itemValue: '',
}
},
methods: {
inputFocus(num) {
const that = this
console.log(num)
},
// 输入
toInput: function(value) {
const that = this;
console.log(value)
let temp = '';
if (that.getByType == 'word') {
temp = strLength.getByteVal(value.target.value,that.limitLength)
that.itemValue= temp.trim()
that.inputNum = strLength.getZhLen(that.itemValue);
}else {
temp = strLength.getCharVal(value.target.value,that.limitLength)
that.itemValue= temp.trim()
that.inputNum = strLength.getByteLen(that.itemValue);
}
that.$emit('update:inputValue',that.itemValue)
},
},
watch: {
maxLength: function(newData,oldData){
const that = this;
that.limitLength = newData
},
inputValue: function(newData,oldData){
const that = this;
that.itemValue = newData
that.inputNum = strLength.getZhLen(that.itemValue)
},
},
/* 接收数据 */
mounted(){
const that = this;
that.limitLength = that.maxLength;
that.itemValue = that.inputValue || '';
that.inputNum = strLength.getZhLen(that.inputValue);
},
}
</script>
<style lang="less" scoped>
.input-line-cell {
position: relative;
display: inline-block;
}
.w-340 {
width: 340px;
/deep/ .el-input__inner {
font-size: 12px;
color: #fff;
background-color: rgba(255,255,255,.1);
}
}
.el-input {
/deep/ .el-input__inner {
font-size: 12px;
color: #606266;
background-color: rgba(255,255,255,.1);
}
.is-disabled{
/deep/ .el-input__inner {
font-size: 12px;
color: #fff;
background-color: rgba(255,255,255,.1);
}
}
}
.tip {
position: absolute;
top: 2px;
right: 10px;
display: inline-block;
line-height: 32px;
text-align: right;
font-size: 12px;
color: #909399;
}
</style>
src/components/single-upload.vue 0 → 100644
<!--
单个上传组件
<single-upload
:imgSrc.sync=""
:field="''">
</single-upload>
-->
<template>
<div class="single-upload-wrap">
<el-upload
class="avatar-uploader"
:action="uploadUrl()"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imgSrc" :src="imgSrc" class="avatar" @mouseover="showImage(imgSrc)">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p class="upload-tip w-500" v-if="field=='businessCard'">上传营业执照复印件加盖公章，手写“仅用于好办认证”字样；照片搜索信息要求清晰可见，内容真实有效，不得做任何修改；支持jpp、jpeg、bmg、gif、png格式，大小不超过8M。</p>
<p class="upload-tip w-500" v-if="field=='idPhoto'">支持jpg、jpeg、pdf、bmg、gif格式照片，大小不超过2M，只能上传一张，再次上传覆盖前一张</p>
<p class="upload-tip w-500" v-if="field=='authPhoto'">点击可以<a href="#/" class="color-1890ff">下载授权书</a>模板，支持jpg、jpeg、pdf、bmg、gif格式照片，大小不超过2M，只能上传一张，再次上传覆盖前一张</p>
<!-- 图片预览 -->
<vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
</div>
</template>
<script>
import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "single-upload",
props: {
imgSrc: {// 传入 input value
type: String,
default: ''
},
field: {
type: String,
default: ''
},
uploadLimit: {
type: Number,
default: 2
}
},
data() {
return {
projectName: '', // 当前项目名
imgShowFlag: false, // 是否弹框显示,true: 显示；false: 不显示
imgUrl: '', // 传递的图片 src
}
},
beforeMount() {
var that = this
var host = window.location.origin;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
that.baseUrl = host
}
that.upUrl = that.baseUrl + '/api-plug/upload-img?wxFlag=1'
},
methods: {
/**
* 上传图片
*/
uploadUrl() {
const that = this
let host = window.location.origin;
let baseUrl;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
baseUrl = 'http://gicdev.demogic.com';
}else {
baseUrl = host
}
that.upUrl = baseUrl + '/api-plug/upload-img?wxFlag=1&requestProject=gic-clique'
console.log(that.upUrl)
return that.upUrl
},
/**
* 上传图片
*/
handleAvatarSuccess(res, file,type) {
var that = this
console.log("上传成功回调:",res,type)
if (res.errorCode == 0) {
// that.ruleForm.qcloudImageUrl = res.result[0].qcloudImageUrl;//URL.createObjectURL(file.raw);
// that.ruleForm.imageFiledCode = res.result[0].imageFiledCode;
// that.ruleForm.imageUrl = res.result[0].wxImg;
that.$emit('update:imgSrc',res.result[0].qcloudImageUrl)
}else {
errMsg.errorMsg(res)
}
},
beforeAvatarUpload(file) {
var that = this
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg'|| file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmg';
const isLt2M = file.size / 1024 / 1024 < that.uploadLimit;
if (!isJPG) {
that.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
that.$message.error(`上传头像图片大小不能超过 ${that.uploadLimit}MB!`);
}
return isJPG && isLt2M && new Promise(function(resolve, reject) {
let reader = new FileReader();
reader.onload = function(event) {
let image = new Image();
image.onload = function () {
let width = this.width;
let height = this.height;
console.log(width,height)
// if (width !== 750 && height !== 750){
// that.$message.error('图片尺寸必须为750px*750px!');
// reject();
// }
resolve();
};
image.src = event.target.result;
// that.$emit('update:imgSrc',event.target.result)
console.log("上传成功:",event.target.result)
};
reader.readAsDataURL(file);
})
},
/**
* 上传图片预览
*/
showImage(src) {
const that = this
if(!src || src == ''){
return false;
}
that.imgShowFlag = true;
that.imgUrl = src;
},
hideImage(val) {
const that = this
that.imgShowFlag = val
}
},
mounted() {
},
}
</script>
<style lang="less" scoped>
.w-500 {
width: 500px;
}
.avatar-uploader {
/deep/ .el-upload {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 180px;
height: 180px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
}
/* flex */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 180px;
height: 180px;
line-height: 180px;
text-align: center;
}
.avatar {
max-width: 180px;
max-height: 180px;
display: block;
}
.upload-tip {
color: #606266;
font-size: 12px;
line-height: 20px;
}
.color-1890ff {
color: #1890ff;
}
</style>
src/main.js
......@@ -13,13 +13,15 @@ import '../theme/index.css'
import vueOfficeHeader from '@gic-test/vue-office-header'
import vueOfficeAside from '@gic-test/vue-office-aside'
import vueAreaAb from '@gic-test/vue-area-ab'
import vueOfficeArea from '@gic-test/vue-office-area'
// 新增公共 footer插件
import vueGicFooter from '@gic-test/vue-gic-footer'
import vueGicImgPreview from '@gic-test/vue-gic-img-preview'
Vue.use(vueGicImgPreview)
Vue.use(vueGicFooter)
Vue.use(vueAreaAb)
Vue.use(vueOfficeArea)
Vue.use(vueOfficeAside)
Vue.use(vueOfficeHeader)
......
src/views/setting/companyCertify.vue
<template>
<div class="companyCertify-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="企业名称" prop="name" class="">
<!-- <el-input v-model="ruleForm.name" placeholder="请输入地址" class="w-500"></el-input> -->
<limitInput
:inputWidth="500"
:inputValue.sync="ruleForm.name"
:holder="'请输入企业名称'"
:maxLength="20">
</limitInput>
</el-form-item>
<el-form-item label="所在地区" prop="region" class="city-area">
<vue-office-area :projectName="projectName" :postUrl="postUrl" :areaOptions="areaOptions" @selected="selected"></vue-office-area>
</el-form-item>
<el-form-item label="详细地址" prop="addressDetail" class="">
<limitInput
:inputWidth="500"
:inputValue.sync="ruleForm.addressDetail"
:holder="'请输入详细地址'"
:maxLength="40">
</limitInput>
</el-form-item>
<el-form-item label="营业执照注册号" prop="registNum" class="">
<limitInput
:inputWidth="500"
:inputValue.sync="ruleForm.registNum"
:holder="'请输入营业执照注册号'"
:maxLength="20">
</limitInput>
</el-form-item>
<el-form-item label="证件类型" prop="cardType" class="">
<div>
<el-radio v-model="ruleForm.cardType" label="0">多证合一营业执照（原“注册号”字样，调整为18位的“统一社会信用代码”）</el-radio>
</div>
<div>
<el-radio v-model="ruleForm.cardType" label="1">普通营业执照（仍然标识为15位的“注册号”）</el-radio>
</div>
</el-form-item>
<el-form-item label="营业执照" prop="qcloudImageUrl" class="">
<single-upload
:imgSrc.sync="ruleForm.qcloudImageUrl"
:uploadLimit="8"
:field="'businessCard'">
</single-upload>
</el-form-item>
<el-form-item label="手持证件照片" prop="idPhoto" class="">
<single-upload
:imgSrc.sync="ruleForm.idPhoto"
:field="'idPhoto'">
</single-upload>
</el-form-item>
<el-form-item label="授权书" prop="authPhoto" class="">
<single-upload
:imgSrc.sync="ruleForm.authPhoto"
:field="'authPhoto'">
</single-upload>
</el-form-item>
<el-form-item label="状态" prop="status" class="status-item">
<el-tag type="danger" v-if="ruleForm.status==0"><i class="el-icon-error"></i>审核失败</el-tag>
<el-tag type="success" v-if="ruleForm.status==1"><i class="el-icon-success"></i>审核成功</el-tag>
<el-tag v-if="ruleForm.status==2"><i class=""></i>审核中</el-tag>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button><el-button type="primary" @click="submitReview('ruleForm')">提交审核</el-button>
</el-form-item>
</el-form>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import limitInput from '@/components/limit-input.vue';
import singleUpload from '@/components/single-upload.vue';
import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "companyCertify",
data() {
return {
projectName: '', // 当前项目名
postUrl: '/api-admin/dict-district-list',// 地区选择请求 url 参数
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index',
relocation: true
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '企业设置',
path: '/companyAddress'
},
{
name: '企业地址',
path: ''
}
],
ruleForm: {
name: '',
region: '',
addressDetail: '',
registNum: '',
cardType: '0',//
qcloudImageUrl: '',
idPhoto: '',
authPhoto: '',
status: 0
},
rules: {
name: [
{required: true,message: '请输入企业名称', trigger: 'blur' }
],
addressDetail: [
{ required: true, message: '请输入详细地址', trigger: 'blur' }
],
registNum: [
{ required: true, message: '请输入营业执照注册号', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择地区', trigger: 'blur' }
],
cardType: [
{ required: true, message: '请选择证件类型', trigger: 'blur' }
],
qcloudImageUrl: [
{ required: true, message: '请上传营业执照', trigger: 'blur' }
],
idPhoto: [
{ required: true, message: '请上传照片', trigger: 'blur' }
],
authPhoto: [
{ required: true, message: '请上传授权书', trigger: 'blur' }
],
},
// 省市县
areaOptions: {
provinceName: '',
provinceId: '',
cityName: '',
cityId: '',
countryName: '',
countyId: ''
},
upUrl: '',// 上传地址
baseUrl: '',
}
},
computed: {
},
beforeMount() {
var that = this
var host = window.location.origin;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
that.baseUrl = host
}
that.upUrl = that.baseUrl + '/api-plug/upload-img?wxFlag=1'
},
methods: {
/**
* 省市县选择
*/
selected(val) {
console.log(val)
var that = this
if (!!val.country) {
that.ruleForm.region = val;
console.log(val.areaId)
that.ruleForm.areaId = val.areaId
}else {
that.ruleForm.region = ''
}
},
/**
* 保存
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate((valid) => {
console.log(valid, that.ruleForm)
if (valid) {
} else {
return false;
}
});
},500),
/**
* 保存---api
*/
postSave() {
const that = this;
},
/**
* 审核提交
*/
submitReview: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate((valid) => {
console.log(valid)
if (valid) {
} else {
return false;
}
});
},500),
/**
* 审核---api
*/
postReview() {
const that = this;
}
},
mounted() {
},
components: {
navCrumb,
limitInput,
singleUpload
}
}
</script>
<style lang="less" scoped>
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
min-height: 500px;
.m-t-24 {
margin-top: 24px;
}
.w-500 {
width: 500px;
}
.status-item {
.el-tag {
line-height: 34px;
}
i {
font-size: 16px;
margin-right: 10px;
}
}
.avatar-uploader {
/deep/ .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 180px;
height: 180px;
line-height: 180px;
text-align: center;
}
.avatar {
width: 180px;
height: 180px;
display: block;
}
.upload-tip {
color: #606266;
font-size: 12px;
line-height: 22px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment