Commit 2a883f48 authored by miaojiale's avatar miaojiale

一部分逻辑和样式

parent 648767cb
<template> <template>
<div> <div>
<template v-if="data.type.indexOf('range') != -1"> <template v-if="data.type.indexOf('range') != -1">
<el-form-item label="开始占位内容" <el-form-item label="开始占位内容" label-width="110px">
label-width="110px"> <el-input
<el-input v-model="data.startPlaceholder" v-model="data.startPlaceholder"
clearable clearable
placeholder="开始占位内容"></el-input> placeholder="开始占位内容"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="结束占位内容" <el-form-item label="结束占位内容" label-width="110px">
label-width="110px"> <el-input
<el-input v-model="data.endPlaceholder" v-model="data.endPlaceholder"
clearable clearable
placeholder="结束占位内容"></el-input> placeholder="结束占位内容"
></el-input>
</el-form-item> </el-form-item>
</template> </template>
<el-form-item label="占位内容" <el-form-item label="占位内容" v-else>
v-else> <el-input
<el-input v-model="data.placeholder" v-model="data.placeholder"
clearable clearable
placeholder="占位内容"></el-input> placeholder="占位内容"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="默认值"> <el-form-item label="默认值">
<el-input v-model="data.value" <el-input v-model="data.value" clearable placeholder="默认值"></el-input>
clearable
placeholder="默认值"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="显示格式化" <el-form-item label="显示格式化" label-width="100px">
label-width="100px"> <el-input
<el-input v-model="data.format" v-model="data.format"
clearable clearable
placeholder="显示格式化"></el-input> placeholder="显示格式化"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="值格式化"> <el-form-item label="值格式化">
<el-input v-model="data.valueFormat" <el-input
v-model="data.valueFormat"
clearable clearable
placeholder="值格式化"></el-input> placeholder="值格式化"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="取消范围联动" <el-form-item
label="取消范围联动"
label-width="110px" label-width="110px"
v-if="['timerange', 'daterange', 'datetimerange'].includes(data.type)"> v-if="['timerange', 'daterange', 'datetimerange'].includes(data.type)"
>
<el-switch v-model="data.unlinkPanels"></el-switch> <el-switch v-model="data.unlinkPanels"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="是否禁用"> <el-form-item label="是否禁用">
...@@ -49,40 +55,96 @@ ...@@ -49,40 +55,96 @@
</el-form-item> </el-form-item>
<el-form-item label="是否必填"> <el-form-item label="是否必填">
<el-switch v-model="data.required"></el-switch> <el-switch v-model="data.required"></el-switch>
<el-input
v-if="data.required"
v-model.lazy="data.pattern"
placeholder="校验方法"
></el-input>
</el-form-item> </el-form-item>
</div> </div>
</template> </template>
<script> <script>
let checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("请选择出生日期"))
}
let birthday = new Date(value.replace(/-/g, "/"))
let d = new Date()
let age =
d.getFullYear() -
birthday.getFullYear() -
(d.getMonth() < birthday.getMonth() ||
(d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate())
? 1
: 0)
console.log(age)
if (age < 18) {
callback(new Error("必须年满18岁"))
} else {
callback()
}
}
export default { export default {
name: "config-date", name: "config-date",
props: ['data'], props: ["data"],
data() { data() {
return { return {
validator: { validator: {
type: null, type: null,
required: null, required: null,
pattern: null, pattern: null,
length: null length: null,
} },
} }
}, },
methods: { methods: {
generateRule() { generateRule() {
const rules = []; const rules = []
Object.keys(this.validator).forEach(key => { Object.keys(this.validator).forEach((key) => {
if (this.validator[key]) rules.push(this.validator[key]) if (this.validator[key]) rules.push(this.validator[key])
}) })
this.data.rules = rules this.data.rules = rules
console.log(this.data.rules)
},
// 在表单配置中增加checkAge字段,可以增加校验年龄的方法
ageRule() {
// const rules = []
// Object.keys(this.validator).forEach((key) => {
// if (this.validator[key]) rules.push(this.validator[key])
// })
// this.data.rules = rules
let i = this.data.rules.findIndex((e) => e.trigger)
this.data.rules[i] = { validator: checkAge, trigger: "change" }
console.log(this.data.rules)
}, },
}, },
watch: { watch: {
'data.required': function (val) { "data.required": function (val) {
if (val) this.validator.required = { required: true, message: `${this.data.label}必须填写` } if (val) {
else this.validator.required = null this.validator.required = {
required: true,
message: `${this.data.label}必须填写`,
}
} else {
this.validator.required = null
}
this.generateRule() this.generateRule()
},
"data.pattern": function (val) {
if (val) {
// console.log(val)
if (val == "checkAge") {
this.ageRule()
} }
} else {
this.validator.pattern = null
} }
// delete this.data.pattern
// this.generateRule()
},
},
} }
</script> </script>
...@@ -121,6 +121,7 @@ ...@@ -121,6 +121,7 @@
:item="item" :item="item"
:columns="columns.column || columns.children.column" :columns="columns.column || columns.children.column"
:group="options.group" :group="options.group"
@formChange="formChange"
></form-item-self> ></form-item-self>
</el-col> </el-col>
</template> </template>
...@@ -186,6 +187,30 @@ export default { ...@@ -186,6 +187,30 @@ export default {
handleChange(key, val) { handleChange(key, val) {
if (this.form.hasOwnProperty(key)) this.form[key] = val if (this.form.hasOwnProperty(key)) this.form[key] = val
}, },
// 切换不符合筛查条件的显示
formChange() {
console.log(this.form)
let arr = [
"is_one_year",
"is_subtotal_history",
"is_ppi",
"is_symptom",
"is_subtotal_history",
"is_disease",
"is_tumour",
]
let flag = 0
for (let i = 0; i < arr.length; i++) {
if (this.form[arr[i]] && this.form[arr[i]] == 0) {
flag++
}
}
if (flag == 0) {
this.$emit("showError", false)
} else {
this.$emit("showError", true)
}
},
}, },
} }
</script> </script>
......
...@@ -419,27 +419,6 @@ export default { ...@@ -419,27 +419,6 @@ export default {
type: String, type: String,
}, },
data() { data() {
let checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("请选择出生日期"))
}
let birthday = new Date(value.replace(/-/g, "/"))
let d = new Date()
let age =
d.getFullYear() -
birthday.getFullYear() -
(d.getMonth() < birthday.getMonth() ||
(d.getMonth() == birthday.getMonth() &&
d.getDate() < birthday.getDate())
? 1
: 0)
console.log(age)
if (age < 18) {
callback(new Error("必须年满18岁"))
} else {
callback()
}
}
return { return {
pickerOptions, pickerOptions,
rangeOptions, rangeOptions,
...@@ -571,22 +550,22 @@ export default { ...@@ -571,22 +550,22 @@ export default {
} }
}) })
} else { } else {
let { birthday } = this.form // let { birthday } = this.form
if (birthday) { // if (birthday) {
birthday = new Date(birthday.replace(/-/g, "/")) // birthday = new Date(birthday.replace(/-/g, "/"))
let d = new Date() // let d = new Date()
let age = // let age =
d.getFullYear() - // d.getFullYear() -
birthday.getFullYear() - // birthday.getFullYear() -
(d.getMonth() < birthday.getMonth() || // (d.getMonth() < birthday.getMonth() ||
(d.getMonth() == birthday.getMonth() && // (d.getMonth() == birthday.getMonth() &&
d.getDate() < birthday.getDate()) // d.getDate() < birthday.getDate())
? 1 // ? 1
: 0) // : 0)
console.log(age) // console.log(age)
if (age == 0) { // if (age == 0) {
} // }
} // }
} }
}, },
// 自定义方法规则 // 自定义方法规则
...@@ -706,6 +685,9 @@ export default { ...@@ -706,6 +685,9 @@ export default {
handleChange(val) { handleChange(val) {
this.checkboxRepel(val) this.checkboxRepel(val)
this.handleAlgorithm() this.handleAlgorithm()
// 该操作判断是否符合筛查条件
this.$emit("formChange")
// ['is_one_year','is_subtotal_history','is_ppi','is_symptom','is_subtotal_history','is_disease','is_tumour']
}, },
}, },
} }
......
...@@ -37,16 +37,21 @@ ...@@ -37,16 +37,21 @@
></form-content> ></form-content>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<!-- 表单的折叠组件 -->
<el-collapse v-else v-model="collapseNames"> <el-collapse v-else v-model="collapseNames">
<template v-for="(g, gIndex) in options.group"> <template v-for="(g, gIndex) in options.group">
<el-collapse-item <el-collapse-item
v-show="g.display" v-show="g.display"
:key="gIndex" :key="gIndex"
:title="g.label"
:name="g.prop" :name="g.prop"
:disabled="!g.arrow" :disabled="!g.arrow"
> >
<template slot="title">
{{ g.label }}
<span v-if="g.label == '二、排除标准'" class="noCol">{{
errorText
}}</span>
</template>
<form-content <form-content
v-if="collapseNames.includes(g.prop)" v-if="collapseNames.includes(g.prop)"
ref="form-content" ref="form-content"
...@@ -54,6 +59,7 @@ ...@@ -54,6 +59,7 @@
:columns="g" :columns="g"
:options="options" :options="options"
:is-show-important="isShowImportant" :is-show-important="isShowImportant"
@showError="showError"
></form-content> ></form-content>
</el-collapse-item> </el-collapse-item>
</template> </template>
...@@ -64,9 +70,10 @@ ...@@ -64,9 +70,10 @@
<template v-if="options.submitBtn"> <template v-if="options.submitBtn">
<el-button <el-button
type="primary" type="primary"
icon="el-icon-check" :icon="options.submitText == '提交' ? 'el-icon-check' : ''"
:loading="loading" :loading="loading"
size="large" size="large"
:disabled="disabled"
@click="handleConfirm" @click="handleConfirm"
> >
{{ options.submitText || "提交" }} {{ options.submitText || "提交" }}
...@@ -146,6 +153,8 @@ export default { ...@@ -146,6 +153,8 @@ export default {
loading: false, loading: false,
isShowImportant: false, isShowImportant: false,
form: {}, form: {},
errorText: "",
disabled: false,
} }
}, },
computed: { computed: {
...@@ -169,6 +178,16 @@ export default { ...@@ -169,6 +178,16 @@ export default {
}, },
methods: { methods: {
// 显示不符合筛查条件
showError(data) {
if (data) {
this.disabled = true
this.errorText = "不符合筛查条件"
} else {
this.disabled = false
this.errorText = ""
}
},
nextTab() { nextTab() {
const tabsLen = this.options.group.length const tabsLen = this.options.group.length
let active = Number(this.activeName) let active = Number(this.activeName)
...@@ -371,4 +390,9 @@ export default { ...@@ -371,4 +390,9 @@ export default {
// background-color: $base-color-default; // background-color: $base-color-default;
// border-color: $base-color-default; // border-color: $base-color-default;
} }
.noCol {
font-size: 12px;
font-family: AlibabaPuHuiTiR;
color: #ff4d4f;
}
</style> </style>
<template> <template>
<div id="publicContent"> <div id="publicContent">
<div v-if="formTabs && formTabs.length > 0">
<el-button class="draftButton">{{
formType == 1 ? "临时保存" : "返回"
}}</el-button>
<el-tabs <el-tabs
v-model="activeName" v-model="activeName"
type="card" type="card"
style="margin-top: 10px" :style="{ width: formType == 1 ? '100%' : 'calc(100% - 200px)' }"
class="publicTab" class="publicTab"
v-loading="fromLoading" v-loading="fromLoading"
v-if="formTabs && formTabs.length > 0"
@tab-click="handleTabClick" @tab-click="handleTabClick"
> >
<el-tab-pane <el-tab-pane
...@@ -32,6 +35,7 @@ ...@@ -32,6 +35,7 @@
</transition> </transition>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div>
<el-empty v-else description="暂无数据"></el-empty> <el-empty v-else description="暂无数据"></el-empty>
</div> </div>
</template> </template>
...@@ -65,12 +69,24 @@ export default { ...@@ -65,12 +69,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
#publicContent { #publicContent {
padding: 32px 24px; padding: 32px 24px;
position: relative;
.draftButton {
position: absolute;
top: 46px;
right: 40px;
z-index: 999999;
border-radius: 4px;
border: 1px solid #4e68ff;
color: #4e68ff;
}
} }
.publicTab { .publicTab {
width: calc(100% - 200px); // width: calc(100%);
margin-top: 10px;
} }
::v-deep { ::v-deep {
.el-tabs--card > .el-tabs__header { .el-tabs--card > .el-tabs__header {
width: calc(100% - 100px);
border-bottom: none; border-bottom: none;
} }
.el-tabs--card > .el-tabs__header .el-tabs__nav { .el-tabs--card > .el-tabs__header .el-tabs__nav {
......
<template> <template>
<el-container> <el-container>
<el-main v-loading="pageLoading" class="transition-box"> <el-main v-loading="pageLoading" class="transition-box">
<i <!-- <i
v-if="contrast" v-if="contrast"
:class="asideShow ? 'el-icon-s-unfold' : 'el-icon-s-fold'" :class="asideShow ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
:title="asideShow ? '收起' : '展开'" :title="asideShow ? '收起' : '展开'"
class="arrow" class="arrow"
@click="asideShow = !asideShow" @click="asideShow = !asideShow"
></i> ></i> -->
<el-empty v-if="isEmpty" description="暂无数据"></el-empty> <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
<template v-if="!isEmpty"> <template v-if="!isEmpty">
<!-- 多次记录 --> <!-- 多次记录 -->
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
></tags-scroll-bar> ></tags-scroll-bar>
</el-row> </el-row>
<el-row class="header"> <el-row class="header">
<template v-if="formData.percent.autoPercent"> <!-- <template v-if="formData.percent.autoPercent">
<span class="label">自动采集完整度:</span> <span class="label">自动采集完整度:</span>
<span class="value">{{ formData.percent.autoPercent }}%</span> <span class="value">{{ formData.percent.autoPercent }}%</span>
</template> </template>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<span class="value" <span class="value"
>{{ formData.percent.personalPercent }}%</span >{{ formData.percent.personalPercent }}%</span
></template ></template
> > -->
<div class="label"> <div class="label">
<!-- 仅显示重要字段 : --> <!-- 仅显示重要字段 : -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment