forked from b2894lxlx/tuanwei-admin
258 lines
7.5 KiB
Vue
258 lines
7.5 KiB
Vue
<template>
|
|
<a-table ref="tableRef0"
|
|
row-key="contractSettleId" :dataSource="dataList" :columns="columns">
|
|
<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.endDate"
|
|
valueFormat="YYYY-MM-DD"
|
|
@change="changeDate($event, index)"
|
|
@ok="changeDate($event, index)"
|
|
/>
|
|
</template>
|
|
<template v-if="column.key === 'settleCycle'">
|
|
<a-row :gutter="16">
|
|
<a-col :span="12">
|
|
<a-input v-model:value="record.month">
|
|
<template #addonAfter>月</template>
|
|
</a-input>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-input v-model:value="record.day">
|
|
<template #addonAfter>日</template>
|
|
</a-input>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
<template v-if="column.key === 'monthAmount'">
|
|
<a-input v-model:value="record.monthAmount" type="number" @change="changeDate($event, index)" />
|
|
</template>
|
|
<template v-if="column.key === 'dailyAmount'">
|
|
<a-input v-model:value="record.dailyAmount" type="number" />
|
|
</template>
|
|
<template v-if="column.key === 'payRate'">
|
|
<a-input v-model:value="record.payRate" type="number">
|
|
<template #addonAfter>%</template>
|
|
</a-input>
|
|
</template>
|
|
<template v-if="column.key === 'amountWithTax'">
|
|
<span v-if="record.monthAmount">{{ ((record.dailyAmount * record.days + record.monthAmount * record.month) * record.payRate / 100).toFixed(2)
|
|
}}</span>
|
|
</template>
|
|
<template v-if="column.key === 'tax'">
|
|
<span v-if="record.monthAmount">{{ (((record.dailyAmount * record.days + record.monthAmount * record.month) * record.payRate / 100) * (record.taxRate / 100)).toFixed(2)
|
|
}}</span>
|
|
</template>
|
|
<template v-if="column.key === 'amountWithoutTax'">
|
|
<span
|
|
v-if="record.monthAmount">{{ (((record.dailyAmount * record.days + record.monthAmount * record.month) * record.payRate / 100) - (record.dailyAmount * record.days * (record.taxRate / 100))).toFixed(2)
|
|
}}</span>
|
|
</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>
|
|
<template #summary>
|
|
<a-table-summary-row>
|
|
<a-table-summary-cell>合计</a-table-summary-cell>
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell>
|
|
{{ totals.amountWithTax }}
|
|
</a-table-summary-cell>
|
|
<a-table-summary-cell>
|
|
{{ totals.tax }}
|
|
</a-table-summary-cell>
|
|
<a-table-summary-cell>
|
|
{{ totals.amountWithoutTax }}
|
|
</a-table-summary-cell>
|
|
<a-table-summary-cell />
|
|
<a-table-summary-cell />
|
|
</a-table-summary-row>
|
|
</template>
|
|
</a-table>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { SettleDetail } from "@/api/tower/settleDetail/model";
|
|
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";
|
|
|
|
const props = defineProps<{
|
|
dataSource: SettleDetail[]
|
|
}>();
|
|
const tableRef0 = ref<InstanceType<typeof EleProTable> | null>(null);
|
|
|
|
const columns = ref<ColumnItem[]>([
|
|
{
|
|
title: "序号",
|
|
key: "index",
|
|
width: 48,
|
|
align: "center",
|
|
fixed: "left",
|
|
hideInSetting: true,
|
|
customRender: ({ index }) => index + (tableRef0.value?.tableIndex ?? 1)
|
|
},
|
|
{
|
|
title: "设备名",
|
|
dataIndex: "equipmentName",
|
|
key: "equipmentName"
|
|
},
|
|
{
|
|
title: "设备型号",
|
|
dataIndex: "equipmentModel",
|
|
key: "equipmentModel"
|
|
},
|
|
{
|
|
title: "出场编号",
|
|
dataIndex: "factoryNo",
|
|
key: "factoryNo"
|
|
},
|
|
{
|
|
title: "结算开始日期",
|
|
dataIndex: "startDate",
|
|
key: "startDate"
|
|
},
|
|
{
|
|
title: "结算结束日期",
|
|
dataIndex: "endDate",
|
|
key: "endDate"
|
|
},
|
|
{
|
|
title: "实际结算周期",
|
|
dataIndex: "settleCycle",
|
|
key: "settleCycle"
|
|
},
|
|
{
|
|
title: "实际进场日期",
|
|
dataIndex: "inDate",
|
|
key: "inDate"
|
|
},
|
|
{
|
|
title: "实际出场日期",
|
|
dataIndex: "outDate",
|
|
key: "outDate"
|
|
},
|
|
{
|
|
title: "月工资(元)",
|
|
dataIndex: "monthAmount",
|
|
key: "monthAmount"
|
|
},
|
|
{
|
|
title: "日工资(元)",
|
|
dataIndex: "dailyAmount",
|
|
key: "dailyAmount"
|
|
},
|
|
{
|
|
title: "支付比例",
|
|
dataIndex: "payRate",
|
|
key: "payRate"
|
|
},
|
|
{
|
|
title: "含税金额(元)",
|
|
dataIndex: "amountWithTax",
|
|
key: "amountWithTax"
|
|
},
|
|
{
|
|
title: "税金(元)",
|
|
dataIndex: "tax",
|
|
key: "tax"
|
|
},
|
|
{
|
|
title: "不含税金额(元)",
|
|
dataIndex: "amountWithoutTax",
|
|
key: "amountWithoutTax"
|
|
},
|
|
{
|
|
title: "备注",
|
|
dataIndex: "remark",
|
|
key: "remark"
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "action",
|
|
key: "action"
|
|
}
|
|
]);
|
|
|
|
const dataList = ref<SettleDetail[]>([]);
|
|
|
|
const changeDate = (data, index) => {
|
|
if (dataList.value[index].startDate && dataList.value[index].endDate) {
|
|
dataList.value[index].days = dayjs(dataList.value[index].endDate).diff(dayjs(dataList.value[index].startDate), "day") + 1;
|
|
dataList.value[index].month = Math.floor(dataList.value[index].days / 30);
|
|
dataList.value[index].day = dataList.value[index].days - (Math.floor(dataList.value[index].days / 30) * 30);
|
|
if (dataList.value[index].monthAmount) dataList.value[index].dailyAmount = (dataList.value[index].monthAmount / 30).toFixed(8);
|
|
}
|
|
};
|
|
|
|
const del = (index: number) => {
|
|
dataList.value.splice(index, 1);
|
|
};
|
|
|
|
const totals = ref({ amountWithTax: 0, tax: 0, amountWithoutTax: 0 });
|
|
const calTotals = () => {
|
|
let amountWithTax = 0;
|
|
let tax = 0;
|
|
let amountWithoutTax = 0;
|
|
if (dataList.value && dataList.value.length > 0 && (dataList.value[0].taxRate !== undefined)) {
|
|
const taxRate = dataList.value[0].taxRate;
|
|
dataList.value.forEach(({ month, monthAmount, day, dailyAmount, payRate }) => {
|
|
amountWithTax += (month * monthAmount + day * dailyAmount) * payRate / 100;
|
|
});
|
|
amountWithTax = Number(amountWithTax.toFixed(2));
|
|
tax = amountWithTax * (taxRate / 100);
|
|
tax = Number(tax.toFixed(2));
|
|
amountWithoutTax = amountWithTax - tax;
|
|
amountWithoutTax = Number(amountWithoutTax.toFixed(2));
|
|
}
|
|
totals.value = { amountWithTax, tax, amountWithoutTax };
|
|
};
|
|
onMounted(() => {
|
|
dataList.value = props.dataSource;
|
|
calTotals();
|
|
});
|
|
|
|
watch(
|
|
() => props.dataSource,
|
|
(dataSource) => {
|
|
dataList.value = dataSource;
|
|
calTotals();
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
|
|
defineExpose({ dataList });
|
|
|
|
</script>
|