MoneyTable.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-06-13 15:40:04
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-06-13 17:37:46
 * @FilePath: /precision-effect-web/src/views/account/component/table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 交易项目、卖方、申请人、买方、买方经办人、应付/应收金额 -->
    <el-table :data="tableData" v-loading="moneyLoading">
      <el-table-column
        label="交易项目"
        align="center"
        prop="projectName"
        :formatter="formatter"
      />
      <el-table-column label="卖方部门" align="center" prop="applyDeptName" />
      <el-table-column label="申请人" align="center" prop="applyName" />
      <el-table-column label="申请时间" align="center" prop="createTime" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="买方部门" align="center" prop="tradeDeptName" />
      <el-table-column label="买方经办人" align="center" prop="tradeTransactorName" />
      <template v-if="or === 'income'">
        <el-table-column
          label="应收金额"
          align="center"
          prop="pendingPayment"
        />
      </template>
      <template v-else>
        <el-table-column
          label="应付金额"
          align="center"
          prop="pendingPayment"
        />
      </template>
    </el-table>

    <pagination
      v-show="tableData.length > 0"
      :total="total"
      :page.sync="queryAccountDetailParams.pageNum"
      :limit.sync="queryAccountDetailParams.pageSize"
      @pagination="getOperateList"
    />
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    moneyLoading: {
      type: Boolean,
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    or: {
      type: String,
      default: "tableOr",
    },
    total: {
      tyle: Number,
    },
    deptId: {
      tyle: Number,
    },
  },
  data() {
    return {
      queryAccountDetailParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    getOperateList() {
      this.$parent.$parent.getIncomeOrPayableList(
        {
          ...this.queryAccountDetailParams,
          deptId: this.deptId,
        },
        this.or
      );
    },
    formatter(row, column, cellValue, index) {
      return cellValue ? cellValue : "-";
    },
  },
};
</script>
<style lang="scss" scoped></style>