manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/contract/components/contractManagement.vue

<template>
  <section>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item :label="$t('he-tong-lie-biao')" class="toolbar_formitem_n1"></el-form-item>
        <!-- 合同编号/名称 -->
        <el-form-item>
          <div style="display: flex;align-items: center;height: 40px;">
            <el-input v-model="keyword" class="input-with-select" @keyup.enter.native="searchFilter" :placeholder="keyword == 1 ? $t('qing-shu-ru-he-tong-bian-hao') : $t('qing-shu-ru-he-tong-ming-cheng')" clearable size="small">
              <el-select slot="prepend" v-model="searchField" :placeholder="$t('defaultText.pleaseChoose')" style="width:120px">
                <el-option :label="$t('he-tong-ming-cheng')" :value="0"></el-option>
                <el-option :label="$t('contractno')" :value="1"></el-option>
              </el-select>
              <el-button slot="append" @click="searchFilter" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-form-item>
        <!-- 合同类型 -->
        <el-form-item>
          <span style="margin-left:5px;margin-right:5px;color:#606266;">{{ $t('he-tong-lei-xing') }}</span>
          <el-select v-model="typeName" style="width:120px;" :placeholder="$t('defaultText.pleaseChoose')" @change="searchFilter" size="small" clearable>
            <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item>
          <span style="margin-left:5px;margin-right:5px;color:#606266;">{{$t('state.states')}}</span>
          <el-select v-model="status" style="width:120px;" :placeholder="$t('defaultText.pleaseChoose')" @change="searchFilter" size="small" clearable>
            <el-option v-for="item,index in statusList" :key="item.label" :label="item.label" :value="index"></el-option>
          </el-select>
        </el-form-item>
        <!-- 创建时间 -->
        <el-form-item>
          <span style="margin-left:5px;margin-right:5px;color:#606266;">{{$t('creationtime')}}</span>
          <el-date-picker
            style="width:240px;"
            v-model="dateArray"
            type="daterange"
            size="small"
            range-separator="-"
            :start-placeholder="$t('interval')"
            :end-placeholder="$t('interval')"
            value-format="yyyy-MM-dd"
            clearable
            @change="searchFilter"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="margin-left:5px;margin-right:5px;color:#606266;">{{ $t('xia-bi-hui-kuan-ri-qi') }}</span>
          <el-date-picker
            style="width:240px;"
            v-model="paymentDate"
            type="daterange"
            size="small"
            :start-placeholder="$t('interval')"
            :end-placeholder="$t('interval')"
            value-format="yyyy-MM-dd"
            clearable
            @change="searchFilter"
          ></el-date-picker>
        </el-form-item>
        


        <el-form-item style="float:right;">
          <el-dropdown>
            <el-link type="primary" :underline="false">{{$t('viewmore')}}<i class="el-icon-arrow-down el-icon--right"></i></el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="permissions.contractType"><el-link type="primary" :underline="false" @click="typeEdit()">{{$t('bian-ji') + $t('types')}}</el-link></el-dropdown-item>
              <el-dropdown-item v-if="permissions.contractImport"><el-link type="primary" :underline="false" @click="importDialog = true">{{$t('dao-ru')}}</el-link></el-dropdown-item>
              <el-dropdown-item v-if="permissions.contractExport"><el-link type="primary" :underline="false" @click="exportContract()">{{$t('export.export')}}</el-link></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item style="float:right;" v-if="permissions.contractNew">
          <el-link type="primary" :underline="false" @click="newlyAdd()">{{ $t('xin-zeng-he-tong') }}</el-link>
        </el-form-item>
      </el-form>
    </el-col>

    <el-table :data="contractList" v-loading="listLoading" :height="tableHeight" border highlight-current-row>
      <el-table-column prop="number" :label="$t('contractno')" min-width="190"></el-table-column>
      <el-table-column prop="name" :label="$t('he-tong-ming-cheng')" min-width="190"></el-table-column>
      <el-table-column prop="amounts" :label="$t('contractamount')" min-width="135" align="right" header-align="center">
        <span slot-scope="scope">￥ {{scope.row.amounts ? scope.row.amounts.toFixed(2) : '0.00'}}</span>
      </el-table-column>
      <el-table-column prop="payment" :label="$t('yi-hui-kuan-jin-e')" min-width="140" align="right" header-align="center">
        <span slot-scope="scope">￥ {{scope.row.payment ? scope.row.payment.toFixed(2) : '0.00'}}</span>
      </el-table-column>
      <el-table-column prop="payment" :label="$t('yi-hui-kuan-jin-du')" min-width="170" align="right" header-align="center">
        <span slot-scope="scope">{{scope.row.payment ? (100*scope.row.payment/scope.row.amounts).toFixed(1) + '%': '0%'}}</span>
      </el-table-column>
      <el-table-column prop="nextPaymentDate" :label="$t('xia-bi-hui-kuan-ri-qi')" min-width="170" align="right" header-align="center">
        <span slot-scope="scope">{{scope.row.nextPaymentDate ? scope.row.nextPaymentDate : '-'}}</span>
      </el-table-column>
      <el-table-column prop="nextPaymentAmount" :label="$t('xia-bi-hui-kuan-jin-e')" min-width="120" align="right" header-align="center">
        <span slot-scope="scope">{{scope.row.nextPaymentAmount?'￥'+scope.row.nextPaymentAmount.toFixed(2) : '-'}}</span>
      </el-table-column>
      
      <el-table-column prop="typeName" :label="$t('he-tong-lei-xing')" min-width="140" align="center"></el-table-column>
      <el-table-column prop="status" :label="$t('state.states')" min-width="120" align="center">
        <template slot-scope="scope">
          <span :style="statusList[scope.row.status].color">{{statusList[scope.row.status].label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="indate" :label="$t('creationtime')" min-width="130" align="center"></el-table-column>
      <el-table-column width="340" :label="$t('operation')" align="left" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="permissions.contractView || permissions.contractManagement" size="mini" @click="lookover(scope.row)">{{$t('cha-kan')}}</el-button>
          <el-button v-if="permissions.contractManagement" size="mini" @click="editContract(scope.row)" type="primary">{{$t('bian-ji')}}</el-button>
          <el-button v-if="permissions.contractAudit && (scope.row.status == 1 || scope.row.status == 3)" size="mini" @click="process(scope.row,0)" type="success">{{$t('btn.through')}}</el-button>
          <el-button v-if="permissions.contractAudit && (scope.row.status == 1 || scope.row.status == 3)" size="mini" @click="processR(scope.row,2)" type="danger">{{$t('btn.rejected')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24" class="toolbar">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20 , 50 , 80 , 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <el-dialog :title="dialogTitle + $t('he-tong')" :visible.sync="addDialog" v-if="addDialog" :close-on-click-modal="false" customClass="customWidth" width="900px">
      <div style="height: 72vh;overflow-y: auto;overflow-x: hidden;">
        <el-form ref="contractForm" :model="contractForm" :rules="rules" label-width="120px" class="contractForm">
          <el-form-item :label="$t('contractno')">
            <el-input v-model="contractForm.number" :disabled="contractForm.status == 0" :maxlength="50" style="width:260px;" show-word-limit :placeholder="$t('peaseenterthe')" clearable @input="searchProject"></el-input>
            <span style="margin-left:20px;">{{ $t('rselatedprojects') }}</span>
            <el-select v-model="contractForm.projectId" filterable clearable style="width:300px;" :disabled="contractForm.status == 0">
              <el-option v-for="item in projectList" :key="item.id" :label="item.projectName  + '\u3000' + (item.projectCode == null?'':item.projectCode)" :value="item.id" >
                    <span style="float: left; color: #8492a6; font-size: 13px;">{{ item.projectCode }}</span>
                    <span style="float: right;">{{ item.projectName }}</span>
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('he-tong-ming-cheng')" prop='name'>
            <el-input v-model="contractForm.name" :disabled="contractForm.status == 0" :maxlength="100" show-word-limit :placeholder="$t('peaseenterthe')" clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('contractamount')">
            <el-input v-model="contractForm.amounts" :disabled="contractForm.status == 0" id="contract_amount" :placeholder="$t('peaseenterthe')" @keyup.native="restrictNumber('contract_amount')" clearable>
              <span slot="prefix">￥</span>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('he-tong-lei-xing')">
            <el-select v-model="contractForm.typeId" :disabled="contractForm.status == 0" :placeholder="$t('defaultText.pleaseChoose')" style="width:100%">
              <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('schedulestarttime')">
            <el-date-picker
            :disabled="contractForm.status == 0"
              v-model="contractForm.startDate"
              value-format="yyyy-MM-dd"
              type="date"
              :picker-options="{disabledDate: disabledStart}"
              :placeholder="$t('optiondate')">
            </el-date-picker>
            <span style="float:right;">{{$t('scheduleendtime')}}
            <el-date-picker
            :disabled="contractForm.status == 0"
              style="margin-left: 15px;"
              v-model="contractForm.endDate"
              value-format="yyyy-MM-dd"
              type="date"
              :picker-options="{disabledDate: disabledEnd}"
              :placeholder="$t('optiondate')">
            </el-date-picker>
            </span>
          </el-form-item>
          <el-form-item :label="$t('bei-zhu')">
            <el-input v-model="contractForm.remarks" :disabled="contractForm.status == 0" :placeholder="$t('peaseenterthe')" type="textarea" :rows="3" clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('hui-kuan-ji-hua')">
            <el-table :data="contractPaymentList" size="small" :key="Math.random()" :height="'300px'" show-header="false" style="margin-top:10px;">
                  <el-table-column prop="isPayed" >
                      <template slot-scope="scope">
                          <el-checkbox v-model="scope.row.isPayed" >{{ $t('yi-hui-kuan') }}</el-checkbox>
                      </template>
                      <template slot="header" >
                          <span style="font-size:14px;font-weight:normal;">{{ $t('shi-fou-yi-hui-kuan') }}</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="payDate"  :label="$t('hui-kuan-ri-qi')" width="210">
                      <template slot-scope="scope">
                          <div><el-date-picker type="date" v-model="scope.row.payDate" style="width:200px;" :placeholder="$t('optiondate')" value-format="yyyy-MM-dd"></el-date-picker></div>
                      </template>
                  </el-table-column>
                  
                  <el-table-column prop="amount" :label="$t('hui-kuan-jin-e')">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.amount" :id="'payment_amount'+scope.$index" :placeholder="$t('peaseenterthe')" maxlength="10" clearable>
                          <span slot="prefix">￥</span>
                        </el-input>
                      </template>
                  </el-table-column>
                  <el-table-column  width="80">
                      <template slot-scope="scope">
                          <el-button icon="el-icon-delete" size="mini" style="margin-left:10px;" @click.stop.native="deleteItem(scope.$index)"></el-button>
                      </template>
                      <template slot="header" >
                          <el-link type="primary" :underline="false" @click="addItem">{{ $t('addTian') }}</el-link>
                      </template>
                  </el-table-column>
              </el-table>
          </el-form-item>
          
          
          <el-form-item label-width="0" class="contractFiles">
            <div class="contractFiles_title">{{ $t('fu-jian') }}
              <el-upload style="float:right;margin-right:5%;" ref="uploadFile" action="#" :http-request="httpRequest" :on-change="fileChange" :auto-upload="false" :show-file-list="false">
                <el-link type="primary">{{ $t('xin-zeng-fu-jian') }}</el-link>
              </el-upload>
            </div>
            
            <el-table :data="fileList" :header-cell-style="{'font-weight':'normal'}" highlight-current-row
              max-height="240" style="width: 100%;margin-top:10px;margin-bottom:15px">
              <el-table-column :label="$t('headerTop.serialNumber')" min-width="40" align="center">
                <template slot-scope="scope">
                  <div>{{scope.$index + 1}}</div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('filenames')" prop="name" min-width="140"></el-table-column>
              <!-- <el-table-column label="文件大小" min-width="60">
                <template slot-scope="scope">
                  <div>{{scope.$index + 1}}</div>
                </template>
              </el-table-column> -->
              <el-table-column :label="$t('operation')" min-width="40">
                <template slot-scope="scope">
                  <el-link @click="fileDelete(scope.row)" type="primary">{{$t('btn.delete')}}</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer;">
        <el-button @click.native="deleteContract()" style="float:left" v-if="dialogTitle == $t('bian-ji')">{{$t('btn.delete')}}</el-button>
        <el-button @click.native="addDialog = false">{{$t('btn.cancel')}}</el-button>
        <el-button type="primary" @click="submitInsert()" :loading="submitLoading">{{$t('btn.submit')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('cha-kan-he-tong')" :visible.sync="lookoverDialog" v-if="lookoverDialog" :close-on-click-modal="false" customClass="customWidth" width="900px">
      <div style="height: 72vh;overflow-y: auto;overflow-x: hidden;">
        <el-form label-width="100px" class="lookoverContract clearfix">
          <el-form-item :label="$t('contractno')">
            {{contractForm.number}}
          </el-form-item>
          <el-form-item :label="$t('he-tong-ming-cheng')">
            {{contractForm.name}}
          </el-form-item>
          <el-form-item :label="$t('contractamount')">
            ￥ {{contractForm.amounts}}
          </el-form-item>
          <el-form-item :label="$t('he-tong-lei-xing')">
            {{contractForm.typeName}}
          </el-form-item>
          <el-form-item :label="$t('state.states')">
            {{statusList[contractForm.status].label}}
          </el-form-item>
          <el-form-item :label="$t('dismissreason')" v-if="contractForm.status == 2">
            <span v-if="userNameNeedTranslate == 1">
              <span><TranslationOpenDataText type='userName' :openid='contractForm.msg.name'></TranslationOpenDataText></span>
              <span>{{contractForm.msg.text}}</span>
            </span>
            <span v-else>
              {{contractForm.msg ? contractForm.msg : ''}}
            </span>
          </el-form-item>
          <el-form-item :label="$t('founder')">
            <span v-if="user.userNameNeedTranslate == 1"><TranslationOpenDataText type='userName' :openid='contractForm.creatorName'></TranslationOpenDataText></span>
            <span v-else>{{contractForm.creatorName}}</span>
          </el-form-item>
          <el-form-item :label="$t('creationtime')">
            {{contractForm.indate}}
          </el-form-item>
          <el-form-item :label="$t('schedulestarttime')">
            {{contractForm.startDate}}
          </el-form-item>
          <el-form-item :label="$t('scheduleendtime')">
            {{contractForm.endDate}}
          </el-form-item>
          <el-form-item style="width:100%" :label="$t('bei-zhu')">
            {{contractForm.remarks}}
          </el-form-item>
          <el-form-item style="width:100%" :label="$t('hui-kuan-ji-hua')">
            <el-table :data="contractPaymentList" size="small" :key="Math.random()" :height="'300px'" show-header="false" style="margin-top:10px;">
                  <el-table-column prop="isPayed" >
                      <template slot-scope="scope">
                        {{ scope.row.isPayed?$t('yi-hui-kuan'):$t('wei-hui-kuan') }}
                      </template>
                      <template slot="header" >
                          <span style="font-size:14px;font-weight:normal;">{{ $t('shi-fou-yi-hui-kuan') }}</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="payDate"  :label="$t('hui-kuan-ri-qi')" width="210">
                      <template slot-scope="scope">
                          <div>{{ scope.row.payDate }}</div>
                      </template>
                  </el-table-column>
                  
                  <el-table-column prop="amount" :label="$t('hui-kuan-jin-e')">
                      <template slot-scope="scope">
                        <div>{{ scope.row.amount }}</div>
                      </template>
                  </el-table-column>
              </el-table>
          </el-form-item>
          
          <el-form-item label-width="0" class="contractFiles">
            <div class="contractFiles_title">{{ $t('fu-jian') }}</div>
            <el-table :data="fileList" :header-cell-style="{'font-weight':'normal'}" highlight-current-row
              max-height="240" style="width: 100%;margin-top:10px;margin-bottom:30px">
              <el-table-column :label="$t('headerTop.serialNumber')" min-width="40" align="center">
                <template slot-scope="scope">
                  <div>{{scope.$index + 1}}</div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('filenames')" prop="name" min-width="140"></el-table-column>
              <!-- <el-table-column label="文件大小" min-width="60">
                <template slot-scope="scope">
                  <div>{{scope.$index + 1}}</div>
                </template>
              </el-table-column> -->
              <el-table-column :label="$t('operation')" min-width="40">
                <template slot-scope="scope">
                  <el-link @click="fileDownload(scope.row)" type="primary">{{$t('other.download')}}</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <el-dialog :title="$t('he-tong-lei-xing-guan-li')" :visible.sync="typeDialog" v-if="typeDialog" customClass="customWidth" width="500px">
      <el-table :data="typeList" highlight-current-row  height="400" style="width: 100%;">
        <el-table-column type="index" width="60" :label="$t('headerTop.serialNumber')">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="typeName"></el-table-column>
        <el-table-column :label="$t('operation')" width="150">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="typeItemEdit(scope.row)">{{$t('bian-ji')}}</el-button>
            <el-button size="small" type="danger" @click="typeItemDelete(scope.row)">{{$t('btn.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer;">
        <el-button type="primary" @click="typeDialog = false">{{$t('Shutdown')}}</el-button>
        <el-button type="primary" @click="typeItemAdd()">{{ $t('xin-zeng-he-tong-lei-xing') }}</el-button>
      </div>
      <el-dialog :title="typeTitle == this.$t('add') ? $t('xin-zeng-he-tong-lei-xing') : $t('bian-ji-he-tong-lei-xing')" :visible.sync="typeItemDialog" v-if="typeItemDialog" append-to-body width="400px">
        <div style="height: 12vh;overflow-y: auto;overflow-x: hidden;">
          <el-input v-model="typeItemForm.typeName" :maxlength="200"></el-input>
        </div>
        <div slot="footer" class="dialog-footer;">
          <el-button type="primary" @click="typeItemDialog = false">{{$t('btn.cancel')}}</el-button>
          <el-button type="primary" @click="typeItemSubmit()">{{$t('btn.determine')}}</el-button>
        </div>
      </el-dialog>
    </el-dialog>

    <el-dialog :title="$t('dao-ru-he-tong')" :visible.sync="importDialog" v-if="importDialog" width="30%">
      <!-- 模板？ -->
      <p>1. {{$t('other.download')}}
        <el-link type="primary" style="margin-left:5px;" :underline="false" :href="'./upload/'+$t('he-tong-guan-li-dao-ru-mo-ban')+'.xlsx'" :download="$t('he-tong-guan-li-dao-ru-mo-ban')+'.xlsx'">{{$t('he-tong-guan-li-dao-ru-mo-ban')+ '.xlsx'}}</el-link>
      </p>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-upload ref="upload" action="#" :limit="1" :http-request="importContract" :show-file-list="false">
          <el-button type="primary" :loading="importLoading">{{ $t('dao-ru-he-tong') }}</el-button>
        </el-upload>
      </div>
    </el-dialog>
    
    <el-dialog :title="$t('defaultText.pleaseEnterTheReason')"  v-if="denyReasonDialog" :visible.sync="denyReasonDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <div>
                <el-input type="textarea" v-model="denyReason" rows="2" :placeholder="$t('reasonforyourdecisiontoreject')" />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="denyReasonDialog = false" >{{$t('btn.cancel')}}</el-button>
                <el-button type="primary" @click="process(null,2)" >{{$t('btn.submit')}}</el-button>
            </div>
        </el-dialog>
  </section>
</template>

<script>
export default {
  data() {
    return {
      paymentDate: null,
      contractPaymentList: [],
      user: JSON.parse(sessionStorage.getItem("user")),
      permissions: JSON.parse(sessionStorage.getItem("permissions")),
      searchField: 0,
      keyword: '',
      typeName: '',
      status: '',
      dateArray: [],

      typeList: [],
      contractList: [],
      listLoading: false,
      statusList: [
        {label:this.$t('state.approved'),color: 'color:#67c23a;'},
        {label:this.$t('state.WaitingAudit'),color: 'color:#e6a23c;'},
        {label:this.$t('state.rejected'),color: 'color:#f56c6c;'},
        // {label:this.$t('other.importWaitingForReview'),color: 'color:#e6a23c;'},
      ],
      typeDialog: false,
      typeTitle: this.$t('add'),
      typeItemDialog: false,
      typeItemForm: {typeName: ''},

      denyReasonDialog: false,
      denyReason: '',
      denyrow: null,

      dialogTitle: this.$t('add'),
      addDialog: false,
      lookoverDialog: false,
      submitLoading: false,
      contractForm: {
        number: '',
        name: '',
        amounts: '',
        typeId: null,
        remarks: '',
        startDate: '',
        endDate: ''
      },
      rules:{
        name: [{ required: true, message: this.$t('pleaseentername'), trigger: "blur" }],
      },

      fileList: [],

      importDialog: false,
      importLoading: false,
      projectList:[],
      page: 1,
      size: 20,
      total: 0,
      tableHeight: 0
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 180;
    const that = this;
    window.onresize = function temp() {
      that.tableHeight = window.innerHeight - 185;
    };
  },
  mounted() {
    this.getProjectList();
    this.getContractList()
    this.getContractType()
  },
  methods: {
    // test(row){
    //   console.log('test',row);
    //   // this.$refs.uploadFile.submit()
    // },
    restrictNumber(targetId) {
                let inpu = document.getElementById(targetId);
                inpu.value = inpu.value.replace(/[^\d.]/g, "");  //仅保留数字和"."
                inpu.value = inpu.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
                inpu.value = inpu.value.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
                inpu.value = inpu.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
                if (inpu.value.indexOf(".") < 0 && inpu.value != "") { //首位是0的话去掉
                  inpu.value = parseFloat(inpu.value);
                  
                }
                if(inpu.value.split('.')[0].length > 9){
                    inpu.value = inpu.value.split('.')[0].substring(0,9) + (inpu.value.split('.')[1] ? '.' + inpu.value.split('.')[1] : '')
                    
                    this.contractForm.amounts = inpu.value
                  }
                
            },
        searchProject() {
          console.log(this.contractForm.number);
          //按合同编号去匹配项目编号，自动加载关联项目
          if (this.contractForm.number) {
              var matchItem = this.projectList.filter(p=>p.projectCode == this.contractForm.number);
              if (matchItem.length > 0) {
                   this.contractForm.projectId = matchItem[0].id;
                   this.contractForm.name = matchItem[0].projectName;
                   this.contractForm.amount = matchItem[0].contractAmount;
              }
          }
        },
        //删除合同回款情况
        deleteItem(index) {
            this.contractPaymentList.splice(index,1);
        },
        //添加合同回款情况
        addItem() {
            let p = 0;
            this.contractPaymentList.push( { contractId:this.contractForm.id, isPayed:false,payDate: null, amount:0.0});
        },
        
        getProjectList() {
          this.http.post('/contract/getProjectList',{},
            res => {
              if(res.code == 'ok'){
                  this.projectList = res.data;
              }else{
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            },err => {
              this.$message({
                message: err,
                type: 'error'
              })
            })
        },  
    disabledStart(date){
      if(this.contractForm.endDate){
        if(date > new Date(this.contractForm.endDate)){
          return true
        }else{
          return false
        }
      }else{
        return false
      }
    },
    disabledEnd(date){
      if(this.contractForm.startDate){
        if(date < new Date(this.contractForm.startDate)){
          return true
        }else{
          return false
        }
      }else{
        return false
      }
    },
    searchFilter(){
      this.page = 1
      this.getContractList()
    },
    handleSizeChange(val){
      this.size = val
      this.page = 1
      this.getContractList()
    },
    handleCurrentChange(val){
      this.page = val;
      this.getContractList()
    },

    importContract(item){
      let str = item.file.name.split('.')
      let format = str[str.length - 1];
      if(format != "xls" && format != "xlsx"){
        this.$message({
          message: this.$t('other.PleaseselecttheXLSorXLSXfile'),
          type: 'error'
        })
      }else{
        this.importLoading = true
        let formData = new FormData();
        formData.append("file", item.file);
        formData.append("userId", this.user.id);
        this.http.uploadFile('/contract/importContract',formData,
        res => {
          this.$refs.upload.clearFiles();
          this.importLoading = false;
          if(res.code == 'ok'){
            this.importDialog = false
            this.$message({
              message: this.$t('other.importSuccess'),
              type: 'success'
            })
            this.getContractList()
          }else{
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        },err => {
          this.importLoading = false;
          this.$message({
            message: err,
            type: 'error'
          })
        })
      }
    },
    exportContract(){
      let parameter = {}
      if(this.typeName){
        parameter.typeName = this.typeName
      }
      if(this.keyword){
        if(this.searchField){
          parameter.number = this.keyword
        }else{
          parameter.name = this.keyword
        }
      }
      if(this.status !== ''){
        parameter.status = this.status
      }
      if(this.dateArray && this.dateArray.length == 2){
        parameter.startDate = this.dateArray[0]
        parameter.endDate = this.dateArray[1]
      }
      this.http.post('/contract/exportContract',parameter,
      res => {
        if(res.code == 'ok'){
          let filePath = res.data;
          const a = document.createElement('a'); // 创建a标签
          a.setAttribute('download', this.$t('he-tong-dao-chu') + '.xlsx');// download属性
          a.setAttribute('href', filePath);// href链接
          a.click(); //自执行点击事件
          a.remove();
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },

    typeEdit(){
      this.typeDialog = true
    },
    typeItemAdd(){
      if(this.typeList.length == 20){
        this.$message({
          message: this.$t('he-tong-lei-xing-zui-duo-zhi-neng-chuang-jian-20-ge'),
          type: 'error'
        })
        return
      }
      this.typeTitle = this.$t('add')
      this.typeItemForm = {typeName: ''}
      this.typeItemDialog = true
    },
    typeItemEdit(row){
      this.typeTitle = this.$t('bian-ji')
      this.typeItemForm = JSON.parse(JSON.stringify(row))
      this.typeItemDialog = true
    },
    typeItemDelete(row){
      this.$confirm(this.$t('que-ding-yao-shan-chu-ci-tiao-he-tong-lei-xing-ma'), this.$t('other.prompts'), {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'warning'
      }).then(() => {
        this.http.post('/contractType/deleteContractType',{
          deleteId: row.id
        },res => {
          if(res.code == 'ok'){
            this.getContractType()
            this.$message({
              type: 'success',
              message: this.$t('message.successfullyDeleted') + '!'
            });
          }else{
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
        },err => {
          this.$message({
            type: 'error',
            message: err
          });
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('thedeletionhasbeencancelled')
        });          
      });
    },
    typeItemSubmit(){
      this.http.post('/contractType/changeContractType',this.typeItemForm,
      res => {
        if(res.code == 'ok'){
          this.typeItemDialog = false
          this.getContractType()
          this.$message({
            message: this.typeTitle == this.$t('add') ? this.$t('newsuccess') : this.$t('editsuccess'),
            type: 'success'
          })
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },


    newlyAdd(){
      this.dialogTitle = this.$t('add')
      this.contractForm = {
        number: '',
        name: '',
        amounts: '',
        typeId: null,
        remarks: '',
        startDate: '',
        endDate: ''
      }
      this.contractPaymentList = [];
      this.fileList = []
      this.addDialog = true
    },
    editContract(row){
      this.dialogTitle = this.$t('bian-ji')
      this.contractForm = JSON.parse(JSON.stringify(row))
      delete this.contractForm.customData;
      this.fileList = this.contractForm.files ? this.contractForm.files : []
      for(let i in this.fileList){
        this.fileList[i].name = this.fileList[i].documentName
      }
      this.addDialog = true;
      this.getContractPaymentList();
    },
    getContractPaymentList() {
      this.contractPaymentList = [];
      this.http.post('/contract-payment/getList',{contractId: this.contractForm.id},
      res => {
        if(res.code == 'ok'){
          this.contractPaymentList = res.data;
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    deleteContract(){
      this.$confirm(this.$t('que-ding-yao-shan-chu-gai-he-tong-ma'), this.$t('other.prompts'), {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'warning'
      }).then(() => {
        this.http.post('/contract/deleteContract',{
          id: this.contractForm.id
        },res => {
          if(res.code == 'ok'){
            this.addDialog = false
            this.getContractList()
            this.$message({
              type: 'success',
              message: this.$t('message.successfullyDeleted') + '!'
            });
          }else{
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
        },err => {
          this.$message({
            type: 'error',
            message: err
          });
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('thedeletionhasbeencancelled')
        });          
      });
    },
    processR(row,status){
      this.denyReasonDialog = true
      this.denyrowId = row.id
      this.denyReason = ''
    },
    process(row,status){
      let parameter
      if(status == 2){
        parameter = {
          id: this.denyrowId,
          status: status,
          msg: this.denyReason
        }
      }else{
        parameter = {
          id: row.id,
          status: status
        }
      }
      this.$confirm(this.$t('que-ren-shen-he-tong-guo-ma-tong-guo-hou-he-tong-ji-ben-xin-xi-wu-fa-xiu-gai'), this.$t('other.prompts'), {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'warning'
      }).then(() => {
        this.http.post('/contract/processContract',parameter,
        res => {
          if(res.code == 'ok'){
            this.getContractList()
            this.denyReasonDialog = false
            this.$message({
              message: status == 0 ? this.$t('state.alreadyPassed') : this.$t('state.rejected'),
              type: 'success'
            })
          }else{
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        },err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
      }); 
    },
    lookover(row){
      console.log('lookover',row);
      if(this.user.userNameNeedTranslate == 1) {
        let obj = {name: '',text: ''}

        if (row.msg) {
          let match = row.msg.match(/\$userName=(.*?)\$(.*)/);
          if (match) {
            obj.name = match[1];
            obj.text = match[2];
          } else {
            obj.text = row.msg;
          }
        }
        // if(row.msg.indexOf('$userName=') != '-1') {
        //   let str = row.msg.split('$userName=')[1]
        //   let arr = str.split('$')
        //   obj.name = arr[0]
        //   obj.text = arr[1]
        // } else {
        //   obj.text = row.msg
        // }
        row.msg = obj
        this.contractForm = row
      } else {
        this.contractForm = row
      }
      this.fileList = this.contractForm.files ? this.contractForm.files : []
      for(let i in this.fileList){
        this.fileList[i].name = this.fileList[i].documentName
      }
      this.lookoverDialog = true;
      this.getContractPaymentList();
    },
    submitInsert(){
      this.$refs.contractForm.validate(valid => {
        if (valid) {
          //校验回款日期和金额
          var totalPayment = 0.0;
          for (var i = 0; i < this.contractPaymentList.length; i++) {
            if (!this.contractPaymentList[i].payDate) {
              this.$message({
                message: this.$t('hui-kuan-ri-qi-bu-neng-wei-kong'),
                type: 'error'
              })
              return;
            }
            if (!this.contractPaymentList[i].amount) {
              this.$message({
                message: this.$t('hui-kuan-jinebu-neng-wei-0'),
                type: 'error'
              })
              return;
            }
            totalPayment += parseFloat(this.contractPaymentList[i].amount);
          }
          if (totalPayment > parseFloat(this.contractForm.amounts)) {
            this.$message({
                message: this.$t('zong-hui-kuan-jinebu-de-da-yu-he-tong-jin-e'),
                type: 'error'
              })
              return;
          }
          this.submitLoading = true
          delete this.contractForm.files
          this.contractForm.paymentListStr = JSON.stringify(this.contractPaymentList);
          this.http.post(this.dialogTitle == this.$t('add') ? '/contract/addContract' : '/contract/editContract',this.contractForm,
          res => {
            this.submitLoading = false
            this.addDialog = false
            if(res.code == 'ok'){
              this.$message({
                message: res.msg,
                type: 'success'
              })
              if(this.dialogTitle == this.$t('add')){
                this.contractForm.id = res.data
              }
              this.submitFile()
              
            }else{
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          },err => {
            this.submitLoading = false
            this.addDialog = false
            this.$message({
              message: err,
              type: 'error'
            })
          })
        }
      })
    },

    fileChange(file,fileList){
      // console.log('fileChange',file,fileList);
      file.needUpload = true
      this.fileList.push(file)
    },
    fileDelete(row){
      // console.log(row,this.fileList);
      this.$confirm(this.$t('que-ding-yao-shan-chu-gai-wen-jian-ma'), this.$t('other.prompts'), {
        confirmButtonText: this.$t('btn.determine'),
        cancelButtonText: this.$t('btn.cancel'),
        type: 'warning'
      }).then(() => {
        if(row.uid){
          for(let i in this.fileList){
            if(this.fileList[i].uid && this.fileList[i].uid == row.uid){
              this.fileList.splice(i,1)
            }
          }
        }else{
          this.http.post('/contract-document/fileDelete',{
            contractId: this.contractForm.id,
            fileIds: [row.id]
          },res => {
            if(res.code == 'ok'){
              this.getContractList()
              this.fileList.filter(item => !item.id || item.id != row.id)
              this.$message({
                type: 'success',
                message: this.$t('message.successfullyDeleted') + '!'
              });
            }else{
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          },err => {
            this.$message({
              type: 'error',
              message: err
            });
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('thedeletionhasbeencancelled')
        });          
      });
    },
    fileDownload(row){
      this.http.downloadFile('/contract-document/fileDown',{
        contractId: this.contractForm.id,
        fileId: row.id
      },row.name,err=>{
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    submitFile(){
      // console.log('submitFile',this.fileList);
      let formData = new FormData();
      for(let i in this.fileList){
        if(this.fileList[i].needUpload){
          formData.append("file", this.fileList[i].raw);
        }
      }
      formData.append("ContractId", this.contractForm.id);
      this.http.uploadFile('/contract-document/fileUpload',formData,
      res => {
        if(res.code == 'ok'){
          this.getContractList()
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },


    getContractType(){
      this.http.post('/contractType/getContractType',{},
      res=>{
        if(res.code=='ok'){
          this.typeList = res.data
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err=>{
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    getContractList(){
      
      // pageIndex，pageSize，number，name，typeName，status，startDate，endDate
      let parameter = {
        pageIndex: this.page,
        pageSize: this.size,
      }
      if(this.typeName){
        parameter.typeName = this.typeName
      }
      if(this.keyword){
        if(this.searchField){
          parameter.number = this.keyword
        }else{
          parameter.name = this.keyword
        }
      }
      if(this.status !== ''){
        parameter.status = this.status
      }
      if(this.dateArray && this.dateArray.length == 2){
        parameter.startDate = this.dateArray[0]
        parameter.endDate = this.dateArray[1]
      }
      if(this.paymentDate && this.paymentDate.length == 2){
        parameter.paymentStartDate = this.paymentDate[0]
        parameter.paymentEndDate = this.paymentDate[1]
      }
      this.listLoading = true
      this.http.post('/contract/getContractPage',parameter,
      res => {
        this.listLoading = false
        if(res.code == 'ok'){
          this.contractList = res.data.data
          this.total = res.data.total
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      },err => {
        this.listLoading = false
        this.$message({
          message: err,
          type: 'error'
        })
      })
    }
  },
}
</script>

<style>
.lookoverContract{
  margin-top: 30px;
}
.lookoverContract .el-form-item{
  width: 50%;
  float: left;
}
.lookoverContract .el-form-item__label{
  font-weight: 600;
}
.lookoverContract .contractFiles{
  width: 100%;
}
.lookoverContract .contractFiles_title{
  margin-left: 5%;
  font-size: 16px;
  line-height: 20px;
  margin-top: 16px;
}
.contractForm{
  margin-top: 30px;
}
.contractForm .el-form-item{
  width: 90%;
}
.contractForm .contractFiles{
  width: 100%;
}
.contractForm .contractFiles_title{
  margin-left: 5%;
  font-size: 16px;
  line-height: 20px;
  margin-top: 16px;
}
</style>