﻿<template>
  <div>
    <EMSTable
      ref="listTable"
      @on-selection-change="handle_sel_table"
      :server="server"
      :columnsFn="getColumnsFun"
      :params="searchParams"
      action="find"
      v-if="searchParams.receivablesSource"
    >
      <div slot="search-bar">
        <SearchFormItem ref="searchItem" :elItem="searchParams"></SearchFormItem>
      </div>
      <div slot="handle-bar">
        <Button @click.native="search()" type="warning" icon="search">查询</Button>
        <Button @click.native="reset" type="info" icon="loop">重置</Button>
      </div>
      <div slot="table-bar">
        <Button type="warning" icon="plus-round" @click="addItem" v-if="!isExcelImport">新增</Button>
        <Button type="info" icon="arrow-up-a" @click="importItem" v-if="isExcelImport">Excel导入</Button>
        <Button
          type="error"
          :disabled="this.ids.length <= 0"
          icon="checkmark-circled"
          @click="confirmItem"
        >确认</Button>
        <Button type="success" @click.native="exportResult" icon="arrow-down-a">查询结果导出</Button>
      </div>
    </EMSTable>
  </div>
</template>

<script>
import { EMSTable } from "ems-components";

import SearchFormItem from "../receivableComponent/searchFormItem";
import TableConfig from "../receivableComponent/tableConfig.js";
import ImportFile from "./importFile.vue";
import ManuallyAddEditPage from "./edit.vue";
import DeleteReceivable from "./delete.vue";
import Server from "./server.js";
import { exportFile } from "../receivableComponent/exportFile.js";
import ExcelExport from "../receivableComponent/excelExportPreview";
const server = new Server();
let vm;
export default {
  name: "ManuallyAddIndexPage",
  components: {
    EMSTable,
    
    SearchFormItem,
    DeleteReceivable
  },
  data() {
    return {
      server: server,
      searchParams: {
        compCode: "", // 收款单位 t_md_bank 弹出选择
        receivablesBankNum: "", // 收款账号 弹出选择
        paymentCompName: "", // 付款单位 输入
        paymentBankNum: "", // 付款账号 输入
        currencyCode: "", // 收款币种 值集
        // paymentTypeCode: "", // 收款方式 值集
        paymentTypeCodeFilter: "", //过滤转账收款方式
        updatedByName: "", //操作人
        receivablesSource: "", // 收款来源 值集
        receivablesNum: "", //收款单号 输入
        _amount: "", //收款金额
        receivablesStartAmount: "", // 收款开始金额 输入
        receivablesEndAmount: "", // 收款结束金额输入
        _date: "", //收款日期
        receivablesStartDate: "", // 收款日期 收款开始日期，格式为“2018-12-12”
        receivablesEndDate: "", //   收款结束日期，格式为“2018-12-12”
        // "resourceCode":window.location.hash.substring(window.location.hash.lastIndexOf("\/")+1),//菜单code
        // _status:true,//收款状态
        receivablesStatus: 1, // 收款状态 值集 status:true 用来表示是否需要显示收款状态select
        bankSerialNumber: "", //流水号
        receivablesRelLineNumber: ""
      },
      ids: [],
      isExcelImport: false
    };
  },
  computed: {},
  created: function() {
    vm = this;
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    //添加
    addItem() {
      new this.$sidelipPage(
        ManuallyAddEditPage,
        {
          props: {
            full: false,
            isNav: true
          }
        },
        data => {
          if (data) {
            this.search();
          }
        }
      );
    },
    edit(row) {
      new this.$sidelipPage(
        ManuallyAddEditPage,
        {
          props: {
            full: false,
            isNav: true,
            detail: row
          }
        },
        data => {
          if (data) {
            this.search();
          }
        }
      );
    },
    remove(row) {
      if (row.receivablesRelLineNumber != "" && row.receivablesRelLineNumber != null) {
        new this.$pageModal(
          DeleteReceivable,
          {
            props: {
              title: "删除手工新增收款",
              data: row
            }
          },
          data => {
            this.search();
          }
        );
      } else {
        this.$Modal.confirm({
          title: "删除提示",
          content: "<p>确定要删除该记录嘛？</p>",
          "ok-text": "确定",
          "cancel-text": "取消",
          loading: true,
          onOk: async () => {
            let data = await this.server.del(row.receivablesId);
            if (data.statusCode === "-1") {
              this.$Message.error(data.msg);
            } else {
              this.$Message.success("删除成功");
              this.search(); //  刷新数据列表
            }
            this.$Modal.remove();
          },
          onCancel: () => {}
        });
      }
    },
    /**
     * 查询结果导出
     */
    exportResult() {
      //选择导出列
      new this.$pageModal(
        ExcelExport,
        {
          props: {
            title: "选择导出列",
            businessType: "receivableBase"
          }
        },
        async data => {
          if (!data) return;
          let selectColunms = data.selectColunms || [];
          let selectData = data.selectData || [];
          //导出请求参数
          let resData = {
            searchParams: this.searchParams,
            selectColunms: selectColunms,
            selectData: selectData,
            businessType: "receivableBase",
            businessName: "手工增加收款列表导出",
            businessUrl: "receivableService.exportReceivableBaseSearch"
          };
          //返回结果
          let result = await this.server.exportResult(resData);
          if (result.statusCode === "-1") {
            this.$Message.error(result.msg);
          } else {
            exportFile(result, "手工增加收款列表导出");
          }
        }
      ); //end pageModal
    },
    /**
     * 收款信息导入
     */
    importItem() {
      new this.$sidelipPage(
        ImportFile,
        {
          props: {
            full: false,
            isNav: true,
            title: "收款导入"
          }
        },
        data => {
          if (data) {
            this.search();
            this.$nextTick(() => {});
          }
        }
      );
    },
    //确认
    confirmItem() {
      this.$Modal.confirm({
        title: "确认提交提示",
        content: `<p>确认提交当前选择的${this.ids.length}项记录嘛？</p>`,
        loading: true,
        "ok-text": "确定",
        "cancel-text": "取消",
        onOk: async () => {
          //后台业务需要，修改id 遍历改为数组对象方式封装
          let param = this.ids.map(item => {
            return {
              receivablesId: item,
              receivablesStatus: 2
            };
          });
          let data = await this.server.modify(param);
          if (data.statusCode === "-1") {
            this.$Message.error(data.msg);
          } else {
            this.search();
            this.$Message.success("提交成功");
          }
          this.$Modal.remove();
        }
      });
    },
    /**
     * 搜索方法
     */
    search(page = 1) {
      //获取 from 值信息，然后查找数据
      this.searchParams = this.$refs["searchItem"].searchForm;
      this.$refs["listTable"].load(this.searchParams, page);
    },
    /**
     * 重置
     */
    reset() {
      //控制 searchItem 组件的reset 方法
      this.$refs["searchItem"].reset();
      //重新加载首页数据
      this.search(1);
    },
    //选择表格中的某些项
    handle_sel_table(selection) {
      if (selection.length > 0) {
        this.ids = selection.map(item => item.receivablesId);
      } else {
        this.ids = [];
      }
    },
    /**
     * 首页表格列头生成方法
     * 根据表头文字(arr)数组，去配置中加载（getColumns），
     * 随后根据需求在相应位置 (splice) 增加一些操作列
     */
    getColumnsFun() {
      let arr = [
        "原收款单号",
        "收款单位",
        "收款账号",
        "付款单位",
        "付款账号",
        "收款金额",
        "收款币种",
        "手续费",
        "收款日期",
        "操作人",
        "manuallyAdd收款状态",
        "收款来源",
        "收款方式",
        "流水号",
        "关联收款单号",
        "附件"
      ];
      let columns = new TableConfig(this, arr).getColumns();
      columns.splice(0, 0, {
        title: "操作",
        key: "action",
        width: 120,
        align: "center",
        fixed: "left",
        render: (h, params) => {
          let actionData = [];
          if (params.row.receivablesRelLineNumber != "" && params.row.receivablesRelLineNumber != null) {
            actionData = [
              {
                text: "删除",
                handle: () => {
                  this.remove(params.row);
                }
              }
            ];
          } else {
            actionData = [
              {
                text: "编辑",
                handle: () => {
                  this.edit(params.row);
                }
              },
              {
                text: "删除",
                handle: () => {
                  this.remove(params.row);
                }
              }
            ];
          }
          return h("RowTools", {
            props: {
              data: actionData
            }
          });
        }
      });
      columns.splice(0, 0, {
        type: "selection",
        width: 45,
        fixed: "left",
        align: "center"
      });
      return columns;
    }
  },
  watch: {},
  directives: {},
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to.name === "rv-manually-excel-import") {
        vm.isExcelImport = true;
        vm.searchParams.receivablesSource = "2";
      } else {
        vm.isExcelImport = false;
        vm.searchParams.receivablesSource = "1";
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    this.searchParams.receivablesSource = "";
    next();
  }
};
</script>

<style>
</style>
