156 lines
3.6 KiB
Vue
156 lines
3.6 KiB
Vue
<template>
|
|
<a-form-model :model="formInline" class="form-add" :rules="rules" ref="ruleForm">
|
|
<div class="collapsible-panel-form">
|
|
<div class="form-flex-box collapsible-panel-form-content collapsible-content-no-head">
|
|
<!-- 制修订计划说明 -->
|
|
<div class="box-title-text form-flex-item-long">
|
|
<div class="title-text">
|
|
<span class="required">*</span>
|
|
<span class="title-text-text" :title="$t('workCenter.revisionPlanActivelyReport.revisionPlanDesc')">
|
|
{{ $t('workCenter.revisionPlanActivelyReport.revisionPlanDesc') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model" prop="processDescription">
|
|
<a-textarea :placeholder="$t('pleaseEnter')+$t('workCenter.revisionPlanActivelyReport.revisionPlanDesc')"
|
|
:maxLength="500"
|
|
:disabled="disabled"
|
|
v-model="formInline.processDescription" :rows="4" />
|
|
</a-form-model-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-form-model>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'EngineerInitForm',
|
|
props: {
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
formInline: {},
|
|
rules: {
|
|
// 制修订计划说明
|
|
processDescription: [
|
|
{
|
|
required: true,
|
|
message: this.$t('workCenter.revisionPlanActivelyReport.revisionPlanDesc') + this.$t('cannotEmpty'),
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
},
|
|
data: undefined
|
|
}
|
|
},
|
|
methods: {
|
|
// 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
|
|
initData (data) {
|
|
this.data = data
|
|
// 给表单赋值
|
|
this.formInline = {
|
|
processDescription: data.common.processDescription
|
|
}
|
|
},
|
|
// 外层要获取数据
|
|
getData () {
|
|
// 把数据抛出
|
|
const data = {}
|
|
data.formInline = this.formInline
|
|
return data
|
|
},
|
|
// 外层获取数据要过校验,返回false表示没有通过校验
|
|
getDataValidate (callback) {
|
|
this.$refs.ruleForm.validate(valid => {
|
|
if (valid) {
|
|
const data = {}
|
|
data.formInline = this.formInline
|
|
callback(data)
|
|
} else {
|
|
const data = false
|
|
callback(data)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
/deep/ .ant-form-item-children {
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.form-flex-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-flex-item-line {
|
|
width: 100%;
|
|
}
|
|
|
|
.collapsible-panel-form {
|
|
margin-top: 20px;
|
|
|
|
&-header {
|
|
height: 56px;
|
|
line-height: 56px;
|
|
background: rgba(245, 245, 245, 0.6);
|
|
border-radius: 8px 8px 0 0;
|
|
border: 1px solid #E5E6EB;
|
|
padding: 0 20px;
|
|
font-size: 16px;
|
|
font-family: PingFang SC-Medium, PingFang SC, sans-serif;
|
|
font-weight: 600;
|
|
color: #1D2129;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.retractable-btn {
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
|
color: @primary-color;
|
|
}
|
|
|
|
.anticon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.pack-up-btn {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.unfold-btn {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
border: 1px solid #E5E6EB;
|
|
border-top: none;
|
|
border-radius: 0 0 8px 8px;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
.collapsible-content-no-head {
|
|
border-top: 1px solid #E5E6EB;
|
|
border-radius: 8px 8px 8px 8px;
|
|
}
|
|
|
|
.form-flex-item {
|
|
width: calc(100% / 3);
|
|
}
|
|
|
|
.form-flex-item-long {
|
|
width: 100%;
|
|
}
|
|
</style>
|