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

快来打我* 2022-10-09 15:29 126阅读 0赞

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

<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">
                    <li v-for="(item, index) in SupplierFileDataList" class="licolor" style="background: #fafafa;" >
                      <span style="cursor: pointer" @click="openfile(item.filePath)" ><span><img src="../../assets/附件.svg" alt="" style="vertical-align: middle;"/></span > {
       { 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>
                    <div class="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>
                    <div class="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>
                    <div class="box_img_bottom" v-for="(urls, index) in otherpicture" :key="index" >
                      <img :src="urls.filePath" alt="" @click="opentupian(urls.filePath)" />
                    </div>
                  </div>
                </div>
                
                <div style=" 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>
                
                <div style="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>
          <div class="project_create_content" :style="'height:' + contentHeight + 'px'" >
            <div style="height: 20px; width: 100px"></div>
            <Form :model="formData" :label-width="150" label-position="right" inline ref="formValidate" :rules="formValidate" >
              <FormItem label="供应商名称：" prop="supplierName" required>
                <Input class="form_item" v-model="formData.supplierName" placeholder="请输入供应商名称" maxlength="50" />
              </FormItem>
              <FormItem label="服务分类：" prop="servicetype" required>
                <Select class="search_item" placeholder="请选择服务分类" v-model="formData.servicetype" clearable filterable style="width: 200px" >
                  <Option v-for="item in Classfiylist" :value="item" :key="item">{
       {
                    item
                  }}</Option>
                </Select>
              </FormItem>
              <FormItem label="省市：" prop="provincescities" required>
                <Cascader class="form_item" :data="addressData" v-model="formData.provincescities" filterable placeholder="请选择省市" transfer ></Cascader>
              </FormItem>
              <FormItem label="详细地址：" prop="address" required>
                <Input class="form_item" v-model="formData.address" placeholder="请输入详细地址" maxlength="30" />
              </FormItem>
              <FormItem label="联系人：" prop="contactsone" required>
                <Input class="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>
                <Input class="form_item" v-model="formData.contactstwo" placeholder="请输入联系电话" maxlength="20" />
              </FormItem>
              <FormItem label="邮箱：">
                <Input class="form_item" v-model="formData.mailbox" placeholder="请输入邮箱" />
              </FormItem>
              <FormItem label="员工人数：">
                <Input class="form_item" v-model="formData.employeesnum" placeholder="请输入员工人数" @on-keyup=" formData.employeesnum = formData.employeesnum.replace( /^(0+)|[^\d]+/g, '' ) " maxlength="20" type="number" />
              </FormItem>
              <FormItem label="成立年限：">
                <Input class="form_item" v-model="formData.establishyear" placeholder="请输入成立年限" maxlength="15" />
              </FormItem>
              <FormItem label="注册资本(万)：">
                <Input class="form_item" v-model="formData.registeredcapital" placeholder="请输入注册资本(万)" maxlength="20" />
              </FormItem>
              <FormItem label="服务范围：">
                <Input class="form_item" v-model="formData.services" placeholder="请输入服务范围" maxlength="150" show-word-limit style="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 ><Upload type="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 > <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">
                <div v-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>
                <div class="input" @click="imgClick()" v-if="Businesslicense.length > 0 ? false : true" >
                  <span class="span">点击上传</span>
                </div>
                <input style="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">
                <div v-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>
                <div class="input" @click="imgClickone()" v-if="Taxpayercertificate.length > 0 ? false : true" >
                  <span class="span">点击上传</span>
                </div>
                <input style="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">
                <div v-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>
                <div style=" width: 200px; height: 170px; border: 1px dashed #ccc; float: left; position: relative; cursor: pointer; " @click="imgClicktwo()" >
                  <span style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); " >点击上传</span >
                </div>
                <input style="float: left; display: none" type="file" id="uploadFiletwo" accept="image/*" @change="readLocalFile(projectId, 'otherpicture')" />
              </div>
            </div>
          </div>
          <CButton slot="bottom" long type="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, // 项目id projectId: 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 = false this.$Message.success("删除成功！"); }) .catch((error) => { reject(error); }); }); }, //图片click imgClick() { 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>