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

package-lock.json

@@ -2077,8 +2077,7 @@
     "camelcase": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
-      "dev": true
+      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
     },
     "camelcase-keys": {
       "version": "2.1.0",
@@ -14523,6 +14522,14 @@
       "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
       "dev": true
     },
+    "uppercamelcase": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
+      "integrity": "sha1-Mk2YprOvx+iolT4QZBUJsOTiP5c=",
+      "requires": {
+        "camelcase": "1.2.1"
+      }
+    },
     "uri-js": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
@@ -14688,6 +14695,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
       "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
     },
+    "vue-amap": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/vue-amap/-/vue-amap-0.5.8.tgz",
+      "integrity": "sha512-VWU6M58jAY4K80QGi+2tYWxvAszd/MQiWkBEYdyu2ptBHAgsNfZz2zxR1mWL32V74Q2bFoZz4yfOycMrQywlUA==",
+      "requires": {
+        "uppercamelcase": "1.1.0"
+      }
+    },
     "vue-cookie": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/vue-cookie/-/vue-cookie-1.1.4.tgz",

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.18.0",
     "element-ui": "^2.4.5",
     "vue": "^2.5.2",
+    "vue-amap": "^0.5.8",
     "vue-cookie": "^1.1.4",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/components/siderBar/index.vue

@@ -39,15 +39,15 @@ export default {
   },
   mounted () {
     this.$nextTick(function () {
-      console.log(this.menu)
+      // console.log(this.menu)
     })
   },
   methods: {
     handleOpen (key, keyPath) {
-      console.log(key, keyPath)
+      // console.log(key, keyPath)
     },
     handleClose (key, keyPath) {
-      console.log(key, keyPath)
+      // console.log(key, keyPath)
     }
   }
 }

src/main.js

@@ -4,6 +4,7 @@ import Vue from 'vue'
 import App from './App'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import VueAMap from 'vue-amap'
 import Cookies from 'vue-cookie'
 import './style/main.css'
 import router from './router'
@@ -13,6 +14,14 @@ import store from './store'
 
 Vue.use(ElementUI)
 Vue.use(Cookies)
+Vue.use(VueAMap)
+
+VueAMap.initAMapApiLoader({
+  key: 'f0d1d4f82432504003ebf46e5e36ff03',
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.4'
+})
 
 Vue.config.productionTip = false
 Vue.prototype.$api = api

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

