Merge branch 'dev' of http://git.ycjcjy.com/SpaceOfCheng/admin into dev

src/pages/system/caseManager/caseAreaManager/add.vue

             <div style="width:50%">
               <el-input
                 placeholder="请输入区域名"
-                v-model="postData.areaName"
+                v-model="postData.AreaName"
                 clearable>
               </el-input>
             </div>
           <span>案场：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="postData.case" placeholder="请选择">
+              <el-select v-model="CaseId" placeholder="请选择">
                 <el-option
-                  v-for="item in caseList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  v-for="item in cases"
+                  :key="item.CaseId"
+                  :label="item.CaseName"
+                  :value="item.CaseId">
                 </el-option>
               </el-select>
             </div>
           <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-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="postData.AreaIcon" :src="postData.AreaIcon" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
             </div>
           </div>
         </li>
           <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-upload
+                class="avatar-uploader"
+                :action='$api.file.image.url'
+                :show-file-list="false"
+                :on-success="handleAvatarSuccesser">
+                <img v-if="postData.AreaIconWhite" :src="postData.AreaIconWhite" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
             </div>
           </div>
         </li>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: '',
   data () {
     return {
       postData: {
-        areaName: '',
-        case: ''
+        AreaId: '', // 区域id
+        CaseId: '', // 案场id
+        OrgId: '', // 机构id
+        AreaName: '', // 区域名称
+        AreaIcon: '', // 区域图标
+        AreaIconWhite: '', // 区域图标灰白
       },
       caseList: [{
         value: '0',
       }],
     }
   },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
