mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 19:07:25 +08:00
manager 升级到vue3
This commit is contained in:
pikachu1995@126.com
@@ -1,355 +1,198 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card>
|
||||
<Row @keydown.enter.native.prevent="handleSearch">
|
||||
<Form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
:label-width="70"
|
||||
class="search-form"
|
||||
>
|
||||
<Form-item label="会员名称" prop="memberName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
label-width="70px"
|
||||
class="search-form"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<el-form-item label="会员名称" prop="memberName">
|
||||
<el-input
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.distributionStatus" style="width: 240px">
|
||||
<el-option
|
||||
v-for="item in distributionStatusList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="状态">
|
||||
<Select
|
||||
v-model="searchForm.distributionStatus"
|
||||
style="width: 240px"
|
||||
>
|
||||
<Option
|
||||
v-for="item in distributionStatusList"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
>{{ item.label }}
|
||||
</Option
|
||||
>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Button
|
||||
@click="handleSearch"
|
||||
type="primary"
|
||||
icon="ios-search"
|
||||
class="search-btn"
|
||||
>搜索
|
||||
</Button
|
||||
>
|
||||
</Form>
|
||||
</Row>
|
||||
</Card>
|
||||
<Card>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
class="mt_10"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="memberName" label="会员名称" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column prop="idNumber" label="身份证号" min-width="120" />
|
||||
<el-table-column prop="settlementBankAccountName" label="结算银行开户行名称" min-width="120" />
|
||||
<el-table-column prop="settlementBankAccountNum" label="结算银行开户账号" min-width="120" />
|
||||
<el-table-column prop="settlementBankBranchName" label="结算银行开户支行名称" min-width="120" />
|
||||
<el-table-column prop="distributionOrderCount" label="推广单数" width="150" />
|
||||
<el-table-column label="分销订单金额" width="150">
|
||||
<template #default="{ row }">
|
||||
<priceColorScheme v-if="row" :value="row.distributionOrderPrice" :color="$mainColor" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分销金额" width="150">
|
||||
<template #default="{ row }">
|
||||
<priceColorScheme v-if="row" :value="row.rebateTotal" :color="$mainColor" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="待提现金额" width="150">
|
||||
<template #default="{ row }">
|
||||
<priceColorScheme v-if="row" :value="row.canRebate" color="green" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="冻结金额" width="150">
|
||||
<template #default="{ row }">
|
||||
<priceColorScheme v-if="row" :value="row.commissionFrozen" color="#347dda" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="150">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<el-tag v-if="row.distributionStatus == 'PASS'" type="success">通过</el-tag>
|
||||
<el-tag v-else-if="row.distributionStatus == 'APPLY'" type="primary">待审核</el-tag>
|
||||
<el-tag v-else-if="row.distributionStatus == 'RETREAT'" type="warning">清退</el-tag>
|
||||
<el-tag v-else-if="row.distributionStatus == 'REFUSE'" type="danger">拒绝</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<a v-if="row.distributionStatus != 'RETREAT'" class="link-text" @click="retreat(row)">清退</a>
|
||||
<a v-if="row.distributionStatus == 'RETREAT'" class="link-text" @click="resume(row)">恢复</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
<Modal title="修改分销员" v-model="modalVisible" :mask-closable="false" :width="600">
|
||||
<Form ref="distributionForm" :model="distributionForm" :label-width="150" :rules="distributionFormValidate">
|
||||
<FormItem label="姓名" prop="name">
|
||||
<Input v-model="distributionForm.name" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="身份证号" prop="idNumber">
|
||||
<Input v-model="distributionForm.idNumber" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="结算银行开户行名称" prop="settlementBankAccountName">
|
||||
<Input v-model="distributionForm.settlementBankAccountName" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="结算银行开户账号" prop="settlementBankAccountNum">
|
||||
<Input v-model="distributionForm.settlementBankAccountNum" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="结算银行开户支行名称" prop="settlementBankBranchName">
|
||||
<Input v-model="distributionForm.settlementBankBranchName" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="modalVisible"
|
||||
title="修改分销员"
|
||||
width="600px"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
ref="distributionForm"
|
||||
:model="distributionForm"
|
||||
label-width="150px"
|
||||
:rules="distributionFormValidate"
|
||||
>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="distributionForm.name" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idNumber">
|
||||
<el-input v-model="distributionForm.idNumber" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结算银行开户行名称" prop="settlementBankAccountName">
|
||||
<el-input v-model="distributionForm.settlementBankAccountName" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结算银行开户账号" prop="settlementBankAccountNum">
|
||||
<el-input v-model="distributionForm.settlementBankAccountNum" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结算银行开户支行名称" prop="settlementBankBranchName">
|
||||
<el-input v-model="distributionForm.settlementBankBranchName" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="modalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {editDistribution, getDistributionListData, resumeDistribution, retreatDistribution} from "@/api/distribution";
|
||||
import {distributionStatusList} from "./dataJson.js";
|
||||
import {regular} from "@/utils";
|
||||
import { editDistribution, getDistributionListData, resumeDistribution, retreatDistribution } from "@/api/distribution";
|
||||
import { distributionStatusList } from "./dataJson.js";
|
||||
import { regular } from "@/utils";
|
||||
|
||||
export default {
|
||||
name: "distribution",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
distributionStatusList, // 分销状态
|
||||
loading: true, // 表单加载状态
|
||||
modalVisible: false, // 添加或编辑显示
|
||||
distributionStatusList,
|
||||
loading: true,
|
||||
modalVisible: false,
|
||||
distributionForm: {
|
||||
name: "",
|
||||
idNumber: "",
|
||||
settlementBankAccountName: "",
|
||||
settlementBankAccountNum: "",
|
||||
settlementBankBranchName: ""
|
||||
settlementBankBranchName: "",
|
||||
},
|
||||
// 表单验证规则
|
||||
distributionFormValidate: {
|
||||
name: [
|
||||
regular.REQUIRED,
|
||||
regular.VARCHAR20
|
||||
],
|
||||
idNumber: [
|
||||
regular.REQUIRED,
|
||||
regular.VARCHAR20
|
||||
],
|
||||
settlementBankAccountName: [
|
||||
regular.REQUIRED,
|
||||
regular.VARCHAR20
|
||||
],
|
||||
settlementBankAccountNum: [
|
||||
regular.REQUIRED,
|
||||
regular.VARCHAR20
|
||||
],
|
||||
settlementBankBranchName: [
|
||||
regular.REQUIRED,
|
||||
regular.VARCHAR20
|
||||
],
|
||||
name: [regular.REQUIRED, regular.VARCHAR20],
|
||||
idNumber: [regular.REQUIRED, regular.VARCHAR20],
|
||||
settlementBankAccountName: [regular.REQUIRED, regular.VARCHAR20],
|
||||
settlementBankAccountNum: [regular.REQUIRED, regular.VARCHAR20],
|
||||
settlementBankBranchName: [regular.REQUIRED, regular.VARCHAR20],
|
||||
},
|
||||
submitLoading: false, // 编辑提交状态
|
||||
submitLoading: false,
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "会员名称",
|
||||
key: "memberName",
|
||||
minWidth: 120,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
key: "name",
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
title: "身份证号",
|
||||
key: "idNumber",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户行名称",
|
||||
key: "settlementBankAccountName",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户账号",
|
||||
key: "settlementBankAccountNum",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户支行名称",
|
||||
key: "settlementBankBranchName",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "推广单数",
|
||||
key: "distributionOrderCount",
|
||||
minWidth: 120,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "分销订单金额",
|
||||
key: "distributionOrderPrice",
|
||||
width: 150,
|
||||
sortable: false,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props: {value: params.row.distributionOrderPrice, color: this.$mainColor}});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "分销金额",
|
||||
key: "rebateTotal",
|
||||
width: 150,
|
||||
sortable: false,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props: {value: params.row.rebateTotal, color: this.$mainColor}});
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
title: "待提现金额",
|
||||
key: "canRebate",
|
||||
width: 150,
|
||||
sortable: false,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props: {value: params.row.canRebate, color: 'green'}});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "冻结金额",
|
||||
key: "commissionFrozen",
|
||||
width: 150,
|
||||
sortable: false,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props: {value: params.row.commissionFrozen, color: '#347dda'}});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "distributionStatus",
|
||||
width: 150,
|
||||
sortable: false,
|
||||
render: (h, params) => {
|
||||
if (params.row.distributionStatus == "PASS") {
|
||||
return h("Tag", {props: {color: "green",},}, "通过");
|
||||
} else if (params.row.distributionStatus == "APPLY") {
|
||||
return h("Tag", {props: {color: "geekblue",},}, "待审核");
|
||||
} else if (params.row.distributionStatus == "RETREAT") {
|
||||
return h("Tag", {props: {color: "volcano",},}, "清退");
|
||||
} else if (params.row.distributionStatus == "REFUSE") {
|
||||
return h("Tag", {props: {color: "red",},}, "拒绝");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 140,
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
},
|
||||
},
|
||||
[
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
display:
|
||||
params.row.distributionStatus != "RETREAT"
|
||||
? "block"
|
||||
: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.retreat(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"清退"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
display:
|
||||
params.row.distributionStatus == "RETREAT"
|
||||
? "block"
|
||||
: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.resume(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"恢复"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"编辑"
|
||||
), h(
|
||||
"div",
|
||||
{
|
||||
style: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
},
|
||||
})
|
||||
]
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
changePage() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
changePageSize() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
this.searchForm.status = "PASS";
|
||||
@@ -361,15 +204,12 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 清退分销商
|
||||
retreat(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "提示",
|
||||
// 记得确认修改此处
|
||||
content: "您确认要清退 " + v.memberName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 删除
|
||||
retreatDistribution(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
@@ -380,15 +220,12 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
// 恢复分销商
|
||||
resume(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "提示",
|
||||
// 记得确认修改此处
|
||||
content: "您确认要恢复 " + v.memberName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 删除
|
||||
resumeDistribution(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
@@ -399,10 +236,8 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
// 编辑
|
||||
edit(v) {
|
||||
this.$refs.distributionForm.resetFields();
|
||||
// 转换null为""
|
||||
this.$refs.distributionForm?.resetFields();
|
||||
for (let attr in v) {
|
||||
if (v[attr] === null) {
|
||||
v[attr] = "";
|
||||
@@ -413,11 +248,9 @@ export default {
|
||||
this.distributionForm = data;
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 提交表单
|
||||
handleSubmit() {
|
||||
this.$refs.distributionForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// 编辑
|
||||
editDistribution(this.distributionForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
|
||||
@@ -1,56 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card>
|
||||
<Row @keydown.enter.native.prevent="handleSearch">
|
||||
<Form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
:label-width="70"
|
||||
class="search-form"
|
||||
>
|
||||
<Form-item label="会员名称" prop="memberName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Button
|
||||
@click="handleSearch"
|
||||
type="primary"
|
||||
class="search-btn"
|
||||
>搜索</Button
|
||||
>
|
||||
</Form>
|
||||
</Row>
|
||||
</Card>
|
||||
<Card>
|
||||
<Table
|
||||
class="mt_10"
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
label-width="70px"
|
||||
class="search-form"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<el-form-item label="会员名称" prop="memberName">
|
||||
<el-input
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
class="mt_10"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="memberName" label="会员名称" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column prop="idNumber" label="身份证号" min-width="120" />
|
||||
<el-table-column prop="settlementBankAccountName" label="结算银行开户行名称" min-width="120" />
|
||||
<el-table-column prop="settlementBankAccountNum" label="结算银行开户账号" min-width="120" />
|
||||
<el-table-column prop="settlementBankBranchName" label="结算银行开户支行名称" min-width="120" />
|
||||
<el-table-column prop="createTime" label="提交时间" min-width="100" />
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="ops">
|
||||
<a class="link-text" @click="audit(row, 'PASS')">通过</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="audit(row, 'REFUSE')">拒绝</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -61,115 +73,35 @@ export default {
|
||||
name: "distributionApply",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
loading: true,
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
startDate: "", // 起始时间
|
||||
endDate: "", // 终止时间
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "会员名称",
|
||||
key: "memberName",
|
||||
minWidth: 100,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
key: "name",
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
title: "身份证号",
|
||||
key: "idNumber",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户行名称",
|
||||
key: "settlementBankAccountName",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户账号",
|
||||
key: "settlementBankAccountNum",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户支行名称",
|
||||
key: "settlementBankBranchName",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "提交时间",
|
||||
key: "createTime",
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
return h("div", { class: "ops" }, [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
on: {
|
||||
click: () => {
|
||||
this.audit(params.row, "PASS");
|
||||
},
|
||||
},
|
||||
},
|
||||
"通过"
|
||||
),
|
||||
h("span", {}, "|"),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
on: {
|
||||
click: () => {
|
||||
this.audit(params.row, "REFUSE");
|
||||
},
|
||||
},
|
||||
},
|
||||
"拒绝"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
changePage() {
|
||||
this.getDataList();
|
||||
},
|
||||
changePageSize() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
this.searchForm.distributionStatus = "APPLY";
|
||||
@@ -180,10 +112,7 @@ export default {
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
//审核
|
||||
audit(v, status) {
|
||||
let test = "拒绝";
|
||||
if (status == "PASS") {
|
||||
@@ -194,7 +123,6 @@ export default {
|
||||
};
|
||||
this.$Modal.confirm({
|
||||
title: "确认" + test,
|
||||
// 记得确认修改此处
|
||||
content: "您确认要" + test + " " + v.memberName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
|
||||
@@ -1,270 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card>
|
||||
<Form ref="searchForm" @keydown.enter.native.prevent="handleSearch" :model="searchForm" class="search-form">
|
||||
<Form-item label="会员名称" class="flex" prop="memberName">
|
||||
<Input
|
||||
type="text" placeholder="请输入会员名称" v-model="searchForm.memberName" clearable
|
||||
style="width: 240px"></Input>
|
||||
</Form-item>
|
||||
<Form-item label="编号" class="flex">
|
||||
<Input
|
||||
type="text" placeholder="请输入编号" v-model="searchForm.sn" clearable
|
||||
style="width: 240px"></Input>
|
||||
</Form-item>
|
||||
<Form-item label="状态"
|
||||
style="width: 240px">
|
||||
<Select v-model="searchForm.distributionCashStatus" clearable style="width: 150px">
|
||||
<Option v-for="item in cashStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item>
|
||||
<Button @click="handleSearch" type="primary">搜索</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
|
||||
<Row type="flex" justify="end" class="page padding-row">
|
||||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20,50,100]" size="small" show-total show-elevator show-sizer></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
|
||||
<Form ref="form" :model="form" :label-width="100" >
|
||||
<FormItem label="编号">
|
||||
<Input disabled v-model="form.sn" clearable style="width:100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="会员名称">
|
||||
<Input disabled v-model="form.distributionName" clearable style="width:100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="金额">
|
||||
<Input disabled v-model="form.price" clearable style="width:100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="是否通过" prop="result" v-if="handleStatus =='edit'">
|
||||
<RadioGroup v-model="result" type="button" button-style="solid">
|
||||
<Radio label="VIA_AUDITING">通过</Radio>
|
||||
<Radio label="FAIL_AUDITING">拒绝</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer" v-if="handleStatus == 'edit'">
|
||||
<Button type="text" @click="modalVisible=false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
class="search-form"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<el-form-item label="会员名称" class="flex" prop="memberName">
|
||||
<el-input
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="编号" class="flex">
|
||||
<el-input
|
||||
v-model="searchForm.sn"
|
||||
placeholder="请输入编号"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" style="width: 240px">
|
||||
<el-select v-model="searchForm.distributionCashStatus" clearable style="width: 150px">
|
||||
<el-option
|
||||
v-for="item in cashStatusList"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
class="mt_10"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="sn" label="编号" min-width="200" />
|
||||
<el-table-column prop="distributionName" label="会员名称" min-width="120" />
|
||||
<el-table-column label="申请金额" min-width="90">
|
||||
<template #default="{ row }">
|
||||
<priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="申请时间" min-width="130" />
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column prop="idNumber" label="身份证号" min-width="120" />
|
||||
<el-table-column prop="settlementBankAccountName" label="结算银行开户行名称" min-width="120" />
|
||||
<el-table-column prop="settlementBankAccountNum" label="结算银行开户账号" min-width="120" />
|
||||
<el-table-column prop="settlementBankBranchName" label="结算银行开户支行名称" min-width="120" />
|
||||
<el-table-column prop="updateTime" label="处理时间" min-width="130" />
|
||||
<el-table-column label="状态" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row">
|
||||
<span v-if="row.distributionCashStatus == 'APPLY'">待处理</span>
|
||||
<span v-else-if="row.distributionCashStatus == 'VIA_AUDITING'">通过</span>
|
||||
<span v-else-if="row.distributionCashStatus == 'FAIL_AUDITING'">审核拒绝</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="130" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="ops">
|
||||
<a class="link-text" v-if="row.distributionCashStatus != 'APPLY'" @click="view(row)">查看</a>
|
||||
<a class="link-text" v-else @click="edit(row)">审核</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10 page padding-row" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="modalVisible"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="100px">
|
||||
<el-form-item label="编号">
|
||||
<el-input v-model="form.sn" disabled clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会员名称">
|
||||
<el-input v-model="form.distributionName" disabled clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额">
|
||||
<el-input v-model="form.price" disabled clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="handleStatus == 'edit'" label="是否通过" prop="result">
|
||||
<el-radio-group v-model="result">
|
||||
<el-radio-button value="VIA_AUDITING">通过</el-radio-button>
|
||||
<el-radio-button value="FAIL_AUDITING">拒绝</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-if="handleStatus == 'edit'" #footer>
|
||||
<el-button @click="modalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
auditDistributionCash,
|
||||
getDistributionCash
|
||||
} from "@/api/distribution";
|
||||
import { cashStatusList } from './dataJson';
|
||||
import { auditDistributionCash, getDistributionCash } from "@/api/distribution";
|
||||
import { cashStatusList } from "./dataJson";
|
||||
|
||||
export default {
|
||||
name: "distributionCash",
|
||||
data() {
|
||||
return {
|
||||
cashStatusList, // 状态列表
|
||||
loading: true, // 表单加载状态
|
||||
modalVisible: false, // 添加或编辑显示
|
||||
modalTitle: "", // 添加或编辑标题
|
||||
result: 'FAIL_AUDITING', // 是否通过
|
||||
searchForm: { // 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
cashStatusList,
|
||||
loading: true,
|
||||
modalVisible: false,
|
||||
modalTitle: "",
|
||||
result: "FAIL_AUDITING",
|
||||
searchForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
},
|
||||
handleStatus:'edit',// 判断是编辑还是查看
|
||||
form: { // 添加或编辑表单对象初始化数据
|
||||
handleStatus: "edit",
|
||||
form: {
|
||||
sn: "",
|
||||
memberName: "",
|
||||
price: "",
|
||||
},
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
columns: [
|
||||
{
|
||||
title: "编号",
|
||||
key: "sn",
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
title: "会员名称",
|
||||
key: "distributionName",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
title: "申请金额",
|
||||
key: "price",
|
||||
minWidth: 90,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "申请时间",
|
||||
key: "createTime",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
key: "name",
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
title: "身份证号",
|
||||
key: "idNumber",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户行名称",
|
||||
key: "settlementBankAccountName",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户账号",
|
||||
key: "settlementBankAccountNum",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "结算银行开户支行名称",
|
||||
key: "settlementBankBranchName",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: "处理时间",
|
||||
key: "updateTime",
|
||||
minWidth: 130
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "distributionCashStatus",
|
||||
minWidth: 100,
|
||||
render: (h, params) => {
|
||||
if (params.row.distributionCashStatus == 'APPLY') {
|
||||
return h("div", "待处理");
|
||||
}
|
||||
if (params.row.distributionCashStatus == 'VIA_AUDITING') {
|
||||
return h("div", "通过");
|
||||
}
|
||||
if (params.row.distributionCashStatus == 'FAIL_AUDITING') {
|
||||
return h("div", "审核拒绝");
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 130,
|
||||
render: (h, params) => {
|
||||
if (params.row.distributionCashStatus != 'APPLY') {
|
||||
return h("div", { class: "ops" }, [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
on: {
|
||||
click: () => {
|
||||
this.view(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"查看"
|
||||
),
|
||||
]);
|
||||
} else {
|
||||
return h("div", { class: "ops" }, [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"审核"
|
||||
),
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0 // 表单数据总数
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
changePage() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
changePageSize() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
// 带多条件搜索参数获取表单数据 请自行修改接口
|
||||
getDistributionCash(this.searchForm).then(res => {
|
||||
getDistributionCash(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
// 通过还是拒绝申请
|
||||
handleSubmit() {
|
||||
let result = "拒绝"
|
||||
if(this.result == 'VIA_AUDITING'){
|
||||
result = "通过"
|
||||
let result = "拒绝";
|
||||
if (this.result == "VIA_AUDITING") {
|
||||
result = "通过";
|
||||
}
|
||||
this.$refs.form.validate(valid => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认审核",
|
||||
content: "您确认要审核"+result+"么?",
|
||||
content: "您确认要审核" + result + "么?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
auditDistributionCash(this.form.id,{result:this.result}).then(res => {
|
||||
if (res.success) {
|
||||
this.$Modal.remove();
|
||||
this.$Message.success("审核成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
} else {
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
auditDistributionCash(this.form.id, { result: this.result }).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Modal.remove();
|
||||
this.$Message.success("审核成功");
|
||||
this.getDataList();
|
||||
this.modalVisible = false;
|
||||
} else {
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 弹出modal 审核
|
||||
edit(v) {
|
||||
this.modalTitle = "审核";
|
||||
this.handleStatus = 'edit';
|
||||
this.$refs.form.resetFields();
|
||||
// 转换null为""
|
||||
this.handleStatus = "edit";
|
||||
this.$refs.form?.resetFields();
|
||||
for (let attr in v) {
|
||||
if (v[attr] === null) {
|
||||
v[attr] = "";
|
||||
@@ -273,12 +222,10 @@ export default {
|
||||
this.form = JSON.parse(JSON.stringify(v));
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 弹出modal 查看
|
||||
view(v){
|
||||
view(v) {
|
||||
this.modalTitle = "查看";
|
||||
this.handleStatus = 'view';
|
||||
this.$refs.form.resetFields();
|
||||
// 转换null为""
|
||||
this.handleStatus = "view";
|
||||
this.$refs.form?.resetFields();
|
||||
for (let attr in v) {
|
||||
if (v[attr] === null) {
|
||||
v[attr] = "";
|
||||
@@ -288,12 +235,11 @@ export default {
|
||||
let data = JSON.parse(str);
|
||||
this.form = data;
|
||||
this.modalVisible = true;
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,214 +1,182 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card>
|
||||
<Form @keydown.enter.native.prevent="handleSearch" ref="searchForm" :model="searchForm" inline :label-width="70"
|
||||
class="search-form">
|
||||
<Form-item label="商品名称" prop="goodsName">
|
||||
<Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px" />
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card>
|
||||
<Row class="operation" style="margin:10px 0;">
|
||||
<Button @click="delAll" type="primary">批量下架</Button>
|
||||
</Row>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
|
||||
@on-selection-change="changeSelect">
|
||||
<template slot="goodsName" slot-scope="{row}">
|
||||
<div>
|
||||
<div class="div-zoom">
|
||||
<a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
|
||||
</div>
|
||||
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
|
||||
<div slot="content">
|
||||
<vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
|
||||
:size="150"></vue-qr>
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
label-width="70px"
|
||||
class="search-form"
|
||||
@keyup.enter.prevent="handleSearch"
|
||||
>
|
||||
<el-form-item label="商品名称" prop="goodsName">
|
||||
<el-input
|
||||
v-model="searchForm.goodsName"
|
||||
placeholder="请输入商品名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<div class="operation" style="margin: 10px 0">
|
||||
<el-button type="primary" @click="delAll">批量下架</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
class="mt_10"
|
||||
style="width: 100%"
|
||||
@selection-change="changeSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" fixed="left" />
|
||||
<el-table-column label="商品图片" width="120" align="center" fixed="left">
|
||||
<template #default="{ row }">
|
||||
<img
|
||||
v-if="row"
|
||||
:src="row.thumbnail || ''"
|
||||
alt="商品图"
|
||||
style="cursor: pointer; width: 80px; height: 60px; margin: 10px 0; object-fit: contain"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品名称" min-width="220" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<template v-if="row">
|
||||
<div class="div-zoom">
|
||||
<a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
||||
</div>
|
||||
<img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
|
||||
</Poptip>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
|
||||
@on-page-size-change="changePageSize" :page-size-opts="[20,50,100]" size="small" show-total show-elevator
|
||||
show-sizer></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
|
||||
<template #reference>
|
||||
<img
|
||||
src="../../assets/qrcode.svg"
|
||||
class="hover-pointer"
|
||||
width="20"
|
||||
height="20"
|
||||
alt="qrcode"
|
||||
/>
|
||||
</template>
|
||||
<vue-qr
|
||||
:text="wapLinkTo(row.goodsId, row.skuId)"
|
||||
:margin="0"
|
||||
color-dark="#000"
|
||||
color-light="#fff"
|
||||
:size="150"
|
||||
/>
|
||||
</el-popover>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品价格" min-width="110">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row" :style="{ color: $mainColor }">{{ $filters.unitPrice(row.price, "￥") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="quantity" label="库存" min-width="80" />
|
||||
<el-table-column prop="createTime" label="添加时间" min-width="160" />
|
||||
<el-table-column prop="storeName" label="店铺名称" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="佣金金额" min-width="110">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row" :style="{ color: $mainColor }">{{ $filters.unitPrice(row.commission, "￥") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="100" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a v-if="row" class="link-text" @click="remove(row)">下架</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { delDistributionGoods, getDistributionGoods } from "@/api/distribution";
|
||||
import vueQr from "vue-qr";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"vue-qr": vueQr,
|
||||
},
|
||||
name: "distributionGoods",
|
||||
components: { vueQr },
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
loading: true,
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
},
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "商品图片",
|
||||
fixed: "left",
|
||||
key: "thumbnail",
|
||||
width: 120,
|
||||
align: "center",
|
||||
render: (h, params) => {
|
||||
return h("img", {
|
||||
attrs: {
|
||||
src: params.row.thumbnail || '',
|
||||
alt: "加载图片失败",
|
||||
},
|
||||
style: {
|
||||
cursor: "pointer",
|
||||
width: "80px",
|
||||
height: "60px",
|
||||
margin: "10px 0",
|
||||
"object-fit": "contain",
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
slot: "goodsName",
|
||||
minWidth: 200,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "商品价格",
|
||||
key: "price",
|
||||
minWidth: 100,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
title: "库存",
|
||||
key: "quantity",
|
||||
minWidth: 80,
|
||||
},
|
||||
{
|
||||
title: "添加时间",
|
||||
key: "createTime",
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
title: "店铺名称",
|
||||
key: "storeName",
|
||||
minWidth: 100,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "佣金金额",
|
||||
key: "commission",
|
||||
minWidth: 100,
|
||||
sortable: false,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props:{value:params.row.commission,color:this.$mainColor}} );
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
minWidth: 100,
|
||||
render: (h, params) => {
|
||||
return h("div", { class: "ops" }, [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"下架"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
// 清除选中状态
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
this.$refs.table?.clearSelection();
|
||||
},
|
||||
// 选中后赋值
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
getDistributionGoods(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
getDistributionGoods(this.searchForm)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 下架商品
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认下架",
|
||||
content: "您确认要下架么?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 下架
|
||||
delDistributionGoods(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
@@ -219,7 +187,6 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
// 批量下架
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要下架的数据");
|
||||
@@ -230,11 +197,7 @@ export default {
|
||||
content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = [];
|
||||
this.selectList.forEach((item) => {
|
||||
ids.push(item.id);
|
||||
});
|
||||
// 批量下架
|
||||
const ids = this.selectList.map((item) => item.id);
|
||||
delDistributionGoods(ids.toString()).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
@@ -252,17 +215,24 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ops a {
|
||||
color: #2d8cf0;
|
||||
.link-text {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ops span {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: #dcdee2;
|
||||
.div-zoom {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.hover-pointer {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.mt_10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,258 +1,281 @@
|
||||
<template>
|
||||
<div>
|
||||
<Card>
|
||||
<Form ref="searchForm" @keydown.enter.native="handleSearch" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="订单编号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
<el-card>
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
label-width="70px"
|
||||
class="search-form"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<el-form-item label="订单编号" prop="orderSn">
|
||||
<el-input
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="分销商" prop="distributionName">
|
||||
<Input
|
||||
type="text"
|
||||
</el-form-item>
|
||||
<el-form-item label="分销商" prop="distributionName">
|
||||
<el-input
|
||||
v-model="searchForm.distributionName"
|
||||
placeholder="请输入分销商名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="店铺名称">
|
||||
<Select v-model="searchForm.storeId" placeholder="请选择" @on-query-change="searchChange" filterable
|
||||
clearable style="width: 240px">
|
||||
<Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="订单时间">
|
||||
<DatePicker type="daterange" v-model="timeRange" format="yyyy-MM-dd" placeholder="选择时间"
|
||||
style="width: 240px"></DatePicker>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
|
||||
<template slot-scope="{row}" slot="goodsMsg">
|
||||
<div class="goods-msg">
|
||||
<img :src="row.image" width="60" height="60" alt="">
|
||||
<div>
|
||||
<div class="div-zoom">
|
||||
<a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
|
||||
</div>
|
||||
<div style="color:#999;font-size:10px">数量：x{{row.num}}</div>
|
||||
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
|
||||
<div slot="content">
|
||||
<vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺名称">
|
||||
<el-select
|
||||
v-model="searchForm.storeId"
|
||||
placeholder="请选择"
|
||||
filterable
|
||||
remote
|
||||
:remote-method="searchChange"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in shopList"
|
||||
:key="item.id"
|
||||
:label="item.storeName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单时间">
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
placeholder="选择时间"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
class="mt_10"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
prop="orderSn"
|
||||
label="订单编号"
|
||||
min-width="180"
|
||||
fixed="left"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="商品信息" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="goods-msg">
|
||||
<img :src="row.image" width="60" height="60" alt="" />
|
||||
<div>
|
||||
<div class="div-zoom">
|
||||
<a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
||||
</div>
|
||||
<img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
|
||||
</Poptip>
|
||||
<div style="color: #999; font-size: 10px">数量：x{{ row.num }}</div>
|
||||
<el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
|
||||
<template #reference>
|
||||
<img
|
||||
src="../../assets/qrcode.svg"
|
||||
class="hover-pointer"
|
||||
width="20"
|
||||
height="20"
|
||||
alt="qrcode"
|
||||
/>
|
||||
</template>
|
||||
<vue-qr
|
||||
:text="wapLinkTo(row.goodsId, row.skuId)"
|
||||
:margin="0"
|
||||
color-dark="#000"
|
||||
color-light="#fff"
|
||||
:size="150"
|
||||
/>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot-scope="{row}" slot="distributionOrderStatus">
|
||||
<Tag :color="filterStatusColor(row.distributionOrderStatus)">{{filterStatus(row.distributionOrderStatus)}}</Tag>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
|
||||
@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[20,50,100]"
|
||||
size="small" show-total show-elevator show-sizer></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="distributionName" label="分销商" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column label="状态" min-width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row" :type="filterStatusTagType(row.distributionOrderStatus)">
|
||||
{{ filterStatus(row.distributionOrderStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="佣金金额" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row" :style="{ color: $mainColor }">
|
||||
{{ $filters.unitPrice(row.rebate, "￥") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="160" fixed="right" />
|
||||
</el-table>
|
||||
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDistributionOrder
|
||||
} from "@/api/distribution";
|
||||
import {orderStatusList} from './dataJson'
|
||||
import {getShopListData} from '@/api/shops'
|
||||
import vueQr from 'vue-qr'
|
||||
import { getDistributionOrder } from "@/api/distribution";
|
||||
import { orderStatusList } from "./dataJson";
|
||||
import { getShopListData } from "@/api/shops";
|
||||
import vueQr from "vue-qr";
|
||||
|
||||
export default {
|
||||
name: "distributionOrder",
|
||||
components: {
|
||||
"vue-qr":vueQr
|
||||
export default {
|
||||
name: "distributionOrder",
|
||||
components: { vueQr },
|
||||
data() {
|
||||
return {
|
||||
timeRange: [],
|
||||
orderStatusList,
|
||||
shopList: [],
|
||||
distributionId: this.$route.query.id,
|
||||
loading: true,
|
||||
searchForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
sort: "create_time",
|
||||
order: "desc",
|
||||
},
|
||||
data: [],
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(e) {
|
||||
this.distributionId = e.query.id ? e.query.id : undefined;
|
||||
this.getDataList();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timeRange: [], // 范围时间
|
||||
orderStatusList, // 订单状态列表
|
||||
shopList: [], // 店铺列表
|
||||
distributionId: this.$route.query.id, // 分销id
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: { // 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort:"create_time",
|
||||
order:"desc"
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "订单编号",
|
||||
key: "orderSn",
|
||||
minWidth: 180,
|
||||
fixed: "left",
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: '商品信息',
|
||||
slot: 'goodsMsg',
|
||||
minWidth: 150
|
||||
},
|
||||
|
||||
{
|
||||
title: "分销商",
|
||||
key: "distributionName",
|
||||
tooltip: true,
|
||||
minWidth:80,
|
||||
},
|
||||
{
|
||||
title: "店铺名称",
|
||||
key: "storeName",
|
||||
minWidth:80,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
slot: "distributionOrderStatus",
|
||||
minWidth:80,
|
||||
},
|
||||
{
|
||||
title: "佣金金额",
|
||||
key: "rebate",
|
||||
minWidth:80,
|
||||
sortable: false,
|
||||
render: (h, params) => {
|
||||
return h("priceColorScheme", {props:{value:params.row.rebate,color:this.$mainColor}} );
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
{
|
||||
fixed: "right",
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
minWidth:100,
|
||||
sortable: false,
|
||||
}
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0 // 表单数据总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getDataList();
|
||||
this.getShopList();
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
this.getShopList()
|
||||
},
|
||||
//分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.searchForm.distributionId = this.distributionId;
|
||||
this.loading = true;
|
||||
if (this.timeRange && this.timeRange[0]) {
|
||||
let startTime = this.timeRange[0]
|
||||
let endTime = this.timeRange[1]
|
||||
this.searchForm.startTime = this.$options.filters.unixToDate(startTime / 1000)
|
||||
this.searchForm.endTime = this.$options.filters.unixToDate(endTime / 1000)
|
||||
}
|
||||
// 带多条件搜索参数获取表单数据 请自行修改接口
|
||||
getDistributionOrder(this.searchForm).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
changePage() {
|
||||
this.getDataList();
|
||||
},
|
||||
changePageSize() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 20;
|
||||
this.getDataList();
|
||||
},
|
||||
getDataList() {
|
||||
this.searchForm.distributionId = this.distributionId;
|
||||
this.loading = true;
|
||||
if (this.timeRange && this.timeRange[0] && this.timeRange[1]) {
|
||||
const startTime = new Date(this.timeRange[0]).getTime();
|
||||
const endTime = new Date(this.timeRange[1]).getTime();
|
||||
this.searchForm.startTime = this.$filters.unixToDate(startTime / 1000);
|
||||
this.searchForm.endTime = this.$filters.unixToDate(endTime / 1000);
|
||||
} else {
|
||||
this.searchForm.startTime = null;
|
||||
this.searchForm.endTime = null;
|
||||
}
|
||||
getDistributionOrder(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
},
|
||||
getShopList(val) { // 获取店铺列表 搜索用
|
||||
const params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
storeName: ''
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
if (val) {
|
||||
params.storeName = val;
|
||||
} else {
|
||||
params.storeName = ''
|
||||
}
|
||||
|
||||
getShopListData(params).then(res => {
|
||||
this.shopList = res.result.records
|
||||
})
|
||||
},
|
||||
searchChange(val) { // 店铺搜索，键盘点击回调
|
||||
this.getShopList(val)
|
||||
},
|
||||
filterStatus (status) { // 过滤订单状态
|
||||
const arr = [
|
||||
{status: 'NO_COMPLETED', title: '未完成'},
|
||||
{status: 'COMPLETE', title: '完成'},
|
||||
{status: 'REFUND', title: '退款'},
|
||||
]
|
||||
for (let i=0;i<arr.length;i++) {
|
||||
if (arr[i].status === status) {
|
||||
return arr[i].title;
|
||||
}
|
||||
}
|
||||
return '未完成'; // 默认返回未完成
|
||||
},
|
||||
filterStatusColor (status) { // 状态tag标签颜色
|
||||
const arr = [
|
||||
{status: 'NO_COMPLETED', color: 'orange'},
|
||||
{status: 'COMPLETE', color: 'green'},
|
||||
{status: 'REFUND', color: 'red'},
|
||||
]
|
||||
for (let i=0;i<arr.length;i++) {
|
||||
if (arr[i].status === status) {
|
||||
return arr[i].color;
|
||||
}
|
||||
}
|
||||
return 'orange'; // 默认返回橙色
|
||||
}
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
getShopList(val) {
|
||||
const params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
storeName: val || "",
|
||||
};
|
||||
getShopListData(params).then((res) => {
|
||||
this.shopList = res.result.records;
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
$route(e) { // 监听路由，参数变化调取接口
|
||||
this.distributionId = e.query.id ? e.query.id : undefined;
|
||||
this.getDataList();
|
||||
searchChange(val) {
|
||||
this.getShopList(val);
|
||||
},
|
||||
filterStatus(status) {
|
||||
const arr = [
|
||||
{ status: "NO_COMPLETED", title: "未完成" },
|
||||
{ status: "COMPLETE", title: "完成" },
|
||||
{ status: "REFUND", title: "退款" },
|
||||
];
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i].status === status) {
|
||||
return arr[i].title;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
return "未完成";
|
||||
},
|
||||
filterStatusTagType(status) {
|
||||
const arr = [
|
||||
{ status: "NO_COMPLETED", type: "warning" },
|
||||
{ status: "COMPLETE", type: "success" },
|
||||
{ status: "REFUND", type: "danger" },
|
||||
];
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i].status === status) {
|
||||
return arr[i].type;
|
||||
}
|
||||
}
|
||||
return "warning";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.goods-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>div{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.goods-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hover-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mt_10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,17 @@
|
||||
<template>
|
||||
<div style="background-color: #fff;">
|
||||
|
||||
<Form ref="form" :model="form" :rules="formRule" :label-width="120" style="padding: 10px;">
|
||||
|
||||
<Divider orientation="left">分销设置</Divider>
|
||||
<FormItem label="是否开启分销" prop="isOpen">
|
||||
<i-switch size="large" v-model="form.isOpen" :true-value="true" :false-value="false">
|
||||
<span slot="open">开启</span>
|
||||
<span slot="close">关闭</span>
|
||||
</i-switch>
|
||||
</FormItem>
|
||||
<FormItem label="分销关系绑定天数" prop="distributionDay">
|
||||
<InputNumber :min="1" :max="365" style="width:100px;" v-model="form.distributionDay"></InputNumber>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="submit">保存</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div style="background-color: #fff">
|
||||
<el-form ref="form" :model="form" :rules="formRule" label-width="140px" style="padding: 10px">
|
||||
<el-divider content-position="left">分销设置</el-divider>
|
||||
<el-form-item label="是否开启分销" prop="isOpen">
|
||||
<el-switch v-model="form.isOpen" active-text="开启" inactive-text="关闭" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分销关系绑定天数" prop="distributionDay">
|
||||
<el-input-number v-model="form.distributionDay" :min="1" :max="365" style="width: 120px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -28,26 +23,22 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
// 添加或编辑表单对象初始化数据
|
||||
isOpen: true,
|
||||
distributionDay: 0, //分销关系绑定天数
|
||||
distributionDay: 1,
|
||||
},
|
||||
formRule: {
|
||||
isOpen: [
|
||||
regular.REQUIRED
|
||||
],
|
||||
distributionDay: [
|
||||
regular.REQUIRED
|
||||
],
|
||||
}
|
||||
isOpen: [regular.REQUIRED],
|
||||
distributionDay: [regular.REQUIRED],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取分销设置数据
|
||||
getDataList() {
|
||||
getSetting("DISTRIBUTION_SETTING").then((res) => {
|
||||
if (res.success) {
|
||||
@@ -55,20 +46,17 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提交api
|
||||
submit() {
|
||||
setSetting("DISTRIBUTION_SETTING", this.form).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getDataList();
|
||||
}
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (!valid) return;
|
||||
setSetting("DISTRIBUTION_SETTING", this.form).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getDataList();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user