From dcf9c9e0410fe1186239e3f8d6f7bdc789c08010 Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期三, 05 六月 2024 18:00:39 +0800 Subject: [PATCH] 1 --- src/views/configuration/custom/addField.vue | 179 +++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 112 insertions(+), 67 deletions(-) diff --git a/src/views/configuration/custom/addField.vue b/src/views/configuration/custom/addField.vue index 2a60039..822f9f2 100644 --- a/src/views/configuration/custom/addField.vue +++ b/src/views/configuration/custom/addField.vue @@ -15,7 +15,7 @@ <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" :key="item.id" :label="item.title" :value="item.id"/> + <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> @@ -93,42 +93,49 @@ <!-- 鍙橀噺5 鍗曢�夋寜閽�--> <el-col :span="24" v-if="addFieldForm.fieldType == '5'"> <el-form-item label="閫夐」" class="specialItem"> - <div v-for="(item,index) in addFieldForm.radioList" class="fieldContent"> - <el-radio v-model="item.radio" :label="1" style="margin-right: 0px;">銆�</el-radio> - <el-input v-model="item.input" clearable></el-input> - <span class="remove-btn" @click="removeRadio(index)">鍒犻櫎</span> - </div> + <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.radio" label="1">妯悜鎺掑垪</el-radio> - <el-radio v-model="addFieldForm.radio" label="2">绾靛悜鎺掑垪</el-radio> + <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"> - <div v-for="(item,index) in addFieldForm.checkboxList" class="fieldContent"> + <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> --> <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.radio" label="1">妯悜鎺掑垪</el-radio> - <el-radio v-model="addFieldForm.radio" label="2">绾靛悜鎺掑垪</el-radio> + <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.input" clearable></el-input> + <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> @@ -167,6 +174,7 @@ emits: ['success', 'closed'], data() { return { + dialogData: {}, inputTypeList: [ //杈撳叆鏍煎紡 {title: "鏃�",id: "1"}, {title: "鎵嬫満鍙风爜",id: "mobile"}, @@ -181,8 +189,8 @@ {title: "鍗曢�夋寜閽�",id: "5"}, {title: "澶氶�夋寜閽�",id: "6"}, {title: "涓嬫媺閫夋嫨鍣�",id: "7"}, - {title: "涓氬姟瀛楁-浜哄憳",id: "8"}, - {title: "榛樿",id: "9"} + {title: "涓氬姟瀛楁-浜哄憳",id: "9"}, + {title: "榛樿",id: "10",disabled: true} ], dateFormatList: [ //鏃ユ湡鏍煎紡 {title: "骞�-鏈�",id: "yyyy-MM"}, @@ -205,6 +213,7 @@ defaultValue: "", maxlength: 20, updateShow: false, + viewShow: true, fieldType: "1", //瀛楁绫诲瀷锛岄粯璁よ緭鍏ユ formatName: "", supportUpdate: "1", @@ -221,22 +230,10 @@ value: "month", format: "yyyy-MM" }, - radio: '1', - num: 0, - numLast: 9999, - test: "", - check: false, - code: "", - dictValue: "", - sort: "", - isSealed: false, - remark: "", - dictKey: "-1", - test: "", - viewShow: true, - numArea: 200, - dateType: "1", + direction: "0", radioList: [], + selectOption: "", + selectBoxOption: [], checkboxList: [], selectList: [] }, @@ -290,7 +287,10 @@ }; } }, - saveSubmit() { + fieldSubmit() { //淇濆瓨 + this.saveSubmit('closeDialog'); + }, + saveSubmit(isClose) { //淇濆瓨骞剁户缁� var obj = { businessType: 1, fieldDescription: this.addFieldForm.fieldDescription, @@ -335,16 +335,49 @@ } obj.propertyJson = JSON.stringify(propertyJson); } - console.log(obj); - return; - this.$HTTP.post(`/api/blade-system/custom-template-field/insert`,obj).then(res=> { + 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) { - this.$message.success("鎻愪氦鎴愬姛"); + that.$message.success("鎻愪氦鎴愬姛"); + that.$emit("success",obj); + if(isClose == "closeDialog") { + that.visible = false; + } }else { - this.$message.error(res.msg); + that.$message.error(res.msg); } }) - console.log(obj) }, removeRadio(index) { this.addFieldForm.radioList.splice(index,1); @@ -353,7 +386,7 @@ var flag = false; if(this.addFieldForm.radioList.length > 0) { this.addFieldForm.radioList.forEach(item=> { - if(item.input == "") { + if(item.label == "") { flag = true; } }) @@ -362,7 +395,7 @@ this.$message.error("璇疯緭鍏ヤ笂涓�涓嚜瀹氫箟閫夐」鐨勫唴瀹�"); return; } - this.addFieldForm.radioList.push({radio: "",input: ""}); + this.addFieldForm.radioList.push({label: "",value: "radiosSelect" + (this.addFieldForm.radioList.length + 1),parentId: 0}); }, removeCheckbox(index) { this.addFieldForm.checkboxList.splice(index,1); @@ -371,7 +404,7 @@ var flag = false; if(this.addFieldForm.checkboxList.length > 0) { this.addFieldForm.checkboxList.forEach(item=> { - if(item.input == "") { + if(item.label == "") { flag = true; } }) @@ -380,7 +413,7 @@ this.$message.error("璇疯緭鍏ヤ笂涓�涓嚜瀹氫箟閫夐」鐨勫唴瀹�"); return; } - this.addFieldForm.checkboxList.push({check: "",input: ""}); + this.addFieldForm.checkboxList.push({label: "",value: "checkboxSelect" + (this.addFieldForm.checkboxList.length + 1),parentId: 0}); }, removeSelect(index) { this.addFieldForm.selectList.splice(index,1); @@ -389,7 +422,7 @@ var flag = false; if(this.addFieldForm.selectList.length > 0) { this.addFieldForm.selectList.forEach(item=> { - if(item.input == "") { + if(item.label == "") { flag = true; } }) @@ -398,7 +431,7 @@ this.$message.error("璇疯緭鍏ヤ笂涓�涓嚜瀹氫箟閫夐」鐨勫唴瀹�"); return; } - this.addFieldForm.selectList.push({input: ""}); + this.addFieldForm.selectList.push({label: "",value: "select" + (this.addFieldForm.selectList.length + 1),parentId: 0}); }, //鏄剧ず open(mode='add'){ @@ -406,32 +439,35 @@ this.visible = true; return this }, - //琛ㄥ崟鎻愪氦鏂规硶 - fieldSubmit(){ - var obj = Object.assign({},this.addFieldForm); - 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; - } - }) - }, //琛ㄥ崟娉ㄥ叆鏁版嵁 setData(data){ - console.log(data) - //鍙互鍜屼笂闈竴鏍峰崟涓敞鍏ワ紝涔熷彲浠ュ儚涓嬮潰涓�鏍风洿鎺ュ悎骞惰繘鍘� - //Object.assign(this.addFieldForm, 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; + } + } + }) } } } @@ -443,9 +479,18 @@ 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; -- Gitblit v1.9.3