feat: 6月15日任务完90%

曹睿

2 天以前 4b1304917b0b16b09dd50191fab59d96933c0cf3

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -26,171 +26,284 @@
            v-model="searchForm.issueDate"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            type="date"
            placeholder="请选择"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
            clearable
          @change="changeDateRange"
          @clear="clearRange"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
          >搜索</el-button
        >
      </div>
      <div>
        <el-button @click="handleOut">导出</el-button>
      </div>
    </div>
    <div class="table_list">
      <el-table :data="tableData" border v-loading="tableLoading"
        :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary :summary-method="summarizeMainTable"
        @expand-change="expandChange" height="calc(100vh - 18.5em)">
      <el-table
        :data="tableData"
        border
        v-loading="tableLoading"
        :expand-row-keys="expandedRowKeys"
        :row-key="(row) => row.id"
        show-summary
        :summary-method="summarizeMainTable"
        @expand-change="expandChange"
        height="calc(100vh - 18.5em)"
      >
        <el-table-column align="center"  label="序号" type="index" width="55" />
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.children" border show-summary :summary-method="summarizeChildrenTable">
              <el-table-column align="center" label="序号" type="index" width="60" />
            <el-table
              :data="props.row.children"
              border
              show-summary
              :summary-method="summarizeChildrenTable"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
              />
              <el-table-column label="产品大类" prop="productCategory" />
              <el-table-column label="规格型号" prop="specificationModel" />
              <el-table-column label="单位" prop="unit" />
              <el-table-column label="数量" prop="quantity" />
              <el-table-column label="税率(%)" prop="taxRate" />
              <el-table-column label="含税单价(元)" prop="taxInclusiveUnitPrice" :formatter="formattedNumber" />
              <el-table-column label="含税总价(元)" prop="taxInclusiveTotalPrice" :formatter="formattedNumber" />
              <el-table-column label="不含税总价(元)" prop="taxExclusiveTotalPrice" :formatter="formattedNumber" />
              <el-table-column
                label="含税单价(元)"
                prop="taxInclusiveUnitPrice"
                :formatter="formattedNumber"
              />
              <el-table-column
                label="含税总价(元)"
                prop="taxInclusiveTotalPrice"
                :formatter="formattedNumber"
              />
              <el-table-column
                label="不含税总价(元)"
                prop="taxExclusiveTotalPrice"
                :formatter="formattedNumber"
              />
              <el-table-column label="本次来票数" prop="ticketsNum" />
              <el-table-column label="本次来票金额(元)" prop="ticketsAmount" :formatter="formattedNumber" />
              <el-table-column
                label="本次来票金额(元)"
                prop="ticketsAmount"
                :formatter="formattedNumber"
              />
              <el-table-column label="未来票数" prop="futureTickets" />
              <el-table-column label="未来票金额(元)" prop="futureTicketsAmount" :formatter="formattedNumber" />
              <el-table-column
                label="未来票金额(元)"
                prop="futureTicketsAmount"
                :formatter="formattedNumber"
              />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="采购合同号" prop="purchaseContractNumber" show-overflow-tooltip />
        <el-table-column label="销售合同号" prop="salesContractNo" show-overflow-tooltip />
        <el-table-column label="供应商名称" prop="supplierName" show-overflow-tooltip />
        <el-table-column label="发票号" prop="invoiceNumber" show-overflow-tooltip />
        <el-table-column label="合同金额(元)" prop="invoiceAmount" show-overflow-tooltip :formatter="formattedNumber" />
        <el-table-column
          label="采购合同号"
          prop="purchaseContractNumber"
          show-overflow-tooltip
        />
        <el-table-column
          label="销售合同号"
          prop="salesContractNo"
          show-overflow-tooltip
        />
        <el-table-column
          label="供应商名称"
          prop="supplierName"
          show-overflow-tooltip
        />
        <el-table-column
          label="发票号"
          prop="invoiceNumber"
          show-overflow-tooltip
        />
        <el-table-column
          label="合同金额(元)"
          prop="invoiceAmount"
          show-overflow-tooltip
          :formatter="formattedNumber"
        />
        <el-table-column label="开票人" prop="issUer" show-overflow-tooltip />
        <el-table-column label="开票日期" prop="issueDate" show-overflow-tooltip />
        <el-table-column
          label="开票日期"
          prop="issueDate"
          show-overflow-tooltip
        />
      </el-table>
      <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper"
        :page="page.current" :limit="page.size" @pagination="paginationChange" />
      <pagination
        v-show="total > 0"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="page.current"
        :limit="page.size"
        @pagination="paginationChange"
      />
    </div>
  </div>
</template>

<script setup>
import pagination from '@/components/PIMTable/Pagination.vue'
import { ref } from 'vue'
import pagination from "@/components/PIMTable/Pagination.vue";
import { ref } from "vue";
import {Search} from "@element-plus/icons-vue";
import {ElMessageBox } from "element-plus";
import {productRecordList} from "@/api/procurementManagement/procurementInvoiceLedger.js";
import {
  invoiceListPage
} from "@/api/procurementManagement/procurementInvoiceLedger.js";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const tableLoading = ref(false)
import { invoiceListPage } from "@/api/procurementManagement/procurementInvoiceLedger.js";
import dayjs from "dayjs";

