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

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

         AreaIcon: '', // 区域图标
         AreaIconWhite: '', // 区域图标灰白
       },
-      caseList: [{
-        value: '0',
-        label: '案场1'
-      }, {
-        value: '1',
-        label: '案场3'
-      }, {
-        value: '2',
-        label: '案场3'
-      }],
     }
   },
   computed: {

src/pages/system/caseManager/caseAreaManager/edit.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: '', // 区域图标灰白
+      },
+    }
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
       },
-      caseList: [{
-        value: '0',
-        label: '案场1'
-      }, {
-        value: '1',
-        label: '案场3'
-      }, {
-        value: '2',
-        label: '案场3'
-      }],
+      set (val) {
+        this.postData.CaseId = val
+      }
     }
   },
+  created () {
+    this.getCaseAreaInfo()
+  },
   components: {},
   methods: {
-    submit () {
-      console.log(this.postData)
+    getCaseAreaInfo () { // 获取区域信息
+      this.$ajax(this.$api.caseManager.getCaseAreaInfo.url, {
+        method: this.$api.caseManager.getCaseAreaInfo.method,
+        urlData: { id: this.$route.query.id }
+      }).then(res => {
+        this.postData = res
+      })
+    },
+    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.$ajax(this.$api.caseManager.editCaseArea.url, {
+        method: this.$api.caseManager.editCaseArea.method,
+        data: { ...this.postData },
+      }).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

           label="图标">
           <template slot-scope="scope">
             <a class="tableImg">
-              <img :src="scope.row" class="centerLabel contain" alt="">
+              <img :src="scope.row.AreaIcon" class="centerLabel contain" alt="">
+            </a>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="AreaIconWhite"
+          label="灰白图标">
+          <template slot-scope="scope">
+            <a class="tableImg">
+              <img :src="scope.row.AreaIconWhite" class="centerLabel contain" alt="">
             </a>
           </template>
         </el-table-column>
     return {
       total: 0,
       postData: { // 表格搜索条件
-        CaseId: '', // 案场id
+        caseid: '', // 案场id
         page: 1, // 当前页码
         pagesize: 10, // 请求数据量
       },
     }),
     CaseId: {
       get () {
-        return this.postData.CaseId || this.defaultCaseId
+        return this.postData.caseid || this.defaultCaseId
       },
       set (val) {
-        this.postData.CaseId = val
+        this.postData.caseid = val
       }
     }
   },
     getList () { // 获取列表
       this.$ajax(this.$api.caseManager.getCaseAreaList.url, {
         method: this.$api.caseManager.getCaseAreaList.method,
-        queryData: { ...this.postData, CaseId: this.CaseId }
+        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.getList()
     },
     editItem (index, row) { // 编辑
-      console.log(index, row)
-      this.$router.push({ name: 'editCaseArea' })
+      this.$router.push({ name: 'editCaseArea', query: {id: row.AreaId} })
     },
     deleteItem (index, row) { // 删除
-      console.log(index, row)
       this.$confirm('确认删除此数据?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
+        this.$ajax(this.$api.caseManager.deleteCaseArea.url, {
+          method: this.$api.caseManager.deleteCaseArea.method,
+          urlData: { id: row.AreaId }
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.search()
         })
       }).catch(() => {
         this.$message({

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

     <form class="mainForm">
       <ul>
         <li class="flex-h">
-          <span>桌编号：</span>
+          <span>桌位名称：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
-                placeholder="请输入桌编号"
-                v-model="postData.tableId"
+                placeholder="请输入名称"
+                v-model="postData.TableNo"
                 clearable>
               </el-input>
             </div>
           <span>区域：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="postData.caseArea" placeholder="请选择">
+              <el-select v-model="postData.AreaId" placeholder="请选择">
                 <el-option
                   v-for="item in caseAreaList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  :key="item.AreaId"
+                  :label="item.AreaName"
+                  :value="item.AreaId">
                 </el-option>
               </el-select>
             </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: '',
   data () {
     return {
+      caseAreaList: [],
       postData: {
-        tableId: '',
-        caseArea: ''
+        TableId: '', // 桌位id
+        AreaId: '', // 区域id
+        CaseId: '', // 案场id
+        OrgId: '', // 机构id
+        TableNo: '', // 桌位编号
+        Order: '', // 排序
       },
-      caseAreaList: [
-        {
-          value: '0',
-          label: '区域A'
-        }
-      ]
+    }
+  },
+  created () {
+    this.getAreaList()
+  },
+  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)
+    getAreaList () {
+      this.$ajax(this.$api.caseManager.getCaseAreaList.url, {
+        method: this.$api.caseManager.getCaseAreaList.method,
+        queryData: {
+          caseid: this.CaseId, // 案场id
+          page: 1, // 当前页码
+          pagesize: 10000, // 请求数据量
+        }
+      }).then(res => {
+        this.caseAreaList = res.list
+        this.postData.AreaId = res.list[0].AreaId
+      })
+    },
+    submit () { // 提交数据
+      if (this.postData.TableNo === '') {
+        this.$message({
+          type: 'error',
+          message: '桌位名称不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCaseTable.url, {
+        method: this.$api.caseManager.addCaseTable.method,
+        data: { ...this.postData, CaseId: this.CaseId }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({ name: 'caseTableManager' })
+      })
     },
     cancel () {
-      this.$router.go(-1)
+      this.$router.push({ name: 'caseTableManager' })
     }
   },
   mounted () { }

src/pages/system/caseManager/caseTableManager/edit.vue

     <form class="mainForm">
       <ul>
         <li class="flex-h">
-          <span>桌编号：</span>
+          <span>桌位名称：</span>
           <div class="flex-item">
             <div style="width:50%">
               <el-input
-                placeholder="请输入桌编号"
-                v-model="postData.tableId"
+                placeholder="请输入名称"
+                v-model="postData.TableNo"
                 clearable>
               </el-input>
             </div>
           <span>区域：</span>
           <div class="flex-item">
             <div style="width:50%">
-              <el-select v-model="postData.caseArea" placeholder="请选择">
+              <el-select v-model="postData.AreaId" placeholder="请选择">
                 <el-option
                   v-for="item in caseAreaList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  :key="item.AreaId"
+                  :label="item.AreaName"
+                  :value="item.AreaId">
                 </el-option>
               </el-select>
             </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: '',
   data () {
     return {
+      caseAreaList: [],
       postData: {
-        tableId: '',
-        caseArea: ''
+        TableId: '', // 桌位id
+        AreaId: '', // 区域id
+        CaseId: '', // 案场id
+        OrgId: '', // 机构id
+        TableNo: '', // 桌位编号
+        Order: '', // 排序
       },
-      caseAreaList: [
-        {
-          value: '0',
-          label: '区域A'
-        }
-      ]
+    }
+  },
+  created () {
+    this.getAreaList()
+    this.getCaseTableInfo()
+  },
+  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)
+    getCaseTableInfo () {
+      this.$ajax(this.$api.caseManager.getCaseTableInfo.url, {
+        method: this.$api.caseManager.getCaseTableInfo.method,
+        urlData: { id: this.$route.query.id }
+      }).then(res => {
+        this.postData = res
+      })
+    },
+    getAreaList () {
+      this.$ajax(this.$api.caseManager.getCaseAreaList.url, {
+        method: this.$api.caseManager.getCaseAreaList.method,
+        queryData: {
+          caseid: this.CaseId, // 案场id
+          page: 1, // 当前页码
+          pagesize: 10000, // 请求数据量
+        }
+      }).then(res => {
+        this.caseAreaList = res.list
+        this.postData.AreaId = res.list[0].AreaId
+      })
+    },
+    submit () { // 提交数据
+      if (this.postData.TableNo === '') {
+        this.$message({
+          type: 'error',
+          message: '桌位名称不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.editCaseTable.url, {
+        method: this.$api.caseManager.editCaseTable.method,
+        data: { ...this.postData, CaseId: this.CaseId }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({ name: 'caseTableManager' })
+      })
     },
     cancel () {
-      this.$router.go(-1)
+      this.$router.push({ name: 'caseTableManager' })
     }
   },
   mounted () { }

src/pages/system/caseManager/caseTableManager/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="tableId"
-          label="桌编号">
+          prop="TableNo"
+          label="桌位名称">
         </el-table-column>
         <el-table-column
-          prop="area"
+          prop="AreaId"
           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: [{
-        tableId: 'xxx',
-        area: 'xxx'
-      }, {
-        tableId: 'xxx',
-        area: 'xxx'
-      }, {
-        tableId: 'xxx',
-        area: 'xxx'
-      }, {
-        tableId: 'xxx',
-        area: 'xxx'
-      }]
+      currentList: [],
+      caseAreaList: [],
     }
   },
   computed: {
-    ...mapCaseState({
-      caseList: x => x.caseList,
-    })
+    ...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: {
-    tableSearch,
+  created () {
+    this.getAreaList().then(() => {
+      this.getList()
+    })
   },
   methods: {
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
+    getAreaList () {
+      return new Promise((resolve) => {
+        this.$ajax(this.$api.caseManager.getCaseAreaList.url, {
+          method: this.$api.caseManager.getCaseAreaList.method,
+          queryData: {
+            caseid: this.CaseId, // 案场id
+            page: 1, // 当前页码
+            pagesize: 10000, // 请求数据量
+          }
+        }).then(res => {
+          this.caseAreaList = res.list
+          resolve()
+        })
+      })
+    },
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
+    },
+    getList () { // 获取列表
+      this.$ajax(this.$api.caseManager.getCaseTableList.url, {
+        method: this.$api.caseManager.getCaseTableList.method,
+        queryData: { ...this.postData, caseid: this.CaseId }
+      }).then(res => {
+        for (var n = 0; n < res.list.length; n++) {
+          res.list[n].AreaId = this.caseAreaList.filter(x => x.AreaId === res.list[n].AreaId)[0].AreaName
+        }
+        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)
-      this.$router.push({ name: 'editCaseTable' })
+      this.$router.push({ name: 'editCaseTable', query: { id: row.TableId } })
     },
     deleteItem (index, row) { // 删除
-      console.log(index, row)
-      this.$confirm('确认删除此数据?', '提示', {
+      this.$confirm('确认删除此桌位?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
+        this.$ajax(this.$api.caseManager.deleteCaseTable.url, {
+          method: this.$api.caseManager.deleteCaseTable.method,
+          urlData: { id: row.TableId }
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.getList()
         })
       }).catch(() => {
         this.$message({
         })
       })
     },
-    searchList (key) { // 搜索列表
-      console.log(key)
-    },
     addCaseTable () {
       this.$router.push({ name: 'addCaseTable' })
     }

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

+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>案场：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-select v-model="CaseId" placeholder="请选择">
+                <el-option
+                  v-for="item in cases"
+                  :key="item.CaseId"
+                  :label="item.CaseName"
+                  :value="item.CaseId">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>起始柜号：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入数字"
+                v-model="postData.beginnum"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>截止柜号：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入数字"
+                v-model="postData.endnum"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        caseid: '', // 案场id
+        orgid: '', // 机构id
+        beginnum: '', // 起始柜号
+        endnum: '', // 截止柜号
+      },
+      caseList: [{
+        value: '0',
+        label: '案场1'
+      }, {
+        value: '1',
+        label: '案场3'
+      }, {
+        value: '2',
+        label: '案场3'
+      }],
+    }
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  components: {},
+  methods: {
+    handleAvatarSuccesser (res, file) {
+      this.postData.AreaIconWhite = res.result.url
+    },
+    handleAvatarSuccess (res, file) {
+      this.postData.AreaIcon = res.result.url
+    },
+    submit () { // 提交数据
+      if (this.postData.beginnum === '') {
+        this.$message({
+          type: 'error',
+          message: '起始柜号不能为空'
+        })
+        return false
+      }
+      if (this.postData.endnum === '') {
+        this.$message({
+          type: 'error',
+          message: '截止柜号不能为空'
+        })
+        return false
+      }
+      this.postData.orgid = this.OrgId
+      this.$ajax(this.$api.caseManager.addKey.url, {
+        method: this.$api.caseManager.addKey.method,
+        data: { ...this.postData, caseid: this.CaseId }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({name: 'keyManager'})
+      })
+    },
+    cancel () {
+      this.$router.push({name: 'keyManager'})
+    }
+  },
+  mounted () { }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

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

   <div class="subPage">
     <div class="system-table-search">
       <div class="flex-h">
-        <div class="flex-item flex-h"></div>
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click='addKey'>新增钥匙</el-button>
+        </div>
         <ul>
           <li>
             <span>选择案场：</span>
         stripe
         style="width: 100%">
         <el-table-column
-          prop="lockersId"
+          prop="LockNum"
           label="锁柜编号">
         </el-table-column>
         <el-table-column
-          prop="currentUser"
+          prop="CustomerName"
           label="当前用户">
         </el-table-column>
         <el-table-column
-          prop="status"
+          prop="Status"
           label="状态">
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
-            <el-button
+            <el-button v-if="scope.row.Status==='有人'"
               size="mini"
               type="danger"
               @click="unBindItem(scope.$index, scope.row)">解绑</el-button>
-            <el-button
+            <el-button v-if="scope.row.Status==='无人'"
               size="mini"
               type="success"
               @click="bindItem(scope.$index, scope.row)">绑定</el-button>
   name: '',
   data () {
     return {
+      gridData: [],
       showCardList: false, // 显隐卡列表
       bindPhone: '', // 绑定手机号
       cutBindType: 1, // 切换绑定方式
       dialogTableVisible: false,
-      gridData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }],
       total: 0,
       postData: { // 表格搜索条件
-        CaseId: '', // 案场id
+        caseid: '', // 案场id
         page: 1, // 当前页码
         pagesize: 10, // 请求数据量
       },
     }),
     CaseId: {
       get () {
-        return this.postData.CaseId || this.defaultCaseId
+        return this.postData.caseid || this.defaultCaseId
       },
       set (val) {
-        this.postData.CaseId = val
+        this.postData.caseid = val
       }
     }
   },
   methods: {
+    addKey () {
+      this.$router.push({ name: 'addKey' })
+    },
     sureBindPhone () { // 确认绑定手机号
       this.showCardList = true
     },
     getList () { // 获取列表
       this.$ajax(this.$api.caseManager.getKeyList.url, {
         method: this.$api.caseManager.getKeyList.method,
-        queryData: { ...this.postData, CaseId: this.CaseId }
+        queryData: { ...this.postData, caseid: this.CaseId }
       }).then(res => {
+        if (res.list !== null) {
+          for (var n = 0; n < res.list.length; n++) {
+            res.list[n].Status === 0 ? res.list[n].Status = '无人' : res.list[n].Status = '有人'
+          }
+        }
         this.currentList = res.list
         this.postData.page = res.page
         this.total = res.pagenum
       this.getList()
     },
     bindItem (index, row) { // 绑定
-      console.log(index, row)
       this.dialogTableVisible = true
     },
     unBindItem (index, row) { // 解绑
-      console.log(index, row)
       this.$confirm('确认解绑此锁柜?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '解绑成功!'
+        this.$ajax(this.$api.caseManager.cancelKey.url, {
+          method: this.$api.caseManager.cancelKey.method,
+          urlData: { id: row.KeyId }
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '解绑成功!'
+          })
+          this.getList()
         })
       }).catch(() => {
         this.$message({

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

+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>标签名称：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入名称"
+                v-model="postData.TagName"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>选择案场：</span>
+          <div class="flex-item">
+            <div>
+              <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="(item,index) in cases" :label="item.CaseId" :key="index">{{item.CaseName}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        TagId: '', // 桌位id
+        TagName: '', // 区域id
+        caseids: '', // 案场id
+        OrgId: '', // 机构id
+      },
+      checkedList: [],
+    }
+  },
+  created () {},
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
+  },
+  components: {},
+  methods: {
+    handleCheckedCitiesChange (val) {
+      this.postData.caseids = val.join(',')
+    },
+    submit () { // 提交数据
+      if (this.postData.TagName === '') {
+        this.$message({
+          type: 'error',
+          message: '标签名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.caseids === '') {
+        this.$message({
+          type: 'error',
+          message: '案场不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCaseTag.url, {
+        method: this.$api.caseManager.addCaseTag.method,
+        data: { ...this.postData }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({ name: 'tagManager' })
+      })
+    },
+    cancel () {
+      this.$router.push({ name: 'tagManager' })
+    }
+  },
+  mounted () { }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

src/pages/system/caseManager/tagManager/edit.vue

+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>标签名称：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入名称"
+                v-model="postData.TagName"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>选择案场：</span>
+          <div class="flex-item">
+            <div>
+              <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="(item,index) in cases" :label="item.CaseId" :key="index">{{item.CaseName}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        TagId: '', // 桌位id
+        TagName: '', // 区域id
+        caseids: '', // 案场id
+        OrgId: '', // 机构id
+      },
+      checkedList: [],
+    }
+  },
+  created () {
+    this.getTagInfo()
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.CaseId || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.CaseId = val
+      }
+    }
+  },
+  components: {},
+  methods: {
+    getTagInfo () {
+      this.$ajax(this.$api.caseManager.getTagInfo.url, {
+        method: this.$api.caseManager.getTagInfo.method,
+        urlData: { id: this.$route.query.id }
+      }).then(res => {
+        for (var n = 0; n < res.TagCases.length; n++) {
+          this.checkedList.push(res.TagCases[n].CaseId)
+        }
+        this.postData = res
+      })
+    },
+    handleCheckedCitiesChange (val) {
+      this.postData.caseids = val.join(',')
+    },
+    submit () { // 提交数据
+      if (this.postData.TagName === '') {
+        this.$message({
+          type: 'error',
+          message: '标签名称不能为空'
+        })
+        return false
+      }
+      this.postData.caseids = this.checkedList.join(',')
+      if (this.postData.caseids === '') {
+        this.$message({
+          type: 'error',
+          message: '案场不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      this.$ajax(this.$api.caseManager.addCaseTag.url, {
+        method: this.$api.caseManager.addCaseTag.method,
+        data: { ...this.postData }
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        this.$router.push({ name: 'tagManager' })
+      })
+    },
+    cancel () {
+      this.$router.push({ name: 'tagManager' })
+    }
+  },
+  mounted () { }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

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

+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click='addCaseTag'>新增标签</el-button>
+        </div>
+        <ul>
+          <li>
+            <span>选择案场：</span>
+            <el-select v-model="CaseId" placeholder="请选择">
+              <el-option
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
+          </li>
+        </ul>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="currentList"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="TagName"
+          label="标签名称">
+        </el-table-column>
+        <el-table-column
+          prop="CaseNames"
+          label="案场">
+          <template slot-scope="scope">
+            <span v-for="(item,index) in scope.row.CaseNames" :key="index">{{item}}<br></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="warning"
+              @click="editItem(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="deleteItem(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
+      layout="prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      total: 0,
+      postData: { // 表格搜索条件
+        caseid: '', // 案场id
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+      },
+      currentList: [],
+      caseAreaList: [],
+    }
+  },
+  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
+      }
+    }
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    search () { // 搜索
+      this.postData.page = 1
+      this.currentList = []
+      this.getList()
+    },
+    getList () { // 获取列表
+      this.$ajax(this.$api.caseManager.getCaseTagList.url, {
+        method: this.$api.caseManager.getCaseTagList.method,
+        queryData: { ...this.postData, caseid: this.CaseId }
+      }).then(res => {
+        for (var n = 0; n < res.list.length; n++) {
+          res.list[n].CaseNames = res.list[n].CaseNames.split(',')
+        }
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
+    },
+    editItem (index, row) { // 编辑
+      this.$router.push({ name: 'editTag', query: { id: row.TagId } })
+    },
+    deleteItem (index, row) { // 删除
+      this.$confirm('确认删除此标签?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$ajax(this.$api.caseManager.deleteCaseTag.url, {
+          method: this.$api.caseManager.deleteCaseTag.method,
+          urlData: { id: row.TagId }
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.getList()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    addCaseTag () {
+      this.$router.push({ name: 'addTag' })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+</style>

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

     return {
       total: 0,
       postData: { // 表格搜索条件
-        CaseId: '', // 案场id
+        caseid: '', // 案场id
         page: 1, // 当前页码
         pagesize: 10, // 请求数据量
       },
     }),
     CaseId: {
       get () {
-        return this.postData.CaseId || this.defaultCaseId
+        return this.postData.caseid || this.defaultCaseId
       },
       set (val) {
-        this.postData.CaseId = val
+        this.postData.caseid = val
       }
     }
   },
     getList () { // 获取列表
       this.$ajax(this.$api.goodsManager.getGoodsTypeList.url, {
         method: this.$api.goodsManager.getGoodsTypeList.method,
-        queryData: { ...this.postData, CaseId: this.CaseId }
+        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

src/pages/system/page.js

 import addCase from './caseManager/caseInfo/addCase/index' // 新增案场
 import editCase from './caseManager/caseInfo/editCase/index' // 新增案场
 import keyManager from './caseManager/keyManager/index' // 钥匙管理
+import addKey from './caseManager/keyManager/add' // 新增钥匙
 import caseAreaManager from './caseManager/caseAreaManager/index' // 案场区域管理
 import addCaseArea from './caseManager/caseAreaManager/add' // 新增案场区域
 import editCaseArea from './caseManager/caseAreaManager/edit' // 编辑案场区域
 import caseTableManager from './caseManager/caseTableManager/index' // 案场桌位管理
 import addCaseTable from './caseManager/caseTableManager/add' // 新增案场桌位
 import editCaseTable from './caseManager/caseTableManager/edit' // 编辑案场桌位
+import tagManager from './caseManager/tagManager/index' // 标签管理
+import addTag from './caseManager/tagManager/add' // 添加标签
+import editTag from './caseManager/tagManager/edit' // 编辑标签
 
 import goodsManager from './goodsManager/index' // 商品管理
 import goodsTypeManager from './goodsManager/goodsTypeManager/index' // 商品类型管理
           path: 'keyManager',
           name: 'keyManager',
           component: keyManager,
-          children: []
+          children: [{ // 新增钥匙
+            path: 'addKey',
+            name: 'addKey',
+            component: addKey,
+            children: []
+          }]
         }, { // 案场区域管理
           path: 'caseAreaManager',
           name: 'caseAreaManager',
             component: editCaseTable,
             children: []
           }]
+        }, { // 标签管理
+          path: 'tagManager',
+          name: 'tagManager',
+          component: tagManager,
+          children: [{ // 添加标签
+            path: 'addTag',
+            name: 'addTag',
+            component: addTag,
+            children: []
+          }, { // 编辑标签
+            path: 'editTag',
+            name: 'editTag',
+            component: editTag,
+            children: []
+          }]
         }],
       }, { // 商品管理
         path: 'goodsManager',

src/style/main.css

   display: block;
 }
 
+.el-checkbox-group{
+  font-size: 0;
+}
+
+.el-checkbox{
+  display: inline-block;
+}
+
+.el-checkbox>*{
+  line-height: 40px;
+}
 
+.el-checkbox+.el-checkbox{
+  margin: 0;
+  margin-right: 20px;
+}
+
+.el-checkbox{
+  margin-right: 20px;
+}
 
 
 

src/util/api.js

       method: 'get',
       url: `${baseUrl}/common/case/key`
     },
