356 lines
13 KiB
Vue
356 lines
13 KiB
Vue
<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: #7a664e; 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: #457450; margin: 0 5px;" @click="handleApprove(scope.row)">同意</el-button>
|
||
<el-button type="text" style="color: #a4485a; 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>
|