feat: 档案表单

project/fengdu/AppOutSource/AppArchives/components/Add.vue

@@ -31,17 +31,19 @@
                 </ai-select>
               </el-form-item>
               <el-form-item label="联系电话：" v-model="form.phone" style="width: 100%;" prop="phone">
-                <el-input v-model="form.name" placeholder="请输入联系电话" autocomplete="off"
+                <el-input v-model="form.phone" placeholder="请输入联系电话" autocomplete="off"
                           size="small" maxlength="18"
                           show-word-limit></el-input>
               </el-form-item>
             </el-row>
             <el-row type="flex">
               <el-form-item label="出生日期：" style="width: 100%;" prop="birthday">
-                <el-date-picker value-format="yyyy-MM-dd" size="small"  v-model="form.birthday" placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker>
+                <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="form.birthday"
+                                placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker>
               </el-form-item>
               <el-form-item label="年龄：" style="width: 100%;" prop="age">
-                <el-input v-model="form.age" placeholder="请输入年龄" disabled autocomplete="off" size="small"></el-input>
+                <el-input v-model="form.age" placeholder="请输入年龄" disabled autocomplete="off"
+                          size="small"></el-input>
               </el-form-item>
             </el-row>
           </template>
@@ -56,14 +58,19 @@
                             show-word-limit></el-input>
                 </el-form-item>
                 <el-form-item label="经营类型：" style="width: 100%;" prop="operatorType">
-                  <el-select placeholder="请选择经营范围" v-model="form.operatorType" size="small"  style="width: 100%;"></el-select>
+                  <ai-select
+                      v-model="form.operatorType"
+                      placeholder="请选择经营范围"
+                      :selectList="$dict.getDict('operatorType')"   style="width: 100%;">
+                  </ai-select>
                 </el-form-item>
-                <el-form-item label="所属片区：" style="width: 100%;" prop="girdName">
+                <el-form-item label="所属片区：" style="width: 100%;" prop="girdCode">
-                  <el-select placeholder="请选择所属片区" size="small" v-model="form.girdCode"  style="width: 100%;"></el-select>
+                  <el-select placeholder="请选择所属片区" size="small" v-model="form.girdCode"
+                             style="width: 100%;"></el-select>
                 </el-form-item>
               </div>
 
-              <el-form-item label="" style="width: 100%;" prop="idcard">
+              <el-form-item label="门店照片" style="width: 100%;" prop="fileUrl">
                 <ai-uploader
                     :instance="instance"
                     isShowTip
@@ -82,7 +89,8 @@
               <el-input v-model="form.creditCode" placeholder="请输入社会统一信用代码" size="small"></el-input>
             </el-form-item>
             <el-form-item label="门店住址：" style="width: 100%;" prop="addressCode">
-              <ai-area-select :instance="instance" clearable v-model="form.addressCode" always-show @name="v=>form.areaName=v"/>
+              <ai-area-select :instance="instance" clearable v-model="form.addressCode" always-show
+                              @name="v=>form.areaName=v"/>
             </el-form-item>
             <el-form-item label="" style="width:100%" prop="address">
               <el-input
@@ -95,7 +103,7 @@
               ></el-input>
             </el-form-item>
             <el-form-item label="门店描述：" style="width: 100%" prop="description">
-              <el-input v-model="form.description" placeholder="请输入门店描述"  type="textarea" :rows="3"></el-input>
+              <el-input v-model="form.description" placeholder="请输入门店描述" type="textarea" :rows="3"></el-input>
             </el-form-item>
           </template>
         </ai-card>
@@ -123,28 +131,35 @@ export default {
   data() {
     return {
       form: {
-        name:'',
+        id:null,
-        idNumber:'',
+        name: '',
-        sex:'',
+        idNumber: '',
-        phone:'',
+        sex: '',
-        birthday:'',
+        phone: '',
-        age:'',
+        birthday: '',
+        age: '',
       },
       rules: {
-        name:[{ required: true, message: '请输入经营者姓名', trigger: 'blur' }],
+        name: [{required: true, message: '请输入经营者姓名', trigger: 'blur'}],
-        idNumber:[{ required: true, message: '请输入身份证号', trigger: 'blur' }],
+        idNumber: [{required: true, message: '请输入身份证号', trigger: 'blur'}],
-
+        sex: [{required: true, message: '请选择性别', trigger: 'change'}],
+        phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
+        shopName: [{required: true, message: '请输入门店名称', trigger: 'blur'}],
+        operatorType: [{required: true, message: '请选择经营者类型', trigger: 'change'}],
+        girdCode: [{required: true, message: '请选择所属片区', trigger: 'change'}],
+        fileUrl: [{required: true, message: '请选择门店照片', trigger: 'change'}],
+        addressCode: [{required: true, message: '请选择门店住址', trigger: 'change'}],
       }
     }
   },
 
-  created () {
+  created() {
-    this.$dict.load('sex')
+    this.$dict.load('sex','operatorType')
   },
 
 
   methods: {
-    idChange(val){
+    idChange(val) {
       if (val.length == 18) {
         this.IdCard(val);
       }
@@ -158,8 +173,28 @@ export default {
       }
     },
 
-    handleSave(){
+    async addOrUpdate() {
+      try {
+        const {code, data} = await this.instance.post(`/app/appshoparchives/addOrUpdate`, null, {
+          params: {
+            ...this.form
+          }
+        })
+        if(code===0){
+          this.$message.success('保存成功');
+          this.form = {...data}
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    },
 
+    handleSave() {
+      this.$refs['ruleForm'].validate(valid => {
+        if (valid) {
+          this.addOrUpdate()
+        }
+      })
     },
 
     cancel() {
@@ -175,7 +210,7 @@ export default {
 <style scoped lang="scss">
 .add {
 
-  .flex-colum{
+  .flex-colum {
     width: 100%;
     display: flex;
     flex-direction: column;