Skip to content

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

提交表格基本样式

parent 48c9269f
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 75 deletions
src/components/FormComponents/CustomForm/FormContent.vue
View file @ 93b539cf
<template>
<el-row
:gutter="options.gutter"
class="form-content"
:style="{
paddingLeft,
}"
>
<el-row :gutter="options.gutter" class="form-content">
<template
v-for="(item, columnIndex) in columns.column || columns.children.column"
>
<div
v-if="item.type === 'dynamic'"
v-show="item.display"
:key="columnIndex"
style="width: 100%"
v-show="item.display"
class="dynamic-form-container"
>
<el-form-item
......@@ -24,18 +18,18 @@
</el-form-item>
<div class="dynamic-form-container_lable">{{ item.label }}</div>
<form-dynamic
v-model="form[item.prop]"
:options="item.children"
:dynamic-data="item.dynamicData"
:is-show-important="isShowImportant"
v-model="form[item.prop]"
></form-dynamic>
</div>
<div
v-else-if="item.type === 'group'"
v-show="item.display"
:key="columnIndex"
style="width: 100%"
v-show="item.display"
>
<el-collapse :value="item.collapse ? item.prop : ''">
<el-collapse-item
......@@ -56,9 +50,9 @@
<div
v-else-if="item.type === 'dental-tab'"
v-show="item.display && isShowIm(item.importantField)"
:key="columnIndex"
style="width: 100%"
v-show="item.display && isShowIm(item.importantField)"
>
<el-form-item
:prop="item.prop"
......@@ -68,8 +62,8 @@
</el-form-item>
<dental-tab-form
ref="dental"
:item="item"
v-model="form[item.prop]"
:item="item"
:disabled="options.disabled"
@change="handleChange"
></dental-tab-form>
......@@ -77,9 +71,9 @@
<div
v-else-if="item.type === 'dental-tab-tj'"
v-show="item.display && isShowIm(item.importantField)"
:key="columnIndex"
style="width: 100%"
v-show="item.display && isShowIm(item.importantField)"
>
<el-form-item
:prop="item.prop"
......@@ -89,20 +83,21 @@
</el-form-item>
<dental-tab-tj-form
ref="dental"
:item="item"
v-model="form[item.prop]"
:item="item"
:disabled="options.disabled"
></dental-tab-tj-form>
</div>
<el-col
v-else-if="item.type === 'title'"
v-show="item.display"
:key="columnIndex"
class="row12"
:xs="item.xs || 24"
:sm="item.sm || 24"
:md="item.md || 24"
:lg="item.span || 12"
:key="columnIndex"
v-show="item.display"
>
<div class="form_title" :style="item.styles">
<span>{{ item.value }}</span>
......@@ -111,16 +106,18 @@
<el-col
v-else
v-show="item.display && isShowIm(item.importantField)"
:key="columnIndex"
class="row24"
:xs="item.xs || 24"
:sm="item.sm || 24"
:md="item.md || 24"
:lg="item.lg || item.span || 12"
:xl="item.span || 12"
:key="columnIndex"
v-show="item.display && isShowIm(item.importantField)"
>
<form-item-self
:form="form"
:column-index="columnIndex"
:item="item"
:columns="columns.column || columns.children.column"
:group="options.group"
......@@ -173,11 +170,6 @@ export default {
data() {
return {}
},
methods: {
handleChange(key, val) {
if (this.form.hasOwnProperty(key)) this.form[key] = val
},
},
computed: {
isShowIm() {
......@@ -190,10 +182,22 @@ export default {
return columns.labelWidth ? `${columns.labelWidth}px` : ""
},
},
methods: {
handleChange(key, val) {
if (this.form.hasOwnProperty(key)) this.form[key] = val
},
},
}
</script>
<style lang="scss" scoped>
::v-deep {
.row24.el-col-lg-12 {
&:nth-child(2n) {
border-left: 1px solid #ccc;
}
}
}
.form-content ::v-deep {
display: flex;
flex-wrap: wrap;
......
src/components/FormComponents/CustomForm/FormItemSelf.vue
View file @ 93b539cf
<template>
<el-row
class="custom-form-item"
:ref="item.prop"
class="custom-form-item"
:style="item.styles"
:class="{ isDefects: defectsSet.includes(item.prop) }"
>
<el-col :lg="item.width">
<div v-if="showIndex" class="formIndex">
{{ columnIndex + 1 }}
</div>
<el-form-item
:label="
!hiddenLabel && item.label
? `${item.label}${item.labelSuffix || '：'}`
? `${item.label}${item.labelSuffix || ''}`
: ''
"
:label-width="item.labelWidth ? `${item.labelWidth}px` : ''"
......@@ -21,9 +24,9 @@
<div>
<el-upload-self
v-if="item.type === 'upload'"
v-model="form[item.prop]"
v-bind="item"
:upload-query="{ formId, patientId, prefix: item.prop }"
v-model="form[item.prop]"
:disabled="item.disabled"
></el-upload-self>
<!-- 表单改文本 -->
......@@ -33,16 +36,15 @@
<template v-else>
<!-- 输入框 -->
<el-input
:class="item.toothBit ? 'toothBit' : ''"
v-if="item.type === 'input'"
v-model="form[item.prop]"
:class="item.toothBit ? 'toothBit' : ''"
:readonly="item.readonly"
:disabled="item.disabled"
:placeholder="
item.placeholder ||
` ${item.label ? '请输入' + item.label : ''}`
"
@blur="handleBlur"
:clearable="item.notClearable ? false : true"
:maxlength="
item.maxlength
......@@ -51,19 +53,20 @@
? ''
: item.fieldLength
"
@blur="handleBlur"
>
<!-- 牙位按钮 -->
<el-button
slot="append"
v-if="item.toothBit"
@click="openToothBit"
slot="append"
class="toothBit"
@click="openToothBit"
>{{ item.append || "牙位" }}</el-button
>
<template slot="append" v-else-if="item.append">{{
<template v-else-if="item.append" slot="append">{{
item.append
}}</template>
<template slot="prepend" v-if="item.prepend">{{
<template v-if="item.prepend" slot="prepend">{{
item.prepend
}}</template>
</el-input>
......@@ -77,7 +80,6 @@
:placeholder="item.placeholder || `请输入 ${item.label || ''}`"
:readonly="item.readonly"
:disabled="item.disabled"
@blur="handleBlur"
:show-password="item.showPassword"
clearable
:maxlength="
......@@ -87,11 +89,12 @@
? ''
: item.fieldLength
"
@blur="handleBlur"
>
<template slot="append" v-if="item.append">{{
<template v-if="item.append" slot="append">{{
item.append
}}</template>
<template slot="prepend" v-if="item.prepend">{{
<template v-if="item.prepend" slot="prepend">{{
item.prepend
}}</template>
</el-input>
......@@ -99,13 +102,12 @@
<!-- 文本域 -->
<template v-if="item.type === 'textarea'">
<el-input
v-model="form[item.prop]"
type="textarea"
:placeholder="
item.placeholder || `请输入 ${item.label || ''}`
"
@blur="handleBlur"
:autosize="{ minRows: item.minRows, maxRows: item.maxRows }"
v-model="form[item.prop]"
:minlength="item.minlength"
:disabled="item.disabled"
:maxlength="
......@@ -116,6 +118,7 @@
: item.fieldLength
"
:show-word-limit="item.showWordLimit"
@blur="handleBlur"
></el-input>
</template>
......@@ -132,8 +135,8 @@
:precision="item.precision"
:min="item.minRows"
:max="item.maxRows"
@blur="handleBlur"
style="display: table-cell"
@blur="handleBlur"
>
</el-input-number>
<span
......@@ -147,9 +150,9 @@
<!-- 单选框 -->
<el-radio-group
v-if="item.type === 'radio'"
@change="handleChange"
v-model="form[item.prop]"
:disabled="item.disabled"
@change="handleChange"
>
<el-radio
v-for="(opt, optIndex) in item.dicData"
......@@ -178,10 +181,10 @@
<!-- 下拉框 -->
<template v-if="item.type === 'select'">
<el-select
v-model="form[item.prop]"
:clearable="item.clearable"
:filterable="item.filterable"
:disabled="item.disabled"
v-model="form[item.prop]"
:placeholder="
item.placeholder
? item.placeholder
......@@ -212,8 +215,8 @@
:options="item.dicData"
:show-all-levels="item.showAllLevels"
:separator="item.separator"
@change="handleChange"
style="width: 100%"
@change="handleChange"
></el-cascader>
<!-- 时间 -->
......@@ -225,15 +228,15 @@
:format="item.format"
:disabled="item.disabled"
style="width: 100%"
@change="handleChange"
clearable
@change="handleChange"
>
</el-time-picker>
<!-- 时间范围 -->
<el-time-picker
v-else-if="item.type === 'timerange'"
is-range
v-model="form[item.prop]"
is-range
range-separator="至"
:start-placeholder="item.startPlaceholder"
:end-placeholder="item.endPlaceholder"
......@@ -241,8 +244,8 @@
:value-format="item.valueFormat"
:format="item.format"
:disabled="item.disabled"
@change="handleChange"
clearable
@change="handleChange"
>
</el-time-picker>
<!-- 日期 -->
......@@ -253,73 +256,73 @@
:value-format="item.valueFormat"
:format="item.format"
:disabled="item.disabled"
@change="handleChange"
clearable
@change="handleChange"
>
</el-date-picker>
<!-- 年 -->
<el-date-picker
v-else-if="item.type === 'year'"
type="year"
v-model="form[item.prop]"
type="year"
:placeholder="item.placeholder ? item.placeholder : '请选择'"
:value-format="item.valueFormat"
:format="item.format"
:disabled="item.disabled"
@change="handleChange"
clearable
@change="handleChange"
>
</el-date-picker>
<!-- 月 -->
<el-date-picker
type="month"
v-else-if="item.type === 'month'"
v-model="form[item.prop]"
type="month"
:placeholder="item.placeholder ? item.placeholder : '请选择'"
:value-format="item.valueFormat"
:format="item.format"
:disabled="item.disabled"
@change="handleChange"
clearable
@change="handleChange"
>
</el-date-picker>
<!-- 周 -->
<el-date-picker
type="week"
v-else-if="item.type === 'week'"
v-model="form[item.prop]"
type="week"
:placeholder="item.placeholder ? item.placeholder : '请选择'"
:value-format="item.valueFormat || 'yyyy-ww'"
:format="item.format || 'yyyy 第 WW 周'"
:disabled="item.disabled"
@change="handleChange"
clearable
@change="handleChange"
>
</el-date-picker>
<!-- 日期范围 -->
<el-date-picker
v-else-if="item.type === 'daterange'"
v-model="form[item.prop]"
type="daterange"
range-separator="至"
:start-placeholder="item.startPlaceholder"
:end-placeholder="item.endPlaceholder"
:unlink-panels="item.unlinkPanels"
v-model="form[item.prop]"
:value-format="item.valueFormat"
:format="item.format"
:disabled="item.disabled"
@change="handleChange"
clearable
@change="handleChange"
>
</el-date-picker>
<!-- 日期时间 -->
<el-date-picker
v-model="form[item.prop]"
v-else-if="item.type === 'datetime'"
v-model="form[item.prop]"
type="datetime"
:placeholder="item.placeholder ? item.placeholder : '请选择'"
clearable
......@@ -351,8 +354,8 @@
</template>
</div>
<span
class="important_field"
v-if="item.importantField && !vwForm.detail"
class="important_field"
>{{ item.importantFieldDesc || "*" }}</span
>
</div>
......@@ -361,9 +364,9 @@
<dialog-tooth-bit
v-if="item.toothBit"
ref="dialog"
v-model="form[item.prop]"
append-to-body
title="牙位选择"
v-model="form[item.prop]"
></dialog-tooth-bit>
</el-row>
</template>
......@@ -383,6 +386,9 @@ export default {
name: "FormItemSelf",
components: { ElUploadSelf, FormItemText, DialogToothBit },
inject: {
showIndex: {
default: false,
},
vwForm: {
default: {},
},
......@@ -408,6 +414,7 @@ export default {
default: false,
},
columns: Array,
columnIndex: Number,
group: Array,
type: String,
},
......@@ -438,6 +445,14 @@ export default {
return this.getPatientId ? this.getPatientId() : ""
},
},
created() {
this.timerangeReset()
this.numberReset()
this.checkboxReset()
},
mounted() {
this.showFormItem()
},
methods: {
scrollToView() {
if (this.$refs["JY_LCYY"]) {
......@@ -655,26 +670,36 @@ export default {
this.handleAlgorithm()
},
},
created() {
this.timerangeReset()
this.numberReset()
this.checkboxReset()
},
mounted() {
this.showFormItem()
},
}
</script>
<style lang="scss" scoped>
.custom-form-item {
background: white;
margin: 3px;
border-bottom: 1px solid #ccc;
// margin: 3px;
.el-col {
height: 100%;
height: 53px;
display: flex;
align-items: center;
}
.formIndex {
min-width: 53px;
height: 100%;
background: #fafafa;
border-right: 1px solid #ccc;
justify-content: center;
display: flex;
align-items: center;
// margin-right: 20px;
}
&.isDefects {
border: 1px solid red;
}
::v-deep .el-form-item {
padding: 10px 2px;
padding: 10px 0 10px 20px;
margin-bottom: 0px;
}
.toothBit {
......@@ -764,7 +789,7 @@ export default {
.empty-tip {
::v-deep .el-form-item__label {
color: red;
color: #333333;
}
}
......
src/components/FormComponents/CustomForm/index.vue
View file @ 93b539cf
......@@ -109,7 +109,8 @@ export default {
name: "CustomForm",
components: { FormContent },
props: {
options: { //配置 数据
options: {
//配置 数据
type: Object,
default: () => {
return {}
......@@ -318,19 +319,36 @@ export default {
<style lang="scss" scoped>
.avue-form-self {
padding: 0 11px;
::v-deep .el-collapse {
border: none;
.el-collapse-item__header.is-active {
border-bottom-color: #ebeef5;
.el-collapse-item {
&:nth-child(1) {
border-top: 1px solid #e5e5e5;
}
}
.el-collapse-item__content {
padding-bottom: 0px;
}
.el-collapse-item__header {
background: #fafafa;
text-indent: 20px;
border: 1px solid #e5e5e5;
border-bottom-color: #ccc;
border-top: 0px;
font-size: 14px;
font-family: AlibabaPuHuiTiM;
color: #333333;
}
.el-collapse-item__wrap {
border: none;
padding: 10px;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
// border-bottom: 1px solid #e5e5e5 !important;
padding: 0px;
&:hover {
background-color: #ecf8ff;
outline: 1px dashed #ccc;
// background-color: #ecf8ff;
// outline: 1px dashed #ccc;
}
}
.el-collapse-item__header {
......
src/views/screening/ScreeningAdd.vue
View file @ 93b539cf
......@@ -9,11 +9,18 @@ export default {
components: {
ConfigForms,
},
provide() {
const showIndex = true
return {
showIndex,
}
},
data() {
return {}
},
methods: {},
created() {},
methods: {},
}
</script>
......
src/views/screening/components/FormTab.vue
View file @ 93b539cf
......@@ -306,6 +306,7 @@ export default {
.el-main {
position: relative;
padding: 0;
.arrow {
position: absolute;
right: 0;
......
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