+  },
   components: {},
   methods: {
-    submit () {
-      console.log(this.postData)
+    handleAvatarSuccesser (res, file) {
+      this.postData.AreaIconWhite = res.result.url
+    },
+    handleAvatarSuccess (res, file) {
+      this.postData.AreaIcon = res.result.url
+    },
+    submit () { // 提交数据
+      if (this.postData.AreaName === '') {
+        this.$message({
+          type: 'error',
+          message: '区域名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.AreaIcon === '') {
+        this.$message({
+          type: 'error',
+          message: '区域图标不能为空'
+        })
+        return false
+      }
+      if (this.postData.AreaIconWhite === '') {
+        this.$message({
+          type: 'error',
+          message: '区域图标灰白不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCaseArea.url, {
+        method: this.$api.caseManager.addCaseArea.method,
+        queryData: { ...this.postData, CaseId: this.CaseId }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({name: 'caseAreaManager'})
+      })
     },
     cancel () {
-      this.$router.go(-1)
+      this.$router.push({name: 'caseAreaManager'})
     }
   },
-  mounted () {}
+  mounted () { }
 }
 </script>
 

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

         <ul>
           <li>
             <span>选择案场：</span>
-            <el-select v-model="tableSearch.caseId" placeholder="请选择">
+            <el-select v-model="CaseId" placeholder="请选择">
               <el-option
-                v-for="item in caseList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
               </el-option>
             </el-select>
           </li>
         </ul>
-        <tableSearch value="请输入区域名" @exportSearchKey="searchList"></tableSearch>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
       </div>
       <div class="moreFilter"></div>
     </div>
     <div class="system-table-box">
       <el-table
-        :data="tableData"
+        :data="currentList"
         stripe
         style="width: 100%">
         <el-table-column
-          prop="areaName"
+          prop="AreaName"
           label="区域名">
         </el-table-column>
         <el-table-column
-          prop="icon"
+          prop="AreaIcon"
           label="图标">
           <template slot-scope="scope">
             <a class="tableImg">
-              <img src="" class="centerLabel contain" alt="">
+              <img :src="scope.row" class="centerLabel contain" alt="">
             </a>
           </template>
         </el-table-column>
         <el-table-column
-          prop="case"
+          prop="CaseName"
           label="案场">
         </el-table-column>
         <el-table-column label="操作">
       </el-table>
     </div>
     <el-pagination
-      @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page.sync="currentPage"
-      :page-size="10"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
       layout="prev, pager, next, jumper"
-      :total="100">
+      :total="total">
     </el-pagination>
   </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex'
-import tableSearch from '@/components/tableSearch/index'
-
-const { mapState: mapCaseState } = createNamespacedHelpers('case')
+import { mapState } from 'vuex'
 
 export default {
   name: '',
   data () {
     return {
-      currentPage: 0, // 当前页码
-      tableSearch: { // 表格搜索条件
-        key: '', // 搜索关键字
-        caseId: '', // 案场id
+      total: 0,
+      postData: { // 表格搜索条件
+        CaseId: '', // 案场id
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
       },
-      tableData: [{
-        areaName: 'xxx',
-        icon: 'xxx',
-        case: 'xxx'
-      }, {
-        areaName: 'xxx',
-        icon: 'xxx',
-        case: 'xxx'
-      }, {
-        areaName: 'xxx',
-        icon: 'xxx',
-        case: 'xxx'
-      }, {
-        areaName: 'xxx',
-        icon: 'xxx',
-        case: 'xxx'
-      }]
+      currentList: [],
     }
   },
-  computed: {
-    ...mapCaseState({
-      caseList: x => x.caseList,
-    })
+  created () {
+    this.getList()
   },
-  components: {
-    tableSearch,
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
   },
   methods: {
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
+    },
+    getList () { // 获取列表
+      this.$ajax(this.$api.caseManager.getCaseAreaList.url, {
+        method: this.$api.caseManager.getCaseAreaList.method,
+        queryData: { ...this.postData, CaseId: this.CaseId }
+      }).then(res => {
+        for (var n = 0; n < res.list.length; n++) {
+          res.list[n].CaseName = this.cases.filter(x => x.CaseId === res.list[n].CaseId)[0].CaseName
+        }
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
     },
-    handleCurrentChange (val) {
-      console.log(`当前页: ${val}`)
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
     },
     editItem (index, row) { // 编辑
       console.log(index, row)
         })
       })
     },
-    searchList (key) { // 搜索列表
-      console.log(key)
-    },
     addCaseArea () {
       this.$router.push({ name: 'addCaseArea' })
     }

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

     <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>
                 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>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: '',
     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: {
       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) {
         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

-
+span{
+  em{
+    color: red;
+  }
+}
 .map{
   height: 500px;
   background: #eee;

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

     <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>
                 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>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: '',
     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: {
       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) {
         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

-
+span{
+  em{
+    color: red;
+  }
+}
 .map{
   height: 500px;
   background: #eee;

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

     <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>
       total: 0,
       postData: { // 表格搜索条件
         name: '', // 案场名称
-        page: 0, // 当前页码
+        page: 1, // 当前页码
         pagesize: 10, // 请求数据量
       },
       currentList: []
     },
     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)
     searchList (key) { // 搜索列表
       this.postData.name = key
       this.currentList = []
-      this.postData.page = 0
+      this.postData.page = 1
       this.getList()
     }
   }

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

         <ul>
           <li>
             <span>选择案场：</span>
-            <el-select v-model="tableSearch.caseId" placeholder="请选择">
+            <el-select v-model="CaseId" placeholder="请选择">
               <el-option
-                v-for="item in caseList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
               </el-option>
             </el-select>
           </li>
         </ul>
-        <tableSearch value="请输入锁柜编号" @exportSearchKey="searchList"></tableSearch>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
       </div>
       <div class="moreFilter"></div>
     </div>
     <div class="system-table-box">
       <el-table
-        :data="tableData"
+        :data="currentList"
         stripe
         style="width: 100%">
         <el-table-column
       </el-table>
     </div>
     <el-pagination
-      @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page.sync="currentPage"
-      :page-size="10"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
       layout="prev, pager, next, jumper"
-      :total="100">
+      :total="total">
     </el-pagination>
     <el-dialog title="钥匙绑定" :visible.sync="dialogTableVisible">
       <ul class="cutBindType">
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex'
-import tableSearch from '@/components/tableSearch/index'
-
-const { mapState: mapCaseState } = createNamespacedHelpers('case')
+import { mapState } from 'vuex'
 
 export default {
   name: '',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }],
-      currentPage: 0, // 当前页码
-      tableSearch: { // 表格搜索条件
-        key: '', // 搜索关键字
-        caseId: '', // 案场id
+      total: 0,
+      postData: { // 表格搜索条件
+        CaseId: '', // 案场id
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
       },
-      tableData: [{
-        lockersId: 'xxx',
-        currentUser: 'xxx',
-        status: 'xxx'
-      }, {
-        lockersId: 'xxx',
-        currentUser: 'xxx',
-        status: 'xxx'
-      }, {
-        lockersId: 'xxx',
-        currentUser: 'xxx',
-        status: 'xxx'
-      }, {
-        lockersId: 'xxx',
-        currentUser: 'xxx',
-        status: 'xxx'
-      }]
+      currentList: [],
     }
   },
-  computed: {
-    ...mapCaseState({
-      caseList: x => x.caseList,
-    })
+  created () {
+    this.getList()
   },
-  components: {
-    tableSearch,
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
   },
   methods: {
     sureBindPhone () { // 确认绑定手机号
       this.showCardList = true
     },
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
     },
-    handleCurrentChange (val) {
-      console.log(`当前页: ${val}`)
+    getList () { // 获取列表
+      this.$ajax(this.$api.caseManager.getKeyList.url, {
+        method: this.$api.caseManager.getKeyList.method,
+        queryData: { ...this.postData, CaseId: this.CaseId }
+      }).then(res => {
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
     },
     bindItem (index, row) { // 绑定
       console.log(index, row)
         })
       })
     },
-    searchList (key) { // 搜索列表
-      console.log(key)
-    }
   }
 }
 </script>

src/pages/system/channelManager/channelList/index.vue

       total: 0,
       postData: { // 表格搜索条件
         CaseId: '', // 案场id
-        page: 0, // 当前页码
+        page: 1, // 当前页码
         pagesize: 10, // 请求数据量
       },
       currentList: []
   },
   methods: {
     search () { // 搜索
-      this.postData.page = 0
+      this.postData.page = 1
       this.currentList = []
       this.getList()
     },
       })
     },
     handleCurrentChange (val) { // 跳转到分页
-      this.postData.page = val - 1
       this.getList()
     },
     handleEdit (index, row) { // 编辑

src/pages/system/goodsManager/goodsSpecManager/index.vue

       total: 0,
       postData: { // 表格搜索条件
         CaseId: '', // 案场id
-        page: 0, // 当前页码
-        pagesize: 10, // 请求数据量
+        page: 1, // 当前页码
+        pagesize: 3, // 请求数据量
       },
       currentList: []
     }
   },
   methods: {
     search () { // 搜索
-      this.postData.page = 0
+      this.postData.page = 1
       this.currentList = []
       this.getList()
     },

src/pages/system/goodsManager/goodsTypeManager/index.vue

       total: 0,
       postData: { // 表格搜索条件
         CaseId: '', // 案场id
-        page: 0, // 当前页码
+        page: 1, // 当前页码
         pagesize: 10, // 请求数据量
       },
       currentList: []
   },
   methods: {
     search () { // 搜索
-      this.postData.page = 0
+      this.postData.page = 1
       this.currentList = []
       this.getList()
     },

src/store/app.js

   },
   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

       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`
+    },
+    getKeyList: { // 获取钥匙列表
+      method: 'get',
+      url: `${baseUrl}/common/case/key`
+    },
+    getCaseAreaList: { // 获取案场区域列表
+      method: 'get',
+      url: `${baseUrl}/common/case/area`
+    },
+    addCaseArea: { // 新增案场区域
+      method: 'post',
+      url: `${baseUrl}/common/case/area`
+    },
   },
   goodsManager: {
     getGoodsSpecList: { // 商品规格列表