feat: 完成设备台账

曹睿

3 天以前 76a985e3d790e506eef36c4df7442a95db0b29a3

 src/views/equipmentManagement/ledger/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
    <!-- <el-form :model="filters" :inline="true">
      <el-form-item label="搜索">
        <el-input
          v-model="filters.searchText"
@@ -15,7 +15,15 @@
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    </el-form> -->
    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> 新增 </el-button>
          <el-button @click="handleOut" icon="download">导出</el-button>
        </div>
      </div>
    <PIMTable
      :column="columns"
      :tableData="dataList"
@@ -25,25 +33,41 @@
        total: pagination.total,
      }"
    >
      <template #operation>
        <el-button type="primary" text>编辑</el-button>
        <el-button type="danger" text>删除</el-button>
        <template #operation="{ row }">
          <el-button type="primary" text @click="edit(row.id)" icon="editPen">
            编辑
          </el-button>
          <el-button
            type="danger"
            text
            icon="delete"
            @click="deleteRow(row.id)"
          >
            删除
          </el-button>
      </template>
    </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { Search } from "@element-plus/icons-vue";
import { getLedgerPage, delLedger } from "@/api/equipmentManagement/ledger";
import { onMounted } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox } from "element-plus";

defineOptions({
  name: "设备台账",
});

const modalRef = ref();
const { filters, columns, dataList, pagination, getTableData, resetFilters } =
  usePaginationApi(
    () => {},
    getLedgerPage,
    {
      searchText: undefined,
    },
@@ -51,54 +75,123 @@
      {
        label: "设备名称",
        align: "center",
        prop: "deviceName",
      },
      {
        label: "规格型号",
        align: "center",
        prop: "deviceModel",
      },
      {
        label: "供应商",
        align: "center",
        prop: "supplierName",
      },
      {
        label: "单位",
        align: "center",
        prop: "unit",
      },
      {
        label: "数量",
        align: "center",
        prop: "number",
      },
      {
        label: "含税单价",
        align: "center",
        prop: "taxIncludingPriceUnit",
      },
      {
        label: "含税总价",
        align: "center",
        prop: "taxIncludingPriceTotal",
      },
      {
        label: "税率",
        align: "center",
        prop: "taxRate",
      },
      {
        label: "不含税总价",
        align: "center",
        prop: "unTaxIncludingPriceTotal",
      },
      {
        label: "录入人",
        align: "center",
        prop: "createUser",
      },
      {
        label: "录入日期",
        align: "center",
        prop: "createTime",
      },
      {
        fixed: "right",
        label: "操作",
        dataType: "slot",
        slot: "operation",
        align: "center",
        width: "150px",
        width: "200px",
      },
    ]
  );

const add = () => {
  modalRef.value.openModal();
};
const edit = (id) => {
  modalRef.value.loadForm(id);
};

const deleteRow = (id) => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delLedger(id);
    if (code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getTableData();
    }
  });
};

const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download(
        `/device/ledger/export?ids=${ids}`,
        {},
        "设备台账档案.xlsx"
      );
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};

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

<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>