Warehouse_management_ui/src/views/finance/contrast/kaihe-index.vue

<template>
  <div>
    <!-- 列表页 -->
    <div v-if="!showDetail">
      <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-date-picker
                v-model="form.date"
                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-select
                v-model="form.fVslid"
                size="small"
                placeholder="请选择"
                style="width: 100%"
              >
                <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%"
              >
                <el-option
                  v-for="item in TVoyagefs"
                  :key="item.fId"
                  :label="item.fNo"
                  :value="item.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse-transition>
          <el-row v-if="show">
            <el-col :span="6">
              <el-form-item label="系统编号">
                <el-input
                  v-model="form.fBillno"
                  size="small"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="提单号">
                <el-input
                  v-model="form.tMblno"
                  size="small"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="起运港">
                <el-select
                  v-model="form.fLoadportid"
                  size="small"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <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%"
                >
                  <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.applyTime"
                  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-input
                  v-model="form.createBy"
                  size="small"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备注">
                <el-input
                  v-model="form.fRemarks"
                  size="small"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-transition>
      </el-form>
      <div class="head-but">
        <div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="goDetail(true)"
          >
            新增
          </el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="selectionList.length != 1"
            >修改</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >
            导出
          </el-button>
          <el-button
            type="info"
            icon="el-icon-download"
            size="mini"
            :disabled="selectionList.length != 1"
            @click="copyData"
          >
            复制新增
          </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"
        @selection-change="selectionChange"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column type="selection" width="60" />
        <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"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          min-width="200"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="rowDetail(scope.row, 0)"
            >
              查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="rowDetail(scope.row, 1)"
              :disabled="scope.row.fBillstatus > 3"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="rowDel(scope.row)"
              :disabled="scope.row.fBillstatus > 3"
            >
              删除
            </el-button>
          </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"
      />
    </div>
    <!-- 详情页 -->
    <kaihe-detail
      ref="detail"
      :showDetail="showDetail"
      @goDetail="goDetail"
      @goBack="goBack"
      @refFresh="refFresh"
    />
    <column-setting
      ref="columnSetting"
      @reset="reset"
      @getRowdata="getRowdata"
      tableName="凯和付费列表"
    />
  </div>
</template>

<script>
import { tableOption } from "./js/index";
import {
  getList,
  selectTVesself,
  selectTVoyagef,
  selectPortName,
  listCorps,
  remove,
  rowRemove,
  getExcel,
} from "@/api/finance/kaihe/contrast";
import kaiheDetail from "./kaihe-detail.vue";
import columnSetting from "@/components/ColumnSetting/index";
export default {
  data() {
    return {
      showDetail: false,
      form: {},
      show: false,
      options: [],
      tableData: [],
      tableOption: tableOption,
      selectionList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      TVesselfs: [],
      TVoyagefs: [],
      portNames: [],
      corpList: [],
      showSearch: true,
    };
  },
  components: {
    kaiheDetail,
    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;
    });
  },
  activated() {
    if (this.$route.query.data) {
      this.Jump();
    }
    this.$refs.columnSetting.getRow(this.tableOption);
  },
  methods: {
    /** 导出按钮操作 */
    handleExport() {
      this.$confirm("是否确认导出所有财务数据主数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return getExcel();
        })
        .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 == "付费金额") {
            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 prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            } else {
              sums[index] = "0";
            }
          }
        });
      }
      return sums;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    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.createTime = e.createTime ? e.createTime.slice(0, 10) : "";
        });
        this.tableData = response.rows;
        this.page.total = response.total;
        this.loading = false;
      });
    },
    refFresh() {
      this.getList();
    },
    copyData() {
      let id;
      this.selectionList.forEach((e) => {
        id = e.fId;
      });
      this.$refs.detail.copyData(id);
      this.showDetail = true;
    },
    goDetail(bool) {
      if (bool) {
        this.$refs.detail.init();
      }
      this.showDetail = bool;
    },
    goBack(bool) {
      this.getList();
      this.showDetail = bool;
    },
    rowDetail(row, status) {
      this.$refs.detail.info(row, status);
      this.showDetail = true;
    },
    rowDel(row) {
      rowRemove(row.fId).then((res) => {
        let tips = "";
        switch (res.msg) {
          case "0": {
            this.$message.error("当前数据已被其他操作员操作，请刷新页面");
            break;
          }
          case "1": {
            tips = "当前主表有数据，从表无数据，确认是否删除？";
            this.delete(row.fId, tips);
            break;
          }
          case "2": {
            tips = "当前主表有数据，从表有数据，确认是否删除？";
            this.delete(row.fId, tips);
            break;
          }
          default: {
            return this.$message.error("未知错误，无状态");
          }
        }
      });
    },
    delete(fIds, tips) {
      this.$confirm(tips, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return remove(fIds);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        });
    },
    Jump() {
      let data = JSON.parse(this.$route.query.data);
      if (data) {
        this.showDetail = true;
        this.rowDetail(data.billId, 3);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.head-but {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tabSetting {
  display: flex;
  justify-content: flex-end;
}
</style>