121 lines
2.8 KiB
Vue
121 lines
2.8 KiB
Vue
<template>
|
||
<!--意见-->
|
||
<div>
|
||
<el-form v-if="!isItem" ref="form" :model="model" :rules="rules">
|
||
<div class="title">{{ title }}</div>
|
||
<el-form-item :prop="prop" label-width="0">
|
||
<el-input :disabled="disabled"
|
||
type="textarea"
|
||
:autosize="{ minRows: 3 }"
|
||
resize="none"
|
||
placeholder="请输入意见"
|
||
:value="value"
|
||
@input="handleChange">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template v-else>
|
||
<div class="title">{{ title }}</div>
|
||
<el-form-item :prop="prop" label-width="0">
|
||
<el-input :disabled="disabled"
|
||
type="textarea"
|
||
:autosize="{ minRows: 3 }"
|
||
resize="none"
|
||
placeholder="请输入意见"
|
||
:value="value"
|
||
@input="handleChange">
|
||
</el-input>
|
||
</el-form-item>
|
||
</template>
|
||
</div>
|
||
<!--
|
||
使用案例：
|
||
1.外层无el-form
|
||
1.1
|
||
<el-form
|
||
ref="formTongGuo"
|
||
:model="formTongGuo"
|
||
:rules="rules">
|
||
<ReceiptDescription
|
||
title="审批意见"
|
||
isItem
|
||
prop="commentText"
|
||
v-model="formTongGuo.commentText"
|
||
></ReceiptDescription>
|
||
</el-form>
|
||
1.2
|
||
<ReceiptDescription
|
||
title="审批意见"
|
||
ref="formTongGuo"
|
||
:model="formTongGuo"
|
||
:rules="rules"
|
||
prop="commentText"
|
||
v-model="formTongGuo.commentText"
|
||
></ReceiptDescription>
|
||
|
||
2.外层有el-form
|
||
<ReceiptDescription
|
||
title="审批意见"
|
||
isItem
|
||
prop="commentText"
|
||
v-model="qbfsForm.commentText"
|
||
></ReceiptDescription>
|
||
-->
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "ReceiptDescription",
|
||
props: {
|
||
value: {
|
||
type: String,
|
||
default: true
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: '回执说明'
|
||
},
|
||
prop: {
|
||
type: String
|
||
},
|
||
model: {
|
||
type: Object
|
||
},
|
||
rules: {
|
||
type: Object
|
||
},
|
||
// 组件父元素是否是el-form
|
||
isItem: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
methods: {
|
||
handleChange (event) {
|
||
this.$emit('input', event)
|
||
},
|
||
validate (callback) {
|
||
this.$refs.form.validate(callback)
|
||
},
|
||
clearValidate (props) {
|
||
this.$refs.form.clearValidate(props)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.title {
|
||
height: 48px;
|
||
line-height: 48px;
|
||
}
|
||
/deep/ .el-form-item__content .el-textarea .el-textarea__inner {
|
||
width: 100% !important;
|
||
}
|
||
</style>
|