| | |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="字段名称" prop="code"> |
| | | <el-input v-model="addFieldForm.code" placeholder="输入一个符合阅读习惯的简短名称,建议4个字符,最多不超过12字" clearable></el-input> |
| | | <el-input v-model="addFieldForm.test" placeholder="输入一个符合阅读习惯的简短名称,建议4个字符,最多不超过12字" clearable></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="提示文字" prop="dictValue"> |
| | | <el-input v-model="addFieldForm.dictValue" placeholder="描述提示用户如何填写字段值(例如:请输入名字)" clearable></el-input> |
| | | <el-form-item label="提示文字"> |
| | | <el-input v-model="addFieldForm.test" placeholder="描述提示用户如何填写字段值(例如:请输入名字)" clearable></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 变量1 输入框 --> |
| | | <el-col :span="24"> |
| | | <el-form-item label="默认值"> |
| | | <el-input v-model="addFieldForm.dictValue" placeholder="系统默认提供的值,可不填,设置默认值会替换提示文字" clearable></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="文字长度"> |
| | | <el-date-picker v-model="addFieldForm.num" style="width: 100%" type="date" placeholder="请输入文字最长限制字数"></el-date-picker> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="输入格式"> |
| | | <el-select v-model="addFieldForm.test" style="width: 100%" @change="deptIdChange" placeholder="选择输入框不同的输入格式"> |
| | | <el-option v-for="item in inputTypeList" :key="item.id" :label="item.title" :value="item.id"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 变量2 数字输入框--> |
| | | <el-col :span="24"> |
| | | <el-form-item label="默认值"> |
| | | <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10" label="系统默认提供的值,可不填,设置默认值会替换提示文字"></el-input-number> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="格式"> |
| | | <el-radio v-model="addFieldForm.radio" label="1">数值</el-radio> |
| | | <el-radio v-model="addFieldForm.radio" label="2">百分比</el-radio> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="保留小数位"> |
| | | <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10" label="最多不超过4位小数"></el-input-number> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="显示千分符"> |
| | | <el-checkbox v-model="addFieldForm.check"></el-checkbox> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="限定值范围"> |
| | | <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10"></el-input-number> |
| | | <span>-</span> |
| | | <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10"></el-input-number> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 变量3 多行文本--> |
| | | <el-col :span="24"> |
| | | <el-form-item label="默认值"> |
| | | <el-input v-model="addFieldForm.test" placeholder="系统默认提供的值,可不填,设置默认值会替换提示文字" clearable></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="文字长度"> |
| | | <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10" label="请输入文字最长限制字数"></el-input-number> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 变量4 日期选择器--> |
| | | <el-col :span="24"> |
| | | <el-form-item label="默认值"> |
| | | <el-date-picker v-model="addFieldForm.test" style="width: 100%" type="date" placeholder="系统默认提供的值,可不填,设置默认值会替换提示文字"></el-date-picker> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="日期格式" prop="deptId"> |
| | | <el-select v-model="addFieldForm.test" style="width: 100%" @change="deptIdChange" placeholder="请输入文字最长限制字数"> |
| | | <el-option v-for="item in dateFormatList" :key="item.id" :label="item.title" :value="item.id"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 变量5 单选按钮--> |
| | | <el-col :span="24"> |
| | | <el-form-item label="选项"> |
| | | <div> |
| | | <el-radio v-model="addFieldForm.radio" label="1"></el-radio> |
| | | <el-input v-model="addFieldForm.test" clearable></el-input> |
| | | <span class="remove-btn">删除</span> |
| | | </div> |
| | | <div class="add-btn">添加选项</div> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="排序方式"> |
| | | <el-radio v-model="addFieldForm.radio" label="1">横向排列</el-radio> |
| | | <el-radio v-model="addFieldForm.radio" label="2">纵向排列</el-radio> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 变量6 多选按钮--> |
| | | <el-col :span="24"> |
| | | <el-form-item label="选项"> |
| | | <div> |
| | | <el-checkbox v-model="addFieldForm.check"></el-checkbox> |
| | | <el-input v-model="addFieldForm.test" clearable></el-input> |
| | | <span class="remove-btn">删除</span> |
| | | </div> |
| | | <div class="add-btn">添加选项</div> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="排序方式"> |
| | | <el-radio v-model="addFieldForm.radio" label="1">横向排列</el-radio> |
| | | <el-radio v-model="addFieldForm.radio" label="2">纵向排列</el-radio> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 变量7 下拉选择器--> |
| | | <el-col :span="24"> |
| | | <el-form-item label="选项"> |
| | | <div> |
| | | <el-input v-model="addFieldForm.test" clearable></el-input> |
| | | <span class="remove-btn">删除</span> |
| | | </div> |
| | | <div class="add-btn">添加选项</div> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- 变量8 业务字段-人员--> |
| | | <!-- 没有 --> |
| | | <el-col :span="24"> |
| | | <el-form-item label="编辑页显示"> |
| | | <el-checkbox v-model="addFieldForm.check">显示</el-checkbox> |
| | | <el-checkbox v-model="addFieldForm.test" disabled></el-checkbox> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="查看页显示"> |
| | | <el-checkbox v-model="addFieldForm.check">显示</el-checkbox> |
| | | <el-checkbox v-model="addFieldForm.test" disabled></el-checkbox> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <template #footer> |
| | | <el-button @click="visible=false" >取 消</el-button> |
| | | <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="fieldSubmit">保存</el-button> |
| | | <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="fieldSubmitAgain">保存并继续添加</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | |
| | | emits: ['success', 'closed'], |
| | | data() { |
| | | return { |
| | | inputTypeList: [ //输入格式 |
| | | {title: "无",id:1}, |
| | | {title: "手机号码",id:1}, |
| | | {title: "电话号码",id:1}, |
| | | {title: "邮箱",id:1} |
| | | ], |
| | | fieldTypeList: [ //字段类型 |
| | | {title: "输入框",id:1}, |
| | | {title: "数字输入框",id:2}, |
| | | {title: "多行文本",id:3}, |
| | | {title: "日期选择器",id:4}, |
| | | {title: "单选按钮",id:5}, |
| | | {title: "多选按钮",id:6}, |
| | | {title: "下拉选择器",id:7}, |
| | | {title: "业务字段-人员",id:8}, |
| | | {title: "默认",id:9} |
| | | ], |
| | | dateFormatList: [ //日期格式 |
| | | {title: "年-月",id:1}, |
| | | {title: "年-月-日",id:2}, |
| | | {title: "年-月-日 时:分",id:3}, |
| | | {title: "年-月-日 时:分:秒",id:4} |
| | | ], |
| | | deptIdList: [], |
| | | mode: "add", |
| | | titleMap: { |
| | | add: '添加自定义字段', |
| | |
| | | isSaveing: false, |
| | | //表单数据 |
| | | addFieldForm: { |
| | | radio: '1', |
| | | num: 0, |
| | | test: "", |
| | | check: false, |
| | | code: "", |
| | | dictValue: "", |
| | | sort: "", |
| | | isSealed: false, |
| | | remark: "", |
| | | dictKey: "-1", |
| | | $isSealed: "否" |
| | | test: "" |
| | | }, |
| | | //验证规则 |
| | | addFieldRules: { |
| | |
| | | } |
| | | }) |
| | | }, |
| | | fieldSubmitAgain() { |
| | | |
| | | }, |
| | | //表单注入数据 |
| | | setData(data){ |
| | | console.log(data) |
| | | //可以和上面一样单个注入,也可以像下面一样直接合并进去 |
| | | if(data.isSealed == "1") { |
| | | data.isSealed = true; |
| | | }else { |
| | | data.isSealed = false; |
| | | } |
| | | Object.assign(this.addFieldForm, data); |
| | | //Object.assign(this.addFieldForm, data); |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .remove-btn { |
| | | margin-left: 10px; |
| | | color: red; |
| | | cursor: pointer; |
| | | } |
| | | .add-btn { |
| | | margin-left: 30px; |
| | | color: #3b8e8e; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | </style> |