|
|
@@ -0,0 +1,427 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container calendar-list-container">
|
|
|
+
|
|
|
+ <!-- 查询和其他操作 -->
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-input clearable class="filter-item" style="width: 200px;" placeholder="员工名称"
|
|
|
+ v-model="listQuery.purchaser"></el-input>
|
|
|
+ <el-input clearable class="filter-item" style="width: 200px;" placeholder="订单编号"
|
|
|
+ v-model="listQuery.orderSeq"></el-input>
|
|
|
+ <el-input clearable class="filter-item" style="width: 200px;" placeholder="商品编号"
|
|
|
+ v-model="listQuery.skuSeq"></el-input>
|
|
|
+ <el-input clearable class="filter-item" style="width: 200px;" placeholder="活动标题"
|
|
|
+ v-model="listQuery.title"></el-input>
|
|
|
+ <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
|
|
|
+ <el-button class="filter-item" type="primary" v-waves icon="el-icon-download">导出</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查询结果 -->
|
|
|
+ <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
|
|
|
+ highlight-current-row>
|
|
|
+ <el-table-column type="index" label="序号" header-align="center" align="center">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column align="center" min-width="100px" label="员工名称" prop="purchaser">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="80px" label="订单编号" prop="orderSeq">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="150px" label="商品编号" prop="skuSeq">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="80px" label="商品类型" prop="skuName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="80px" label="活动标题" prop="title">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="80px" label="数量" prop="skuCount">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="80px" label="兑换时间" prop="createTime">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="150px" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button v-if="scope.row.orderStatus == 0" type="success" size="small"
|
|
|
+ @click="handleClick(scope.row.id, 'complete')">处理</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="handleClick(scope.row.id, 'view')">查看</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
+ :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <!-- 添加或修改对话框 -->
|
|
|
+ <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="70%">
|
|
|
+
|
|
|
+
|
|
|
+ <el-form status-icon label-position="center" label-width="100px" style="width:100%;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item label="订单编号">
|
|
|
+ <el-input readonly v-model="detailData.orderSeq" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="员工姓名">
|
|
|
+ <el-input readonly v-model="detailData.purchaserId" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门名称">
|
|
|
+ <el-input readonly v-model="detailData.deptName" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item label="兑换时间">
|
|
|
+ <el-input readonly v-model="detailData.createTime" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="订单状态">
|
|
|
+ <el-input readonly v-model="detailData.orderStatusName" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人">
|
|
|
+ <el-input readonly v-model="detailData.contact" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+
|
|
|
+ <el-form-item label="联系电话">
|
|
|
+ <el-input readonly v-model="detailData.contactPhone" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="地址/邮箱">
|
|
|
+ <el-input readonly v-model="detailData.contactAddr" style="width: 500px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <el-form status-icon label-position="center" label-width="100px" style="width:100%;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item label="商品编号">
|
|
|
+ <el-input readonly v-model="detailData.skuSeq" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品名称">
|
|
|
+ <el-input readonly v-model="detailData.skuName" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所需积分">
|
|
|
+ <el-input readonly v-model="detailData.price" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item label="兑换数量">
|
|
|
+ <el-input readonly v-model="detailData.skuCount" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合计">
|
|
|
+ <el-input readonly v-model="detailData.total" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品类型">
|
|
|
+ <el-input readonly v-model="detailData.skuType" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item label="商品属性">
|
|
|
+ <el-input readonly v-model="detailData.skuAttr" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="兑换方式">
|
|
|
+ <el-input readonly v-model="detailData.deliveryName" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="detailData.deliveryType == 1 && detailData.orderStatus == 0" label="快递单号">
|
|
|
+ <el-input v-model="detailData.trackingNumber" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="detailData.trackingNumber" label="快递单号">
|
|
|
+ <el-input readonly v-model="detailData.trackingNumber" style="width: 200px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form-item v-if="detailData.orderStatus == 0" label="备注">
|
|
|
+ <el-input type="textarea" v-model="comment" style="width: 100%"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column align="center" prop="orderStatus" label="订单流程" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="auditor" label="审核人" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="createTime" label="创建时间" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="comment" label="备注">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+
|
|
|
+ <div v-if="detailData.orderStatus == 0" slot="footer" class="dialog-footer">
|
|
|
+ <!-- <el-button @click="dialogVisible = false">取消</el-button> -->
|
|
|
+ <el-button type="primary" @click="complete(0)">确认</el-button>
|
|
|
+ <el-button type="danger" @click="complete(1)">作废</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style>
|
|
|
+.demo-table-expand {
|
|
|
+ font-size: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.demo-table-expand label {
|
|
|
+ width: 200px;
|
|
|
+ color: #99a9bf;
|
|
|
+}
|
|
|
+
|
|
|
+.demo-table-expand .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { complete, list, detail } from "@/api/exchangeManage";
|
|
|
+import waves from "@/directive/waves"; // 水波纹指令
|
|
|
+import Tinymce from '@/components/Tinymce'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'exchangeList',
|
|
|
+ components: { Tinymce },
|
|
|
+ directives: { waves },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ auditor:'吴艳敏',
|
|
|
+ trackingNumber: '',
|
|
|
+ comment: '',
|
|
|
+ tableData: [{
|
|
|
+ orderStatus: '待确认',
|
|
|
+ auditor: '王小虎',
|
|
|
+ createTime: '2023-4-7',
|
|
|
+ comment: '请确认',
|
|
|
+ }, {
|
|
|
+ orderStatus: '已确认',
|
|
|
+ auditor: '王小虎',
|
|
|
+ createTime: '2023-4-7',
|
|
|
+ comment: '已确认确认',
|
|
|
+ }, {
|
|
|
+ orderStatus: '作废',
|
|
|
+ auditor: '王小虎',
|
|
|
+ createTime: '2023-4-7',
|
|
|
+ comment: '作废原因',
|
|
|
+ }, {
|
|
|
+ orderStatus: '邮寄中',
|
|
|
+ auditor: '王小虎',
|
|
|
+ createTime: '2023-4-7',
|
|
|
+ comment: '已邮寄',
|
|
|
+ }],
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '中秋福利',
|
|
|
+ purchaser: '张三',
|
|
|
+ orderSeq: 'd123456',
|
|
|
+ skuSeq: 's123456',
|
|
|
+ createTime: '2023-3-24',
|
|
|
+ skuName: '活动礼品',
|
|
|
+ skuCount: '1',
|
|
|
+ orderStatus: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '中秋福利',
|
|
|
+ purchaser: '张三',
|
|
|
+ orderSeq: 'd123456',
|
|
|
+ skuSeq: 's123456',
|
|
|
+ createTime: '2023-3-24',
|
|
|
+ skuName: '活动礼品',
|
|
|
+ skuCount: '1',
|
|
|
+ orderStatus: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '中秋福利',
|
|
|
+ purchaser: '张三',
|
|
|
+ orderSeq: 'd123456',
|
|
|
+ skuSeq: 's123456',
|
|
|
+ createTime: '2023-3-24',
|
|
|
+ skuName: '活动礼品',
|
|
|
+ skuCount: '1',
|
|
|
+ orderStatus: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: '中秋福利',
|
|
|
+ purchaser: '张三',
|
|
|
+ orderSeq: 'd123456',
|
|
|
+ skuSeq: 's123456',
|
|
|
+ createTime: '2023-3-24',
|
|
|
+ skuName: '活动礼品',
|
|
|
+ skuCount: '1',
|
|
|
+ orderStatus: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: '中秋福利',
|
|
|
+ purchaser: '张三',
|
|
|
+ orderSeq: 'd123456',
|
|
|
+ skuSeq: 's123456',
|
|
|
+ createTime: '2023-3-24',
|
|
|
+ skuName: '活动礼品',
|
|
|
+ skuCount: '1',
|
|
|
+ orderStatus: 4,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ total: 0,
|
|
|
+ listLoading: false,
|
|
|
+ listQuery: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ purchaser: '',
|
|
|
+ orderSeq: '',
|
|
|
+ skuSeq: '',
|
|
|
+ title: '',
|
|
|
+ },
|
|
|
+ dialogVisible: false,
|
|
|
+ dialogStatus: '',
|
|
|
+ textMap: {
|
|
|
+ complete: "审批",
|
|
|
+ view: "详情",
|
|
|
+ },
|
|
|
+ detailData: {
|
|
|
+ id:'123',
|
|
|
+ orderSeq: 'D123456',
|
|
|
+ purchaserId: '李四',
|
|
|
+ deptName: '软件工程院',
|
|
|
+ createTime: '2023-4-7',
|
|
|
+ orderStatusName: '待确认',
|
|
|
+ orderStatus: 0,
|
|
|
+ contact: '张三',
|
|
|
+ contactPhone: '13613885046',
|
|
|
+ contactAddr: '正大西区CPL',
|
|
|
+ skuSeq: 'S123456',
|
|
|
+ skuName: '榨汁机',
|
|
|
+ price: '100',
|
|
|
+ skuCount: 1,
|
|
|
+ total: '100',
|
|
|
+ skuType: '积分商品',
|
|
|
+ skuAttr: '实物',
|
|
|
+ deliveryName: '邮寄',
|
|
|
+ deliveryType: 1,
|
|
|
+ trackingNumber: '',
|
|
|
+ comment: '',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checked(val){
|
|
|
+ if(val.flag == 0 && val.deliveryType==1){
|
|
|
+ if(!val.trackingNumber){
|
|
|
+ this.$alert("请填写快递单号", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+ if(val.flag == 1){
|
|
|
+ if(!val.comment){
|
|
|
+ this.$alert("请填备注", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ complete(flag) {
|
|
|
+ const parms = {
|
|
|
+ orderId:this.detailData.id,
|
|
|
+ flag:flag,
|
|
|
+ deliveryType:this.detailData.deliveryType,
|
|
|
+ auditor:this.auditor,
|
|
|
+ trackingNumber: this.detailData.trackingNumber,
|
|
|
+ comment: this.comment,
|
|
|
+ }
|
|
|
+ const isChecked = this.checked(parms);
|
|
|
+ if(isChecked){
|
|
|
+ complete(parms).then((response) => {
|
|
|
+ this.getList();
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.$notify({
|
|
|
+ title: "成功",
|
|
|
+ message: "创建成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ this.reload();
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getDetail(id) {
|
|
|
+ detail({ order: id }).then(response => {
|
|
|
+ this.detailData = response.data.data.items
|
|
|
+ }).catch(() => {
|
|
|
+ this.detailData = {}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick(id, tag) {
|
|
|
+ this.dialogStatus = tag;
|
|
|
+ // this.getDetail(id);
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ list(this.listQuery).then(response => {
|
|
|
+ this.list = response.data.data.items
|
|
|
+ this.total = response.data.data.total
|
|
|
+ this.listLoading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.list = []
|
|
|
+ this.total = 0
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleFilter() {
|
|
|
+ this.listQuery.page = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.listQuery.limit = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.listQuery.page = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.ad-avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.ad-avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.ad-avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ad-avatar {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
