<style>
  .ElectronicAudit .icon-shenhebohui {
    color: #fff;
  }

  .ContractManage .query-box .el-button--primary {
    background-color: #fff !important;
    color: #e95252 !important;
    border-color: #e95252 !important;
  }

  .ContractManage .query-box .el-button--primary:focus,
  .query-box .el-button--primary:hover {
    background-color: #fff !important;
    color: #e95252 !important;
    border-color: #e95252 !important;
  }

  .ContractManage .query-box .el-button {
    border-radius: 16px;
    height: 30px;
    position: relative;
    top: 5px;
  }

  .ContractManage .query-box .el-button i {
    color: #e95252;
  }

  .ContractManage .query-box .el-button span {
    position: relative;
    top: -3px;
  }

  .ContractManage .el-button+.el-button {
    margin-left: 0 !important;
  }

  .newContract .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: #f5f5f5;
  }

</style>

<template>
  <div class="flexOne newContract">
    <el-tabs v-model="activeName" type="card" @tab-click="getSwitch">
      <el-tab-pane :label="$t('objFill.v101.administrative.qitahetong')" name="2"></el-tab-pane>
      <el-tab-pane :label="$t('objFill.v101.administrative.chujyht')" name="1"></el-tab-pane>
    </el-tabs>
    <!--出境合同-->
    <template v-if="activeName==1">
      <div class="ElectronicAudit">
        <div class="query-box">
          <ul>
            <li>
              <span>
                <em>{{$t('objFill.hetongbh')}}</em>
                <el-input :placeholder="$t('system.ph_in')" v-model="msgOut.ContractNum"
                  @keyup.native.enter="resetOutQuery" class="w210" clearable @clear="resetOutQuery"></el-input>
              </span>
            </li>
            <li>
              <span>
                <em>{{$t('hotel.product_name')}}</em>
                <el-input :placeholder="$t('system.ph_in')" v-model="msgOut.ProductName"
                  @keyup.native.enter="resetOutQuery" class="w210" clearable @clear="resetOutQuery"></el-input>
              </span>
            </li>
            <li>
              <span>
                <em>{{$t('hotel.order_Number')}}</em>
                <el-input :placeholder="$t('system.ph_in')" v-model="msgOut.OrderID" @keyup.native.enter="resetOutQuery"
                  class="w210" clearable @clear="resetOutQuery"></el-input>
              </span>
            </li>
            <li>
              <span>
                <em>{{$t('visa.v_tuanhao')}}</em>
                <el-input :placeholder="$t('system.ph_in')" v-model="msgOut.TCID" @keyup.native.enter="resetOutQuery"
                  class="w210" clearable @clear="resetOutQuery"></el-input>
              </span>
            </li>
            <li>
              <span>
                <em>{{$t('admin.admin_status')}}</em>
                <el-select v-model='msgOut.AuditContract' filterable :placeholder="$t('pub.pleaseSel')"
                  @change="resetOutQuery" clearable @clear="resetOutQuery">
                  <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
                  <el-option :label="$t('fnc.bohui')" :value='3'></el-option>
                  <el-option :label="$t('objFill.dsh')" :value='1'></el-option>
                  <el-option :label="$t('objFill.shenhetongguo')" :value='2'></el-option>
                </el-select>
              </span>
            </li>
            <li>
              <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetOutQuery" />
            </li>
          </ul>
        </div>
        <div class="commonContent" v-loading="loadingOut">
          <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <th width="215">{{$t('objFill.hetongbh')}}</th>
              <th width="80">{{$t('hotel.order_Number')}}</th>
              <th width="80">{{$t('visa.v_tuanhao')}}</th>
              <th>{{$t('hotel.product_name')}}</th>
              <th width="100">{{$t('hotel.hotel_StarDate')}}</th>
              <th width="100">{{$t('sm.fanhuiDate')}}</th>
              <th width="80">{{$t('hotel.hotel_status')}}</th>
              <th width="80">{{$t('objFill.shifougz')}}</th>
              <th width="125">{{$t('active.cl_addPp')}}</th>
              <th width="200">{{$t('hotel.table_operat')}}</th>
            </tr>
            <tr v-for="item in dataListOut">
              <td>{{item.ContractNum}}</td>
              <td>{{item.OrderId}}</td>
              <td>{{item.TCID}}</td>
              <td style="text-align:left;">{{item.ProductName}}</td>
              <td>
                {{item.StartDate}}
              </td>
              <td>
                {{item.ReturnDate}}
              </td>
              <td>
                <span v-if="item.AuditContract==3" style="color:red;">{{$t('objFill.yibohui')}}</span>
                <span v-if="item.AuditContract==1" style="color:blue;">{{$t('objFill.dsh')}}</span>
                <span v-if="item.AuditContract==2" style="color:green;">{{$t('objFill.shenhetongguo')}}</span>
              </td>
              <td>
                <span v-if="item.IsTravelAgencySignature==0">{{$t('objFill.weigaizhang')}}</span>
                <span v-if="item.IsTravelAgencySignature==1" style="color:green;">{{$t('objFill.yigaizhnag')}}</span>
              </td>
              <td>
                {{item.CreateByName}}<br />
                {{item.CreateTime}}
              </td>
              <td>
                <el-row>
                  <el-tooltip class="item" effect="dark" :content="$t('objFill.shenhetongguo')" placement="top-start">
                    <el-button type="primary" icon="iconfont icon-shenpi" @click="showContractDialog(item,2)" circle>
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="$t('fnc.bohui')" placement="top-start">
                    <el-button type="danger" v-if="item.AuditContract!=3" icon="iconfont icon-shenhebohui"
                      @click="showContractDialog(item,3)" circle></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" v-if="item.IsTravelAgencySignature==0"
                    :content="$t('objFill.v101.administrative.gaizhang')" placement="top-start">
                    <el-button type="success" icon="iconfont icon-gaizhang" circle @click="OutGaiZhang(item.Id)"
                      style="padding:4px;"></el-button>
                  </el-tooltip>

                  <el-tooltip class="item" effect="dark" :content="$t('fnc.chakan')" placement="top-start">
                    <el-button type="danger" icon="iconfont icon-chakan" @click="goToDetail(item)" circle></el-button>
                  </el-tooltip>

                </el-row>
              </td>
            </tr>
          </table>
          <div class="noData" v-show="dataListOut.length<1">
            <i class="iconfont icon-kong" style="font-size:100px;"></i>
            <p>{{$t("active.ld_noData")}}</p>
          </div>
          <el-pagination background @current-change="handleOutChange" :current-page.sync="currentPage2"
            layout="total,prev, pager, next, jumper" :page-size="msgOut.PageSize" :total="total2">
          </el-pagination>
        </div>
      </div>
    </template>
    <!--单项、一日游、境内旅游合同-->
    <template v-else>
      <div class="ContractManage">
        <div class="query-box">
          <ul>
            <li>
              <span><em>{{$t('objFill.hetongbh')}}</em>
                <el-input class="w210" v-model="msg.T_ContractNum" :placeholder="$t('objFill.qingshurhtbh')"
                  @keyup.enter.native="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>{{$t('objFill.hetonglx')}}</em>
                <el-select v-model="msg.CType" :placeholder="$t('pub.pleaseSel')" @change="resetOtherQuery" clearable
                  @clear="resetOtherQuery">
                  <el-option :label="$t('pub.pleaseSel')" :value="0" :key="0"> </el-option>
                  <el-option :label="$t('objFill.danxwtht')" :value="1" :key="1"> </el-option>
                  <el-option :label="$t('objFill.jingnlyht')" :value="2" :key="2"> </el-option>
                  <el-option :label="$t('objFill.yiriyht')" :value="3" :key="3"> </el-option>
                </el-select>
              </span>
            </li>
            <li>
              <span><em>{{$t('objFill.jiafangmc')}}</em>
                <el-input class="w210" v-model="msg.Tourists_Name" :placeholder="$t('rule.EnterCusNameC')"
                  @keyup.enter.native="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>{{$t('objFill.kehudianh')}}</em>
                <el-input class="w210" v-model="msg.Tourists_Tel" :placeholder="$t('objFill.qingsrkhdh')"
                  @keyup.enter.native="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>{{$t('visa.v_tuanhao')}}</em>
                <el-input class="w210" v-model="msg.C_TCNUM" :placeholder="$t('visa.v_shurutuanhao')"
                  @keyup.enter.native="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>{{$t('system.query_lineName')}}</em>
                <el-input class="w210" v-model="msg.C_ProductName" :placeholder="$t('system.ph_lineName')"
                  @keyup.enter.native="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>{{$t('objFill.jinbanr')}}</em>
                <el-input class="w210" v-model="msg.TravelAgency_DealMan" :placeholder="$t('objFill.qingsrjbren')"
                  @keyup.enter.native="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>{{$t('objFill.hetongzt')}}</em>
                <el-select v-model="msg.Status" :placeholder="$t('pub.pleaseSel')" @change="resetOtherQuery" clearable
                  @clear="resetOtherQuery">
                  <el-option :label="$t('pub.pleaseSel')" :value="-1" :key="-1"> </el-option>
                  <el-option :label="$t('fnc.daishen')" :value="1" :key="1"> </el-option>
                  <el-option :label="$t('objFill.shenhetongguo')" :value="2" :key="2"> </el-option>
                  <el-option :label="$t('fnc.bohui')" :value="3" :key="3"> </el-option>
                </el-select>
              </span>
            </li>
            <li>
              <span><em>{{$t('scen.sc_temID')}}</em>
                <el-input class="w210" v-model="msg.TCID" :placeholder="$t('objFill.qingsrtdbh')"
                  @keyup.enter.native="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>{{$t('hotel.order_Number')}}</em>
                <el-input class="w210" v-model="msg.OrderId" :placeholder="$t('rule.qsrdingdanhao')"
                  @keyup.enter.native="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-input>
              </span>
            </li>
            <li>
              <span><em>{{ $t("sm.Date") }}</em>
                <el-date-picker v-model="msg.StartDate" class="w135" value-format="yyyy-MM-dd" type="date"
                  :picker-options="pickerBeginDateBefore2" @input="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-date-picker>
                -
                <el-date-picker v-model="msg.EndDate" class="w135" value-format="yyyy-MM-dd" type="date"
                  :picker-options="pickerBeginDateAfter2" @input="resetOtherQuery" clearable @clear="resetOtherQuery">
                </el-date-picker>
              </span>
            </li>
            <li>
              <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="resetOtherQuery" />
            </li>
          </ul>
        </div>
        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
          <tr>
            <th width="50">{{$t('hotel.hotel_SerialNumber')}}</th>
            <th width="80">{{$t('objFill.hetonglx')}}</th>
            <th width="100">{{$t('objFill.hetongbh')}}</th>
            <th width="100">{{$t('objFill.jiafangmc')}}</th>
            <th width="120">{{$t('objFill.yifangmc')}}</th>
            <th width="100">{{$t('objFill.jinbanr')}}</th>
            <th width="100">{{$t('visa.v_tuanhao')}}</th>
            <th width="150">{{$t('hotel.product_name')}}</th>
            <th width="100">{{$t('objFill.hetongzt')}}</th>
            <th width="100">{{$t('active.cl_addPp')}}</th>
            <th width="120">{{$t('fnc.cjshijian')}}</th>
            <th width="80">{{$t('objFill.shifougz')}}</th>
            <th width="130">{{$t('hotel.table_operat')}}</th>
          </tr>
          <tr v-for="(item, index) in dataList" :key="index">
            <td>{{ item.ID }}
            </td>
            <td>
              <template v-if="item.CType == 2">
                {{$t('objFill.jingnlyht')}}
              </template>
              <template v-else-if="item.CType == 3">
                {{$t('objFill.yiriyht')}}
              </template>
              <template v-else-if="item.CType == 1">
                {{$t('objFill.danxwtht')}}
              </template>
            </td>
            <td>{{ item.T_ContractNum }}</td>
            <td>{{ item.Tourists_Name }}</td>
            <td>{{ item.TravelAgency_Name }}</td>
            <td>{{ item.TravelAgency_DealMan }}</td>
            <td>{{ item.C_TCNUM }}</td>
            <td>{{ item.C_ProductName }}</td>
            <td>
              <span v-if="item.Status==3" style="color:red;">{{$t('objFill.yibohui')}}</span>
              <span v-else-if="item.Status==1" style="color:blue;">{{$t('objFill.dsh')}}</span>
              <span v-else-if="item.Status==2" style="color:green;">{{$t('objFill.shenhetongguo')}}</span>
              <span v-else>{{item.StatusStr}}</span>
            </td>
            <td>{{ item.CreateByName }}</td>
            <td>{{ item.CreateTimeStr }}</td>
            <td>
              <template v-if="item.IsTravelAgencySignature">
                <span v-if="item.IsTravelAgencySignature==0">{{$t('objFill.weigaizhang')}}</span>
                <span v-if="item.IsTravelAgencySignature==1" style="color:green;">{{$t('objFill.yigaizhnag')}}</span>
              </template>
              <template v-else>
                <span>{{$t('objFill.weigaizhang')}}</span>
              </template>
            </td>
            <td>
              <el-tooltip class="item" effect="dark" :content="$t('objFill.shenhetongguo')" placement="top-start"
                v-if="item.Status==1">
                <el-button type="primary" icon="iconfont icon-shenpi" circle @click="SubmitContract(item,2)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('fnc.bohui')" placement="top-start"
                v-if="item.Status==1">
                <el-button type="danger" icon="iconfont icon-chehui" circle @click="SubmitContract(item,3)">
                </el-button>
              </el-tooltip>
              <template v-if="item.Status==2||item.Status==4">
                <el-tooltip class="item" effect="dark"
                  v-if="item.IsTravelAgencySignature==null|| item.IsTravelAgencySignature==0 "
                  :content="$t('objFill.v101.administrative.gaizhang')" placement="top-start">
                  <el-button type="success" icon="iconfont icon-gaizhang" circle @click="GaiZhang(item.ID)"
                    style="padding:4px;"></el-button>
                </el-tooltip>
              </template>
              <el-tooltip class="item" effect="dark" :content="$t('fnc.chakan')" placement="top-start">
                <el-button type="success" icon="iconfont icon-chakan" circle @click="ViewContract(item)"
                  style="padding:5px;"></el-button>
              </el-tooltip>

              <el-tooltip class="item" effect="dark" content="下载" placement="top-start"
                v-if="item.Status==2||item.Status==4">
                <el-button type="success" icon="el-icon-download" circle @click="DownLoadContract(item)">
                </el-button>
              </el-tooltip>
            </td>
          </tr>
        </table>
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
          layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
        </el-pagination>
      </div>
    </template>

    <el-dialog custom-class='w500' :title="$t('objFill.v101.administrative.hetongbohui')" :visible.sync="isShowContract"
      center :before-close="closeContractDialog">
      <table class="layerTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="80" align="right">{{$t('objFill.bohuiyy')}}：</td>
          <td>
            <el-input type='textarea' v-model='auditMsg.AuditContractReason' maxlength='100'></el-input>
          </td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="closeContractDialog">{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" type="primary" @click="AuditElec">{{$t('pub.sureBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        msgOut: {
          ContractNum: '',
          ProductName: '',
          OrderID: '',
          TCID: '',
          StartDate: '',
          ReturnDate: '',
          AuditContract: 1,
          PageIndex: 1,
          PageSize: 15
        },
        dataListOut: [],
        loadingOut: false,
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.msg.returnDate == null) {
              return false;
            } else {
              let endTime = new Date(this.msg.returnDate)
              return endTime.getTime() < time.getTime()
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.msg.startDate)
            return startTime.getTime() >= time.getTime()
          }
        },
        //1-出境合同，2-其它合同
        activeName: '2',
        total: 0,
        total2: 0,
        currentPage: 1,
        currentPage2: 1,
        dataList: [],
        loading: false, //页面加载
        msg: {
          T_ContractNum: "", //合同编号
          CType: 0, //合同类型
          Tourists_Name: "", //客户名称
          Tourists_Tel: "", //客户电话
          StartDate: "", //开始日期
          EndDate: "", //结束日期
          Status: -1, //合同状态
          pageIndex: 1,
          pageSize: 15,
          TravelAgency_DealMan: "", //经办人
          C_TCNUM: "", //团号
          C_ProductName: "", //线路名称
          IsAduitPage: 1, //是否是审核页面
          IsQueryAll: 1,
          TCID: "",
          OrderId: "",
        },
        pickerBeginDateBefore2: {
          disabledDate: time => {
            if (this.msg.EndDate == null) {
              return false;
            } else {
              let endTime = new Date(this.msg.EndDate);
              return endTime.getTime() < time.getTime();
            }
          }
        },
        pickerBeginDateAfter2: {
          disabledDate: time => {
            let startTime = new Date(this.msg.StartDate);
            return startTime.getTime() >= time.getTime();
          }
        },
        isShowContract: false,
        auditMsg: {
          Id: 0, //合同编号
          AuditContract: 0, //审核状态
          AuditContractReason: "", //审核原因
        }
      };
    },
    methods: {
      //下载合同
      DownLoadContract(item) {
        let msg = {
          ID: item.ID,
          CType: item.CType
        };
        let urlObj = this.domainManager();
        this.loading = true;
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetDownLoadTripContract',
          data: {
            "msg": msg
          }
        }).then(res => {
          this.loading = false
          if (res.data.resultCode === 1) {
            let sign = item.T_ContractNum;
            const a = document.createElement('a');
            a.setAttribute('download', '');
            a.setAttribute('href', urlObj.DomainUrl + '/api/file/DownloadFileForPdf?fileName=' + sign +
              '.pdf&&fPath=' + res.data.data);
            a.click();
          } else {
            this.Error('PDF获取失败');
          }
        }).catch(err => {

        });
      },
      //出境重新查询
      resetOutQuery() {
        this.msgOut.PageIndex = 1;
        this.currentPage2 = 1;
        this.getListOutTract();
      },
      //单项、一日游、境内游合同
      resetOtherQuery() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
        this.getOtherList();
      },
      //关闭合同弹窗
      closeContractDialog() {
        this.auditMsg.Id = 0;
        this.auditMsg.AuditContract = 0;
        this.auditMsg.AuditContractReason = '';
        this.isShowContract = false;
      },
      //显示合同弹窗
      showContractDialog(item, type) {
        this.auditMsg.Id = item.Id;
        this.auditMsg.AuditContract = type;
        if (type == 2) {
          this.AuditElec();
        } else {
          this.isShowContract = true;
        }
      },
      //审核通过或者驳回
      AuditElec() {
        this.apipost("travelcontract_get_UpdateAuditContractService", this.auditMsg, res => {
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
            this.getListOutTract();
            this.closeContractDialog();
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },
      //切换
      getSwitch() {
        if (this.activeName == 1) {
          //出境合同
          this.resetOutQuery();
        } else {
          //其它合同
          this.resetOtherQuery();
        }
      },
      //跳转至详情
      goToDetail(item) {
        var path = "TravelContractDetail";
        if (item.TemplateType == 1) {
          path = "TravelContractDetailRB";
        }
        this.$router.push({
          name: path,
          query: {
            TCID: item.TCID,
            guestId: item.GuestId,
            orderID: item.OrderId,
            ID: item.Id,
            blank: "y",
          }
        });
      },
      getListOutTract() {
        this.loadingOut = true;
        this.apipost("travelcontract_post_GetContractPageListService", this.msgOut, res => {
          this.loadingOut = false;
          if (res.data.resultCode === 1) {
            this.dataListOut = res.data.data.pageData;
            this.total2 = res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        });
      },
      getDate(date) {
        return moment(date).format("YYYY-MM-DD");
      },
      //提交并盖章
      SubmitContract(item, status) {
        var that = this;
        var message = this.$t('objFill.shenhetongguo');
        if (status == 3) {
          message = this.$t('fnc.bohui');
        }
        this.Confirm(that.$t('objFill.shifou') + "【" + message + "】" + this.$t('objFill.v101.administrative.chihet') +
          "?",
          function () {
            that.apipost(
              "travelcontract_post_UpdateTravelContractStatusService", {
                ID: item.ID,
                Status: status
              },
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(res.data.message);
                  that.getOtherList();
                } else {
                  that.Error(res.data.message);
                }
              },
              err => {}
            );
          });
      },
      //单项、一日游、境内旅游合同
      getOtherList() {
        this.loading = true;
        //获取列表数据
        this.apipost(
          "travelcontract_get_GetPageListService",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;
              this.dataList.forEach(x => {
                let Url = "";
                if (this.isOnline()) {
                  Url = window.location.hostname + '/#/TravelContractConfirm?ContractId=' + x.ID;
                } else {
                  Url = window.location.hostname + ":8080/" + '#/TravelContractConfirm?ContractId=' + x.ID;
                }
                x.Url = Url;
              })
              this.total = res.data.data.count;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getOtherList();
      },
      handleOutChange(val) {
        this.msgOut.PageIndex = val;
        this.getListOutTract();
      },
      ViewContract(item) {
        this.$router.push({
          name: "TravelContractView",
          query: {
            id: item.ID,
            blank: "y",
            tab: '预览合同'
          }
        });
      },
      //其他合同盖章
      GaiZhang(ID) {
        let msg = {
          ID: ID,
          Status: 1
        }
        this.apipost("travelcontract_post_UpdateTravelContractSignatureService", msg, res => {
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
            this.getOtherList();
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //出境合同盖章
      OutGaiZhang(ID) {
        let msg = {
          ID: ID,
          Status: 1
        }
        this.apipost("travelcontract_post_UpdateContractSignatureService", msg, res => {
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
            this.getListOutTract();
          } else {
            this.Error(res.data.message);
          }
        });
      },
    },
    mounted() {
      this.getOtherList();
    }
  };

</script>