| | |
| | | <el-button icon="el-icon-edit" plain size="mini" style="height: 28px;" |
| | | type="primary"></el-button> |
| | | </div> |
| | | |
| | | <el-input |
| | | v-if="item.itemType === 'textarea' || item.itemType === 'richtext' || item.itemType === 'webeditor'" |
| | | v-model="item.value" |
| | | :placeholder="item.text" |
| | | :rows="2" |
| | | type="textarea"> |
| | | v-if="item.itemType === 'textarea' || item.itemType === 'richtext' || item.itemType === 'webeditor'" |
| | | v-model="item.value" |
| | | :placeholder="item.text"> |
| | | </el-input> |
| | | |
| | | <el-input-number v-if="item.itemType === 'number'" v-model="item.value" :max="99999" |
| | | <el-input-number size="mini" v-if="item.itemType === 'number'" v-model="item.value" :max="99999" |
| | | :min="1"></el-input-number> |
| | | <el-input v-if="item.itemType === 'password'" v-model="input" placeholder="请输入密码" |
| | | show-password></el-input> |
| | | <el-radio v-if="item.itemType === 'radio'" v-model="item.value"></el-radio> |
| | | <el-checkbox v-if="item.itemType === 'checkbox'" v-model="item.value"></el-checkbox> |
| | | <el-select v-if="item.itemType === 'select' || item.itemType === 'multiselect'" |
| | | v-model="item.value" :disabled="true" placeholder="请选择" size="mini"> |
| | | <el-select v-if="item.itemType === 'select' || item.itemType === 'multiselect'" |
| | | v-model="item.value" :disabled="false" placeholder="请选择" size="mini"> |
| | | </el-select> |
| | | <el-date-picker |
| | | class="formItemMargin" |
| | | v-if="item.itemType === 'date' || item.itemType === 'datetime'" |
| | | v-model="item.value" |
| | | :placeholder="item.itemType === 'date' ? '请选择日期' : '请选择日期时间'" |
| | |
| | | </el-date-picker> |
| | | |
| | | <el-time-select |
| | | class="formItemMargin" |
| | | v-if="item.itemType === 'time'" |
| | | v-model="item.value" |
| | | :picker-options="{ |
| | |
| | | <el-row style="border-bottom: 1px solid #878585;padding-bottom: 10px"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="使用字段"> |
| | | <div style="display: flex"> |
| | | <div style="display: flex;align-items: center"> |
| | | <el-input v-model="form.text" :readonly="true" placeholder="请输入使用字段" size="mini"></el-input> |
| | | <el-checkbox v-model="form.itemIsEditable" style="margin-left: 5px; margin-right: 5px">只读 |
| | | <el-checkbox v-model="form.itemIsEditable" true-label="1" false-label="0" style="margin-left: 5px; margin-right: 5px">只读 |
| | | </el-checkbox> |
| | | <el-checkbox v-model="form.itemIsRequired" style="margin-left: 5px;margin-right: 0px">必填 |
| | | <el-checkbox v-model="form.itemIsRequired" true-label="1" false-label="0" style="margin-left: 5px;margin-right: 0px">必填 |
| | | </el-checkbox> |
| | | </div> |
| | | </el-form-item> |
| | |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="预览" |
| | | width="80%"> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
| | | <el-row> |
| | | <el-col v-for="(item,index) in formList" :key="index" :span="topForm.columnNumber"> |
| | | <el-form-item :class="['hiddenLabel', { 'active-border': activeItem.text === item.text }]" |
| | | :label="item.itemName + ':'" |
| | | style="padding-left: 5px" @click.native="formItemClick(item,index)"> |
| | | <el-input |
| | | v-if="item.itemType === 'text' || |
| | | width="60%"> |
| | | <div style="height: 600px"> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
| | | <el-row> |
| | | <el-col v-for="(item,index) in formList" :key="index" :span="topForm.columnNumber"> |
| | | <el-form-item :label="item.itemName + ':'" style="padding-left: 5px"> |
| | | <el-input |
| | | v-if="item.itemType === 'text' || |
| | | item.itemType === 'custom' || |
| | | item.itemType === 'customform'|| |
| | | item.itemType === 'hidden' || |
| | | item.itemType === 'specialCharacter'" |
| | | v-model="item.value" :placeholder="item.text" |
| | | size="mini"></el-input> |
| | | v-model="item.value" :placeholder="item.text" |
| | | size="mini"></el-input> |
| | | |
| | | <div v-if="item.itemType === 'textbtn'" style="display: flex;align-items: center"> |
| | | <el-input v-model="item.value" :placeholder="item.text" size="mini"></el-input> |
| | | <el-button icon="el-icon-edit" plain size="mini" style="height: 28px;" |
| | | type="primary"></el-button> |
| | | </div> |
| | | <div v-if="item.itemType === 'textbtn'" style="display: flex;align-items: center"> |
| | | <el-input v-model="item.value" :placeholder="item.text" size="mini"></el-input> |
| | | <el-button icon="el-icon-edit" plain size="mini" style="height: 28px;" |
| | | type="primary"></el-button> |
| | | </div> |
| | | |
| | | <el-input |
| | | v-if="item.itemType === 'textarea' || item.itemType === 'richtext' || item.itemType === 'webeditor'" |
| | | v-model="item.value" |
| | | :placeholder="item.text" |
| | | :rows="2" |
| | | type="textarea"> |
| | | </el-input> |
| | | <el-input |
| | | v-if="item.itemType === 'textarea' || item.itemType === 'richtext' || item.itemType === 'webeditor'" |
| | | v-model="item.value" |
| | | :placeholder="item.text"> |
| | | </el-input> |
| | | |
| | | <el-input-number v-if="item.itemType === 'number'" v-model="item.value" :max="99999" |
| | | :min="1"></el-input-number> |
| | | <el-input v-if="item.itemType === 'password'" v-model="input" placeholder="请输入密码" |
| | | show-password></el-input> |
| | | <el-radio v-if="item.itemType === 'radio'" v-model="item.value"></el-radio> |
| | | <el-checkbox v-if="item.itemType === 'checkbox'" v-model="item.value"></el-checkbox> |
| | | <el-select v-if="item.itemType === 'select' || item.itemType === 'multiselect'" |
| | | v-model="item.value" :disabled="true" placeholder="请选择" size="mini"> |
| | | </el-select> |
| | | <el-date-picker |
| | | v-if="item.itemType === 'date' || item.itemType === 'datetime'" |
| | | v-model="item.value" |
| | | :placeholder="item.itemType === 'date' ? '请选择日期' : '请选择日期时间'" |
| | | type="date"> |
| | | </el-date-picker> |
| | | <el-input-number size="mini" v-if="item.itemType === 'number'" v-model="item.value" :max="99999" |
| | | :min="1"></el-input-number> |
| | | <el-input v-if="item.itemType === 'password'" v-model="input" placeholder="请输入密码" |
| | | show-password></el-input> |
| | | <el-radio v-if="item.itemType === 'radio'" v-model="item.value"></el-radio> |
| | | <el-checkbox v-if="item.itemType === 'checkbox'" v-model="item.value"></el-checkbox> |
| | | <el-select v-if="item.itemType === 'select' || item.itemType === 'multiselect'" |
| | | v-model="item.value" placeholder="请选择" size="mini"> |
| | | <el-option v-for="(i,k) in item.itemKeyValueList" :key="l" :label="i.value" |
| | | :value="i.key"></el-option> |
| | | </el-select> |
| | | <el-date-picker |
| | | v-if="item.itemType === 'date' || item.itemType === 'datetime'" |
| | | v-model="item.value" |
| | | :placeholder="item.itemType === 'date' ? '请选择日期' : '请选择日期时间'" |
| | | type="date"> |
| | | </el-date-picker> |
| | | |
| | | <el-time-select |
| | | v-if="item.itemType === 'time'" |
| | | v-model="item.value" |
| | | :picker-options="{ |
| | | <el-time-select |
| | | v-if="item.itemType === 'time'" |
| | | v-model="item.value" |
| | | :picker-options="{ |
| | | start: '08:30', |
| | | step: '00:15', |
| | | end: '18:30' |
| | | }" |
| | | placeholder="选择时间"> |
| | | </el-time-select> |
| | | <el-button v-if="item.itemType === 'file'" |
| | | v-model="item.value" plain size="mini" type="primary"> |
| | | 上传文件 |
| | | </el-button> |
| | | <el-button v-if="item.itemType === 'multiFile'" |
| | | v-model="item.value" plain size="mini" type="primary"> |
| | | 多文件上传 |
| | | </el-button> |
| | | placeholder="选择时间"> |
| | | </el-time-select> |
| | | <el-button v-if="item.itemType === 'file'" |
| | | v-model="item.value" plain size="mini" type="primary"> |
| | | 上传文件 |
| | | </el-button> |
| | | <el-button v-if="item.itemType === 'multiFile'" |
| | | v-model="item.value" plain size="mini" type="primary"> |
| | | 多文件上传 |
| | | </el-button> |
| | | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog |
| | |
| | | font-size: 14px |
| | | } |
| | | |
| | | .formItemMargin{ |
| | | margin: 10px 0 10px 0; |
| | | } |
| | | |
| | | </style> |