|
@@ -0,0 +1,277 @@
|
|
|
|
+<template>
|
|
|
|
+ <a-modal
|
|
|
|
+ class="StoreAssociatedEquipmentModal-wrap"
|
|
|
|
+ title="关联摄像设备"
|
|
|
|
+ :width="1000"
|
|
|
|
+ :footer="null"
|
|
|
|
+ :destroyOnClose="true"
|
|
|
|
+ @cancel="isShow = false"
|
|
|
|
+ v-model="isShow">
|
|
|
|
+ <div class="search-con" @blur="isFocus=false">
|
|
|
|
+ <a-input-search
|
|
|
|
+ class="search-s"
|
|
|
|
+ allow-clear
|
|
|
|
+ placeholder="请通过设备ID搜索"
|
|
|
|
+ enter-button="查询"
|
|
|
|
+ size="large"
|
|
|
|
+ @focus="isFocus=true"
|
|
|
|
+ @search="onSearch"
|
|
|
|
+ />
|
|
|
|
+ <a-card class="search-sub" :bordered="false" v-show="resultData.length != 0 && isFocus">
|
|
|
|
+ <div class="search-sub-item" v-for="(item, index) in resultData" :key="index">
|
|
|
|
+ <p>{{ item.des }}-{{ item.isBind ? '已绑定' : '未绑定' }}</p>
|
|
|
|
+ <a-button v-if="!item.isBind" type="primary" ghost size="small" @click="onBundling(item)">立即绑定</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ </a-card>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="eq-tit">已绑设备:</div>
|
|
|
|
+ <a-table
|
|
|
|
+ class="table"
|
|
|
|
+ ref="table"
|
|
|
|
+ bordered
|
|
|
|
+ size="small"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :data-source="equipmentData"
|
|
|
|
+ :pagination="false">
|
|
|
|
+ <div slot="expandedRowRender" slot-scope="record" style="margin: 30px 30px;">
|
|
|
|
+ <a-table
|
|
|
|
+ ref="tables"
|
|
|
|
+ bordered
|
|
|
|
+ size="small"
|
|
|
|
+ :columns="passagewayColumns"
|
|
|
|
+ :data-source="record.passageway"
|
|
|
|
+ :pagination="false">
|
|
|
|
+ <template slot="action" slot-scope="record">
|
|
|
|
+ <a-button type="link" @click="onEdit(record)">编辑</a-button>
|
|
|
|
+ </template>
|
|
|
|
+ </a-table>
|
|
|
|
+ </div>
|
|
|
|
+ <template slot="action" slot-scope="record">
|
|
|
|
+ <a-button type="primary" ghost size="small" @click="onUnbundling(record)">解绑</a-button>
|
|
|
|
+ </template>
|
|
|
|
+ </a-table>
|
|
|
|
+ <!-- 编辑 通道/机位名称 -->
|
|
|
|
+ <a-modal
|
|
|
|
+ class="passagewayModal"
|
|
|
|
+ title="编辑"
|
|
|
|
+ :visible="visible"
|
|
|
|
+ :footer="null"
|
|
|
|
+ :closable="true"
|
|
|
|
+ @cancel="visible=false"
|
|
|
|
+ width="600px">
|
|
|
|
+ <!-- 表单 -->
|
|
|
|
+ <a-form-model ref="ruleForm" :model="form" :rules="rules">
|
|
|
|
+ <a-form-model-item label="名称" prop="name">
|
|
|
|
+ <a-input v-model.trim="form.name" :maxLength="30" placeholder="请输入名称,30个字以内" />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ <a-form-model-item class="btn-cont">
|
|
|
|
+ <a-button type="primary" @click="onSubmit">保存</a-button>
|
|
|
|
+ <a-button class="cancel" @click="visible=false">取消</a-button>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-form-model>
|
|
|
|
+ </a-modal>
|
|
|
|
+ </a-modal>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { findStoreVsDevice, unbindVsDevice, findVsDevice, bindVsDevice } from '@/api/storeVsDevice.js'
|
|
|
|
+export default {
|
|
|
|
+ name: 'StoreAssociatedEquipmentModal',
|
|
|
|
+ props: {
|
|
|
|
+ openModal: {
|
|
|
|
+ // 弹框是否展示
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
|
|
+ storeId: {
|
|
|
|
+ // 门店id
|
|
|
|
+ type: String,
|
|
|
|
+ default: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ isShow: this.openModal, // 弹框是否展示
|
|
|
|
+ columns: [
|
|
|
|
+ { title: '序号', dataIndex: 'no', width: '100', align: 'center' },
|
|
|
|
+ { title: '设备名称', dataIndex: 'name', width: '100', align: 'center' },
|
|
|
|
+ { title: '设备ID', dataIndex: 'id', width: '100', align: 'center' },
|
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, width: '265', align: 'center' }
|
|
|
|
+ ],
|
|
|
|
+ equipmentData: [], // 已绑设备
|
|
|
|
+ passagewayColumns: [
|
|
|
|
+ { title: '序号', dataIndex: 'no', width: '100', align: 'center' },
|
|
|
|
+ { title: '设备名称', dataIndex: 'name', width: '100', align: 'center' },
|
|
|
|
+ { title: '设备ID', dataIndex: 'id', width: '100', align: 'center' },
|
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, width: '265', align: 'center' }
|
|
|
|
+ ],
|
|
|
|
+ visible: false, // 编辑 通道/机位名称
|
|
|
|
+ form: {
|
|
|
|
+ name: '' // 名称
|
|
|
|
+ },
|
|
|
|
+ rules: { // 表单校验规则
|
|
|
|
+ name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
|
|
|
+ },
|
|
|
|
+ resultData: [], // 设备搜索结果
|
|
|
|
+ isFocus: false // 搜索框是否获取焦点
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ onSearch (value) {
|
|
|
|
+ findVsDevice({ id: value }).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ this.resultData = res.data
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error(res.message)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 门店已绑设备
|
|
|
|
+ getStoreEquipment (id) {
|
|
|
|
+ findStoreVsDevice({ id: id }).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ res.data.map((item, ind) => {
|
|
|
|
+ item.no = ind + 1
|
|
|
|
+ })
|
|
|
|
+ this.equipmentData = res.data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 解绑
|
|
|
|
+ onUnbundling (item) {
|
|
|
|
+ const _this = this
|
|
|
|
+ _this.$confirm({
|
|
|
|
+ title: '提示',
|
|
|
|
+ content: '确定解绑该设备吗?',
|
|
|
|
+ onOk () {
|
|
|
|
+ unbindVsDevice({ tenantId: _this.storeId, vsDeviceId: item.id }).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ _this.$message.success(res.message)
|
|
|
|
+ _this.$refs.table.refresh()
|
|
|
|
+ } else {
|
|
|
|
+ _this.$message.error(res.message)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 绑定
|
|
|
|
+ onBundling (item) {
|
|
|
|
+ const _this = this
|
|
|
|
+ _this.$confirm({
|
|
|
|
+ title: '提示',
|
|
|
|
+ content: '确定要绑定该设备吗?',
|
|
|
|
+ onOk () {
|
|
|
|
+ bindVsDevice({ tenantId: _this.storeId, vsDeviceId: item.id }).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ _this.$message.success(res.message)
|
|
|
|
+ _this.$refs.table.refresh()
|
|
|
|
+ } else {
|
|
|
|
+ _this.$message.error(res.message)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 编辑 通道/机位名称
|
|
|
|
+ onEdit (item) {
|
|
|
|
+ this.form.name = item.name
|
|
|
|
+ this.visible = true
|
|
|
|
+ },
|
|
|
|
+ // 提交更改的通道信息
|
|
|
|
+ onSubmit () {
|
|
|
|
+ const _this = this
|
|
|
|
+ _this.$refs.ruleForm.validate(valid => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ const formData = JSON.parse(JSON.stringify(_this.form))
|
|
|
|
+ formData.tenantId = this.storeId
|
|
|
|
+ console.log(formData)
|
|
|
|
+ // saveStoreOrg(formData).then(res => {
|
|
|
|
+ // if (res.status == 200) {
|
|
|
|
+ // _this.$message.success(res.message)
|
|
|
|
+ // _this.$refs.tables.refresh(true)
|
|
|
|
+ // _this.visible = false
|
|
|
|
+ // } else {
|
|
|
|
+ // _this.$message.error(res.message)
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+ } else {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ // 父页面传过来的弹框状态
|
|
|
|
+ openModal (newValue, oldValue) {
|
|
|
|
+ this.isShow = newValue
|
|
|
|
+ },
|
|
|
|
+ // 重定义的弹框状态
|
|
|
|
+ isShow (val) {
|
|
|
|
+ if (!val) {
|
|
|
|
+ this.$emit('close')
|
|
|
|
+ } else {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ storeId (newValue, oldValue) {
|
|
|
|
+ if (newValue && this.isShow) {
|
|
|
|
+ this.getStoreEquipment(newValue)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less">
|
|
|
|
+ .StoreAssociatedEquipmentModal-wrap{
|
|
|
|
+ .search-con{
|
|
|
|
+ position: relative;
|
|
|
|
+ .search-s{
|
|
|
|
+ .ant-input-group-addon{
|
|
|
|
+ padding: 0;
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .search-sub{
|
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 45px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ .ant-card-body{
|
|
|
|
+ padding: 15px 24px;
|
|
|
|
+ }
|
|
|
|
+ .search-sub-item{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 8px 0;
|
|
|
|
+ border-bottom: 1px dashed #f8f8f8;
|
|
|
|
+ p{
|
|
|
|
+ margin: 0;
|
|
|
|
+ }
|
|
|
|
+ &:last-child{
|
|
|
|
+ border-bottom: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .eq-tit{
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ margin: 75px 0 5px;
|
|
|
|
+ }
|
|
|
|
+ .table{
|
|
|
|
+ padding-bottom: 50px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .btn-cont{
|
|
|
|
+ text-align: center;
|
|
|
|
+ .cancel{
|
|
|
|
+ margin-left: 40px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|