<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="fieldName">
|
<el-input v-model="addFieldForm.fieldName" placeholder="输入一个符合阅读习惯的简短名称，建议4个字符，最多不超过12字" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="提示文字">
|
<el-input v-model="addFieldForm.fieldDescription" placeholder="描述提示用户如何填写字段值（例如：请输入名字）" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="字段类型">
|
<el-select v-model="addFieldForm.fieldType" style="width: 100%" placeholder="选择符合业务的字段类型">
|
<el-option v-for="item in fieldTypeList" :disabled="item.disabled" :key="item.id" :label="item.title" :value="item.id"/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<!-- 变量1 输入框 -->
|
<el-col :span="24" v-if="addFieldForm.fieldType == '1'">
|
<el-form-item label="默认值">
|
<el-input v-model="addFieldForm.defaultValue" placeholder="系统默认提供的值，可不填，设置默认值会替换提示文字" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '1'">
|
<el-form-item label="文字长度">
|
<el-input-number v-model="addFieldForm.maxlength" :min="0" :max="200" label="系统默认提供的值，可不填，设置默认值会替换提示文字"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '1'">
|
<el-form-item label="输入格式">
|
<el-select v-model="addFieldForm.formatName" style="width: 100%" 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" v-if="addFieldForm.fieldType == '2'">
|
<el-form-item label="默认值">
|
<el-input-number v-model="addFieldForm.defaultValue" :precision="addFieldForm.saveDecimalNum" @change="handleChange" :min="0" :max="999" label="系统默认提供的值，可不填，设置默认值会替换提示文字"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '2'">
|
<el-form-item label="格式">
|
<el-radio v-model="addFieldForm.format" label="0">数值</el-radio>
|
<el-radio v-model="addFieldForm.format" label="1">百分比</el-radio>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '2'">
|
<el-form-item label="保留小数位">
|
<el-input-number v-model="addFieldForm.saveDecimalNum" @change="handleChange" :min="0" :max="10" label="最多不超过4位小数"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '2'" v-show="addFieldForm.format == '0'">
|
<el-form-item label="显示千分符">
|
<el-checkbox v-model="addFieldForm.isShowPercentage"></el-checkbox>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '2'">
|
<el-form-item label="限定值范围">
|
<el-input-number v-model="addFieldForm.rangeMin" :min="0" :max="9999"></el-input-number>
|
<span>-</span>
|
<el-input-number v-model="addFieldForm.rangeMax" :min="0" :max="9999"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<!-- 变量3 多行文本-->
|
<el-col :span="24" v-if="addFieldForm.fieldType == '3'">
|
<el-form-item label="默认值">
|
<el-input v-model="addFieldForm.defaultValue" type="textarea" placeholder="系统默认提供的值，可不填，设置默认值会替换提示文字" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '3'">
|
<el-form-item label="文字长度">
|
<el-input-number v-model="addFieldForm.maxlength" :min="0" :max="200" label="请输入文字最长限制字数"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<!-- 变量4 日期选择器-->
|
<el-col :span="24" v-if="addFieldForm.fieldType == '4'">
|
<el-form-item label="默认值">
|
<el-date-picker :editable="true" v-model="addFieldForm.defaultValue" style="width: 100%" :format="addFieldForm.dateFormat" :value-format="addFieldForm.dateFormat" :type="addFieldForm.dateType" placeholder="系统默认提供的值，可不填，设置默认值会替换提示文字" @change="dateChange"></el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '4'">
|
<el-form-item label="日期格式">
|
<el-select v-model="addFieldForm.type" style="width: 100%" placeholder="请输入文字最长限制字数" @change="typeDateChange">
|
<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" v-if="addFieldForm.fieldType == '5'">
|
<el-form-item label="选项" class="specialItem">
|
<el-radio-group v-model="addFieldForm.selectOption" class="specialRadio">
|
<el-radio :label="item.value" style="margin-right: 0px;" v-for="(item,index) in addFieldForm.radioList">
|
<el-input v-model="item.label" clearable></el-input>
|
<span class="remove-btn" @click="removeRadio(index)">删除</span>
|
</el-radio>
|
</el-radio-group>
|
<div class="add-btn" @click="addRadio">添加选项</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '5'">
|
<el-form-item label="排序方式">
|
<el-radio v-model="addFieldForm.direction" label="0">横向排列</el-radio>
|
<el-radio v-model="addFieldForm.direction" label="1">纵向排列</el-radio>
|
</el-form-item>
|
</el-col>
|
<!-- 变量6 多选按钮-->
|
<el-col :span="24" v-if="addFieldForm.fieldType == '6'">
|
<el-form-item label="选项" class="specialItem">
|
<el-checkbox-group v-model="addFieldForm.selectBoxOption" class="specialCheck">
|
<el-checkbox :label="item.value" :value="item.value" v-for="(item,index) in addFieldForm.checkboxList">
|
<el-input v-model="item.label" clearable></el-input>
|
<span class="remove-btn" @click="removeCheckbox(index)">删除</span>
|
</el-checkbox>
|
</el-checkbox-group>
|
<!-- <div v-for="(item,index) in addFieldForm.checkboxList" class="fieldContent">
|
<el-checkbox v-model="item.check" style="margin-right: 15px;"></el-checkbox>
|
<el-input v-model="item.input" clearable></el-input>
|
<span class="remove-btn" @click="removeCheckbox(index)">删除</span>
|
</div> -->
|
<div class="add-btn" @click="addCheckbox">添加选项</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.fieldType == '6'">
|
<el-form-item label="排序方式">
|
<el-radio v-model="addFieldForm.direction" label="0">横向排列</el-radio>
|
<el-radio v-model="addFieldForm.direction" label="1">纵向排列</el-radio>
|
</el-form-item>
|
</el-col>
|
<!-- 变量7 下拉选择器-->
|
<el-col :span="24" v-if="addFieldForm.fieldType == '7'">
|
<el-form-item label="选项" class="specialItem">
|
<div v-for="(item,index) in addFieldForm.selectList" class="fieldContent">
|
<el-input v-model="item.label" clearable></el-input>
|
<span class="remove-btn" @click="removeSelect(index)">删除</span>
|
</div>
|
<div class="add-btn" @click="addSelect">添加选项</div>
|
</el-form-item>
|
</el-col>
|
<!-- 变量8 业务字段-人员-没有-->
|
<!-- 变量9 默认-没有 -->
|
<el-col :span="24">
|
<el-form-item label="编辑页显示">
|
<el-checkbox v-model="addFieldForm.updateShow"></el-checkbox>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24" v-if="addFieldForm.updateShow">
|
<el-form-item label="支持编辑">
|
<el-radio v-model="addFieldForm.supportUpdate" label="1">是</el-radio>
|
<el-radio v-model="addFieldForm.supportUpdate" label="0">否</el-radio>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="查看页显示">
|
<el-checkbox v-model="addFieldForm.viewShow"></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="saveSubmit">保存并继续添加</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
emits: ['success', 'closed'],
|
data() {
|
return {
|
dialogData: {},
|
inputTypeList: [ //输入格式
|
{title: "无",id: "1"},
|
{title: "手机号码",id: "mobile"},
|
{title: "电话号码",id: "telephone"},
|
{title: "邮箱",id: "email"}
|
],
|
fieldTypeList: [ //字段类型
|
{title: "输入框",id: "1"},
|
{title: "数字输入框",id: "2"},
|
{title: "多行文本",id: "3"},
|
{title: "日期选择器",id: "4"},
|
{title: "单选按钮",id: "5"},
|
{title: "多选按钮",id: "6"},
|
{title: "下拉选择器",id: "7"},
|
{title: "业务字段-人员",id: "9"},
|
{title: "默认",id: "10",disabled: true}
|
],
|
dateFormatList: [ //日期格式
|
{title: "年-月",id: "yyyy-MM"},
|
{title: "年-月-日",id: "yyyy-MM-dd"},
|
{title: "年-月-日 时：分",id: "yyyy-MM-dd HH:mm"},
|
{title: "年-月-日 时：分：秒",id: "yyyy-MM-dd HH:mm:ss"}
|
],
|
mode: "add",
|
titleMap: {
|
add: '添加自定义字段',
|
edit: '修改',
|
show: '查看'
|
},
|
visible: false,
|
isSaveing: false,
|
//表单数据
|
addFieldForm: {
|
fieldName: "",
|
fieldDescription: "",
|
defaultValue: "",
|
maxlength: 20,
|
updateShow: false,
|
viewShow: true,
|
fieldType: "1", //字段类型，默认输入框
|
formatName: "",
|
supportUpdate: "1",
|
saveDecimalNum: 0,
|
format: "0",
|
isShowPercentage: false,
|
rangeMin: 0,
|
rangeMax: 0,
|
type: "yyyy-MM",
|
dateType: "month",
|
dateFormat: "YYYY-MM",
|
val: {
|
label: "年-月",
|
value: "month",
|
format: "yyyy-MM"
|
},
|
direction: "0",
|
radioList: [],
|
selectOption: "",
|
selectBoxOption: [],
|
checkboxList: [],
|
selectList: []
|
},
|
//验证规则
|
addFieldRules: {
|
fieldName:[{required: true, message: '请输入字段名称'}]
|
}
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
dateChange(val) {
|
console.log(val)
|
this.addFieldForm.defaultValue = val;
|
},
|
typeDateChange(val) {
|
this.addFieldForm.defaultValue = "";
|
if(val == "yyyy-MM") {
|
this.addFieldForm.dateType = "month";
|
this.addFieldForm.dateFormat = "YYYY-MM";
|
this.addFieldForm.val = {
|
label: "年-月",
|
value: "month",
|
format: val
|
};
|
}else if(val == "yyyy-MM-dd") {
|
this.addFieldForm.dateType = "date";
|
this.addFieldForm.dateFormat = "YYYY-MM-DD";
|
this.addFieldForm.val = {
|
label: "年-月-日",
|
value: "date",
|
format: val
|
};
|
}else if(val == "yyyy-MM-dd HH:mm") {
|
this.addFieldForm.dateType = "datetime";
|
this.addFieldForm.dateFormat = "YYYY-MM-DD HH-mm";
|
this.addFieldForm.val = {
|
label: "年-月-日 时：分",
|
value: "datetime",
|
format: val
|
};
|
}else if(val == "yyyy-MM-dd HH:mm:ss") {
|
this.addFieldForm.dateType = "datetime";
|
this.addFieldForm.dateFormat = "YYYY-MM-DD HH-mm-ss";
|
this.addFieldForm.val = {
|
label: "年-月-日 时：分：秒",
|
value: "datetime",
|
format: val
|
};
|
}
|
},
|
fieldSubmit() { //保存
|
this.saveSubmit('closeDialog');
|
},
|
saveSubmit(isClose) { //保存并继续
|
var obj = {
|
businessType: 1,
|
fieldDescription: this.addFieldForm.fieldDescription,
|
fieldName: this.addFieldForm.fieldName,
|
fieldType: this.addFieldForm.fieldType,
|
supportUpdate: this.addFieldForm.supportUpdate,
|
systemField: 0,
|
updateShow: this.addFieldForm.updateShow?"1":"0",
|
viewShow: this.addFieldForm.viewShow?"1":"0",
|
}
|
if(this.addFieldForm.fieldType == "1") { //字段类型
|
obj.defaultValue = this.addFieldForm.defaultValue; //默认值
|
var propertyJson = { //长度、格式
|
maxlength: this.addFieldForm.maxlength,
|
formatName: this.addFieldForm.formatName == "1"?"":this.addFieldForm.formatName
|
}
|
obj.propertyJson = JSON.stringify(propertyJson);
|
}
|
if(this.addFieldForm.fieldType == "2") { //字段类型
|
obj.defaultValue = this.addFieldForm.defaultValue; //默认值
|
var propertyJson = {
|
format: this.addFieldForm.format,
|
saveDecimalNum: this.addFieldForm.saveDecimalNum,
|
isShowPercentage: this.addFieldForm.isShowPercentage,
|
rangeMin: this.addFieldForm.rangeMin,
|
rangeMax: this.addFieldForm.rangeMax
|
}
|
obj.propertyJson = JSON.stringify(propertyJson);
|
}
|
if(this.addFieldForm.fieldType == "3") { //字段类型
|
obj.defaultValue = this.addFieldForm.defaultValue; //默认值
|
var propertyJson = {
|
maxlength: this.addFieldForm.maxlength
|
}
|
obj.propertyJson = JSON.stringify(propertyJson);
|
}
|
if(this.addFieldForm.fieldType == "4") { //字段类型
|
obj.defaultValue = this.addFieldForm.defaultValue; //默认值
|
var propertyJson = {
|
type: this.addFieldForm.type,
|
val: this.addFieldForm.val
|
}
|
obj.propertyJson = JSON.stringify(propertyJson);
|
}
|
if(this.addFieldForm.fieldType == "5") { //单选按钮
|
var propertyJson = {
|
selectOption: this.addFieldForm.selectOption,
|
options: this.addFieldForm.radioList,
|
direction: this.addFieldForm.direction
|
}
|
obj.propertyJson = JSON.stringify(propertyJson);
|
}
|
if(this.addFieldForm.fieldType == "6") { //多选按钮
|
var propertyJson = {
|
selectOption: this.addFieldForm.selectBoxOption,
|
options: this.addFieldForm.checkboxList,
|
direction: this.addFieldForm.direction
|
}
|
obj.propertyJson = JSON.stringify(propertyJson);
|
}
|
if(this.addFieldForm.fieldType == "7") { //下拉选择器
|
var propertyJson = {
|
options: this.addFieldForm.selectList
|
}
|
obj.propertyJson = JSON.stringify(propertyJson);
|
}
|
obj.businessType = this.$route.query.type;
|
var that = this;
|
if(this.mode == "edit") {
|
var url = "/api/blade-system/custom-template-field/update";
|
var method = "put";
|
obj.id = this.dialogData.id;
|
}else {
|
var url = "/api/blade-system/custom-template-field/insert";
|
var method = "post";
|
}
|
this.$HTTP[method](url,obj).then(res=> {
|
if(res.code == 200) {
|
that.$message.success("提交成功");
|
that.$emit("success",obj);
|
if(isClose == "closeDialog") {
|
that.visible = false;
|
}
|
}else {
|
that.$message.error(res.msg);
|
}
|
})
|
},
|
removeRadio(index) {
|
this.addFieldForm.radioList.splice(index,1);
|
},
|
addRadio() {
|
var flag = false;
|
if(this.addFieldForm.radioList.length > 0) {
|
this.addFieldForm.radioList.forEach(item=> {
|
if(item.label == "") {
|
flag = true;
|
}
|
})
|
}
|
if(flag) {
|
this.$message.error("请输入上一个自定义选项的内容");
|
return;
|
}
|
this.addFieldForm.radioList.push({label: "",value: "radiosSelect" + (this.addFieldForm.radioList.length + 1),parentId: 0});
|
},
|
removeCheckbox(index) {
|
this.addFieldForm.checkboxList.splice(index,1);
|
},
|
addCheckbox() {
|
var flag = false;
|
if(this.addFieldForm.checkboxList.length > 0) {
|
this.addFieldForm.checkboxList.forEach(item=> {
|
if(item.label == "") {
|
flag = true;
|
}
|
})
|
}
|
if(flag) {
|
this.$message.error("请输入上一个自定义选项的内容");
|
return;
|
}
|
this.addFieldForm.checkboxList.push({label: "",value: "checkboxSelect" + (this.addFieldForm.checkboxList.length + 1),parentId: 0});
|
},
|
removeSelect(index) {
|
this.addFieldForm.selectList.splice(index,1);
|
},
|
addSelect() {
|
var flag = false;
|
if(this.addFieldForm.selectList.length > 0) {
|
this.addFieldForm.selectList.forEach(item=> {
|
if(item.label == "") {
|
flag = true;
|
}
|
})
|
}
|
if(flag) {
|
this.$message.error("请输入上一个自定义选项的内容");
|
return;
|
}
|
this.addFieldForm.selectList.push({label: "",value: "select" + (this.addFieldForm.selectList.length + 1),parentId: 0});
|
},
|
//显示
|
open(mode='add'){
|
this.mode = mode;
|
this.visible = true;
|
return this
|
},
|
//表单注入数据
|
setData(data){
|
this.dialogData = data;
|
this.$HTTP.get(`/api/blade-system/custom-template-field/get/${data.id}`).then(res=> {
|
if(res.code == 200) {
|
res.data.fieldType = String(res.data.fieldType);
|
res.data.format = res.data.format == "0"?"0":"1";
|
res.data.direction = String(res.data.direction);
|
res.data.updateShow = res.data.updateShow == "1"?true:false;
|
res.data.viewShow = res.data.viewShow == "1"?true:false;
|
res.data.supportUpdate = String(res.data.supportUpdate);
|
if(res.data.fieldType != "10") {
|
this.addFieldForm = Object.assign(res.data,JSON.parse(res.data.propertyJson));
|
}else {
|
this.addFieldForm = res.data;
|
}
|
this.addFieldForm.format = String(this.addFieldForm.format);
|
if(res.data.fieldType == "5") {
|
this.addFieldForm.radioList = this.addFieldForm.options;
|
}
|
if(res.data.fieldType == "6") {
|
this.addFieldForm.checkboxList = this.addFieldForm.options;
|
this.addFieldForm.selectBoxOption = this.addFieldForm.selectOption;
|
}
|
if(res.data.fieldType == "7") {
|
this.addFieldForm.selectList = this.addFieldForm.options;
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.add-btn {
|
color: #409eff;
|
cursor: pointer;
|
}
|
.specialItem /deep/ .el-form-item__content{
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
.specialRadio,.specialCheck {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
.specialRadio label,.specialCheck label{
|
margin-bottom: 8px;
|
}
|
.fieldContent {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 8px;
|
}
|
.remove-btn {
|
min-width: 60px;
|
display: inline-block;
|
margin-left: 12px;
|
color: red;
|
cursor: pointer;
|
}
|
</style>
|
