|
@@ -0,0 +1,460 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ label-width="90px"
|
|
|
+ >
|
|
|
+ <el-form-item label="门店" prop="channelId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.channelId"
|
|
|
+ placeholder="请选择门店"
|
|
|
+ style="width: 100%;"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ :filter-method="dataFilter"
|
|
|
+ @change="pageParams.pageNum = 1;handleQuery()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item) in siteList"
|
|
|
+ :key="item.channelId"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.channelId">
|
|
|
+ <div>
|
|
|
+ <span style="float: left;">{{item.name}} </span>
|
|
|
+ <span style="float: right;">{{item.mobile}}</span>
|
|
|
+ </div>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="商品名称">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.title"
|
|
|
+ placeholder="请输入商品名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ @change="pageParams.pageNum = 1;handleQuery()"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="订单号">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.orderId"
|
|
|
+ placeholder="输入订单编号"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ @change="pageParams.pageNum = 1;handleQuery()"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="下单时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="tradeTimeArr"
|
|
|
+ type="datetimerange"
|
|
|
+ size="small"
|
|
|
+ value-format="timestamp"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="时间选择"
|
|
|
+ end-placeholder="时间选择"
|
|
|
+ @change="tardeTime"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收货人手机">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.tel"
|
|
|
+ placeholder="输入手机号"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ @change="pageParams.pageNum = 1;handleQuery()"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="pageParams.pageNum = 1;handleQuery()"
|
|
|
+ >搜索
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 导出、刷新 -->
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="infor"
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="small"
|
|
|
+ @click="handleExportDraw"
|
|
|
+ v-hasPermi="['order:store:export']"
|
|
|
+ >导出订单
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar
|
|
|
+ :showSearch.sync="showSearch"
|
|
|
+ @queryTable="getList"
|
|
|
+ ></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+ <!-- 订单状态 -->
|
|
|
+ <el-tabs type="card" v-model="state" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="全部订单" name="no"></el-tab-pane>
|
|
|
+ <el-tab-pane label="待付款" name="0"></el-tab-pane>
|
|
|
+ <el-tab-pane label="待发货" name="1"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已发货" name="2"></el-tab-pane>
|
|
|
+ <!-- <el-tab-pane label="部分发货" name="4"></el-tab-pane> -->
|
|
|
+ <el-tab-pane label="已完成" name="3"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已取消" name="-1"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <el-table ref="table" v-loading="loading" :data="list">
|
|
|
+ <!-- 展开盲票组列表 -->
|
|
|
+ <el-table-column type="expand">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-table :data="row.items" row-key="itemId">
|
|
|
+ <el-table-column label="商品图片" min-width="80">
|
|
|
+ <div slot-scope="{ row }">
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="row.picUrl"
|
|
|
+ :preview-src-list="[row.picUrl]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品名称" prop="title" min-width="80"/>
|
|
|
+ <el-table-column label="规格" min-width="100">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>{{ row.properties || "--" }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数量" prop="orderNum" min-width="85">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>{{ row.goodsNum }}件</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 不展开列表 -->
|
|
|
+ <el-table-column label="订单号" prop="orderId" min-width="80"/>
|
|
|
+ <el-table-column label="下单时间" min-width="100">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>
|
|
|
+ {{ parseTime(row.createdTime) }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数量" prop="pkgNum" min-width="85">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>{{ row.orderNum }}件</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实付金额(元)" min-width="85">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>{{ $numberFormat(row.payAmt) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="门店" prop="channelName" min-width="80"/>
|
|
|
+ <el-table-column label="收货人/收货地址" prop="addr" min-width="120">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>
|
|
|
+ {{
|
|
|
+ `${row.receiver},${row.tel},${row.province}${row.city}${row.area}${row.address}`
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单状态" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>
|
|
|
+ <el-tag :type="row.status.value === 1 ? 'success' : 'info'" v-if="row.status.value !== 2">{{
|
|
|
+ row.status.desc
|
|
|
+ }}
|
|
|
+ </el-tag>
|
|
|
+ <el-tag type="info" v-else>已发货</el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="80">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ v-hasPermi="['order:store:query']"
|
|
|
+ type="text"
|
|
|
+ @click="getDetail(row)"
|
|
|
+ >查看详情
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="row.status.value === 1 || row.status.value === 4"
|
|
|
+ v-hasPermi="['order:store:ship']"
|
|
|
+ type="text"
|
|
|
+ @click="toGoods(row)"
|
|
|
+ >发货
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="提示"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="60%"
|
|
|
+ :before-close="handleClose">
|
|
|
+ <div v-html="responseData"></div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="pageParams.pageNum"
|
|
|
+ :limit.sync="pageParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 发货 -->
|
|
|
+ <send-goods :send-show="goodsShow" :goods-info="goodsInfo" @close="close"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getStoreList,
|
|
|
+ storeOrderExport,
|
|
|
+} from "@/api/business/order";
|
|
|
+import { listAllSaleSite} from "@/api/admin/salesite";
|
|
|
+import {publicFileGetUrl} from "@/api/common";
|
|
|
+import SendGoods from "./components/SendGoods";
|
|
|
+export default {
|
|
|
+ name: "Store",
|
|
|
+ components: {
|
|
|
+ SendGoods,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ showSearch: true,
|
|
|
+ dialogVisible: false,
|
|
|
+ // 筛选
|
|
|
+ queryParams: {
|
|
|
+ channelId: "",
|
|
|
+ title: "",
|
|
|
+ orderId: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ status: "",
|
|
|
+ tel: "",
|
|
|
+ },
|
|
|
+ // 分页
|
|
|
+ pageParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ // 门店
|
|
|
+ merchantArr: [],
|
|
|
+ // 下单时间
|
|
|
+ tradeTimeArr: [],
|
|
|
+ // 订单列表状态
|
|
|
+ state: "no",
|
|
|
+ // 发货显示
|
|
|
+ goodsShow: false,
|
|
|
+ // 订单详情
|
|
|
+ goodsInfo: {},
|
|
|
+ fileSaveUrl: '',
|
|
|
+ reqData: {},
|
|
|
+ responseData:'',
|
|
|
+ siteList:[],
|
|
|
+ siteCopyList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ this.getSupplierItems()
|
|
|
+ this.getSaleSiteList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取门店下拉列表
|
|
|
+ getSaleSiteList(){
|
|
|
+ listAllSaleSite({}).then(response => {
|
|
|
+ this.siteList = response.data || [];
|
|
|
+ this.siteCopyList = response.data || [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ dataFilter(val) {
|
|
|
+ if (val) { //val存在
|
|
|
+ this.siteList = this.siteCopyList.filter((item) => {
|
|
|
+ if (!!~item.mobile.indexOf(val) || !!~item.mobile.toUpperCase().indexOf(val.toUpperCase())
|
|
|
+ || !!~item.name.indexOf(val) || !!~item.name.indexOf(val)) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else { //val为空时,还原数组
|
|
|
+ this.siteList = this.siteCopyList;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm('确认关闭?')
|
|
|
+ .then(_ => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 订单列表
|
|
|
+ getList() {
|
|
|
+ let data = {
|
|
|
+ ...this.queryParams,
|
|
|
+ }
|
|
|
+ this.loading = true;
|
|
|
+ getStoreList(
|
|
|
+ "pageNum=" +
|
|
|
+ this.pageParams.pageNum +
|
|
|
+ "&pageSize=" +
|
|
|
+ this.pageParams.pageSize +
|
|
|
+ "&",
|
|
|
+ data
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.code == 0) {
|
|
|
+ res.rows.forEach((item) => {
|
|
|
+ let items = item.items;
|
|
|
+ items.forEach((item) => {
|
|
|
+ let picUrlArr = item.picUrl.split(",");
|
|
|
+ item.picUrl = publicFileGetUrl + picUrlArr[0];
|
|
|
+ });
|
|
|
+ item.status = JSON.parse(item.status);
|
|
|
+ });
|
|
|
+ this.total = res.total;
|
|
|
+ this.list = res.rows;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //搜索
|
|
|
+ handleQuery() {
|
|
|
+ this.siteList = this.siteCopyList;
|
|
|
+ this.pageParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置
|
|
|
+ resetQuery() {
|
|
|
+ this.queryParams = {
|
|
|
+ channelId: "",
|
|
|
+ title: "",
|
|
|
+ orderId: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ status: "",
|
|
|
+ tel: "",
|
|
|
+ };
|
|
|
+ this.state = "no"
|
|
|
+ this.tradeTimeArr = [];
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择下单时间
|
|
|
+ tardeTime(e) {
|
|
|
+ if (e) {
|
|
|
+ this.queryParams.startTime = e[0];
|
|
|
+ this.queryParams.endTime = e[1];
|
|
|
+ this.pageParams.pageNum = 1
|
|
|
+ this.handleQuery();
|
|
|
+ } else {
|
|
|
+ this.queryParams.startTime = "";
|
|
|
+ this.queryParams.endTime = "";
|
|
|
+ this.pageParams.pageNum = 1
|
|
|
+ this.handleQuery();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 订单切换
|
|
|
+ handleClick(e) {
|
|
|
+ if (e.name == "no") {
|
|
|
+ this.queryParams.status = "";
|
|
|
+ } else {
|
|
|
+ this.queryParams.status = Number(e.name);
|
|
|
+ }
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查看详情
|
|
|
+ getDetail(row) {
|
|
|
+ this.$router.push({name: "StoreDetail", query: {id: row.orderId}});
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击发货
|
|
|
+ toGoods(row) {
|
|
|
+ this.goodsShow = true;
|
|
|
+ this.goodsInfo = row;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭发货
|
|
|
+ close() {
|
|
|
+ this.goodsShow = false;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 导出订单
|
|
|
+ handleExportDraw() {
|
|
|
+ let data = {
|
|
|
+ ...this.queryParams,
|
|
|
+ }
|
|
|
+ this.$confirm("是否确认导出订单?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.vloading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "正在导出订单.....",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ return storeOrderExport(data);
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ this.vloading.close();
|
|
|
+ this.download(response.msg);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.vloading.close();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep .el-tabs--border-card > .el-tabs__content {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.msgbox {
|
|
|
+ width: 60%;
|
|
|
+}
|
|
|
+</style>
|