feat: 来票台账添加附件补充

曹睿

5 天以前 a072f4e1ead66a93e0ade8439bc1fd44f936cc2a

feat: 来票台账添加附件补充

 src/views/procurementManagement/procurementInvoiceLedger/Modal/UploadModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,69 @@
<template>
  <el-dialog v-model="upload.open" :title="upload.title" :width="500">
    <FileUpload
      ref="fileUploadRef"
      accept=".xlsx, .xls"
      :headers="upload.headers"
      :action="upload.url + '?updateSupport=' + upload.updateSupport"
      :disabled="upload.isUploading"
      :showTip="false"
      @success="handleFileSuccess"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
        <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive } from "vue";
import { getToken } from "@/utils/auth.js";
import { FileUpload } from "@/components/Upload";
import { ElMessage } from "element-plus";

defineOptions({
  name: "来票台账附件补充",
});

const emits = defineEmits(["uploadSuccess"]);
const fileUploadRef = ref();
const upload = reactive({
  // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（供应商导入）
  open: false,
  // å¼¹å‡ºå±‚标题（供应商导入）
  title: "",
  // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
  isUploading: false,
  // è®¾ç½®ä¸Šä¼ çš„请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/system/supplier/import",
});
// ç‚¹å‡»å¯¼å…¥
const handleImport = () => {
  upload.open = true;
  upload.title = "来票台账附件补充";
};

const submitFileForm = () => {
  fileUploadRef.value.uploadApi();
};

const handleFileSuccess = (response) => {
  const { code, msg } = response;
  if (code == 200) {
    ElMessage({ message: "导入成功", type: "success" });
    upload.open = false;
    emits("uploadSuccess");
  } else {
    ElMessage({ message: msg, type: "error" });
  }
};

defineExpose({
  handleImport,
});
</script>

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -59,34 +59,44 @@
        @pagination="changePage"
      >
        <template #commonFilesRef="{ row }">
          <el-button
          <el-dropdown
            v-if="row.commonFiles.length !== 0"
            text
            icon="Files"
            type="danger"
            @click="handleFiles(row.commonFiles)"
            @command="(command) => handleCommand(command, row)"
          >
            é™„件下载
          </el-button>
            <el-button link :icon="Files" type="danger"> é™„件 </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Download" command="download">
                  ä¸‹è½½
                </el-dropdown-item>
                <el-dropdown-item :icon="Upload" command="upload">
                  ä¸Šä¼ 
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-text v-else type="danger">暂无附件</el-text>
        </template>
      </PIMTable>
    </div>
    <Modal ref="modalRef"></Modal>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { Search } from "@element-plus/icons-vue";
import { Files, Download, Search, Upload } from "@element-plus/icons-vue";
import { productRecordPage } from "@/api/procurementManagement/procurementInvoiceLedger.js";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import Modal from "./Modal/UploadModal.vue";

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

const modalRef = ref();
const { proxy } = getCurrentInstance();
const multipleVal = ref([]);
const {
@@ -243,6 +253,22 @@
  onCurrentChange(page);
};

const handleCommand = (command, row) => {
  switch (command) {
    case "download":
      handleFiles(row.commonFiles);
      break;
    case "upload":
      console.log(row.commonFiles);
      openModal();
      break;
  }
};

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

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