equipmentModal.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <a-modal
  3. centered
  4. class="edit-network-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="绑定箱体设备"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="1000">
  11. <!-- 搜索设备 -->
  12. <div class="search-con" @blur="isFocus=false">
  13. <a-input-search
  14. id="equipment-search"
  15. class="search-s"
  16. allow-clear
  17. placeholder="请通过设备编号搜索"
  18. enter-button="查询"
  19. size="large"
  20. @blur="noData=0"
  21. @focus="isFocus=true"
  22. @search="onSearch"
  23. />
  24. <a-card class="search-sub" :bordered="false">
  25. <div class="noData" v-if="noData==1" style="text-align: center;">未查询到结果</div>
  26. <div class="search-sub-item" v-if="resultData && isFocus">
  27. <p>{{ resultData.name }}</p>
  28. <a-button
  29. id="equipment-unbind"
  30. v-if="!resultData.params"
  31. type="primary"
  32. ghost
  33. size="small"
  34. @click="onBundling(resultData)">立即绑定</a-button>
  35. <a-button id="equipment-bind" v-else disabled type="link">已绑定</a-button>
  36. </div>
  37. </a-card>
  38. </div>
  39. <!-- 已绑设备 -->
  40. <div class="eq-tit">已绑设备:</div>
  41. <a-table
  42. class="table"
  43. ref="table"
  44. bordered
  45. size="small"
  46. :rowKey="(record) => record.id"
  47. :columns="columns"
  48. :data-source="equipmentData"
  49. :pagination="false">
  50. <!-- 箱体类型 -->
  51. <template slot="type" slot-scope="record">
  52. <a-select
  53. id="equipment-type"
  54. allowClear
  55. placeholder="请选择箱体类型"
  56. style="width: 100%;"
  57. @change="typeChange">
  58. <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.value">
  59. {{ item.value }}
  60. </a-select-option>
  61. </a-select>
  62. </template>
  63. <!-- 工作状态 -->
  64. <template slot="workStatus" slot-scope="record">
  65. <a-switch
  66. checkedChildren="启用"
  67. unCheckedChildren="禁用"
  68. id="equipment-changeFlagHandle"
  69. v-model="record.workStatus == 1 ? true : false"
  70. @change="changeFlagHandle(record)"
  71. />
  72. </template>
  73. <!-- 操作 -->
  74. <template slot="action" slot-scope="record">
  75. <a-button
  76. type="primary"
  77. ghost
  78. size="small"
  79. id="equipment-unBind"
  80. @click="onUnbundling(record)">解绑</a-button>
  81. </template>
  82. </a-table>
  83. </a-modal>
  84. </template>
  85. <script>
  86. import { deviceEnable } from '@/api/device'
  87. export default {
  88. name: 'EquipmentModal',
  89. props: {
  90. openModal: { // 弹框显示状态
  91. type: Boolean,
  92. default: false
  93. },
  94. networkId: {
  95. type: [Number, String],
  96. default: ''
  97. }
  98. },
  99. data () {
  100. return {
  101. isShow: this.openModal, // 是否打开弹框
  102. resultData: null, // 设备搜索结果
  103. noData: 0,
  104. isFocus: false, // 搜索框是否获取焦点
  105. columns: [
  106. { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  107. { title: '设备编号', dataIndex: 'equipmentNo', width: 100, align: 'center' },
  108. { title: '设备状态', dataIndex: 'equipmentStatus', width: 150, align: 'center' },
  109. { title: '投放情况', dataIndex: 'putIn', width: 150, align: 'center' },
  110. { title: '箱体类型', scopedSlots: { customRender: 'type' }, width: 150, align: 'center' },
  111. { title: '工作状态', scopedSlots: { customRender: 'workStatus' }, width: 150, align: 'center' },
  112. { title: '操作', scopedSlots: { customRender: 'action' }, width: 80, align: 'center' }
  113. ],
  114. equipmentData: [
  115. { id: 1, no: 1, equipmentNo: 'x13132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' },
  116. { id: 2, no: 2, equipmentNo: 'x23132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' },
  117. { id: 3, no: 3, equipmentNo: 'x33132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '2' },
  118. { id: 4, no: 4, equipmentNo: 'x43132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' }
  119. ],
  120. typeList: [] // 箱体类型
  121. }
  122. },
  123. methods: {
  124. // 获取详情
  125. getDetails () {},
  126. // 搜索设备
  127. onSearch (value) {
  128. if (value) {
  129. // findVsDevice({ id: value }).then(res => {
  130. // if (res.status == 200) {
  131. // if (res.data) {
  132. this.noData = 2
  133. // this.resultData = res.data
  134. // } else {
  135. // this.noData = 1
  136. // this.resultData = null
  137. // }
  138. // }
  139. // })
  140. } else {
  141. this.noData = 0
  142. this.resultData = null
  143. this.isFocus = false
  144. }
  145. },
  146. // 门店已绑设备
  147. getStoreEquipment (id) {
  148. // findStoreVsDevice({ code: id }).then(res => {
  149. // if (res.status == 200) {
  150. // res.data.map((item, ind) => {
  151. // item.no = ind + 1
  152. // })
  153. // this.equipmentData = res.data
  154. // }
  155. // })
  156. },
  157. // 解绑
  158. onUnbundling (item) {
  159. const _this = this
  160. _this.$confirm({
  161. title: '提示',
  162. centered: true,
  163. content: '确定解绑该设备吗?',
  164. onOk () {
  165. // unbindVsDevice({ id: item.id }).then(res => {
  166. // if (res.status == 200) {
  167. // _this.$message.success(res.message)
  168. // _this.getStoreEquipment(_this.storeCode)
  169. // }
  170. // })
  171. }
  172. })
  173. },
  174. // 绑定
  175. onBundling (item) {
  176. const _this = this
  177. _this.$confirm({
  178. title: '提示',
  179. centered: true,
  180. content: '确定要绑定该设备吗?',
  181. onOk () {
  182. // bindVsDevice({ storeCode: _this.storeCode, vsDeviceId: item.id }).then(res => {
  183. // if (res.status == 200) {
  184. // _this.$message.success(res.message)
  185. // _this.expandedRowKeys = []
  186. // _this.resultData = null
  187. // _this.isFocus = false
  188. // _this.getStoreEquipment(_this.storeCode)
  189. // }
  190. // })
  191. }
  192. })
  193. },
  194. // 箱体类型 change
  195. typeChange (val) {
  196. console.log(val)
  197. },
  198. // 更改启用禁用状态
  199. changeFlagHandle (record) {
  200. const _data = {
  201. id: record.id,
  202. flag: record.state == 1 ? '0' : '1'
  203. }
  204. deviceEnable(_data).then(res => {
  205. if (res.status == 200) {
  206. this.$message.success(res.message)
  207. this.$refs.table.refresh()
  208. }
  209. })
  210. }
  211. },
  212. watch: {
  213. // 父页面传过来的弹框状态
  214. openModal (newValue, oldValue) {
  215. this.isShow = newValue
  216. },
  217. // 重定义的弹框状态
  218. isShow (newValue, oldValue) {
  219. if (!newValue) {
  220. this.$emit('close')
  221. }
  222. },
  223. networkId (newValue, oldValue) {
  224. if (this.isShow && newValue) {
  225. this.getDetails()
  226. }
  227. }
  228. }
  229. }
  230. </script>
  231. <style lang="less">
  232. .edit-network-modal{
  233. .search-con{
  234. position: relative;
  235. .search-s{
  236. .ant-input-group-addon{
  237. padding: 0;
  238. border: none;
  239. }
  240. }
  241. .search-sub{
  242. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  243. position: absolute;
  244. left: 0;
  245. top: 45px;
  246. width: 100%;
  247. z-index: 1;
  248. border-radius: 6px;
  249. .ant-card-body{
  250. padding: 15px 24px;
  251. }
  252. .search-sub-item{
  253. display: flex;
  254. justify-content: space-between;
  255. align-items: center;
  256. padding: 8px 0;
  257. border-bottom: 1px dashed #f8f8f8;
  258. p{
  259. margin: 0;
  260. }
  261. &:last-child{
  262. border-bottom: none;
  263. }
  264. }
  265. }
  266. }
  267. .eq-tit{
  268. line-height: 40px;
  269. font-size: 16px;
  270. margin: 85px 0 5px;
  271. }
  272. .eq-subTit{
  273. margin: 0 0 10px;
  274. }
  275. .table{
  276. padding-bottom: 50px;
  277. }
  278. }
  279. .btn-cont{
  280. text-align: center;
  281. .cancel{
  282. margin-left: 40px;
  283. }
  284. }
  285. </style>