123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372 |
- <template>
- <a-card class="CarWashManagement" :bordered="false">
- <!-- 搜索条件 -->
- <div class="table-page-search-wrapper">
- <a-form layout="inline">
- <a-row :gutter="48">
- <a-col :span="6">
- <a-form-item class="search-item" label="网点名称">
- <a-input v-model.trim="queryParam.name" placeholder="请输入网点名称" @pressEnter="$refs.table.refresh(true)" allowClear/>
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item class="search-item" label="营业状态">
- <v-select ref="businessStatus" allowClear placeholder="请选择营业状态" v-model="queryParam.businessStatus" code="STORE_BUSINESS_STATUS"></v-select>
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item class="search-item" label="设备状态">
- <v-select ref="deviceStatus" allowClear placeholder="请选择设备状态" v-model="queryParam.deviceDTO.deviceStatus" code="DEVICE_STATUS"></v-select>
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item class="search-item" label="省">
- <a-select v-model="queryParam.addrProvince" placeholder="请选择省" @change="getCityList" allowClear>
- <a-select-option v-for="item in addrProvinceList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item class="search-item" label="市">
- <a-select v-model="queryParam.addrCity" placeholder="请选择市" @change="getAreaList" allowClear>
- <a-select-option v-for="item in addrCityList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-button type="primary" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
- <a-button type="" @click="reset">重置</a-button>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <!-- 新建 -->
- <div class="table-operator">
- <a-button type="primary" icon="plus" @click="modalHandle('add')">新建</a-button>
- </div>
- <!-- 表格列表 -->
- <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" bordered >
- <!-- 营业时间 -->
- <template slot="businessHours" slot-scope="text, record">{{ record.beginTime.substr(0,5) + '-' + record.endTime.substr(0,5) }}</template>
- <!-- 设备状态 -->
- <template slot="deviceStatus" slot-scope="text, record">{{ record.deviceStatus ? $refs.deviceStatus.getNameByCode(record.deviceStatus) : '-' }}</template>
- <!-- 营业状态 -->
- <template slot="businessStatus" slot-scope="text, record">{{ record.businessStatus ? $refs.businessStatus.getNameByCode(record.businessStatus) : '-' }}</template>
- <!-- 操作 -->
- <template slot="action" slot-scope="text, record">
- <a-tooltip placement="left" overlayClassName="btn-cont">
- <template slot="title">
- <div class="btn-set-cont">
- <p class="set-sub-btn normal" @click="setStoreUpdateStatus(record, 'OPEN')" v-if="record.deviceStatus != 'PAUSE' && record.businessStatus != 'OPEN'">
- <a-icon type="check-circle" class="icon" />
- 正常营业
- </p>
- <p class="set-sub-btn suspension" @click="setStoreUpdateStatus(record, 'CLOSED')" v-if="record.businessStatus != 'CLOSED'">
- <a-icon type="pause-circle" class="icon" />
- 暂停营业
- </p>
- <p class="set-sub-btn soon" @click="setStoreUpdateStatus(record, 'TO_BE_OPENED')" v-if="record.deviceStatus != 'PAUSE' && record.businessStatus != 'TO_BE_OPENED'">
- <a-icon type="play-circle" class="icon" />
- 即将开业
- </p>
- </div>
- </template>
- <a-icon type="setting" title="设置" v-if="record.deviceStatus != 'PAUSE'" :style="{ fontSize: '20px', color: '#19be6b', padding: '0 10px' }" />
- </a-tooltip>
- <a-icon type="setting" title="设置" v-if="record.deviceStatus == 'PAUSE'" @click="tooltipSet" :style="{ fontSize: '20px', color: '#19be6b', padding: '0 10px' }" />
- <a-icon type="edit" title="编辑" @click="modalHandle('edit', record)" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" />
- <a-icon type="eye" title="查看详情" @click="modalHandle('details', record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
- <a-icon type="delete" title="删除" @click="del(record)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
- <a-icon type="qrcode" title="查看小程序码" @click="getQrCode(record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
- </template>
- </s-table>
-
- <!-- 新增/编辑 洗车机 -->
- <add-car-wash-modal
- :openModal="openModal"
- :pageType="pageType"
- :carWashId="carWashId"
- @success="carWashSubmit"
- @close="closeModal"
- />
- <!-- 查看详情 洗车机 -->
- <details-car-wash-modal
- :openModal="openDetailsModal"
- :carWashId="carWashId"
- @close="closeDetailsModal"
- />
- <!-- 查看小程序码 -->
- <a-modal class="qrCodeModal" title="查看小程序码" :width="500" :footer="null" :destroyOnClose="true" @cancel="isQrCodeModal=false" v-model="isQrCodeModal">
- <img :src="qrCode" width="400" height="400" class="qrCode" />
- <a-button type="primary" class="downQrCode" @click="downloadCode">下载小程序码</a-button>
- </a-modal>
- </a-card>
- </template>
- <script>
- import { STable, VSelect } from '@/components'
- import AddCarWashModal from './AddCarWashModal.vue'
- import DetailsCarWashModal from './DetailsCarWashModal.vue'
- import { getProvince, getCityByPro } from '@/api/lookup'
- import { storeQuery, storeFind, findItem, storeDel, storeQrCode, storeUpdateStatus } from '@/api/car-wash'
- export default{
- name: 'CarWashManagement',
- components: { STable, VSelect, AddCarWashModal, DetailsCarWashModal },
- data(){
- return{
- queryParam: {
- name: '', // 网点名称
- businessStatus: '', // 营业状态
- deviceDTO: { deviceStatus: '' }, // 设备状态
- addrProvince: undefined, // 省
- addrCity: undefined // 市
- },
- columns: [
- { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
- { title: '设备ID', dataIndex: 'deviceNos', width: '100', align: 'center' },
- { title: '网点名称', dataIndex: 'name', width: '100', align: 'center' },
- { title: '省', dataIndex: 'addrProvinceName', width: '100', align: 'center' },
- { title: '市', dataIndex: 'addrCityName', width: '100', align: 'center' },
- { title: '地址', dataIndex: 'addrDetail', width: '100', align: 'center' },
- { title: '营业时间', scopedSlots: {customRender: 'businessHours'}, width: '100', align: 'center' },
- { title: '设备状态', scopedSlots: {customRender: 'deviceStatus'}, width: '100', align: 'center' },
- { title: '营业状态', scopedSlots: {customRender: 'businessStatus'}, width: '100', align: 'center' },
- { title: '操作', scopedSlots: {customRender: 'action'}, width: '265', align: 'center' }
- ],
- // 加载数据方法 必须为 Promise 对象
- loadData: parameter => {
- return storeQuery(Object.assign(parameter, this.queryParam)).then(res => {
- const no = (res.data.pageNo - 1) * res.data.pageSize
- for (let i = 0; i < res.data.list.length; i++) {
- const _item = res.data.list[i]
- _item.no = no + i + 1
- }
- return res.data
- })
- },
- openModal: false, // 新增/编辑 洗车机 弹框展示状态
- pageType: '', // 新增/编辑 洗车机 页面类型
- openDetailsModal: false, // 查看详情 洗车机 弹框展示状态
- addrProvinceList: [], // 省列表数据
- addrCityList: [], // 市列表数据
- isQrCodeModal: false, // 查看小程序码 弹框展示状态
- qrCode: '', // 小程序码
- carWashId: '', // 网点id
- }
- },
- methods: {
- // 新建/编辑/查看
- modalHandle(type, item){
- this.pageType = type
- if(type == 'add'){
- this.carWashId = ''
- this.openModal = true
- this.openDetailsModal = false
- }else if(type == 'edit'){
- this.carWashId = String(item.id)
- this.openModal = true
- this.openDetailsModal = false
- }else if(type == 'details'){
- this.carWashId = String(item.id)
- this.openDetailsModal = true
- this.openModal = false
- }
- },
- // 新增编辑 提交成功
- carWashSubmit(){
- this.$refs.table.refresh(true)
- this.openModal = false
- },
- // 删除
- del(item){
- const _this = this
- _this.$confirm({
- title: '提示',
- content: '确定要删除吗?',
- onOk () {
- storeDel({ id: item.id }).then(res => {
- if(res.status == 200){
- _this.$message.success(res.message)
- _this.$refs.table.refresh()
- }else{
- _this.$message.error(res.message)
- }
- })
- }
- })
- },
- // 重置
- reset(){
- this.queryParam = {
- name: '', // 网点名称
- businessStatus: '', // 营业状态
- deviceDTO: { deviceStatus: '' }, // 设备状态
- addrProvince: undefined, // 省
- addrCity: undefined // 市
- }
- this.$refs.table.refresh(true)
- },
- // 查看小程序码
- getQrCode(item){
- storeQrCode({ id: item.id,deviceNo: item.deviceNos }).then(res => {
- if(res.status == 200){
- this.qrCode = 'data:image/png;base64,' + res.data
- this.isQrCodeModal = true
- }else{
- this.qrCode = ''
- this.$message.error(res.message)
- }
- })
- },
- // 下载小程序码
- downloadCode (){
- let link = document.createElement('a')
- link.href = this.qrCode
- link.download = 'qrCode.png'
- link.click()
- },
- // 更改网点营业状态
- setStoreUpdateStatus(item, businessStatus){
- storeUpdateStatus({ id: item.id, businessStatus: businessStatus }).then(res => {
- if(res.status == 200){
- this.$message.success(res.message)
- this.$refs.table.refresh(true)
- }else{
- this.$message.success(res.message)
- }
- })
- },
- // 设置提示
- tooltipSet(){
- this.$message.warning('洗车机设备离线(或暂停),暂不能设置营业状态!')
- },
- // 获取省列表
- getProvinceList() {
- const _this = this
- getProvince().then(res => {
- if (res.status == 200) {
- _this.addrProvinceList = res.data || []
- } else {
- _this.addrProvinceList = []
- }
- })
- },
- // 获取城市列表
- getCityList (val) {
- this.addrCityList = []
- this.queryParam.addrCity = undefined
- if (val == null || val == '') {
- this.addrProvinceName = ''
- } else {
- for (let i = 0; i < this.addrProvinceList.length; i++) {
- if (this.addrProvinceList[i].id == val) {
- this.addrProvinceName = this.addrProvinceList[i].name
- break
- }
- }
- this.getCityListRequest(val)
- }
- },
- getCityListRequest (val) {
- getCityByPro({id: val}).then(res => {
- if (res.status == 200) {
- this.addrCityList = res.data || []
- } else {
- this.addrCityList = []
- }
- })
- },
- // 获取区县列表
- getAreaList (val) {
- if (val == null || val == '') {
- this.addrCityName = ''
- } else {
- for (let i = 0; i < this.addrCityList.length; i++) {
- if (this.addrCityList[i].id == val) {
- this.addrCityName = this.addrCityList[i].name
- break
- }
- }
- }
- },
- // 新增、编辑 弹框关闭
- closeModal(){
- this.carWashId = ''
- this.openModal = false
- },
- // 详情 弹框关闭
- closeDetailsModal(){
- this.carWashId = ''
- this.openDetailsModal = false
- }
- },
- mounted(){
- // 获取省下拉
- this.getProvinceList()
- }
- }
- </script>
- <style lang="less">
- .CarWashManagement{
- .table-page-search-wrapper{
- .search-btn{
- margin-right: 10px;
- }
- }
- }
- // 查看小程序码 弹框
- .qrCodeModal{
- .qrCode{
- display: block;
- max-width: 100%;
- margin: 0 auto;
- }
- .downQrCode{
- display: block;
- margin: 40px auto 30px;
- }
- }
- .btn-cont{
- .ant-tooltip-inner{
- background-color: #fff;
- }
- .ant-tooltip-arrow:before{
- background-color: #fff;
- }
- .btn-set-cont{
- .set-sub-btn{
- padding: 5px 15px 6px;
- font-size: 12px;
- border: 1px dashed #dcdee2;
- border-radius: 4px;
- margin: 0;
- cursor: pointer;
- }
- .normal{
- color: rgb(0, 204, 0);
- border-color: rgb(0, 204, 0);
- margin: 7px 0;
- .icon{
- margin-right: 5px;
- }
- }
- .suspension{
- color: rgb(255, 85, 0);
- border-color: rgb(255, 85, 0);
- margin: 7px 0;
- .icon{
- margin-right: 5px;
- }
- }
- .soon{
- color: #2d8cf0;
- border-color: #2d8cf0;
- margin: 7px 0;
- .icon{
- margin-right: 5px;
- }
- }
- }
- }
- </style>
|