|
|
@@ -32,23 +32,77 @@
|
|
|
ref="queryRef"
|
|
|
v-model="state.formQuery"
|
|
|
:columns="state.columns"
|
|
|
- :import-config="state.importConfig"
|
|
|
- :export-config="state.exportConfig"
|
|
|
- @on-change="loadData(true)"
|
|
|
- @imported="loadData(true)">
|
|
|
+ @on-change="loadData(true)">
|
|
|
<!-- <template #extraQuery></template>
|
|
|
<template #extraLeft></template>
|
|
|
- <template #extraRight></template>-->
|
|
|
+ -->
|
|
|
+ <template #extraRight>
|
|
|
+ <el-button v-auth="'washStation.add'" size="default" plain type="success" class="ml10" @click="handleRowClick('add',null)">
|
|
|
+ <SvgIcon name="ele-FolderAdd"/>
|
|
|
+ 新增
|
|
|
+ </el-button></template>
|
|
|
</ext-query-form>
|
|
|
|
|
|
- <ext-table
|
|
|
- class="page-content"
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ stripe="stripe"
|
|
|
:height="state.tableData.height"
|
|
|
- :data-list="state.tableData.data"
|
|
|
- :columns="state.columns"
|
|
|
- :border="true"
|
|
|
- :loading="state.tableData.loading">
|
|
|
- </ext-table>
|
|
|
+ highlight-current-row
|
|
|
+ current-row-key="id"
|
|
|
+ row-key="id"
|
|
|
+ @on-row-click="handleRowClick('view',$event)"
|
|
|
+ :data="state.tableData.data"
|
|
|
+ v-loading="state.tableData.loading">
|
|
|
+ <template #empty>
|
|
|
+ <el-empty></el-empty>
|
|
|
+ </template>
|
|
|
+ <el-table-column
|
|
|
+ v-for="field in state.columns"
|
|
|
+ :key="field.prop"
|
|
|
+ :type="field.type"
|
|
|
+ :label="field.label"
|
|
|
+ :column-key="field.prop"
|
|
|
+ :width="field.width"
|
|
|
+ :min-width="field.minWidth"
|
|
|
+ :fixed="field.fixed"
|
|
|
+ :sortable="field.sortable"
|
|
|
+ :show-overflow-tooltip="!field.fixed&&field.width>150"
|
|
|
+ >
|
|
|
+ <template #default="{row}">
|
|
|
+ <template v-if="field.prop==='stationStatus'">
|
|
|
+ <ext-d-label type="WashStation.status" :model-value="row[field.prop]"></ext-d-label>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="field.prop==='stationType'">
|
|
|
+ <ext-d-label type="WashStation.type" :model-value="row[field.prop]"></ext-d-label>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="field.prop==='stationName'">
|
|
|
+ <div class="text-align-center">
|
|
|
+ {{ row.stationId }}
|
|
|
+ <hr>
|
|
|
+ {{ row.stationName }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="field.prop==='pictures'">
|
|
|
+ <ext-image :srcList="row[field.prop]"></ext-image>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="field.prop==='createTime'">
|
|
|
+ {{ u.fmt.fmtDateTime(row[field.prop]) }}
|
|
|
+ </template>
|
|
|
+ <template v-else-if="field.prop==='updateTime'">
|
|
|
+ {{ u.fmt.fmtDateTime(row[field.prop]) }}
|
|
|
+ </template>
|
|
|
+ <template v-else-if="field.prop==='action'">
|
|
|
+ <el-button v-auth="'washStation.modify'" size="small" plain type="warning" @click="handleRowClick('edit',row)">编辑</el-button>
|
|
|
+ <el-button v-auth="'washStation.modify'" size="small" plain type="danger" @click="handleRowDelete(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div>{{ row[field.prop] }}</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
|
|
|
<ext-page class="page-pager" v-model:value="state.pageQuery" @change="loadData(false)"/>
|
|
|
</el-card>
|
|
|
@@ -57,8 +111,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="WashStationList">
|
|
|
-import {defineAsyncComponent, reactive, onMounted, onBeforeMount, ref, getCurrentInstance,nextTick,onBeforeUnmount} from 'vue';
|
|
|
-import {$body,$get} from "/@/utils/request";
|
|
|
+import {defineAsyncComponent, reactive, onMounted, onBeforeMount, ref, getCurrentInstance, nextTick, onBeforeUnmount} from 'vue';
|
|
|
+import {$body, $get} from "/@/utils/request";
|
|
|
import u from '/@/utils/u'
|
|
|
import {Msg} from "/@/utils/message";
|
|
|
import {Session} from "/@/utils/storage";
|
|
|
@@ -72,6 +126,8 @@ import ExtTable from "/@/components/form/ExtTable.vue";
|
|
|
import mittBus from '/@/utils/mitt';
|
|
|
|
|
|
import {ElButton} from 'element-plus'
|
|
|
+import ExtDLabel from "/@/components/form/ExtDLabel.vue";
|
|
|
+import ExtImage from "/@/components/form/ExtImage.vue";
|
|
|
|
|
|
|
|
|
const WashStationDialog = defineAsyncComponent(() => import("/@/views/admin/station/list/dialog.vue"));
|
|
|
@@ -81,6 +137,7 @@ const queryRef = ref();
|
|
|
const washStationDialogRef = ref();
|
|
|
|
|
|
//定义变量
|
|
|
+
|
|
|
const state = reactive({
|
|
|
formQuery: {},
|
|
|
pageQuery: {
|
|
|
@@ -89,55 +146,26 @@ const state = reactive({
|
|
|
total: 0
|
|
|
},
|
|
|
tableData: {
|
|
|
- height:500,
|
|
|
- data: [] as Array < any >,
|
|
|
+ height: 500,
|
|
|
+ data: [] as Array<any>,
|
|
|
loading: false
|
|
|
},
|
|
|
importConfig: {},
|
|
|
exportConfig: {},
|
|
|
columns: [
|
|
|
- {type: 'selection', width: 60, align: 'center', fixed: 'left'},
|
|
|
+ // {type: 'selection', width: 60, align: 'center', fixed: 'left'},
|
|
|
+ {label: '站点名称', prop: 'stationName', query: true, type: 'text', resizable: true},
|
|
|
+ {label: '站点照片', prop: 'pictures', query: false, type: 'text', resizable: true},
|
|
|
+ {label: '站点状态', prop: 'stationStatus', query: true, type: 'dict', conf:{dict:'WashStation.status'},resizable: true},
|
|
|
+ {label: '站点类型', prop: 'stationType', query: true, type: 'text', resizable: true},
|
|
|
{label: '地址', prop: 'address', query: true, type: 'text', resizable: true},
|
|
|
- {label: '营业时间描述', prop: 'businessHours', query: true, type: 'text', resizable: true},
|
|
|
- {label: '', prop: 'createTime', query: true, sortable: 'custom', type: 'datetime', resizable: true, conf: {format: (val: any) => u.fmt.fmtDate(val)}},
|
|
|
- {label: '站点坐标', prop: 'location', query: true, type: '', resizable: true},
|
|
|
- {label: '停车费描述:eg:洗车费用满10元减免1小时停车费', prop: 'parkingFee', query: true, type: 'text', resizable: true},
|
|
|
- {label: '工位数量', prop: 'parkingNum', query: true, type: '', resizable: true},
|
|
|
- {label: '站点照片', prop: 'pictures', query: true, type: 'text', resizable: true},
|
|
|
- {label: '备注', prop: 'remark', query: true, type: 'text', resizable: true},
|
|
|
{label: '服务电话', prop: 'serviceTel', query: true, type: 'text', resizable: true},
|
|
|
- {label: '站点引导', prop: 'siteGuide', query: true, type: 'text', resizable: true},
|
|
|
- {label: '站点id', prop: 'stationId', query: true, type: 'text', resizable: true},
|
|
|
- {label: '站点名称', prop: 'stationName', query: true, type: 'text', resizable: true},
|
|
|
- {label: '站点状态:Unknown:未知,Normal:正常运营,Offline:关闭下线,Repair:维护中', prop: 'stationStatus', query: true, type: 'text', resizable: true},
|
|
|
- {label: '站点电话', prop: 'stationTel', query: true, type: 'text', resizable: true},
|
|
|
- {label: '站点类型:Public:公共站 2:Private:内部站(不对外开放)', prop: 'stationType', query: true, type: 'text', resizable: true},
|
|
|
- {label: '', prop: 'updateTime', query: true, sortable: 'custom', type: 'datetime', resizable: true, conf: {format: (val: any) => u.fmt.fmtDate(val)}},
|
|
|
- { label: '操作', prop: 'action', type: 'render', width: 180, align: 'center', fixed: 'right',
|
|
|
- render: (h: any, row: any) => {
|
|
|
- return (
|
|
|
- h('div', null, [
|
|
|
- proxy.$auth('washStation.modify') ?
|
|
|
- h(ElButton, {
|
|
|
- type: 'warning',
|
|
|
- text: true,
|
|
|
- size: 'small',
|
|
|
- onClick: () => {
|
|
|
- handleRowClick('edit', row)
|
|
|
- }
|
|
|
- }, () => '编辑') : '',
|
|
|
- proxy.$auth('washStation.remove') ?
|
|
|
- h(ElButton, {
|
|
|
- type: 'danger',
|
|
|
- text: true,
|
|
|
- size: 'small',
|
|
|
- onClick: () => {
|
|
|
- handleRowDelete(row)
|
|
|
- }
|
|
|
- }, () => '删除') : '',
|
|
|
- ])
|
|
|
- )
|
|
|
- }
|
|
|
+ {label: '营业时间描述', prop: 'businessHours', query: false, type: 'text', resizable: true},
|
|
|
+ {label: '工位数量', prop: 'parkingNum', query: false, type: '', resizable: true},
|
|
|
+ {label: '创建时间 ', prop: 'createTime', query: false, sortable: 'custom', type: 'datetime', resizable: true, conf: {format: (val: any) => u.fmt.fmtDate(val)}},
|
|
|
+ {label: '更新时间', prop: 'updateTime', query: false, sortable: 'custom', type: 'datetime', resizable: true, conf: {format: (val: any) => u.fmt.fmtDate(val)}},
|
|
|
+ {
|
|
|
+ label: '操作', prop: 'action', type: 'render', width: 180, align: 'center', fixed: 'right',
|
|
|
}
|
|
|
],
|
|
|
})
|
|
|
@@ -156,7 +184,7 @@ const state = reactive({
|
|
|
onMounted(() => {
|
|
|
loadData();
|
|
|
|
|
|
- nextTick(()=>{
|
|
|
+ nextTick(() => {
|
|
|
let bodyHeight = document.body.clientHeight;
|
|
|
let queryHeight = queryRef.value.$el.clientHeight;
|
|
|
state.tableData.height = bodyHeight - queryHeight - 220
|