Warehouse_management_ui/src/views/reportManagement/kaihe-generalLedgerCr/index.vue

<template>
  <div>
    <!-- 列表页 -->
    <el-form ref="form" :model="form" label-width="80px" v-show="showSearch">
      <el-row>
        <el-col :span="6">
          <el-form-item label="结算单位">
            <el-select
              v-model="form.fCorpid"
              size="small"
              placeholder="请选择"
              clearable
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in corpList"
                :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="form.fVslid"
              size="small"
              placeholder="请选择"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in TVesselfs"
                :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="form.fVoyid"
              size="small"
              placeholder="请选择"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in TVoyagefs"
                :key="item.fId"
                :label="item.fNo"
                :value="item.fId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="提单号">
            <el-input
              v-model="form.fMblno"
              size="small"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-collapse-transition>
        <div v-if="show">
          <el-row>
            <el-col :span="6">
              <el-form-item label="起运港">
                <el-select
                  v-model="form.fLoadportid"
                  size="small"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in portNames"
                    :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="form.fDestportid"
                  size="small"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in portNames"
                    :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-date-picker
                  v-model="form.timeInterval"
                  type="daterange"
                  size="small"
                  placeholder="请选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核日期">
                <el-date-picker
                  v-model="form.timeExamine"
                  type="daterange"
                  size="small"
                  placeholder="请选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="费用状态">
                <el-select
                  v-model="form.fBillstatus"
                  size="small"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in fBillstatusList"
                    :key="item.fId"
                    :label="item.fName"
                    :value="item.fId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </el-form>
    <div class="head-but">
      <div>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >
          导出
        </el-button>
      </div>
      <div class="tabSetting">
        <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"
        >
          展开
        </el-button>
        <el-button
          v-show="!show"
          @click="show = !show"
          icon="el-icon-arrow-down"
          size="mini"
        >
          展开
        </el-button>
        <right-toolbar
          style="margin-left: 12px"
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
        <div style="margin: 0 12px">
          <el-button
            icon="el-icon-setting"
            size="mini"
            circle
            @click="colSetting"
          ></el-button>
        </div>
      </div>
    </div>
    <el-table :data="tableData" show-summary :summary-method="getSummaries">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column
        v-for="(item, index) in tableOption"
        :key="index"
        :label="item.name"
        :width="item.width"
        :prop="item.label"
        align="center"
        :fixed="item.fixed"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="item.label == 'shipsName'">
            {{ scope.row.shipsName }}
          </span>
          <span v-if="item.label == 'voyage'">
            {{ scope.row.voyage }}
          </span>
          <span v-if="item.label == 'unitOfAccount'">
            {{ scope.row.unitOfAccount }}
          </span>
          <span v-if="item.label == 'blNo'">
            <el-link :underline="false" type="primary"
              ><div @click="handleUpdate(scope.row, 1)">
                {{ scope.row.blNo }}
              </div></el-link
            >
          </span>
          <span v-if="item.label == 'portOfLoading'">
            {{ scope.row.portOfLoading }}
          </span>
          <span v-if="item.label == 'destination'">
            {{ scope.row.destination }}
          </span>
          <span v-if="item.label == 'sailingDate'">
            {{ scope.row.sailingDate }}
          </span>
          <span v-if="item.label == 'auditDate'">
            {{ scope.row.auditDate }}
          </span>
          <span v-if="item.label == 'receivable'">
            {{ scope.row.receivable }}
          </span>
          <span v-if="item.label == 'handle'">
            {{ scope.row.handle }}
          </span>
          <span v-if="item.label == 'profit'">
            {{ scope.row.profit }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="page.total > 0"
      :total="page.total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="getList"
    />
    <column-setting
      ref="columnSetting"
      @reset="reset"
      @getRowdata="getRowdata"
      tableName="凯和应付总账"
    />
  </div>
</template>

<script>
import { tableOption } from "./js/index";
import {
  selectTVesself,
  selectTVoyagef,
  selectPortName,
  listCorps,
} from "@/api/finance/kaihe/contrast";
import {
  getList,
  getExcel,
} from "@/api/kaihe-reportManagement/generalLedgerCr";
import Cookies from "js-cookie";
import columnSetting from "@/components/ColumnSetting/index";
export default {
  data() {
    return {
      form: {},
      show: false,
      tableData: [],
      tableOption: tableOption,
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      TVesselfs: [],
      TVoyagefs: [],
      portNames: [],
      corpList: [],
      showSearch: true,
      fBillstatusList: [
        {
          fId: 0,
          fName: "全部",
        },
        {
          fId: 1,
          fName: "未审核",
        },
        {
          fId: 2,
          fName: "审核通过",
        },
      ],
      sysType: null,
    };
  },
  components: {
    columnSetting,
  },
  created() {
    this.getList();
    selectTVesself().then((res) => {
      this.TVesselfs = res.rows;
    });
    selectTVoyagef().then((res) => {
      this.TVoyagefs = res.rows;
    });
    selectPortName().then((res) => {
      this.portNames = res.rows;
    });
    listCorps().then((res) => {
      this.corpList = res;
    });
    this.sysType = Cookies.get("sysType");
  },
  activated() {
    this.$refs.columnSetting.getRow(this.tableOption);
  },
  methods: {
    handleUpdate(row, num) {
      let res = {};
      res = {
        fMblno: row.blNo,
        num: num,
        type: "C",
      };
      this.$router.push({
        path: "/domesticTrade/orderInformation",
        query: { DC: JSON.stringify(res) },
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      let that = this;
      this.$confirm("是否确认导出所有应付总账主数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return getExcel(that.form);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    getRowdata(list) {
      this.tableOption = list;
    },
    reset() {
      this.tableOption = this.$options.data().tableOption;
    },
    colSetting() {
      this.$refs.columnSetting.init(this.tableOption);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      if (data.length > 0) {
        columns.forEach((column, index) => {
          if (index == 0) {
            sums[index] = "合计";
          }
          if (
            column.label == "应付金额" ||
            column.label == "实付金额" ||
            column.label == "未付金额"
          ) {
            const values = data.map((item) => Number(item[column.property]));
            if (!values.every((value) => isNaN(value))) {
              if (this.sysType == 3) {
                sums[index] =
                  Number(
                    values.reduce((prev, curr) => {
                      const value = Number(curr);
                      if (!isNaN(value)) {
                        return prev + curr;
                      } else {
                        return prev;
                      }
                    }, 0)
                  ).toFixed(2) + "元";
              } else {
                sums[index] =
                  Number(
                    values.reduce((prev, curr) => {
                      const value = Number(curr);
                      if (!isNaN(value)) {
                        return prev + curr;
                      } else {
                        return prev;
                      }
                    }, 0) / 10000
                  ).toFixed(2) + "万";
              }
            } else {
              sums[index] = "0";
            }
          }
        });
      }
      return sums;
    },
    handleQuery() {
      this.page.pageNum = 1;
      if (this.form.date) {
        this.form.fFromDate = this.form.date[0];
        this.form.fToDate = this.form.date[1];
      }
      this.getList();
    },
    resetQuery() {
      this.form = this.$options.data().form;
    },
    getList() {
      const data = {
        ...this.form,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      };
      getList(data).then((response) => {
        response.rows.forEach((e) => {
          e.sailingDate = e.sailingDate ? e.sailingDate.slice(0, 10) : "";
        });
        response.rows.forEach((e) => {
          e.auditDate = e.auditDate ? e.auditDate.slice(0, 10) : "";
        });
        this.tableData = response.rows;
        this.page.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.head-but {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tabSetting {
  display: flex;
  justify-content: flex-end;
}
</style>