Skip to content

A
agcs2.0-web
Commit 2a883f48 authored by miaojiale's avatar miaojiale
Browse files
Options

一部分逻辑和样式

parent 648767cb
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 115 deletions
packages/config/date.vue
View file @ 2a883f48
<template>
<div>
<template v-if="data.type.indexOf('range') != -1">
<el-form-item label="开始占位内容"
label-width="110px">
<el-input v-model="data.startPlaceholder"
clearable
placeholder="开始占位内容"></el-input>
<el-form-item label="开始占位内容" label-width="110px">
<el-input
v-model="data.startPlaceholder"
clearable
placeholder="开始占位内容"
></el-input>
</el-form-item>
<el-form-item label="结束占位内容"
label-width="110px">
<el-input v-model="data.endPlaceholder"
clearable
placeholder="结束占位内容"></el-input>
<el-form-item label="结束占位内容" label-width="110px">
<el-input
v-model="data.endPlaceholder"
clearable
placeholder="结束占位内容"
></el-input>
</el-form-item>
</template>
<el-form-item label="占位内容"
v-else>
<el-input v-model="data.placeholder"
clearable
placeholder="占位内容"></el-input>
<el-form-item label="占位内容" v-else>
<el-input
v-model="data.placeholder"
clearable
placeholder="占位内容"
></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-input v-model="data.value"
clearable
placeholder="默认值"></el-input>
<el-input v-model="data.value" clearable placeholder="默认值"></el-input>
</el-form-item>
<el-form-item label="显示格式化"
label-width="100px">
<el-input v-model="data.format"
clearable
placeholder="显示格式化"></el-input>
<el-form-item label="显示格式化" label-width="100px">
<el-input
v-model="data.format"
clearable
placeholder="显示格式化"
></el-input>
</el-form-item>
<el-form-item label="值格式化">
<el-input v-model="data.valueFormat"
clearable
placeholder="值格式化"></el-input>
<el-input
v-model="data.valueFormat"
clearable
placeholder="值格式化"
></el-input>
</el-form-item>
<el-form-item label="取消范围联动"
label-width="110px"
v-if="['timerange', 'daterange', 'datetimerange'].includes(data.type)">
<el-form-item
label="取消范围联动"
label-width="110px"
v-if="['timerange', 'daterange', 'datetimerange'].includes(data.type)"
>
<el-switch v-model="data.unlinkPanels"></el-switch>
</el-form-item>
<el-form-item label="是否禁用">
......@@ -49,40 +55,96 @@
</el-form-item>
<el-form-item label="是否必填">
<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>
</div>
</template>
<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 {
name: "config-date",
props: ['data'],
props: ["data"],
data() {
return {
validator: {
type: null,
required: null,
pattern: null,
length: null
}
length: null,
},
}
},
methods: {
generateRule() {
const rules = [];
Object.keys(this.validator).forEach(key => {
const rules = []
Object.keys(this.validator).forEach((key) => {
if (this.validator[key]) rules.push(this.validator[key])
})
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: {
'data.required': function (val) {
if (val) this.validator.required = { required: true, message: `${this.data.label}必须填写` }
else this.validator.required = null
"data.required": function (val) {
if (val) {
this.validator.required = {
required: true,
message: `${this.data.label}必须填写`,
}
} else {
this.validator.required = null
}
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>
src/components/FormComponents/CustomForm/FormContent.vue
View file @ 2a883f48
......@@ -121,6 +121,7 @@
:item="item"
:columns="columns.column || columns.children.column"
:group="options.group"
@formChange="formChange"
></form-item-self>
</el-col>
</template>
......@@ -186,6 +187,30 @@ export default {
handleChange(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>
......
src/components/FormComponents/CustomForm/FormItemSelf.vue
View file @ 2a883f48
......@@ -419,27 +419,6 @@ export default {
type: String,
},
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 {
pickerOptions,
rangeOptions,
......@@ -571,22 +550,22 @@ export default {
}
})
} else {
let { birthday } = this.form
if (birthday) {
birthday = new Date(birthday.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 == 0) {
}
}
// let { birthday } = this.form
// if (birthday) {
// birthday = new Date(birthday.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 == 0) {
// }
// }
}
},
// 自定义方法规则
......@@ -706,6 +685,9 @@ export default {
handleChange(val) {
this.checkboxRepel(val)
this.handleAlgorithm()
// 该操作判断是否符合筛查条件
this.$emit("formChange")
// ['is_one_year','is_subtotal_history','is_ppi','is_symptom','is_subtotal_history','is_disease','is_tumour']
},
},
}
......
src/components/FormComponents/CustomForm/index.vue
View file @ 2a883f48
......@@ -37,16 +37,21 @@
></form-content>
</el-tab-pane>
</el-tabs>
<!-- 表单的折叠组件 -->
<el-collapse v-else v-model="collapseNames">
<template v-for="(g, gIndex) in options.group">
<el-collapse-item
v-show="g.display"
:key="gIndex"
:title="g.label"
:name="g.prop"
:disabled="!g.arrow"
>
<template slot="title">
{{ g.label }}
<span v-if="g.label == '二、排除标准'" class="noCol">{{
errorText
}}</span>
</template>
<form-content
v-if="collapseNames.includes(g.prop)"
ref="form-content"
......@@ -54,6 +59,7 @@
:columns="g"
:options="options"
:is-show-important="isShowImportant"
@showError="showError"
></form-content>
</el-collapse-item>
</template>
......@@ -64,9 +70,10 @@
<template v-if="options.submitBtn">
<el-button
type="primary"
icon="el-icon-check"
:icon="options.submitText == '提交' ? 'el-icon-check' : ''"
:loading="loading"
size="large"
:disabled="disabled"
@click="handleConfirm"
>
{{ options.submitText || "提交" }}
......@@ -146,6 +153,8 @@ export default {
loading: false,
isShowImportant: false,
form: {},
errorText: "",
disabled: false,
}
},
computed: {
......@@ -169,6 +178,16 @@ export default {
},
methods: {
// 显示不符合筛查条件
showError(data) {
if (data) {
this.disabled = true
this.errorText = "不符合筛查条件"
} else {
this.disabled = false
this.errorText = ""
}
},
nextTab() {
const tabsLen = this.options.group.length
let active = Number(this.activeName)
......@@ -371,4 +390,9 @@ export default {
// background-color: $base-color-default;
// border-color: $base-color-default;
}
.noCol {
font-size: 12px;
font-family: AlibabaPuHuiTiR;
color: #ff4d4f;
}
</style>
src/views/screening/components/ConfigForms.vue
View file @ 2a883f48
<template>
<div id="publicContent">
<el-tabs
v-model="activeName"
type="card"
style="margin-top: 10px"
class="publicTab"
v-loading="fromLoading"
v-if="formTabs && formTabs.length > 0"
@tab-click="handleTabClick"
>
<el-tab-pane
:label="form.label"
:name="'index' + index"
v-for="(form, index) in formTabs"
:key="form.id"
<div v-if="formTabs && formTabs.length > 0">
<el-button class="draftButton">{{
formType == 1 ? "临时保存" : "返回"
}}</el-button>
<el-tabs
v-model="activeName"
type="card"
:style="{ width: formType == 1 ? '100%' : 'calc(100% - 200px)' }"
class="publicTab"
v-loading="fromLoading"
@tab-click="handleTabClick"
>
<transition mode="out-in" name="fade-transform">
<div v-show="activeName === 'index' + index">
<template v-if="form.formId">
<form-tab
:patient-id="patientId"
:patient-standby-id="patientStandbyId"
:form="form"
:disabled="disabled"
contrast
@setFormJson="setFormJson"
@handleConfirm="handleConfirm"
></form-tab>
</template>
</div>
</transition>
</el-tab-pane>
</el-tabs>
<el-tab-pane
:label="form.label"
:name="'index' + index"
v-for="(form, index) in formTabs"
:key="form.id"
>
<transition mode="out-in" name="fade-transform">
<div v-show="activeName === 'index' + index">
<template v-if="form.formId">
<form-tab
:patient-id="patientId"
:patient-standby-id="patientStandbyId"
:form="form"
:disabled="disabled"
contrast
@setFormJson="setFormJson"
@handleConfirm="handleConfirm"
></form-tab>
</template>
</div>
</transition>
</el-tab-pane>
</el-tabs>
</div>
<el-empty v-else description="暂无数据"></el-empty>
</div>
</template>
......@@ -65,12 +69,24 @@ export default {
<style lang="scss" scoped>
#publicContent {
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 {
width: calc(100% - 200px);
// width: calc(100%);
margin-top: 10px;
}
::v-deep {
.el-tabs--card > .el-tabs__header {
width: calc(100% - 100px);
border-bottom: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
......
src/views/screening/components/FormTab.vue
View file @ 2a883f48
<template>
<el-container>
<el-main v-loading="pageLoading" class="transition-box">
<i
<!-- <i
v-if="contrast"
:class="asideShow ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
:title="asideShow ? '收起' : '展开'"
class="arrow"
@click="asideShow = !asideShow"
></i>
></i> -->
<el-empty v-if="isEmpty" description="暂无数据"></el-empty>
<template v-if="!isEmpty">
<!-- 多次记录 -->
......@@ -23,7 +23,7 @@
></tags-scroll-bar>
</el-row>
<el-row class="header">
<template v-if="formData.percent.autoPercent">
<!-- <template v-if="formData.percent.autoPercent">
<span class="label">自动采集完整度：</span>
<span class="value">{{ formData.percent.autoPercent }}%</span>
</template>
......@@ -32,7 +32,7 @@
<span class="value"
>{{ formData.percent.personalPercent }}%</span
></template
>
> -->
<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