1.海川开心-入库管理-成品入库添加一个删除功能

gaoluyang

7 天以前 644f9b827ac28d39f32c626712d5c574fe9acbf1

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -47,40 +47,85 @@
        :tableLoading="loading"
        :tableData="dataList"
        :isSelection="true"
        height="calc(100vh - 15em)"
        height="calc(100vh - 19.5em)"
        :isShowSummary="true"
        :summaryMethod="summarizeMainTable"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: 0,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="onCurrentChange"
        @pagination="changePage"
      >
        <template #commonFilesRef="{ row }">
          <div v-for="item in row.commonFiles">
            <el-tag type="primary" class="tagBox">
              {{ item.name }}
            </el-tag>
          </div>
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <el-button link :icon="Files" type="danger"> 附件 </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Upload" command="upload">
                  上传
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #operation="{ row }">
          <el-button
            type="primary"
                  link
            @click="openEdit(row)"
          >
            编辑
          </el-button>
               <el-button link type="primary" size="small" @click="downLoadFile(row)">附件</el-button>
          <el-button
            type="primary"
                  link
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </PIMTable>
    </div>
      <FileList ref="fileListRef" />
    <UploadModal ref="modalRef" @uploadSuccess="uploadSuccess"></UploadModal>
    <EditModal ref="editmodalRef" @success="getTableData"></EditModal>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { Search } from "@element-plus/icons-vue";
import { productRecordPage } from "@/api/procurementManagement/procurementInvoiceLedger.js";
import {
  Files,
  Download,
  Search,
  Upload,
  EditPen,
  Delete,
} from "@element-plus/icons-vue";
import {
   delRegistration,
   productRecordPage,
   productUploadFile,
} from "@/api/procurementManagement/procurementInvoiceLedger.js";
import { delCommonFile } from "@/api/publicApi/commonFile.js";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { ElMessageBox, ElMessage } from "element-plus";
import UploadModal from "./Modal/UploadModal.vue";
import EditModal from "./Modal/EditModal.vue";
import useUserStore from "@/store/modules/user.js";
import dayjs from "dayjs";
import FileList from "./fileList.vue";

defineOptions({
  name: "来票台账",
});

const modalRef = ref();
const editmodalRef = ref();

const { proxy } = getCurrentInstance();
const multipleVal = ref([]);
@@ -98,43 +143,39 @@
  {
    purchaseContractNumber: undefined, // 采购合同号
    supplierName: undefined, // 供应商
    createdAt: [], // 来票日期
    // 设置来票日期范围为当天
    createdAt: [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().endOf('day').format('YYYY-MM-DD')], // 来票日期
  },
  [
    {
      label: "采购合同号",
      prop: "purchaseContractNumber",
      align: "center",
      width: 150,
    },
    {
      label: "销售合同号",
      prop: "salesContractNo",
      align: "center",
    },
    {
      label: "客户名称",
      prop: "customerName",
      align: "center",
      width: 150,
    },
    {
      label: "供应商名称",
      prop: "supplierName",
      align: "center",
      width: 240,
    },
    {
      label: "规格型号",
      prop: "specificationModel",
      align: "center",
      width: 150,
    },
    {
      label: "发票号",
      prop: "invoiceNumber",
      align: "center",
      width: 200,
    },
    {
      label: "合同金额(元)",
      prop: "taxInclusiveTotalPrice",
      align: "center",
      width: 200,
      formatData: (cell) => {
        return cell ? parseFloat(cell).toFixed(2) : 0;
      },
@@ -142,12 +183,12 @@
    {
      label: "开票日期",
      prop: "createdAt",
      align: "center",
      width: 110,
    },
    {
      label: "开票金额",
      prop: "ticketsAmount",
      align: "center",
      width: 200,
      formatData: (cell) => {
        return cell ? parseFloat(cell).toFixed(2) : 0;
      },
@@ -155,7 +196,7 @@
    {
      label: "不含税金额",
      prop: "unTicketsPrice",
      align: "center",
      width: 200,
      formatData: (cell) => {
        return cell ? parseFloat(cell).toFixed(2) : 0;
      },
@@ -163,24 +204,30 @@
    {
      label: "增值税",
      prop: "invoiceAmount",
      align: "center",
      width: 200,
    },
    {
      label: "录入人",
      prop: "issUer",
      width: 200,
    },
    {
      label: "附件",
      align: "center",
      prop: "commonFiles",
      dataType: "slot",
         fixed: "right",
      slot: "commonFilesRef",
      width: 200,
      width: 120,
    },
    // {
    //   fixed: "right",
    //   width: 120,
    //   label: "操作",
    //   dataType: "slot",
    //   slot: "operation",
    //   align: "center",
    // },
    {
      fixed: "right",
      width: 190,
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
    },
  ],
  {},
  {
@@ -211,7 +258,12 @@
const handleSelectionChange = (val) => {
  multipleVal.value = val;
};

//附件相关
const fileListRef = ref(null)
//查看附件
const downLoadFile = (row) => {
   fileListRef.value.open(row.commonFiles, row.id)
}
// 导出
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
@@ -227,7 +279,92 @@
    });
};

// const handleEdit = () => {};
const handleFiles = (fileList) => {
  fileList.forEach((e) => {
    proxy.$download.name(e.url);
  });
};

const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
   pagination.pageSize = limit;
  onCurrentChange(page);
};

const handleCommand = (command, row) => {
  switch (command) {
    case "download":
      handleFiles(row.commonFiles);
      break;
    case "upload":
      console.log(row.commonFiles);
      openUoload(row.ticketRegistrationId);
      break;
    case "delete":
      // 删除所有附件
      if (row.commonFiles.length > 0) {
        ElMessageBox.confirm(`确认删除该记录的所有附件吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 获取所有附件的ID
          const fileIds = row.commonFiles.map(file => file.id);
          
          delCommonFile(fileIds).then(() => {
            ElMessage.success('删除成功')
            // 刷新数据
            getTableData();
          }).catch(() => {
            ElMessage.error('删除失败')
          })
        }).catch(() => {
          ElMessage.info('已取消删除')
        })
      }
      break;
  }
};

const openUoload = (id) => {
  modalRef.value.handleImport(id);
};

const openEdit = (row) => {
  editmodalRef.value.open(row);
};

// 上传成功后做什么
const uploadSuccess = async (data) => {
  const { code } = await productUploadFile({
    ticketRegistrationId: data.id,
    tempFileIds: data.tempFileIds,
  });
  if (code === 200) {
    proxy.$modal.msgSuccess("提交成功");
    getTableData();
  }
};
// 删除
const handleDelete = (row) => {
   let ids = [];
   ids.push(row.id);
   ElMessageBox.confirm("该开票台账将被删除,是否确认删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
   })
      .then(() => {
         loading.value = true;
         delRegistration(ids).then((res) => {
            getTableData();
         });
         loading.value = false;
      })
      .catch(() => {
         proxy.$modal.msg("已取消");
      });
};

onMounted(() => {
  getTableData();