sifa-admin/src/views/tower/lending/components/table.vue

<template>
  <a-table ref="tableRef"
           row-key="contractSettleId" :dataSource="dataList" :columns="columns" :scroll="{ x: 4000, y: 300 }">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'startDate'">
        <a-date-picker
          class="ele-fluid"
          placeholder="请选择开始日期"
          v-model:value="record.startDate"
          valueFormat="YYYY-MM-DD"
          @change="changeDate($event, index)"
          @ok="changeDate($event, index)"
        />
      </template>
      <template v-if="column.key === 'endDate'">
        <a-date-picker
          class="ele-fluid"
          placeholder="请选择结束日期"
          v-model:value="record.stopDate"
          valueFormat="YYYY-MM-DD"
          @change="changeDate($event, index)"
          @ok="changeDate($event, index)"
        />
      </template>
      <template v-if="column.key === 'daysInMonth'">
        <a-input v-model:value="record.daysInMonth" type="number" @change="changeDate($event, index)">
          <template #suffix>天</template>
        </a-input>
      </template>
      <template v-if="column.key === 'monthRentAmount'">
        <a-input v-model:value="record.monthRentAmount" type="number" @change="changeDate($event, index)">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'dailyRentAmount'">
        <a-input v-model:value="record.dailyRentAmount" type="number" @change="changeDate($event, index)">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'shouldPayRentAmount'">
        <a-input v-model:value="record.shouldPayRentAmount" type="number">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'shouldSupplementAmount'">
        <a-input v-model:value="record.shouldSupplementAmount" type="number">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'shouldDeductionAmount'">
        <a-input v-model:value="record.shouldDeductionAmount" type="number">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'paidAmount'">
        <a-input v-model:value="record.paidAmount" type="number">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'taxRate'">
        <a-input v-model:value="record.taxRate" type="number">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'taxAmount'">
        <a-input v-model:value="record.taxAmount" type="number">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'totalAmountWithTax'">
        <a-input v-model:value="record.totalAmountWithTax" type="number" @change="changeTotalAmount">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'remark'">
        <a-input v-model:value="record.remark" />
      </template>
      <template v-if="column.key === 'action'">
        <div class="flex justify-center items-center">
          <close-circle-outlined style="font-size: 1.5rem; color: pink;cursor: pointer"
                                 @click.native="del(index)" />
        </div>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { ColumnItem } from "ele-admin-pro/es/ele-pro-table/types";
import { assignObject, EleProTable } from "ele-admin-pro";
import {
  CloseCircleOutlined
} from "@ant-design/icons-vue";
import dayjs from "dayjs";
import { LendingSettle } from "@/api/tower/lendingSettle/model";

const props = defineProps<{
  dataSource: LendingSettle[]
}>();
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

const emits = defineEmits(["total"]);

const columns = ref<ColumnItem[]>([
  {
    title: "序号",
    key: "index",
    width: 48,
    align: "center",
    fixed: "left",
    hideInSetting: true,
    customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 1)
  },
  {
    title: "设备名",
    dataIndex: "equipmentName",
    width: 150
  },
  {
    title: "出厂编号",
    dataIndex: "factoryNo",
    width: 150
  },
  {
    title: "备案编号",
    dataIndex: "filingNo",
    width: 150
  },
  {
    title: "设备自编号",
    dataIndex: "equipmentNo",
    width: 150
  },
  {
    title: "结算开始日期",
    dataIndex: "startDate",
    key: "startDate",
    width: 200
  },
  {
    title: "结算结束日期",
    dataIndex: "endDate",
    key: "endDate",
    width: 200
  },
  {
    title: "计费天数",
    dataIndex: "calDay",
    key: "calDay",
    width: 250
  },
  {
    title: "月计费天数",
    dataIndex: "daysInMonth",
    key: "daysInMonth",
    width: 150
  },
  {
    title: "月租金(元)",
    dataIndex: "monthRentAmount",
    key: "monthRentAmount",
    width: 250
  },
  {
    title: "日租金(元)",
    dataIndex: "dailyRentAmount",
    key: "dailyRentAmount",
    width: 250
  },
  {
    title: "应付租金(元)",
    dataIndex: "shouldPayRentAmount",
    key: "shouldPayRentAmount",
    width: 250
  },
  {
    title: "应补租金(元)",
    dataIndex: "shouldSupplementAmount",
    key: "shouldSupplementAmount",
    width: 250
  },
  {
    title: "应扣租金(元)",
    dataIndex: "shouldDeductionAmount",
    key: "shouldDeductionAmount",
    width: 250
  },
  {
    title: "实付租金(元)",
    dataIndex: "paidAmount",
    key: "paidAmount",
    width: 250
  },
  {
    title: "税率(%)",
    dataIndex: "taxRate",
    key: "taxRate",
    width: 250
  },
  {
    title: "税金(元)",
    dataIndex: "taxAmount",
    key: "taxAmount",
    width: 250
  },
  {
    title: "税价合计(元)",
    dataIndex: "totalAmountWithTax",
    key: "totalAmountWithTax",
    width: 250
  },
  {
    title: "备注",
    dataIndex: "remark"
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    fixed: "right"
  }
]);

const dataList = ref<LendingSettle[]>([]);

const changeDate = (data, index) => {
  if (dataList.value[index].startDate && dataList.value[index].stopDate) {
    dataList.value[index].calDay = dayjs(dataList.value[index].stopDate).diff(dayjs(dataList.value[index].startDate), "day");
    if (dataList.value[index].daysInMonth && dataList.value[index].monthRentAmount) {
      dataList.value[index].dailyRentAmount = (dataList.value[index].monthRentAmount / dataList.value[index].daysInMonth).toFixed(8);
      dataList.value[index].shouldPayRentAmount = dataList.value[index].dailyRentAmount * dataList.value[index].calDay;
    }
  }
};

const changeTotalAmount = () => {
  let total = 0;
  dataList.value.forEach(item => {
    total += parseFloat(item.totalAmountWithTax);
  });
  emits("total", total);
};

const del = (index: number) => {
  dataList.value.splice(index, 1);
};

watch(
  () => props.dataSource,
  (dataSource) => {
    dataList.value = dataSource;
  },
  { deep: true }
);

defineExpose({ dataList });
</script>