xcx

src/pages/system/caseManager/caseInfo/addCase/index.vue

@@ -3,12 +3,12 @@
     <form class="mainForm">
       <ul>
         <li class="flex-h">
-          <span>案场名称：</span>
+          <span>案场名称：<em>*</em></span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
-                placeholder="请输入内容"
-                v-model="postData.name"
+                placeholder="请输入名称"
+                v-model="postData.CaseName"
                 clearable>
               </el-input>
             </div>
@@ -22,54 +22,62 @@
                 type="textarea"
                 :autosize="{ minRows: 3, maxRows: 5}"
                 placeholder="请填写详细地址"
-                v-model="postData.address">
+                v-model="postData.CaseAddress">
               </el-input>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>案场头像：</span>
+          <span>案场描述：</span>
           <div class="flex-item">
             <div>
-              <a class="formImg">
-                <img src="" class="centerLabel contain" alt="">
-                <i class="iconfont icon-quxiao"></i>
-              </a>
-              <el-button type="success" size="mini">上传图片</el-button>
+              <el-input
+                type="textarea"
+                :autosize="{ minRows: 3, maxRows: 5}"
+                placeholder="请填写详细描述"
+                v-model="postData.CaseDesc">
+              </el-input>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>案场负责人：</span>
+          <span>案场电话：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
-                placeholder="真实姓名，可包含汉字、英文"
-                v-model="postData.leaderName"
+                placeholder="限中国地区有效号码"
+                v-model="postData.CaseTel"
                 clearable>
               </el-input>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>负责人手机号：</span>
+          <span>案场头像：</span>
           <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="限中国地区有效手机号"
-                v-model="postData.leaderPhone"
-                clearable>
-              </el-input>
+            <div>
+              <!-- <a class="formImg">
+                <img :src="postData.CaseIcon" class="centerLabel contain" alt="">
+                <i class="iconfont icon-quxiao"></i>
+              </a> -->
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="postData.CaseIcon" :src="postData.CaseIcon" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>左击地图获取经纬度：</span>
-          <div class="flex-item">
+          <span>左击地图获取经纬度：<em>*</em></span>
+          <div class="flex-item" style="margin-left: 10px;">
             <div style="width:50%">
               <el-input
                 placeholder=""
-                v-model="postData.atitudeAndLongitude"
+                v-model="postData.Coordinate"
                 clearable>
               </el-input>
             </div>
