|
@@ -0,0 +1,308 @@
|
|
|
+<template>
|
|
|
+ <!-- 添加或修改项目信息对话框 -->
|
|
|
+ <el-drawer v-model="visible" size="30%" direction="rtl" :close-on-press-escape="false">
|
|
|
+ <div class="page-container form-container">
|
|
|
+ <div class="form-btns-container">
|
|
|
+ <span class="title-label"><el-icon>
|
|
|
+ <Document />
|
|
|
+ </el-icon>
|
|
|
+ 电子工艺图纸</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <el-form class="list-search-container" :inline="true">
|
|
|
+ <el-form-item>
|
|
|
+ <el-upload :action="webHost + '/common/upload'" :headers="headers" :on-success="handleSuccess"
|
|
|
+ :on-exceed="handleExceed" :before-upload="beforeUpload" :show-file-list="false">
|
|
|
+ <el-button type="success" icon="Plus">上传图纸
|
|
|
+ </el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleRecords" style="margin-left: 10px;">操作历史
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 列表区 -->
|
|
|
+ <div class="el-table-container">
|
|
|
+ <el-table ref="equipmentTable" v-loading="loading" row-key="id" @selection-change="handleSelectionChange"
|
|
|
+ :data="form.drawingList" height="100%">
|
|
|
+ <!-- <el-table-column type="selection" width="40" align="center" /> -->
|
|
|
+ <el-table-column label="图纸" prop="drawingName" align="center" />
|
|
|
+ <el-table-column fixed="right" label="操作" align="center" width="140px">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" @click="handlePreview(scope.row)">预览
|
|
|
+ </el-button>
|
|
|
+ <el-button link type="success" plain @click="handleDownload(scope.row)">下载</el-button>
|
|
|
+
|
|
|
+ <el-button link type="danger" @click="handleDelete(scope.row.id)">删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="form.pageNum" v-model:limit="form.pageSize"
|
|
|
+ @pagination="open" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog v-model="dialogVisible" width="1500px">
|
|
|
+ <iframe :src="pdfCover" style="width: 100%; height: 800px"></iframe>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 添加或修改app版本管理对话框 -->
|
|
|
+ <el-dialog title="查询到有同名文件" v-model="openRecords" width="280px" append-to-body>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="coverDrawing">覆 盖</el-button>
|
|
|
+ <el-button type="success" @click="saveDrawing">不 覆 盖</el-button>
|
|
|
+ <el-button type="info" @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </el-drawer>
|
|
|
+ <!-- 图纸弹窗 -->
|
|
|
+ <redcord-dialog ref="redcordsForm" />
|
|
|
+ <!-- <pdf :src="pdfUrl" /> -->
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+// import PDF from 'vue-pdf';
|
|
|
+import {
|
|
|
+ listDrawing,
|
|
|
+ addDrawing,
|
|
|
+ delDrawing,
|
|
|
+ updateDrawing,
|
|
|
+ drawingByName
|
|
|
+} from "@/api/business/drawing";
|
|
|
+import redcordDialog from './recordsDialog'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+const webHost = import.meta.env.VITE_APP_BASE_API
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const total = ref(0)
|
|
|
+const emit = defineEmits(["handleSaveResourceSuccess"]);
|
|
|
+/** 表单抽屉 页变量 */
|
|
|
+const processDetail = ref({});
|
|
|
+/**覆盖对话框显示 */
|
|
|
+const openRecords = ref(false)
|
|
|
+const formLoading = ref(false)
|
|
|
+const pdfCover = ref('')
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const pdfUrl = ref('')
|
|
|
+/**不覆盖文件名 */
|
|
|
+const coverName = ref('')
|
|
|
+const repeatingDrawings = ref([])
|
|
|
+const selections = ref([]);
|
|
|
+const headers = { Authorization: getToken() }
|
|
|
+const loading = ref(false);
|
|
|
+const visible = ref(false);
|
|
|
+/** 查询对象 */
|
|
|
+const data = reactive({
|
|
|
+ form: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ groupDetailList: [],
|
|
|
+ code: "",
|
|
|
+ remark: "",
|
|
|
+ type: false
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ code: [{ required: true, message: "资源组编码不能为空", trigger: "blur" }],
|
|
|
+ },
|
|
|
+});
|
|
|
+const { form, rules } = toRefs(data);
|
|
|
+
|
|
|
+/*********************** 方法区 ****************************/
|
|
|
+/** 打开抽屉 */
|
|
|
+function open(row) {
|
|
|
+
|
|
|
+ processDetail.value = row
|
|
|
+ loading.value = true;
|
|
|
+ form.value.technologicalProcessDetailId = row.id
|
|
|
+ listDrawing(form.value).then(res => {
|
|
|
+ form.value.drawingList = res.rows
|
|
|
+ total.value = res.total
|
|
|
+
|
|
|
+ })
|
|
|
+ loading.value = false;
|
|
|
+ visible.value = true;
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 打开操作页面
|
|
|
+ */
|
|
|
+function handleRecords() {
|
|
|
+ proxy.$refs.redcordsForm.open(processDetail.value);
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 列表checkbox列选择 事件
|
|
|
+ */
|
|
|
+function handleSelectionChange(selection) {
|
|
|
+ selections.value = selection;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 文件下载 */
|
|
|
+function handleDownload(row) {
|
|
|
+ console.log(webHost + row.url)
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const xhr = new XMLHttpRequest();
|
|
|
+ xhr.open('GET', webHost + row.url, true);
|
|
|
+ xhr.responseType = 'blob';
|
|
|
+ xhr.upload.onprogress = (e) => {
|
|
|
+ if (e.lengthComputable) {
|
|
|
+ let progress = e.loaded / e.total;
|
|
|
+ console.log('文件上传进度是', progress);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ xhr.onload = function () {
|
|
|
+ const url = window.URL.createObjectURL(xhr.response);
|
|
|
+ const eleLink = document.createElement('a');
|
|
|
+ eleLink.href = webHost + row.url;
|
|
|
+ eleLink.download = `${row.drawingName}`;
|
|
|
+ eleLink.style.display = 'none';
|
|
|
+ document.body.appendChild(eleLink);
|
|
|
+ eleLink.click();
|
|
|
+ document.body.removeChild(eleLink);
|
|
|
+ resolve('success');
|
|
|
+ };
|
|
|
+ xhr.onerror = (e) => {
|
|
|
+ proxy.$modal.msgError('下载文件失败!')
|
|
|
+ reject(e);
|
|
|
+ };
|
|
|
+ xhr.send();
|
|
|
+ });
|
|
|
+
|
|
|
+ // window.location.href = webHost + url
|
|
|
+}
|
|
|
+/**删除 */
|
|
|
+function handleDelete(id) {
|
|
|
+ proxy.$modal
|
|
|
+ .confirm('是否确认删除选中的电子图纸?')
|
|
|
+ .then(function () {
|
|
|
+ return delDrawing(id)
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ reset();
|
|
|
+ open(processDetail.value)
|
|
|
+ proxy.$modal.msgSuccess('删除成功!')
|
|
|
+ })
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**上传成功回调 */
|
|
|
+function handleSuccess(row) {
|
|
|
+ form.value.url = row.fileName
|
|
|
+
|
|
|
+ var fileDrawing = {}
|
|
|
+ fileDrawing.drawingName = row.originalFilename
|
|
|
+ fileDrawing.technologicalProcessDetailId = processDetail.value.id
|
|
|
+ drawingByName(fileDrawing).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ repeatingDrawings.value = res.data
|
|
|
+ if (repeatingDrawings.value.length == 0) {
|
|
|
+ coverName.value = row.originalFilename
|
|
|
+ saveDrawing();
|
|
|
+ } else {
|
|
|
+ //有同名文件,询问是否覆盖
|
|
|
+ openRecords.value = true
|
|
|
+ coverName.value = row.originalFilename
|
|
|
+ // coverName.value = row.originalFilename.slice(0, -4) + "_" + row.newFileName.slice(-6, -4) + row.originalFilename.slice(-4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+//覆盖保存
|
|
|
+function coverDrawing() {
|
|
|
+ console.log()
|
|
|
+ updateDrawing(repeatingDrawings.value[0].id).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ form.value.type = true
|
|
|
+ saveDrawing();
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+//不覆盖保存
|
|
|
+function saveDrawing() {
|
|
|
+
|
|
|
+ form.value.drawingName = coverName.value
|
|
|
+ addDrawing(form.value).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ reset();
|
|
|
+ open(processDetail.value)
|
|
|
+ formLoading.value = false
|
|
|
+ openRecords.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/**预览 */
|
|
|
+function handlePreview(row) {
|
|
|
+
|
|
|
+ // pdfUrl.value = webHost +row.url
|
|
|
+ // console.log(pdfUrl.value )
|
|
|
+ dialogVisible.value = true
|
|
|
+ pdfCover.value = webHost + row.url
|
|
|
+ // window.open((webHost + row.url))
|
|
|
+}
|
|
|
+
|
|
|
+// 取消按钮
|
|
|
+function cancel() {
|
|
|
+ openRecords.value = false
|
|
|
+}
|
|
|
+/**文件数量超出的回调 */
|
|
|
+function handleExceed(files) {
|
|
|
+ form.value.url = files[0].url
|
|
|
+}
|
|
|
+/** 文件上传前的 回调事件 */
|
|
|
+function beforeUpload(file) {
|
|
|
+ formLoading.value = true
|
|
|
+ const allowedTypes = ['application/pdf'];
|
|
|
+ const isAllowed = allowedTypes.includes(file.type);
|
|
|
+ if (!isAllowed) {
|
|
|
+ proxy.$modal.msgError('只能上传 PDF 格式的文件!')
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 对话框关闭 事件
|
|
|
+ */
|
|
|
+function close() {
|
|
|
+ reset();
|
|
|
+ visible.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+/** 表单重置 */
|
|
|
+function reset() {
|
|
|
+ form.value = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ code: null,
|
|
|
+ remark: null,
|
|
|
+ groupDetailList: [],
|
|
|
+ url: null,
|
|
|
+ drawingName: null,
|
|
|
+ type: false
|
|
|
+ };
|
|
|
+ coverName.value = ''
|
|
|
+ repeatingDrawings.value = []
|
|
|
+ proxy.resetForm("formRef");
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 取消按钮 */
|
|
|
+const handleCancel = () => {
|
|
|
+ visible.value = false;
|
|
|
+ reset();
|
|
|
+};
|
|
|
+
|
|
|
+/** 暴露给父组件的方法 */
|
|
|
+defineExpose({
|
|
|
+ open,
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|