Crunchy
2025-04-29 e5454b769d44a34af423bf87ac8a740bf8c20341
src/views/CNAS/externalService/serviceAndSupplyPro/component/ConsumableList.vue
@@ -1,63 +1,33 @@
<template>
  <div>
    <TableCard :showTitle="false">
      <template slot="form">
        <div class="action-box">
          <div></div>
          <div class="flex">
            <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog(undefined)">
              新建
            </el-button>
            <el-button icon="el-icon-upload2" size="small" @click="exportExcel">
              导出Excel
            </el-button>
          </div>
        </div>
    <div class="flex">
      <el-button icon="el-icon-plus" size="small" type="primary" @click="showDialog(undefined)">
        新建
      </el-button>
      <el-button icon="el-icon-upload2" size="small" @click="exportExcel">
        导出Excel
      </el-button>
    </div>
    <limsTable :column="columns" :currentChange="rowClick" :height="'25vh'" :highlightCurrentRow="true"
               :isSelection="false" :rowStyle="tableRowStyle" :table-data="tableData" rowKey="id"
               @pagination="pagination" :page="page" style="margin-top: 18px;">
      <template v-slot:consumablesTypeSlot="{ row }">
        {{ findType(row.consumablesType) }}
      </template>
      <template v-slot:table>
        <limsTable
          :column="columns"
          :currentChange="rowClick"
          :height="'25vh'"
          :highlightCurrentRow="true"
          :isSelection="false"
          :rowStyle="tableRowStyle"
          :table-data="tableData"
          rowKey="id"
          style="margin-top: 18px; padding: 0 15px;"
        >
          <template v-slot:consumablesTypeSlot="{row}">
            {{ findType(row.consumablesType) }}
          </template>
          <template v-slot:operation="scope">
            <el-button size="small" type="text" @click="showDialog(scope.row)">编辑</el-button>
            <el-button size="small" style="color: #f56c6c" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </limsTable>
        <div class="pagination">
          <div></div>
          <el-pagination
            :page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrent"
            @size-change="handleSize"
          >
          </el-pagination>
        </div>
      <template v-slot:operation="scope">
        <el-button size="small" type="text" @click="showDialog(scope.row)">编辑</el-button>
        <el-button size="small" style="color: #f56c6c" type="text" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </TableCard>
    </limsTable>
    <el-divider></el-divider>
    <div>
      <ConsumableProject ref="consumableProject"></ConsumableProject>
    </div>
    <Edit ref="editRef" :contentsId="contentsId" @submit="fetchData"/>
    <Edit ref="editRef" :contentsId="contentsId" @submit="fetchData" />
  </div>
</template>
<script>
import TableCard from './index.vue';
import Edit from "./Edit.vue"
import limsTable from '@/components/Table/lims-table.vue'
import {
@@ -69,9 +39,7 @@
export default {
  dicts: ["consumables_type"],
  components: {
    TableCard, limsTable,Edit, ConsumableProject
  },
  components: {limsTable, Edit, ConsumableProject},
  props: {
    contentsId: {
      type: Number,
@@ -147,9 +115,9 @@
        }
      ],
      tableData: [],
      pagination: {
      page: {
        current: 1,
        pageSize: 20,
        size: 20,
        total: 0
      },
      options: [],
@@ -161,9 +129,10 @@
  },
  methods: {
    async fetchData() {
      procurementSuppliesList({ contentId: this.contentsId}).then(res => {
      procurementSuppliesList({ contentId: this.contentsId, ...this.page }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records
          this.page.total = res.data.total
          if (this.tableData.length > 0) {
            this.rowClick(this.tableData[0])
          }
@@ -174,7 +143,7 @@
      this.$nextTick()
      let res
      const e = this.options.find(item => item.value == val)
      if(e) {
      if (e) {
        res = e.label
      } else {
        res = '-'
@@ -185,18 +154,17 @@
      this.$refs.editRef.openDialog(row);
    },
    async exportExcel() {
      exportProcurementSuppliesList({parentId:this.contentsId}).then(res => {
        const blob = new Blob([res], {type: 'application/octet-stream'});
      exportProcurementSuppliesList({ parentId: this.contentsId }).then(res => {
        const blob = new Blob([res], { type: 'application/octet-stream' });
        this.$download.saveAs(blob, '耗材列表.xlsx')
        this.$message.success('导出成功')
      })
    },
    handleCurrent() {
    },
    handleSize() {
    pagination(page) {
      this.page.size = page.limit
      this.fetchData()
    },
    handleDelete(row) {
      deleteProcurementSuppliesList({ id:row.id }).then(res => {
      deleteProcurementSuppliesList({ id: row.id }).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.fetchData()
@@ -206,11 +174,11 @@
    rowClick(row) {
      this.$refs.consumableProject.fetchListId(row)
    },
    tableRowStyle({row}) {
    tableRowStyle({ row }) {
      if(row.currentAmount <= row.lowerLimit) {
        return { background: '#ffcaca' }
      } else {
        return {}
        return { background: '#fff' }
      }
    }
  }
@@ -220,21 +188,6 @@
<style scoped>
.flex {
  display: flex;
}
.action-box {
  width: 100%;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pagination {
  padding-top: 15px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between
  text-align: right;
}
</style>