Smart_platform_ui/src/views/statisticAnalysis/profitGeneralLedger/index.vue

<template>
  <div class="app-container">
    <basic-container>
      <avue-crud
          ref="crud"
          :option="option"
          :data="receivableList"
          :search.sync="queryParams"
          @resetColumn="resetColumn('crud','option','optionList',181)"
          @saveColumn="saveColumn('crud','option','optionList',181)"
      >
        <template slot="menuLeft">
          <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['warehouseBusiness:profit:export']"
          >导出
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <span v-if="false">
      <div v-if="login == 3">
        <kaihe-profitGeneralLedger/>
      </div>
      <div v-else>
        <el-form
            :model="queryParams"
            ref="queryForm"
            v-show="showSearch"
            label-width="80px"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="客户" prop="corpid">
                <el-select
                    v-model="queryParams.corpid"
                    filterable
                    remote
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    :remote-method="corpsRemoteMethod"
                    placeholder="请选择客户"
                >
                  <el-option
                      v-for="(dict, index) in mblnoOptions"
                      :key="index.id"
                      :label="dict.name"
                      :value="dict.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="提单号" prop="mblno">
                <el-input
                    v-model="queryParams.mblno"
                    placeholder="请输入提单号"
                    clearable
                    size="small"
                    style="width: 200px"
                    @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核区间" prop="timeExamine">
                <!--          如果需要固定某一年加 :picker-options="pickerOptions0"-->
                <el-date-picker
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    v-model="queryParams.timeExamine"
                    value-format="yyyy-MM"
                    unlink-panels
                    :clearable="false"
                    style="width: 200px"
                    @keyup.enter.native="handleQuery"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="货物名称" prop="productName">
                <el-select
                    v-model="queryParams.productName"
                    filterable
                    remote
                    clearable
                    size="small"
                    :remote-method="goodsRemoteMethod"
                    @keyup.enter.native="handleQuery"
                    placeholder="请选择货物名称"
                >
                  <el-option
                      v-for="(dict, index) in goodsOptions"
                      :key="index.id"
                      :label="dict.name"
                      :value="dict.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="show">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="品牌" prop="marks">
                    <el-input
                        v-model="queryParams.marks"
                        placeholder="请输入品牌"
                        clearable
                        size="small"
                        style="width: 200px"
                        @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="结算状态" prop="reconciliation">
                    <el-select
                        v-model="queryParams.reconciliation"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    >
                      <el-option label="未收" value="0"/>
                      <el-option label="全部" value="1"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="费用状态" prop="billstatus">
                    <el-select
                        v-model="queryParams.billstatus"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    >
                      <el-option label="录入" value="0"/>
                      <el-option label="审核通过" value="1"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="作业类型" prop="businessType">
                    <el-select
                        multiple
                        v-model="queryParams.businessType"
                        filterable
                    >
                      <el-option
                          v-for="(dict, index) in businessTypeOption"
                          :key="index.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="费用名称" prop="feeid">
                    <el-select
                        multiple
                        :remote-method="wRemoteMethod"
                        v-model="queryParams.feeid"
                        filterable
                    >
                      <el-option
                          v-for="(dict, index) in wbuOptions"
                          :key="index.id"
                          :label="dict.name"
                          :value="dict.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="审核状态">
                    <el-select
                        v-model="queryParams.billProfits"
                        placeholder="请选择状态"
                        clearable
                        size="small"
                        filterable
                    >
                      <el-option label="全部" :value="1"></el-option>
                      <el-option label="待审" :value="4"></el-option>
                      <el-option label="审核通过" :value="6"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="业务员" prop="salesmanId">
                    <el-select
                        v-model="queryParams.salesmanId"
                        clearable
                        filterable
                        placeholder="请选择业务员"
                    >
                      <el-option
                          v-for="(item, index) in salesmanOption"
                          :key="index.userId"
                          :label="item.userName"
                          :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="客户分组">
                    <el-select
                        v-model="queryParams.groupBy"
                        filterable
                        placeholder="请选择"
                    >
                      <el-option
                          label="是"
                          :value="1"
                      ></el-option>
                      <el-option
                          label="否"
                          :value="0"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="船名" prop="vslid" v-if="sysType == 3">
                    <el-select
                        v-model="queryParams.vslid"
                        placeholder="请选择船名"
                        clearable
                        size="small"
                        filterable
                    >
                      <el-option
                          v-for="item in vesselOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="航次" prop="voyid" v-if="sysType == 3">
                    <el-select
                        v-model="queryParams.voyid"
                        placeholder="请选择航次"
                        clearable
                        size="small"
                        filterable
                    >
                      <el-option
                          v-for="item in voyageOptions"
                          :key="item.id"
                          :label="item.no"
                          :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
          <!--      <el-form-item label="结算单位" prop="toCorpid">-->
          <!--        <el-select-->
          <!--          v-model="queryParams.toCorpid"-->
          <!--          placeholder="请选择结算单位"-->
          <!--          filterable-->
          <!--          remote-->
          <!--          clearable-->
          <!--          style="width: 200px"-->
          <!--          size="small"-->
          <!--          @keyup.enter.native="handleQuery"-->
          <!--          :remote-method="corpsRemoteMethod"-->
          <!--        >-->
          <!--          <el-option-->
          <!--            v-for="(dict, index) in mblnoOptions"-->
          <!--            :key="index.id"-->
          <!--            :label="dict.name"-->
          <!--            :value="dict.id"-->
          <!--          ></el-option>-->
          <!--        </el-select>-->
          <!--      </el-form-item>-->
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
                type="warning"
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['warehouseBusiness:profit:export']"
            >导出
            </el-button>
          </el-col>
          <div class="tabSetting">
            <div style="margin-right: 20px">
              <el-button
                  type="cyan"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
              >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
              >
              <el-button
                  v-show="show"
                  @click="show = !show"
                  icon="el-icon-arrow-up"
                  size="mini"
                  style="border: 1px dashed #afaeae"
              >展开</el-button
              >
              <el-button
                  v-show="!show"
                  @click="show = !show"
                  icon="el-icon-arrow-down"
                  size="mini"
                  style="border: 1px dashed #afaeae"
              >展开</el-button
              >
            </div>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
            <div style="margin: 0 12px">
              <el-button
                  icon="el-icon-setting"
                  size="mini"
                  circle
                  @click="showSetting = !showSetting"
              ></el-button>
            </div>
          </div>
        </el-row>
        <el-dialog title="自定义列显示" :visible.sync="showSetting" width="700px">
          <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-table
            v-loading="loading"
            :data="receivableList"
            show-summary
            :summary-method="getSum"
            @expand-change="expandChange"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column type="expand" fixed="left" v-if="sysType == 3">
            <template slot-scope="props">
              <el-table :data="props.row.dataList" v-loading="props.row.loading">
                <el-table-column
                    label="客户名称"
                    prop="corpid"
                    align="center"
                    show-overflow-tooltip
                    width="180"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.corpid | nameFormat(nameOptions) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="费用名称"
                    prop="feeid"
                    align="center"
                    show-overflow-tooltip
                    width="100"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.dc == 'D'">
                      {{ scope.row.feeid | dNameFormat(dNameOptions) }}
                    </span>
                    <span v-if="scope.row.dc == 'C'">
                      {{ scope.row.feeid | dNameFormat(cNameOptions) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="计价单位"
                    prop="feeunitid"
                    align="center"
                    show-overflow-tooltip
                    width="100"
                >
                  <template slot-scope="scope">
                    <span>{{
                        scope.row.feeunitid | jFeetunitFormat(jFeetunitOptions)
                      }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="数量"
                    prop="qty"
                    align="center"
                    show-overflow-tooltip
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    label="单价"
                    prop="unitprice"
                    align="center"
                    show-overflow-tooltip
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    label="金额"
                    prop="amount"
                    align="center"
                    show-overflow-tooltip
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    label="收付"
                    prop="dc"
                    align="center"
                    show-overflow-tooltip
                    width="100"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.dc == 'D'">收款</span>
                    <span v-if="scope.row.dc == 'C'">付款</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column type="index" label="行号" align="center" width="100"/>
          <el-table-column
              v-for="(item, index) in getRowList"
              :key="index"
              :label="item.name"
              :width="item.width"
              :prop="item.label"
              align="center"
              :show-overflow-tooltip="true"
              sortable
              :fixed="item.fixed"
          />
          <!-- <el-table-column label="货权方" sortable align="center" prop="name" width="220"/>
        <el-table-column label="结算单位" sortable align="center" prop="feesName" width="220"/>
        <el-table-column label="提单号" sortable align="center" prop="mblno" width="216" show-overflow-tooltip/>
        <el-table-column label="货物名称" align="center" prop="productName" show-overflow-tooltip/>
        <el-table-column label="品牌" align="center" prop="marks" width="120"/>
        <el-table-column label="审核日期" align="center" prop="reviewDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.reviewDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应收金额" align="center" prop="amount"/>
        <el-table-column label="应付金额" align="center" prop="stlamount"/>
        <el-table-column label="利润" align="center" prop="nnfinished"/> -->
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :page-sizes="[50, 100, 200, 500, 1000]"
            @pagination="getList"
        />
      </div>
    </span>
  </div>
</template>

<script>
// import {
//   listpayable,
//   listWhgenleg,
//   getWhgenleg,
//   delWhgenleg,
//   addWhgenleg,
//   updateWhgenleg,
//   exportWhgenleg,
//   selectListDC,
// } from "@/api/reportManagement/profit";
// import { listWarehouse } from "@/api/basicdata/warehouse";
// import { listArea } from "@/api/basicdata/area";
// import { listGoods } from "@/api/basicdata/goods";
// import { listCorps } from "@/api/basicdata/corps";
// import { listFees } from "@/api/basicdata/fees";
// import { addSet, select, resetModule } from "@/api/system/set";
import Cookies from "js-cookie";
import draggable from "vuedraggable";
// import { getVesselName } from "@/api/finance/applyForInvoice/chargeInvoice";
// import { getVoyageName } from "@/api/finance/applyForInvoice/feeDetail";
// import { getFName } from "@/api/kaihe/domesticTrade/orderInformation";
// import { selectUserByRole } from "@/api/basicdata/warehouse";
// import kaiheProfitGeneralLedger from "../kaihe-profitGeneralLedger/index.vue";
export default {
  name: "profitGeneralLedger",
  components: {
    draggable,
    // kaiheProfitGeneralLedger
  },
  data() {
    return {
      option: {},
      optionList: {
        border: true,
        align: 'center',
        stripe: true,
        index: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        height: "auto",
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        highlightCurrentRow: true,
        column: [
          {
            index: "1",
            prop: "name",
            label: "客户",
            width: 150,
          },
          // {
          //   index: "2",
          //   prop: "feesName",
          //   label: "结算单位",
          //   width: 120,
          // },
          {
            index: "3",
            prop: "mblno",
            label: "提单号",
            width: 150,
          },
          {
            index: "3",
            prop: "reviewDate",
            label: "年月",
            width: 150,
          },
          {
            index: "4",
            prop: "productName",
            label: "货物名称",
            width: 150,
          },
          {
            index: "5",
            prop: "marks",
            label: "品牌",
            width: 150,
          },
          {
            index: "6",
            prop: "reviewDate",
            label: "审核日期",
            width: 150,
          },
          {
            index: "7",
            prop: "amount",
            label: "应收金额",
            width: 120,
          },
          {
            index: "8",
            prop: "stlamount",
            label: "应付金额",
            width: 120,
          },
          {
            index: "9",
            prop: "nnfinished",
            label: "利润",
            width: 120,
          }, {
            index: "999",
            prop: "corpid",
            label: "客户",
            width: 120,
            hide: true,
            showColumn: false,
            search: true,
          }, {
            index: "999",
            prop: "mblno",
            label: "提单号",
            width: 120,
            hide: true,
            showColumn: false,
            search: true,
          }, {
            index: "999",
            prop: "timeExamine",
            label: "审核区间",
            unlinkPanels: true,
            searchRange: true,
            width: 120,
            hide: true,
            showColumn: false,
            type: "monthrange",
            search: true,
          }, {
            index: "999",
            prop: "productName",
            label: "货物名称",
            width: 120,
            hide: true,
            showColumn: false,
            search: true,
          },
        ]
      },
      show: false,
      login: Cookies.get("sysType"),
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      selectDate: null, // 时间选择后
      pickerOptions0: {
        disabledDate: time => {
          if (this.selectDate == null) {
            return false
          } else {
            return (this.selectDate.getFullYear() != time.getFullYear())
          }
        },
        onPick: date => {
          // 如果只选择一个则保存至selectDate 否则selectDate 为空
          if (date.minDate && !date.maxDate) {
            this.selectDate = date.minDate
          } else {
            this.selectDate = null
          }
        }
      },
      //费用名称
      wbuOptions: [],
      businessInTypeOption: [],
      businessOutTypeOption: [],
      businessTransTypeOption: [],
      businessTypeOption: [],
      salesmanOption: [],
      // 货权方(客户数据)
      mblnoOptions: [],
      // 贸易方式(数据字典),对应t_trademodels 字典
      trademodeidOptions: [],
      // 货物
      goodsOptions: [],
      // 仓库(仓库数据)
      warehouseOptions: [],
      kqhouseOptions: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 库存总账表格数据
      receivableList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        corpid: null,
        mblno: null,
        timeExamine: null,
        toCorpid: null,
        productName: null,
        marks: null,
        reconciliation: null,
        billstatus: null,
        businessType: null,
        feeid: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        marks: [{required: true, message: "唛头不能为空", trigger: "blur"}],
      },
      showSetting: false,
      drag: false,
      setRowList: [],
      getRowList: [],
      tableDate: [
        {
          surface: "1",
          label: "name",
          name: "客户",
          checked: 0,
          width: 150,
        },
        // {
        //   surface: "2",
        //   label: "feesName",
        //   name: "结算单位",
        //   checked: 0,
        //   width: 120,
        // },
        {
          surface: "3",
          label: "mblno",
          name: "提单号",
          checked: 0,
          width: 150,
        },
        {
          surface: "3",
          label: "reviewDate",
          name: "年月",
          checked: 0,
          width: 150,
        },
        {
          surface: "4",
          label: "productName",
          name: "货物名称",
          checked: 0,
          width: 150,
        },
        {
          surface: "5",
          label: "marks",
          name: "品牌",
          checked: 0,
          width: 150,
        },
        {
          surface: "6",
          label: "reviewDate",
          name: "审核日期",
          checked: 0,
          width: 150,
        },
        {
          surface: "7",
          label: "amount",
          name: "应收金额",
          checked: 0,
          width: 120,
        },
        {
          surface: "8",
          label: "stlamount",
          name: "应付金额",
          checked: 0,
          width: 120,
        },
        {
          surface: "9",
          label: "nnfinished",
          name: "利润",
          checked: 0,
          width: 120,
        },
      ],
      allCheck: false,
      // 船名
      vesselOptions: [],
      // 航次
      voyageOptions: [],
      sysType: "",
      nameOptions: [],
      dNameOptions: [],
      cNameOptions: [],
      jFeetunitOptions: [],
    };
  },
  filters: {
    nameFormat(row, nameOptions) {
      let name;
      nameOptions.map((e) => {
        if (row == e.id) {
          name = e.name;
        }
      });
      return name;
    },
    dNameFormat(row, dNameOptions) {
      let name;
      dNameOptions.map((e) => {
        if (row == e.id) {
          name = e.name;
        }
      });
      return name;
    },
    cNameFormat(row, cNameOptions) {
      let name;
      cNameOptions.map((e) => {
        if (row == e.id) {
          name = e.name;
        }
      });
      return name;
    },
    jFeetunitFormat(row, jFeetunitOptions) {
      let label;
      jFeetunitOptions.map((e) => {
        if (row == e.dictValue) {
          label = e.dictLabel;
        }
      });
      return label;
    },
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(181), this.optionList);
    this.$set(this.queryParams, 'groupBy', 1)
    this.sysType = Cookies.get("sysType");
    this.setRowList = this.tableDate;
    this.getRowList = this.tableDate;
    this.vessleRemthod();
    this.voyageRemthods();
    /* 远程模糊查询费用名称 */
    this.wRemoteMethod();
    let this_ = this;
    this_.getList();
    this_.getDicts("data_trademodes").then((response) => {
      this_.trademodeidOptions = response.data;
    });
    this_.getDicts("st_in_type").then((response) => {
      this_.businessInTypeOption = response.data;
      this_.getDicts("st_out_type").then((response) => {
        this_.businessOutTypeOption = response.data;
        this_.getDicts("st_trans_type").then((response) => {
          this_.businessTransTypeOption = response.data;
          this_.merge(
              this_.businessOutTypeOption,
              this_.businessInTypeOption,
              this_.businessTransTypeOption
          );
        });
      });
    });
    let queryParams = {pageNum: 1, dc: "C"};
    listFees(queryParams).then((response) => {
      this.cNameOptions = response.rows;
    });
    let query = {pageNum: 1, dc: "D"};
    listFees(query).then((response) => {
      this.dNameOptions = response.rows;
    });
    // 获取客户名称下拉
    getFName(queryParams).then((response) => {
      this.nameOptions = response.data;
    });
    // 业务员获取
    selectUserByRole().then((res) => {
      this.salesmanOption = res.rows;
    });
    this.getDicts("data_unitfees").then((response) => {
      if (response.data) {
        this.jFeetunitOptions = response.data;
      }
    });
    this.getRow();
    if (this.sysType == 3) {
      this.tableDate.push(
          {
            surface: "10",
            label: "vslid",
            name: "船名",
            checked: 0,
            width: 200,
          },
          {
            surface: "11",
            label: "voyid",
            name: "航次",
            checked: 0,
            width: 200,
          }
      );
    }
  },
  mounted() {
  },
  methods: {
    //自定义列保存
    async saveColumn(ref, option, optionBack, code) {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.setRowList.map((e) => {
          return (e.checked = 0);
        });
      } else {
        this.setRowList.map((e) => {
          return (e.checked = 1);
        });
      }
    },
    //查询列数据
    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;
          }, []);
        }
      });
    },
    delRow() {
      this.data = {
        tableName: "利润总账",
        userId: Cookies.get("userName"),
      };
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.setRowList = this.tableDate;
          this.getRowList = this.tableDate;
        }
      });
    },
    //保存列设置
    save() {
      this.showSetting = false;
      this.data = {
        tableName: "利润总账",
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList,
      };
      addSet(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.getRowList = this.setRowList.filter((e) => e.checked == 0);
        }
      });
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    getSum(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
        } else if (column.label == '应收金额' || column.label == '应付金额' || column.label == '利润') {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr)).toFixed(2);
              } else {
                return Number(prev).toFixed(2);
              }
            }, 0);
          }
        }
      });
      return sums;
    },

    // 贸易方式(数据字典),对���t_trademodels 字典翻译
    trademodeidFormat(row, column) {
      return this.selectDictLabel(this.trademodeidOptions, row.trademodeid);
    },
    /* 远程模糊查询仓库 */
    warehouseRemoteMethod(name) {
      if (name == null || name === "") {
        return false;
      }
      let queryParams = {pageNum: 1, pageSize: 10, name: name};
      listWarehouse(queryParams).then((response) => {
        this.warehouseOptions = response.rows;
      });
    },
    /* 远程模糊查询费用名称 */
    wRemoteMethod(name) {
      // if (name == null || name === "") {
      //   return false;
      // }
      let queryParams = {pageNum: 1, name: name};
      console.log(queryParams);
      listFees(queryParams).then((response) => {
        this.wbuOptions = response.rows;
        console.log(response);
      });
    },
    /* 远程模糊查询库区 */
    kqhouseRemoteMethod(name) {
      if (name == null || name === "") {
        return false;
      }
      if (!this.queryParams.warehouseid) {
        this.$message.error("请输入仓库!");
        return false;
      }

      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        warehouseid: this.queryParams.warehouseid,
        name: name,
      };
      listArea(queryParams).then((response) => {
        this.kqhouseOptions = response.rows;
      });
    },
    /* 远程模糊查询商品 */
    goodsRemoteMethod(name) {
      if (name == null || name === "") {
        return false;
      }
      let queryParams = {pageNum: 1, pageSize: 10, name: name};
      listGoods(queryParams).then((response) => {
        this.goodsOptions = response.rows;
      });
    },
    /* 远程模糊查询用户 */
    corpsRemoteMethod(name) {
      if (name == null || name === "") {
        return false;
      }
      let queryParams = {pageNum: 1, pageSize: 10, name: name};
      listCorps(queryParams).then((response) => {
        this.mblnoOptions = response.rows;
        this.KHblnoOptions = response.rows;
      });
    },
    merge(index, list, err) {
      this.businessTypeOption = this.businessTypeOption.concat(
          index,
          list,
          err
      );
    },
    /** 查询库存总账列表 */
    getList() {
      this.loading = true;
      this.getDicts("approval_process").then((response) => {
        this.options = response.data;
      });
      listpayable(this.queryParams).then((response) => {
        this.receivableList = response.rows;
        this.total = response.total;
        if (this.sysType == 3) {
          this.receivableList.forEach((item) => {
            this.$set(item, "dataList", []);
            this.$set(item, "loading", true);
          });
        }
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        accyear: null,
        id: null,
        accmonth: null,
        corpid: null,
        mblno: null,
        originalbillno: null,
        warehouseLocationid: null,
        goodsid: null,
        trademodeid: null,
        preqty: null,
        pregrossweight: null,
        prenetweight: null,
        qtyd: null,
        volumnd: null,
        grossweightd: null,
        netweightd: null,
        volumnc: null,
        qtyc: null,
        qtyblc: null,
        grossweightc: null,
        netweightc: null,
        grossweightblc: null,
        netweightblc: null,
        cntrno: null,
        status: "0",
        delFlag: null,
        createBy: null,
        marks: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
    },
    // 搜索重置
    resetQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        corpid: null,
        mblno: null,
        timeExamine: null,
        toCorpid: null,
        productName: null,
        marks: null,
        reconciliation: null,
        billstatus: null,
        businessType: null,
        feeid: null,
        groupBy: 1,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm('queryForm')
      this.resetQueryParams();
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加库存总账";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.accyear != null) {
            updateWhgenleg(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWhgenleg(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有利润总账数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(function () {
            return exportWhgenleg(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          });
    },
    //获取船名
    vessleRemthod() {
      getVesselName().then((response) => {
        this.vesselOptions = response.rows;
      });
    },
    // 获取航次
    voyageRemthods() {
      getVoyageName().then((response) => {
        this.voyageOptions = response.rows;
      });
    },
    // 表格展开
    expandChange(row, index) {
      console.log(row.mblno);
      if (row.loading == true) {
        selectListDC(row.mblno).then((res) => {
          row.dataList = res.data;
          row.loading = false;
        });
      }
    },
  },
};
</script>
<style lang="scss">
.tabSetting {
  display: flex;
  justify-content: flex-end;
}

.listStyle {
  display: flex;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}

.listStyle:last-child {
  border-bottom: 1px solid #dcdfe6;
}

.progress {
  display: flex;
  align-items: center;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  height: 100%;
}
</style>