内容管理-05100054

src/views/content/content-edit.vue

@@ -3,7 +3,7 @@
   <el-dialog :title="isUpdate?'编辑':'添加'" :visible="visible" width="80%" :destroy-on-close="true" :lock-scroll="false"
     custom-class="ele-dialog-form" @update:visible="updateVisible">
     <!-- <p>formData: {{dig_value}}</p> -->
-    <form-create v-model="dig_form" :rule="edit_rule" :option="dig_option"></form-create>
+    <form-create v-model="formApi" :rule="edit_rule" :option="dig_option"></form-create>
   </el-dialog>
 </template>
 
@@ -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 {

src/views/content/content-list.vue

@@ -196,7 +196,6 @@ export default {
       } else {
         this.current = null;
       }
-      // console.log(this.current)
       this.showEdit = true;
     },
     /* 删除 */

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
-        })
-      }
-    }
-    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
+          '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',