const { proxy } = getCurrentInstance();
const tableData = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
})
const total = ref(0)
});
const total = ref(0);
// 用户信息表单弹框数据
  const data = reactive({
  searchForm: {
    purchaseContractNumber: '',
    supplierName: '',
    issueDate:''
    purchaseContractNumber: "",
    supplierName: "",
    issueDate: [
      dayjs().startOf("month").format("YYYY-MM-DD"),
      dayjs().endOf("month").format("YYYY-MM-DD"),
    ],
    issueDateStart: dayjs().startOf("month").format("YYYY-MM-DD"),
    issueDateEnd: dayjs().endOf("month").format("YYYY-MM-DD"),
  },
  form: {
    issueDate:"",// 开票日期
    purchaseLedgerId: '',
    purchaseLedgerNo: '',
    issUerId: '', // 开票人id
    issUer: '' ,// 开票人姓名
    purchaseLedgerId: "",
    purchaseLedgerNo: "",
    issUerId: "", // 开票人id
    issUer: "", // 开票人姓名
  },
  rules: {
    purchaseLedgerId: [{ required: true, message: "请选择", trigger: "change" }],
  }
})
const { searchForm } = toRefs(data)
    purchaseLedgerId: [
      { required: true, message: "请选择", trigger: "change" },
    ],
  },
});
const { searchForm } = toRefs(data);

// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1
  getList()
}
  page.current = 1;
  getList();
};
const paginationChange = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList()
}
  getList();
};
const getList = () => {
  tableLoading.value = true
  invoiceListPage({ ...searchForm.value, ...page }).then(res => {
    tableLoading.value = false
    tableData.value = res.records
    tableData.value.map(item => {
      item.children = []
  tableLoading.value = true;
  const { issueDate, ...rest } = searchForm.value;
  invoiceListPage({ ...rest, ...page })
    .then((res) => {
      tableLoading.value = false;
      tableData.value = res.records;
      tableData.value.map((item) => {
        item.children = [];
      });
      total.value = res.total;
      expandedRowKeys.value = [];
    })
    total.value = res.total
    expandedRowKeys.value = []
  }).catch(() => {
    tableLoading.value = false
  })
}
    .catch(() => {
      tableLoading.value = false;
    });
};
const formattedNumber = (row, column, cellValue) => {
  return parseFloat(cellValue).toFixed(2);
};
// 表格选择数据
const expandedRowKeys = ref([])
const expandedRowKeys = ref([]);
// 展开行
const expandChange = (row, expandedRows) => {
  if (expandedRows.length > 0) {
    expandedRowKeys.value = []
    expandedRowKeys.value = [];
    try {
      productRecordList({ id: row.id }).then(res => {
        const index = tableData.value.findIndex(item => item.id === row.id);
      productRecordList({ id: row.id }).then((res) => {
        const index = tableData.value.findIndex((item) => item.id === row.id);
        if (index > -1) {
          tableData.value[index].children = res;
        }
        expandedRowKeys.value.push(row.id)
      })
        expandedRowKeys.value.push(row.id);
      });
    } catch (error) {
      console.log(error)
      console.log(error);
    }
  } else {
    expandedRowKeys.value = []
    expandedRowKeys.value = [];
  }
}
};
// 主表合计方法
const summarizeMainTable = (param) => {
  return proxy.summarizeTable(param, ['invoiceAmount'], {
  return proxy.summarizeTable(param, ["invoiceAmount"], {
    ticketsNum: { noDecimal: true }, // 不保留小数
    futureTickets: { noDecimal: true }, // 不保留小数
  });
};
// 子表合计方法
const summarizeChildrenTable = (param) => {
  return proxy.summarizeTable(param, ['taxInclusiveUnitPrice', 'taxInclusiveTotalPrice', 'taxExclusiveTotalPrice', 'ticketsNum', 'ticketsAmount', 'futureTickets', 'futureTicketsAmount'], {
  return proxy.summarizeTable(
    param,
    [
      "taxInclusiveUnitPrice",
      "taxInclusiveTotalPrice",
      "taxExclusiveTotalPrice",
      "ticketsNum",
      "ticketsAmount",
      "futureTickets",
      "futureTicketsAmount",
    ],
    {
    ticketsNum: { noDecimal: true }, // 不保留小数
    futureTickets: { noDecimal: true }, // 不保留小数
  });
    }
  );
};

// 导出
const handleOut = () => {
  ElMessageBox.confirm(
    '选中的内容将被导出，是否确认导出？',
    '导出', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }
  ).then(() => {
    proxy.download("/purchase/registration/export", {}, '来票登记.xlsx')
  }).catch(() => {
    proxy.$modal.msg("已取消")
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download("/purchase/registration/export", {}, "来票登记.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};

const changeDateRange = (date) => {
  if (date) {
    searchForm.receiptPaymentDateStart = date[0];
    searchForm.receiptPaymentDateEnd = date[1];
    getList();
}
getList()
};

const clearRange = () => {
  searchForm.value.issueDate = [];
  searchForm.value.issueDateStart = undefined;
  searchForm.value.issueDateEnd = undefined;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss"></style>