eln_TD
/
eln_web
5
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat:template

luojie
luojie 2 weeks ago
parent
d3e565cd42
commit
ef4f4531a2
3 changed files with 362 additions and 2 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +233
    -0
      src/components/Template/BaseInfoFormPcakge.vue
  2. +6
    -2
      src/views/business/comps/template/TemplateTable.vue
  3. +123
    -0
      src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue

+ 233
- 0
src/components/Template/BaseInfoFormPcakge.vue View File

@ -0,0 +1,233 @@
<template>
<div>
<div v-for="(item, index) in formConfig" :key="index">
<template v-if="item.type === 'cardItem'">
<div class="grid-container">
<div v-for="(sItem, sIndex) in item.config" class="form-item" :class="sItem.span == 1 ? 'full-row' : ''"
:key="sIndex">
<template v-if="sItem.type === 'input'">
<div class="form-title">{{ sItem.label }}</div>
<el-input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
v-model="formFields[sIndex]" :class="sItem.borderType | getBorderType"
:placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)" />
</template>
</div>
</div>
</template>
<template v-else-if="item.type === 'conditionItem'">
<div class="form-item ">
<div class="form-title fs-16">{{ item.label }}</div>
<div v-for="(sItem, sIndex) in item.config" class="flex">
<div class="flex1 mr-24">
<div class="form-title">{{ sItem.label }}</div>
<div class="flex">
<el-select class="flex1" v-model="formFields[sIndex]" multiple placeholder="请选择">
<el-option
v-for="op in sItem.options"
:key="op.value"
:label="op.label"
:value="op.value">
</el-option>
</el-select>
</div>
</div>
<div class="flex1" v-show = "isShowOther(formFields[sIndex])">
<div class="form-title">其他</div>
<div class="flex">
<el-input v-model="formFields[sItem.otherCode]" :class="sItem.borderType | getBorderType"></el-input>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
components: {
},
props: {
formConfig: {
type: Array,
value: () => [],
},
formData: {
type: Object,
value: () => ({})
}
},
data() {
return {
formFields: {},//表单双休绑定字段
allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
};
},
watch: {
immediate: true,
formData: {
handler(v) {
this.handleFormField();
}
}
},
mounted() {
this.handleFormField();
},
filters: {
getBorderType(type) {
const typeObj = {
orange: "orange-border",
green: "green-border",
blue: "blue-border",
}
return typeObj[type] || ""
},
},
methods: {
isShowOther(v = []){
return v.includes(-1);
},
//根据formConifg回填form表单数据
handleFormField() {
const result = {};
let config = {};
const { formConfig, formData } = this;
formConfig.forEach((item) => {
if (item.config) {
config = { ...config, ...item.config }
Object.keys(item.config).forEach(key => {
const currentConfig = item.config[key];
result[key] = formData[key];
if(currentConfig.otherCode){//如果有其它的字段需要赋值给formData
const {otherCode} = currentConfig;
result[otherCode] = formData[otherCode]
config[otherCode] = {label:"其他",type:"input"}
}
});
console.log(item.config,"config")
if(item.config?.otherCode){
config[item.config?.otherCode] = item.config?.otherCode;
}
}
})
this.formFields = result;
this.allFieldsConfig = config;
console.log(config, "allFieldsConfig")
},
getFormData() {
const { formFields, allFieldsConfig } = this;
for (const key in formFields) {
if (!formFields[key]) {
const o = allFieldsConfig[key];
let prefix = "";
if (o.type === "input") {
prefix = "填写"
} else {
prefix = "选择"
}
this.$message.error(`${o.label}还未${prefix}请${prefix}后再提交`);
return;
}
}
return formFields;
}
},
}
</script>
<style lang="scss" >
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 默认2列 */
gap: 0 24px;
}
.form-item {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
margin-top: 24px;
padding: 24px;
border-radius: 5px 5px;
}
/* 或者使用 span 语法 */
.full-row {
grid-column: span 2;
}
.form-title {
margin-bottom: 12px;
font-size: 14px;
font-weight: normal;
color:#606266;
}
.orange-border {
input {
border-color: #f9c588;
&:focus {
border-color: #f9c588;
}
&:hover {
border-color: #f9c588;
}
}
}
.green-border {
input {
border-color: green;
&:focus {
border-color: green;
}
&:hover {
border-color: green;
}
}
}
.blue-border {
input {
border-color: #4ea2ff;
&:focus {
border-color: #4ea2ff;
}
&:hover {
border-color: #4ea2ff;
}
}
}
.fs-16{
font-size: 0.96rem;
font-weight: bold;
color:#464647
}
.flex1{
flex:1;
}
.flex{
display: flex;
}
.mr-24{
margin-right: 24px;
}
</style>

+ 6
- 2
src/views/business/comps/template/TemplateTable.vue View File

@ -1,15 +1,19 @@
<template>
<div class="template-table">
<SP001 v-if="sn == 'SP001'" />
<SP001 v-if="sn == 'SP0012'" />
<SWYPFXRYPZB v-if="sn == 'SP001'" />
</div>
</template>
<script>
//色谱
import SP001 from './comps/sp/SP001';
import SWYPFXRYPZB from "./comps/sp/SWYPFXRYPZB.vue";
export default {
name: "TemplateTable",
components: { SP001 },
components: {
SP001,SWYPFXRYPZB
},
props: {
sn: {
type: String,

+ 123
- 0
src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue View File

@ -0,0 +1,123 @@
<!-- 生物样品分析溶液配制表 -->
<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">
<div class="content-title">
<div class="line"></div>
<div class="subtitle"> 试验基本信息</div>
</div>
<BaseInfoFormPcakge ref = "baseInfo" :formConfig = "formConfig" :formData = "formData"/>
</div>
</div>
<button @click = "onSave">保存</button>
</div>
</div>
</template>
<script>
import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge"
export default {
name: "SWYPFXRYPZB",
components: { BaseInfoFormPcakge },
props: {
value: {
type: {},
default: () => { },
}
},
watch: {
value: {
immediate: true,
handler(v) {
}
}
},
data() {
return {
formConfig: [
{
type:"cardItem",
config:{
name:{
label:"试验名称",
type:"input",
disabled:true,
},
code:{
label:"试验编号",
type:"input",
disabled:true,
},
methodCode:{
label:"方法编号",
type:"input",
borderType:"blue"
},
versionNum:{
label:"版本号",
type:"input",
borderType:"orange"
},
}
},
{
type:"conditionItem",
label:"试验配制条件",
config:{
pre:{
label:"预填",
type:"select",
borderType:"blue",
options:[
{label:"白光",value:1},
{label:"黄光",value:3},
{label:"其他",value:-1},
],
otherCode:"other1",
},
act:{
label:"实际",
type:"select",
borderType:"orange",
otherCode:"other2",
options:[
{label:"白光",value:1},
{label:"黄光",value:3},
{label:"其他",value:-1},
]
}
}
}
],
formData:{}
};
},
mounted() {
setTimeout(()=>{
this.formData = {
code:"code1",name:"name1"
}
},3000)
},
methods: {
onSave(){
const result = this.$refs.baseInfo.getFormData();
console.log(result,"reee")
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.b1 {
input {
border-color: aquamarine;
}
}
</style>

Write Preview
Loading…
Cancel
Save