CarWashManagement.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. <template>
  2. <a-card class="CarWashManagement" :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="48">
  7. <a-col :span="6">
  8. <a-form-item class="search-item" label="网点名称">
  9. <a-input v-model.trim="queryParam.name" placeholder="请输入网点名称" @pressEnter="$refs.table.refresh(true)" allowClear/>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :span="6">
  13. <a-form-item class="search-item" label="营业状态">
  14. <v-select ref="businessStatus" allowClear placeholder="请选择营业状态" v-model="queryParam.businessStatus" code="STORE_BUSINESS_STATUS"></v-select>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="6">
  18. <a-form-item class="search-item" label="设备状态">
  19. <v-select ref="deviceStatus" allowClear placeholder="请选择设备状态" v-model="queryParam.deviceDTO.deviceStatus" code="DEVICE_STATUS"></v-select>
  20. </a-form-item>
  21. </a-col>
  22. <a-col :span="6">
  23. <a-form-item class="search-item" label="省">
  24. <a-select v-model="queryParam.addrProvince" placeholder="请选择省" @change="getCityList" allowClear>
  25. <a-select-option v-for="item in addrProvinceList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
  26. </a-select>
  27. </a-form-item>
  28. </a-col>
  29. <a-col :span="6">
  30. <a-form-item class="search-item" label="市">
  31. <a-select v-model="queryParam.addrCity" placeholder="请选择市" @change="getAreaList" allowClear>
  32. <a-select-option v-for="item in addrCityList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
  33. </a-select>
  34. </a-form-item>
  35. </a-col>
  36. <a-col :span="6">
  37. <a-button type="primary" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
  38. <a-button type="" @click="reset">重置</a-button>
  39. </a-col>
  40. </a-row>
  41. </a-form>
  42. </div>
  43. <!-- 新建 -->
  44. <div class="table-operator">
  45. <a-button type="primary" icon="plus" @click="modalHandle('add')">新建</a-button>
  46. </div>
  47. <!-- 表格列表 -->
  48. <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" bordered >
  49. <!-- 营业时间 -->
  50. <template slot="businessHours" slot-scope="text, record">{{ record.beginTime.substr(0,5) + '-' + record.endTime.substr(0,5) }}</template>
  51. <!-- 设备状态 -->
  52. <template slot="deviceStatus" slot-scope="text, record">{{ record.deviceStatus ? $refs.deviceStatus.getNameByCode(record.deviceStatus) : '-' }}</template>
  53. <!-- 营业状态 -->
  54. <template slot="businessStatus" slot-scope="text, record">{{ record.businessStatus ? $refs.businessStatus.getNameByCode(record.businessStatus) : '-' }}</template>
  55. <!-- 操作 -->
  56. <template slot="action" slot-scope="text, record">
  57. <a-tooltip placement="left" overlayClassName="btn-cont">
  58. <template slot="title">
  59. <div class="btn-set-cont">
  60. <p class="set-sub-btn normal" @click="setStoreUpdateStatus(record, 'OPEN')" v-if="record.deviceStatus != 'PAUSE' && record.businessStatus != 'OPEN'">
  61. <a-icon type="check-circle" class="icon" />
  62. 正常营业
  63. </p>
  64. <p class="set-sub-btn suspension" @click="setStoreUpdateStatus(record, 'CLOSED')" v-if="record.businessStatus != 'CLOSED'">
  65. <a-icon type="pause-circle" class="icon" />
  66. 暂停营业
  67. </p>
  68. <p class="set-sub-btn soon" @click="setStoreUpdateStatus(record, 'TO_BE_OPENED')" v-if="record.deviceStatus != 'PAUSE' && record.businessStatus != 'TO_BE_OPENED'">
  69. <a-icon type="play-circle" class="icon" />
  70. 即将开业
  71. </p>
  72. </div>
  73. </template>
  74. <a-icon type="setting" title="设置" v-if="record.deviceStatus != 'PAUSE'" :style="{ fontSize: '20px', color: '#19be6b', padding: '0 10px' }" />
  75. </a-tooltip>
  76. <a-icon type="setting" title="设置" v-if="record.deviceStatus == 'PAUSE'" @click="tooltipSet" :style="{ fontSize: '20px', color: '#19be6b', padding: '0 10px' }" />
  77. <a-icon type="edit" title="编辑" @click="modalHandle('edit', record)" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" />
  78. <a-icon type="eye" title="查看详情" @click="modalHandle('details', record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
  79. <a-icon type="delete" title="删除" @click="del(record)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
  80. <a-icon type="qrcode" title="查看小程序码" @click="getQrCode(record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
  81. </template>
  82. </s-table>
  83. <!-- 新增/编辑 洗车机 -->
  84. <add-car-wash-modal
  85. :openModal="openModal"
  86. :pageType="pageType"
  87. :carWashId="carWashId"
  88. @success="carWashSubmit"
  89. @close="closeModal"
  90. />
  91. <!-- 查看详情 洗车机 -->
  92. <details-car-wash-modal
  93. :openModal="openDetailsModal"
  94. :carWashId="carWashId"
  95. @close="closeDetailsModal"
  96. />
  97. <!-- 查看小程序码 -->
  98. <a-modal class="qrCodeModal" title="查看小程序码" :width="500" :footer="null" :destroyOnClose="true" @cancel="isQrCodeModal=false" v-model="isQrCodeModal">
  99. <img :src="qrCode" width="400" height="400" class="qrCode" />
  100. <a-button type="primary" class="downQrCode" @click="downloadCode">下载小程序码</a-button>
  101. </a-modal>
  102. </a-card>
  103. </template>
  104. <script>
  105. import { STable, VSelect } from '@/components'
  106. import AddCarWashModal from './AddCarWashModal.vue'
  107. import DetailsCarWashModal from './DetailsCarWashModal.vue'
  108. import { getProvince, getCityByPro } from '@/api/lookup'
  109. import { storeQuery, storeFind, findItem, storeDel, storeQrCode, storeUpdateStatus } from '@/api/car-wash'
  110. export default{
  111. name: 'CarWashManagement',
  112. components: { STable, VSelect, AddCarWashModal, DetailsCarWashModal },
  113. data(){
  114. return{
  115. queryParam: {
  116. name: '', // 网点名称
  117. businessStatus: '', // 营业状态
  118. deviceDTO: { deviceStatus: '' }, // 设备状态
  119. addrProvince: undefined, // 省
  120. addrCity: undefined // 市
  121. },
  122. columns: [
  123. { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
  124. { title: '设备ID', dataIndex: 'deviceNos', width: '100', align: 'center' },
  125. { title: '网点名称', dataIndex: 'name', width: '100', align: 'center' },
  126. { title: '省', dataIndex: 'addrProvinceName', width: '100', align: 'center' },
  127. { title: '市', dataIndex: 'addrCityName', width: '100', align: 'center' },
  128. { title: '地址', dataIndex: 'addrDetail', width: '100', align: 'center' },
  129. { title: '营业时间', scopedSlots: {customRender: 'businessHours'}, width: '100', align: 'center' },
  130. { title: '设备状态', scopedSlots: {customRender: 'deviceStatus'}, width: '100', align: 'center' },
  131. { title: '营业状态', scopedSlots: {customRender: 'businessStatus'}, width: '100', align: 'center' },
  132. { title: '操作', scopedSlots: {customRender: 'action'}, width: '265', align: 'center' }
  133. ],
  134. // 加载数据方法 必须为 Promise 对象
  135. loadData: parameter => {
  136. return storeQuery(Object.assign(parameter, this.queryParam)).then(res => {
  137. const no = (res.data.pageNo - 1) * res.data.pageSize
  138. for (let i = 0; i < res.data.list.length; i++) {
  139. const _item = res.data.list[i]
  140. _item.no = no + i + 1
  141. }
  142. return res.data
  143. })
  144. },
  145. openModal: false, // 新增/编辑 洗车机 弹框展示状态
  146. pageType: '', // 新增/编辑 洗车机 页面类型
  147. openDetailsModal: false, // 查看详情 洗车机 弹框展示状态
  148. addrProvinceList: [], // 省列表数据
  149. addrCityList: [], // 市列表数据
  150. isQrCodeModal: false, // 查看小程序码 弹框展示状态
  151. qrCode: '', // 小程序码
  152. carWashId: '', // 网点id
  153. }
  154. },
  155. methods: {
  156. // 新建/编辑/查看
  157. modalHandle(type, item){
  158. this.pageType = type
  159. if(type == 'add'){
  160. this.carWashId = ''
  161. this.openModal = true
  162. this.openDetailsModal = false
  163. }else if(type == 'edit'){
  164. this.carWashId = String(item.id)
  165. this.openModal = true
  166. this.openDetailsModal = false
  167. }else if(type == 'details'){
  168. this.carWashId = String(item.id)
  169. this.openDetailsModal = true
  170. this.openModal = false
  171. }
  172. },
  173. // 新增编辑 提交成功
  174. carWashSubmit(){
  175. this.$refs.table.refresh(true)
  176. this.openModal = false
  177. },
  178. // 删除
  179. del(item){
  180. const _this = this
  181. _this.$confirm({
  182. title: '提示',
  183. content: '确定要删除吗?',
  184. onOk () {
  185. storeDel({ id: item.id }).then(res => {
  186. if(res.status == 200){
  187. _this.$message.success(res.message)
  188. _this.$refs.table.refresh()
  189. }else{
  190. _this.$message.error(res.message)
  191. }
  192. })
  193. }
  194. })
  195. },
  196. // 重置
  197. reset(){
  198. this.queryParam = {
  199. name: '', // 网点名称
  200. businessStatus: '', // 营业状态
  201. deviceDTO: { deviceStatus: '' }, // 设备状态
  202. addrProvince: undefined, // 省
  203. addrCity: undefined // 市
  204. }
  205. this.$refs.table.refresh(true)
  206. },
  207. // 查看小程序码
  208. getQrCode(item){
  209. storeQrCode({ id: item.id,deviceNo: item.deviceNos }).then(res => {
  210. if(res.status == 200){
  211. this.qrCode = 'data:image/png;base64,' + res.data
  212. this.isQrCodeModal = true
  213. }else{
  214. this.qrCode = ''
  215. this.$message.error(res.message)
  216. }
  217. })
  218. },
  219. // 下载小程序码
  220. downloadCode (){
  221. let link = document.createElement('a')
  222. link.href = this.qrCode
  223. link.download = 'qrCode.png'
  224. link.click()
  225. },
  226. // 更改网点营业状态
  227. setStoreUpdateStatus(item, businessStatus){
  228. storeUpdateStatus({ id: item.id, businessStatus: businessStatus }).then(res => {
  229. if(res.status == 200){
  230. this.$message.success(res.message)
  231. this.$refs.table.refresh(true)
  232. }else{
  233. this.$message.success(res.message)
  234. }
  235. })
  236. },
  237. // 设置提示
  238. tooltipSet(){
  239. this.$message.warning('洗车机设备离线(或暂停),暂不能设置营业状态!')
  240. },
  241. // 获取省列表
  242. getProvinceList() {
  243. const _this = this
  244. getProvince().then(res => {
  245. if (res.status == 200) {
  246. _this.addrProvinceList = res.data || []
  247. } else {
  248. _this.addrProvinceList = []
  249. }
  250. })
  251. },
  252. // 获取城市列表
  253. getCityList (val) {
  254. this.addrCityList = []
  255. this.queryParam.addrCity = undefined
  256. if (val == null || val == '') {
  257. this.addrProvinceName = ''
  258. } else {
  259. for (let i = 0; i < this.addrProvinceList.length; i++) {
  260. if (this.addrProvinceList[i].id == val) {
  261. this.addrProvinceName = this.addrProvinceList[i].name
  262. break
  263. }
  264. }
  265. this.getCityListRequest(val)
  266. }
  267. },
  268. getCityListRequest (val) {
  269. getCityByPro({id: val}).then(res => {
  270. if (res.status == 200) {
  271. this.addrCityList = res.data || []
  272. } else {
  273. this.addrCityList = []
  274. }
  275. })
  276. },
  277. // 获取区县列表
  278. getAreaList (val) {
  279. if (val == null || val == '') {
  280. this.addrCityName = ''
  281. } else {
  282. for (let i = 0; i < this.addrCityList.length; i++) {
  283. if (this.addrCityList[i].id == val) {
  284. this.addrCityName = this.addrCityList[i].name
  285. break
  286. }
  287. }
  288. }
  289. },
  290. // 新增、编辑 弹框关闭
  291. closeModal(){
  292. this.carWashId = ''
  293. this.openModal = false
  294. },
  295. // 详情 弹框关闭
  296. closeDetailsModal(){
  297. this.carWashId = ''
  298. this.openDetailsModal = false
  299. }
  300. },
  301. mounted(){
  302. // 获取省下拉
  303. this.getProvinceList()
  304. }
  305. }
  306. </script>
  307. <style lang="less">
  308. .CarWashManagement{
  309. .table-page-search-wrapper{
  310. .search-btn{
  311. margin-right: 10px;
  312. }
  313. }
  314. }
  315. // 查看小程序码 弹框
  316. .qrCodeModal{
  317. .qrCode{
  318. display: block;
  319. max-width: 100%;
  320. margin: 0 auto;
  321. }
  322. .downQrCode{
  323. display: block;
  324. margin: 40px auto 30px;
  325. }
  326. }
  327. .btn-cont{
  328. .ant-tooltip-inner{
  329. background-color: #fff;
  330. }
  331. .ant-tooltip-arrow:before{
  332. background-color: #fff;
  333. }
  334. .btn-set-cont{
  335. .set-sub-btn{
  336. padding: 5px 15px 6px;
  337. font-size: 12px;
  338. border: 1px dashed #dcdee2;
  339. border-radius: 4px;
  340. margin: 0;
  341. cursor: pointer;
  342. }
  343. .normal{
  344. color: rgb(0, 204, 0);
  345. border-color: rgb(0, 204, 0);
  346. margin: 7px 0;
  347. .icon{
  348. margin-right: 5px;
  349. }
  350. }
  351. .suspension{
  352. color: rgb(255, 85, 0);
  353. border-color: rgb(255, 85, 0);
  354. margin: 7px 0;
  355. .icon{
  356. margin-right: 5px;
  357. }
  358. }
  359. .soon{
  360. color: #2d8cf0;
  361. border-color: #2d8cf0;
  362. margin: 7px 0;
  363. .icon{
  364. margin-right: 5px;
  365. }
  366. }
  367. }
  368. }
  369. </style>