diff --git a/src/views/content/content-edit.vue b/src/views/content/content-edit.vue index fa064c1..60f562a 100644 --- a/src/views/content/content-edit.vue +++ b/src/views/content/content-edit.vue @@ -3,7 +3,7 @@ - + @@ -29,9 +29,11 @@ import TinymceEditor from '@/components/TinymceEditor'; // 是否是修改 isUpdate: false, // 实例对象 - dig_form: {}, + formApi: {}, // 表单数据 dig_value: {}, + // 表单 props 、Array + formArr: [], // 组件参数配置 dig_option: { form: { @@ -51,20 +53,38 @@ import TinymceEditor from '@/components/TinymceEditor'; }, watch: { visible: { - handler(valNew) { + handler(newVal) { this.$nextTick(() => { - if (valNew) { - for(let i in this.edit_data){ - let flag = Object.keys(this.dig_form.form).includes(i); + // 判断是否为编辑弹窗 + const data = this.edit_data + const formVal = {} + const formNull = {} + if (data) { + // this.formArr = [] + for(let i in data){ + let flag = Object.keys(this.formApi.form).includes(i); if (flag) { - this.dig_form.form[i] = this.edit_data[i] + let iStr = i + '_str' + if (Object.keys(data).includes(iStr)) { + formVal[i] = data[iStr] + } else { + formVal[i] = data[i] + } + this.formApi.setValue(formVal) + formNull[i] = '' + // this.formArr.push(i) } } this.isUpdate = true; } else { - this.dig_form.resetFields() this.isUpdate = false; } + // 关闭弹窗、清空数据 + if (!newVal) { + if (Object.keys(formNull).length > 0) { + this.formApi.setValue(formNull) + } + } }) }, deep: true @@ -76,8 +96,9 @@ import TinymceEditor from '@/components/TinymceEditor'; mounted() { console.log('表单已加载') const _em = this - this.dig_option.onSubmit = () => { - _em.save() + this.dig_option.onSubmit = (formData) => { + alert(JSON.stringify(formData)) + _em.save(formData) } }, methods: { @@ -89,20 +110,17 @@ import TinymceEditor from '@/components/TinymceEditor'; }; }, /* 保存编辑 */ - save() { + save(formData) { // this.$refs['form'].validate((valid) => { // if (valid) { this.loading = true; - this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', this.dig_value).then(res => { + this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', formData).then(res => { this.loading = false; if (res.data.code === 0) { this.$message({ type: 'success', message: res.data.msg - }); - if (!this.isUpdate) { - this.dig_value = {}; - } + }) this.updateVisible(false); this.$emit('done'); } else { diff --git a/src/views/content/content-list.vue b/src/views/content/content-list.vue index 8e20269..b4d865b 100644 --- a/src/views/content/content-list.vue +++ b/src/views/content/content-list.vue @@ -196,7 +196,6 @@ export default { } else { this.current = null; } - // console.log(this.current) this.showEdit = true; }, /* 删除 */ diff --git a/src/views/content/create_form.js b/src/views/content/create_form.js index d21c300..3a3ff78 100644 --- a/src/views/content/create_form.js +++ b/src/views/content/create_form.js @@ -1,5 +1,5 @@ -import setting from "@/config/setting"; +import setting from '@/config/setting'; export function getForm(valNew) { const rule = [] @@ -8,49 +8,49 @@ export function getForm(valNew) { eItem.type = e.type eItem.title = e.show_name eItem.field = e.field - eItem.value = "" + eItem.value = '' eItem.col = { span: 23 } eItem.props = { - type: "text", + type: 'text', placeholder: e.placeholder, } - if (e.type === "hidden") { - eItem.type = "hidden" + if (e.type === 'hidden') { + eItem.type = 'hidden' } - if (e.type === "text") { - eItem.type = "input" + if (e.type === 'text') { + eItem.type = 'input' } - if (e.type === "editor") { - eItem.type = "editor" + if (e.type === 'editor') { + eItem.type = 'editor' } - if (e.type === "radio") { - eItem.type = "switch" + if (e.type === 'radio') { + eItem.type = 'switch' eItem.props = { - activeValue: "1", - inactiveValue: "0" + activeValue: '1', + inactiveValue: '0' } } - if (e.type === "number") { - eItem.type = "input" - eItem.props.type = "number" + if (e.type === 'number') { + eItem.type = 'input' + eItem.props.type = 'number' } - if (e.type === "password") { - eItem.type = "input" - eItem.props.type = "password" + if (e.type === 'password') { + eItem.type = 'input' + eItem.props.type = 'password' } - if (e.type === "textarea") { - eItem.type = "input" - eItem.props.type = "textarea" + if (e.type === 'textarea') { + eItem.type = 'input' + eItem.props.type = 'textarea' } - if (e.type === "file") { - eItem.type = "upload" + if (e.type === 'file') { + eItem.type = 'upload' eItem.props = { - type: "drag", - uploadType: "file", + type: 'drag', + uploadType: 'file', action: setting.uploadImageUrl, - name: "pic", + name: 'pic', multiple: true, // 多选 limit: 2, onSuccess: function(res, file) { @@ -58,102 +58,89 @@ export function getForm(valNew) { } } } - if (e.type === "image" || e.type === "images") { - eItem.type = "upload" + if (e.type === 'image' || e.type === 'images') { + eItem.type = 'upload' eItem.props = { - type: "select", - uploadType: "image", + type: 'select', + uploadType: 'image', action: setting.uploadImageUrl, - name: "pic", + name: 'pic', multiple: true, - // accept: "image\/*", - maxLength: 1, //可上传文件数量 (limit: 2,) + accept: 'image', + limit: 1, //可上传文件数量 (limit: 2,) allowRemove: true, //是否可删除,设置为false是不显示删除按钮 onSuccess: function(res, file) { file.url = res.data.filePath; } } } - if (e.type === "tag") { - eItem.type = "input" + if (e.type === 'tag') { + eItem.type = 'input' } - if (e.type === "cascader") { - eItem.type = "cascader" + if (e.type === 'cascader') { + eItem.type = 'cascader' eItem.props = { data: [], } } - if (e.type === "checkbox") { + if (e.type === 'checkbox' || e.type === 'select') { eItem.type = e.type eItem.options = []; let opt = e.value_arr; for (let x in opt) { eItem.options.push({ - "value": x, - "label": opt[x], - "disabled": false + 'value': x, + 'label': opt[x], + 'disabled': false }) } } - if (e.type === "select") { - eItem.type = "select" - eItem.options = []; - // {"value": "104","label": "生态蔬菜","disabled": false} - let opt = e.value_arr; - for (let x in opt) { - eItem.options.push({ - "value": x, - "label": opt[x], - "disabled": false - }) - } - } - if (e.type === "time") { - eItem.type = "TimePicker" - eItem.props.type = "time" + if (e.type === 'time') { + eItem.type = 'TimePicker' + eItem.props.type = 'time' } - if (e.type === "timerange") { - eItem.type = "TimePicker" - eItem.props.type = "timerange" + if (e.type === 'timerange') { + eItem.type = 'TimePicker' + eItem.props.type = 'timerange' } - if (e.type === "date") { - eItem.type = "DatePicker" - eItem.props.type = "date" + if (e.type === 'date') { + eItem.type = 'DatePicker' + eItem.props.type = 'date' } - if (e.type === "datetime") { - eItem.type = "DatePicker" - eItem.props.type = "datetime" + if (e.type === 'datetime') { + eItem.type = 'DatePicker' + eItem.props.type = 'datetime' } - if (e.type === "daterange") { - eItem.type = "DatePicker" - eItem.props.type = "daterange" + if (e.type === 'daterange') { + eItem.type = 'DatePicker' + eItem.props.type = 'daterange' } - if (e.type === "datetimerange") { - eItem.type = "DatePicker" - eItem.props.type = "datetimerange" + if (e.type === 'datetimerange') { + eItem.type = 'DatePicker' + eItem.props.type = 'datetimerange' } if (e.type === 'slider') { eItem.type = 'slider', eItem.props = { - "min": 0, + 'min': 0, //最小值 - "max": 100, + 'max': 100, //最大值 - "step": 1, + 'step': 1, //步长,取值建议能被(max - min)整除 - "disabled": false, + 'disabled': false, //是否禁用滑块 - "range": true, + 'range': true, //是否开启双滑块模式 - "showInput": false, + 'showInput': false, //是否显示数字输入框,仅在单滑块模式下有效 - "showStops": true, + 'showStops': true, //是否显示间断点,建议在 step 不密集时使用 - "showTip": "hover", + 'showTip': 'hover', //提示的显示控制,可选值为 hover(悬停,默认)、always(总是可见)、never(不可见) - "tipFormat": undefined, + 'tipFormat': undefined, //Slider 会把当前值传给 tip-format,并在 Tooltip 中显示 tip-format 的返回值,若为 null,则隐藏 Tooltip - "inputSize": "small", + 'inputSize': 'small', //数字输入框的尺寸,可选值为large、small、default或者不填,仅在开启 show-input 时有效 } } @@ -166,15 +153,15 @@ export function getForm(valNew) { } if (e.type === 'text') { eItem.validate = [ - {required:true,type:'string',message:"请输入" + e.show_name} + {required:true,type:'string',message:'请输入' + e.show_name} ] } if (e.type === 'number') { eItem.validate = [ - {required:true,message:"请输入" + e.show_name}, + {required:true,message:'请输入' + e.show_name}, ] } - if (e.type === "upload"){ + if (e.type === 'upload'){ eItem.validate = [{ required: true, type: 'array',