luojie
1 week ago
10 changed files with 668 additions and 116 deletions
Unified View
Diff Options
-
+41 -34src/components/Template/BaseInfoFormPcakge.vue
-
+163 -0src/components/Template/CustomTable.vue
-
+33 -29src/components/Template/Step.vue
-
+1 -0src/components/Template/StepComponents/ContainerStep.vue
-
+1 -1src/store/modules/template.js
-
+22 -2src/views/business/comps/template/TemplateTable.vue
-
+297 -0src/views/business/comps/template/comps/sp/Demo.vue
-
+106 -46src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
-
+3 -3src/views/business/comps/template/mixins/templateMixin.js
-
+1 -1src/views/business/template/list.vue
+ 41
- 34
src/components/Template/BaseInfoFormPcakge.vue
View File
+ 163
- 0
src/components/Template/CustomTable.vue
View File
| @ -0,0 +1,163 @@ | |||||
| <template> | |||||
| <div class="custom-table-wrapper"> | |||||
| <div class="custom-table-header"> | |||||
| <div class="custom-table-row"> | |||||
| <div | |||||
| v-for="(col, index) in columns" | |||||
| :key="index" | |||||
| class="custom-table-cell header-cell" | |||||
| :style="{ width: col.width ? col.width + 'px' : 'auto' }" | |||||
| > | |||||
| <div>{{ col.label }}</div> | |||||
| <template v-if="col.showSelect&& col.options"> | |||||
| <select v-model="col.selected" @change="onHeaderSelectChange(index, $event)"> | |||||
| <option value="" disabled>{{ col.placeholder || '请选择' }}</option> | |||||
| <option | |||||
| v-for="opt in col.options" | |||||
| :key="opt.value" | |||||
| :value="opt.value" | |||||
| > | |||||
| {{ opt.label }} | |||||
| </option> | |||||
| </select> | |||||
| </template> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="custom-table-body"> | |||||
| <div | |||||
| v-for="(row, rowIndex) in dataSource" | |||||
| :key="rowIndex" | |||||
| class="custometable-row" | |||||
| > | |||||
| <div | |||||
| v-for="(col, colIndex) in columns" | |||||
| :key="colIndex" | |||||
| class="custom-table-cell body-cell" | |||||
| :style="{ width: col.width ? col.width + 'px' : 'auto' }" | |||||
| > | |||||
| {{ row[col.prop] }} | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: 'CustomTable', | |||||
| props: { | |||||
| columns: { | |||||
| type: Array, | |||||
| required: true, | |||||
| // 示例格式： | |||||
| // [ | |||||
| // { label: '姓名', prop: 'name' }, | |||||
| // { label: '状态', prop: 'status', type: 'select', options: [{value:1,label:'启用'},...], selected: null } | |||||
| // ] | |||||
| }, | |||||
| dataSource: { | |||||
| type: Array, | |||||
| required: true | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| onHeaderSelectChange(colIndex, event) { | |||||
| this.$emit('header-select-change', colIndex, event.target.value); | |||||
| } | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style scoped> | |||||
| .custom-table-wrapper { | |||||
| border: 1px solid #ebeef5; | |||||
| border-radius: 4px; | |||||
| overflow: hidden; | |||||
| font-size: 14px; | |||||
| color: #606266; | |||||
| } | |||||
| /* 表头 */ | |||||
| .custom-table-header { | |||||
| background-color: #f5f7fa; | |||||
| border-bottom: 1px solid #ebeef5; | |||||
| white-space: nowrap; | |||||
| display: block; | |||||
| } | |||||
| .custom-table-body { | |||||
| max-height: 300px; /* 可根据需要调整或由父组件控制 */ | |||||
| } | |||||
| /* 共同行样式 */ | |||||
| .custom-table-row { | |||||
| display: table; | |||||
| width: 100%; | |||||
| table-layout: fixed; | |||||
| } | |||||
| .custometable-row { | |||||
| display: table; | |||||
| width: 100%; | |||||
| table-layout: fixed; | |||||
| } | |||||
| /* 单元格 */ | |||||
| .custom-table-cell { | |||||
| display: table-cell; | |||||
| padding: 12px 10px; | |||||
| text-align: left; | |||||
| vertical-align: middle; | |||||
| border-right: 1px solid #ebeef5; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| .custom-table-cell:last-child { | |||||
| border-right: none; | |||||
| } | |||||
| .header-cell { | |||||
| font-weight: bold; | |||||
| color: #909399; | |||||
| background-color: #f5f7fa; | |||||
| } | |||||
| .body-cell { | |||||
| color: #606266; | |||||
| background-color: #fff; | |||||
| } | |||||
| /* select 样式（模仿 Element UI） */ | |||||
| .header-cell select { | |||||
| width: 100%; | |||||
| padding: 4px 8px; | |||||
| border: 1px solid #dcdfe6; | |||||
| border-radius: 4px; | |||||
| outline: none; | |||||
| background-color: #fff; | |||||
| font-size: 13px; | |||||
| color: #606266; | |||||
| appearance: none; /* 隐藏默认箭头（可选） */ | |||||
| background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e"); | |||||
| background-repeat: no-repeat; | |||||
| background-position: right 8px center; | |||||
| background-size: 14px; | |||||
| padding-right: 28px; | |||||
| } | |||||
| /* 滚动容器：如果整体宽度超限，显示横向滚动条 */ | |||||
| .custom-table-wrapper { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| max-width: 100%; /* 父容器决定宽度 */ | |||||
| overflow-x: auto; | |||||
| } | |||||
| .custom-table-header, | |||||
| .custom-table-body { | |||||
| min-width: 100%; | |||||
| } | |||||
| </style> | |||||
+ 33
- 29
src/components/Template/Step.vue
View File
+ 1
- 0
src/components/Template/StepComponents/ContainerStep.vue
View File
+ 1
- 1
src/store/modules/template.js
View File
+ 22
- 2
src/views/business/comps/template/TemplateTable.vue
View File
+ 297
- 0
src/views/business/comps/template/comps/sp/Demo.vue
View File
| @ -0,0 +1,297 @@ | |||||
| <!-- 生物样品分析溶液配制表 --> | |||||
| <template> | |||||
| <div> | |||||
| <div class="detail-container"> | |||||
| <div class="detail-title"><img src="@/assets/images/detail-title.png">生物样品分析溶液配制表<img | |||||
| src="@/assets/images/detail-title.png" /></div> | |||||
| <div class="detail-content"> | |||||
| <div class="content"> | |||||
| <LineLabel label = "试验基本信息"/> | |||||
| <BaseInfoFormPcakge ref = "baseInfo" :formConfig = "formConfig" :formData = "formData"/> | |||||
| <LineLabel class="mt-20" label = "试验试剂信息"/> | |||||
| <TableList class="mt-20" :columns = "sysjColumns" :dataSource = "dataSource"/> | |||||
| <LineLabel class="mt-20" label = "仪器使用信息"/> | |||||
| <TableList class="mt-20" :columns = "yqsColumns" :dataSource = "dataSource"/> | |||||
| <LineLabel class="mt-20" label = "存储条件"/> | |||||
| <BaseInfoFormPcakge ref = "storageCondition" :formConfig = "storageFormConfig" :formData = "formData"/> | |||||
| <LineLabel class="mt-20" label = "操作步骤"/> | |||||
| <div class="template-form-item"> | |||||
| <BaseInfoFormPcakge ref = "stepFormPackage" :formConfig = "stepFormConfig" :formData = "formData"/> | |||||
| <!-- <CustomTable class="mt-20" :columns = "stepColumns" :dataSource = "stepDataSource"/> --> | |||||
| </div> | |||||
| <Step ref = "stepRef"></Step> | |||||
| </div> | |||||
| </div> | |||||
| <button @click = "onSave">保存</button> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge"; | |||||
| import LineLabel from "@/components/Template/LineLabel"; | |||||
| import TableList from "@/components/Template/Table"; | |||||
| import Step from "@/components/Template/Step"; | |||||
| import templateMixin from "../../mixins/templateMixin"; | |||||
| import CustomTable from '@/components/Template/CustomTable.vue' | |||||
| export default { | |||||
| name: "SWYPFXRYPZB", | |||||
| components: { BaseInfoFormPcakge,LineLabel,TableList,Step,CustomTable }, | |||||
| mixins: [templateMixin], | |||||
| props: { | |||||
| value: { | |||||
| type: {}, | |||||
| default: () => { }, | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| value: { | |||||
| immediate: true, | |||||
| handler(v) { | |||||
| } | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| dataSource:[{name:"名称1"}], | |||||
| stepDataSource:[{ | |||||
| code1:"目标溶液编号1", | |||||
| code1:"目标溶液编号1", | |||||
| code1:"目标溶液编号1", | |||||
| code1:"目标溶液编号1", | |||||
| code1:"目标溶液编号1", | |||||
| code1:"目标溶液编号1", | |||||
| code1:"目标溶液编号1", | |||||
| code1:"目标溶液编号1", | |||||
| code1:"目标溶液编号1", | |||||
| code2:"起始溶液编号1", | |||||
| code3:"预设起始溶液体积1", | |||||
| code4:"实际起始溶液体积1", | |||||
| code5:"预设稀释液体积1", | |||||
| code6:"实际稀释液体积1", | |||||
| code7:"预设目标溶液浓度1", | |||||
| code8:"实际目标溶液浓度1", | |||||
| }], | |||||
| stepColumns:[ | |||||
| {label:"目标溶液编号",prop:"code1",width: 120}, | |||||
| {label:"起始溶液编号",prop:"code2",width: 120}, | |||||
| {label:"起始溶液编号",prop:"code2",width: 120}, | |||||
| {label:"起始溶液编号",prop:"code2",width: 120}, | |||||
| {label:"起始溶液编号",prop:"code2",width: 120}, | |||||
| {label:"起始溶液编号",prop:"code2",width: 120}, | |||||
| {label:"起始溶液编号",prop:"code2",width: 120}, | |||||
| {label:"起始溶液编号",prop:"code2",width: 120}, | |||||
| {label:"起始溶液编号",prop:"code2",width: 120}, | |||||
| { | |||||
| label:"预设起始溶液体积",prop:"code3",showSelect: true, | |||||
| options: [ | |||||
| { label: 'mg', value: 'mg' }, | |||||
| { label: 'ng', value: 'ng' }, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| label:"实际起始溶液体积",prop:"code4",showSelect: true,width: 180, | |||||
| options: [ | |||||
| { label: 'mg', value: 'mg' }, | |||||
| { label: 'ng', value: 'ng' }, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| label:"预设稀释液体积",prop:"code5",showSelect: true,width: 180, | |||||
| options: [ | |||||
| { label: 'mg', value: 'mg' }, | |||||
| { label: 'ng', value: 'ng' }, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| label:"实际稀释液体积",prop:"code6",showSelect: true,width: 180, | |||||
| options: [ | |||||
| { label: 'mg', value: 'mg' }, | |||||
| { label: 'ng', value: 'ng' }, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| label:"预设目标溶液浓度",prop:"code7",showSelect: true,width: 180, | |||||
| options: [ | |||||
| { label: 'mg', value: 'mg' }, | |||||
| { label: 'ng', value: 'ng' }, | |||||
| ] | |||||
| }, | |||||
| { | |||||
| label:"实际目标溶液浓度",prop:"code8",showSelect: true,width: 180, | |||||
| options: [ | |||||
| { label: 'mg', value: 'mg' }, | |||||
| { label: 'ng', value: 'ng' }, | |||||
| ] | |||||
| }, | |||||
| ], | |||||
| sysjColumns:[ | |||||
| {label:"试剂名称",prop:"name"}, | |||||
| {label:"编号",prop:"name"}, | |||||
| {label:"批号",prop:"name"}, | |||||
| {label:"浓度/含量/纯度",prop:"name"}, | |||||
| {label:"来源",prop:"name"}, | |||||
| {label:"失效日",prop:"name"}, | |||||
| ], | |||||
| yqsColumns:[ | |||||
| {label:"仪器名称",prop:"name"}, | |||||
| {label:"仪器型号",prop:"name"}, | |||||
| {label:"仪器编号",prop:"name"}, | |||||
| {label:"下次测试/校准/检定日期",prop:"name"}, | |||||
| ], | |||||
| storageFormConfig:[ | |||||
| { | |||||
| type:"conditionItem", | |||||
| config:{ | |||||
| storageCondition1:{ | |||||
| label:"存储条件", | |||||
| type:"select", | |||||
| fillType:"preFill", | |||||
| options:[], | |||||
| otherCode:"other1", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ], | |||||
| formConfig: [ | |||||
| { | |||||
| type:"cardItem", | |||||
| config:{ | |||||
| name:{ | |||||
| label:"试验名称", | |||||
| type:"input", | |||||
| disabled:true, | |||||
| }, | |||||
| code:{ | |||||
| label:"试验编号", | |||||
| type:"input", | |||||
| disabled:true, | |||||
| }, | |||||
| methodCode:{ | |||||
| label:"方法编号", | |||||
| type:"input", | |||||
| fillType:"preFill", | |||||
| copyFrom:"name",//复制哪个字段 | |||||
| }, | |||||
| versionNum:{ | |||||
| label:"版本号", | |||||
| type:"input", | |||||
| fillType:"actFill" | |||||
| }, | |||||
| } | |||||
| }, | |||||
| { | |||||
| type:"conditionItem", | |||||
| label:"试验配制条件", | |||||
| config:{ | |||||
| pre:{ | |||||
| label:"预填", | |||||
| type:"select", | |||||
| multiple:true, | |||||
| fillType:"preFill", | |||||
| options:[ | |||||
| {label:"白光",value:"1"}, | |||||
| {label:"黄光",value:"3"}, | |||||
| {label:"其他",value:"-1"}, | |||||
| ], | |||||
| otherCode:"other1", | |||||
| }, | |||||
| act:{ | |||||
| label:"实际", | |||||
| type:"select", | |||||
| fillType:"actFill", | |||||
| otherCode:"other2", | |||||
| multiple:true, | |||||
| options:[ | |||||
| {label:"白光",value:"1"}, | |||||
| {label:"黄光",value:"3"}, | |||||
| {label:"其他",value:"-1"}, | |||||
| ] | |||||
| } | |||||
| } | |||||
| }, | |||||
| { | |||||
| type:"cellItem", | |||||
| label:"配置时间", | |||||
| config:{ | |||||
| startDate:{ | |||||
| label:"开始时间", | |||||
| type:"dateTime", | |||||
| }, | |||||
| endDate:{ | |||||
| label:"结束时间", | |||||
| type:"dateTime", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ], | |||||
| stepFormConfig:[ | |||||
| { | |||||
| type:"step", | |||||
| config:{ | |||||
| startDate:{ | |||||
| label:"目标溶液名称", | |||||
| type:"input", | |||||
| }, | |||||
| endDate:{ | |||||
| label:"目标溶液编号", | |||||
| type:"input", | |||||
| subType:"span", | |||||
| subKey:"targetCode1", | |||||
| }, | |||||
| target:{ | |||||
| label:"目标溶液预计浓度", | |||||
| type:"input", | |||||
| subType:"select", | |||||
| subKey:"taget1", | |||||
| subOptions:[ | |||||
| {label:"mg",value:"mg"}, | |||||
| {label:"ng",value:"ng"}, | |||||
| ], | |||||
| }, | |||||
| target:{ | |||||
| label:"目标溶液预计浓度", | |||||
| type:"input", | |||||
| subType:"clickable", | |||||
| subKey:"taget1c", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ], | |||||
| formData:{} | |||||
| }; | |||||
| }, | |||||
| mounted() { | |||||
| setTimeout(()=>{ | |||||
| this.formData = { | |||||
| // code:"code1",name:"name1",act:["1","-1"],taget1:"mg",targetCode1:"123456",taget1c:"可点击" | |||||
| } | |||||
| },3000) | |||||
| setTimeout(()=>{ | |||||
| this.storageFormConfig[0].config.storageCondition1.options = [ | |||||
| {label:"白光",value:"1"}, | |||||
| {label:"黄光",value:"3"}, | |||||
| {label:"其他",value:"-1"}, | |||||
| ] | |||||
| },4000) | |||||
| }, | |||||
| methods: { | |||||
| async onSave(){ | |||||
| // const result1 = await this.$refs.baseInfo.getFormData(); | |||||
| // const result2 = await this.$refs.storageCondition.getFormData(); | |||||
| // const result3 = await this.$refs.stepRef.getFormData(); | |||||
| const result = await this.$refs.stepFormPackage.getFormData(); | |||||
| console.log(result,"reee") | |||||
| } | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style rel="stylesheet/scss" lang="scss"> | |||||
| .mt-20{ | |||||
| margin-top: 20px; | |||||
| } | |||||
| </style> | |||||