@@ -0,0 +1,152 @@
+<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.name"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>案场地址：</span>
+          <div class="flex-item">
+            <div>
+              <el-input
+                type="textarea"
+                :autosize="{ minRows: 3, maxRows: 5}"
+                placeholder="请填写详细地址"
+                v-model="postData.address">
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <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>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>案场负责人：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="真实姓名，可包含汉字、英文"
+                v-model="postData.leaderName"
+                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.leaderPhone"
+                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.atitudeAndLongitude"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="map flex-v">
+          <div class="search">
+            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
+          </div>
+          <div class="flex-item">
+            <div>
+              <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
+                <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" ></el-amap-marker>
+              </el-amap>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini">保存</el-button>
+          <el-button type="danger" size="mini">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    var _self = this
+    return {
+      postData: {
+        name: '', // 案场名称
+        address: '', // 案场地址
+        leaderName: '', // 负责人
+        leaderPhone: '', // 负责人手机号
+        atitudeAndLongitude: '',
+      },
+      markers: [],
+      searchOption: {
+        city: '南京',
+        citylimit: false
+      },
+      mapCenter: [118.789509, 32.019989],
+      events: {
+        click: (e) => {
+          _self.postData.atitudeAndLongitude = e.lnglat.lat + ',' + e.lnglat.lng
+        }
+      },
+    }
+  },
+  components: {},
+  methods: {
+    onSearchResult (pois) {
+      let latSum = 0
+      let lngSum = 0
+      if (pois.length > 0) {
+        pois.forEach(poi => {
+          let { lng, lat } = poi
+          lngSum += lng
+          latSum += lat
+          this.markers.push([poi.lng, poi.lat])
+        })
+        let center = {
+          lng: lngSum / pois.length,
+          lat: latSum / pois.length
+        }
+        this.mapCenter = [center.lng, center.lat]
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

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

@@ -0,0 +1,52 @@
+
+.map{
+  height: 500px;
+  background: #eee;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid #dcdfe6;
+
+  &>div.search{
+    display: inline-block;
+    position: absolute;
+  }
+
+  &>div.flex-item{
+    width: 100%;
+    &>div{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,152 @@
+<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.name"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>案场地址：</span>
+          <div class="flex-item">
+            <div>
+              <el-input
+                type="textarea"
+                :autosize="{ minRows: 3, maxRows: 5}"
+                placeholder="请填写详细地址"
+                v-model="postData.address">
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <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>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>案场负责人：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="真实姓名，可包含汉字、英文"
+                v-model="postData.leaderName"
+                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.leaderPhone"
+                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.atitudeAndLongitude"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="map flex-v">
+          <div class="search">
+            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
+          </div>
+          <div class="flex-item">
+            <div>
+              <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
+                <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" ></el-amap-marker>
+              </el-amap>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini">保存</el-button>
+          <el-button type="danger" size="mini">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    var _self = this
+    return {
+      postData: {
+        name: '', // 案场名称
+        address: '', // 案场地址
+        leaderName: '', // 负责人
+        leaderPhone: '', // 负责人手机号
+        atitudeAndLongitude: '',
+      },
+      markers: [],
+      searchOption: {
+        city: '南京',
+        citylimit: false
+      },
+      mapCenter: [118.789509, 32.019989],
+      events: {
+        click: (e) => {
+          _self.postData.atitudeAndLongitude = e.lnglat.lat + ',' + e.lnglat.lng
+        }
+      },
+    }
+  },
+  components: {},
+  methods: {
+    onSearchResult (pois) {
+      let latSum = 0
+      let lngSum = 0
+      if (pois.length > 0) {
+        pois.forEach(poi => {
+          let { lng, lat } = poi
+          lngSum += lng
+          latSum += lat
+          this.markers.push([poi.lng, poi.lat])
+        })
+        let center = {
+          lng: lngSum / pois.length,
+          lat: latSum / pois.length
+        }
+        this.mapCenter = [center.lng, center.lat]
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

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

@@ -0,0 +1,52 @@
+
+.map{
+  height: 500px;
+  background: #eee;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid #dcdfe6;
+
+  &>div.search{
+    display: inline-block;
+    position: absolute;
+  }
+
+  &>div.flex-item{
+    width: 100%;
+    &>div{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/caseManger/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">新增案场</el-button>
+          <el-button size="mini" type="success" @click="redirection('addCase')">新增案场</el-button>
         </div>
         <tableSearch value="请输入案场名称" @exportSearchKey="searchList"></tableSearch>
       </div>
@@ -50,12 +50,12 @@
           <template slot-scope="scope">
             <el-button
               size="mini"
-              type="danger"
+              type="warning"
               @click="editItem(scope.$index, scope.row)">修改</el-button>
-            <el-button
+            <!-- <el-button
               size="mini"
               type="success"
-              @click="keyManger(scope.$index, scope.row)">钥匙管理</el-button>
+              @click="keyManger(scope.$index, scope.row)">钥匙管理</el-button> -->
           </template>
         </el-table-column>
       </el-table>
@@ -125,7 +125,13 @@ export default {
   components: {
     tableSearch,
   },
+  mounted () {
+    this.$nextTick(function () {})
+  },
   methods: {
+    redirection (pathName) { // 重定向
+      this.$router.push({ name: pathName })
+    },
     handleSizeChange (val) {
       console.log(`每页 ${val} 条`)
     },
@@ -133,7 +139,8 @@ export default {
       console.log(`当前页: ${val}`)
     },
     editItem (index, row) { // 修改
-      console.log(index, row)
+      // console.log(index, row)
+      this.$router.push({ name: 'editCase', query: { id: row.id } })
     },
     keyManger (index, row) { // 钥匙管理
       console.log(index, row)

src/pages/system/caseManger/keyManger/index.vue

@@ -43,6 +43,10 @@
               size="mini"
               type="danger"
               @click="unBindItem(scope.$index, scope.row)">解绑</el-button>
+            <el-button
+              size="mini"
+              type="success"
+              @click="bindItem(scope.$index, scope.row)">绑定</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -55,6 +59,32 @@
       layout="prev, pager, next, jumper"
       :total="100">
     </el-pagination>
+    <el-dialog title="钥匙绑定" :visible.sync="dialogTableVisible">
+      <ul class="cutBindType">
+        <li :class="{'active':cutBindType==0}" @click="cutBindType=0">扫码绑定</li>
+        <li :class="{'active':cutBindType==1}" @click="cutBindType=1">手机号绑定</li>
+      </ul>
+      <ul class="cutBody">
+        <li :hidden="cutBindType==1"></li>
+        <li :hidden="cutBindType==0">
+          <div class="flex-h" v-if="!showCardList">
+            <div class="flex-item">
+              <el-input
+                placeholder="请输入正确的手机号"
+                v-model="bindPhone"
+                clearable>
+              </el-input>
+            </div>
+            <el-button type="success" size="mini" @click="sureBindPhone">确定</el-button>
+          </div>
+          <el-table :hidden="!showCardList" :data="gridData">
+            <el-table-column property="date" label="日期" width="150"></el-table-column>
+            <el-table-column property="name" label="姓名" width="200"></el-table-column>
+            <el-table-column property="address" label="地址"></el-table-column>
+          </el-table>
+        </li>
+      </ul>
+    </el-dialog>
   </div>
 </template>
 
@@ -68,6 +98,27 @@ export default {
   name: '',
   data () {
     return {
+      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 弄'
+      }],
       currentPage: 0, // 当前页码
       tableSearch: { // 表格搜索条件
         key: '', // 搜索关键字
@@ -101,12 +152,19 @@ export default {
     tableSearch,
   },
   methods: {
+    sureBindPhone () { // 确认绑定手机号
+      this.showCardList = true
+    },
     handleSizeChange (val) {
       console.log(`每页 ${val} 条`)
     },
     handleCurrentChange (val) {
       console.log(`当前页: ${val}`)
     },
+    bindItem (index, row) { // 绑定
+      console.log(index, row)
+      this.dialogTableVisible = true
+    },
     unBindItem (index, row) { // 解绑
       console.log(index, row)
       this.$confirm('确认解绑此锁柜?', '提示', {

src/pages/system/caseManger/keyManger/page.scss

@@ -1,5 +1,35 @@
 
 
+.cutBindType{
+  width: 100%;
+  white-space: nowrap;
+  font-size: 0;
+  border-bottom: 1px solid #eee;
+  li{
+    display: inline-block;
+    line-height: 40px;
+    padding: 0 15px;
+    background: #eee;
+  }
+  li.active{
+    background: #409EFF;
+    color: #fff;
+  }
+  li:hover{
+    cursor: pointer;
+  }
+}
+
+.cutBody{
+  li{
+    &>div{
+      margin: 20px auto 0;
+    }
+  }
+}
+
+
+
 
 
 

src/pages/system/page.js

@@ -7,6 +7,8 @@ import characterManger from './systemSet/characterManger/index' // 角色管理
 
 import caseManger from './caseManger/index' // 案场管理
 import caseInfo from './caseManger/caseInfo/index' // 案场信息
+import addCase from './caseManger/caseInfo/addCase/index' // 新增案场
+import editCase from './caseManger/caseInfo/editCase/index' // 新增案场
 import keyManger from './caseManger/keyManger/index' // 钥匙管理
 import caseAreaManger from './caseManger/caseAreaManger/index' // 案场区域管理
 import caseTableManger from './caseManger/caseTableManger/index' // 案场桌位管理
@@ -61,6 +63,16 @@ export default {
           name: 'caseInfo',
           component: caseInfo,
           children: []
+        }, { // 新增案场
+          path: 'caseInfo/addCase',
+          name: 'addCase',
+          component: addCase,
+          children: []
+        }, { // 修改案场
+          path: 'caseInfo/editCase',
+          name: 'editCase',
+          component: editCase,
+          children: []
         }, { // 钥匙管理
           path: 'keyManger',
           name: 'keyManger',

src/style/main.css

@@ -217,6 +217,75 @@ select:focus {
   background: #eee;
 }
 
+.iframePage{
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+  z-index: 90;
+  display: none;
+  background: #fff;
+}
+
+.iframePage.show{
+  display: block;
+}
+
+.mainForm{
+  width: calc(100% - 40px);
+  position: relative;
+  overflow: hidden;
+  display: block;
+  margin: 20px auto;
+}
+
+.mainForm>ul>li{
+  align-items: flex-start;
+  margin-top: 20px;
+}
+
+.mainForm>ul>li>span{
+  line-height: 40px;
+  min-width: 110px;
+}
+
+.mainForm>ul>li>div>div{
+  min-height: 40px;
+  vertical-align: top;
+}
+
+.mainForm>ul>li>div>div>*{
+  vertical-align: top;
+}
+
+.mainForm>ul>li>div>div>button{
+  margin-top: 5px;
+}
+
+.mainForm .formImg{
+  width: 150px;
+  height: 150px;
+  display: inline-block;
+  background: #eee;
+  position: relative;
+  overflow: hidden;
+}
+
+.mainForm .formImg img{
+  z-index: 1;
+}
+
+.mainForm .formImg i{
+  display: inline-block;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  font-size: 20px;
+  color: red;
+  z-index: 2;
+}