luojie
2 months ago
7 changed files with 471 additions and 15 deletions
Split View
Diff Options
-
+2 -1package.json
-
+3 -1src/views/business/comps/template/TemplateTable.vue
-
+307 -0src/views/business/comps/template/comps/gsp/GSP009.vue
-
+8 -2src/views/business/comps/template/comps/lba/LBA006.vue
-
+12 -3src/views/business/comps/template/comps/pcr/PCR002.vue
-
+97 -0src/views/business/comps/template/dialog/ImportExcelDialog.vue
-
+42 -8src/views/business/comps/template/mixins/templateMixin.js
+ 2
- 1
package.json
View File
+ 3
- 1
src/views/business/comps/template/TemplateTable.vue
View File
+ 307
- 0
src/views/business/comps/template/comps/gsp/GSP009.vue
View File
| @ -0,0 +1,307 @@ | |||
| <!-- 配体结合分析处理记录表 --> | |||
| <template> | |||
| <div> | |||
| <div class="detail-container"> | |||
| <div class="detail-title"><img src="@/assets/images/detail-title.png">{{ formData.bdmc }}<img src="@/assets/images/detail-title.png" /></div> | |||
| <div class="detail-content"> | |||
| <div class="content"> | |||
| <BaseInfoFormPackage fieldItemLabel="template.common.baseInfo" label="template.common.baseInfo" | |||
| ref="baseInfoRef" :formConfig="baseInfoFormConfig" :formData="formData" /> | |||
| <LineLabel label="template.lba.lba006.fxxx" /> | |||
| <div v-if="fillType === 'preFill'" class="mt-20"> | |||
| <el-button type="primary" @click="handleAddParalle(false)">{{ $t('template.lba.lba004.xz') | |||
| }}</el-button> | |||
| </div> | |||
| <!-- 平行配制区域 --> | |||
| <div :label="$t('template.common.pxpz')" | |||
| v-for="(paralleConfig, paralleIndex) in formData.paralleConfigs" | |||
| :key="'paralle_' + paralleIndex"> | |||
| <div class="template-form-item"> | |||
| <div class="config-header-end" v-if="fillType === 'preFill'"> | |||
| <el-button type="danger" plain @click="deleteParalleConfig(paralleIndex)">{{ $t('template.lba.lba004.sc')}}</el-button> | |||
| </div> | |||
| <BaseInfoFormPackage @clickable="(e) => handleClickable('paralle', paralleIndex, e)" | |||
| :ref="`paralleStepFormPackageRef_${paralleIndex}`" :formConfig="paralleStepFormConfig" | |||
| :formData="paralleConfig" :prefixKey="'paralle' + paralleIndex" | |||
| :fieldItemLabel="$t('template.lba.lba004.xszj')" /> | |||
| </div> | |||
| </div> | |||
| <BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark" | |||
| ref="remarkRef" :formConfig="remarkConig" :formData="formData" /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- <button @click="onSave">保存</button> --> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import BaseInfoFormPackage from "@/components/Template/BaseInfoFormPackage"; | |||
| import LineLabel from "@/components/Template/LineLabel"; | |||
| import TableList from "@/components/Template/Table"; | |||
| import Step from "@/components/Template/Step"; | |||
| import templateMixin from "../../mixins/templateMixin"; | |||
| import { EventBus } from "@/utils/eventBus"; | |||
| import { uniqeResource,uniqeResourceOne } from "@/utils/calUnitTools"; | |||
| import { duplicateResource } from "@/utils/index.js"; | |||
| import { debounce } from 'lodash-es'; | |||
| import CustomTable from '@/components/Template/CustomTable.vue'; | |||
| import TableOpertaionDelete from "@/components/Template/operation/TableOpertaionDelete.vue" | |||
| export default { | |||
| name: "GSP009", | |||
| components: { BaseInfoFormPackage, LineLabel, TableList, Step,CustomTable,TableOpertaionDelete }, | |||
| mixins: [templateMixin], | |||
| props: { | |||
| fillType: { | |||
| type: String, | |||
| default: 'preFill', | |||
| }, | |||
| }, | |||
| computed: { | |||
| // 备注表单配置 | |||
| remarkConig() { | |||
| return [ | |||
| { | |||
| type: "cellItem", | |||
| config: { | |||
| remark: { | |||
| label: "", | |||
| type: "textarea", | |||
| fillType: "actFill", | |||
| span: 1, | |||
| placeholder: 'template.common.remarkPlaceholder', | |||
| maxlength: 1000, | |||
| rows: 5 | |||
| } | |||
| } | |||
| } | |||
| ] | |||
| }, | |||
| // 试验基本信息表单配置 | |||
| baseInfoFormConfig() { | |||
| return [ | |||
| { | |||
| type: "cardItem", | |||
| config: { | |||
| studyMc: { | |||
| label: 'template.common.testName', | |||
| type: "input", | |||
| disabled: true, | |||
| }, | |||
| studySn: { | |||
| label: 'template.common.testNumber', | |||
| type: "input", | |||
| disabled: true, | |||
| }, | |||
| methodCode: { | |||
| label: 'template.common.methodCode', | |||
| type: "input", | |||
| fillType: "actFill", | |||
| maxlength: 50 | |||
| }, | |||
| versionNum: { | |||
| label: 'template.common.versionNumber', | |||
| type: "inputNumber", | |||
| fillType: "actFill", | |||
| prepend: "V", | |||
| maxlength: 50 | |||
| }, | |||
| } | |||
| }, | |||
| { | |||
| type: "conditionItem", | |||
| label: 'template.lba.lba006.fxtj', | |||
| config: { | |||
| act: { | |||
| label: 'template.common.actualFill', | |||
| type: "select", | |||
| fillType: "actFill", | |||
| otherCode: "actOther", | |||
| multiple: true, | |||
| options: this.getDictOptions('business_pztj') | |||
| } | |||
| } | |||
| }, | |||
| { | |||
| type: "cellItem", | |||
| label: 'template.lba.lba006.fxsj', | |||
| config: { | |||
| startDate: { | |||
| label: 'template.common.startTime', | |||
| type: "input", | |||
| }, | |||
| endDate: { | |||
| label: 'template.common.endTime', | |||
| type: "input", | |||
| }, | |||
| } | |||
| } | |||
| ] | |||
| }, | |||
| paralleStepFormConfig(){ | |||
| return [ | |||
| { | |||
| type: 'step', | |||
| config: { | |||
| jcb: { | |||
| label: 'template.lba.lba006.jcb', | |||
| type: 'jcb', | |||
| fillType: 'actFill', | |||
| maxlength: 20 | |||
| }, | |||
| jg: { | |||
| label: 'template.lba.lba006.jg', | |||
| type: "sj", | |||
| fillType: "actFill", | |||
| otherLabel: " ", | |||
| otherCode: "jgOther", | |||
| otherMaxlength: 100, | |||
| multiple: false, | |||
| options: this.getDictOptions('business_lba_jg') | |||
| }, | |||
| ms: { | |||
| label: 'template.lba.lba006.sjwjm', | |||
| type: 'text', | |||
| } | |||
| } | |||
| } | |||
| ] | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| formData: {} | |||
| }; | |||
| }, | |||
| mounted() { | |||
| this.handleAddParalle(true); | |||
| }, | |||
| methods: { | |||
| //获取已填写的表单数据 | |||
| getFilledFormData() { | |||
| const baseData = this.$refs.baseInfoRef.getFilledFormData(); | |||
| const remarkData = this.$refs.remarkRef.getFilledFormData(); | |||
| // 获取所有平行配制数据 | |||
| const paralleConfigsData = []; | |||
| if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) { | |||
| for (let i = 0; i < this.formData.paralleConfigs.length; i++) { | |||
| const paralleFormData = this.$refs[`paralleStepFormPackageRef_${i}`][0].getFilledFormData(); | |||
| paralleConfigsData.push({ | |||
| ...paralleFormData, | |||
| showParalleConfig: true | |||
| }); | |||
| } | |||
| } | |||
| return { | |||
| ...baseData, | |||
| ...remarkData, | |||
| paralleConfigs: paralleConfigsData, | |||
| } | |||
| }, | |||
| //获取填写完成的表单数据 | |||
| async getFormData() { | |||
| //先校验再获取值 | |||
| const validFlag = await this.validFields(); | |||
| if (!validFlag) { | |||
| return false; | |||
| } | |||
| let content = this.getFilledFormData(); | |||
| return content | |||
| }, | |||
| //只做校验 | |||
| async validFields() { | |||
| // 构建需要验证的引用数组 | |||
| let refsToValidate = ["baseInfoRef", "remarkRef"]; | |||
| // 添加平行配制相关的引用 | |||
| if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) { | |||
| for (let i = 0; i < this.formData.paralleConfigs.length; i++) { | |||
| refsToValidate.push(`paralleStepFormPackageRef_${i}`); | |||
| } | |||
| } | |||
| return await this.validFormFields(refsToValidate); | |||
| }, | |||
| getResource() { | |||
| let content = this.getFilledFormData(); | |||
| //使用的试剂、仪器 | |||
| this.resourceTmp = [] | |||
| this.yqResourceTmp = [] | |||
| return this.resourceTmp; | |||
| }, | |||
| //保存 | |||
| async onSave() { | |||
| const formData = this.getStepResource(); | |||
| console.log(formData, "formData") | |||
| }, | |||
| //新增平行配制 | |||
| handleAddParalle(init) { | |||
| debugger | |||
| let isAdd = !init | |||
| if(init && (!this.formData.paralleConfigs || this.formData.paralleConfigs.length===0)){ | |||
| isAdd = true | |||
| } | |||
| if(isAdd){ | |||
| // 初始化平行配制配置列表 | |||
| if (!this.formData.paralleConfigs) { | |||
| this.$set(this.formData, 'paralleConfigs', []); | |||
| } | |||
| // 添加新的平行配制配置 | |||
| this.formData.paralleConfigs.push({ | |||
| showParalleConfig: true | |||
| }); | |||
| } | |||
| //todo: 需要回调保存？ | |||
| debugger | |||
| }, | |||
| // 删除平行配制配置 | |||
| deleteParalleConfig(index) { | |||
| if(this.formData.paralleConfigs.length===1){ | |||
| // this.$message.error("至少需要1个"); | |||
| return; | |||
| } | |||
| this.formData.paralleConfigs.splice(index, 1); | |||
| }, | |||
| // 删除表格行 | |||
| deleteRow(rowIndex, type, configIndex = 0) { | |||
| // 根据类型删除对应的表格行 | |||
| if (type === 'ladder') { | |||
| const tableRef = this.$refs[`ladderStepTableRef_${configIndex}`]; | |||
| if (tableRef) { | |||
| tableRef.deleteRow(rowIndex); | |||
| } | |||
| } else if (type === 'paralle') { | |||
| const tableRef = this.$refs[`paralleStepTableRef_${configIndex}`]; | |||
| if (tableRef) { | |||
| tableRef[0].deleteRow(rowIndex); | |||
| } | |||
| } | |||
| }, | |||
| } | |||
| }; | |||
| </script> | |||
| <style rel="stylesheet/scss" lang="scss"> | |||
| .mt-20 { | |||
| margin-top: 20px; | |||
| } | |||
| .print-btn { | |||
| margin-bottom: 20px; | |||
| } | |||
| .config-header-end { | |||
| display: flex; | |||
| justify-content: flex-end; | |||
| align-items: center; | |||
| margin-bottom: 15px; | |||
| font-weight: bold; | |||
| font-size: 16px; | |||
| color: #303133; | |||
| } | |||
| </style> | |||
+ 8
- 2
src/views/business/comps/template/comps/lba/LBA006.vue
View File
+ 12
- 3
src/views/business/comps/template/comps/pcr/PCR002.vue
View File
+ 97
- 0
src/views/business/comps/template/dialog/ImportExcelDialog.vue
View File
| @ -0,0 +1,97 @@ | |||
| <template> | |||
| <div> | |||
| <!-- 导入excel模板 --> | |||
| <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="open" | |||
| width="400px" @close="close" append-to-body> | |||
| <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :disabled="upload.isUploading" action="" | |||
| :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> | |||
| <i class="el-icon-upload"></i> | |||
| <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> | |||
| <div class="el-upload__tip text-center" slot="tip"> | |||
| <span>仅允许导入xls、xlsx格式文件</span> | |||
| </div> | |||
| </el-upload> | |||
| <div slot="footer" class="dialog-footer"> | |||
| <el-button @click="cancel">{{ $t('form.cancel') }}</el-button> | |||
| <el-button type="primary" @click="save">{{ $t('form.confirm') }}</el-button> | |||
| </div> | |||
| </el-dialog> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import * as XLSX from 'xlsx' | |||
| export default { | |||
| name: "ImportEccelDialog", | |||
| components: {}, | |||
| data() { | |||
| return { | |||
| title: this.$t('form.modify'), | |||
| open: false, | |||
| upload: { | |||
| // 是否禁用上传 | |||
| isUploading: false, | |||
| }, | |||
| excelData: null, | |||
| } | |||
| }, | |||
| computed: { | |||
| }, | |||
| created() { | |||
| }, | |||
| methods: { | |||
| show() { | |||
| this.open = true | |||
| }, | |||
| cancel() { | |||
| this.open = false | |||
| }, | |||
| close() { | |||
| if (!this.isChecked) { | |||
| this.$emit('cancel') | |||
| } | |||
| }, | |||
| // 文件上传中处理 | |||
| handleFileUploadProgress(event, file, fileList) { | |||
| this.upload.isUploading = true | |||
| console.log('.....') | |||
| }, | |||
| // 文件上传成功处理 | |||
| handleFileSuccess(response, file, fileList) { | |||
| this.open = false | |||
| this.upload.isUploading = false | |||
| this.$refs.upload.clearFiles() | |||
| }, | |||
| // 提交上传文件 | |||
| save() { | |||
| const file = this.$refs.upload.uploadFiles | |||
| if (!file || file.length === 0 || !file[0].name.toLowerCase().endsWith('.xls') && !file[0].name.toLowerCase().endsWith('.xlsx')) { | |||
| this.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。") | |||
| return | |||
| } | |||
| const reader = new FileReader() | |||
| reader.onload = (event) => { | |||
| try { | |||
| const data = event.target.result | |||
| // 解析 Excel | |||
| const workbook = XLSX.read(data, { type: 'binary' }) | |||
| // 获取第一个工作表 | |||
| const firstSheetName = workbook.SheetNames[0] | |||
| const worksheet = workbook.Sheets[firstSheetName] | |||
| // 转为二维数组（header:1 表示保留原始行列） | |||
| const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) | |||
| this.excelData = jsonData | |||
| this.$emit('onLoadData', this.excelData) | |||
| } catch (error) { | |||
| console.error('解析失败：', error) | |||
| this.$modal.msgError('文件解析失败，请检查格式', error) | |||
| } | |||
| } | |||
| reader.readAsArrayBuffer(file[0].raw); | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||