模型可不传

vu/src/views/face/components/FaceStarDetail.vue

@@ -3,7 +3,7 @@
     <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
 
       <sticky :class-name="'sub-navbar '+postForm.status">
-        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm" :disabled="isdisabledFn">保存
+        <el-button v-loading="loading" :disabled="isdisabledFn" style="margin-left: 10px;" type="success" @click="submitForm">保存
         </el-button>
       </sticky>
 
@@ -27,11 +27,17 @@
                     <el-col :span="12">
 
                       <el-form-item label-width="75px" label="*性别:" prop="gender">
-                        <el-select v-model="postForm.sex" :placeholder="'性别:'" clearable
-                                   class="postInfo-container-item"
-                                   style="width: 230px">
-                          <el-option v-for="item in GenderTypeOptions" :key="item.key" :label="item.display_name"
-                                     :value="item.key"/>
+                        <el-select
+                          v-model="postForm.sex"
+                          :placeholder="'性别:'"
+                          clearable
+                          class="postInfo-container-item"
+                          style="width: 230px">
+                          <el-option
+                            v-for="item in GenderTypeOptions"
+                            :key="item.key"
+                            :label="item.display_name"
+                            :value="item.key"/>
                         </el-select>
                       </el-form-item>
                     </el-col>
@@ -43,15 +49,15 @@
 
             <div>
               <el-form-item style="margin-bottom: 20px;" label-width="75px" label="*原图:" prop="avatar">
-                <span v-model="uploadType"></span>
-                <FaceUpload v-model="postForm.ordinary_image_url" :uploadType="uploadType"/>
+                <span v-model="uploadType"/>
+                <FaceUpload v-model="postForm.ordinary_image_url" :upload-type="uploadType"/>
               </el-form-item>
             </div>
 
             <div>
               <el-form-item style="margin-bottom: 20px;" label-width="75px" label="*模型:" prop="avatar">
-                <span v-model="uploadType"></span>
-                <FaceUpload v-model="postForm.modeling_obj_url" :uploadType="uploadType"/>
+                <span v-model="uploadType"/>
+                <FaceUpload v-model="postForm.modeling_obj_url" :upload-type="uploadType"/>
               </el-form-item>
             </div>
           </el-card>
@@ -63,170 +69,163 @@
 </template>
 
 <script>
-  import Tinymce from '@/components/Tinymce'
-  import FaceUpload from '@/components/Upload/faceupload'
-  import MDinput from '@/components/MDinput'
-  import Sticky from '@/components/Sticky' // 粘性header组件
-  import waves from '@/directive/waves'
-  import Pagination from '@/components/Pagination'
-  import {validateURL} from '@/utils/validate'
-  import {faceStarCreate, facestarDetail} from '@/api/face_image_upload'
+import Tinymce from '@/components/Tinymce'
+import FaceUpload from '@/components/Upload/faceupload'
+import MDinput from '@/components/MDinput'
+import Sticky from '@/components/Sticky' // 粘性header组件
+import waves from '@/directive/waves'
+import Pagination from '@/components/Pagination'
+import { validateURL } from '@/utils/validate'
+import { faceStarCreate, facestarDetail } from '@/api/face_image_upload'
 
- const SexOptions = [
-        {'key': 1, 'display_name': '男'},
-        {'key': 2, 'display_name': '女'},
-      ]
+const SexOptions = [
+  { 'key': 1, 'display_name': '男' },
+  { 'key': 2, 'display_name': '女' }
+]
 
-  const sexTypeKeyValue = SexOptions.reduce((acc, cur) => {
-        acc[cur.key] = cur.display_name
-        return acc
-  }, {})
+const sexTypeKeyValue = SexOptions.reduce((acc, cur) => {
+  acc[cur.key] = cur.display_name
+  return acc
+}, {})
 
-  const ValueToSexTypeKeyValue = SexOptions.reduce((acc, cur) => {
-        acc[cur.key] = cur.display_name
-        return acc
-  }, {})
+const ValueToSexTypeKeyValue = SexOptions.reduce((acc, cur) => {
+  acc[cur.key] = cur.display_name
+  return acc
+}, {})
 
