订单续费+客户查看方式

src/views/customer/AddCustomer.vue

@@ -240,18 +240,29 @@
                         <el-button type="primary" @click="IPSure()">确 定</el-button>
                     </span>
                 </el-dialog>
+
+                <el-dialog :visible.sync="showImg" width="70%" center>
+                    <img :src="fileSrc" width="100%" alt="">
+                </el-dialog>
+                <pdf :visible.sync="pdfVisible" :src.sync="fileSrc"></pdf>
             </el-col>
         </el-row>
     </div>
 </template>
 
 <script>
+import pdf from '../../components/pdf.vue'
 export default {
+    components:{pdf},
     data() {
         return {
             customerId : this.$route.query.id,
             isDetail : Boolean(this.$route.query.show),
             customerData: [],
+            showFile:false,
+            pdfVisible:false,
+            showImg:false,
+            fileSrc:'',
             form: {
                 customerName: '',
                 countries: '中国',
@@ -528,7 +539,19 @@ export default {
             this.ipVisible = false
         },
         showContract(row){
-            window.open(`https://view.officeapps.live.com/op/view.aspx?src=${row.contractFile}`)
+            if(!row.contractFile) return this.$message.warning('文件链接无效')
+            let type = file.name.split('.').pop()
+            let img = ['jpg','gif','png','jepg']
+
+            this.fileSrc = row.contractFile
+            if(img.includes(type)){
+                this.showImg = true
+            }else if('pdf'.includes(type)){
+                this.pdfVisible = true
+            }else{
+                window.open(`https://view.officeapps.live.com/op/view.aspx?src=${this.fileSrc}`)
+            }
+
         },
         goback(){
             this.$router.go(-1)

src/views/customer/customer.vue

@@ -54,7 +54,7 @@
                             <el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button>
                         </div>
                     </div>
-                    <el-table :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="customerId">
+                    <el-table v-loading="loading" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="customerId">
                         <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
                         <el-table-column type="index" width="100" label="序号" align="center">
                             <template slot-scope="scope">
@@ -103,6 +103,7 @@ export default {
     name: 'customer',
     data() {
         return {
+            loading:false,
             searchTimer: null,
             countryList: [{
                 name:'中国'
@@ -138,6 +139,7 @@ export default {
     },
     methods: {
         getData() {
+            this.loading = true
             this.$post(this.api.queryCustomer,{
                 countries: this.form.countries,
                 provinceId: this.form.provinces,
@@ -148,7 +150,10 @@ export default {
             }).then(res => {
                 this.listData = res.message.list
                 this.total = res.message.totalCount
-            }).catch(res => {})
+                this.loading = false
+            }).catch(res => {
+                this.loading = false
+            })
         },
         initData(){
             this.page = 1

src/views/order/AddOrder.vue

@@ -54,13 +54,13 @@
 
                                     <el-col :span="6" :offset="2">
                                         <el-form-item prop="customerName" label="订单客户">
-                                            <div v-if="!disabled&&!editDisabled" @click="gotoClient" style="cursor: pointer">
+                                            <div v-if="!disabled&&!editDisabled&&!renewDisabled" @click="gotoClient" style="cursor: pointer">
                                                 <el-input v-model="form.customerName" placeholder="请选择客户"></el-input>
                                             </div>
-                                            <el-input v-if="disabled||editDisabled" disabled v-model="form.customerName" placeholder="请选择客户"></el-input>
+                                            <el-input v-if="disabled||editDisabled||renewDisabled" disabled v-model="form.customerName" placeholder="请选择客户"></el-input>
                                         </el-form-item>
                                         <el-form-item prop="orderType" label="订单类型">
-                                            <el-select :disabled="disabled||editDisabled"  v-model="form.orderType" clearable placeholder="请选择订单类型">
+                                            <el-select :disabled="disabled||editDisabled||renewDisabled"  v-model="form.orderType" clearable placeholder="请选择订单类型">
                                                 <el-option v-for="(item,index) in orderTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
                                             </el-select>
                                         </el-form-item>
@@ -175,7 +175,7 @@
                                     <p class="addhr_tag"></p>
                                     <span>数据平台权限</span>
                                 </div>
-                                <el-button v-if="!disabled&&!editDisabled" type="primary" size="small" round class="mag" @click="addDataJurisdiction()">添加</el-button>
+                                <el-button v-if="!disabled&&!editDisabled&&!renewDisabled" type="primary" size="small" round class="mag" @click="addDataJurisdiction()">添加</el-button>
                             </div>
 
                             <el-table :data="dataPlatform" class="orderTable" stripe header-align="center"  :summary-method="getSummaries">
@@ -294,7 +294,6 @@
                                 <p class="addhr_tag"></p>
                                 <span>合同信息</span>
                             </div>
-
                             <div>
                                 <el-form :disabled="disabled" ref="contract" :model="contract" :rules="rules" label-width="80px"  >
                                     <el-col :span="8" :offset="4">
@@ -336,6 +335,7 @@
                                                 :on-remove="handleRemove"
                                                 :on-error="uploadError"
                                                 :on-success="uploadSuccess"
+                                                :before-upload="beforeAvatarUpload"
                                                 :before-remove="beforeRemove"
                                                 :limit="1"
                                                 :on-exceed="handleExceed"
@@ -494,8 +494,9 @@ export default {
     data() {
         return {
             loading:false,// 页面加载
-            disabled:false,// 全局禁用，用于查看。
-            editDisabled:false,// 编辑禁用，区分查看的功能
+            disabled:false,// 查看禁用。
+            editDisabled:false,// 编辑禁用
+            renewDisabled:false,// 续费禁用
 
             showSelectClient:false,// 切换展示选择客户页
             form: {// 基本信息
@@ -658,6 +659,11 @@ export default {
             this.editDisabled = true
             await this.getDetail(this.$route.query.edit)
         }
+        /* 处于续费状态 */
+        if(this.$route.query.renew){
+            this.renewDisabled = true
+            await this.getDetail(this.$route.query.renew)
+        }
         this.getCityData()// 取得城市
     },
    
@@ -673,8 +679,15 @@ export default {
                         e.isEnable?e.isEnable=false:e.isEnable=true
                     })
                 let dataArr = list.filter(e=>{// 数据平台
+                        if(this.renewDisabled){/* 处于续费 */
+                            e.startTime = e.endTime.split(" ")[0]
+                            e.endTime = ""
+                            e.periodOfUse = ''
+                            e.residueRecord = e.remainingPeriod 
+                        }else{
                             e.startTime = e.startTime.split(" ")[0]
                             e.endTime = e.endTime.split(" ")[0]
+                        }
                         return e.authority===0
                     }),
                     classArr = list.filter(e=>{// 课程权限
@@ -701,7 +714,7 @@ export default {
                     startTime:contract.startTime?contract.startTime:'',
                     endTime:contract.endTime?contract.endTime:'',
                     contractId:contract.contractId,
-                    uploadList:{name:contract.contractFile?contract.contractFile.split().pop():'',url:contract.contractFile}
+                    uploadList:{name:contract.contractFile?contract.contractFile.split('/').pop():'',url:contract.contractFile}
                 }
                 if(contract.startTime&&contract.endTime){
                     this.contractTime = [contract.startTime,contract.endTime]
@@ -736,13 +749,19 @@ export default {
                 e.ship?e.ship=1:e.ship=0
                 e.isEnable?e.isEnable=0:e.isEnable=1
             })
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    if(this.renewDisabled){/* 续费状态下 */
+                        this.dataPlatform.map(e=>{
+                            delete e.residueRecord
+                        })
+                        this.form.orderNature = 2
+                    }
                     let param = {
                         contractInformation:this.contract,//合同信息
                         order:this.form,// 订单基本数据
                         orderOther:[...this.dataPlatform,...this.jurisdictionData]//订单其他数据
                     }
-            this.$refs['form'].validate((valid) => {
-                if (valid) {
                     this.loading = true
                     this.$post(this.api.orderAdd,param).then(res=>{
                         this.$router.push('/order')
@@ -942,6 +961,10 @@ export default {
         },
         // 权限switch切换--计算天数
         formSwitch (e,row) {
+
+            if("遇见西瓜") return '买一个包子'
+            else return '买一斤包子'
+            
             if(this.editDisabled){
 
                 return
@@ -949,13 +972,9 @@ export default {
             // this.deadLine(row.periodOfUse,row)
         },
         // 
+
         // 使用期限转换以及计算剩余天数
         deadLine(e,row){
-            if(e==='') {
-                row.startTime = ''
-                row.endTime = ''
-                return
-            }
             function completeDate(value) {
                 if(value==0) return '12'
                 return value < 10 ? "0"+value:value;
@@ -965,31 +984,64 @@ export default {
             let day = nowDate.getDate();
             let month = nowDate.getMonth() + 1;
             let year = nowDate.getFullYear();
+            console.log(nowDate,'nowdata');
+
+            if(this.renewDisabled){/* 处于续费状态 */
+                if(!e) return row.endTime = ''
+                let arr =  row.startTime.split('-')
+                let renewY = arr.shift()/* 年 */
+                let renewM = arr.shift()/* 月 */
+                let renewD = arr.shift()/* 日 */
+                console.log(renewY,renewM,day,'拆分时间');
+                let endYear = +renewY + (parseInt((+renewM+(+e))/12)===0?0:parseInt((+renewM+(+e))/12))+ char + completeDate((+renewM+(+e))%12) + char + completeDate(renewD);
+                row.endTime = endYear
+                
+                // 计算剩余天数
+                let date1 = Date.parse(endYear);
+                let date2 = Date.parse(row.startTime);
+                let ms = Math.abs(date1 - date2)
+                row.remainingPeriod = Math.floor(ms / (24 * 3600 * 1000)) + row.residueRecord;
+
+
+                
+            }else{
+                if(e==='') {
+                    row.startTime = ''
+                    row.endTime = ''
+                    return
+                }
                 //补全0，并拼接当前的时间点
                 let nowYear = year + char + completeDate(month) + char +completeDate(day);
                 // 判断结束日期
                 let endYear = year + (parseInt((+month+(+e))/12)===0?0:parseInt((+month+(+e))/12)) + char + completeDate((+month+(+e))%12) + char +completeDate(day);
-
                 // 得出起始年月日
                 row.startTime = nowYear
                 row.endTime = endYear
-
                 // 计算剩余天数
                 let date1 = Date.parse(endYear);
-
                 let date2 = Date.parse(nowYear);
                 let ms = Math.abs(date1 - date2)
                 let days = Math.floor(ms / (24 * 3600 * 1000));
                 row.remainingPeriod = days
+            }
+            
+            
+            
+
         },
         
         // 删除数据平台产品
         delDataForm(index){
+
             this.$confirm('确定要删除吗？', '提示', {
                 type: 'warning'
             })
             .then(() => {
+                if(this.renewDisabled&&this.dataPlatform.length===1){
+                    return this.$message.warning('续费至少保留一条产品信息！')
+                }else{
                     this.dataPlatform.splice(index,1)
+                }
             })
 
         },
@@ -1158,8 +1210,23 @@ export default {
                 `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` 
             );
         },
+        // 上传前
+        beforeAvatarUpload(file) {
+            const size = file.size / 1024 / 1024 < 10;
+            let type = file.name.split('.').pop()
+            let str = ["jpg","jepg","gif","png","doc","pdf"].includes(type.toLowerCase())
+            console.log(type,str,'类型判断');
+            if(!str){
+                this.$message.error('只能上传图片，word文件和pdf文件！')
+            }else if (!size) {
+                this.$message.error('上传头像图片大小不能超过 10MB!');
+            }
+            return str&&size
+
+        },
         // 上传成功
         uploadSuccess(response, file, fileList) {
+            console.log(file,'上传构子',response,);
             this.contract.contractFile = response.filesResult.fileUrl
         },
         // 上传报错
@@ -1170,9 +1237,17 @@ export default {
                 center: true
             });
         },
-        // 删除上传合同前的确认
+        // 删除上传文件前的确认
         beforeRemove(file, fileList) {
+            console.log(file,'删除钩子');
+            let type = file.name.split('.').pop()
+            let str = ["jpg","jepg","gif","png","doc","pdf"].includes(type.toLowerCase())
+            const size = file.size / 1024 / 1024 < 10;
+            if(!size||!str){
+                return true
+            }else{
                 return this.$confirm(`确定移除 ${file.name}？`);
+            }
         },
         // 删除文件钩子
         handleRemove(file, fileList) {

src/views/order/Order.vue

@@ -83,10 +83,10 @@
                         </el-table-column>
                         <el-table-column label="操作" align="center">
                             <template slot-scope="scope">
-                                <el-button type="text" v-if="scope.row.isDel!==1" @click="handle('edit',scope.row)">{{scope.oderStatus==='已完成'?'修改':'处理'}}</el-button>
+                                <el-button type="text" v-if="scope.row.isDel!==1" @click="handle('edit',scope.row)">{{scope.row.orderStatus==='已完成'?'修改':'处理'}}</el-button>
                                 <el-button type="text" @click="handle('watch',scope.row)">查看</el-button>
                                 <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
-                                <el-button type="text" v-if="scope.oderStatus==='已完成'&&scope.row.isDel!==1" @click="handleRenew(scope.row)">续费</el-button>
+                                <el-button type="text" v-if="scope.row.orderStatus==='已完成'&&scope.row.isDel!==1" @click="handle('renew',scope.row)">续费</el-button>
                             </template>
                         </el-table-column>
                     </el-table>