contract.vue

<template>
  <div>
    <!-- 合同基本信息开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px" @click="contract_show =!contract_show">检索结果</span>
        <el-button style="float: right; padding: 8px 0" type="text" @click="form_submit('form')">提交</el-button>
      </div>

      <transition name="el-fade-in-linear">
        <el-form id="form" :inline="true" :model="form" class="demo-form-inline" label-width="100px" :rules="add_rules" v-show="contract_show">
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同编号">
                <el-select class="width-220" v-model="form.contract_unid" filterable remote reserve-keyword placeholder="合同编号" :remote-method="contractIdRemoteMethod">
                  <el-option v-for="(item,index) in contract_unid_selected_data" :key="index" :label="item.name" :value="item.country_unid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售员">
                <el-select class="width-220" v-model="form.salesperson_unid" filterable remote placeholder="销售人员" :remote-method="salespersonIdRemoteMethod">
                  <el-option v-for="(item,index) in salesperson_unid_selected_data" :key="index" :label="item.name" :value="item.code_unid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目名称">
                <el-select class="width-220" v-model="form.project_unid" filterable remote placeholder="项目名称" :remote-method="projectIdRemoteMethod">
                  <el-option v-for="(item,index) in project_unid_selected_data" :key="index" :label="item.name" :value="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户名称">
                <el-select class="width-220" v-model="form.customer_unid" filterable remote placeholder="客户名称" :remote-method="customerIdRemoteMethod">
                  <el-option v-for="(item,index) in customer_unid_selected_data" :key="index" :label="item.name" :value="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目所在地">
                <el-select style="width:100px" v-model="form.province" placeholder="省" @change="get_cities()">
                  <el-option v-for="(item,index) in provinces" :key="index" :label="item.name" :value="item.province_unid">
                  </el-option>
                </el-select>
                <el-select style="width:100px" v-model="form.city" placeholder="市" @change="get_counties()">
                  <el-option v-for="(item,index) in cities" :key="index" :label="item.name" :value="item.city_unid">
                  </el-option>
                </el-select>
                <el-select style="width:100px" v-model="form.county" placeholder="区县">
                  <el-option v-for="(item,index) in counties" :key="index" :label="item.name" :value="item.county_unid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="质保周期(月)">
                <el-input-number class="width-220" v-model="form.guarantee_period" :step="6" :min="6" :max="60" size="medium"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="签订日期">
                <el-date-picker class="width-220" v-model="form.sign_date" type="date" placeholder="日期" value-format="yyyy-MM-dd" @change="signDataChanged">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属年份">
                <el-input class="width-220" v-model="form.year" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属月份">
                <el-input class="width-220" v-model="form.month" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="产品线类型">
                <el-select class="width-220" v-model="form.product_line_type" placeholder="产品线类型">
                  <el-option v-for="(value,index) in product_line_type_data" :key="index" :label="value" :value="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同状态">
                <el-select class="width-220" v-model="form.contract_state" placeholder="合同状态">
                  <el-option v-for="(value,index) in contract_state_data" :key="index" :label="value" :value="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同性质">
                <el-select class="width-220" v-model="form.contract_type" placeholder="合同性质">
                  <el-option v-for="(value,index) in contract_type_data" :key="index" :label="value" :value="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同金额" prop="contract_amount">
                <el-input class="width-220" v-model="form.contract_amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抵扣金额" prop="deduct_amount">
                <el-input class="width-220" v-model="form.deduct_amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input class="width-220" v-model="form.contract_amount_note"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="累计回款额">
                <el-input class="width-220" v-model="total_reback_amount" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="暂停金额" prop="stop_amount">
                <el-input class="width-220" v-model="form.stop_amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input class="width-220" v-model="form.reback_note"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同余额">
                <el-input class="width-220" v-model="contract_remaining" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="豁免金额" prop="exemptions_amount">
                <el-input class="width-220" v-model="form.exemptions_amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input class="width-220" v-model="form.contract_remain_note"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同是否归档">
                <el-select class="width-220" v-model="form.is_archive" placeholder="请选择">
                  <el-option label="是" value=true></el-option>
                  <el-option label="否" value=false></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="坏账金额" prop="bad_amount">
                <el-input class="width-220" v-model="form.bad_amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input class="width-220" v-model="form.bad_amount_note"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="累计应收款">
                <el-input class="width-220" v-model="total_receive_amount" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="应收账款余额">
                <el-input class="width-220" v-model="total_leave_amount" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="逾期天数">
                <el-input class="width-220" v-model="over_days_unid" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="确认收入金额" prop="confirm_income_amount">
                <el-input class="width-220" v-model="form.confirm_income_amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账款状态">
                <el-select class="width-220" v-model="form.amount_state_unid" placeholder="账款状态">
                  <el-option v-for="(value,index) in amount_state_unid_data" :key="index" :label="value" :value="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9">
              <el-form-item label="维保服务期">
                <el-date-picker v-model="guarantee_date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :unlink-panels="true">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="质保期">
                <el-select v-model="form.mainten_start_point" placeholder="开始节点">
                  <el-option v-for="(value,index) in mainten_start_point_data" :key="index" :label="value" :value="index">
                  </el-option>
                </el-select>
                <el-date-picker v-model="this.mainten_start_date" type="date" placeholder="开始日期" value-format="yyyy-MM-dd" :readonly="true">
                </el-date-picker>
                <el-date-picker v-model="this.mainten_end_date" type="date" placeholder="结束日期" value-format="yyyy-MM-dd" :readonly="true">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input v-model="form.contract_note" type="textarea" :rows="8" style="width:500px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-upload class="upload-demo" drag :action="upload_url" multiple :file-list="contract_appendix_list" :before-upload="test">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或点击上传</div>
              </el-upload>
            </el-col>
          </el-row>
        </el-form>
      </transition>
    </el-card>

    <!-- 基本信息结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- 付款约定开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px" @click="payments_show = !payments_show">付款约定</span>
        <el-button style="float: right; padding: 8px 0" type="text" @click="form_submit('payment')">提交</el-button>
      </div>

      <transition name="el-fade-in-linear">
        <div id="payments_data_table" v-show="payments_show">
          <el-table :data="payments_data" style="width: 100%">
            <el-table-column prop="payment_progress" label="付款进度" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="payment_type" label="付款类型" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="days" label="天数" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="payment_propority" label="付款比例(%)" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="pay_date" label="本期应付款日期" min-width="200" align="center">
            </el-table-column>
            <el-table-column prop="amount" label="本期应付款金额" min-width="200" align="center">
            </el-table-column>
            <el-table-column prop="payment_requirement" label="本期付款条件" min-width="300" align="center">
            </el-table-column>
            <el-table-column label="操作" min-width="200" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button @click.native.prevent="payment_data_modify(scope.$index, payments_data)" type="primary" round>
                  修改
                </el-button>
                <el-button @click.native.prevent="data_delete(scope.$index, payments_data)" type="danger" round>
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-button class="add_button" type="text" @click="payments_dialog_show = true">添加付款约定</el-button>
          </el-row>
        </div>
      </transition>
    </el-card>

    <!-- 付款约定弹出框 -->

    <el-dialog id="payments_dialog" title="付款约定" :visible.sync="payments_dialog_show" width="30%">
      <el-form :model="payments_form" label-width="150px" label-position="left" :rules="add_rules" ref="payments_form">
        <el-form-item label="付款类型" prop="payment_type">
          <el-select v-model="payments_form.payment_type" placeholder="付款类型" style="width:100%">
            <el-option label="预付款" value="1">
            </el-option>
            <el-option label="到货款" value="2">
            </el-option>
            <el-option label="系统验收款" value="3">
            </el-option>
            <el-option label="质保款(发货节点计算)" value="4">
            </el-option>
            </el-option>
            <el-option label="质保款(验收节点计算)" value="5">
            </el-option>
          </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="天数" prop="days">
          <el-input v-model="payments_form.days" placeholder="请输入天数" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="付款比例" prop="payment_propority">
          <el-input-number v-model="payments_form.payment_propority" :step="5" :min="0" :max="100" style="width:100%"></el-input-number>
        </el-form-item>
        <el-form-item label="条件" prop="payment_requirement">
          <el-input v-model="payments_form.payment_requirement" type="textarea" :rows="2" style="width:100%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payments_dialog_cancel()">取 消</el-button>
        <el-button type="primary" @click="payments_dialog_confirm()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 付款约定结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- 合同回款信息开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px" @click="rebacks_show = !rebacks_show">合同回款信息(财务部)</span>
        <el-button style="float: right; padding: 8px 0" type="text" @click="form_submit('reback')">提交</el-button>
      </div>

      <transition name="el-fade-in-linear">
        <div id="rebacks_data_table" v-show="rebacks_show">
          <el-table :data="rebacks_data" style="width:100%">
            <el-table-column prop="reback_progress" label="回款进度" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="actual_reback_amount" label="实际回款金额" min-width="200" align="center">
            </el-table-column>
            <el-table-column prop="reback_propority" label="回款比例(%)" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="reback_date" label="回款日期" min-width="200" align="center">
            </el-table-column>
            <el-table-column prop="reback_note" label="回款备注" min-width="300" align="center">
            </el-table-column>
            <el-table-column label="操作" min-width="200" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button @click.native.prevent="reback_data_modify(scope.$index, rebacks_data)" type="primary" round>
                  修改
                </el-button>
                <el-button @click.native.prevent="data_delete(scope.$index, rebacks_data)" type="danger" round>
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-button class="add_button" type="text" @click="rebacks_dialog_show = true">添加合同回款信息</el-button>
          </el-row>
        </div>
      </transition>
    </el-card>
    <!-- 合同回款信息弹出框 -->

    <el-dialog id="rebacks_dialog" title="回款信息" :visible.sync="rebacks_dialog_show" width="30%">
      <el-form :model="rebacks_form" label-width="150px" label-position="left" :rules="rebacks_form_rules" ref="rebacks_form">
        <el-form-item label="实际回款金额" prop="actual_reback_amount">
          <el-input v-model="rebacks_form.actual_reback_amount" placeholder="请输入金额" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="回款日期" prop="reback_date">
          <el-date-picker style="width:100%" v-model="rebacks_form.reback_date" type="date" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="reback_note">
          <el-input v-model="rebacks_form.reback_note" placeholder="备注" style="width:100%" type="textarea" :rows="2"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rebacks_dialog_cancel()">取 消</el-button>
        <el-button type="primary" @click="rebacks_dialog_confirm()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 合同回款信息结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- 合同开票信息开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px" @click="receipts_show = !receipts_show">合同开票信息(财务部)</span>
        <el-button style="float: right; padding: 8px 0" type="text" @click="form_submit('receipt')">提交</el-button>
      </div>

      <transition name="el-fade-in-linear">
        <div id="receipts_data_table" v-show="receipts_show">
          <el-table :data="receipts_data" style="width: 100%">
            <el-table-column prop="receipt_progress" label="开票进度" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="receipt_amount" label="开票金额" min-width="150" align="center">
            </el-table-column>
            <el-table-column prop="oa_flow_id" label="OA流水号" min-width="150" align="center">
            </el-table-column>
            <el-table-column prop="receipt_propority" label="开票比例(%)" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="total_receipt_amount" label="累计开票金额" min-width="200" align="center">
            </el-table-column>
            <el-table-column prop="is_reback" label="是否回款" min-width="100" align="center">
            </el-table-column>
            <el-table-column prop="receipt_note" label="备注" min-width="300" align="center">
            </el-table-column>
            <el-table-column label="操作" min-width="200" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button @click.native.prevent="receipt_data_modify(scope.$index, receipts_data)" type="primary" round>
                  修改
                </el-button>
                <el-button @click.native.prevent="data_delete(scope.$index, receipts_data)" type="danger" round>
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-button class="add_button" type="text" @click="receipts_dialog_show = true">添加开票信息</el-button>
          </el-row>
        </div>
      </transition>
    </el-card>
    <!-- 开票信息弹出框 -->

    <el-dialog id="receipts_dialog" title="开票合同" :visible.sync="receipts_dialog_show" width="30%">
      <el-form :model="receipts_form" label-width="150px" label-position="left" :rules="receipts_form_rules" ref="receipts_form">
        <el-form-item label="开票金额" prop="receipt_amount">
          <el-input v-model="receipts_form.receipt_amount" placeholder="请输入金额" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="OA流水号" prop="oa_flow_id">
          <el-input v-model="receipts_form.oa_flow_id" placeholder="请输入流水号" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="receipt_note">
          <el-input v-model="receipts_form.receipt_note" placeholder="备注" style="width:100%" type="textarea" :rows="2"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="receipts_dialog_cancel()">取 消</el-button>
        <el-button type="primary" @click="receipts_dialog_confirm()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 合同开票信息结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- 发货信息开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px" @click="delivers_show = !delivers_show">发货信息(生产部)</span>
        <el-button style="float: right; padding: 8px 0" type="text" @click="form_submit('deliver')">提交</el-button>
      </div>

      <transition name="el-fade-in-linear">
        <div id="delivers_data_table" v-show="delivers_show">
          <el-table :data="delivers_data" style="width: 100%">
            <el-table-column prop="deliver_goods_date" label="发货日期" width="300" align="center">
            </el-table-column>
            <el-table-column prop="goods_acceptanc_date" label="到货验收日期" width="300" align="center">
            </el-table-column>
            <el-table-column label="操作" min-width="100" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deliver_data_modify(scope.$index, delivers_data)" type="primary" round>
                  修改
                </el-button>
                <el-button @click.native.prevent="data_delete(scope.$index, delivers_data)" type="danger" round>
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-button class="add_button" type="text" @click="delivers_dialog_show = true">添加发货信息</el-button>
          </el-row>
        </div>
      </transition>
    </el-card>
    <!-- 发货信息信息弹出框 -->

    <el-dialog id="delivers_dialog" title="发货信息" :visible.sync="delivers_dialog_show" width="30%">
      <el-form :model="delivers_form" label-width="150px" label-position="left" :rules="add_rules" ref="delivers_form">
        <el-form-item label="发货日期" prop="deliver_goods_date">
          <el-date-picker style="width:100%" v-model="delivers_form.deliver_goods_date" type="date" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到货验收日期" prop="goods_acceptanc_date">
          <el-date-picker style="width:100%" v-model="delivers_form.goods_acceptanc_date" type="date" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          此处需要上传附件
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delivers_dialog_cancel()">取 消</el-button>
        <el-button type="primary" @click="delivers_dialog_confirm()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发货信息结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- 工程验收信息开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:24px" @click="acceptance_show = !acceptance_show">工程验收信息(工程部)</span>
        <el-button style="float: right; padding: 8px 0" type="text" @click="form_submit('project')">提交</el-button>
      </div>

      <transition name="el-fade-in-linear">
        <div id="acceptance_form" v-show="acceptance_show">
          <el-form :inline="true" :model="first_acceptances_form" class="demo-form-inline" label-width="100px" :rules="acceptance_form_rules" ref="first_acceptances_form">
            <el-row>
              <el-col :span="8">
                <el-tooltip class="item" effect="dark" content="填写初验必须填写终验" placement="top">
                  <el-form-item label="是否初验" prop="acceptance_type">
                    <el-select class="width-220" v-model="first_acceptances_form.acceptance_type">
                      <el-option label="是" value="1">
                      </el-option>
                      <el-option label="否" value="">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-tooltip>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目验收日期" prop="acceptance_date">
                  <el-date-picker class="width-220" v-model="first_acceptances_form.acceptance_date" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="备注">
                  <el-input class="width-220" v-model="first_acceptances_form.acceptance_note" placeholder="备注"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              此处需要上传附件
            </el-row>
          </el-form>
          <el-form :inline="true" :model="final_acceptances_form" class="demo-form-inline" label-width="100px" :rules="acceptance_form_rules2" ref="final_acceptances_form">
            <el-row>
              <el-col :span="8">
                <el-tooltip class="item" effect="dark" content="填写初验必须填写终验" placement="top">
                  <el-form-item label="是否终验" prop="acceptance_type">
                    <el-select class="width-220" v-model="final_acceptances_form.acceptance_type">
                      <el-option label="是" value="2">
                      </el-option>
                      <el-option label="否" value="">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-tooltip>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目验收日期" prop="acceptance_date">
                  <el-date-picker class="width-220" v-model="final_acceptances_form.acceptance_date" type="date" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="备注">
                  <el-input class="width-220" v-model="final_acceptances_form.acceptance_note" placeholder="备注"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              此处需要上传附件
            </el-row>
          </el-form>
        </div>
      </transition>
    </el-card>
    <!-- 工程验收信息结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
  </div>
