luojie
1 week ago
10 changed files with 668 additions and 116 deletions
Split 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> | |||