|
@@ -8,16 +8,16 @@
|
|
|
<el-form-item prop="name" style="width: 100%">
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="油枪">
|
|
|
- <el-input v-model="Data.Filter.CompanyName" placeholder="请输入油枪"
|
|
|
+ <el-input v-model="Data.Filter.nozzleNum" placeholder="请输入油枪"
|
|
|
clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="油品">
|
|
|
- <el-input v-model="Data.Filter.name" placeholder="请输入油品" clearable></el-input>
|
|
|
+ <el-input v-model="Data.Filter.oilName" placeholder="请输入油品" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="状态">
|
|
|
<el-select v-model="Data.Filter.StationName" placeholder="请选择状态">
|
|
|
<el-option v-for="(value, key) in selectList.Online" :key="key" :label="value"
|
|
@@ -32,7 +32,7 @@
|
|
|
:value="value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- </el-col>
|
|
|
+ </el-col> -->
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="加油时间">
|
|
|
<el-date-picker v-model="Data.time1" type="datetimerange"
|
|
@@ -71,7 +71,7 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
- <el-pagination v-model:currentPage="Data.pageInput.currentPage"
|
|
|
+ <el-pagination v-model:currentPage="Data.pageInput.page"
|
|
|
v-model:page-size="Data.pageInput.pageSize" :total="Data.total"
|
|
|
:page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onSizeChange"
|
|
|
@current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
|
|
@@ -84,8 +84,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="partsManagement/oilGun">
|
|
|
-import { reactive } from "vue";
|
|
|
-
|
|
|
+import { onMounted, reactive, watch } from "vue";
|
|
|
+import { getOrderInfoPage } from "/@/api/api";
|
|
|
+import { OrderInfoFilter } from "/@/api/admin/orderDto/QRBookDto";
|
|
|
|
|
|
/**页面对象 */
|
|
|
const Data = reactive({
|
|
@@ -94,46 +95,35 @@ const Data = reactive({
|
|
|
loading: false,
|
|
|
/**条件查询模块 */
|
|
|
Filter: {
|
|
|
- /**油枪 */
|
|
|
- name: "",
|
|
|
+ /**油枪号 */
|
|
|
+ nozzleNum: null,
|
|
|
/**油品 */
|
|
|
- StationName: "",
|
|
|
- /**支付方式 */
|
|
|
- CompanyName: "",
|
|
|
- /**状态 */
|
|
|
- onlineStatus: "",
|
|
|
+ oilName: null,
|
|
|
+ // /**支付方式 */
|
|
|
+ // CompanyName: "",
|
|
|
+ // /**状态 */
|
|
|
+ // onlineStatus: "",
|
|
|
/**加油开始的时间 */
|
|
|
- OutBeginTime: "",
|
|
|
+ startCheckTime: null,
|
|
|
/**加油结束的时间 */
|
|
|
- OutEndTime: "",
|
|
|
- },
|
|
|
+ endCheckTime: null,
|
|
|
+ } as OrderInfoFilter,
|
|
|
/**表格信息 */
|
|
|
- tableModel: [
|
|
|
- {
|
|
|
- 'name': 1,
|
|
|
- 'companyName': 1,
|
|
|
- 'stationName': 1,
|
|
|
- 'fuelName': 1,
|
|
|
- 'code': 1,
|
|
|
- 'alarming': 1,
|
|
|
- 'fuelId': 1,
|
|
|
- }
|
|
|
- ],
|
|
|
+ tableModel: [],
|
|
|
/**动态表头 */
|
|
|
dynamicColumns: [
|
|
|
- { prop: 'name', label: '流水号' },
|
|
|
- { prop: 'companyName', label: '油机号' },
|
|
|
- { prop: 'stationName', label: '油枪|油品' },
|
|
|
- { prop: 'fuelName', label: '单价|升数' },
|
|
|
- { prop: 'code', label: '金额' },
|
|
|
- { prop: 'alarming', label: '加油时间' },
|
|
|
- { prop: 'fuelId', label: '支付状态' },
|
|
|
+ { prop: 'ttc', label: '流水号' },
|
|
|
+ { prop: 'nozzleAndOil', label: '油枪|油品' },
|
|
|
+ { prop: 'priceAndVolume', label: '单价|升数' },
|
|
|
+ { prop: 'amount', label: '金额' },
|
|
|
+ { prop: 'endTime', label: '挂枪时间' },
|
|
|
+ // { prop: 'fuelId', label: '支付状态' },
|
|
|
],
|
|
|
/**分页总数 */
|
|
|
total: 0,
|
|
|
/**分页标识 */
|
|
|
pageInput: {
|
|
|
- currentPage: 1,
|
|
|
+ page: 1,
|
|
|
pageSize: 10,
|
|
|
},
|
|
|
})
|
|
@@ -149,11 +139,92 @@ const selectList = reactive({
|
|
|
Level: [1, 2, 3, 4, 5]
|
|
|
})
|
|
|
|
|
|
+/** 查询订单 */
|
|
|
+const onQuery = (async () => {
|
|
|
+ Data.loading = true;
|
|
|
+
|
|
|
+ var orders = await getOrderInfoPage({
|
|
|
+ ...Data.pageInput,
|
|
|
+ ...Data.Filter
|
|
|
+ });
|
|
|
+ console.log(orders)
|
|
|
+ Data.total = orders.total;
|
|
|
+ Data.tableModel = orders.list.map(order => {
|
|
|
+ return {
|
|
|
+ 'ttc': order.ttc,
|
|
|
+ 'nozzleAndOil': order.nozzleNum + "|" + order.oilName,
|
|
|
+ 'priceAndVolume': order.price + "|" + order.volume,
|
|
|
+ 'amount': order.amount,
|
|
|
+ 'endTime': order.endTime,
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ Data.loading = false;
|
|
|
+})
|
|
|
+
|
|
|
+/** 重置查询条件 */
|
|
|
+const onReset = () => {
|
|
|
+ Data.Filter = {
|
|
|
+ /**油枪号 */
|
|
|
+ nozzleNum: null,
|
|
|
+ /**油品 */
|
|
|
+ oilName: null,
|
|
|
+ // /**支付方式 */
|
|
|
+ // CompanyName: "",
|
|
|
+ // /**状态 */
|
|
|
+ // onlineStatus: "",
|
|
|
+ /**加油开始的时间 */
|
|
|
+ startCheckTime: null,
|
|
|
+ /**加油结束的时间 */
|
|
|
+ endCheckTime: null,
|
|
|
+ }
|
|
|
+ Data.time1 = ""
|
|
|
+}
|
|
|
+
|
|
|
+/** 页数修改 */
|
|
|
+const onSizeChange = (pageSize) => {
|
|
|
+ Data.pageInput.pageSize = pageSize
|
|
|
+}
|
|
|
+
|
|
|
+/** 页码修改 */
|
|
|
+const onCurrentChange = (page) => {
|
|
|
+ Data.pageInput.page = page
|
|
|
+}
|
|
|
+
|
|
|
/** 操作 */
|
|
|
const toView = ((data: any) => {
|
|
|
console.log('查看')
|
|
|
})
|
|
|
|
|
|
+// 挂载时
|
|
|
+onMounted(async () => {
|
|
|
+ await onQuery()
|
|
|
+})
|
|
|
+
|
|
|
+/** 过滤条件监听——枪号 */
|
|
|
+watch(() => Data.Filter.nozzleNum,(val) => {
|
|
|
+ if(val) {
|
|
|
+ Data.Filter.nozzleNum = val
|
|
|
+ } else {
|
|
|
+ Data.Filter.nozzleNum = null
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+/** 过滤条件监听——油品 */
|
|
|
+watch(() => Data.Filter.oilName,(val) => {
|
|
|
+ if(val) {
|
|
|
+ Data.Filter.oilName = val
|
|
|
+ } else {
|
|
|
+ Data.Filter.oilName = null
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+/** 过滤条件监听——时间 */
|
|
|
+watch(() => Data.time1,(val) => {
|
|
|
+ if(val?.length === 0) return
|
|
|
+ Data.Filter.startCheckTime = new Date(val?.[0].toString());
|
|
|
+ Data.Filter.endCheckTime = new Date(val?.[1].toString());
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|