|
@@ -39,9 +39,26 @@
|
|
<!-- 新建 -->
|
|
<!-- 新建 -->
|
|
<div class="table-operator">
|
|
<div class="table-operator">
|
|
<a-button type="primary" icon="plus" @click="modalHandle('add')">新建</a-button>
|
|
<a-button type="primary" icon="plus" @click="modalHandle('add')">新建</a-button>
|
|
|
|
+ <a-button type="primary" icon="plus">详情</a-button>
|
|
</div>
|
|
</div>
|
|
<!-- 表格列表 -->
|
|
<!-- 表格列表 -->
|
|
<s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" bordered >
|
|
<s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" bordered >
|
|
|
|
+ <!-- 操作 -->
|
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
|
+ <a-tooltip placement="left" trigger="click" overlayClassName="btn-cont">
|
|
|
|
+ <template slot="title">
|
|
|
|
+ <div class="btn-set-cont">
|
|
|
|
+ <p class="set-sub-btn normal"><a-icon type="check-circle" class="icon" />正常营业</p>
|
|
|
|
+ <p class="set-sub-btn suspension"><a-icon type="pause-circle" class="icon" />暂停营业</p>
|
|
|
|
+ <p class="set-sub-btn soon"><a-icon type="play-circle" class="icon" />即将开业</p>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon type="setting" title="设置" :style="{ fontSize: '20px', color: '#19be6b', padding: '0 10px' }" />
|
|
|
|
+ </a-tooltip>
|
|
|
|
+ <a-icon type="edit" title="编辑" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" />
|
|
|
|
+ <a-icon type="eye" title="查看详情" @click="openDetailsModal=true" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
|
|
|
|
+ <a-icon type="delete" title="删除" @click="del(record)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
|
|
|
|
+ </template>
|
|
</s-table>
|
|
</s-table>
|
|
|
|
|
|
<!-- 新增/编辑 洗车机 -->
|
|
<!-- 新增/编辑 洗车机 -->
|
|
@@ -50,15 +67,21 @@
|
|
:mtitle="mtitle"
|
|
:mtitle="mtitle"
|
|
@close="openModal=false"
|
|
@close="openModal=false"
|
|
/>
|
|
/>
|
|
|
|
+ <!-- 查看详情 洗车机 -->
|
|
|
|
+ <details-car-wash-modal
|
|
|
|
+ :openModal="openDetailsModal"
|
|
|
|
+ @close="openDetailsModal=false"
|
|
|
|
+ />
|
|
</a-card>
|
|
</a-card>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { STable, VSelect } from '@/components'
|
|
import { STable, VSelect } from '@/components'
|
|
import AddCarWashModal from './AddCarWashModal.vue'
|
|
import AddCarWashModal from './AddCarWashModal.vue'
|
|
|
|
+ import DetailsCarWashModal from './DetailsCarWashModal.vue'
|
|
export default{
|
|
export default{
|
|
name: 'CarWashManagement',
|
|
name: 'CarWashManagement',
|
|
- components: { STable, VSelect, AddCarWashModal },
|
|
|
|
|
|
+ components: { STable, VSelect, AddCarWashModal, DetailsCarWashModal },
|
|
data(){
|
|
data(){
|
|
return{
|
|
return{
|
|
queryParam: {
|
|
queryParam: {
|
|
@@ -70,6 +93,16 @@
|
|
},
|
|
},
|
|
columns: [
|
|
columns: [
|
|
{ title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
|
|
{ title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
|
|
|
|
+ { title: '设备ID', dataIndex: 'equipment', width: '100', align: 'center' },
|
|
|
|
+ { title: '网点名称', dataIndex: 'name', width: '100', align: 'center' },
|
|
|
|
+ { title: '省', dataIndex: 'addrProvince', width: '100', align: 'center' },
|
|
|
|
+ { title: '市', dataIndex: 'addrCity', width: '100', align: 'center' },
|
|
|
|
+ { title: '地址', dataIndex: 'addrDetail', width: '100', align: 'center' },
|
|
|
|
+ { title: '营业时间', dataIndex: 'businessHours', width: '100', align: 'center' },
|
|
|
|
+ { title: '设备状态', dataIndex: 'equipmentStatus', width: '100', align: 'center' },
|
|
|
|
+ { title: '营业状态', dataIndex: 'businessStatus', width: '100', align: 'center' },
|
|
|
|
+ { title: '小程序码', dataIndex: 'wechatCode', width: '100', align: 'center' },
|
|
|
|
+ { title: '操作', scopedSlots: {customRender: 'action'}, width: '200', align: 'center' }
|
|
],
|
|
],
|
|
// 加载数据方法 必须为 Promise 对象
|
|
// 加载数据方法 必须为 Promise 对象
|
|
loadData: parameter => {
|
|
loadData: parameter => {
|
|
@@ -82,9 +115,19 @@
|
|
// }
|
|
// }
|
|
// return res.data
|
|
// return res.data
|
|
// })
|
|
// })
|
|
|
|
+ let data = [
|
|
|
|
+ { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
|
|
|
|
+ { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
|
|
|
|
+ { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
|
|
|
|
+ ]
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ console.log((resolve, reject))
|
|
|
|
+ resolve(data)
|
|
|
|
+ }).catch(() => console.log('Oops errors!'))
|
|
},
|
|
},
|
|
openModal: false, // 新增/编辑 洗车机 弹框展示状态
|
|
openModal: false, // 新增/编辑 洗车机 弹框展示状态
|
|
mtitle: '', // 新增/编辑 洗车机 弹框标题
|
|
mtitle: '', // 新增/编辑 洗车机 弹框标题
|
|
|
|
+ openDetailsModal: false, // 查看详情 洗车机 弹框展示状态
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -93,6 +136,17 @@
|
|
this.mtitle = type == 'add' ? '新增' : '编辑'
|
|
this.mtitle = type == 'add' ? '新增' : '编辑'
|
|
this.openModal = true
|
|
this.openModal = true
|
|
},
|
|
},
|
|
|
|
+ // 删除
|
|
|
|
+ del(item){
|
|
|
|
+ console.log(item)
|
|
|
|
+ this.$confirm({
|
|
|
|
+ title: '提示',
|
|
|
|
+ content: '确定要删除吗?',
|
|
|
|
+ onOk () {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
// 重置
|
|
// 重置
|
|
reset(){
|
|
reset(){
|
|
this.queryParam = {
|
|
this.queryParam = {
|
|
@@ -111,12 +165,49 @@
|
|
<style lang="less">
|
|
<style lang="less">
|
|
.CarWashManagement{
|
|
.CarWashManagement{
|
|
.table-page-search-wrapper{
|
|
.table-page-search-wrapper{
|
|
- .search-item{
|
|
|
|
- // margin-bottom: 0;
|
|
|
|
- }
|
|
|
|
.search-btn{
|
|
.search-btn{
|
|
margin-right: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .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);
|
|
|
|
+ .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;
|
|
|
|
+ .icon{
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|