完善合同管理;

新增结算管理

src/views/tower/settle/components/editTable/table2.vue

@@ -0,0 +1,178 @@
+<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'">
+        <span v-if="record.startDate && record.endDate">
+          {{ Math.floor(record.days / 30)  }}月
+          {{ record.days - (Math.floor(record.days / 30) * 30) }}天
+        </span>
+      </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'">
+        <span v-if="record.monthAmount">{{ record.dailyAmount }}</span>
+      </template>
+      <template v-if="column.key === 'amountWithTax'">
+        <span v-if="record.monthAmount">{{ (record.dailyAmount * record.days).toFixed(2) }}</span>
+      </template>
+      <template v-if="column.key === 'tax'">
+        <span v-if="record.monthAmount">{{ (record.dailyAmount * record.days * (record.taxRate / 100)).toFixed(2) }}</span>
+      </template>
+      <template v-if="column.key === 'amountWithoutTax'">
+        <span
+          v-if="record.monthAmount">{{ ((record.dailyAmount * record.days) - (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>
+  </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: "monthAmount",
+    key: "monthAmount"
+  },
+  {
+    title: "日工资(元)",
+    dataIndex: "dailyAmount",
+    key: "dailyAmount"
+  },
+  {
+    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");
+    console.log(dataList.value[index].days)
+    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);
+};
+
+watch(
+  () => props.dataSource,
+  (dataSource) => {
+    dataList.value = dataSource;
+  },
+  { deep: true }
+);
+
+
+defineExpose({ dataList })
+
+</script>