文件 & 图片 上传 及少许正则校验

<template><div style="padding: 20px"><Row><Col span="24"><div><CFlex type="flex" justify="space-between" align="midlle"><div class="page_title">供应商详情</div><CButton type="primary" @click.native="editshow"><Icon type="ios-create-outline" />编辑供应商</CButton></CFlex><!-- 详情内容 --><div class="box_big"><!-- 基本信息 --><div style="background: #fafafa; padding: 10px"><p class="fize">基本信息</p><div class="project_info_content_data"><FlexLinePI title="供应商名称：">{{ projectData.supplierName }}</FlexLinePI><FlexLinePI title="服务分类：">{{ projectData.serviceClassify }}</FlexLinePI><FlexLinePI title="服务范围：">{{ projectData.serviceScope }}</FlexLinePI><FlexLinePI title="联系人：">{{ projectData.linkMan }}</FlexLinePI><FlexLinePI title="联系电话：">{{ projectData.phoneNo }}</FlexLinePI><FlexLinePI title="邮箱：">{{ projectData.email }}</FlexLinePI><FlexLinePI title="省市：">{{ city }}</FlexLinePI><FlexLinePI title="详细地址：">{{ projectData.address }}</FlexLinePI><FlexLinePI title="员工人数：">{{ projectData.employeeNum }}</FlexLinePI><FlexLinePI title="注册资本(万)：">{{ projectData.registeredAssets }}</FlexLinePI><FlexLinePI title="成立年限：">{{ projectData.establishYear }}</FlexLinePI><FlexLinePI title=""> </FlexLinePI></div></div><!-- 附件展示： --><div style="background: #fafafa; padding: 10px; margin-top: 20px"><p class="fize"> 附件展示：</p><ul style="padding: 10px"><liv-for="(item, index) in SupplierFileDataList"class="licolor" style="background: #fafafa;"><spanstyle="cursor: pointer"@click="openfile(item.filePath)"><span><img src="../../assets/附件.svg" alt="" style="vertical-align: middle;"/></span>&emsp;{{ item.originalFileName }}</span></li></ul></div><!-- 图片展示 --><div style="background: #fafafa; padding: 10px; margin-top: 20px"><!-- 营业执照 --><div class="box_small"><div class="box_img_top" style="float: left">营业执照证明：</div><divclass="box_img_bottom"v-for="(urls, index) in Businesslicense":key="index"style="float: left"><img:src="urls.filePath"alt=""@click="opentupian(urls.filePath)"/></div></div><!-- 纳税人 --><div class="box_small"><div class="box_img_top">纳税人类型证明：</div><divclass="box_img_bottom"v-for="(urls, index) in Taxpayercertificate":key="index"><img:src="urls.filePath"alt=""@click="opentupian(urls.filePath)"/></div></div><!-- 其它 --><div class="box_small"><div class="box_img_top">其它：</div><divclass="box_img_bottom"v-for="(urls, index) in otherpicture":key="index"><img:src="urls.filePath"alt=""@click="opentupian(urls.filePath)"/></div></div></div><!-- 供应商评级 --><divstyle="background: #fafafa;padding: 10px;margin-top: 20px;border-radius: 0.8rem;"><p class="fize">供应商评级<span class="details" @click="opengragrade">去评级</span></p><div class="project_info_content_data"><FlexLinePI title="得分："><span style="color: #156cee">{{ gradelist.supplierScore }}</span></FlexLinePI></div><div class="project_info_content_data"><FlexLinePI title="风险级别："><span style="color: #156cee">{{ gradelist.supplierRate }}</span></FlexLinePI></div><div class="project_info_content_data"><FlexLinePI title="评级时间："><span style="color: #156cee">{{ gradelist.updateTime }}</span></FlexLinePI></div><div class="project_info_content_data"><p class="paddingleft"><span>注：A级：90-100分</span><span>B级：70-89分</span><span>C级：60-69分</span><span>不合格：60分以下</span></p></div></div><!-- 项目服务评分 --><divstyle="background: #fafafa; padding: 10px; margin-top: 20px"v-if="isshow"><p class="fize">项目服务评分</p><div class="project_info_content_data" style="margin-top: 20px"><Table class="table" :columns="columns1" :data="tableList"><template slot-scope="{ row, index }" slot="servicescore"><Rate v-model="row.rateLevel" /></template></Table></div><div class="project_info_content_data"><p class="paddingleft"><span>注：5星：95分以上（包含95分）</span><span>4星：90-94分（包含90分）</span><span>3星：85-89分（包含85分）</span><span>2星：80-84分（包含80分）</span><span>1星：75-79分（包含75分）</span></p></div></div></div></div></Col></Row><!-- 编辑弹框 --><CModal :show.sync="createProjectShow"><div slot="top" class="project_create_title">编辑供应商信息</div><divclass="project_create_content":style="'height:' + contentHeight + 'px'"><div style="height: 20px; width: 100px"></div><Form:model="formData":label-width="150"label-position="right"inlineref="formValidate":rules="formValidate"><FormItem label="供应商名称：" prop="supplierName" required><Inputclass="form_item"v-model="formData.supplierName"placeholder="请输入供应商名称"maxlength="50"/></FormItem><FormItem label="服务分类：" prop="servicetype" required><Selectclass="search_item"placeholder="请选择服务分类"v-model="formData.servicetype"clearablefilterablestyle="width: 200px"><Option v-for="item in Classfiylist" :value="item" :key="item">{{item}}</Option></Select></FormItem><FormItem label="省市：" prop="provincescities" required><Cascaderclass="form_item":data="addressData"v-model="formData.provincescities"filterableplaceholder="请选择省市"transfer></Cascader></FormItem><FormItem label="详细地址：" prop="address" required><Inputclass="form_item"v-model="formData.address"placeholder="请输入详细地址"maxlength="30"/></FormItem><FormItem label="联系人：" prop="contactsone" required><Inputclass="form_item"v-model="formData.contactsone"placeholder="请输入联系人"@on-keyup="formData.contactsone = formData.contactsone.replace(/[^\u4e00-\u9fa5]/g,'')"maxlength="5"type="text"/></FormItem><FormItem label="联系电话：" prop="contactstwo" required><Inputclass="form_item"v-model="formData.contactstwo"placeholder="请输入联系电话"maxlength="20"/></FormItem><FormItem label="邮箱："><Inputclass="form_item"v-model="formData.mailbox"placeholder="请输入邮箱"/></FormItem><FormItem label="员工人数："><Inputclass="form_item"v-model="formData.employeesnum"placeholder="请输入员工人数"@on-keyup="formData.employeesnum = formData.employeesnum.replace(/^(0+)|[^\d]+/g,'')"maxlength="20"type="number"/></FormItem><FormItem label="成立年限："><Inputclass="form_item"v-model="formData.establishyear"placeholder="请输入成立年限"maxlength="15"/></FormItem><FormItem label="注册资本(万)："><Inputclass="form_item"v-model="formData.registeredcapital"placeholder="请输入注册资本(万)"maxlength="20"/></FormItem><FormItem label="服务范围："><Inputclass="form_item"v-model="formData.services"placeholder="请输入服务范围"maxlength="150"show-word-limitstyle="width: 560px"/></FormItem></Form><!-- 文件上传 --><div style="margin-left: 4vw; padding: 0 40px 5px 0px"><span style="float: left;line-height:35px;font-size: 16px;">上传附件：</span><span><Uploadtype="select":on-success="openlist":show-upload-list="false":action="'/isip/admin/api/v1/upload/file?supplierId=' +this.projectId +'&fieldName=' +this.enclosure"><Button icon="ios-cloud-upload-outline">上传附件</Button></Upload></span></div><div style="margin-left: 4vw; padding: 0 40px 5px 0px"><ul><li v-for="(item, index) in SupplierFileDataList" class="licolor" style="height: 40px;"><div style="padding-top: 10px;"><span><img src="../../assets/附件.svg" alt="" style="vertical-align: middle;padding-left:10px"/></span>&emsp;<span >{{ item.originalFileName }}</span></div><div @click="deleteImg(item.fileId)" class="icon">X</div></li></ul></div><div class="box_img"><div class="box_img_top">营业执照：</div><div class="box_img_bottom"><divv-for="(urls, index) in Businesslicense":key="index"class="boximg"><div class="boximg_delete" @click="deleteImg(urls.fileId)"></div><img :src="urls.filePath" width="200px" height="170px" /></div><divclass="input"@click="imgClick()"v-if="Businesslicense.length > 0 ? false : true"><span class="span">点击上传</span></div><inputstyle="float: left; display: none"type="file"id="uploadFile"accept="image/*"@change="readLocalFile(projectId, 'Businesslicense')"/></div></div><div class="box_img"><div class="box_img_top">纳税人类型证明：</div><div class="box_img_bottom"><divv-for="(urls, index) in Taxpayercertificate":key="index"class="boximg"><div class="boximg_delete" @click="deleteImg(urls.fileId)"></div><img :src="urls.filePath" width="200px" height="170px" /></div><divclass="input"@click="imgClickone()"v-if="Taxpayercertificate.length > 0 ? false : true"><span class="span">点击上传</span></div><inputstyle="float: left; display: none"type="file"id="uploadFileone"accept="image/*"@change="readLocalFile(projectId, 'Taxpayercertificate')"/></div></div><div class="box_img_otherpicture"><div class="box_img_top">其它：</div><div class="box_img_bottom" style="float: left"><divv-for="(urls, index) in otherpicture":key="index"style=""class="box_img_bottom_b"><div class="boximg_delete" @click="deleteImg(urls.fileId)"></div><img :src="urls.filePath" width="200px" height="170px" /></div><divstyle="width: 200px;height: 170px;border: 1px dashed #ccc;float: left;position: relative;cursor: pointer;"@click="imgClicktwo()"><spanstyle="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">点击上传</span></div><inputstyle="float: left; display: none"type="file"id="uploadFiletwo"accept="image/*"@change="readLocalFile(projectId, 'otherpicture')"/></div></div></div><CButtonslot="bottom"longtype="primary"@click.native="submit('formValidate')">保存</CButton></CModal><!-- 图片展示 --><CModal :show.sync="imgshow"><div class="imgopenshow"><img :src="imgshowopen" alt="" /></div></CModal></div>
</template><script>
import Supplier from "@/api/isip/Suppliermanagement";
import ChinaAddressV4Data from "@/datas/china_address_other";
import ProjectCreate from "../../views/basicdata//components/project-create"; //创建
const FlexLinePI = {props: ["title"],template: `<div class="flex_line_pi"><div class="flex_line_pi_l">{{title}}</div><div class="flex_line_pi_r"><slot></slot></div></div>`,
};
export default {name: "projectSupplierdetails",props: {},components: {FlexLinePI,ProjectCreate,},data() {return {// 附件名称enclosure: "enclosure",SupplierFileDataList: [], // 附件列表//city: "",isshow: false,// 项目idprojectId:this.$route.query.projectId || sessionStorage.getItem("supplierid"),addressData: ChinaAddressV4Data, //省市地址Classfiylist: ["信息技术","广告媒体","印刷包装","酒店餐饮","网络通信","商务咨询","人力资源","律师事务","物流运输","其它",],// value:3, //供应商评星page: 1,pageSize: 3,count: 0, //总条数projectData: {}, //基本信息gradelist: {},tableList: [],columns1: [{title: "序号",type: "index",width: 65,align: "center",},{title: "服务项目时间",key: "createTime",align: "center",},{title: "项目名称",key: "projectName",align: "center",},{title: "服务项目评分",key: "projectScore",align: "center",},{title: "供应商服务星级",key: "rateLevel",slot: "servicescore",align: "center",},{title: "服务评分时间",key: "updateTime",align: "center",},{title: "操作",key: "address",align: "center",render: (h, params) => {return this.btnTranslate(h, params);},},],// 编辑createProjectShow: false,formData: {supplierName: "",servicetype: "",provincescities: [],address: "",contactsone: "",contactstwo: "",mailbox: "",employeesnum: "",establishyear: "",registeredcapital: "",services: "",},formValidate: {supplierName: [{validator: (rule, value, callback) => {if (!value) {callback(new Error("请输入项目名称"));} else {callback();}},},],servicetype: [{validator: (rule, value, callback) => {if (!value || value.length == 0) {callback(new Error("请选择服务类型"));} else {callback();}},trigger: "change",},],provincescities: [{validator: (rule, value, callback) => {if (!value || value.length == 0) {callback(new Error("请选择省市"));} else {callback();}},trigger: "change",},],address: [{validator: (rule, value, callback) => {if (!value) {callback(new Error("请输入详细地址"));} else {callback();}},},],contactsone: [{validator: (rule, value, callback) => {if (!value) {callback(new Error("请输入联系人"));} else {callback();}},},],contactstwo: [{validator: (rule, value, callback) => {if (!value) {callback(new Error("请输入联系电话"));} else {callback();}},},],},// 图片Businesslicense: [],Taxpayercertificate: [],otherpicture: [],// 图片查看imgshow: false,imgshowopen: "",};},mounted() {this.queryProjectList();},methods: {// 首次获取页面详情数据queryProjectList() {new Promise((resolve, reject) => {Supplier.supplierselectone(this.projectId).then((response) => {if (response.result[0].SupplierProjectConfigResp != null) {this.tableList = response.result[0].SupplierProjectConfigResp;}if (response.result[0].FastSupplierInfo != null) {this.projectData = response.result[0].FastSupplierInfo;let city1 = response.result[0].FastSupplierInfo.provinceCode;let city2 = response.result[0].FastSupplierInfo.cityCode;this.formData.supplierName =response.result[0].FastSupplierInfo.supplierName;this.formData.servicetype =response.result[0].FastSupplierInfo.serviceClassify;this.formData.provincescities.push(response.result[0].FastSupplierInfo.provinceCode);this.formData.provincescities.push(response.result[0].FastSupplierInfo.cityCode);this.formData.address =response.result[0].FastSupplierInfo.address;this.formData.contactsone =response.result[0].FastSupplierInfo.linkMan;this.formData.contactstwo =response.result[0].FastSupplierInfo.phoneNo;this.formData.mailbox = response.result[0].FastSupplierInfo.email;this.formData.employeesnum =response.result[0].FastSupplierInfo.employeeNum;this.formData.establishyear =response.result[0].FastSupplierInfo.establishYear;this.formData.registeredcapital =response.result[0].FastSupplierInfo.registeredAssets;this.formData.services =response.result[0].FastSupplierInfo.serviceScope;// 翻译省市let provinceName;let cityName;for (const address of this.addressData) {if (address.value == city1) {provinceName = address.label;for (const cityItem of address.children) {if (cityItem.value == city2) {cityName = cityItem.label;}}}}this.city = provinceName + "-" + cityName;}if (response.result[0].FastSupplierRateInfo != null) {this.gradelist = response.result[0].FastSupplierRateInfo;}if (response.result[0].SupplierInfo.fastSupplierFileDataList != null) {let arr =response.result[0].SupplierInfo.fastSupplierFileDataList;(this.Businesslicense = []),(this.Taxpayercertificate = []),(this.otherpicture = []),(this.SupplierFileDataList = []),arr.forEach((item) => {if (item.fieldName == "Businesslicense") {this.Businesslicense.push(item); //获取图片base64代码}if (item.fieldName == "Taxpayercertificate") {this.Taxpayercertificate.push(item); //获取图片base64代码}if (item.fieldName == "otherpicture") {this.otherpicture.push(item); //获取图片base64代码}if (item.fieldName == "enclosure") {this.SupplierFileDataList.push(item); //获取图片base64代码}});}}).catch((error) => {reject(error);});});},// 编辑供应商editshow() {this.createProjectShow = true;},// 等级评级opengragrade() {this.$router.push({path: "/supplierrating",query: {projectId: this.projectId,},});},// 编辑信息submit(name) {this.$refs[name].validate((valid) => {if (valid) {let data = {id: this.projectId,supplierName: this.formData.supplierName, //项目名称serviceClassify: this.formData.servicetype, //服务分类provinceCode: this.formData.provincescities[0], //省份cityCode: this.formData.provincescities[1], // 市区address: this.formData.address, //详细地址linkMan: this.formData.contactsone, //联系人phoneNo: this.formData.contactstwo, //联系人email: this.formData.mailbox, //邮箱employeeNum: this.formData.employeesnum, //员工人数establishYear: this.formData.establishyear, // 成立年限registeredAssets: this.formData.registeredcapital, // 注册资本serviceScope: this.formData.services, //服务范围status: "N",isDelete: "N",};setTimeout(() => {this.$Spin.hide();}, 2000);new Promise((resolve, reject) => {Supplier.supplierupdatelist(data).then((response) => {this.$Message.success("供应商信息编辑成功！");this.createProjectShow = false;this.queryProjectList();}).catch((error) => {reject(error);});});} else {this.$Message.error("请输入相关信息！");}});},// 图片添加//删除图片deleteImg(id) {new Promise((resolve, reject) => {Supplier.supplierpicdelete(id).then((response) => {this.queryProjectList();// this.createProjectShow = falsethis.$Message.success("删除成功！");}).catch((error) => {reject(error);});});},//图片clickimgClick() {document.getElementById("uploadFile").click();},imgClickone() {document.getElementById("uploadFileone").click();},imgClicktwo() {document.getElementById("uploadFiletwo").click();},//点击选中图片readLocalFile(supplierId, fieldName) {var param = new FormData();let files = event.target.files[0];param.append("uploadFile", files, files.name);try {new Promise((resolve, reject) => {Supplier.queryProjectIcon(param, supplierId, fieldName).then((response) => {if (response.result.fieldName == "Businesslicense") {this.Businesslicense.push(response.result); //获取图片base64代码}if (response.result.fieldName == "Taxpayercertificate") {this.Taxpayercertificate.push(response.result); //获取图片base64代码}if (response.result.fieldName == "otherpicture") {this.otherpicture.push(response.result); //获取图片base64代码}}).catch((error) => {reject(error);});// 文本删除document.getElementById("uploadFile").value = null;document.getElementById("uploadFileone").value = null;document.getElementById("uploadFiletwo").value = null;});event.target.value = " ";} catch (error) {}},opentupian(url) {this.imgshow = true;this.imgshowopen = url;},// 服务评分btnTranslate(h, params) {let btnArr;if (params.row.projectScore == "") {btnArr = [h("span",{style: {paddingLeft: "7px",color: "#156CEE",cursor: "pointer",},on: {click: () => {this.$router.push({path: "/projectseriverating",query: {projectId: params.row.projectId,Id: params.row.id,},});},},},"去评分"),];} else {btnArr = [h("span",{style: {paddingLeft: "7px",color: "#156CEE",cursor: "pointer",},on: {click: () => {this.$router.push({path: "/projectseriverating",query: {projectId: params.row.projectId,Id: params.row.id,},});},},},"详情"),];}return h("div", btnArr);},// 上传附件openfile(url) {window.location.href = url;},// 附件上传成功触发openlist() {this.queryProjectList();},},
};
</script><style scoped lang='less'>
@import "./components/projectcreate";
.box_big {width: 100%;height: 78vh;background: #ffffff;border-radius: 16px;margin-top: 15px;padding: 15px;border: 1px solid rgba(245, 245, 245, 0.8);box-shadow: 1px 1px 5px 0px #cccc;overflow-y: scroll;
}
.page_title {font-size: 32px;color: #333333;font-weight: 500;
}
.fize {font-size: 18px;font-weight: bold;margin-top: 20px;margin-left: 10px;
}
.project_info_content_data {display: flex;flex-wrap: wrap;justify-content: space-between;> div {min-width: 300px;width: 33%;}
}
.flex_line_pi {font-size: 16px;display: flex;// align-items: center;padding: 7px 0;width: 33%;/deep/ .flex_line_pi_l {color: #666666;white-space: nowrap;width: 120px;padding-left: 10px;// line-height: 35px;}.flex_line_pi_r {color: #333333;width: 66%;}
}
.details {float: right;cursor: pointer;padding: 8px 20px;background: #156cee;border-radius: 8px;color: #ffffff;font-size: 15px;margin-right: 20px;
}
.paddingleft {// margin-top:20px;margin: 20px 0 0 13px;display: flex;align-items: center;span {color: #999999;padding-right: 60px;}
}
.table {border-radius: 8px;box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);width: 98% !important;margin: 0 auto;
}
.ivu-table-cell {padding-left: 0px !important;
}
.table /deep/ .ivu-table {width: 100% !important;
}/deep/ .ivu-card-body {padding: 0px;.div_img {width: 200px;height: 200px;img {width: 100%;border-radius: 15px;}}
}
</style>
<style lang="less" scoped>
.data_list {display: flex;flex-wrap: wrap;overflow: hidden;height: 80%;position: relative;padding-right: 14px;
}
.data_item {display: flex;align-items: center;padding: 10px;.data_item_name {border: 1px solid #ccc;border-radius: 10px;width: 240px;height: 170px;overflow: hidden;img {width: 100%;height: 100%;}}
}
.boximg {float: left;position: relative;.boximg_delete {width: 24px;height: 24px;position: absolute;background: url("../../assets/删除.svg");right: -11px;top: -10px;cursor: pointer;line-height: 20px;border-radius: 20px;}
}
.input {width: 200px;height: 170px;border: 1px dashed #ccc;float: left;margin-right: 10px;position: absolute;left: 0;cursor: pointer;.span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
}
</style>
<style lang="less" scoped>
.box_small {width: 100%;overflow: hidden;margin-top: 10px;.box_img_top {float: left;width: 120px;text-align: right;}.box_img_bottom {float: left;width: 240px;height: 170px;cursor: pointer;margin-right: 10px;img {width: 100%;height: 100%;}}
}
.imgopenshow {img {width: 100%;height: 100%;}
}
li {list-style: none;
}
.licolor {width: 100%;margin: 10px 0px;background: #f5f5f5;display: flex;justify-content: space-between;.deletex {color: red;padding: 0px 10px;cursor: pointer;}
}
.icon {margin-top: 8px;margin-right: 10px;width: 25px;height: 25px;background: rgb(167, 166, 166);border-radius: 20px;text-align: center;line-height: 25px;color: #ffffff;font-size: 18px;cursor: pointer;
}
</style>