lemonBeans_ui/src/views/finance/otherFinancial/index.vue

<template>
  <div class="app-container">
    <div v-show="jiGang == false">
      <el-form
        :model="query"
        ref="queryForm"
        v-show="showSearch"
        label-width="88px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="参考编号" prop="fMblno">
              <el-input
                v-model="query.fMblno"
                placeholder="请输入参考编号"
                clearable
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="船名">
              <el-select
                v-model="query.fVslid"
                size="small"
                placeholder="请选择"
                style="width: 100%"
                clearable
                @change="fvslChange2"
                @clear="fvslClear2"
              >
                <el-option
                  v-for="item in TVesselfs2"
                  :key="item.fId"
                  :label="item.fName"
                  :value="item.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="航次">
              <el-select
                v-model="query.fVoyid"
                size="small"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in TVoyagefs2"
                  :key="item.fId"
                  :label="item.fNo"
                  :value="item.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display: flex; justify-content: flex-end">
            <el-form-item>
              <el-button
                type="cyan"
                icon="el-icon-search"
                size="mini"
                @click="getList"
                >搜索
              </el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!--      列设置-->
      <el-dialog
        title="提示"
        :visible.sync="showSetting"
        width="700px"
        v-dialogDrag
        append-to-body
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
            </span>
          </div>
        </template>
        <div>配置排序列数据（拖动调整顺序）</div>
        <div style="margin-left: 17px">
          <el-checkbox
            v-model="allCheck"
            label="全选"
            @change="allChecked"
          ></el-checkbox>
        </div>
        <div style="padding: 4px; display: flex; justify-content: center">
          <draggable
            v-model="setRowList"
            group="site"
            animation="300"
            @start="onStart"
            @end="onEnd"
            handle=".indraggable"
          >
            <transition-group>
              <div
                v-for="item in setRowList"
                :key="item.surface"
                class="listStyle"
              >
                <div style="width: 500px" class="indraggable">
                  <div class="progress" :style="{ width: item.width + 'px' }">
                    <el-checkbox
                      :label="item.name"
                      v-model="item.checked"
                      :true-label="0"
                      :false-label="1"
                      >{{ item.name }}
                    </el-checkbox>
                  </div>
                </div>
                <el-input-number
                  v-model.number="item.width"
                  controls-position="right"
                  :min="1"
                  :max="500"
                  size="mini"
                ></el-input-number>
              </div>
            </transition-group>
          </draggable>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showSetting = false">取 消</el-button>
          <el-button @click="delRow" type="danger">重 置</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </span>
      </el-dialog>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd()"
            v-hasPermi="['warehouseBusiness:otherFees:add']"
            >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['warehouseBusiness:otherFees:edit']"
            >修改
          </el-button>
        </el-col>
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="danger"-->
        <!--          icon="el-icon-delete"-->
        <!--          size="mini"-->
        <!--          :disabled="multiple"-->
        <!--          @click="handleDelete"-->
        <!--          v-hasPermi="['agreement:agreementTask:remove']"-->
        <!--        >删除-->
        <!--        </el-button>-->
        <!--      </el-col>-->
        <!--    <el-col :span="1.5">-->
        <!--      <el-button-->
        <!--        type="info"-->
        <!--        icon="el-icon-download"-->
        <!--        size="mini"-->
        <!--        :disabled="single"-->
        <!--        @click="handleUpdate(null, 2)"-->
        <!--        v-hasPermi="['agreement:agreementStorage:export']"-->
        <!--      >复制新增-->
        <!--      </el-button>-->
        <!--    </el-col>-->
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
        <div style="margin: 0 12px; float: right">
          <el-button
            icon="el-icon-setting"
            size="mini"
            circle
            @click="showSetting = !showSetting"
          ></el-button>
        </div>
      </el-row>
      <el-table
        v-loading="loading"
        :data="agreementList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          type="index"
          label="行号"
          align="center"
          fixed
          width="60"
        />
        <el-table-column
          v-for="(item, index) in getRowList"
          :key="index"
          :label="item.name"
          :width="item.width"
          :prop="item.label"
          header-align="center"
          :align="item.align"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          sortable
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleUpdate(scope.row)"
              >查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-if="scope.row.fBillstatus === '暂存'"
              v-hasPermi="['warehouseBusiness:otherFees:edit']"
              >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-if="scope.row.fBillstatus === '暂存'"
              v-hasPermi="['warehouseBusiness:otherFees:remove']"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-top: 10px; float: right; padding-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50, 100, 150, 200]"
          background
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div v-show="jiGang == true">
      <div style="margin-bottom: 20px">
        <el-button round icon="el-icon-arrow-left" @click="open" size="small"
          >返回列表</el-button
        >
        <el-button
          type="primary"
          round
          size="small"
          @click="submitForm"
          icon="el-icon-edit"
          >保 存</el-button
        >
        <el-button
          type="success"
          round
          size="small"
          @click="submit"
          icon="el-icon-check"
          :disabled="disabled"
          >提 交</el-button
        >
        <el-button
          type="danger"
          round
          size="small"
          icon="el-icon-close"
          @click="cancellation"
          v-hasPermi="['warehouseBusiness:otherFees:revoke']"
          v-if="queryParams.fBillstatus > 2"
          >撤销提交
        </el-button>
      </div>
      <el-form
        :model="queryParams"
        ref="rules"
        :rules="rules"
        :inline="true"
        label-width="88px"
      >
        <el-row>
          <el-form-item label="日期" prop="fBsdate">
            <el-date-picker
              v-model="queryParams.fBsdate"
              type="date"
              style="width: 200px"
              value-format="yyyy-MM-dd"
              :disabled="disabled"
              clearable
              size="small"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="参考编号" prop="fMblno">
            <el-input
              v-model="queryParams.fMblno"
              placeholder="请输入参考编号"
              style="width: 200px"
              :disabled="disabled"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="单据编号" prop="fBillno">
            <el-input
              v-model="queryParams.fBillno"
              placeholder="请输入单据编号"
              style="width: 200px"
              disabled
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="船名" v-if="sysType == 3">
            <el-select
              v-model="queryParams.fVslid"
              style="width: 200px"
              size="small"
              placeholder="请选择船名"
              filterable
              clearable
              @change="fvslChange"
              @clear="fvslClear"
            >
              <el-option
                v-for="item in TVesselfs"
                :key="item.fId"
                :label="item.fName"
                :value="item.fId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="fVoyid"
            header-align="center"
            label="航次"
            v-if="sysType == 3"
          >
            <el-select
              v-model="queryParams.fVoyid"
              size="small"
              style="width: 200px"
              placeholder="请选择航次"
              filterable
            >
              <el-option
                v-for="item in TVoyagefs"
                :key="item.fId"
                :label="item.fNo"
                :value="item.fId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="queryParams.remark"
              placeholder="请输入备注"
              :disabled="disabled"
              style="width: 796px"
              clearable
              size="small"
            />
          </el-form-item>
        </el-row>
      </el-form>

      <h3><i class="el-icon-circle-plus"></i>收款信息</h3>
      <div
        class="dialogTableTitle flex a-center jlr"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0;
        "
      >
        <div>
          <el-button
            size="small"
            type="primary"
            @click.prevent="addCollection()"
            :disabled="disabled"
            >新行
          </el-button>
          <!-- <el-button :disabled="browseStatus" @click.prevent="deleteRow(warehouseDrList)"
          >删除
        </el-button> -->
        </div>
      </div>
      <el-table
        :data="warehouseDrList"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        show-summary
        :disabled="disabled"
        :summary-method="warehouseDrSummaries"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="fCorpid"
          header-align="center"
          align="center"
          width="180px"
          label="客户名称"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fCorpid"
              filterable
              remote
              placeholder="客户名称"
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in KHblnoOptions"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="fFeeunitid"-->
        <!--          header-align="center"-->
        <!--          align="center"-->
        <!--          width="180px"-->
        <!--          label="码头"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-select-->
        <!--              style="width: 80%"-->
        <!--              v-model="scope.row.fFeeunitid"-->
        <!--              filterable-->
        <!--              :disabled="disabled"-->
        <!--            >-->
        <!--              <el-option-->
        <!--                v-for="(dict, index) in businessTypeOption"-->
        <!--                :key="index.dictValue"-->
        <!--                :label="dict.dictLabel"-->
        <!--                :value="dict.dictValue"-->
        <!--              ></el-option>-->
        <!--            </el-select>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column
          prop="fFeeid"
          header-align="center"
          align="center"
          width="180px"
          label="费用名称"
        >
          <template slot-scope="scope">
            <el-select
              style="width: 80%"
              v-model="scope.row.fFeeid"
              filterable
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in fDNameOptions"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fFeeUnitid"
          header-align="center"
          align="center"
          width="180px"
          label="计费单位"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fFeeunitid"
              placeholder="请选择计费单位"
              :disabled="disabled"
              clearable
            >
              <el-option
                v-for="dict in fFeetUnitOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="fInventoryDays"-->
        <!--          header-align="center"-->
        <!--          align="center"-->
        <!--          width="180px"-->
        <!--          label="箱型"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-select-->
        <!--              v-model="scope.row.fInventoryDays"-->
        <!--              placeholder="请选择箱型"-->
        <!--              clearable-->
        <!--              :disabled="disabled"-->
        <!--            >-->
        <!--              <el-option-->
        <!--                v-for="(dict, index) in jFeetunitOptions"-->
        <!--                :key="index.fId"-->
        <!--                :label="dict.fNo"-->
        <!--                :value="dict.fId"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          prop="fQty"
          header-align="center"
          align="center"
          width="130px"
          label="数量"
        >
          <template slot-scope="scope">
            <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fQty"
              placeholder="数量"
              @input="calculation(scope.row)"
              show-word-limit
              :disabled="disabled"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fUnitprice"
          header-align="center"
          align="center"
          width="130px"
          label="单价"
        >
          <template slot-scope="scope">
            <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fUnitprice"
              placeholder="单价"
              show-word-limit
              @input="calculation(scope.row)"
              :disabled="disabled"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fAmt"
          header-align="center"
          align="center"
          width="130px"
          label="金额"
        >
          <template slot-scope="scope">
            <el-input
              :disabled="disabled"
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fAmt"
              placeholder="金额"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fCurrency"
          header-align="center"
          align="center"
          width="130px"
          label="币别"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fCurrency"
              placeholder="请选择币别"
              :disabled="disabled"
              clearable
            >
              <el-option
                v-for="dict in currencyList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fExrate"
          header-align="center"
          align="center"
          width="130px"
          label="汇率"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fExrate"
              :disabled="disabled"
              placeholder="汇率"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          header-align="center"
          align="left"
          width="150px"
          label="备注"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.remark"
              :disabled="browseStatus || scope.row.fBillstatus == 6"
              placeholder="备注"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, warehouseDrList)"
              size="small"
              :disabled="disabled"
              >移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <h3><i class="el-icon-remove"></i>付款信息</h3>
      <div
        class="dialogTableTitle flex a-center jlr"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0;
        "
      >
        <div>
          <el-button
            type="primary"
            @click.prevent="addpayment()"
            size="small"
            :disabled="disabled"
            >新行
          </el-button>
        </div>
      </div>
      <el-table
        :data="warehouseCrList"
        :disabled="disabled"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        show-summary
        :summary-method="warehouseDrSummaries"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="fCorpid"
          header-align="center"
          align="center"
          width="180px"
          label="客户名称"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fCorpid"
              filterable
              remote
              placeholder="客户名称"
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in KHblnoOptions"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="fFeeunitid"-->
        <!--          header-align="center"-->
        <!--          align="center"-->
        <!--          width="180px"-->
        <!--          label="码头"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-select-->
        <!--              style="width: 80%"-->
        <!--              v-model="scope.row.fFeeunitid"-->
        <!--              filterable-->
        <!--              :disabled="disabled"-->
        <!--            >-->
        <!--              <el-option-->
        <!--                v-for="(dict, index) in businessTypeOption"-->
        <!--                :key="index.dictValue"-->
        <!--                :label="dict.dictLabel"-->
        <!--                :value="dict.dictValue"-->
        <!--              ></el-option>-->
        <!--            </el-select>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column
          prop="fFeeid"
          header-align="center"
          align="center"
          width="180px"
          label="费用名称"
        >
          <template slot-scope="scope">
            <el-select
              style="width: 80%"
              v-model="scope.row.fFeeid"
              filterable
              :disabled="disabled"
            >
              <el-option
                v-for="(dict, index) in fCNameOptions"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fFeeUnitid"
          header-align="center"
          align="center"
          width="180px"
          label="计费单位"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fFeeunitid"
              placeholder="请选择计费单位"
              :disabled="disabled"
              clearable
            >
              <el-option
                v-for="dict in fFeetUnitOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="fInventoryDays"-->
        <!--          header-align="center"-->
        <!--          align="center"-->
        <!--          width="180px"-->
        <!--          label="箱型"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-select-->
        <!--              v-model="scope.row.fInventoryDays"-->
        <!--              placeholder="请选择箱型"-->
        <!--              clearable-->
        <!--              :disabled="disabled"-->
        <!--            >-->
        <!--              <el-option-->
        <!--                v-for="(dict, index) in jFeetunitOptions"-->
        <!--                :key="index.fId"-->
        <!--                :label="dict.fNo"-->
        <!--                :value="dict.fId"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          prop="fQty"
          header-align="center"
          align="center"
          width="130px"
          label="数量"
        >
          <template slot-scope="scope">
            <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fQty"
              placeholder="数量"
              @input="calculation(scope.row)"
              show-word-limit
              :disabled="disabled"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fUnitprice"
          header-align="center"
          align="center"
          width="130px"
          label="单价"
        >
          <template slot-scope="scope">
            <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fUnitprice"
              placeholder="单价"
              show-word-limit
              @input="calculation(scope.row)"
              :disabled="disabled"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fAmt"
          header-align="center"
          align="center"
          width="130px"
          label="金额"
        >
          <template slot-scope="scope">
            <el-input
              :disabled="disabled"
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fAmt"
              placeholder="金额"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="fCurrency"
          header-align="center"
          align="center"
          width="130px"
          label="币别"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fCurrency"
              placeholder="请选择币别"
              :disabled="disabled"
              clearable
            >
              <el-option
                v-for="dict in currencyList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="fExrate"
          header-align="center"
          align="center"
          width="130px"
          label="汇率"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fExrate"
              :disabled="disabled"
              placeholder="汇率"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          header-align="center"
          align="left"
          width="150px"
          label="备注"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.remark"
              :disabled="browseStatus || scope.row.fBillstatus == 6"
              placeholder="备注"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <!-- <el-button size="small">审核费用</el-button> -->
            <el-button
              @click.native.prevent="deleteRow(scope.$index, warehouseCrList)"
              size="small"
              :disabled="disabled"
              >移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  listCorps,
  preservation,
  submit,
  allInformation,
  single,
  singleDeletion,
  listCorps_s,
  revokeContainerPort,
} from "@/api/otherFinancial";
import { listFees } from "@/api/basicdata/fees";
import { selectTVesself, selectTVoyagef } from "@/api/finance/kaihe/payment";
import Cookies from "js-cookie";
import { addSet, resetModule, select } from "@/api/system/set";
import draggable from "vuedraggable";

