首页业务处理

This commit is contained in:
13405411873 2024-10-24 22:28:38 +08:00 committed by xvv
parent cb07cd63e4
commit 89ae9c0b56
2 changed files with 303 additions and 285 deletions

View File

@ -1,14 +1,15 @@
<template> <template>
<div class="container_"> <div class="container_">
<el-row> <div class="top-list">
<el-col v-for="item in serviceList" :span="4"> <div class="list-box" v-for="item in serviceList" :span="4">
<div @click="goRoute(item.id)"> <div @click="goRoute(item.id)">
<image-preview :width="300" :height="300" :src="item.coverImg"></image-preview> <img :src=" imgUrl + item.coverImg" style="width: 300px; height: 300px;">
{{ item.name }} <!-- <image-preview :width="300" :height="300" :src="item.coverImg"></image-preview>-->
<div style="font-weight: bold;text-align: center;font-size: 25px">{{ item.name }}</div>
</div> </div>
</el-col> </div>
</el-row> </div>
<div class="container-box"> <div class="container-box">
<div class="flex-box"> <div class="flex-box">
@ -117,6 +118,7 @@ export default {
}, },
data() { data() {
return { return {
imgUrl:'',
lineChartData: lineChartData.newVisitis, lineChartData: lineChartData.newVisitis,
serviceList: [], serviceList: [],
warnList: [], warnList: [],
@ -137,6 +139,8 @@ export default {
this.getServiceList() this.getServiceList()
this.getNotifyMessage() this.getNotifyMessage()
this.getWarnList() this.getWarnList()
this.imgUrl = process.env.VUE_APP_IMAGE_URL
console.log( this.imgUrl + '1111111' )
}, },
methods: { methods: {
handleSetLineChartData(type) { handleSetLineChartData(type) {
@ -179,6 +183,20 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px;
} }
.top-list{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 25px;
}
.list-box{
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 4px;
box-sizing: border-box;
padding: 15px;
border-radius: 8px;
}
.container-box{ .container-box{
width: 100%; width: 100%;
display: flex; display: flex;

View File

@ -1,289 +1,289 @@
<template> <!--<template>-->
<div class="app-container"> <!-- <div class="app-container">-->
<!-- 搜索工作栏 --> <!-- &lt;!&ndash; 搜索工作栏 &ndash;&gt;-->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">-->
<el-form-item label="订单号" prop="orderNo"> <!-- <el-form-item label="订单号" prop="orderNo">-->
<el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/> <!-- <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="服务名称" prop="goodsTitle"> <!-- <el-form-item label="服务名称" prop="goodsTitle">-->
<el-input v-model="queryParams.goodsTitle" placeholder="请输入服务名称" clearable <!-- <el-input v-model="queryParams.goodsTitle" placeholder="请输入服务名称" clearable-->
@keyup.enter.native="handleQuery"/> <!-- @keyup.enter.native="handleQuery"/>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="客户姓名" prop="cusName"> <!-- <el-form-item label="客户姓名" prop="cusName">-->
<el-input v-model="queryParams.cusName" placeholder="请输入服务名称" clearable <!-- <el-input v-model="queryParams.cusName" placeholder="请输入服务名称" clearable-->
@keyup.enter.native="handleQuery"/> <!-- @keyup.enter.native="handleQuery"/>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="支付方式" prop="payType"> <!-- <el-form-item label="支付方式" prop="payType">-->
<el-select v-model="queryParams.payType" placeholder="请选择支付方式"> <!-- <el-select v-model="queryParams.payType" placeholder="请选择支付方式">-->
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.REPAIR_PAY_TYPE)" <!-- <el-option v-for="dict in this.getDictDatas(DICT_TYPE.REPAIR_PAY_TYPE)"-->
:key="dict.value" :label="dict.label" :value="dict.value"/> <!-- :key="dict.value" :label="dict.label" :value="dict.value"/>-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="订单状态" prop="orderStatus"> <!-- <el-form-item label="订单状态" prop="orderStatus">-->
<el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态"> <!-- <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态">-->
<el-option <!-- <el-option-->
v-for="item in options" <!-- v-for="item in options"-->
:key="item.value" <!-- :key="item.value"-->
:label="item.label" <!-- :label="item.label"-->
:value="item.value"> <!-- :value="item.value">-->
</el-option> <!-- </el-option>-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item> <!-- <el-form-item>-->
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> <!-- <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>-->
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> <!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
</el-form-item> <!-- </el-form-item>-->
</el-form> <!-- </el-form>-->
<!-- 操作工具栏 --> <!-- &lt;!&ndash; 操作工具栏 &ndash;&gt;-->
<el-row :gutter="10" class="mb8"> <!-- <el-row :gutter="10" class="mb8">-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/> <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>-->
</el-row> <!-- </el-row>-->
<div class="census"> <!-- <div class="census">-->
<span class="credited">已入账&nbsp;:&nbsp;{{ census?.credited || 0 }}</span> <!-- <span class="credited">已入账&nbsp;:&nbsp;{{ census?.credited || 0 }}</span>-->
<span class="notCredited">待入账&nbsp;:&nbsp;{{ census?.notCredited || 0 }}</span> <!-- <span class="notCredited">待入账&nbsp;:&nbsp;{{ census?.notCredited || 0 }}</span>-->
<span class="onlinePay">线上支付&nbsp;:&nbsp;{{ census?.onlinePay || 0 }}</span> <!-- <span class="onlinePay">线上支付&nbsp;:&nbsp;{{ census?.onlinePay || 0 }}</span>-->
<span class="cashPay">线下支付&nbsp;:&nbsp;{{ census?.cashPay || 0 }}</span> <!-- <span class="cashPay">线下支付&nbsp;:&nbsp;{{ census?.cashPay || 0 }}</span>-->
<span class="signedPay">签单/挂账&nbsp;:&nbsp;{{ census?.signedPay || 0 }}</span> <!-- <span class="signedPay">签单/挂账&nbsp;:&nbsp;{{ census?.signedPay || 0 }}</span>-->
</div> <!-- </div>-->
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> <!-- <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">-->
<el-table-column label="订单号" align="center" prop="orderNo"/> <!-- <el-table-column label="订单号" align="center" prop="orderNo"/>-->
<el-table-column label="服务名称" align="center" prop="goodsTitle"/> <!-- <el-table-column label="服务名称" align="center" prop="goodsTitle"/>-->
<el-table-column label="消费类型" align="center" prop="goodsType"> <!-- <el-table-column label="消费类型" align="center" prop="goodsType">-->
<template v-slot="scope"> <!-- <template v-slot="scope">-->
<span v-if="scope.row.goodsType == '1'">会员充值</span> <!-- <span v-if="scope.row.goodsType == '1'">会员充值</span>-->
<span v-if="scope.row.goodsType == '2'">维修服务</span> <!-- <span v-if="scope.row.goodsType == '2'">维修服务</span>-->
<span v-if="scope.row.goodsType == '3'">保养卡</span> <!-- <span v-if="scope.row.goodsType == '3'">保养卡</span>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column label="客户姓名" align="center" prop="cusName"/> <!-- <el-table-column label="客户姓名" align="center" prop="cusName"/>-->
<el-table-column label="客户手机号" align="center" prop="cusPhone"/> <!-- <el-table-column label="客户手机号" align="center" prop="cusPhone"/>-->
<el-table-column label="商品原价(元)" align="center" prop="goodsPrice"/> <!-- <el-table-column label="商品原价(元)" align="center" prop="goodsPrice"/>-->
<el-table-column label="实付金额(元)" align="center" prop="payMoney"/> <!-- <el-table-column label="实付金额(元)" align="center" prop="payMoney"/>-->
<el-table-column label="下单时间" align="center" prop="orderTime" width="180"> <!-- <el-table-column label="下单时间" align="center" prop="orderTime" width="180">-->
<template v-slot="scope"> <!-- <template v-slot="scope">-->
<span>{{ parseTime(scope.row.orderTime) }}</span> <!-- <span>{{ parseTime(scope.row.orderTime) }}</span>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column label="支付时间" align="center" prop="payTime" width="180"> <!-- <el-table-column label="支付时间" align="center" prop="payTime" width="180">-->
<template v-slot="scope"> <!-- <template v-slot="scope">-->
<span>{{ parseTime(scope.row.payTime) }}</span> <!-- <span>{{ parseTime(scope.row.payTime) }}</span>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column label="支付方式" align="center" prop="payType"> <!-- <el-table-column label="支付方式" align="center" prop="payType">-->
<template v-slot="scope"> <!-- <template v-slot="scope">-->
<dict-tag :type="DICT_TYPE.REPAIR_PAY_TYPE" :value="scope.row.payType"/> <!-- <dict-tag :type="DICT_TYPE.REPAIR_PAY_TYPE" :value="scope.row.payType"/>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column label="订单状态" align="center" prop="orderStatus"> <!-- <el-table-column label="订单状态" align="center" prop="orderStatus">-->
<template v-slot="scope"> <!-- <template v-slot="scope">-->
<el-tag type="warning" v-if="scope.row.orderStatus === '0'">待支付</el-tag> <!-- <el-tag type="warning" v-if="scope.row.orderStatus === '0'">待支付</el-tag>-->
<el-tag type="success" v-if="scope.row.orderStatus === '1'">已支付</el-tag> <!-- <el-tag type="success" v-if="scope.row.orderStatus === '1'">已支付</el-tag>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width"> <!-- <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">-->
<template v-slot="scope"> <!-- <template v-slot="scope">-->
<el-button v-if="scope.row.orderStatus === '0'" size="mini" type="text" icon="el-icon-edit" <!-- <el-button v-if="scope.row.orderStatus === '0'" size="mini" type="text" icon="el-icon-edit"-->
@click="toPay(scope.row)" <!-- @click="toPay(scope.row)"-->
v-hasPermi="['repair:order-info:update']">支付 <!-- v-hasPermi="['repair:order-info:update']">支付-->
</el-button> <!-- </el-button>-->
<!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"--> <!-- &lt;!&ndash; <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"&ndash;&gt;-->
<!-- v-hasPermi="['repair:order-info:update']">修改--> <!-- &lt;!&ndash; v-hasPermi="['repair:order-info:update']">修改&ndash;&gt;-->
<!-- </el-button>--> <!-- &lt;!&ndash; </el-button>&ndash;&gt;-->
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"-->
v-hasPermi="['repair:order-info:delete']">删除 <!-- v-hasPermi="['repair:order-info:delete']">删除-->
</el-button> <!-- </el-button>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
</el-table> <!-- </el-table>-->
<!-- 展示形式二维码 URL --> <!-- &lt;!&ndash; 展示形式二维码 URL &ndash;&gt;-->
<el-dialog title="微信扫一扫" :visible.sync="qrCode.visible" width="700px" append-to-body <!-- <el-dialog title="微信扫一扫" :visible.sync="qrCode.visible" width="700px" append-to-body-->
:close-on-press-escape="false"> <!-- :close-on-press-escape="false">-->
<qrcode-vue :value="qrCode.url" size="500" level="L"/> <!-- <qrcode-vue :value="qrCode.url" size="500" level="L"/>-->
</el-dialog> <!-- </el-dialog>-->
<!-- 分页组件 --> <!-- &lt;!&ndash; 分页组件 &ndash;&gt;-->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"-->
@pagination="getList"/> <!-- @pagination="getList"/>-->
<!-- 对话框(添加 / 修改) --> <!-- &lt;!&ndash; 对话框(添加 / 修改) &ndash;&gt;-->
<OrderInfoForm ref="formRef" @success="getList"/> <!-- <OrderInfoForm ref="formRef" @success="getList"/>-->
</div> <!-- </div>-->
</template> <!--</template>-->
<script> <!--<script>-->
import * as OrderInfoApi from '@/api/repair/orderinfo'; <!--import * as OrderInfoApi from '@/api/repair/orderinfo';-->
import OrderInfoForm from './OrderInfoForm.vue'; <!--import OrderInfoForm from './OrderInfoForm.vue';-->
import QrcodeVue from 'qrcode.vue' <!--import QrcodeVue from 'qrcode.vue'-->
import {getOrderCensus} from "@/api/repair/orderinfo"; <!--import {getOrderCensus} from "@/api/repair/orderinfo";-->
export default { <!--export default {-->
name: "OrderInfo", <!-- name: "OrderInfo",-->
components: { <!-- components: {-->
OrderInfoForm, <!-- OrderInfoForm,-->
QrcodeVue <!-- QrcodeVue-->
}, <!-- },-->
data() { <!-- data() {-->
return { <!-- return {-->
qrCode: { // <!-- qrCode: { // -->
url: '', <!-- url: '',-->
title: '', <!-- title: '',-->
visible: false, <!-- visible: false,-->
}, <!-- },-->
options: [{ <!-- options: [{-->
value: '0', <!-- value: '0',-->
label: '待支付' <!-- label: '待支付'-->
}, { <!-- }, {-->
value: '1', <!-- value: '1',-->
label: '已支付' <!-- label: '已支付'-->
}], <!-- }],-->
// <!-- // -->
loading: true, <!-- loading: true,-->
// <!-- // -->
exportLoading: false, <!-- exportLoading: false,-->
// <!-- // -->
showSearch: true, <!-- showSearch: true,-->
// <!-- // -->
total: 0, <!-- total: 0,-->
// <!-- // -->
list: [], <!-- list: [],-->
// <!-- // -->
isExpandAll: true, <!-- isExpandAll: true,-->
// <!-- // -->
refreshTable: true, <!-- refreshTable: true,-->
// <!-- // -->
currentRow: {}, <!-- currentRow: {},-->
// <!-- // -->
queryParams: { <!-- queryParams: {-->
pageNo: 1, <!-- pageNo: 1,-->
pageSize: 10, <!-- pageSize: 10,-->
orderNo: null, <!-- orderNo: null,-->
goodsTitle: null, <!-- goodsTitle: null,-->
goodsType: null, <!-- goodsType: null,-->
cusName: null, <!-- cusName: null,-->
payType: null, <!-- payType: null,-->
orderStatus: null <!-- orderStatus: null-->
}, <!-- },-->
census: { <!-- census: {-->
credited: null, <!-- credited: null,-->
notCredited: null, <!-- notCredited: null,-->
onlinePay: null, <!-- onlinePay: null,-->
cashPay: null, <!-- cashPay: null,-->
signedPay: null <!-- signedPay: null-->
} <!-- }-->
}; <!-- };-->
}, <!-- },-->
created() { <!-- created() {-->
this.getList(); <!-- this.getList();-->
this.getCensus() <!-- this.getCensus()-->
}, <!-- },-->
methods: { <!-- methods: {-->
/** 查询列表 */ <!-- /** 查询列表 */-->
async getList() { <!-- async getList() {-->
try { <!-- try {-->
this.loading = true; <!-- this.loading = true;-->
const res = await OrderInfoApi.getOrderInfoPage(this.queryParams); <!-- const res = await OrderInfoApi.getOrderInfoPage(this.queryParams);-->
this.list = res.data.records; <!-- this.list = res.data.records;-->
this.total = res.data.total; <!-- this.total = res.data.total;-->
} finally { <!-- } finally {-->
this.loading = false; <!-- this.loading = false;-->
} <!-- }-->
}, <!-- },-->
/** 搜索按钮操作 */ <!-- /** 搜索按钮操作 */-->
handleQuery() { <!-- handleQuery() {-->
this.queryParams.pageNo = 1; <!-- this.queryParams.pageNo = 1;-->
this.getList(); <!-- this.getList();-->
}, <!-- },-->
/** 重置按钮操作 */ <!-- /** 重置按钮操作 */-->
resetQuery() { <!-- resetQuery() {-->
this.resetForm("queryForm"); <!-- this.resetForm("queryForm");-->
this.handleQuery(); <!-- this.handleQuery();-->
}, <!-- },-->
async toPay(row) { <!-- async toPay(row) {-->
if (row.payType == '01') { <!-- if (row.payType == '01') {-->
const orderId = row.id <!-- const orderId = row.id-->
let data = { <!-- let data = {-->
orderId: orderId <!-- orderId: orderId-->
} <!-- }-->
const res = await OrderInfoApi.toPay(data); <!-- const res = await OrderInfoApi.toPay(data);-->
console.log(res, 208) <!-- console.log(res, 208)-->
this.qrCode = { <!-- this.qrCode = {-->
url: res.data.code_url, <!-- url: res.data.code_url,-->
visible: true <!-- visible: true-->
} <!-- }-->
} else { <!-- } else {-->
await this.$modal.confirm('本订单为线下支付订单或挂账订单,点击确定前请确认客户是否已支付') <!-- await this.$modal.confirm('本订单为线下支付订单或挂账订单,点击确定前请确认客户是否已支付')-->
let data = { <!-- let data = {-->
orderNo: row.orderNo, <!-- orderNo: row.orderNo,-->
} <!-- }-->
await OrderInfoApi.updateOrderInfo(data); <!-- await OrderInfoApi.updateOrderInfo(data);-->
this.$modal.msgSuccess("支付成功"); <!-- this.$modal.msgSuccess("支付成功");-->
this.getList() <!-- this.getList()-->
} <!-- }-->
}, <!-- },-->
/** 添加/修改操作 */ <!-- /** 添加/修改操作 */-->
openForm(id) { <!-- openForm(id) {-->
this.$refs["formRef"].open(id); <!-- this.$refs["formRef"].open(id);-->
}, <!-- },-->
/** 删除按钮操作 */ <!-- /** 删除按钮操作 */-->
async handleDelete(row) { <!-- async handleDelete(row) {-->
const id = row.id; <!-- const id = row.id;-->
await this.$modal.confirm('是否确认删除维修模块 订单编号为"' + row.orderNo + '"的数据项?') <!-- await this.$modal.confirm('是否确认删除维修模块 订单编号为"' + row.orderNo + '"的数据项?')-->
try { <!-- try {-->
await OrderInfoApi.deleteOrderInfo(id); <!-- await OrderInfoApi.deleteOrderInfo(id);-->
await this.getList(); <!-- await this.getList();-->
this.$modal.msgSuccess("删除成功"); <!-- this.$modal.msgSuccess("删除成功");-->
} catch { <!-- } catch {-->
} <!-- }-->
}, <!-- },-->
/** 导出按钮操作 */ <!-- /** 导出按钮操作 */-->
async handleExport() { <!-- async handleExport() {-->
await this.$modal.confirm('是否确认导出所有维修模块 订单数据项?'); <!-- await this.$modal.confirm('是否确认导出所有维修模块 订单数据项?');-->
try { <!-- try {-->
this.exportLoading = true; <!-- this.exportLoading = true;-->
const data = await OrderInfoApi.exportOrderInfoExcel(this.queryParams); <!-- const data = await OrderInfoApi.exportOrderInfoExcel(this.queryParams);-->
this.$download.excel(data, '维修模块 订单.xls'); <!-- this.$download.excel(data, '维修模块 订单.xls');-->
} catch { <!-- } catch {-->
} finally { <!-- } finally {-->
this.exportLoading = false; <!-- this.exportLoading = false;-->
} <!-- }-->
}, <!-- },-->
async getCensus() { <!-- async getCensus() {-->
const res = await getOrderCensus() <!-- const res = await getOrderCensus()-->
this.census = res.data <!-- this.census = res.data-->
}, <!-- },-->
} <!-- }-->
}; <!--};-->
</script> <!--</script>-->
<style scoped lang="scss"> <!--<style scoped lang="scss">-->
.census { <!--.census {-->
display: flex; <!-- display: flex;-->
justify-content: right; <!-- justify-content: right;-->
font-weight: bold; <!-- font-weight: bold;-->
font-size: 16px; <!-- font-size: 16px;-->
margin: 1rem 1rem 1rem 0; <!-- margin: 1rem 1rem 1rem 0;-->
} <!--}-->
.census > span { <!--.census > span {-->
padding-left: 3rem; <!-- padding-left: 3rem;-->
} <!--}-->
.credited { <!--.credited {-->
color: green; <!-- color: green;-->
} <!--}-->
.notCredited { <!--.notCredited {-->
color: gray; <!-- color: gray;-->
} <!--}-->
.onlinePay { <!--.onlinePay {-->
color: blue; <!-- color: blue;-->
} <!--}-->
.cashPay { <!--.cashPay {-->
color: goldenrod; <!-- color: goldenrod;-->
} <!--}-->
.signedPay { <!--.signedPay {-->
color: orange; <!-- color: orange;-->
} <!--}-->
</style> <!--</style>-->