@@ -97,6 +105,7 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: '',
@@ -104,11 +113,17 @@ export default {
     var _self = this
     return {
       postData: {
-        name: '', // 案场名称
-        address: '', // 案场地址
-        leaderName: '', // 负责人
-        leaderPhone: '', // 负责人手机号
-        atitudeAndLongitude: '',
+        OrgId: '', // 机构id
+        CaseId: '', // 案场id
+        CaseName: '', // 案场名称
+        CaseDesc: '', // 案场描述
+        CaseIcon: '', // 案场图标
+        CaseAddress: '', // 案场地址
+        CaseTel: '', // 案场电话
+        Coordinate: '', // 经纬度
+        Status: '', // 状态
+        CreatDate: '', // 创建日期
+        CreatUser: '', // 创建人
       },
       markers: [],
       searchOption: {
@@ -118,14 +133,25 @@ export default {
       mapCenter: [118.789509, 32.019989],
       events: {
         click: (e) => {
-          _self.postData.atitudeAndLongitude = e.lnglat.lat + ',' + e.lnglat.lng
+          _self.postData.Coordinate = e.lnglat.lat + ',' + e.lnglat.lng
         }
       },
     }
   },
+  computed: {
+    ...mapState({
+      OrgId: x => x.app.user.OrgId,
+    }),
+  },
   components: {},
   methods: {
-    onSearchResult (pois) {
+    ...mapActions([
+      'updateSystemInfo'
+    ]),
+    handleAvatarSuccess (res, file) {
+      this.postData.CaseIcon = res.result.url
+    },
+    onSearchResult (pois) { // 搜索地图
       let latSum = 0
       let lngSum = 0
       if (pois.length > 0) {
@@ -142,11 +168,37 @@ export default {
         this.mapCenter = [center.lng, center.lat]
       }
     },
-    submit () {
-      console.log(this.postData)
+    submit () { // 提交数据
+      if (this.postData.CaseName === '') {
+        this.$message({
+          type: 'error',
+          message: '案场名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.Coordinate === '') {
+        this.$message({
+          type: 'error',
+          message: '案场经纬度不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCase.url, {
+        method: this.$api.caseManager.addCase.method,
+        data: this.postData
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.updateSystemInfo().then(() => {
+          this.$router.push({ name: 'caseInfo' })
+        })
+      })
     },
-    cancel () {
-      this.$router.go(-1)
+    cancel () { // 取消
+      this.$router.push({ name: 'caseInfo' })
     }
   }
 }

src/pages/system/caseManager/caseInfo/addCase/page.scss

@@ -1,4 +1,8 @@
-
+span{
+  em{
+    color: red;
+  }
+}
 .map{
   height: 500px;
   background: #eee;

src/pages/system/caseManager/caseInfo/editCase/index.vue

@@ -3,12 +3,12 @@
     <form class="mainForm">
       <ul>
         <li class="flex-h">
-          <span>案场名称：</span>
+          <span>案场名称：<em>*</em></span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
-                placeholder="请输入内容"
-                v-model="postData.name"
+                placeholder="请输入名称"
+                v-model="postData.CaseName"
                 clearable>
               </el-input>
             </div>
@@ -22,54 +22,62 @@
                 type="textarea"
                 :autosize="{ minRows: 3, maxRows: 5}"
                 placeholder="请填写详细地址"
-                v-model="postData.address">
+                v-model="postData.CaseAddress">
               </el-input>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>案场头像：</span>
+          <span>案场描述：</span>
           <div class="flex-item">
             <div>
-              <a class="formImg">
-                <img src="" class="centerLabel contain" alt="">
-                <i class="iconfont icon-quxiao"></i>
-              </a>
-              <el-button type="success" size="mini">上传图片</el-button>
+              <el-input
+                type="textarea"
+                :autosize="{ minRows: 3, maxRows: 5}"
+                placeholder="请填写详细描述"
+                v-model="postData.CaseDesc">
+              </el-input>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>案场负责人：</span>
+          <span>案场电话：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
-                placeholder="真实姓名，可包含汉字、英文"
-                v-model="postData.leaderName"
+                placeholder="限中国地区有效号码"
+                v-model="postData.CaseTel"
                 clearable>
               </el-input>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>负责人手机号：</span>
+          <span>案场头像：</span>
           <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="限中国地区有效手机号"
-                v-model="postData.leaderPhone"
-                clearable>
-              </el-input>
+            <div>
+              <!-- <a class="formImg">
+                <img :src="postData.CaseIcon" class="centerLabel contain" alt="">
+                <i class="iconfont icon-quxiao"></i>
+              </a> -->
+              <el-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="postData.CaseIcon" :src="postData.CaseIcon" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
             </div>
           </div>
         </li>
         <li class="flex-h">
-          <span>左击地图获取经纬度：</span>
-          <div class="flex-item">
+          <span>左击地图获取经纬度：<em>*</em></span>
+          <div class="flex-item" style="margin-left: 10px;">
             <div style="width:50%">
               <el-input
                 placeholder=""
-                v-model="postData.atitudeAndLongitude"
+                v-model="postData.Coordinate"
                 clearable>
               </el-input>
             </div>
@@ -97,6 +105,7 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: '',
@@ -104,11 +113,17 @@ export default {
     var _self = this
     return {
       postData: {
-        name: '', // 案场名称
-        address: '', // 案场地址
-        leaderName: '', // 负责人
-        leaderPhone: '', // 负责人手机号
-        atitudeAndLongitude: '',
+        OrgId: '', // 机构id
+        CaseId: '', // 案场id
+        CaseName: '', // 案场名称
+        CaseDesc: '', // 案场描述
+        CaseIcon: '', // 案场图标
+        CaseAddress: '', // 案场地址
+        CaseTel: '', // 案场电话
+        Coordinate: '', // 经纬度
+        Status: '', // 状态
+        CreatDate: '', // 创建日期
+        CreatUser: '', // 创建人
       },
       markers: [],
       searchOption: {
@@ -118,14 +133,36 @@ export default {
       mapCenter: [118.789509, 32.019989],
       events: {
         click: (e) => {
-          _self.postData.atitudeAndLongitude = e.lnglat.lat + ',' + e.lnglat.lng
+          _self.postData.Coordinate = e.lnglat.lat + ',' + e.lnglat.lng
         }
       },
     }
   },
+  computed: {
+    ...mapState({
+      OrgId: x => x.app.user.OrgId,
+    }),
+  },
+  created () {
+    this.getCaseInfoById()
+  },
   components: {},
   methods: {
-    onSearchResult (pois) {
+    ...mapActions([
+      'updateSystemInfo'
+    ]),
+    getCaseInfoById () { // 获取案场信息
+      this.$ajax(this.$api.caseManager.getCaseInfo.url, {
+        method: this.$api.caseManager.getCaseInfo.method,
+        urlData: { id: this.$route.query.id }
+      }).then(res => {
+        this.postData = res
+      })
+    },
+    handleAvatarSuccess (res, file) {
+      this.postData.CaseIcon = res.result.url
+    },
+    onSearchResult (pois) { // 搜索地图
       let latSum = 0
       let lngSum = 0
       if (pois.length > 0) {
@@ -142,11 +179,37 @@ export default {
         this.mapCenter = [center.lng, center.lat]
       }
     },
-    submit () {
-      console.log(this.postData)
+    submit () { // 提交数据
+      if (this.postData.CaseName === '') {
+        this.$message({
+          type: 'error',
+          message: '案场名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.Coordinate === '') {
+        this.$message({
+          type: 'error',
+          message: '案场经纬度不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCase.url, {
+        method: this.$api.caseManager.addCase.method,
+        data: this.postData
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.updateSystemInfo().then(() => {
+          this.$router.push({ name: 'caseInfo' })
+        })
+      })
     },
-    cancel () {
-      this.$router.go(-1)
+    cancel () { // 取消
+      this.$router.push({ name: 'caseInfo' })
     }
   }
 }

src/pages/system/caseManager/caseInfo/editCase/page.scss

@@ -1,4 +1,8 @@
-
+span{
+  em{
+    color: red;
+  }
+}
 .map{
   height: 500px;
   background: #eee;

src/pages/system/caseManager/caseInfo/index.vue

@@ -3,7 +3,7 @@
     <div class="system-table-search">
       <div class="flex-h">
         <div class="flex-item flex-h">
-          <el-button size="mini" type="success" @click="redirection('addIndexCase')">新增案场</el-button>
+          <el-button size="mini" type="success" @click="redirection('addCase')">新增案场</el-button>
         </div>
         <tableSearch value="请输入案场名称" @exportSearchKey="searchList"></tableSearch>
       </div>
@@ -94,7 +94,7 @@ export default {
     },
     editItem (index, row) { // 修改
       // console.log(index, row)
-      this.$router.push({ name: 'editIndexCase', query: { id: row.id } })
+      this.$router.push({ name: 'editCase', query: { id: row.CaseId } })
     },
     keyManager (index, row) { // 钥匙管理
       console.log(index, row)

src/store/app.js

@@ -87,10 +87,13 @@ export default {
   },
   actions: {
     updateSystemInfo (context) { // 这里的context和我们使用的$store拥有相同的对象和方法
-      this.$ajax(this.$api.system.init.url, {
-        method: this.$api.system.init.method
-      }).then(res => {
-        context.commit('init', res)
+      return new Promise((resolve) => {
+        this.$ajax(this.$api.system.init.url, {
+          method: this.$api.system.init.method
+        }).then(res => {
+          context.commit('init', res)
+          resolve()
+        })
       })
     }
   }

src/util/api.js

@@ -23,6 +23,18 @@ const $api = {
       method: 'get',
       url: `${baseUrl}/common/case/info`
     },
+    addCase: { // 新增案场
+      method: 'post',
+      url: `${baseUrl}/common/case/info`
+    },
+    getCaseInfo: { // 查询案场
+      method: 'get',
+      url: `${baseUrl}/common/case/info/:id`
+    },
+    editCase: { // 编辑案场
+      method: 'put',
+      url: `${baseUrl}/common/case/info/:id`
+    },
   },
   goodsManager: {
     getGoodsSpecList: { // 商品规格列表