</template>
<script>
const twodecimalrule = {
  pattern: /((^[1-9]\d*)|^0)(\.\d{2})$/,
  message: "请输入数字并保留两位小数",
  trigger: "blur"
};
export default {
  name: "contract_information",
  data() {
    return {
      contract_appendix_list: [],
      operate_type: [0, 0, 0, 0, 0, 0], //整个页面的操作类型，一共6个表单，0表示新增，1表示修改
      code_base_url: disparch_data.code_base_url,
      contract_base_url: disparch_data.contract_base_url,
      contract_unid_selected_data: [], //合同编号数据数组
      salesperson_unid_selected_data: [], //销售人员数据数组
      project_unid_selected_data: [], //项目名称数据数组
      customer_unid_selected_data: [], //客户名称数据数组
      provinces: [],
      cities: [],
      counties: [],
      modify_data: false, //用来标志dialog用来修改数据
      modify_index: -1, //用来标志修改数据的索引
      product_line_type_data: ["安防", "交通", "客流", "维保"],
      contract_state_data: ["已完成", "代发货", "施工中", "项目暂停"],
      contract_type_data: ["供货", "施工", "集成", "维保"],
      amount_state_unid_data: ["正常验收款", "正常维保"],
      mainten_start_point_data: ["签订时间", "到货验收时间", "项目终验时间"],
      guarantee_date: [], //维保服务期，数组形式的日期，0开始，1结束。
      // show and display~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      payments_dialog_show: false,
      receipts_dialog_show: false,
      rebacks_dialog_show: false,
      delivers_dialog_show: false,
      payments_show: true,
      contract_show: true,
      rebacks_show: true,
      receipts_show: true,
      delivers_show: true,
      acceptance_show: true,
      // show and display~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      form: {
        // 合同编号
        contract_unid: null,
        //销售员
        salesperson_unid: null,
        // 项目名称
        project_unid: null,
        // 客户名称
        customer_unid: null,
        // 项目所在省
        province: "",
        // // 项目所在市
        city: "",
        // // 项目所在区
        county: "",
        // 质保周期
        guarantee_period: 6,
        // 签订时间
        sign_date: "",
        // 所属年份
        year: "",
        // 所属月份
        month: "",
        // 产品线类型
        product_line_type: null,
        // 合同状态
        contract_state: null,
        // 合同类型
        contract_type: null,
        // 合同金额
        contract_amount: 0.0,
        // 抵扣金额
        deduct_amount: 0.0,
        // 合同金额备注
        contract_amount_note: "",
        // 暂停金额
        stop_amount: 0.0,
        // 累计回款额备注
        reback_note: "",
        // 豁免金额
        exemptions_amount: 0.0,
        // 合同余额备注
        contract_remain_note: "",
        // 是否归档
        is_archive: "",
        // 坏账金额
        bad_amount: 0.0,
        // 坏账金额备注
        bad_amount_note: "",
        // 确定收入金额
        confirm_income_amount: "",
        // 账款状态
        amount_state_unid: "",
        // 质保期开始
        mainten_start_point: null,
        // 合同备注
        contract_note: "",
        // 合同附件
        contract_appendix: {},
        start_guarantee_date: "",
        end_guarantee_date: ""
      },

      // 工程验收表单
      // acceptances_form: [
      //   {
      //     acceptance_type: "",
      //     acceptance_date: null,
      //     acceptance_note: null,
      //     appendix_unids: []
      //   },
      //   {
      //     acceptance_type: "",
      //     acceptance_date: null,
      //     acceptance_note: null,
      //     appendix_unids: []
      //   }
      // ],
      first_acceptances_form: {
        acceptance_type: null,
        acceptance_date: null,
        acceptance_note: null,
        appendix_unids: []
      },

      final_acceptances_form: {
        acceptance_type: null,
        acceptance_date: null,
        acceptance_note: null,
        appendix_unids: []
      },
      // 发货信息表单和数据，提交时提交data里的数据
      delivers_data: [],
      delivers_form: {
        deliver_goods_date: "",
        goods_acceptanc_date: "",
        appendix_unids: []
      },
      // 付款约定表单和数据，提交时提交data里的数据
      payments_data: [],
      payments_form: {
        payment_type: "",
        days: "",
        payment_propority: "",
        payment_requirement: ""
      },
      // 回款信息表单和数据，提交时提交data里的数据
      rebacks_data: [],
      rebacks_form: {
        actual_reback_amount: 0,
        reback_date: "",
        reback_note: ""
      },
      // 开票信息表单和数据，提交时提交data里的数据
      receipts_data: [],
      receipts_form: {
        receipt_amount: 0,
        oa_flow_id: "",
        receipt_note: ""
      },

      // 表单验证~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      add_rules: {
        contract_amount: twodecimalrule,
        deduct_amount: twodecimalrule,
        stop_amount: twodecimalrule,
        exemptions_amount: twodecimalrule,
        bad_amount: twodecimalrule,
        confirm_income_amount: twodecimalrule,
        payment_type: {
          required: true,
          message: "类型不能为空",
          trigger: "blur"
        },
        days: {
          required: true,
          pattern: /(^[1-9](\d*)$)|(^0$)/,
          message: "请输入正确天数",
          trigger: "blur"
        },
        deliver_goods_date: {
          validator: (rule, value, callback) => {
            if (value == "") {
              callback(new Error("时间不能为空"));
            } else callback();
          },
          trigger: "blur"
        },
        goods_acceptanc_date: {
          validator: (rule, value, callback) => {
            if (value == "") {
              callback(new Error("时间不能为空"));
            } else if (
              this.delivers_form.deliver_goods_date &&
              value < this.delivers_form.deliver_goods_date
            ) {
              callback(new Error("到货验收时间不能小于发货时间"));
            } else callback();
          },
          trigger: "blur"
        }
      },
      rebacks_form_rules: {
        actual_reback_amount: {
          required: true,
          pattern: /(^[1-9](\d*)$)|(^0$)/,
          message: "请输入正确金额",
          trigger: "blur"
        },
        reback_date: {
          required: true,
          message: "不能为空",
          trigger: "blur"
        }
      },
      receipts_form_rules: {
        receipt_amount: {
          required: true,
          pattern: /(^[1-9](\d*)$)|(^0$)/,
          message: "请输入正确金额",
          trigger: "blur"
        },
        oa_flow_id: {
          required: true,
          message: "请输入流水号",
          trigger: "blur"
        }
      },
      acceptance_form_rules: {
        acceptance_date: {
          validator: (rule, value, callback) => {
            if (
              this.first_acceptances_form.acceptance_type == "1" &&
              value == null
            ) {
              callback(new Error("请填写时间"));
            } else callback();
          },
          trigger: "blur"
        }
      },
      acceptance_form_rules2: {
        acceptance_date: {
          validator: (rule, value, callback) => {
            var a = this.final_acceptances_form.acceptance_type;
            if (a == "2" && value == null) {
              callback(new Error("请填写时间"));
            } else callback();
          },
          trigger: "blur"
        },
        //callback必须返回
        acceptance_type: {
          validator: (rule, value, callback) => {
            if (
              this.first_acceptances_form.acceptance_type == "1" &&
              value != "2"
            ) {
              callback(new Error("初验必须终验"));
            } else {
              callback();
            }
          }
        }
      }
      // 表单验证~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    };
  },
  computed: {
    // 上传附件地址
    upload_url: function() {
      return (
        "/api/v1/financial/contracts/" +
        this.form.contract_unid +
        "/upload/appendixes"
      );
    },
    // 合同余额
    contract_remaining: function() {
      return (
        this.form.contract_amount -
        this.form.deduct_amount -
        this.total_reback_amount -
        this.form.stop_amount -
        this.form.exemptions_amount -
        this.form.bad_amount
      ).toFixed(2);
    },
    // 累计回款额
    total_reback_amount: function() {
      var total = 0;
      for (let i = 0; i < this.rebacks_data.length; i++) {
        const e = this.rebacks_data[i];
        total += parseFloat(e.actual_reback_amount);
      }
      return total.toFixed(2);
    },
    //累计应收款
    total_receive_amount: function() {
      var total = 0;
      var now = new Date();
      var now_date =
        now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      for (let i = 0; i < this.payments_data.length; i++) {
        const e = this.payments_data[i];
        if (e.pay_date < now_date) {
          total += parseFloat(e.amount);
        }
      }
      return total.toFixed(2);
    },
    // 应收账款余额
    total_leave_amount: function() {
      return (
        this.total_receive_amount -
        this.total_reback_amount -
        this.form.deduct_amount -
        this.form.stop_amount -
        this.form.exemptions_amount -
        this.form.bad_amount
      ).toFixed(2);
    },
    // 逾期天数
    over_days_unid: function() {
      var pay_date = "";
      var now = new Date();
      var now_date =
        now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      var amount = 0;
      for (let i = 0; i < this.payments_data.length; i++) {
        const element = this.payments_data[i];
        pay_date = element.pay_date;
        amount += element.amount;
      }
      if (now_date > pay_date && amount > this.total_reback_amount) {
        return this.date_diff(now_date, pay_date);
      } else {
        return 0;
      }
    },
    // 维保服务期开始时间
    start_guarantee_date: function() {
      if (this.guarantee_date[0]) {
        return this.guarantee_date[0];
      }
    },
    // 维保服务期结束时间
    end_guarantee_date: function() {
      if (this.guarantee_date[1]) {
        return this.guarantee_date[1];
      }
    },
    mainten_start_date: function() {
      if (
        this.form.mainten_start_point == 0 &&
        this.form.sign_date &&
        this.form.guarantee_period
      ) {
        return this.form.sign_date;
      } else if (this.form.mainten_start_point == 1 && this.delivers_data[0]) {
        var index = this.delivers_data.length - 1;
        return this.delivers_data[index].goods_acceptanc_date;
      } else if (
        this.form.mainten_start_point == 2 &&
        this.final_acceptances_form.acceptance_type == "2" &&
        this.final_acceptances_form.acceptance_date != ""
      ) {
        return this.final_acceptances_form.acceptance_date;
      }
    },
    mainten_end_date: function() {
      if (
        this.form.mainten_start_point == 0 &&
        this.form.sign_date &&
        this.form.guarantee_period
      ) {
        return this.date_add_month(
          this.form.sign_date,
          this.form.guarantee_period
        );
      } else if (this.form.mainten_start_point == 1 && this.delivers_data[0]) {
        var index = this.delivers_data.length - 1;
        return this.date_add_month(
          this.delivers_data[index].goods_acceptanc_date,
          this.form.guarantee_period
        );
      } else if (
        this.form.mainten_start_point == 2 &&
        this.final_acceptances_form.acceptance_type == "2" &&
        this.final_acceptances_form.acceptance_date != ""
      ) {
        return this.date_add_month(
          this.final_acceptances_form.acceptance_date,
          this.form.guarantee_period
        );
      }
    }
  },
  methods: {
    test(file) {
      this.$Axios({
        method: "post",
        url: this.upload_url,
        data: {
          business_table: "contracts",
          appendix_files: file
        }
      }).then(res => {
        console.log(res.data.appendix_unid);
      });
      return false;
    },

    // dialog_cancel~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    payments_dialog_cancel() {
      this.modify_data = false;
      this.$refs["payments_form"].resetFields();
      this.payments_dialog_show = false;
    },
    rebacks_dialog_cancel() {
      this.modify_data = false;
      this.$refs["rebacks_form"].resetFields();
      this.rebacks_dialog_show = false;
    },
    receipts_dialog_cancel() {
      this.modify_data = false;
      this.$refs["receipts_form"].resetFields();
      this.receipts_dialog_show = false;
    },
    delivers_dialog_cancel() {
      this.modify_data = false;
      this.$refs["delivers_form"].resetFields();
      this.delivers_dialog_show = false;
    },

    // dialog_cancel~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    // date_methods~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    date_diff(date1, date2) {
      var date1s = date1.split("-");
      var date2s = date2.split("-");
      var days = parseInt(
        (new Date(date1s[0], date1s[1] - 1, date1s[2]).getTime() -
          new Date(date2s[0], date2s[1] - 1, date2s[2]).getTime()) /
          1000 /
          60 /
          60 /
          24
      );
      return days;
    },
    date_add_days(datestr, daynum) {
      var date_str = datestr;
      var date = new Date(date_str.replace(/-/g, "/"));
      date = new Date((date / 1000 + 86400 * daynum) * 1000);
      var result_date =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return result_date;
    },
    date_add_month(datestr, month) {
      var dates = datestr.split("-");
      var date = new Date(dates[0], dates[1] - 1 + month, dates[2]);
      return date
        .toLocaleDateString()
        .match(/\d+/g)
        .join("-");
    },
    // date_methods~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    add_axios(m, u, arr) {
      this.$Axios({
        method: m,
        url: u
      }).then(response => {
        arr = response.data.list_data;
      });
    },
    // remoteMethod~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    contractIdRemoteMethod(query) {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "countries"
        // params:{
        //   wd:this.form.contract_unid
        // }
      })
        .then(response => {
          this.contract_unid_selected_data = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    salespersonIdRemoteMethod(query) {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "simple/cates/09BB973F92/codes"
        // params:{
        //   wd:this.form.contract_unid
        // }
      })
        .then(response => {
          this.salesperson_unid_selected_data = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    projectIdRemoteMethod(query) {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "simple/cates/09BB973F92/codes"
      })
        .then(response => {
          this.project_unid_selected_data = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    customerIdRemoteMethod(query) {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "simple/cates/09BB973F92/codes"
      })
        .then(response => {
          this.customer_unid_selected_data = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },

    // remoteMethod~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    signDataChanged() {
      var date = this.form.sign_date;
      this.form.year = date.slice(0, 4);
      this.form.month = date.slice(5, 7);
    },

    // dialog_confirm_start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    payments_dialog_confirm() {
      this.$refs["payments_form"].validate(valid => {
        if (valid) {
          var progress = this.payments_data.length + 1;
          var type_value = this.payments_form.payment_type;
          var days = this.payments_form.days;
          var propority = this.payments_form.payment_propority;
          var requirement = this.payments_form.payment_requirement;
          var amount = 0;
          var date = "";
          if (this.form.contract_amount > 0) {
            amount = this.form.contract_amount * propority / 100;
          }
          if (type_value == "1" && this.form.sign_date) {
            date = this.date_add_days(this.form.sign_date, days);
          } else if (
            (type_value == "2" || type_value == "4") &&
            this.delivers_data[0]
          ) {
            var i = this.delivers_data.length - 1;
            date = this.date_add_days(
              this.delivers_data[i].goods_acceptanc_date,
              days
            );
          } else if (
            (type_value == "3" || type_value == "5") &&
            this.final_acceptances_form.acceptance_date != null
          ) {
            date = this.date_add_days(
              this.final_acceptances_form.acceptance_date,
              days
            );
          }
          var a = {
            payment_progress: progress,
            payment_type: type_value,
            days: days,
            payment_propority: propority,
            payment_requirement: requirement,
            amount: amount,
            pay_date: date
          };
          if (!this.modify_data) {
            this.payments_data.push(a);
          } else {
            this.$set(this.payments_data, this.modify_index, a);
          }

          this.modify_data = false;
          this.$refs["payments_form"].resetFields();
          this.payments_dialog_show = false;
        }
      });
    },
    receipts_dialog_confirm() {
      this.$refs["receipts_form"].validate(valid => {
        if (valid) {
          var receipt_progress = this.receipts_data.length + 1;
          var receipt_amount = parseFloat(this.receipts_form.receipt_amount);
          var oa_flow_id = this.receipts_form.oa_flow_id;
          var receipt_propority = 0;
          if (this.form.contract_amount) {
            receipt_propority = (
              receipt_amount *
              100 /
              this.form.contract_amount
            ).toFixed(2);
          }
          var total_receipt_amount = receipt_amount;
          if (receipt_progress > 1) {
            total_receipt_amount =
              parseFloat(
                this.receipts_data[receipt_progress - 2].total_receipt_amount
              ) + receipt_amount;
          }
          var is_reback = "";
          if (this.total_reback_amount >= total_receipt_amount) {
            is_reback = "是";
          } else is_reback = "否";
          var receipt_note = this.receipts_form.receipt_note;
          var a = {
            receipt_progress: receipt_progress,
            receipt_amount: receipt_amount,
            oa_flow_id: oa_flow_id,
            receipt_propority: receipt_propority,
            total_receipt_amount: total_receipt_amount,
            is_reback: is_reback,
            receipt_note: receipt_note
          };
          if (!this.modify_data) {
            this.receipts_data.push(a);
          } else {
            this.$set(this.receipts_data, this.modify_index, a);
          }

          this.modify_data = false;
          this.$refs["receipts_form"].resetFields();
          this.receipts_dialog_show = false;
        }
      });
    },
    rebacks_dialog_confirm() {
      this.$refs["rebacks_form"].validate(valid => {
        if (valid) {
          var reback_progress = this.rebacks_data.length + 1;
          var actual_reback_amount = this.rebacks_form.actual_reback_amount;
          var reback_propority = 0;
          if (this.form.contract_amount) {
            reback_propority =
              actual_reback_amount / this.form.contract_amount * 100;
          }
          var reback_date = this.rebacks_form.reback_date;
          var reback_note = this.rebacks_form.reback_note;
          var a = {
            reback_progress: reback_progress,
            actual_reback_amount: actual_reback_amount,
            reback_propority: reback_propority,
            reback_date: reback_date,
            reback_note: reback_note
          };

          if (!this.modify_data) {
            this.rebacks_data.push(a);
          } else {
            this.$set(this.rebacks_data, this.modify_index, a);
          }

          this.modify_data = false;

          this.$refs["rebacks_form"].resetFields();
          this.rebacks_dialog_show = false;
        }
      });
    },
    delivers_dialog_confirm() {
      this.$refs["delivers_form"].validate(valid => {
        if (valid) {
          var deliver_goods_date = this.delivers_form.deliver_goods_date;
          var goods_acceptanc_date = this.delivers_form.goods_acceptanc_date;
          var appendix_unids = this.delivers_form.appendix_unids;
          var a = {
            deliver_goods_date: deliver_goods_date,
            goods_acceptanc_date: goods_acceptanc_date,
            appendix_unids: appendix_unids
          };
          if (!this.modify_data) {
            this.delivers_data.push(a);
          } else {
            this.$set(this.delivers_data, this.modify_index, a);
          }
          this.modify_data = false;
          this.$refs["delivers_form"].resetFields();
          this.delivers_dialog_show = false;
        }
      });
    },
    // dialog_confirm_end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    data_delete(index, data) {
      this.$confirm("确认删除数据？", "确认信息", {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      })
        .then(() => {
          data.splice(index, 1);
          this.$message({
            duration: 1000,
            type: "success",
            message: "删除成功"
          });
        })
        .catch(action => {
          this.$message({
            duration: 1000,
            type: "info",
            message: "没有删除数据"
          });
        });
    },

    // modifystart~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    payment_data_modify(index, data) {
      this.payments_form.payment_type = data[index].payment_type;
      this.payments_form.days = data[index].days;
      this.payments_form.payment_propority = data[index].payment_propority;
      this.payments_form.payment_requirement = data[index].payment_requirement;
      this.modify_data = true;
      this.modify_index = index;
      this.payments_dialog_show = true;
    },
    reback_data_modify(index, data) {
      this.rebacks_form.actual_reback_amount = data[index].actual_reback_amount;
      this.rebacks_form.reback_date = data[index].reback_date;
      this.rebacks_form.reback_note = data[index].reback_note;
      this.modify_data = true;
      this.modify_index = index;
      this.rebacks_dialog_show = true;
    },
    receipt_data_modify(index, data) {
      this.receipts_form.receipt_amount = data[index].receipt_amount;
      this.receipts_form.oa_flow_id = data[index].oa_flow_id;
      this.receipts_form.receipt_note = data[index].receipt_note;
      this.modify_data = true;
      this.modify_index = index;
      this.receipts_dialog_show = true;
    },
    deliver_data_modify(index, data) {
      this.delivers_form.deliver_goods_date = data[index].deliver_goods_date;
      this.delivers_form.goods_acceptanc_date =
        data[index].goods_acceptanc_date;
      this.modify_data = true;
      this.modify_index = index;
      this.delivers_dialog_show = true;
    },
    // modifyend~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    // getlocation start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    get_provinces() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "countries/0E229CD043/provinces"
      })
        .then(response => {
          this.provinces = response.data.list_data;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    get_cities() {
      this.form.city = "";
      this.form.county = "";
      if (this.form.province) {
        this.$Axios({
          method: "get",
          url:
            this.code_base_url +
            "countries/0E229CD043/provinces/" +
            this.form.province +
            "/cities"
        })
          .then(response => {
            this.cities = response.data.list_data;
          })
          .catch(err => {
            console.log(err.message);
          });
      }
    },
    get_counties() {
      this.form.county = "";
      if (this.form.province && this.form.city) {
        this.$Axios({
          method: "get",
          url:
            this.code_base_url +
            "countries/0E229CD043/provinces/" +
            this.form.province +
            "/cities/" +
            this.form.city +
            "/counties"
        })
          .then(response => {
            this.counties = response.data.list_data;
          })
          .catch(err => {
            console.log(err.message);
          });
      }
    },
    // getlocation end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    // !!!!!!~~~~~~~~~~~~~submit~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    form_submit(name) {
      switch (name) {
        case "form":
          var method;
          this.form.start_guarantee_date = this.start_guarantee_date;
          this.form.end_guarantee_date = this.end_guarantee_date;
          if (this.operate_type[0] == 0) {
            method = "post";
          } else if (this.operate_type[0] == 1) {
            method = "put";
          }
          this.$Axios({
            method: method,
            url: this.contract_base_url,
            data: this.form
          })
            .then(response => {
              if (response.data.encode == 200) {
                this.$alert("提交成功");
                this.operate_type[0] = 1;
              }
            })
            .catch(err => {
              console.log(err.message);
            });
          break;
        case "payment":
          var method;
          if (this.operate_type[1] == 0) {
            method = "post";
          } else if (this.operate_type[1] == 1) {
            method = "put";
          }
          this.$Axios({
            method: method,
            url: "/api/v1/financial/contracts/contract/payments",
            data: this.payments_data
          })
            .then(response => {
              if (response.data.encode == 200) {
                this.$alert("提交成功");
                this.operate_type[1] = 1;
              }
            })
            .catch(err => {
              console.log(err.message);
            });

          break;
        case "reback":
          var method;
          if (this.operate_type[2] == 0) {
            method = "post";
          } else if (this.operate_type[2] == 1) {
            method = "put";
          }
          this.$Axios({
            method: method,
            url: "/api/v1/financial/contracts/contract/rebacks",
            data: this.rebacks_data
          })
            .then(response => {
              if (response.data.encode == 200) {
                this.$alert("提交成功");
                this.operate_type[2] = 1;
              }
            })
            .catch(err => {
              console.log(err.message);
            });
          break;
        case "receipt":
          var method;
          if (this.operate_type[3] == 0) {
            method = "post";
          } else if (this.operate_type[3] == 1) {
            method = "put";
          }
          this.$Axios({
            method: method,
            url: "/api/v1/financial/contracts/contract/receipts",
            data: this.receipts_data
          })
            .then(response => {
              if (response.data.encode == 200) {
                this.$alert("提交成功");
                this.operate_type[3] = 1;
              }
            })
            .catch(err => {
              console.log(err.message);
            });
          break;
        case "deliver":
          var method;
          if (this.operate_type[4] == 0) {
            method = "post";
          } else if (this.operate_type[4] == 1) {
            method = "put";
          }
          this.$Axios({
            method: method,
            url: "/api/v1/financial/contracts/contract/delivers",
            data: this.delivers_data
          })
            .then(response => {
              if (response.data.encode == 200) {
                this.$alert("提交成功");
                this.operate_type[4] = 1;
              }
            })
            .catch(err => {
              console.log(err.message);
            });
          break;
        case "project":
          var method;
          if (this.operate_type[5] == 0) {
            method = "post";
          } else if (this.operate_type[5] == 1) {
            method = "put";
          }
          var _this = this;
          var p1 = new Promise(function(resolve, reject) {
            _this.$refs.first_acceptances_form.validate(valid => {
              if (valid) {
                resolve();
              }
            });
          });
          var p2 = new Promise(function(resolve, reject) {
            _this.$refs.final_acceptances_form.validate(valid2 => {
              if (valid2) {
                resolve();
              }
            });
          });
          Promise.all([p1, p2]).then(function() {
            _this
              .$Axios({
                method: method,
                url: "/api/v1/financial/contracts/contract/project/acceptancs",
                data: {
                  list_data: [
                    _this.first_acceptances_form,
                    _this.final_acceptances_form
                  ]
                }
              })
              .then(response => {
                if (response.data.encode == 200) {
                  _this.$alert("提交成功");
                  _this.operate_type[5] = 1;
                }
              });
          });
          break;
        default:
          break;
      }
    }
  },
  created() {
    this.get_provinces();
    var id = this.$route.params.contract_unid;
    if (id != "0") {
      this.operate_type = [1, 1, 1, 1, 1, 1];
      this.form.contract_unid = id;
      this.$Axios({
        method: "get",
        url: this.contract_base_url + id
      })
        .then(response => {
          this.form = response.data;
          if (this.form.start_guarantee_date) {
            this.$delete(this.form, "start_guarantee_date");
          }
          if (this.form.end_guarantee_date) {
            this.$delete(this.form, "end_guarantee_date");
          }
          this.guarantee_date.push(response.data.start_guarantee_date);
          this.guarantee_date.push(response.data.end_guarantee_date);
        })
        .catch(err => {
          console.log(err.message);
        });
    }
  }
};
</script>
<style scoped>
.add_button {
  font-size: 20px;
  padding-top: 60px;
  color: gray;
}
.add_button:hover {
  color: black;
}

#payments_dialog {
  text-align: left;
}
.width-220 {
  width: 300px;
}
span:hover {
  cursor: pointer;
  text-shadow: lightgray 0.1em 0.1em 0.2em;
}
</style>