export default {
  name: "jiGang",
  components: {
    draggable,
  },
  data() {
    return {
      TVesselfs2: [],
      TVoyagefs2: [],
      rules: {
        fBsdate: [{ required: true, message: " ", trigger: "blur" }],
        fMblno: [{ required: true, message: " ", trigger: "blur" }],
      },
      showSearch: true,
      jiGang: false,
      disabled: false,
      agreementList: [],
      warehouseCrList: [],
      fCNameOptions: [],
      fFeeid_s: [],
      fStltypeOptions: [],
      jFeetunitOptions: [],
      KHblnoOptions: [],
      browseStatus: false,
      fDNameOptions: [],
      warehouseDrList: [],
      businessTypeOption: [],
      loading: true,
      blnoOptions: [],
      single: true,
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
        fVslid: null,
        fVoyid: null,
      },
      selection: [],
      queryParams: {
        fVslid: null,
        fVoyid: null,
      },
      fFeetUnitOptions: [],
      currencyList: [],
      TVesselfs: [],
      TVoyagefs: [],
      sysType: "", // 系统判断 1仓储 3凯和
      // 设置列开关
      showSetting: false,
      setRowList: [],
      getRowList: [],
      //自定义列宽
      allCheck: false,
      drag: false,
      tableDate: [
        {
          surface: "1",
          label: "fMblno",
          name: "参考编号",
          checked: 0,
          align: "center",
          width: 150,
          show: true,
        },
        {
          surface: "2",
          label: "shipsName",
          name: "船名",
          checked: 0,
          align: "center",
          width: 150,
          show: true,
        },
        {
          surface: "3",
          label: "voyage",
          name: "航次",
          checked: 0,
          align: "center",
          width: 150,
          show: true,
        },
        {
          surface: "4",
          label: "fBilltype",
          name: "单据类型",
          checked: 0,
          align: "center",
          width: 150,
          show: true,
        },
        {
          surface: "5",
          label: "fBillno",
          name: "单据编号",
          checked: 0,
          align: "center",
          width: 150,
          show: true,
        },
        {
          surface: "6",
          label: "fBsdate",
          name: "单据日期",
          checked: 0,
          align: "center",
          width: 150,
          show: true,
        },
        {
          surface: "7",
          label: "createBy",
          name: "制单人",
          checked: 0,
          align: "center",
          width: 150,
          show: true,
        },
        {
          surface: "8",
          label: "remark",
          name: "备注",
          checked: 0,
          align: "left",
          width: 150,
          show: true,
        },
      ],
    };
  },
  created() {
    this.setRowList = this.tableDate;
    this.getRowList = this.tableDate;
    this.sysType = Cookies.get("sysType");
    if (this.sysType == 1) {
      this.tableDate.forEach((item) => {
        if (item.label == "shipsName" || item.label == "voyage") {
          item.checked = 1;
          item.show = false;
        }
      });
    }
    selectTVesself().then((res) => {
      this.TVesselfs = res.rows;
    });
    selectTVoyagef().then((res) => {
      this.TVoyagefs = res.rows;
    });
    selectTVesself().then((res) => {
      this.TVesselfs2 = res.rows;
    });
    selectTVoyagef().then((res) => {
      this.TVoyagefs2 = res.rows;
    });
    this.getDicts("currency_difference").then((response) => {
      this.currencyList = response.data;
    });
    this.corpsRemoteMethod();
    //付费
    listFees({ fDc: "C" }).then((response) => {
      this.fCNameOptions = response.rows;
    });
    //收费
    listFees({ fDc: "D" }).then((response) => {
      this.fDNameOptions = response.rows;
    });
    this.getDicts("data_unitfees").then((response) => {
      this.fFeetUnitOptions = response.data;
    });
    allInformation().then((res) => {
      if (res.data.corpList) {
        this.KHblnoOptions = res.data.corpList;
      }
      if (res.data.pierList) {
        this.businessTypeOption = res.data.pierList;
      }
      if (res.data.cntrList) {
        this.jFeetunitOptions = res.data.cntrList;
      }
      if (res.data.fees) {
        this.fFeeid_s = res.data.fees;
      }
    });
    this.getRow();
    this.getList();
  },
  activated() {
    if (this.$route.query.id) {
      this.handleUpdate({ fId: this.$route.query.id });
    }
  },
  methods: {
    fvslChange(id) {
      selectTVoyagef({ fPid: id }).then((res) => {
        this.TVoyagefs = res.rows;
      });
      this.queryParams.fVoyid = null;
    },
    fvslClear() {
      selectTVoyagef().then((res) => {
        this.TVoyagefs = res.rows;
      });
      this.queryParams.fVoyid = null;
    },
    fvslChange2(id) {
      selectTVoyagef({ fPid: id }).then((res) => {
        this.TVoyagefs2 = res.rows;
      });
      this.query.fVoyid = null;
    },
    fvslClear2() {
      selectTVoyagef().then((res) => {
        this.TVoyagefs2 = res.rows;
      });
      this.query.fVoyid = null;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      this.getList();
    },
    getList() {
      listCorps_s(this.query).then((res) => {
        this.total = res.total;
        this.loading = false;
        this.agreementList = res.rows;
      });
    },
    corpsRemoteMethod(name) {
      if (name == null || name === "") {
        return false;
      }
      let queryParams = { pageNum: 1, fName: name, fTypeid: 1 };
      listCorps(queryParams).then((response) => {
        console.log(response);
        this.fMblnoOptions = response.rows;
      });
    },
    corpsRemote(name) {
      if (name == null || name === "") {
        return false;
      }
      let queryParams = { pageNum: 1, fName: name, fTypeid: 2 };
      listCorps(queryParams).then((response) => {
        console.log(response);
        this.blnoOptions = response.rows;
      });
    },
    changeFeeId(row) {
      for (let li in this.fWbuOptions) {
        if (row.fFeeid === this.fWbuOptions[li].fId) {
          this.$set(row, "fFeeunitid", this.fWbuOptions[li].fFeeunitid + "");
          this.changeFeeUnit(row);
          break;
        }
      }
    },
    resetQuery() {
      this.query = {
        pageNum: 1,
        pageSize: 10,
      };
    },
    open() {
      this.$confirm("是否确定返回列表?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.$route.query.id) {
            this.$router.push({ query: {} });
          }
          this.jiGang = false;
        })
        .catch(() => {});
    },
    handleSelectionChange(selection) {
      console.log(selection);
      this.selection = selection;
      if (selection.length === 1) {
        this.single = false;
      } else {
        this.single = true;
      }
    },
    handleUpdate(row) {
      let fId;
      if (this.selection.length == 1) {
        fId = this.selection[0].fId;
      } else {
        fId = row.fId;
      }
      single(fId).then((res) => {
        if (res.code === 200) {
          this.jiGang = true;
          this.queryParams = res.data.warehouseBills;
          this.warehouseDrList = res.data.feesDrList;
          this.warehouseCrList = res.data.feesCrList;
          for (let item in this.warehouseDrList) {
            this.warehouseDrList[item].fFeeunitid =
              this.warehouseDrList[item].fFeeunitid + "";
          }
          for (let item in this.warehouseCrList) {
            this.warehouseCrList[item].fFeeunitid =
              this.warehouseCrList[item].fFeeunitid + "";
          }
          if (this.queryParams.fBillstatus !== 2) {
            this.disabled = true;
          } else {
            this.disabled = false;
          }
        }
      });
    },
    handleDelete(row) {
      singleDeletion(row.fId).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.getList();
        }
      });
    },
    handleAdd() {
      this.jiGang = true;
      this.disabled = false;
      this.queryParams = {
        fVoyid: null,
      };
      this.warehouseDrList = [];
      this.warehouseCrList = [];
    },
    addpayment() {
      this.warehouseCrList.push({
        fCorpid: "",
        fFeeid: "",
        fFeeUnitid: "",
        fUnitprice: "",
        fAmt: "",
        fExrate: "",
        remark: "",
        fCurrency: "1",
      });
      this.fWbuOptions = [];
      let queryParams = { pageNum: 1, fDc: "C" };
      listFees(queryParams).then((response) => {
        this.fCNameOptions = response.rows;
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    submitForm() {
      this.$refs["rules"].validate((valid) => {
        if (valid) {
          let formDatae = new window.FormData();
          formDatae.append("warehouseBills", JSON.stringify(this.queryParams));
          formDatae.append("feesDr", JSON.stringify(this.warehouseDrList));
          formDatae.append("feesCr", JSON.stringify(this.warehouseCrList));
          preservation(formDatae).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("保存成功");
              this.getList();
              this.jiGang = false;
            }
          });
        }
      });
    },
    submit() {
      this.$refs["rules"].validate((valid) => {
        if (valid) {
          let formDatae = new window.FormData();
          formDatae.append("warehouseBills", JSON.stringify(this.queryParams));
          formDatae.append("feesDr", JSON.stringify(this.warehouseDrList));
          formDatae.append("feesCr", JSON.stringify(this.warehouseCrList));
          submit(formDatae).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("提交成功");
              this.getList();
              this.jiGang = false;
            }
          });
        }
      });
    },
    cancellation() {
      // let formDatae = new window.FormData()
      // formDatae.append('warehouseBills', JSON.stringify(this.queryParams))
      // formDatae.append('feesDr', JSON.stringify(this.warehouseDrList))
      // formDatae.append('feesCr', JSON.stringify(this.warehouseCrList))
      revokeContainerPort(this.queryParams.fId).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message.success("撤销成功");
          this.getList();
          this.jiGang = false;
        }
      });
    },
    calculation(row) {
      console.log(row);
      if (row.fQty && row.fUnitprice) {
        row.fAmt = Number(row.fQty) * Number(row.fUnitprice);
      }
    },
    addCollection() {
      this.warehouseDrList.push({
        fCorpid: "",
        fFeeid: "",
        fFeeUnitid: "",
        fUnitprice: "",
        fAmt: "",
        fExrate: "",
        remark: "",
        fCurrency: "1",
      });
      this.fWbuOptions = [];
      let queryParams = { pageNum: 1, fDc: "D" };
      listFees(queryParams).then((response) => {
        this.fDNameOptions = response.rows;
      });
    },
    // 付款合计
    warehouseDrSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (
          column.property === "fUnitprice" ||
          column.property === "fAmount" ||
          column.property === "fAmt"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        }
        if (column.property === "fQty") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(3);
        }
      });
      return sums;
    },

    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.setRowList.map((e) => {
          return (e.checked = 0);
        });
      } else {
        this.setRowList.map((e) => {
          return (e.checked = 1);
        });
      }
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    //重置列表
    delRow() {
      this.data = {
        tableName: "其他账务",
        userId: Cookies.get("userName"),
      };
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.setRowList = this.tableDate;
          console.log(this.setRowList);
          this.getRowList = this.tableDate;
        }
      });
    },
    //保存列设置
    save() {
      this.showSetting = false;
      this.data = {
        tableName: "其他账务",
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList,
      };
      addSet(this.data).then((res) => {
        this.getRowList = this.setRowList.filter((e) => e.checked == 0);
      });
    },
    //查询列数据
    getRow() {
      let that = this;
      this.data = {
        tableName: "其他账务",
        userId: Cookies.get("userName"),
      };
      select(this.data).then((res) => {
        if (res.data.length != 0) {
          this.getRowList = res.data.filter((e) => e.checked == 0);
          this.setRowList = res.data;
          this.setRowList = this.setRowList.reduce((res, item) => {
            res.push({
              surface: item.surface,
              label: item.label,
              name: item.name,
              checked: item.checked,
              width: item.width,
              fixed: item.fixed,
            });
            return res;
          }, []);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>