platform-customsdeclaration-ssr/pages/severPage/customer/_id.vue

<template>
  <div>
    <div class="headline">
      <span v-if="IslookOrUpdate === 'update'">客户资料编辑</span>
      <span v-else-if="IslookOrUpdate === 'add'">客户资料新增</span>
      <span v-else>客户资料查看</span>
    </div>
    <div class="infoView">
      <ul>
        <li class="clearfix">
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">客户名称</div>
            <el-input placeholder="请输入客户名称" v-model="chooseItem.companyName" clearable class="w22 pull-left" v-if="IslookOrUpdate === 'add'">
            </el-input>
            <div class="w22 pull-left text" v-if="IslookOrUpdate === 'look' || IslookOrUpdate === 'update'">{{chooseItem.companyName}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">发票地址</div>
            <el-input placeholder="请输入发票地址" v-model="chooseItem.address" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.address}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">发票电话</div>
            <el-input placeholder="请输入发票电话" v-model="chooseItem.telephone" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.telephone}}</div>
          </div>
        </li>

        <li class="clearfix">
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">汇率</div>
            <el-select placeholder="请选择汇率" v-model="chooseItem.exchangeRateMethod" class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
              <el-option label="当天汇率" value="当天汇率"></el-option>
              <el-option label="海关汇率" value="海关汇率"></el-option>
            </el-select>
            <div class="w22 pull-left text" v-else>{{chooseItem.exchangeRateMethod}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">代理费率</div>
            <el-input placeholder="请输入代理费率" v-model="chooseItem.agencyRate" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.agencyRate}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">最低代理费率</div>
            <el-input placeholder="请输入最低代理费率" v-model="chooseItem.minAgencyRate" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'" maxlength="12">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.minAgencyRate}}</div>
          </div>
        </li>

        <li class="clearfix">
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">计费方式</div>
            <el-select placeholder="请选择计费方式" v-model="chooseItem.billMethod" class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
              <el-option label="货" value="货"></el-option>
              <el-option label="货+税" value="货+税"></el-option>
            </el-select>
            <div class="w22 pull-left text" v-else>{{chooseItem.billMethod}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">成交方式</div>
            <el-select placeholder="请选择成交方式" v-model="chooseItem.transactionMode" class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
              <el-option label="FOB" value="FOB"></el-option>
              <el-option label="CIF" value="CIF"></el-option>
            </el-select>
            <div class="w22 pull-left text" v-else>{{chooseItem.transactionMode}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">发票类型</div>
            <el-select placeholder="请选择发票类型" v-model="chooseItem.billType" class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
              <el-option label="海关增值税发票" value="海关增值税发票"></el-option>
              <el-option label="增值税专票" value="增值税专票"></el-option>
            </el-select>
            <div class="w22 pull-left text" v-else>{{chooseItem.billType}}</div>
          </div>
        </li>

        <li class="clearfix">
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">客服</div>
            <el-input placeholder="请输入客服" v-model="chooseItem.customService" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.customService}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">税号</div>
            <el-input placeholder="请输入税号" v-model="chooseItem.taxNum" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.taxNum}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">银行账号</div>
            <el-input placeholder="请输入银行账号" v-model="chooseItem.bankAccount" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.bankAccount}}</div>
          </div>
        </li>

        <li class="clearfix">
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">海关编码</div>
            <el-input placeholder="请输入海关编码" v-model="chooseItem.customscode" clearable class="w22 pull-left"  v-if="IslookOrUpdate !== 'look'" maxlength="18">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.customscode}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">统一社会信用编码</div>
            <el-input placeholder="请输入统一社会信用编码" v-model="chooseItem.unifiedSocialCreditCode" clearable class="w22 pull-left"  v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.unifiedSocialCreditCode}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">组织机构代码</div>
            <el-input placeholder="请输入组织机构代码" v-model="chooseItem.organizationCode" clearable class="w22 pull-left"  v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.organizationCode}}</div>
          </div>
        </li>

        <li class="clearfix">
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">账期代码</div>
            <el-input placeholder="请输入账期代码" v-model="chooseItem.accountPeriodCode" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.accountPeriodCode}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">账期名称</div>
            <el-input placeholder="请输入账期名称" v-model="chooseItem.accountPeriodName" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.accountPeriodName}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">入仓号</div>
            <el-input placeholder="请输入入仓号" v-model="chooseItem.warehousingNo" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'" maxlength="18">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.warehousingNo}}</div>
          </div>
        </li>

        <li class="clearfix">
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">结账日</div>
            <el-input placeholder="请输入结账日" v-model="chooseItem.accountDay" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'" type="number">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.accountDay}}</div>
            <!--<el-date-picker-->
              <!--v-model="chooseItem.accountDay"-->
              <!--type="date"-->
              <!--placeholder="选择日期"-->
              <!--class="w22 pull-left"-->
            <!--&gt;-->
            <!--</el-date-picker>-->
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">付款日</div>
            <el-input placeholder="请输入付款日" v-model="chooseItem.payDay" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'" type="number">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.payDay}}</div>
            <!--<el-date-picker-->
              <!--v-model="chooseItem.payDay"-->
              <!--type="date"-->
              <!--placeholder="选择日期"-->
              <!--class="w22 pull-left"-->
            <!--&gt;-->
            <!--</el-date-picker>-->
          </div>
        </li>

        <li class="clearfix">
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">信用天数</div>
            <el-input placeholder="请输入结账日" v-model="chooseItem.creditDay" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'" type="number">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.creditDay}}</div>
          </div>
          <div class="pull-left w33 clearfix">
            <div class="name pull-left">固定日</div>
            <el-input placeholder="请输入付款日" v-model="chooseItem.fixedDay" clearable class="w22 pull-left" v-if="IslookOrUpdate !== 'look'" type="number">
            </el-input>
            <div class="w22 pull-left text" v-else>{{chooseItem.fixedDay}}</div>
          </div>
        </li>
      </ul>
      <div class="control-btn">
        <template v-if="IslookOrUpdate !== 'look'">
          <div class="save" @click="closeAlert('save')">保存</div>
          <div class="cancel" @click="closeAlert()">取消</div>
        </template>
        <template v-else>
          <div class="save" @click="changeUpdate()">编辑</div>
        </template>
      </div>
    </div>
    <div v-if="getInfo && false"></div>
  </div>
