| | |
| | | <style scoped> |
| | | .search { |
| | | background-color: #fff; |
| | | height: 80px; |
| | | height: 46px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .search_thing { |
| | | width: 350px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .search_label { |
| | | width: 110px; |
| | | font-size: 14px; |
| | | text-align: right; |
| | | } |
| | | |
| | | .search_input { |
| | | width: calc(100% - 110px); |
| | | } |
| | | |
| | | .table { |
| | | margin-top: 10px; |
| | | background-color: #fff; |
| | | width: calc(100% - 40px); |
| | | height: calc(100% - 60px - 80px - 10px - 40px); |
| | | padding: 20px; |
| | | justify-content: space-between; |
| | | } |
| | | </style> |
| | | |
| | | <template> |
| | | <div class="standard_method"> |
| | | <div class="capacity-scope"> |
| | | <div class="search"> |
| | | <div class="search_thing"> |
| | | <div class="search_label">标准编号:</div> |
| | | <div class="search_input"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="queryParams.code" |
| | | @keyup.enter.native="refreshTable()"></el-input> |
| | | </div> |
| | | <div> |
| | | <el-form :model="queryParams" ref="queryParams" size="small" :inline="true"> |
| | | <el-form-item label="标准编号" prop="code"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="queryParams.code" |
| | | @keyup.enter.native="refreshTable()"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="标准名称" prop="name"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="queryParams.name" |
| | | @keyup.enter.native="refreshTable()"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" size="mini" @click="refreshTable">查询</el-button> |
| | | <el-button size="mini" @click="refresh">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="search_thing"> |
| | | <div class="search_label">标准名称:</div> |
| | | <div class="search_input"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="queryParams.name" |
| | | @keyup.enter.native="refreshTable()"></el-input> |
| | | </div> |
| | | </div> |
| | | <div class="search_thing" style="padding-left: 30px"> |
| | | <el-button size="small" @click="refresh()">重 置</el-button> |
| | | <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button> |
| | | </div> |
| | | <div class="btn"> |
| | | <!-- <el-button size="small" @click="$refs.ValueTable.openUpload()" v-if="inPower"> |
| | | <i class="el-icon-upload2" style="color: #3a7bfa"></i> |
| | | <span style="color: #3a7bfa">导入</span></el-button> --> |
| | | <div> |
| | | <el-button size="small" type="primary" @click="openAdd" v-if="addPower">新增</el-button> |
| | | </div> |
| | | </div> |
| | | <lims-table :tableData="tableData" :column="column" :page="page" :tableLoading="tableLoading" |
| | | :height="'calc(100vh - 250px)'" style="padding: 20px; padding-top: 0" @pagination="pagination"></lims-table> |
| | | :height="'calc(100vh - 250px)'" @pagination="pagination"></lims-table> |
| | | <!-- 新增/编辑 --> |
| | | <el-dialog :title="title" :visible.sync="addDlog" width="500px"> |
| | | <el-form :model="addForm" ref="addForm" :rules="addRules" label-position="right" label-width="120px"> |
| | | <el-form-item label="领域" prop="field"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="addForm.field"></el-input> |
| | | <el-form-item label="行业" prop="industryIds"> |
| | | <el-select v-model="addForm.industryIds" multiple filterable clearable collapse-tags placeholder="请选择行业" style="width: 100%"> |
| | | <el-option v-for="item in industryOptions" :key="item.id" :label="item.laboratoryName" :value="item.id" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="标准编号" prop="code"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="addForm.code"> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="检验对象" prop="structureTestObjectId"> |
| | | <el-cascader size="small" :options="tandardTree" v-model="addForm.structureTestObjectId" collapse-tags |
| | | :props="{ multiple: true, checkStrictly: true }" clearable style="width: 100%"></el-cascader> |
| | | </el-form-item> |
| | | <el-form-item label="标准描述" prop="name"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="addForm.name"> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="标准描述EN" prop="nameEn"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="addForm.nameEn"> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="备注" prop="remark"> |
| | |
| | | <el-option label="是" :value="1"> </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item v-if="title === '新增'" label="附件"> |
| | | <el-upload ref="addUpload" action="#" :auto-upload="false" multiple :file-list="pendingFiles" |
| | | :on-change="pendingFileChange" :on-remove="pendingFileRemove" :before-upload="beforeFileUpload" |
| | | accept=".jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar"> |
| | | <el-button size="small" type="primary">选择附件</el-button><div slot="tip" class="el-upload__tip">支持多个附件,单个不超过10MB</div> |
| | | </el-upload> |
| | | </el-form-item> |
| | | </el-form> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="addDlog = false">取 消</el-button> |
| | | <el-button :loading="addLoading" type="primary" @click="submitProduct('addForm')">确 认</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <el-dialog title="标准附件" :visible.sync="attachmentDialog" width="760px"> |
| | | <el-upload v-if="currentMethod.id" :action="attachmentAction" :headers="uploadHeader" multiple :show-file-list="false" |
| | | :before-upload="beforeFileUpload" :on-success="attachmentUploadSuccess" |
| | | accept=".jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar"> |
| | | <el-button size="small" type="primary">上传附件</el-button> |
| | | </el-upload> |
| | | <el-table :data="attachmentList" border size="small" style="margin-top:12px"> |
| | | <el-table-column label="文件名称" prop="fileName" min-width="280" /> |
| | | <el-table-column label="上传时间" prop="createTime" width="170" /> |
| | | <el-table-column label="操作" width="180"><template slot-scope="scope"><el-button type="text" @click="previewAttachment(scope.row)">预览</el-button><el-button type="text" @click="downloadAttachment(scope.row)">下载</el-button><el-button type="text" style="color:#f56c6c" @click="removeAttachment(scope.row)">删除</el-button></template></el-table-column> |
| | | </el-table> |
| | | </el-dialog> |
| | | <el-dialog title="预览附件" :visible.sync="previewDialog" fullscreen><file-preview v-if="previewDialog" :current-file="currentAttachment" :file-url="previewUrl" /></el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import limsTable from "@/components/Table/lims-table.vue"; |
| | | import filePreview from "@/components/Preview/filePreview.vue"; |
| | | import { |
| | | selectStandardMethodList, |
| | | getStandardTree2, |
| | | delStandardMethod, |
| | | addStandardMethod, |
| | | upStandardMethod, |
| | | upStandardMethod, selectIndustryOptions, selectAttachments, uploadAttachment, deleteAttachment, |
| | | } from "@/api/cnas/process/method/standardMethod"; |
| | | export default { |
| | | name: 'StandardMethod', |
| | | components: { |
| | | limsTable, |
| | | limsTable, filePreview, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | queryParams: {}, |
| | | tableData: [], |
| | | column: [ |
| | | { label: "领域", prop: "field", width: "100px" }, |
| | | { label: "行业", prop: "industryNames", width: "140px" }, |
| | | { label: "标准编号", prop: "code", width: "100px" }, |
| | | { label: "检验对象", prop: "structureTestObjectId", width: "140px" }, |
| | | { label: "标准描述", prop: "name", width: "100px" }, |
| | | { label: "标准描述EN", prop: "nameEn", width: "100px" }, |
| | | { label: "备注", prop: "remark" }, |
| | | { label: "资质", prop: "qualificationId" }, |
| | | { |
| | |
| | | name: "编辑", |
| | | type: "text", |
| | | clickFun: (row) => { |
| | | this.title = "编辑"; |
| | | this.addForm = row; |
| | | this.addForm.structureTestObjectId = JSON.parse( |
| | | this.addForm.structureTestObjectId |
| | | ); |
| | | this.addDlog = true; |
| | | this.openEdit(row) |
| | | }, |
| | | }, |
| | | { |
| | | name: "上传附件", type: "text", clickFun: (row) => this.openAttachments(row), |
| | | }, |
| | | { |
| | | name: "下载附件", type: "text", clickFun: (row) => this.downloadAttachments(row), |
| | | }, |
| | | { |
| | | name: "预览附件", type: "text", clickFun: (row) => this.previewAttachments(row), |
| | | }, |
| | | { |
| | | name: "删除", |
| | |
| | | addDlog: false, |
| | | addLoading: false, |
| | | qualificationList: [], |
| | | tandardTree: [], |
| | | industryOptions: [], |
| | | pendingFiles: [], attachmentDialog: false, attachmentList: [], currentMethod: {}, |
| | | previewDialog: false, currentAttachment: {}, previewUrl: '', |
| | | addRules: { |
| | | code: [{ required: true, message: "请输入标准编号", trigger: "blur" }], |
| | | name: [{ required: true, message: "请输入标准描述", trigger: "blur" }], |
| | | nameEn: [ |
| | | { required: true, message: "请输入标准描述EN", trigger: "blur" }, |
| | | ], |
| | | isProduct: [ |
| | | { required: true, message: "请选择是否产品标准", trigger: "change" }, |
| | | ], |
| | |
| | | }, |
| | | mounted() { |
| | | this.getQualificationList(); |
| | | this.selectTestObjectByName(); |
| | | this.loadIndustryOptions(); |
| | | this.getList(); |
| | | }, |
| | | methods: { |
| | |
| | | refreshTable() { |
| | | this.page.current = 1; |
| | | this.getList(); |
| | | this.selectTestObjectByName(); |
| | | this.loadIndustryOptions(); |
| | | }, |
| | | refresh() { |
| | | this.selectTestObjectByName(); |
| | | this.loadIndustryOptions(); |
| | | this.page.current = 1; |
| | | this.queryParams = {}; |
| | | this.getList(); |
| | | }, |
| | | // 权限分配 |
| | | getPower() { |
| | | let power = JSON.parse(sessionStorage.getItem("power")); |
| | | let up = false; |
| | | let del = false; |
| | | let add = false; |
| | | let inPower = false; |
| | | for (var i = 0; i < power.length; i++) { |
| | | if (power[i].menuMethod == "addStandardMethod") { |
| | | add = true; |
| | | } |
| | | if (power[i].menuMethod == "delStandardMethod") { |
| | | del = true; |
| | | } |
| | | if (power[i].menuMethod == "upStandardMethod") { |
| | | up = true; |
| | | } |
| | | if (power[i].menuMethod == "importStandardDetails") { |
| | | inPower = true; |
| | | } |
| | | } |
| | | this.addPower = add; |
| | | this.inPower = inPower; |
| | | }, |
| | | openAdd() { |
| | | this.title = "新增"; |
| | | this.addForm = {}; |
| | | this.addForm = { industryIds: [], isProduct: 1, isUse: 1 }; |
| | | this.pendingFiles = []; |
| | | this.addDlog = true; |
| | | }, |
| | | openEdit(row) { |
| | | this.title = "编辑"; |
| | | this.addDlog = true; |
| | | this.addForm = this.HaveJson(row) |
| | | this.addForm.industryIds = this.addForm.industryIds || []; |
| | | }, |
| | | getQualificationList() { |
| | | this.getDicts("cnas_method_qualification").then((response) => { |
| | |
| | | this.qualificationList = arr; |
| | | }); |
| | | }, |
| | | selectTestObjectByName() { |
| | | getStandardTree2().then((res) => { |
| | | res.data.forEach((a) => { |
| | | this.cascaderFieldData(a); |
| | | }); |
| | | this.tandardTree = res.data; |
| | | }); |
| | | }, |
| | | cascaderFieldData(val) { |
| | | if (val.children === undefined) { |
| | | return; |
| | | } else if (val.children.length == 0) { |
| | | delete val.children; |
| | | } else { |
| | | val.children.forEach((a) => { |
| | | this.cascaderFieldData(a); |
| | | }); |
| | | } |
| | | }, |
| | | loadIndustryOptions() { selectIndustryOptions().then(res => { this.industryOptions = res.data || []; }); }, |
| | | submitProduct(formName) { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | this.addLoading = true; |
| | | let addForm = JSON.parse(JSON.stringify(this.addForm)); |
| | | addForm.structureTestObjectId = JSON.stringify( |
| | | addForm.structureTestObjectId |
| | | ); |
| | | if (this.title == "新增") { |
| | | addStandardMethod(addForm) |
| | | .then((res) => { |
| | | const id = res.data; |
| | | if (!id) throw new Error('新增标准未返回主键ID'); |
| | | return Promise.all(this.pendingFiles.map(item => { |
| | | const formData = new FormData(); |
| | | formData.append('file', item.raw); |
| | | return uploadAttachment(formData, id); |
| | | })); |
| | | }).then(() => { |
| | | this.addLoading = false; |
| | | if (res.code != 200) { |
| | | return; |
| | | } |
| | | this.$message.success("提交成功"); |
| | | this.getList(); |
| | | this.addDlog = false; |
| | |
| | | } |
| | | }); |
| | | }, |
| | | beforeFileUpload(file) { if (file.size > 10 * 1024 * 1024) { this.$message.error('上传文件不超过10MB'); return false; } return true; }, |
| | | pendingFileChange(file, files) { this.pendingFiles = files; }, |
| | | pendingFileRemove(file, files) { this.pendingFiles = files; }, |
| | | openAttachments(row) { this.currentMethod = row; this.attachmentDialog = true; this.loadAttachments(); }, |
| | | downloadAttachments(row) { |
| | | selectAttachments({ standardMethodId: row.id }).then(res => { |
| | | const attachments = res.data || []; |
| | | if (!attachments.length) this.$message.warning('暂无附件'); |
| | | else if (attachments.length === 1) this.downloadAttachment(attachments[0]); |
| | | else this.openAttachments(row); |
| | | }); |
| | | }, |
| | | previewAttachments(row) { |
| | | selectAttachments({ standardMethodId: row.id }).then(res => { |
| | | const attachments = res.data || []; |
| | | if (!attachments.length) this.$message.warning('暂无附件'); |
| | | else if (attachments.length === 1) this.previewAttachment(attachments[0]); |
| | | else this.openAttachments(row); |
| | | }); |
| | | }, |
| | | loadAttachments() { selectAttachments({ standardMethodId: this.currentMethod.id }).then(res => { this.attachmentList = res.data || []; }); }, |
| | | attachmentUploadSuccess(res) { if (res.code === 200) { this.$message.success('上传成功'); this.loadAttachments(); } }, |
| | | downloadAttachment(row) { this.$download.saveAs(row.fileUrl, row.fileName); }, |
| | | previewAttachment(row) { this.currentAttachment = row; this.previewUrl = /\.(jpg|jpeg|png|gif)$/i.test(row.fileUrl) ? this.javaApi + '/img/' + row.fileUrl : this.javaApi + '/word/' + row.fileUrl; this.previewDialog = true; }, |
| | | removeAttachment(row) { this.$confirm('是否删除该附件?', '提示', { type: 'warning' }).then(() => deleteAttachment({ id: row.id })).then(() => this.loadAttachments()); }, |
| | | // 删除 |
| | | handleDelete(row) { |
| | | this.$confirm("是否删除该条数据?", "提示", { |
| | | confirmButtonText: "确定", |
| | |
| | | }) |
| | | .then(() => { |
| | | delStandardMethod({ id: row.id }).then((res) => { |
| | | if (res.code == 201) return; |
| | | this.$message.success("删除成功"); |
| | | this.getList(); |
| | | }); |
| | |
| | | .catch(() => { }); |
| | | }, |
| | | }, |
| | | computed: { attachmentAction() { return this.javaApi + '/standardMethod/uploadAttachment?standardMethodId=' + this.currentMethod.id; } }, |
| | | }; |
| | | </script> |