sifa-admin/src/views/tower/settle/components/editTable/table3.vue

<template>
  <a-table ref="tableRef0"
           row-key="contractSettleId" :dataSource="dataList" :columns="columns">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'settleCostType'">
        <a-select placeholder="请先选择费用类型" style="width: 250px" size="small"
                  v-model:value="record.settleCostType">
          <a-select-option v-for="(item, index) in dictList" :key="index" :value="item.dictDataName">
            {{ item.dictDataName }}
          </a-select-option>
        </a-select>
      </template>
      <template v-if="column.key === 'singleAmount'">
        <a-input v-model:value="record.singleAmount" type="number" />
      </template>
      <template v-if="column.key === 'num'">
        <a-input v-model:value="record.num" type="number" />
      </template>
      <template v-if="column.key === 'unit'">
        <a-input v-model:value="record.unit" />
      </template>
      <template v-if="column.key === 'sumAmount'">
        <span v-if="record.singleAmount && record.num">
          {{ (record.singleAmount * record.num).toFixed(2) }}
        </span>
      </template>
      <template v-if="column.key === 'amountWithTax'">
        <span v-if="record.singleAmount && record.num">{{ (record.singleAmount * record.num).toFixed(2) }}</span>
      </template>
      <template v-if="column.key === 'tax'">
        <span
          v-if="record.singleAmount && record.num">{{ (record.singleAmount * record.num * (record.taxRate / 100)).toFixed(2)
          }}</span>
      </template>
      <template v-if="column.key === 'amountWithoutTax'">
        <span
          v-if="record.singleAmount && record.num">{{ ((record.singleAmount * record.num) - (record.singleAmount * record.num * (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";
import { DictDataParam } from "@/api/system/dict-data/model";
import { listDictData } from "@/api/system/dict-data";

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

const dictList = ref<DictDataParam[]>([]);
const getDictList = async () => {
  dictList.value = await listDictData({ dictId: 146 });
};

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: "settleCostType",
    key: "settleCostType"
  },
  {
    title: "单价",
    dataIndex: "singleAmount",
    key: "singleAmount"
  },
  {
    title: "数量",
    dataIndex: "num",
    key: "num"
  },
  {
    title: "单位",
    dataIndex: "unit",
    key: "unit"
  },
  {
    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 del = (index: number) => {
  dataList.value.splice(index, 1);
};

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

onMounted(() => {
  getDictList();
});

defineExpose({ dataList })

</script>