xcx

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

       this.postData.AreaIcon = res.result.url
     },
     submit () { // 提交数据
+      console.log('柜子编号:' + this.postData.beginnum + ' ' + this.postData.endnum)
       if (this.postData.beginnum === '') {
         this.$message({
           type: 'error',
         })
         return false
       }
-      console.log('柜子编号:' + this.postData.beginnum + ' ' + this.postData.endnum)
       this.postData.orgid = this.OrgId
       this.$ajax(this.$api.caseManager.addKey.url, {
         method: this.$api.caseManager.addKey.method,

src/pages/system/verificationManager/phoneVerification/verificationList/index.vue

                 </template>
               </el-table-column>
               <el-table-column
-                label="操作">
+                label="操作"
+                width="200">
                 <template slot-scope="scope">
                   <el-button
                     size="mini"
                     type="success"
                     v-if="scope.row.VerifyStatus!=='used'"
                     @click="check(scope.row)">核销</el-button>
-                  <span v-else>已完成</span>
+                  <el-button
+                    size="mini"
+                    type="info"
+                    v-else>已完成</el-button>
                 </template>
               </el-table-column>
             </el-table>
         <span class="noData" v-else>今日暂无可核销的课程</span>
       </div>
     </div>
+    <el-dialog
+      title="选择绑定钥匙"
+      :visible.sync="centerDialogVisible"
+      width="400"
+      center>
+      <div>
+        <el-table
+          :data="dialogList"
+          stripe
+          style="width: 100%">
+          <el-table-column
+            prop="CustomerName"
+            label="当前用户">
+          </el-table-column>
+          <el-table-column
+            prop="LockNo"
+            label="锁柜号">
+          </el-table-column>
+          <el-table-column
+            prop="Status"
+            label="状态">
+            <template slot-scope="scope">
+              {{scope.row.Status === 1 ? '有人' : '无人'}}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="200">
+            <template slot-scope="scope">
+              <el-button
+                v-if="scope.row.Status === 0"
+                size="mini"
+                type="success"
+                @click="toBindKey(scope.row)">绑定</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          @current-change="handleCurrentChangeDialog"
+          :current-page.sync="postData.page"
+          :page-size="postData.pagesize"
+          layout="prev, pager, next, jumper"
+          :total="dialogTotal">
+        </el-pagination>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="200">
+      <span>确认核销此课程</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="sureVerify">确 定</el-button>
+        <el-button type="primary" @click="sureAndBind">确定并绑定钥匙</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex'
+import { mapState, createNamespacedHelpers } from 'vuex'
 
 const { mapState: mapVerifState, mapActions: mapVerifActions } = createNamespacedHelpers('verification')
+const { mapActions: mapDeviceActions } = createNamespacedHelpers('device')
 
 export default {
   name: '',
   data () {
     return {
+      dialogVisible: false,
+      dialogList: [],
+      centerDialogVisible: false,
+      customerId: '',
       customerName: '',
       phone: this.$route.query.tel,
       code: '',
       tel: '',
       page: 1,
       pagesize: 10,
+      postData: {
+        caseid: '',
+        page: 1,
+        pagesize: 6,
+      },
+      dialogTotal: 0,
     }
   },
   mounted () {
     this.$nextTick(function () {
-      this.getCustomerName({
-        id: this.phone
-      }).then((res) => {
-        console.log(res)
-        const { code, tel } = this.$route.query
-        this.code = code
-        this.tel = tel
-        this.getList()
-      })
+      this.init()
     })
   },
   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
+      }
+    },
     ...mapVerifState({
       courses: x => x.courseVerifs
-    })
+    }),
   },
   methods: {
     ...mapVerifActions([
       'GetCourseVerListByTel',
       'getCustomerName'
     ]),
+    ...mapDeviceActions([
+      'getKeyList',
+      'bindKeyer',
+    ]),
+    init () {
+      this.getCustomerName({
+        id: this.phone
+      }).then((res) => {
+        if (res !== null) {
+          this.customerId = res.CustomerId
+          this.customerName = res.CustomerName
+          const { code, tel } = this.$route.query
+          this.code = code
+          this.tel = tel
+          this.getList()
+        } else {
+          this.$message({
+            type: 'error',
+            message: '未查询到用户信息'
+          })
+        }
+      })
+    },
     check (item) { // 核销
-      this.$confirm('确认核销此课程?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.currentItem = item
+      this.dialogVisible = true
+    },
+    sureVerify () {
+      this.CourseVerifs({ id: this.currentItem.CustomerDetailId, callback: this.afterCheck })
+      this.dialogVisible = false
+    },
+    sureAndBind () {
+      this.dialogVisible = false
+      this.getKeyList({
+        ...this.postData,
+        caseid: this.CaseId,
+      }).then((res) => {
+        // console.log(JSON.stringify(res))
+        this.dialogTotal = res.pagenum
+        this.dialogList = res.list
+        this.centerDialogVisible = true
       })
-        .then(() => {
-          this.CourseVerifs({id: item.CustomerDetailId, callback: this.afterCheck})
-        })
     },
     getList () {
       if (this.code && this.code !== '') {
-        this.GetCourseVerList({id: this.code, page: this.page, pagesize: this.pagesize})
+        this.GetCourseVerList({ id: this.code, page: this.page, pagesize: this.pagesize })
       } else {
         if (this.tel && this.tel !== '') {
-          this.GetCourseVerListByTel({tel: this.tel, page: this.page, pagesize: this.pagesize})
+          this.GetCourseVerListByTel({ tel: this.tel, page: this.page, pagesize: this.pagesize })
         }
       }
     },
       this.getList()
     },
     reback () { // 返回
-      this.$router.push({name: 'phoneVerification'})
+      this.$router.push({ name: 'phoneVerification' })
+    },
+    bindKey (item) { // 绑定钥匙
+    },
+    handleCurrentChangeDialog (val) {
+      this.postData.page = val
+      this.getKeyList({
+        ...this.postData,
+        caseid: this.CaseId,
+      }).then((res) => {
+        // console.log(JSON.stringify(res))
+        this.dialogTotal = res.pagenum
+        this.dialogList = res.list
+        this.centerDialogVisible = true
+      })
+    },
+    toBindKey (item) {
+      this.bindKeyer({
+        keyid: item.KeyId,
+        customerid: this.customerId,
+        customername: this.customerName
+      }).then((res) => {
+        // console.log(JSON.stringify(res))
+        this.CourseVerifs({ id: this.currentItem.CustomerDetailId, callback: this.afterCheck })
+        this.centerDialogVisible = false
+        this.postData.page = 1
+        this.dialogList = []
+        this.init()
+      })
     },
   }
 }
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 .subPage {
-  .userInfo{
+  .userInfo {
     white-space: nowrap;
     font-size: 0;
-    >*{
+    > * {
       display: inline-block;
       margin-right: 10px;
     }
-    >b{
+    > b {
       font-weight: bolder;
       font-size: 15px;
       margin-right: 30px;
       }
     }
   }
-  .noData{
+  .noData {
     width: 100%;
     display: block;
     line-height: 40px;

src/store/case/device.js

     },
   },
   actions: {
+    bindKeyer ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        ajax(api.caseManager.bindKey.url, {
+          method: api.caseManager.bindKey.method,
+          urlData: { ...payload },
+        }).then(res => {
+          resolve(res)
+        }).catch(reject)
+      })
+    },
+    getKeyList ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        ajax(api.caseManager.getKeyListById.url, {
+          method: api.caseManager.getKeyListById.method,
+          queryData: { ...payload },
+        }).then(res => {
+          resolve(res)
+        }).catch(reject)
+      })
+    },
     GetDeviceList ({ commit }, payload) {
       return new Promise((resolve, reject) => {
         ajax(api.device.list.url, {

src/util/api.js

     },
   },
   caseManager: {
+    getKeyListById: {
+      method: 'get',
+      url: `${baseUrl}${common}/case/key`
+    },
+    bindKey: {
+      method: 'post',
+      url: `${baseUrl}${common}/case/key/:keyid/:customerid/:customername`
+    },
     getRolesList: { // 获取角色列表
       method: 'get',
       url: `${baseUrl}${common}/role`