| <template> | 
|   <GlobalAlertWindow | 
|     :title="title" | 
|     :visible.sync="visible" | 
|     :confirm-working="isWorking" | 
|     @confirm="confirm" | 
|   > | 
|     <div class="tips-style">调整有效期后,客户的有效期会发生改变,请谨慎操作</div> | 
|     <el-form :model="form" ref="form" label-width="100px" label-suffix=":" :rules="rules" inline> | 
|       <div class="short-line"> | 
|         <el-form-item label="客户简称" prop="remark"> | 
|           <el-input v-model="form.remark" disabled v-trim/> | 
|         </el-form-item> | 
|       </div> | 
|       <div class="item-line"> | 
|         <el-form-item label="客户类型"  prop="oepnType"> | 
|           <el-radio-group v-model="form.oepnType" @change="typeChange"> | 
|             <el-radio :label="1">正式账号</el-radio> | 
|             <el-radio :label="0">试用账号</el-radio> | 
|           </el-radio-group> | 
|         </el-form-item> | 
|       </div> | 
|       <div class="item-line"> | 
|         <el-form-item label="有效期" prop="oepnValidDate"> | 
|           <el-date-picker | 
|             v-model="form.oepnValidDate" | 
|             type="date" | 
|             format="yyyy-MM-dd" | 
|             value-format="yyyy-MM-dd hh:mm:ss" | 
|             placeholder="选择日期"> | 
|           </el-date-picker> | 
|           有效期包含选择日期 | 
|         </el-form-item> | 
|       </div> | 
|     </el-form> | 
|     <!-- <div slot="footer"></div> --> | 
|   </GlobalAlertWindow> | 
| </template> | 
|   | 
| <script> | 
| import BaseOpera from '@/components/base/BaseOpera' | 
| import GlobalAlertWindow from '@/components/common/GlobalAlertWindow' | 
| import UploadImage from '../common/UploadImage.vue' | 
| import { updateValidDate as update } from '@/api/business/clientManger' | 
| // import { create } from '@/api/business/companyChange' | 
| export default { | 
|   name: 'OperaClientValidDateWindow', | 
|   extends: BaseOpera, | 
|   components: { GlobalAlertWindow, UploadImage }, | 
|   data () { | 
|      | 
|     return { | 
|       isUploading: false, | 
|       // 表单数据 | 
|       form: { | 
|         id: null, | 
|         | 
|         oepnType: '1', | 
|         remark: '', | 
|         oepnValidDate: '' | 
|       }, | 
|       types:[], | 
|       // 验证规则 | 
|       rules: { | 
|          | 
|       } | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       api: '/business/clientManger', | 
|       'field.id': 'id' | 
|     }) | 
|   }, | 
|   methods: { | 
|     open (title, target) { | 
|       this.title = title | 
|       this.visible = true | 
|       // 编辑 | 
|       this.$nextTick(() => { | 
|         this.$refs.form.clearValidate() | 
|         this.$refs.form.resetFields() | 
|         for (const key in this.form) { | 
|           this.form[key] = target[key] | 
|         } | 
|       }) | 
|     }, | 
|     typeChange() { | 
|       let tempDate = new Date(); | 
|       tempDate.setDate(tempDate.getDate() + (this.form.oepnType ? 30 : 15)) | 
|       this.form.oepnValidDate = `${tempDate.getFullYear()}-${tempDate.getMonth()+1}-${tempDate.getDate()} 00:00:00` | 
|     }, | 
|     confirm() { | 
|       this.$refs.form.validate((valid) => { | 
|         if (!valid) { | 
|           return | 
|         } | 
|         this.isWorking = true | 
|         update({ | 
|           ...this.form, | 
|           companyId: this.form.id, | 
|           validDate: this.form.oepnValidDate | 
|         }) | 
|           .then(() => { | 
|             this.visible = false | 
|             this.$refs.form.resetFields() | 
|             this.$message.success('修改有效期成功') | 
|             this.$emit('success') | 
|           }) | 
|           .catch(e => { | 
|             this.$message.error(e) | 
|           }) | 
|           .finally(() => { | 
|             this.isWorking = false | 
|           }) | 
|       }) | 
|     } | 
|   }, | 
| } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| .tips-style { | 
|   background-color: #f7f7f7; | 
|   height: 30px; | 
|   line-height: 30px; | 
|   a { | 
|     text-decoration:none | 
|   } | 
|   padding-left: 10px; | 
|   margin-bottom: 20px; | 
| } | 
| .item-line { | 
|   ::v-deep .el-form-item__content { | 
|     width: 480px; | 
|   } | 
| } | 
| .short-line { | 
|   ::v-deep .el-form-item__content { | 
|     width: 286px; | 
|   } | 
| } | 
| .pic-line { | 
|   ::v-deep .el-form-item__content { | 
|     width: 500px; | 
|   } | 
| } | 
| .address { | 
|   display: flex; | 
|   .line { | 
|     width: 10px; | 
|   } | 
| } | 
| .sub-title { | 
|   font-size: 20px; | 
|   font-weight: 600; | 
|   margin-top: 10px; | 
|   margin-bottom: 10px; | 
| } | 
|   | 
| </style> |