+    addKey: { // 新增钥匙
+      method: 'post',
+      url: `${baseUrl}/common/case/key`
+    },
+    cancelKey: { // 取消钥匙
+      method: 'put',
+      url: `${baseUrl}/common/case/unlock/:id`
+    },
     getCaseAreaList: { // 获取案场区域列表
       method: 'get',
       url: `${baseUrl}/common/case/area`
       method: 'post',
       url: `${baseUrl}/common/case/area`
     },
+    deleteCaseArea: { // 删除案场区域
+      method: 'delete',
+      url: `${baseUrl}/common/case/area/:id`
+    },
+    getCaseAreaInfo: { // 获取案场区域信息
+      method: 'get',
+      url: `${baseUrl}/common/case/area/:id`
+    },
+    editCaseArea: { // 更新案场区域信息
+      method: 'put',
+      url: `${baseUrl}/common/case/area`
+    },
+    getCaseTableList: { // 获取案场桌位列表
+      method: 'get',
+      url: `${baseUrl}/common/case/table`
+    },
+    addCaseTable: { // 新增案场桌位
+      method: 'post',
+      url: `${baseUrl}/common/case/table`
+    },
+    getCaseTableInfo: { // 查询案场桌位信息
+      method: 'get',
+      url: `${baseUrl}/common/case/table/:id`
+    },
+    editCaseTable: { // 更新案场桌位信息
+      method: 'put',
+      url: `${baseUrl}/common/case/table`
+    },
+    deleteCaseTable: { // 删除案场桌位信息
+      method: 'delete',
+      url: `${baseUrl}/common/case/table/:id`
+    },
+    getCaseTagList: { // 获取案场标签列表
+      method: 'get',
+      url: `${baseUrl}/common/case/tag`
+    },
+    addCaseTag: { // 新增案场标签
+      method: 'post',
+      url: `${baseUrl}/common/case/tag`
+    },
+    getTagInfo: { // 获取案场标签信息
+      method: 'get',
+      url: `${baseUrl}/common/case/tag/:id`
+    },
+    deleteCaseTag: { // 删除案场标签
+      method: 'delete',
+      url: `${baseUrl}/common/case/tag/:id`
+    },
   },
   goodsManager: {
     getGoodsSpecList: { // 商品规格列表