<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="short-line"> 
 | 
        <el-form-item label="开通用户数" prop="openUserNum"> 
 | 
         <el-input v-model="form.openUserNum" placeholder="请输入开通用户数" v-trim/> 
 | 
         <span style="display:inline;font-size:10px;color:red">注:为0不限制人数</span> 
 | 
        </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: '', 
 | 
        openUserNum:0 
 | 
      }, 
 | 
      types:[], 
 | 
      // 验证规则 
 | 
      rules: { 
 | 
           openUserNum: [ 
 | 
                  { pattern: /^[0-9]+$/, message: '只可以输入数字', trigger: 'change' } 
 | 
                ] 
 | 
      } 
 | 
    } 
 | 
  }, 
 | 
  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, 
 | 
          userNum:this.form.openUserNum 
 | 
        }) 
 | 
          .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> 
 |