first commit
This commit is contained in:
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
||||
<el-form-item label="批次号" prop="batchId">
|
||||
<el-input
|
||||
v-model="queryParams.batchId"
|
||||
placeholder="请输入批次号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="转赠人ID" prop="fromUserId">
|
||||
<el-input
|
||||
v-model="queryParams.fromUserId"
|
||||
placeholder="请输入转赠人ID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="转赠人昵称" prop="fromNickName">
|
||||
<el-input
|
||||
v-model="queryParams.fromNickName"
|
||||
placeholder="请输入转赠人昵称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="受赠人ID" prop="toUserId">
|
||||
<el-input
|
||||
v-model="queryParams.toUserId"
|
||||
placeholder="请输入受赠人ID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="受赠人昵称" prop="toNickName">
|
||||
<el-input
|
||||
v-model="queryParams.toNickName"
|
||||
placeholder="请输入受赠人昵称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="饰品名称" prop="ornamentName">
|
||||
<el-input
|
||||
v-model="queryParams.ornamentName"
|
||||
placeholder="请输入饰品名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="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">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
border
|
||||
>
|
||||
<el-table-column type="expand" width="50">
|
||||
<template slot-scope="props">
|
||||
<el-table :data="props.row.ornaments" border size="mini" style="margin: 0 20px; width: auto;">
|
||||
<el-table-column align="center" prop="ornamentName" label="饰品名称" width="300" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column align="center" prop="ornamentPrice" label="饰品价格" width="120"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="batchId" label="批次号" width="160" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column align="center" prop="fromUserId" label="转赠人ID" width="90"></el-table-column>
|
||||
<el-table-column align="center" prop="fromNickName" label="转赠人昵称" width="120"></el-table-column>
|
||||
<el-table-column align="center" label="今日转赠次数" width="130">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.dailyTotalCount == null">未记录</span>
|
||||
<span v-else>
|
||||
剩 {{ scope.row.dailyAvailableCount }} / {{ scope.row.dailyTotalCount }}
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">
|
||||
上限：{{ scope.row.dailyTotalCount }}<br/>
|
||||
已用：{{ scope.row.dailyUsedCount }}<br/>
|
||||
审核中：{{ scope.row.dailyPendingCount }}
|
||||
</div>
|
||||
<i class="el-icon-question" style="color: #909399; margin-left: 4px;"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="toUserId" label="受赠人ID" width="90"></el-table-column>
|
||||
<el-table-column align="center" prop="toNickName" label="受赠人昵称" width="120"></el-table-column>
|
||||
<el-table-column align="center" label="饰品数量" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="toggleExpand(scope.row)">{{ scope.row.ornaments ? scope.row.ornaments.length : 0 }} 个</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="status" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.status === 0" type="warning" size="mini">待审核</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 1" type="success" size="mini">审核通过</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 2" type="danger" size="mini">审核驳回</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="createTime" label="申请时间" width="160"></el-table-column>
|
||||
<el-table-column align="center" class-name="operation-column" label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.status === 0" style="display: flex; justify-content: center; align-items: center;">
|
||||
<el-button type="text" style="color: #67C23A; margin: 0 5px;" @click="handleApprove(scope.row)">同意</el-button>
|
||||
<el-button type="text" style="color: #F56C6C; margin: 0 5px;" @click="handleReject(scope.row)">驳回</el-button>
|
||||
</div>
|
||||
<div v-else style="text-align: center; color: #999;">已处理</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 驳回原因对话框 -->
|
||||
<el-dialog title="驳回转赠申请" :visible.sync="dialogVisible" width="600px">
|
||||
<el-form :model="rejectForm" :rules="rules" ref="rejectFormRef" label-width="100px">
|
||||
<el-form-item label="批次号">
|
||||
<span>{{ rejectForm.batchId }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="转赠人">
|
||||
<span>{{ rejectForm.fromNickName }} (ID: {{ rejectForm.fromUserId }})</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="受赠人">
|
||||
<span>{{ rejectForm.toNickName }} (ID: {{ rejectForm.toUserId }})</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="饰品明细">
|
||||
<el-table :data="rejectForm.ornaments" border size="mini" style="width: 100%;">
|
||||
<el-table-column align="center" prop="ornamentName" label="饰品名称" min-width="300" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column align="center" prop="ornamentPrice" label="饰品价格" width="120"></el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="驳回原因" prop="rejectReason">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
v-model="rejectForm.rejectReason"
|
||||
placeholder="请输入驳回原因"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitReject">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 同意确认对话框 -->
|
||||
<el-dialog title="审核确认" :visible.sync="approveDialogVisible" width="600px">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="批次号">
|
||||
<span>{{ approveForm.batchId }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="转赠人">
|
||||
<span>{{ approveForm.fromNickName }} (ID: {{ approveForm.fromUserId }})</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="受赠人">
|
||||
<span>{{ approveForm.toNickName }} (ID: {{ approveForm.toUserId }})</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="饰品明细">
|
||||
<el-table :data="approveForm.ornaments" border size="mini" style="width: 100%;">
|
||||
<el-table-column align="center" prop="ornamentName" label="饰品名称" min-width="300" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column align="center" prop="ornamentPrice" label="饰品价格" width="120"></el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="approveDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitApprove">确定同意</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { transferApplyBatchList, approveTransferBatch, rejectTransferBatch } from "@/api/skins/transfer/api";
|
||||
|
||||
export default {
|
||||
name: 'TransferApply',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
showSearch: true,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
dateRange: [],
|
||||
dialogVisible: false,
|
||||
approveDialogVisible: false,
|
||||
approveForm: {
|
||||
ornaments: []
|
||||
},
|
||||
rejectForm: {
|
||||
ornaments: []
|
||||
},
|
||||
rules: {
|
||||
rejectReason: [
|
||||
{ required: true, message: "请输入驳回原因", trigger: "blur" },
|
||||
{ min: 2, max: 200, message: "驳回原因长度在 2 到 200 个字符", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
batchId: null,
|
||||
fromUserId: null,
|
||||
fromNickName: null,
|
||||
toUserId: null,
|
||||
toNickName: null,
|
||||
ornamentName: null,
|
||||
status: 0,
|
||||
phoneNumber: null,
|
||||
startTime: null,
|
||||
endTime: null
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
batchId: null,
|
||||
fromUserId: null,
|
||||
fromNickName: null,
|
||||
toUserId: null,
|
||||
toNickName: null,
|
||||
ornamentName: null,
|
||||
status: 0,
|
||||
phoneNumber: null,
|
||||
startTime: null,
|
||||
endTime: null
|
||||
};
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
if (this.dateRange && this.dateRange.length === 2) {
|
||||
this.queryParams.startTime = this.dateRange[0];
|
||||
this.queryParams.endTime = this.dateRange[1];
|
||||
} else {
|
||||
this.queryParams.startTime = null;
|
||||
this.queryParams.endTime = null;
|
||||
}
|
||||
transferApplyBatchList(this.queryParams).then(res => {
|
||||
this.tableData = res.rows;
|
||||
this.total = res.total;
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
toggleExpand(row) {
|
||||
this.$refs.table && this.$refs.table.toggleRowExpansion(row);
|
||||
},
|
||||
/**
|
||||
* 同意整批转赠
|
||||
*/
|
||||
handleApprove(row) {
|
||||
this.approveForm = {
|
||||
batchId: row.batchId,
|
||||
fromUserId: row.fromUserId,
|
||||
fromNickName: row.fromNickName,
|
||||
toUserId: row.toUserId,
|
||||
toNickName: row.toNickName,
|
||||
ornaments: row.ornaments || []
|
||||
};
|
||||
this.approveDialogVisible = true;
|
||||
},
|
||||
submitApprove() {
|
||||
approveTransferBatch(this.approveForm.batchId).then(res => {
|
||||
this.$modal.msgSuccess("批次审核通过成功");
|
||||
this.approveDialogVisible = false;
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 驳回整批转赠
|
||||
*/
|
||||
handleReject(row) {
|
||||
this.rejectForm = {
|
||||
batchId: row.batchId,
|
||||
fromUserId: row.fromUserId,
|
||||
fromNickName: row.fromNickName,
|
||||
toUserId: row.toUserId,
|
||||
toNickName: row.toNickName,
|
||||
ornaments: row.ornaments || [],
|
||||
rejectReason: ''
|
||||
};
|
||||
this.dialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.rejectFormRef) {
|
||||
this.$refs.rejectFormRef.clearValidate();
|
||||
}
|
||||
});
|
||||
},
|
||||
submitReject() {
|
||||
this.$refs.rejectFormRef.validate(valid => {
|
||||
if (valid) {
|
||||
rejectTransferBatch(this.rejectForm.batchId, this.rejectForm.rejectReason).then(res => {
|
||||
this.$modal.msgSuccess("批次已驳回");
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::v-deep .operation-column .cell {
|
||||
text-align: center !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user