-  const defaultForm = {
-    status: 'draft',
-    uploadType: '',
+const defaultForm = {
+  status: 'draft',
+  uploadType: '',
 
-    name: '',
-    sex: '',
-    ordinary_image_url: '',
-    modeling_obj_url: '',
-  }
-
-  export default {
-    name: 'FaceStarDetail',
-    components: {Tinymce, MDinput, FaceUpload, Sticky, Pagination},
-    directives: {waves},
-    props: {
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      const validateRequire = (rule, value, callback) => {
-        if (value === '') {
-          this.$message({
-            message: rule.field + '为必传项',
-            type: 'error'
-          })
-          callback(new Error(rule.field + '为必传项'))
-        } else {
-          callback()
-        }
-      }
-      return {
-        postForm: Object.assign({}, defaultForm),
-        loading: false,
+  name: '',
+  sex: '',
+  ordinary_image_url: '',
+  modeling_obj_url: ''
+}
 
-        city: '',
-        tags: [],
-
-        rules: {
-          name: [{validator: validateRequire, trigger: 'blur'}],
-          sex: [{validator: validateRequire, trigger: 'blur'}],
-        },
-        tempRoute: {},
-        GenderTypeOptions: [
-          {'key': 1, 'display_name': '男'},
-          {'key': 2, 'display_name': '女'},
-        ],
-        uploadType: -99,
-        isdisabledFn: false
-      }
-    },
-    computed: {
-      lang() {
-        return this.$store.getters.language
-      }
-    },
-    created() {
-      if (this.isEdit) {
-        const id = this.$route.params && this.$route.params.id
-        this.fetchData(id)
+export default {
+  name: 'FaceStarDetail',
+  components: { Tinymce, MDinput, FaceUpload, Sticky, Pagination },
+  directives: { waves },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + '为必传项',
+          type: 'error'
+        })
+        callback(new Error(rule.field + '为必传项'))
       } else {
-        this.postForm = Object.assign({}, defaultForm)
+        callback()
       }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
 
-      this.tempRoute = Object.assign({}, this.$route)
-    },
-    methods: {
-      fetchData(id) {
-        facestarDetail(id).then(response => {
-            this.postForm = response.data.data.data
-            this.postForm.sex = sexTypeKeyValue[response.data.data.data.sex]
-        }).catch(err => {
-          console.log(err)
-        })
-      },
-      submitForm() {
-
-        this.$refs.postForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            if (this.postForm.ordinary_image_url === ''){
-              this.$message.error('头像一不能为空~')
-              this.loading = false
-              return false
-            }
-            if (this.postForm.modeling_obj_url === ''){
-              this.$message.error('头像二不能为空~')
-              this.loading = false
-              return false
-            }
-            const gender = {
-              '男': 1,
-              '女': 2
-            }
-            this.isdisabledFn = true
-            if (gender.hasOwnProperty(this.postForm.sex)){
-              this.postForm.sex = gender[this.postForm.sex]
-            }
-            this.isdisabledFn = true
-            faceStarCreate(this.postForm).then(response => {
-              this.$notify({
-                title: '成功',
-                message: response.data.data.message,
-                type: 'success',
-                duration: 2000
-              })
-              this.$router.go(0)
-            }).catch(err => {
-              this.$notify({
-                title: '失败',
-                message: '操作失败',
-                type: 'danger',
-                duration: 2000
-              })
-            });
+      city: '',
+      tags: [],
 
+      rules: {
+        name: [{ validator: validateRequire, trigger: 'blur' }],
+        sex: [{ validator: validateRequire, trigger: 'blur' }]
+      },
+      tempRoute: {},
+      GenderTypeOptions: [
+        { 'key': 1, 'display_name': '男' },
+        { 'key': 2, 'display_name': '女' }
+      ],
+      uploadType: -99,
+      isdisabledFn: false
+    }
+  },
+  computed: {
+    lang() {
+      return this.$store.getters.language
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
+    }
 
-            this.postForm.status = 'published'
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      facestarDetail(id).then(response => {
+        this.postForm = response.data.data.data
+        this.postForm.sex = sexTypeKeyValue[response.data.data.data.sex]
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          if (this.postForm.ordinary_image_url === '') {
+            this.$message.error('头像一不能为空~')
             this.loading = false
-          } else {
-            console.log('error submit!!')
             return false
           }
-        })
-      },
-      getRemoteCityList(query) {
-        citySearch(query).then(response => {
-          if (!response.data.data.data) return
-          this.regionListOptions = response.data.data.data
-        })
-      },
-      getRemoteTagList(query) {
-        tagSearch(query).then(response => {
-          if (!response.data.data.data) return
-          this.tagListOptions = response.data.data.data
-        })
-      },
+          const gender = {
+            '男': 1,
+            '女': 2
+          }
+          this.isdisabledFn = true
+          if (gender.hasOwnProperty(this.postForm.sex)) {
+            this.postForm.sex = gender[this.postForm.sex]
+          }
+          this.isdisabledFn = true
+          faceStarCreate(this.postForm).then(response => {
+            this.$notify({
+              title: '成功',
+              message: response.data.data.message,
+              type: 'success',
+              duration: 2000
+            })
+            this.$router.go(0)
+          }).catch(err => {
+            this.$notify({
+              title: '失败',
+              message: '操作失败',
+              type: 'danger',
+              duration: 2000
+            })
+          })
+
+          this.postForm.status = 'published'
+          this.loading = false
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    getRemoteCityList(query) {
+      citySearch(query).then(response => {
+        if (!response.data.data.data) return
+        this.regionListOptions = response.data.data.data
+      })
+    },
+    getRemoteTagList(query) {
+      tagSearch(query).then(response => {
+        if (!response.data.data.data) return
+        this.tagListOptions = response.data.data.data
+      })
     }
   }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>