</template>

<script>
  import { clone, Vuehttp } from '@/utils/tools'
  export default {
    data() {
      return {
        IslookOrUpdate: 'update',
        chooseItem: {}
      }
    },
    fetch({store, route}) {
      if (route.params.id === -1) {
      } else {
        return Promise.all([
          store.dispatch('getOnceCusinfo',{id: route.params.id})
        ])
      }
    },
    computed: {
      getInfo() {
        if (this.$store.state.customer.details.data.content) {
          this.chooseItem = clone(this.$store.state.customer.details.data.content)
          this.IslookOrUpdate = this.$route.query.type
        } else {
          this.chooseItem = {}
          this.IslookOrUpdate = 'add'
        }
        return ''
      }
    },
    methods: {
      changeUpdate() {
        this.IslookOrUpdate = 'update'
      },
      closeAlert(_tp) {
        if (_tp === undefined) {
          this.$router.go(-1)
          return false
        }
        else if (!this.chooseItem.companyName) {
          this.$message({
            type: 'error',
            message: '请填写客户名字'
          })
          return;
        }
        else if (!this.chooseItem.address) {
          this.$message({
            type: 'error',
            message: '请输入发票地址'
          })
          return;
        }
        else if (!this.chooseItem.telephone) {
          this.$message({
            type: 'error',
            message: '请输入发票电话'
          })
          return;
        }
        else if (!this.chooseItem.exchangeRateMethod) {
          this.$message({
            type: 'error',
            message: '请选择汇率'
          })
          return;
        }
        else if (!this.chooseItem.agencyRate) {
          // 这里要做 数字正则
          this.$message({
            type: 'error',
            message: '请输入代理费率'
          })
          return;
        }
        else if (!/^[0-9]+$/.test(this.chooseItem.agencyRate)) {
          this.$message({
            type: 'error',
            message: '代理费率只能为数字'
          })
          return;
        }
        else if (!this.chooseItem.minAgencyRate) {
          // 这里要做 数字正则
          this.$message({
            type: 'error',
            message: '请输入最低代理费率'
          })
          return;
        }
        else if (!/^[0-9]+$/.test(this.chooseItem.minAgencyRate)) {
          this.$message({
            type: 'error',
            message: '最低代理费率只能为数字'
          })
          return;
        }
        else if (!this.chooseItem.billMethod) {
          this.$message({
            type: 'error',
            message: '请选择计费方式'
          })
          return;
        }
        else if (!this.chooseItem.transactionMode) {
          this.$message({
            type: 'error',
            message: '请选择成交方式'
          })
          return;
        }
        else if (!this.chooseItem.billType) {
          this.$message({
            type: 'error',
            message: '请选择发票类型'
          })
          return;
        }
        else if (!this.chooseItem.customService) {
          this.$message({
            type: 'error',
            message: '请输入客服'
          })
          return;
        }
        else if (!this.chooseItem.taxNum) {
          this.$message({
            type: 'error',
            message: '请输入税号'
          })
          return;
        }
        else if (!this.chooseItem.bankAccount) {
          this.$message({
            type: 'error',
            message: '请输入银行账号'
          })
          return;
        }
        else if (!this.chooseItem.customscode) {
          this.$message({
            type: 'error',
            message: '请输入海关编码'
          })
          return;
        }
        else if (!this.chooseItem.unifiedSocialCreditCode) {
          this.$message({
            type: 'error',
            message: '请输入统一社会信用代码'
          })
          return;
        }
        else if (!this.chooseItem.organizationCode) {
          this.$message({
            type: 'error',
            message: '请输入组织机构代码'
          })
          return;
        }
        else if (!this.chooseItem.accountPeriodCode) {
          this.$message({
            type: 'error',
            message: '请输入账期代码'
          })
          return;
        }
        else if (!this.chooseItem.accountPeriodName) {
          this.$message({
            type: 'error',
            message: '请输入账期名称'
          })
          return;
        }
        else if (!this.chooseItem.warehousingNo) {
          // 这里要做 数字正则
          this.$message({
            type: 'error',
            message: '请输入入仓号'
          })
          return;
        }
        else if (!/^[0-9]+$/.test(this.chooseItem.warehousingNo)) {
          this.$message({
            type: 'error',
            message: '入仓号只能为数字'
          })
          return
        }
        else if (!this.chooseItem.accountDay) {
          this.$message({
            type: 'error',
            message: '结账日输入有误'
          })
          return;
        }
        else if (!/^[0-9]+$/.test(this.chooseItem.accountDay)) {
          this.$message({
            type: 'error',
            message: '结账日只能为数字'
          })
          return
        }
        else if (this.chooseItem.accountDay > 31) {
          this.$message({
            type: 'error',
            message: '结账日不能大于31'
          })
          return
        }
        else if (!this.chooseItem.payDay) {
          // 这里要做 数字正则
          this.$message({
            type: 'error',
            message: '付款日输入有误'
          })
          return;
        }
        else if (!/^[0-9]+$/.test(this.chooseItem.payDay)) {
          this.$message({
            type: 'error',
            message: '付款日只能为数字'
          })
          return
        }
        else if (this.chooseItem.payDay > 31) {
          this.$message({
            type: 'error',
            message: '付款日不能大于31'
          })
          return
        }
        else if (!this.chooseItem.creditDay) {
          // 这里要做 数字正则
          this.$message({
            type: 'error',
            message: '信用天数输入有误'
          })
          return;
        }
        else if (!/^[0-9]+$/.test(this.chooseItem.creditDay)) {
          this.$message({
            type: 'error',
            message: '信用天数只能为数字'
          })
          return
        }
        else if (this.chooseItem.creditDay > 60) {
          this.$message({
            type: 'error',
            message: '信用天数不能大于60'
          })
          return
        }
        else if (!this.chooseItem.fixedDay) {
          // 这里要做 数字正则
          this.$message({
            type: 'error',
            message: '固定日输入有误'
          })
          return;
        }
        else if (!/^[0-9]+$/.test(this.chooseItem.fixedDay)) {
          this.$message({
            type: 'error',
            message: '固定日只能为数字'
          })
          return
        }
        else if (this.chooseItem.fixedDay > 31) {
          this.$message({
            type: 'error',
            message: '固定日不能大于31'
          })
          return
        }
        let params = {
          customer: this.chooseItem
        }
        Vuehttp(params, '/customer/persist').then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.message)
          } else {
            this.chooseItem = res.data.content
            this.IslookOrUpdate = 'look'
            this.$message({
              type: 'success',
              message: '保存成功',
            })
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .infoView {
    margin: 0 10px;
    ul {
      border-bottom: 1px solid #6093f6;
      padding-bottom: 20px;
      margin-bottom: 40px;
      li {
        margin-bottom: 20px;
      }
      .name {
        font-size: 14px;
        color: #333;
        line-height: 40px;
        width: 120px;
      }
      .text {
        font-size: 14px;
        color: #333;
        line-height: 40px;
      }
      .w33 {
        width: 33.3%;
        word-wrap: break-word;
      }
      .w66 {
        width: 66.6%;
        word-wrap: break-word;
      }
      .w22 {
        width: 220px;
        word-wrap: break-word;
      }
      .w88 {
        width: 500px;
        word-wrap: break-word;
      }
    }
    .control-btn {
      text-align: center;
      padding-bottom: 80px;
      div {
        width: 70px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        border-radius: 3px;
        cursor: pointer;
        display: inline-block;
        margin-right: 12px;
        margin-top: 12px;
        &:nth-last-of-type(1) {
          margin-right: 0px;
        }
      }
      .save {
        background: #f97f25;
        border: 1px solid #f97f25;
        color: #fff;
        &:hover {
          background: #fd964a;
        }
      }
      .cancel {
        background: #fff;
        color: #f97f25;
        border: 1px solid #f97f25;
        &:hover {
          background: #fd964a;
          color: #fff;
        }
      }
    }
  }

</style>