<template>
|
<el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
|
<el-form :model="addFieldForm" :rules="addFieldRules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="center">
|
<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-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>
|
</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 fieldTypeList" :key="item.id" :label="item.title" :value="item.id"/>
|
</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-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-row>
|
</el-form>
|
<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>
|
|
<script>
|
export default {
|
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: '添加自定义字段',
|
edit: '修改',
|
show: '查看'
|
},
|
visible: false,
|
isSaveing: false,
|
//表单数据
|
addFieldForm: {
|
radio: '1',
|
num: 0,
|
test: "",
|
check: false,
|
code: "",
|
dictValue: "",
|
sort: "",
|
isSealed: false,
|
remark: "",
|
dictKey: "-1",
|
$isSealed: "否"
|
},
|
//验证规则
|
addFieldRules: {
|
code:[{required: true, message: '请输入字典编号'}],
|
dictValue:[{required: true, message: '请输入字典名称'}],
|
sort:[{required: true, message: '请输入字典排序'}]
|
}
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
deptIdChange() {
|
|
},
|
//显示
|
open(mode='add'){
|
this.mode = mode;
|
this.visible = true;
|
return this
|
},
|
//表单提交方法
|
fieldSubmit(){
|
var obj = Object.assign({},this.addFieldForm);
|
if(obj.isSealed === true) {
|
obj.$isSealed = "是";
|
obj.isSealed = "1";
|
}else {
|
obj.$isSealed = "否";
|
obj.isSealed = "0";
|
}
|
this.$refs.dialogForm.validate(async (valid) => {
|
if (valid) {
|
this.isSaveing = true;
|
this.$HTTP.post("/api/blade-system/dict/submit",obj).then(res=> {
|
this.isSaveing = false;
|
if(res.code == 200) {
|
this.$emit('success', this.addFieldForm, this.mode);
|
this.visible = false;
|
this.$message.success("操作成功");
|
}else {
|
this.$alert(res.message, "提示", {type: 'error'});
|
}
|
})
|
}else{
|
return false;
|
}
|
})
|
},
|
fieldSubmitAgain() {
|
|
},
|
//表单注入数据
|
setData(data){
|
console.log(data)
|
//可以和上面一样单个注入，也可以像下面一样直接合并进去
|
if(data.isSealed == "1") {
|
data.isSealed = true;
|
}else {
|
data.isSealed = false;
|
}
|
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>
|
