fix: 挂账管理更新，邀请列表更新，店铺配置更新
This commit is contained in:
parent
34068cf8dd
commit
89fe9b7639
|
|
@ -0,0 +1,47 @@
|
|||
import request from "@/utils/request";
|
||||
import { Account_BaseUrl } from "@/api/config";
|
||||
const baseURL = Account_BaseUrl + "/admin/shopMsgPush";
|
||||
const Api = {
|
||||
// 订阅二维码
|
||||
code(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}/code`,
|
||||
method: "get",
|
||||
params: params,
|
||||
});
|
||||
},
|
||||
// 店铺推送状态获取
|
||||
shopState(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}/shopState`,
|
||||
method: "get",
|
||||
params: params,
|
||||
});
|
||||
},
|
||||
//店铺推送状态修改
|
||||
shopStateUpdate(data: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}/shopState`,
|
||||
method: "put",
|
||||
data
|
||||
});
|
||||
},
|
||||
//订阅用户列表
|
||||
getUserList(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}`,
|
||||
method: "get",
|
||||
params: params,
|
||||
});
|
||||
},
|
||||
//订阅解绑
|
||||
shopStateDel(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}`,
|
||||
method: "delete",
|
||||
params
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default Api;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import request from "@/utils/request";
|
||||
import { Account_BaseUrl } from "@/api/config";
|
||||
const baseURL = Account_BaseUrl + "/admin/shopShare";
|
||||
const Api = {
|
||||
// 获取分享奖励配置
|
||||
get(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}`,
|
||||
method: "get",
|
||||
params: params,
|
||||
});
|
||||
},
|
||||
update(data: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}`,
|
||||
method: "put",
|
||||
data
|
||||
});
|
||||
},
|
||||
// 分享奖励记录
|
||||
getRecord(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}/record`,
|
||||
method: "get",
|
||||
params: params,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default Api;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import request from "@/utils/request";
|
||||
import { Order_BaseUrl } from "@/api/config";
|
||||
const baseURL = Order_BaseUrl + "/admin/order/credit/buyerOrder";
|
||||
// 挂账账单
|
||||
const Api = {
|
||||
page(params: any) {
|
||||
return request<any, any>({
|
||||
url: `${baseURL}/page`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
// 付款
|
||||
pay(data: any) {
|
||||
return request<any, any>({
|
||||
url: `${baseURL}/pay`,
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
},
|
||||
// 统计
|
||||
summary(params: any) {
|
||||
return request<any, any>({
|
||||
url: `${baseURL}/summary`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default Api;
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import request from "@/utils/request";
|
||||
import { Order_BaseUrl } from "@/api/config";
|
||||
const baseURL = Order_BaseUrl + "/admin/order/credit/paymentRecord";
|
||||
// 挂账账单
|
||||
const Api = {
|
||||
page(params: any) {
|
||||
return request<any, any>({
|
||||
url: `${baseURL}/page`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default Api;
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import request from "@/utils/request";
|
||||
import { Product_BaseUrl } from "@/api/config";
|
||||
const baseURL = Product_BaseUrl + "/admin/product/cons-group";
|
||||
const baseURL = Product_BaseUrl + "/admin/product/consGroup";
|
||||
|
||||
const Api = {
|
||||
/** 分页*/
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const Api = {
|
|||
// 库存盘点记录
|
||||
checkRecord(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}/check-record`,
|
||||
url: `${baseURL}/checkRecord`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,121 +1,27 @@
|
|||
import request from "@/utils/request";
|
||||
|
||||
const LOG_BASE_URL = "/api/v1/logs";
|
||||
|
||||
const LogAPI = {
|
||||
/**
|
||||
* 获取日志分页列表
|
||||
*
|
||||
* @param queryParams 查询参数
|
||||
*/
|
||||
getPage(queryParams: LogPageQuery) {
|
||||
return request<any, PageResult<LogPageVO[]>>({
|
||||
url: `${LOG_BASE_URL}/page`,
|
||||
import { System_BaseUrl } from "@/api/config";
|
||||
const baseURL = System_BaseUrl + "/admin/log";
|
||||
// 日志
|
||||
const Api = {
|
||||
getList(params: any) {
|
||||
return request<any>({
|
||||
url: `${baseURL}`,
|
||||
method: "get",
|
||||
params: queryParams,
|
||||
params
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取访问趋势
|
||||
*
|
||||
* @param queryParams
|
||||
* @returns
|
||||
*/
|
||||
getVisitTrend(queryParams: VisitTrendQuery) {
|
||||
return request<any, VisitTrendVO>({
|
||||
url: `${LOG_BASE_URL}/visit-trend`,
|
||||
method: "get",
|
||||
params: queryParams,
|
||||
// 清空
|
||||
|
||||
clear() {
|
||||
return request<any>({
|
||||
url: `${baseURL}/`,
|
||||
method: "delete",
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取访问统计
|
||||
*
|
||||
* @param queryParams
|
||||
* @returns
|
||||
*/
|
||||
getVisitStats() {
|
||||
return request<any, VisitStatsVO>({
|
||||
url: `${LOG_BASE_URL}/visit-stats`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default LogAPI;
|
||||
|
||||
/**
|
||||
* 日志分页查询对象
|
||||
*/
|
||||
export interface LogPageQuery extends PageQuery {
|
||||
/** 搜索关键字 */
|
||||
keywords?: string;
|
||||
/** 操作时间 */
|
||||
createTime?: [string, string];
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统日志分页VO
|
||||
*/
|
||||
export interface LogPageVO {
|
||||
/** 主键 */
|
||||
id: number;
|
||||
/** 日志模块 */
|
||||
module: string;
|
||||
/** 日志内容 */
|
||||
content: string;
|
||||
/** 请求路径 */
|
||||
requestUri: string;
|
||||
/** 请求方法 */
|
||||
method: string;
|
||||
/** IP 地址 */
|
||||
ip: string;
|
||||
/** 地区 */
|
||||
region: string;
|
||||
/** 浏览器 */
|
||||
browser: string;
|
||||
/** 终端系统 */
|
||||
os: string;
|
||||
/** 执行时间(毫秒) */
|
||||
executionTime: number;
|
||||
/** 操作人 */
|
||||
operator: string;
|
||||
}
|
||||
|
||||
/** 访问趋势视图对象 */
|
||||
export interface VisitTrendVO {
|
||||
/** 日期列表 */
|
||||
dates: string[];
|
||||
/** 浏览量(PV) */
|
||||
pvList: number[];
|
||||
/** 访客数(UV) */
|
||||
uvList: number[];
|
||||
/** IP数 */
|
||||
ipList: number[];
|
||||
}
|
||||
|
||||
/** 访问趋势查询参数 */
|
||||
export interface VisitTrendQuery {
|
||||
/** 开始日期 */
|
||||
startDate: string;
|
||||
/** 结束日期 */
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
/** 访问统计 */
|
||||
export interface VisitStatsVO {
|
||||
/** 今日访客数(UV) */
|
||||
todayUvCount: number;
|
||||
/** 总访客数 */
|
||||
totalUvCount: number;
|
||||
/** 访客数同比增长率（相对于昨天同一时间段的增长率） */
|
||||
uvGrowthRate: number;
|
||||
/** 今日浏览量(PV) */
|
||||
todayPvCount: number;
|
||||
/** 总浏览量 */
|
||||
totalPvCount: number;
|
||||
/** 同比增长率（相对于昨天同一时间段的增长率） */
|
||||
pvGrowthRate: number;
|
||||
}
|
||||
export default Api;
|
||||
|
|
|
|||
|
|
@ -71,6 +71,18 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
title: "挂账管理",
|
||||
affix: false,
|
||||
keepAlive: true,
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "credit-detail",
|
||||
name: "creditDetail",
|
||||
component: () => import("@/views/data/credit/detail.vue"),
|
||||
meta: {
|
||||
title: "挂账明细",
|
||||
affix: false,
|
||||
keepAlive: true,
|
||||
hidden: true
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -142,7 +154,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
},
|
||||
{
|
||||
path: "log",
|
||||
component: () => import("@/views/shop/log.vue"),
|
||||
component: () => import("@/views/shop/log/index.vue"),
|
||||
name: "shopLog",
|
||||
meta: {
|
||||
title: "操作日志",
|
||||
|
|
@ -386,7 +398,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
},
|
||||
{
|
||||
path: "invite",
|
||||
component: () => import("@/views/application/marketing/invite.vue"),
|
||||
component: () => import("@/views/application/marketing/share/index.vue"),
|
||||
name: "invite",
|
||||
meta: {
|
||||
title: "邀请裂变",
|
||||
|
|
@ -578,7 +590,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
component: () => import("@/views/inventory/operation_in/index.vue"),
|
||||
name: "operation_in",
|
||||
meta: {
|
||||
title: "入库",
|
||||
title: "出入库",
|
||||
affix: false,
|
||||
hidden: true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
<!-- 添加优惠券 -->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="type == 1 ? '编辑优惠券' : '添加优惠券'"
|
||||
v-model="dialogVisible"
|
||||
@close="reset"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="券名称" prop="couponId">
|
||||
<el-select v-model="form.couponId" placeholder="请选择优惠券">
|
||||
<el-option
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
v-for="item in coupons"
|
||||
:key="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量">
|
||||
<el-input-number v-model="form.couponNum" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
coupons: [],
|
||||
type: 1,
|
||||
form: {
|
||||
couponId: "",
|
||||
couponName: "",
|
||||
couponNum: "",
|
||||
},
|
||||
resetForm: {},
|
||||
rules: {
|
||||
couponId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择优惠券",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form };
|
||||
this.getTbShopCoupon();
|
||||
},
|
||||
methods: {
|
||||
// 提交
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.form.couponName = this.coupons.find((item) => item.id == this.form.couponId).title;
|
||||
this.$emit("success", { ...this.form });
|
||||
this.close();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取优惠券列表
|
||||
async getTbShopCoupon() {
|
||||
try {
|
||||
const res = await getTbShopCoupon({
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
type: 1,
|
||||
page: 1,
|
||||
size: 100,
|
||||
});
|
||||
this.coupons = res.content;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.form = { ...this.resetForm };
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
show(row) {
|
||||
if (row && row.couponId) {
|
||||
this.type = 1;
|
||||
this.form = { ...row };
|
||||
} else {
|
||||
this.type = 2;
|
||||
}
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-form :model="query" inline label-position="left">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
placeholder="邀请人名称/被邀请人/昵称/手机号"
|
||||
v-model="query.search"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="query.status" placeholder="状态" style="width: 140px">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in statusList"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>
|
||||
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
|
||||
value-format="yyyy-MM-dd HH:mm:ss">
|
||||
</el-date-picker>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="queryHandle">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="邀请人" prop="invitedName">
|
||||
<template v-slot="scope">
|
||||
<div class="goods_info">
|
||||
<el-image
|
||||
:src="scope.row.invitedHeadImg"
|
||||
style="width: 40px; height: 40px; flex-shrink: 0"
|
||||
:preview-src-list="avatarUrlList1"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-folder-delete"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<span>{{ scope.row.invitedName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="被邀请人" prop="beInvitedName">
|
||||
<template v-slot="scope">
|
||||
<div class="goods_info">
|
||||
<el-image
|
||||
:src="scope.row.beInvitedHeadImg"
|
||||
style="width: 40px; height: 40px; flex-shrink: 0"
|
||||
:preview-src-list="avatarUrlList2"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-folder-delete"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<span>{{ scope.row.beInvitedName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="邀请状态" prop="status">
|
||||
<template v-slot="scope">
|
||||
<template v-if="scope.row.method == 'get' && scope.row.status == 2">
|
||||
<el-tag type="success" disable-transitions>已邀请成功</el-tag>
|
||||
</template>
|
||||
<template v-else-if="scope.row.method == 'use' && scope.row.status == 3">
|
||||
<el-tag type="success" disable-transitions>已邀请成功</el-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag type="danger" disable-transitions>未邀请成功</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="邀请时间" prop="createTime"></el-table-column>
|
||||
<el-table-column label="生效时间" prop="updateTime">
|
||||
<template v-slot="scope">
|
||||
<template v-if="scope.row.method == 'get'">{{ scope.row.updateTime }}</template>
|
||||
<template v-if="scope.row.method == 'use'">{{ scope.row.rewardTime }}</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
@size-change="handleSizeChange"
|
||||
:current-page="tableData.page"
|
||||
:page-size="tableData.size"
|
||||
@current-change="paginationChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const statusList = [
|
||||
{
|
||||
value: 0,
|
||||
label: "非新用户",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: "未领取",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "已领取",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "已使用",
|
||||
},
|
||||
];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusList,
|
||||
avatarUrlList1: [],
|
||||
avatarUrlList2: [],
|
||||
shareId: "",
|
||||
query: {
|
||||
search: "",
|
||||
status: "",
|
||||
},
|
||||
resetQuery: "",
|
||||
tableData: {
|
||||
list: [],
|
||||
page: 1,
|
||||
size: 30,
|
||||
loading: false,
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
statusFilter(t) {
|
||||
return statusList.find((item) => item.value == t).label;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetQuery = { ...this.query };
|
||||
this.byShopId();
|
||||
},
|
||||
methods: {
|
||||
// 查询
|
||||
queryHandle() {
|
||||
this.getTableData();
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query = { ...this.resetQuery };
|
||||
this.page = 1;
|
||||
this.size = 30;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页大小改变
|
||||
handleSizeChange(val) {
|
||||
this.tableData.size = val;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e;
|
||||
this.getTableData();
|
||||
},
|
||||
// 获取邀请设置
|
||||
async byShopId() {
|
||||
try {
|
||||
const res = await byShopId();
|
||||
this.shareId = res.id;
|
||||
this.getTableData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 获取表格数据
|
||||
async getTableData() {
|
||||
try {
|
||||
this.tableData.loading = true;
|
||||
const res = await byShare({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
search: this.query.search,
|
||||
status: this.query.status,
|
||||
shareId: this.shareId,
|
||||
});
|
||||
this.tableData.loading = false;
|
||||
this.tableData.list = res.content;
|
||||
this.tableData.total = res.totalElements;
|
||||
// 头像预览图集合
|
||||
this.avatarUrlList1 = res.content.map((item) => item.invitedHeadImg);
|
||||
this.avatarUrlList2 = res.content.map((item) => item.beInvitedHeadImg);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods_info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.collect_wrap {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
.item {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
|
||||
.icon_wrap {
|
||||
$size: 34px;
|
||||
$border: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: $size + $border;
|
||||
height: $size + $border;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--bg-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 10px;
|
||||
|
||||
.m {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,383 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
|
||||
<el-form-item label="开启">
|
||||
<el-switch v-model.trim="form.status" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<template v-if="form.status">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input
|
||||
v-model="form.title"
|
||||
style="width: 500px"
|
||||
placeholder="例如：邀请1人可得，双方各得10元优惠券"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分享封面图" prop="shareImg">
|
||||
<single-image-upload
|
||||
style="width: 80px; height: 80px"
|
||||
v-model="form.shareImg"
|
||||
></single-image-upload>
|
||||
<div class="tips u-m-l-14">建议尺寸：750*622</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="邀请顶部图" prop="invitedImg">
|
||||
<single-image-upload
|
||||
style="width: 80px; height: 80px"
|
||||
v-model="form.invitedImg"
|
||||
></single-image-upload>
|
||||
<div class="tips u-m-l-14">建议尺寸：750*622</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="被邀顶部图" prop="beInvitedImg">
|
||||
<single-image-upload
|
||||
style="width: 80px; height: 80px"
|
||||
v-model="form.beInvitedImg"
|
||||
></single-image-upload>
|
||||
<div class="tips u-m-l-14">建议尺寸：750*622</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动日期" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="createdAt"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="timeChange"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="新用户获得券" prop="newCoupons">
|
||||
<div>
|
||||
<el-button type="primary" @click="addRewardHandle('newCoupons')">添加券</el-button>
|
||||
<div class="tips">
|
||||
新用户的定义：没领过该活动券的都属于新用户，不管有没有下过单和是否第一次登录小程序。
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="form.newCoupons" border style="width: 600px">
|
||||
<el-table-column label="券ID" prop="couponId"></el-table-column>
|
||||
<el-table-column label="名称" prop="couponName"></el-table-column>
|
||||
<el-table-column label="数量" prop="couponNum"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template v-slot="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="addRewardHandle('newCoupons', 2, scope.row, scope.$index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="text" @click="form.newCoupons.splice(scope.$index, 1)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖励券" prop="invitedNum">
|
||||
<el-input
|
||||
v-model="form.invitedNum"
|
||||
style="width: 350px"
|
||||
@input="inputFilterInt($event, 'invitedNum')"
|
||||
>
|
||||
<template #prepend>用户每邀请</template>
|
||||
<template #append>人，可获得奖励券</template>
|
||||
</el-input>
|
||||
<el-button type="primary" @click="addRewardHandle('rewardCoupons')">添加券</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item prop="rewardCoupons">
|
||||
<div>
|
||||
<div class="tips">奖励券不受优惠券发放数量影响</div>
|
||||
</div>
|
||||
<el-table :data="form.rewardCoupons" border style="width: 600px">
|
||||
<el-table-column label="券ID" prop="couponId"></el-table-column>
|
||||
<el-table-column label="名称" prop="couponName"></el-table-column>
|
||||
<el-table-column label="数量" prop="couponNum"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template v-slot="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="addRewardHandle('rewardCoupons', 2, scope.row, scope.$index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="text" @click="form.rewardCoupons.splice(scope.$index, 1)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖励获得方法">
|
||||
<el-radio-group v-model="form.getMethod">
|
||||
<el-radio label="get">新用户领取获得</el-radio>
|
||||
<el-radio label="use">仅新用户使用获得会员</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<AddCoupon ref="AddCoupon" @success="addCouponSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shopShareApi from "@/api/account/shopShare";
|
||||
import AddCoupon from "./addCoupon.vue";
|
||||
export default {
|
||||
components: { AddCoupon },
|
||||
data() {
|
||||
const imgValidate1 = (rule, value, callback) => {
|
||||
if (!this.form.shareImg) {
|
||||
callback(new Error("请上传分享封面图"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const imgValidate2 = (rule, value, callback) => {
|
||||
if (!this.form.invitedImg) {
|
||||
callback(new Error("请上传邀请顶部图"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const imgValidate3 = (rule, value, callback) => {
|
||||
if (!this.form.beInvitedImg) {
|
||||
callback(new Error("请上传被邀顶部图"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const startTimeValidate = (rule, value, callback) => {
|
||||
if (!this.form.startTime) {
|
||||
callback(new Error("请选择活动日期"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const newCouponsValidate = (rule, value, callback) => {
|
||||
if (!this.form.newCoupons.length) {
|
||||
callback(new Error("请添加新用户获得券"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const rewardCouponsValidate = (rule, value, callback) => {
|
||||
if (!this.form.rewardCoupons.length) {
|
||||
callback(new Error("请添加奖励券"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
loading: false,
|
||||
createdAt: [],
|
||||
formImgKey: "",
|
||||
couponKey: "",
|
||||
tableType: "1", // 1添加 2编辑
|
||||
tableEditorIndex: 0, // 编辑时的index
|
||||
form: {
|
||||
status: 1,
|
||||
title: "",
|
||||
shareImg: "",
|
||||
invitedImg: "",
|
||||
beInvitedImg: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
newCoupons: [],
|
||||
invitedNum: "1",
|
||||
rewardCoupons: [],
|
||||
getMethod: "get",
|
||||
},
|
||||
rules: {
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标题",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
shareImg: [
|
||||
{
|
||||
required: true,
|
||||
validator: imgValidate1,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
invitedImg: [
|
||||
{
|
||||
required: true,
|
||||
validator: imgValidate2,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
beInvitedImg: [
|
||||
{
|
||||
required: true,
|
||||
validator: imgValidate3,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
startTime: [
|
||||
{
|
||||
required: true,
|
||||
validator: startTimeValidate,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
newCoupons: [
|
||||
{
|
||||
required: true,
|
||||
validator: newCouponsValidate,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
invitedNum: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入邀请人数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
rewardCoupons: [
|
||||
{
|
||||
required: true,
|
||||
validator: rewardCouponsValidate,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
},
|
||||
urlList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.byShopId();
|
||||
},
|
||||
methods: {
|
||||
// 添加完成优惠券
|
||||
addCouponSuccess(e) {
|
||||
if (this.tableType == 1) {
|
||||
this.form[this.couponKey].push({ ...e });
|
||||
} else {
|
||||
// this.form[this.couponKey][this.tableEditorIndex] = { ...e }
|
||||
this.$set(this.form[this.couponKey], this.tableEditorIndex, { ...e });
|
||||
}
|
||||
},
|
||||
// 添加奖励券
|
||||
addRewardHandle(key, type = 1, row = {}, index = 0) {
|
||||
this.tableEditorIndex = index;
|
||||
this.tableType = type;
|
||||
this.couponKey = key;
|
||||
if (key == "rewardCoupons" && !this.form.invitedNum) {
|
||||
this.$refs.form.validateField("invitedNum");
|
||||
return;
|
||||
}
|
||||
this.$refs.AddCoupon.show(row);
|
||||
},
|
||||
// 日期回调
|
||||
timeChange(e) {
|
||||
this.form.startTime = e[0];
|
||||
this.form.endTime = e[1];
|
||||
},
|
||||
// 过滤input只能输入整数
|
||||
inputFilterInt(e, key) {
|
||||
if (!e) return;
|
||||
setTimeout(() => {
|
||||
this.form[key] = e.replace(/[^\d]/g, "");
|
||||
}, 50);
|
||||
},
|
||||
// 提交
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.form.shopId = localStorage.getItem("shopId");
|
||||
await shopShareApi.update(this.form);
|
||||
this.loading = false;
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
message: `保存成功`,
|
||||
type: "success",
|
||||
});
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取店铺设置
|
||||
async byShopId() {
|
||||
try {
|
||||
const res = await shopShareApi.get();
|
||||
if (res.id) {
|
||||
this.form = res;
|
||||
this.createdAt = [res.startTime, res.endTime];
|
||||
this.urlList = [res.shareImg, res.invitedImg, res.beInvitedImg];
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.img_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
.item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f5f7fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.upload {
|
||||
border: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.del {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.del {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
transform: translateY(100%);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,448 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
|
||||
<el-form-item label="分享标题" prop="title">
|
||||
<el-input
|
||||
v-model="form.title"
|
||||
style="width: 500px"
|
||||
placeholder="例如：邀请1人可得，双方各得10元优惠券"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分享封面" prop="shareImg">
|
||||
<div class="img_list">
|
||||
<single-image-upload
|
||||
style="width: 80px; height: 80px"
|
||||
v-model="form.shareImg"
|
||||
></single-image-upload>
|
||||
</div>
|
||||
<div class="tips">建议尺寸：630*504</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="演示">
|
||||
<div class="preview_wrap">
|
||||
<div class="message_wrap">
|
||||
<div class="msg">
|
||||
<div class="content">
|
||||
<div class="name">
|
||||
<img class="logo" :src="shopInfo.logo" />
|
||||
<span class="t">{{ shopInfo.name }}</span>
|
||||
</div>
|
||||
<div class="title">{{ form.title }}</div>
|
||||
<el-image :src="form.shareImg" style="width: 100%; height: 110px" fit="cover">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<i class="el-icon-folder-delete"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div class="btm">
|
||||
<i class="icon el-icon-link"></i>
|
||||
小程序
|
||||
</div>
|
||||
</div>
|
||||
<img class="avatar" src="@/assets/images/avatar.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<i class="icon el-icon-microphone"></i>
|
||||
<div class="ipt"></div>
|
||||
<i class="icon el-icon-picture-outline-round"></i>
|
||||
<i class="icon el-icon-circle-plus-outline"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<AddCoupon ref="AddCoupon" @success="addCouponSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shopShareApi from "@/api/account/shopShare";
|
||||
import AddCoupon from "./addCoupon.vue";
|
||||
export default {
|
||||
components: { AddCoupon },
|
||||
data() {
|
||||
const imgValidate1 = (rule, value, callback) => {
|
||||
if (!this.form.shareImg) {
|
||||
callback(new Error("请上传分享封面图"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const imgValidate2 = (rule, value, callback) => {
|
||||
if (!this.form.invitedImg) {
|
||||
callback(new Error("请上传邀请顶部图"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const imgValidate3 = (rule, value, callback) => {
|
||||
if (!this.form.beInvitedImg) {
|
||||
callback(new Error("请上传被邀顶部图"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const startTimeValidate = (rule, value, callback) => {
|
||||
if (!this.form.startTime) {
|
||||
callback(new Error("请选择活动日期"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const newCouponsValidate = (rule, value, callback) => {
|
||||
if (!this.form.newCoupons.length) {
|
||||
callback(new Error("请添加新用户获得券"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const rewardCouponsValidate = (rule, value, callback) => {
|
||||
if (!this.form.rewardCoupons.length) {
|
||||
callback(new Error("请添加奖励券"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
loading: false,
|
||||
createdAt: [],
|
||||
formImgKey: "",
|
||||
couponKey: "",
|
||||
tableType: "1", // 1添加 2编辑
|
||||
tableEditorIndex: 0, // 编辑时的index
|
||||
shopInfo: {
|
||||
name: localStorage.getItem("shopName"),
|
||||
logo: localStorage.getItem("logo"),
|
||||
},
|
||||
form: {
|
||||
status: 1,
|
||||
title: "",
|
||||
shareImg: "",
|
||||
invitedImg: "",
|
||||
beInvitedImg: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
newCoupons: [],
|
||||
invitedNum: "1",
|
||||
rewardCoupons: [],
|
||||
getMethod: "get",
|
||||
},
|
||||
rules: {
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标题",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
shareImg: [
|
||||
{
|
||||
required: true,
|
||||
validator: imgValidate1,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
invitedImg: [
|
||||
{
|
||||
required: true,
|
||||
validator: imgValidate2,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
beInvitedImg: [
|
||||
{
|
||||
required: true,
|
||||
validator: imgValidate3,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
startTime: [
|
||||
{
|
||||
required: true,
|
||||
validator: startTimeValidate,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
newCoupons: [
|
||||
{
|
||||
required: true,
|
||||
validator: newCouponsValidate,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
invitedNum: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入邀请人数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
rewardCoupons: [
|
||||
{
|
||||
required: true,
|
||||
validator: rewardCouponsValidate,
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
},
|
||||
urlList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.byShopId();
|
||||
},
|
||||
methods: {
|
||||
// 添加完成优惠券
|
||||
addCouponSuccess(e) {
|
||||
if (this.tableType == 1) {
|
||||
this.form[this.couponKey].push({ ...e });
|
||||
} else {
|
||||
// this.form[this.couponKey][this.tableEditorIndex] = { ...e }
|
||||
this.$set(this.form[this.couponKey], this.tableEditorIndex, { ...e });
|
||||
}
|
||||
},
|
||||
// 添加奖励券
|
||||
addRewardHandle(key, type = 1, row = {}, index = 0) {
|
||||
this.tableEditorIndex = index;
|
||||
this.tableType = type;
|
||||
this.couponKey = key;
|
||||
if (key == "rewardCoupons" && !this.form.invitedNum) {
|
||||
this.$refs.form.validateField("invitedNum");
|
||||
return;
|
||||
}
|
||||
this.$refs.AddCoupon.show(row);
|
||||
},
|
||||
// 日期回调
|
||||
timeChange(e) {
|
||||
this.form.startTime = e[0];
|
||||
this.form.endTime = e[1];
|
||||
},
|
||||
// 过滤input只能输入整数
|
||||
inputFilterInt(e, key) {
|
||||
if (!e) return;
|
||||
setTimeout(() => {
|
||||
this.form[key] = e.replace(/[^\d]/g, "");
|
||||
}, 50);
|
||||
},
|
||||
// 提交
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.form.shopId = localStorage.getItem("shopId");
|
||||
await shopShareApi.update(this.form);
|
||||
this.loading = false;
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
message: `保存成功`,
|
||||
type: "success",
|
||||
});
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取店铺设置
|
||||
async byShopId() {
|
||||
try {
|
||||
const res = await byShopId();
|
||||
if (res.id) {
|
||||
this.form = res;
|
||||
this.createdAt = [res.startTime, res.endTime];
|
||||
this.urlList = [res.shareImg, res.invitedImg, res.beInvitedImg];
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.img_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
.item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f5f7fa;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.upload {
|
||||
border: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.del {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.del {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
transform: translateY(100%);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview_wrap {
|
||||
width: 300px;
|
||||
height: 368px;
|
||||
background-color: #ededed;
|
||||
position: relative;
|
||||
padding: 20px 10px;
|
||||
|
||||
.message_wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.msg {
|
||||
display: flex;
|
||||
|
||||
.content {
|
||||
width: 180px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 10px 10px 6px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
$size: 8px;
|
||||
content: "";
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 1px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: $size / 2 * -1;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 10px;
|
||||
|
||||
.logo {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.btm {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
line-height: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid #ececec;
|
||||
padding-top: 6px;
|
||||
|
||||
.icon {
|
||||
font-size: 14px;
|
||||
color: rgb(87, 87, 253);
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #f6f6f6;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
gap: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.ipt {
|
||||
flex: 1;
|
||||
height: 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="activeName" type="card">
|
||||
<el-tab-pane label="基本设置" name="1"></el-tab-pane>
|
||||
<el-tab-pane label="分享设置" name="2"></el-tab-pane>
|
||||
<el-tab-pane label="邀请记录" name="3"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<Setting v-if="activeName == 1" />
|
||||
<Share v-if="activeName == 2" />
|
||||
<Record v-if="activeName == 3" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Setting from "./components/setting.vue";
|
||||
import Share from "./components/share.vue";
|
||||
import Record from "./components/record.vue";
|
||||
export default {
|
||||
name: "invite_friend",
|
||||
components: {
|
||||
Setting,
|
||||
Share,
|
||||
Record,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "1",
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-tabs) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.app-container {
|
||||
background: #fff;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="账单还款记录"
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="70%"
|
||||
@close="reset"
|
||||
>
|
||||
<div class="search">
|
||||
<el-form :model="query" inline label-position="left">
|
||||
<el-form-item>
|
||||
<el-input v-model="query.paymentMethod" placeholder="支付方式" style="" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table v-loading="tableData.loading" :data="tableData.data">
|
||||
<el-table-column label="支付方式" prpo="paymentMethod">
|
||||
<template v-slot="scope">
|
||||
<div>{{ scope.row.paymentMethod ? scope.row.paymentMethod : "-" }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="支付金额" prpo="repaymentAmount">
|
||||
<template v-slot="scope">
|
||||
<div>{{ scope.row.repaymentAmount ? scope.row.repaymentAmount : "-" }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prpo="remark">
|
||||
<template v-slot="scope">
|
||||
<div>{{ scope.row.remark ? scope.row.remark : "-" }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作时间" prop="createTime" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="query.page"
|
||||
:page-size="query.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="paginationChange"
|
||||
@size-change="sizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import creditPayApi from "@/api/order/credit-pay-recoders";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
query: {
|
||||
creditBuyerId: "",
|
||||
paymentMethod: "",
|
||||
orderId: "",
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
resetQuery: null,
|
||||
tableData: {
|
||||
data: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.resetQuery = { ...this.query };
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
async getTableData() {
|
||||
// eslint-disable-next-line no-unused-vars, prefer-const
|
||||
let params = {
|
||||
creditBuyerId: this.query.creditBuyerId,
|
||||
value: this.query.value,
|
||||
page: this.query.page,
|
||||
size: this.query.size,
|
||||
paymentMethod: this.query.paymentMethod,
|
||||
};
|
||||
if (this.query.orderId) {
|
||||
params.orderId = this.query.orderId;
|
||||
}
|
||||
// eslint-disable-next-line prefer-const
|
||||
let res = await creditPayApi.page(params);
|
||||
this.tableData.loading = false;
|
||||
this.tableData.data = res.records;
|
||||
this.tableData.total = res.totalRow * 1;
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开
|
||||
* @param row
|
||||
*/
|
||||
show(row, orderId) {
|
||||
this.query = { ...this.resetQuery };
|
||||
this.dialogVisible = true;
|
||||
this.query.creditBuyerId = row.id;
|
||||
this.query.orderId = orderId;
|
||||
this.getTableData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页大小改变
|
||||
* @param e
|
||||
*/
|
||||
sizeChange(e) {
|
||||
this.query.size = e;
|
||||
this.getTableData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页回调
|
||||
* @param e
|
||||
*/
|
||||
paginationChange(e) {
|
||||
this.query.page = e;
|
||||
this.getTableData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
reset() {
|
||||
this.query.paymentMethod = "";
|
||||
this.getTableData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item_wrap {
|
||||
$size: 80px;
|
||||
|
||||
.item {
|
||||
$radius: 4px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(data-index);
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
border-radius: 0 0 $radius 0;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "删除";
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: $size;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:show-close="false"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
center
|
||||
>
|
||||
<div slot="title" class="dialog-title">{{ form.id ? "编辑" : "创建" }}挂账人</div>
|
||||
<div class="content">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="状态" prop="status" style="width: 100%">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="挂账人" prop="debtor" style="width: 100%">
|
||||
<el-input v-model="form.debtor" placeholder="请输入挂账人名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile" style="width: 100%">
|
||||
<el-input
|
||||
v-model="form.mobile"
|
||||
placeholder="请输入手机号"
|
||||
oninput="value= value.replace(/[^0-9]/g, '')"
|
||||
maxlength="11"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="职位" prop="position" style="width: 100%">
|
||||
<el-input v-model="form.position" placeholder="请输入职位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="挂账额度" prop="creditAmount" style="width: 100%">
|
||||
<el-input
|
||||
v-model="form.creditAmount"
|
||||
placeholder=""
|
||||
oninput="value= value.replace(/[^\d|\.]/g, '')"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="还款方式" style="width: 100%">
|
||||
<el-radio-group v-model="form.repaymentMethod" :disabled="isExist(form.id)">
|
||||
<el-radio v-for="item in repaymentMethodList" :key="item.value" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<div style="font-size: 12px; color: #999">一经创建无法更改还款方式</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import creditOrderApi from "@/api/order/credit-order";
|
||||
|
||||
export default {
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ["couponId"],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
repaymentMethodList: [
|
||||
{ label: "按总金额还款", value: "total" },
|
||||
{ label: "按订单还款", value: "order" },
|
||||
],
|
||||
form: {
|
||||
id: "",
|
||||
shopId: "",
|
||||
status: 0,
|
||||
debtor: "",
|
||||
mobile: "",
|
||||
position: "",
|
||||
creditAmount: "",
|
||||
repaymentMethod: "total",
|
||||
},
|
||||
rules: {
|
||||
debtor: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入挂账人名称",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入手机号",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
position: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入职位",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
creditAmount: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入挂账额度",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
resetForm: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form };
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 校验是否存在
|
||||
*/
|
||||
isExist(val) {
|
||||
if (val) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 确定
|
||||
*/
|
||||
async onSubmitHandle() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.loading = true;
|
||||
if (!this.form.shopId) {
|
||||
this.form.shopId = localStorage.getItem("shopId");
|
||||
}
|
||||
let res;
|
||||
if (!this.form.id) {
|
||||
res = await addCreditBuyer(this.form);
|
||||
} else {
|
||||
res = await editCreditBuyer(this.form);
|
||||
}
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
message: `${this.form.id ? "编辑" : "添加"}成功`,
|
||||
type: "success",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.loading = false;
|
||||
this.$emit("success", res);
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开详情
|
||||
* @param row
|
||||
*/
|
||||
show(row) {
|
||||
if (row && row.id) {
|
||||
this.form = row;
|
||||
} else {
|
||||
this.form = this.resetForm;
|
||||
}
|
||||
this.form.status = Number(this.form.status);
|
||||
this.dialogVisible = true;
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dialog-title {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:show-close="false"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="30%"
|
||||
center
|
||||
>
|
||||
<div slot="title" class="dialog-title">挂账还款</div>
|
||||
<div class="content">
|
||||
<div v-if="form.repaymentMethod == 'total' && !form.creditBuyerId" class="credit_info">
|
||||
<div>挂账人：{{ form.debtor }}</div>
|
||||
<div>挂账金额：￥{{ form.owedAmount || 0 }}</div>
|
||||
<div>账户余额: ￥{{ form.accountBalance || 0 }}</div>
|
||||
</div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item
|
||||
v-if="form.repaymentMethod == 'total' && !form.creditBuyerId"
|
||||
label="还款方式"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-radio-group v-model="form.repaymentMethod">
|
||||
<el-radio
|
||||
v-for="item in repaymentMethodList"
|
||||
v-if="form.repaymentMethod == item.value"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="还款金额" prop="repaymentAmount" style="width: 100%">
|
||||
<el-input
|
||||
v-model="form.repaymentAmount"
|
||||
placeholder=""
|
||||
oninput="value= value.replace(/[^\d|\.]/g, '')"
|
||||
>
|
||||
<template slot="prepend">￥</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付方式" prop="paymentMethod" style="width: 100%">
|
||||
<el-input v-model="form.paymentMethod" placeholder="请输入支付方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark" style="width: 100%">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import creditOrderApi from "@/api/order/credit-order";
|
||||
|
||||
import _ from "lodash";
|
||||
export default {
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ["couponId"],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
repaymentMethodList: [
|
||||
{ label: "按总金额还款", value: "total" },
|
||||
{ label: "按订单还款", value: "order" },
|
||||
],
|
||||
form: {
|
||||
id: "",
|
||||
creditBuyerId: "",
|
||||
orderId: "",
|
||||
repaymentMethod: "",
|
||||
repaymentAmount: "",
|
||||
paymentMethod: "",
|
||||
remark: "",
|
||||
},
|
||||
rules: {
|
||||
repaymentAmount: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入还款金额",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
paymentMethod: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入支付方式",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
resetForm: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form };
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 确定
|
||||
*/
|
||||
// eslint-disable-next-line no-undef
|
||||
onSubmitHandle: _.debounce(function async() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.loading = true;
|
||||
// if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
|
||||
let res;
|
||||
if (this.form.repaymentMethod === "total") {
|
||||
res = await creditRePayment(this.form);
|
||||
} else {
|
||||
res = await creditPayment(this.form);
|
||||
}
|
||||
this.$notify({
|
||||
title: "成功",
|
||||
message: res.repaymentMsg,
|
||||
type: "success",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.loading = false;
|
||||
this.$emit("success", res);
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 1000),
|
||||
|
||||
/**
|
||||
* 打开
|
||||
* @param row
|
||||
*/
|
||||
show(row, order) {
|
||||
this.form = { ...this.resetForm };
|
||||
if (row.creditBuyerId) {
|
||||
this.form.creditBuyerId = row.creditBuyerId;
|
||||
this.form.orderId = order.id;
|
||||
} else {
|
||||
this.form.id = row.id;
|
||||
}
|
||||
this.form.repaymentMethod = row.repaymentMethod;
|
||||
this.form.debtor = row.debtor;
|
||||
this.form.owedAmount = row.owedAmount;
|
||||
this.form.accountBalance = row.accountBalance;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭
|
||||
*/
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.query = { ...this.resetQuery };
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.credit_info {
|
||||
width: 100%;
|
||||
background: #f7f7fa;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 25px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 30px;
|
||||
view {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.dialog-title {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,475 @@
|
|||
<!-- eslint-disable vue/valid-v-bind -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form :model="query" inline label-position="left">
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="timeValue" @change="timeChange">
|
||||
<el-radio-button label="">全部</el-radio-button>
|
||||
<el-radio-button label="0">今天</el-radio-button>
|
||||
<el-radio-button label="-1">昨天</el-radio-button>
|
||||
<el-radio-button label="-7">最近7天</el-radio-button>
|
||||
<el-radio-button label="-30">最近30天</el-radio-button>
|
||||
<el-radio-button label="week">本周</el-radio-button>
|
||||
<el-radio-button label="month">本月</el-radio-button>
|
||||
<el-radio-button label="custom">自定义</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
v-if="timeValue == 'custom'"
|
||||
v-model="query.createdAt"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<template>
|
||||
<el-form-item>
|
||||
<el-select v-model="query.status" placeholder="全部状态" clearable style="width: 140px">
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="collect_wrap">
|
||||
<div v-for="(item, index) in payCountList" :key="index" class="item">
|
||||
<div class="icon_wrap" :style="{ backgroundColor: `rgba(${item.color},0.5)` }">
|
||||
<el-icon :color="`rgba(${item.color},1)`" :size="18">
|
||||
<InfoFilled v-if="item.icon == 'info'" />
|
||||
<Check v-if="item.icon == 'check'" />
|
||||
<Warning v-if="item.icon == 'warning'" />
|
||||
<Plus v-if="item.icon == 'plus'" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="m">￥{{ item.amount }}</div>
|
||||
<div class="t">{{ item.label }}{{ index == 0 ? item.count + "笔" : "" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table v-loading="tableData.loading" :data="tableData.data">
|
||||
<el-table-column label="创建日期" prop="createTime" />
|
||||
<el-table-column label="订单号" prop="orderId" />
|
||||
<el-table-column label="应付金额" prop="payAmount">
|
||||
<template v-slot="scope">{{ "￥" + scope.row.payAmount || "-" }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已付款金额" prop="paidAmount">
|
||||
<template v-slot="scope">{{ "￥" + scope.row.paidAmount || "-" }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="待付款金额" prop="unpaidAmount">
|
||||
<template v-slot="scope">{{ "￥" + scope.row.unpaidAmount || "-" }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="salesAmount">
|
||||
<template v-slot="scope">
|
||||
{{
|
||||
scope.row.status == "unpaid"
|
||||
? "未付款"
|
||||
: scope.row.status == "partial"
|
||||
? "部分支付"
|
||||
: scope.row.status == "paid"
|
||||
? "已付款"
|
||||
: ""
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="付款方式" prop="lastPaymentMethod">
|
||||
<template v-slot="scope">{{ scope.row.lastPaymentMethod }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="remark">
|
||||
<template v-slot="scope">{{ scope.row.remark }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="付款时间" prop="lastPaymentTime" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
:style="{ color: repaymentMethod == 'total' ? '#999' : '' }"
|
||||
@click="openDialog(scope.row, 'payment')"
|
||||
>
|
||||
付款
|
||||
</el-button>
|
||||
<el-button type="text" @click="openDialog(scope.row, 'paymentRecord')">
|
||||
账单付款记录
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="query.page"
|
||||
:page-size="query.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="paginationChange"
|
||||
@size-change="sizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 还款 -->
|
||||
<creditRepayment ref="creditRepayment" @success="resetHandle" />
|
||||
|
||||
<!-- 还款记录 -->
|
||||
<creditRepaymentRecord ref="creditRepaymentRecord" @success="resetHandle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import creditRepayment from "./components/detail/credit_repayment.vue";
|
||||
import creditRepaymentRecord from "./components/detail/credit_RePaymentRecord.vue";
|
||||
import dayjs from "dayjs";
|
||||
import creditOrderApi from "@/api/order/credit-order";
|
||||
export default {
|
||||
components: { creditRepayment, creditRepaymentRecord },
|
||||
filters: {},
|
||||
data() {
|
||||
return {
|
||||
timeValue: "",
|
||||
resetQuery: null,
|
||||
repaymentMethod: "",
|
||||
statusList: [
|
||||
{ label: "未付款", value: "unpaid" },
|
||||
{ label: "部分支付", value: "partial" },
|
||||
{ label: "已付款", value: "paid" },
|
||||
],
|
||||
query: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
creditBuyerId: "",
|
||||
createdAt: [],
|
||||
status: "",
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
},
|
||||
downloadLoading: false,
|
||||
payCountList: [
|
||||
{ label: "总交易", icon: "info", color: "201, 120, 236", amount: 0, count: 0 },
|
||||
{ label: "已支付金额", icon: "check", color: "70, 181, 24", amount: 0 },
|
||||
{ label: "待支付金额", icon: "plus", color: "248, 110, 16", amount: 0 },
|
||||
{ label: "待支付笔数", icon: "warning", color: "254, 180, 38", amount: 0 },
|
||||
],
|
||||
payCountTotal: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route.query);
|
||||
this.query.creditBuyerId = this.$route.query.id;
|
||||
this.repaymentMethod = this.$route.query.repaymentMethod;
|
||||
this.resetQuery = { ...this.query };
|
||||
// repaymentMethod
|
||||
this.getTableData();
|
||||
// this.tbShopCategoryGet()
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.query.page = 1;
|
||||
this.getTableData();
|
||||
},
|
||||
/**
|
||||
* 获取明细数据
|
||||
*/
|
||||
async getTableData() {
|
||||
this.tableData.loading = true;
|
||||
try {
|
||||
this.creditDetailSummary();
|
||||
// eslint-disable-next-line prefer-const
|
||||
let params = {
|
||||
page: this.query.page,
|
||||
size: this.query.size,
|
||||
status: this.query.status,
|
||||
creditBuyerId: this.query.creditBuyerId,
|
||||
};
|
||||
if (this.query.createdAt.length > 0) {
|
||||
params.beginDate = this.query.createdAt[0].substring(0, 10);
|
||||
params.endDate = this.query.createdAt[1].substring(0, 10);
|
||||
}
|
||||
// eslint-disable-next-line prefer-const
|
||||
let res = await creditOrderApi.page(params);
|
||||
this.tableData.loading = false;
|
||||
this.tableData.data = res.records;
|
||||
this.tableData.total = res.totalRow * 1;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取明细统计
|
||||
*/
|
||||
async creditDetailSummary() {
|
||||
try {
|
||||
// eslint-disable-next-line prefer-const
|
||||
let params = {
|
||||
page: this.query.page,
|
||||
size: this.query.size,
|
||||
status: this.query.status,
|
||||
creditBuyerId: this.query.creditBuyerId,
|
||||
};
|
||||
if (this.query.createdAt.length > 0) {
|
||||
params.beginDate = this.query.createdAt[0].substring(0, 10);
|
||||
params.endDate = this.query.createdAt[1].substring(0, 10);
|
||||
}
|
||||
// eslint-disable-next-line prefer-const
|
||||
let res = await creditOrderApi.summary(params);
|
||||
this.payCountList[0].amount = res.payAmountTotal;
|
||||
this.payCountList[0].count = res.count;
|
||||
this.payCountList[1].amount = res.paidAmountTotal;
|
||||
this.payCountList[2].amount = res.unpaidAmountTotal;
|
||||
this.payCountList[3].amount = res.unpaidCount;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 操作
|
||||
*/
|
||||
openDialog(row, type) {
|
||||
if (type === "payment" && this.repaymentMethod === "order") {
|
||||
this.$refs.creditRepayment.show(
|
||||
{ creditBuyerId: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod },
|
||||
row
|
||||
);
|
||||
} else if (type === "paymentRecord") {
|
||||
this.$refs.creditRepaymentRecord.show(
|
||||
{ id: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod },
|
||||
row.orderId
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换时间
|
||||
* @param e
|
||||
*/
|
||||
timeChange(e) {
|
||||
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
|
||||
switch (e) {
|
||||
case "":
|
||||
// 全部
|
||||
this.query.createdAt = [];
|
||||
break;
|
||||
case "0":
|
||||
// 今天
|
||||
this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
|
||||
break;
|
||||
case "-1":
|
||||
// 昨天
|
||||
this.query.createdAt = [
|
||||
dayjs().add(-1, "d").format(format[0]),
|
||||
dayjs().add(-1, "d").format(format[1]),
|
||||
];
|
||||
break;
|
||||
case "-7":
|
||||
// 最近7天
|
||||
this.query.createdAt = [
|
||||
dayjs().add(-7, "d").format(format[0]),
|
||||
dayjs().format(format[1]),
|
||||
];
|
||||
break;
|
||||
case "-30":
|
||||
// 最近7天
|
||||
this.query.createdAt = [
|
||||
dayjs().add(-30, "d").format(format[0]),
|
||||
dayjs().format(format[1]),
|
||||
];
|
||||
break;
|
||||
case "week":
|
||||
// 本周
|
||||
this.query.createdAt = [
|
||||
dayjs().startOf("week").format(format[0]),
|
||||
dayjs().endOf("week").format(format[1]),
|
||||
];
|
||||
break;
|
||||
case "month":
|
||||
// 本周
|
||||
this.query.createdAt = [
|
||||
dayjs().startOf("month").format(format[0]),
|
||||
dayjs().endOf("month").format(format[1]),
|
||||
];
|
||||
break;
|
||||
case "custom":
|
||||
// 自定义
|
||||
this.query.createdAt = [];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置查询
|
||||
*/
|
||||
resetHandle() {
|
||||
this.timeValue = "";
|
||||
this.query = { ...this.resetQuery };
|
||||
this.getTableData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页大小改变
|
||||
* @param e
|
||||
*/
|
||||
sizeChange(e) {
|
||||
console.log(e);
|
||||
this.query.size = e;
|
||||
this.getTableData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页回调
|
||||
* @param e
|
||||
*/
|
||||
paginationChange(e) {
|
||||
this.query.page = e;
|
||||
this.getTableData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.collect_wrap {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
background-size: 100% 100%;
|
||||
width: 255px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
|
||||
.icon_wrap {
|
||||
$size: 34px;
|
||||
$border: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
> div {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
width: $size + $border;
|
||||
height: $size + $border;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--bg-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
right: 0;
|
||||
top: 1px;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 10px;
|
||||
|
||||
.m {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refund {
|
||||
color: #ff9731;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table_order_info {
|
||||
.order_no {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #e6a23c;
|
||||
}
|
||||
}
|
||||
|
||||
.goods_info {
|
||||
.row {
|
||||
display: flex;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 10px;
|
||||
|
||||
.sku {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -116,16 +116,22 @@ async function handleEditClick(row: IObject) {
|
|||
console.log({ ...row });
|
||||
editModalRef.value?.setFormData({ ...row, url: [row.url] });
|
||||
}
|
||||
1;
|
||||
|
||||
const router = useRouter();
|
||||
// 其他工具栏
|
||||
function handleToolbarClick(name: string) {
|
||||
console.log(name);
|
||||
if (name === "custom1") {
|
||||
ElMessage.success("点击了自定义1按钮");
|
||||
}
|
||||
}
|
||||
function handleToolbarClick(name: string, row: any) {}
|
||||
// 其他操作列
|
||||
async function handleOperatClick(data: IOperatData) {
|
||||
if (data.name == "detail") {
|
||||
router.push({
|
||||
path: "/credit-detail",
|
||||
query: {
|
||||
id: data.row.id,
|
||||
repaymentMethod: data.row.repaymentMethod,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<!-- 交班模块 -->
|
||||
<div style="padding: 15px">
|
||||
<!-- 交班模块 -->
|
||||
<!-- 搜索 -->
|
||||
<my-search></my-search>
|
||||
<!-- 表格 -->
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<!-- 耗材列表的新增耗材盘点 -->
|
||||
<template>
|
||||
<el-dialog title="耗材盘点" v-model="dialogVisible" width="80%">
|
||||
<el-dialog title="耗材盘点" v-model="dialogVisible" width="80%" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-position="left" inline>
|
||||
<el-form-item label="账存数量">
|
||||
<el-input v-model="form.balance" readonly style="width: 180px"></el-input>
|
||||
<el-input v-model="form.stockNumber" readonly style="width: 180px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="实际数量">
|
||||
<el-input-number
|
||||
v-model="form.stockNumber"
|
||||
v-model="form.actualNumber"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
<el-table-column label="售价" prop="price">
|
||||
<template v-slot="scope">￥{{ scope.row.price }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="账存数量" prop="stockNumber"></el-table-column>
|
||||
<el-table-column label="盈亏数量" prop="lpNum"></el-table-column>
|
||||
<el-table-column label="账存数量" prop="actualNumber"></el-table-column>
|
||||
<el-table-column label="盈亏数量" prop="winLossNumber"></el-table-column>
|
||||
<el-table-column label="盈亏金额" prop="lpAmount">
|
||||
<template v-slot="scope">￥{{ scope.row.lpAmount }}</template>
|
||||
</el-table-column>
|
||||
|
|
@ -97,8 +97,8 @@ export default {
|
|||
stocktakinNum: "", // 必传
|
||||
price: "", // 商品价格 非必传 为空盘点价格为商品价格
|
||||
remark: "", // 盘点备注 非必传
|
||||
stockNumber: 0,
|
||||
balance: "",
|
||||
actualNumber: 0,
|
||||
stockNumber: "",
|
||||
},
|
||||
rules: {
|
||||
stocktakinNum: [
|
||||
|
|
@ -129,29 +129,36 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
profitNumber() {
|
||||
if (this.form.balance == undefined) {
|
||||
return this.form.stockNumber - 0;
|
||||
if (this.form.stockNumber == undefined) {
|
||||
return this.form.actualNumber - 0;
|
||||
} else {
|
||||
return this.form.stockNumber - this.form.balance;
|
||||
return this.form.actualNumber - this.form.stockNumber;
|
||||
}
|
||||
},
|
||||
profitPrice() {
|
||||
return formatDecimal((this.form.stockNumber - this.form.balance) * this.form.price);
|
||||
return formatDecimal((this.form.actualNumber - this.form.stockNumber) * this.form.price);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.form = { ...this.resetForm };
|
||||
},
|
||||
onSubmitHandle() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.form.lpNum = this.profitNumber;
|
||||
this.form.balance = this.form.stockNumber;
|
||||
this.form.winLossNumber = this.profitNumber;
|
||||
this.form.stockNumber = this.form.actualNumber;
|
||||
this.loading = true;
|
||||
this.form.conInfoId = this.form.id;
|
||||
delete this.form["id"];
|
||||
console.log(this.form);
|
||||
let res = await tbConCheck(this.form);
|
||||
console.log(this.form);
|
||||
let res = await stockApi.check({
|
||||
conId: this.form.id,
|
||||
conName: this.form.conName,
|
||||
stockNumber: this.form.stockNumber,
|
||||
actualNumber: this.form.actualNumber,
|
||||
winLossNumber: this.form.winLossNumber,
|
||||
price: this.form.price,
|
||||
remark: this.form.remark,
|
||||
});
|
||||
this.$emit("success", res);
|
||||
this.dialogVisible = false;
|
||||
this.loading = false;
|
||||
|
|
@ -169,22 +176,21 @@ export default {
|
|||
});
|
||||
},
|
||||
async show(obj) {
|
||||
console.log(obj, 111);
|
||||
console.log(obj);
|
||||
let res = await hasPermission("允许耗材盘点");
|
||||
if (!res) {
|
||||
return;
|
||||
}
|
||||
this.form.remark = "";
|
||||
this.form.stocktakinNum = 0;
|
||||
this.form.lpNum = 0;
|
||||
// this.form.stockNumber = 0
|
||||
this.form.winLossNumber = 0;
|
||||
|
||||
this.form = Object.assign(this.form, obj);
|
||||
this.dialogVisible = true;
|
||||
this.form.conInfoId = obj.consId;
|
||||
this.form.stockNumber = obj.balance < 0 ? 0 : obj.balance;
|
||||
// this.form.balance = obj.stockNumber
|
||||
this.form.balance = obj.balance;
|
||||
this.form.actualNumber = obj.stockNumber < 0 ? 0 : obj.stockNumber;
|
||||
// this.form.stockNumber = obj.actualNumber
|
||||
this.form.stockNumber = obj.stockNumber;
|
||||
this.form.price == null ? 0 : this.form.price;
|
||||
this.searhForm.productId = obj.id;
|
||||
this.getTableData();
|
||||
|
|
|
|||
|
|
@ -154,6 +154,10 @@ function handleToolbarClick(name: string) {
|
|||
router.push({ path: "/inventory/operation_in" });
|
||||
return;
|
||||
}
|
||||
if (name == "chuku") {
|
||||
router.push({ path: "/inventory/operation_in", query: { type: "out" } });
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 其他操作列
|
||||
async function handleOperatClick(data: IOperatData) {
|
||||
|
|
|
|||
|
|
@ -8,11 +8,19 @@
|
|||
label-position="left"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-row>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group :model-value="type">
|
||||
<el-radio-button label="in">入库</el-radio-button>
|
||||
<el-radio-button label="out">出库</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="供应商">
|
||||
<el-select
|
||||
v-model="queryForm.purveyorId"
|
||||
v-model="queryForm.vendorId"
|
||||
placeholder="请选择供应商"
|
||||
clearable
|
||||
style="width: 220px"
|
||||
|
|
@ -29,9 +37,9 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="入库时间" prop="time">
|
||||
<el-form-item label="入库时间" prop="inOutDate">
|
||||
<el-date-picker
|
||||
v-model="queryForm.time"
|
||||
v-model="queryForm.inOutDate"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
|
|
@ -45,7 +53,7 @@
|
|||
<el-col :span="8">
|
||||
<el-form-item label="应付金额">
|
||||
<el-input
|
||||
v-model="queryForm.totalAmount"
|
||||
v-model="queryForm.amountPayable"
|
||||
placeholder="请输入应收金额"
|
||||
style="width: 220px"
|
||||
></el-input>
|
||||
|
|
@ -54,7 +62,7 @@
|
|||
<el-col :span="8">
|
||||
<el-form-item label="实付金额">
|
||||
<el-input
|
||||
v-model="queryForm.paidAmount"
|
||||
v-model="queryForm.actualPaymentAmount"
|
||||
placeholder="请输入实收金额"
|
||||
style="width: 220px"
|
||||
></el-input>
|
||||
|
|
@ -65,7 +73,7 @@
|
|||
<el-col :span="8">
|
||||
<el-form-item label="付款时间">
|
||||
<el-date-picker
|
||||
v-model="queryForm.paidAt"
|
||||
v-model="queryForm.paymentDate"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
|
|
@ -77,7 +85,7 @@
|
|||
<el-col :span="8">
|
||||
<el-form-item label="批号">
|
||||
<el-input
|
||||
v-model="queryForm.batchNumber"
|
||||
v-model="queryForm.batchNo"
|
||||
placeholder="请输入批号"
|
||||
style="width: 220px"
|
||||
></el-input>
|
||||
|
|
@ -95,32 +103,33 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-form-item label="选择耗材">
|
||||
<div></div>
|
||||
<el-button type="primary" @click="showHaocai" v-if="inTabValue == 'consumable'">
|
||||
选择耗材
|
||||
</el-button>
|
||||
<el-button type="primary" @click="$refs.shopList.show(tableData.list)" v-else>
|
||||
选择商品
|
||||
</el-button>
|
||||
<el-autocomplete
|
||||
v-model="autocompletename"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
:value-key="inTabValue == 'goods' ? 'name' : 'conName'"
|
||||
:placeholder="inTabValue == 'goods' ? '商品搜索' : '耗材搜索'"
|
||||
@select="handleSelect"
|
||||
style="width: 200px; margin-left: 20px"
|
||||
></el-autocomplete>
|
||||
</el-form-item>
|
||||
<el-autocomplete
|
||||
v-model="autocompletename"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
:value-key="inTabValue == 'goods' ? 'name' : 'conName'"
|
||||
:placeholder="inTabValue == 'goods' ? '商品搜索' : '耗材搜索'"
|
||||
@select="handleSelect"
|
||||
style="width: 500px"
|
||||
></el-autocomplete>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-button type="primary" plain v-if="inTabValue == 'consumable'">
|
||||
共{{ tableData.list.length }}种耗材，金额合计
|
||||
<span style="color: red">￥{{ queryForm.totalAmount }}</span>
|
||||
<span style="color: red">￥{{ queryForm.amountPayable }}</span>
|
||||
</el-button>
|
||||
<el-button type="primary" plain v-else>
|
||||
共{{ tableData.list.length }}种商品，金额合计
|
||||
<span style="color: red">￥{{ queryForm.totalAmount }}</span>
|
||||
<span style="color: red">￥{{ queryForm.amountPayable }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
|
|
@ -196,7 +205,7 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="小计">
|
||||
<template v-slot="scope">
|
||||
<!-- <el-input-number v-model="scope.row.totalAmount" :min="0" scope.row.price , scope.row.stockNumber
|
||||
<!-- <el-input-number v-model="scope.row.amountPayable" :min="0" scope.row.price , scope.row.stockNumber
|
||||
controls-position="right"></el-input-number> -->
|
||||
<el-input :value="formatDecimal(testform(scope.row))" readonly style="width: 100px" />
|
||||
</template>
|
||||
|
|
@ -244,7 +253,7 @@
|
|||
:step="1"
|
||||
step-strictly
|
||||
controls-position="right"
|
||||
@change="modifyPrice($event, scope.row, 'number', 'totalAmount')"
|
||||
@change="modifyPrice($event, scope.row, 'number', 'amountPayable')"
|
||||
></el-input-number>
|
||||
<div class="tips" style="font-size: 16px">
|
||||
入库前：
|
||||
|
|
@ -273,7 +282,7 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="小计">
|
||||
<template v-slot="scope">
|
||||
<!-- <el-input-number v-model="scope.row.totalAmount" :min="0"
|
||||
<!-- <el-input-number v-model="scope.row.amountPayable" :min="0"
|
||||
controls-position="right"></el-input-number> -->
|
||||
<el-input
|
||||
:value="scope.row.costPrice * scope.row.number"
|
||||
|
|
@ -328,6 +337,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import consApi from "@/api/product/cons";
|
||||
|
||||
import vendorApi from "@/api/product/vendor";
|
||||
import stockApi from "@/api/product/stock";
|
||||
import dayjs from "dayjs";
|
||||
|
|
@ -342,6 +354,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
type: "in", //in 入库 out出库
|
||||
formatDecimal,
|
||||
inTabValue: "consumable",
|
||||
inTabs: [
|
||||
|
|
@ -376,27 +389,27 @@ export default {
|
|||
resetForm: "",
|
||||
queryFormLoading: false,
|
||||
queryForm: {
|
||||
batchNumber: "",
|
||||
list: [],
|
||||
paidAmount: 0,
|
||||
paidAt: "",
|
||||
purveyorId: "",
|
||||
batchNo: "",
|
||||
bodyList: [],
|
||||
actualPaymentAmount: 0,
|
||||
paymentDate: "",
|
||||
vendorId: "",
|
||||
purveyorName: "",
|
||||
remark: "",
|
||||
time: dayjs().format("YYYY-MM-DD"),
|
||||
totalAmount: 0,
|
||||
inOutDate: dayjs().format("YYYY-MM-DD"),
|
||||
amountPayable: 0,
|
||||
type: "in",
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
},
|
||||
queryRules: {
|
||||
purveyorId: [
|
||||
vendorId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择供应商",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
time: [
|
||||
inOutDate: [
|
||||
{
|
||||
required: true,
|
||||
message: " ",
|
||||
|
|
@ -415,6 +428,7 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
this.type = this.$route.query.type || "in";
|
||||
this.resetForm = { ...this.queryForm };
|
||||
this.tbShopPurveyorGet();
|
||||
},
|
||||
|
|
@ -434,17 +448,16 @@ export default {
|
|||
sort: "id",
|
||||
});
|
||||
} else {
|
||||
res = await tbConsInfoGet({
|
||||
res = await consApi.getList({
|
||||
page: 0,
|
||||
size: 20,
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
conName: queryString ? queryString : "",
|
||||
});
|
||||
}
|
||||
this.restaurants = res.content;
|
||||
if (res.content.length == 0) {
|
||||
this.restaurants = res.records;
|
||||
if (res.records.length == 0) {
|
||||
//给个提示没有搜到
|
||||
this.$message("无此商品");
|
||||
ElMessage("无此商品");
|
||||
return false;
|
||||
}
|
||||
var uniqueArray = this.restaurants.filter(
|
||||
|
|
@ -487,7 +500,7 @@ export default {
|
|||
zong += ele.price * ele.stockNumber * p;
|
||||
});
|
||||
}
|
||||
this.queryForm.totalAmount = formatDecimal(zong);
|
||||
this.queryForm.amountPayable = formatDecimal(zong);
|
||||
},
|
||||
// 选择商品
|
||||
selectShop(res) {
|
||||
|
|
@ -499,7 +512,7 @@ export default {
|
|||
unitName: item.unitName,
|
||||
productId: item.id,
|
||||
number: 0,
|
||||
totalAmount: "",
|
||||
amountPayable: "",
|
||||
...i,
|
||||
});
|
||||
});
|
||||
|
|
@ -528,7 +541,7 @@ export default {
|
|||
return false;
|
||||
}
|
||||
//商品入库是否显示应付实付
|
||||
if (this.queryForm.purveyorId) {
|
||||
if (this.queryForm.vendorId) {
|
||||
this.shopTypesActive = 0;
|
||||
} else {
|
||||
this.shopTypesActive = 1;
|
||||
|
|
@ -544,7 +557,7 @@ export default {
|
|||
this.tableData.list.forEach((ele) => {
|
||||
zong += ele.price * ele.stockNumber;
|
||||
});
|
||||
this.queryForm.totalAmount = formatDecimal(zong);
|
||||
this.queryForm.amountPayable = formatDecimal(zong);
|
||||
}, 10);
|
||||
} else {
|
||||
row[key1] = cvalue;
|
||||
|
|
@ -556,7 +569,7 @@ export default {
|
|||
}
|
||||
zong += ele.price * ele.stockNumber * p;
|
||||
});
|
||||
this.queryForm.totalAmount = formatDecimal(zong);
|
||||
this.queryForm.amountPayable = formatDecimal(zong);
|
||||
}
|
||||
},
|
||||
// 计算商品总价
|
||||
|
|
@ -570,7 +583,7 @@ export default {
|
|||
this.tableData.list.forEach((ele) => {
|
||||
zong += ele.costPrice * ele.number;
|
||||
});
|
||||
this.queryForm.totalAmount = formatDecimal(zong);
|
||||
this.queryForm.amountPayable = formatDecimal(zong);
|
||||
}, 10);
|
||||
} else {
|
||||
row[key1] = cvalue;
|
||||
|
|
@ -579,7 +592,7 @@ export default {
|
|||
this.tableData.list.forEach((ele) => {
|
||||
zong += ele.costPrice * ele.number;
|
||||
});
|
||||
this.queryForm.totalAmount = formatDecimal(zong);
|
||||
this.queryForm.amountPayable = formatDecimal(zong);
|
||||
}
|
||||
},
|
||||
// 提交
|
||||
|
|
@ -587,10 +600,10 @@ export default {
|
|||
if (this.tableData.list.length == 0) {
|
||||
switch (this.inTabValue) {
|
||||
case "goods":
|
||||
this.$message("请先选择商品！");
|
||||
ElMessage("请先选择商品！");
|
||||
break;
|
||||
case "consumable":
|
||||
this.$message("请先选择耗材！");
|
||||
ElMessage("请先选择耗材！");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
@ -603,23 +616,38 @@ export default {
|
|||
this.queryFormLoading = true;
|
||||
switch (this.inTabValue) {
|
||||
case "goods":
|
||||
this.queryForm.list = this.tableData.list;
|
||||
this.queryForm.bodyList = this.tableData.list;
|
||||
await tbProductStockOperateOutAndOn(this.queryForm);
|
||||
break;
|
||||
case "consumable":
|
||||
this.queryForm.accountsPayable = this.queryForm.totalAmount;
|
||||
this.queryForm.actualPayment = this.queryForm.paidAmount;
|
||||
this.queryForm.paymentTime = this.queryForm.paidAt;
|
||||
this.queryForm.supplierId = this.queryForm.purveyorId;
|
||||
this.queryForm.list = this.tableData.list;
|
||||
await stockApi.in(this.queryForm);
|
||||
this.queryForm.accountsPayable = this.queryForm.amountPayable;
|
||||
this.queryForm.actualPayment = this.queryForm.actualPaymentAmount;
|
||||
this.queryForm.paymentTime = this.queryForm.paymentDate;
|
||||
this.queryForm.supplierId = this.queryForm.vendorId;
|
||||
const bodyList = this.tableData.list.map((v) => {
|
||||
console.log(v);
|
||||
return {
|
||||
conId: v.id,
|
||||
conName: v.conName,
|
||||
purchasePrice: v.price,
|
||||
unitName: v.conUnit,
|
||||
inOutNumber: v.stockNumber,
|
||||
subTotal: v.price * v.stockNumber,
|
||||
};
|
||||
});
|
||||
if (this.type == "in") {
|
||||
await stockApi.in({ ...this.queryForm, bodyList });
|
||||
} else {
|
||||
await stockApi.out({ ...this.queryForm, bodyList });
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.queryFormLoading = false;
|
||||
this.$message({
|
||||
message: "入库提交成功",
|
||||
const title = this.type == "in" ? "入库" : "出库";
|
||||
ElMessage({
|
||||
message: title + "提交成功",
|
||||
type: "success",
|
||||
});
|
||||
this.resetHandle(); //初始化
|
||||
|
|
|
|||
|
|
@ -0,0 +1,215 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-button v-if="url" type="primary" @click="dialogVisible = true" style="margin-bottom: 28px">
|
||||
订阅消息
|
||||
</el-button>
|
||||
<el-dialog title="提示" v-model="dialogVisible" width="30%" :before-close="handleClose">
|
||||
<div style="width: 100%; text-align: center">
|
||||
<el-image style="width: 200px; height: 200px" :src="url"></el-image>
|
||||
</div>
|
||||
<div style="text-align: center">使用微信扫描二维码绑定订阅消息</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="downloadUrl">下载</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<div class="head-container" id="table_drag">
|
||||
<el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
|
||||
<el-table-column label="头像">
|
||||
<template v-slot="scope">
|
||||
<div class="shop_info">
|
||||
<el-image
|
||||
:src="scope.row.avatar"
|
||||
style="width: 50px; height: 50px; border-radius: 4px; background-color: #efefef"
|
||||
>
|
||||
<template #error>
|
||||
<div class="img_error">
|
||||
<i class="icon el-icon-document-delete"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="nickname"></el-table-column>
|
||||
<el-table-column label="商品库存预警" prop="createdAt">
|
||||
<template v-slot="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.proState"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="changeHot(scope.row.proState, 0, scope.row.openId)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="耗材库存预警" prop="createdAt">
|
||||
<template v-slot="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.conState"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="changeHot(scope.row.conState, 1, scope.row.openId)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作商品" prop="createdAt">
|
||||
<template v-slot="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.opeState"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="changeHot(scope.row.opeState, 2, scope.row.openId)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-popconfirm title="确定解绑吗？" @confirm="delTableHandle(scope.row.openId)">
|
||||
<template #reference>
|
||||
<el-button type="text">解绑</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="tableData.page"
|
||||
:page-size="tableData.size"
|
||||
@current-change="paginationChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shopMsgPushApi from "@/api/account/shopMsgPush";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
test: "1",
|
||||
tableData: {
|
||||
data: [],
|
||||
page: 1,
|
||||
size: 30,
|
||||
loading: false,
|
||||
total: 0,
|
||||
},
|
||||
alldata: {
|
||||
allState: 0,
|
||||
conState: 0,
|
||||
opeState: 0,
|
||||
stockState: 0,
|
||||
},
|
||||
url: "",
|
||||
dialogVisible: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData();
|
||||
this.getlist();
|
||||
this.getsubQrCode();
|
||||
},
|
||||
methods: {
|
||||
downloadUrl() {
|
||||
let link = document.createElement("a");
|
||||
//创建一个a标签
|
||||
link.style.display = "none";
|
||||
//将a标签隐藏
|
||||
link.href = this.url;
|
||||
document.body.appendChild(link);
|
||||
//将上面创建的a标签加入到body的尾部
|
||||
link.click();
|
||||
//执行a标签
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 二维码
|
||||
async getsubQrCode() {
|
||||
let res = await shopMsgPushApi.code({
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
});
|
||||
this.url = res;
|
||||
},
|
||||
async getlist() {
|
||||
let res = await state({
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
});
|
||||
this.alldata = res;
|
||||
},
|
||||
async changeEvent(state, type) {
|
||||
let res = await shopState({
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
type,
|
||||
state,
|
||||
});
|
||||
},
|
||||
// 设置消息推送
|
||||
async changeHot(row, index, openId) {
|
||||
// index 0商品库存 1耗材 2操作商品
|
||||
let obj = {
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
type: index,
|
||||
state: row,
|
||||
openId,
|
||||
};
|
||||
let res = await msginfo(obj);
|
||||
this.$message.success("修改成功!");
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e;
|
||||
this.getTableData();
|
||||
},
|
||||
async getTableData() {
|
||||
try {
|
||||
this.tableData.loading = true;
|
||||
const res = await shopMsgPushApi.getUserList({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
});
|
||||
this.tableData.loading = false;
|
||||
this.tableData.data = res.records;
|
||||
this.tableData.total = res.total;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
|
||||
// 删除商品
|
||||
async delTableHandle(ids) {
|
||||
try {
|
||||
await shopMsgPushApi.shopStateDel({
|
||||
openId: ids,
|
||||
});
|
||||
this.getTableData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop_info {
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tag_wrap {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
</el-tabs>
|
||||
<shopInfo v-if="activeName == 1" />
|
||||
<safe v-if="activeName == 4" />
|
||||
<!-- <goxcx v-if="activeName == 6" />
|
||||
<notifications v-if="activeName == 7" /> -->
|
||||
<notifications v-if="activeName == 7" />
|
||||
<!-- <goxcx v-if="activeName == 6" />-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
<script setup>
|
||||
import shopInfo from "./components/shopInfo.vue";
|
||||
import safe from "./components/safe.vue";
|
||||
import notifications from "./components/notifications.vue";
|
||||
|
||||
const state = reactive({
|
||||
activeName: "1",
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<template></template>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import Api from "@/api/product/vendor";
|
||||
import { returnOptions, switchAttr } from "./config";
|
||||
import type { IModalConfig } from "@/components/CURD/types";
|
||||
|
||||
const modalConfig: IModalConfig = {
|
||||
pageName: "sys:user",
|
||||
dialog: {
|
||||
title: "添加供应商",
|
||||
width: 800,
|
||||
draggable: true,
|
||||
},
|
||||
form: {
|
||||
labelWidth: 140,
|
||||
},
|
||||
formAction: function (data) {
|
||||
return Api.add({ ...data });
|
||||
},
|
||||
beforeSubmit(data) {
|
||||
console.log("提交之前处理", data);
|
||||
},
|
||||
formItems: [
|
||||
|
||||
{
|
||||
label: "名称",
|
||||
prop: "name",
|
||||
rules: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入名称",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "联系人名字",
|
||||
prop: "contactName",
|
||||
rules: [{ required: false, message: "请输入联系人名字", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入联系人名字",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "联系人电话",
|
||||
prop: "telephone",
|
||||
rules: [{ required: false, message: "请输入联系人名字", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入联系人名字",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "供应商地址",
|
||||
prop: "address",
|
||||
rules: [{ required: false, message: "请输入供应商地址", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入供应商地址",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
rules: [{ required: false, message: "请输入备注", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入备注",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "sort",
|
||||
rules: [{ required: true, message: "请输入排序", trigger: "blur" }],
|
||||
type: "input-number",
|
||||
attrs: {
|
||||
placeholder: "请输入排序",
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
|
||||
export default reactive(modalConfig);
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
export interface options {
|
||||
label: string;
|
||||
value: string | number;
|
||||
[property: string]: any;
|
||||
}
|
||||
export interface optionObject {
|
||||
[property: string]: options[];
|
||||
}
|
||||
const options: optionObject = {
|
||||
type: [
|
||||
{ label: "正常日志", value: "info" },
|
||||
{ label: "异常日志", value: "error" },
|
||||
],
|
||||
};
|
||||
|
||||
export const switchAttr = {
|
||||
"active-value": 1,
|
||||
"inactive-value": 0,
|
||||
}
|
||||
|
||||
|
||||
export type optionsType = string;
|
||||
|
||||
export function returnOptions(type: optionsType) {
|
||||
return options[type];
|
||||
}
|
||||
|
||||
export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
|
||||
const options = returnOptions(optionsType);
|
||||
if (!options) {
|
||||
return "";
|
||||
}
|
||||
const option = options.find((item) => item.value === value);
|
||||
return option ? option.label : "";
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import Api from "@/api/system/log";
|
||||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
import dayjs from "dayjs";
|
||||
import { returnOptions } from './config'
|
||||
const contentConfig: IContentConfig = {
|
||||
pageName: "sys:user",
|
||||
table: {
|
||||
border: true,
|
||||
highlightCurrentRow: true,
|
||||
},
|
||||
pagination: {
|
||||
background: true,
|
||||
layout: "prev,pager,next,jumper,total,sizes",
|
||||
pageSize: 20,
|
||||
pageSizes: [10, 20, 30, 50],
|
||||
},
|
||||
indexAction: function (params) {
|
||||
let [startTime, endTime] = params.createTime || []
|
||||
if (startTime && endTime) {
|
||||
delete params.createTime;
|
||||
return Api.getList({ ...params, startTime: dayjs(startTime).format('YYYY-MM-DD'), endTime: dayjs(endTime).format('YYYY-MM-DD') });
|
||||
}
|
||||
return Api.getList(params);
|
||||
},
|
||||
pk: "id",
|
||||
toolbar: [
|
||||
{
|
||||
auth: '',
|
||||
text: '清空',
|
||||
name: 'clear',
|
||||
icon: 'delete',
|
||||
type: 'danger'
|
||||
},
|
||||
|
||||
],
|
||||
defaultToolbar: ["refresh", "filter", "search"],
|
||||
cols: [
|
||||
// { type: "selection", width: 50, align: "center" },
|
||||
{
|
||||
label: "用户名",
|
||||
align: "center",
|
||||
prop: "createUserName",
|
||||
},
|
||||
{
|
||||
label: "IP来源",
|
||||
align: "center",
|
||||
prop: "location",
|
||||
},
|
||||
{
|
||||
label: "用户操作",
|
||||
align: "center",
|
||||
prop: "operation",
|
||||
},
|
||||
{
|
||||
label: "请求Url",
|
||||
align: "center",
|
||||
prop: "requestUri",
|
||||
},
|
||||
{
|
||||
label: "请求耗时",
|
||||
align: "center",
|
||||
prop: "time",
|
||||
templet: 'custom',
|
||||
slotName: 'time'
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
align: "center",
|
||||
prop: "createTime",
|
||||
},
|
||||
// {
|
||||
// label: "异常信息",
|
||||
// align: "center",
|
||||
// prop: "errorInfo",
|
||||
// }
|
||||
// , {
|
||||
// label: "日志类型",
|
||||
// align: "center",
|
||||
// prop: "type",
|
||||
// templet: 'custom',
|
||||
// slotName: 'options'
|
||||
// },
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
export default contentConfig;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import Api from "@/api/product/vendor";
|
||||
import { returnOptions, switchAttr } from "./config";
|
||||
import type { IModalConfig } from "@/components/CURD/types";
|
||||
|
||||
const modalConfig: IModalConfig = {
|
||||
pageName: "sys:user",
|
||||
dialog: {
|
||||
title: "编辑供应商",
|
||||
width: 800,
|
||||
draggable: true,
|
||||
},
|
||||
form: {
|
||||
labelWidth: 140,
|
||||
},
|
||||
formAction: function (data) {
|
||||
return Api.edit({ ...data });
|
||||
},
|
||||
beforeSubmit(data) {
|
||||
console.log("提交之前处理", data);
|
||||
},
|
||||
formItems: [
|
||||
|
||||
{
|
||||
label: "名称",
|
||||
prop: "name",
|
||||
rules: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入名称",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "联系人名字",
|
||||
prop: "contactName",
|
||||
rules: [{ required: false, message: "请输入联系人名字", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入联系人名字",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "联系人电话",
|
||||
prop: "telephone",
|
||||
rules: [{ required: false, message: "请输入联系人名字", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入联系人名字",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "供应商地址",
|
||||
prop: "address",
|
||||
rules: [{ required: false, message: "请输入供应商地址", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入供应商地址",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
rules: [{ required: false, message: "请输入备注", trigger: "blur" }],
|
||||
attrs: {
|
||||
placeholder: "请输入备注",
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "sort",
|
||||
rules: [{ required: true, message: "请输入排序", trigger: "blur" }],
|
||||
type: "input-number",
|
||||
attrs: {
|
||||
placeholder: "请输入排序",
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
|
||||
export default reactive(modalConfig);
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import type { ISearchConfig } from "@/components/CURD/types";
|
||||
import { returnOptions } from './config'
|
||||
const searchConfig: ISearchConfig = {
|
||||
pageName: "sys:user",
|
||||
formItems: [
|
||||
{
|
||||
type: "select",
|
||||
options: returnOptions('type'),
|
||||
label: "日志类型",
|
||||
prop: "type",
|
||||
attrs: {
|
||||
placeholder: "请选择日志类型",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "200px",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'date-picker',
|
||||
label: "创建时间",
|
||||
prop: "createTime",
|
||||
attrs: {
|
||||
type: "daterange",
|
||||
rangeSeparator: "-",
|
||||
startPlaceholder: "开始日期",
|
||||
endPlaceholder: "结束日期",
|
||||
format: "YYYY-MM-DD",
|
||||
clearable: true,
|
||||
style: {
|
||||
width: "300px",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
export default searchConfig;
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 列表 -->
|
||||
<!-- 搜索 -->
|
||||
<page-search
|
||||
ref="searchRef"
|
||||
:search-config="searchConfig"
|
||||
@query-click="handleQueryClick"
|
||||
@reset-click="handleResetClick"
|
||||
/>
|
||||
<!-- 列表 -->
|
||||
<page-content
|
||||
ref="contentRef"
|
||||
:content-config="contentConfig"
|
||||
@add-click="handleAddClick"
|
||||
@edit-click="handleEditClick"
|
||||
@export-click="handleExportClick"
|
||||
@search-click="handleSearchClick"
|
||||
@toolbar-click="handleToolbarClick"
|
||||
@operat-click="handleOperatClick"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
||||
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #time="scope">
|
||||
<el-tag v-if="scope.row.requestTime <= 300">{{ scope.row.requestTime }}ms</el-tag>
|
||||
<el-tag v-else-if="scope.row.requestTime <= 1000" type="warning">
|
||||
{{ scope.row.requestTime }}ms
|
||||
</el-tag>
|
||||
<el-tag v-else type="danger">{{ scope.row.requestTime }}ms</el-tag>
|
||||
</template>
|
||||
<template #options="scope">
|
||||
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
||||
</template>
|
||||
<template #switch="scope">
|
||||
<el-switch
|
||||
v-model="scope.row[scope.prop]"
|
||||
disabled
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
></el-switch>
|
||||
</template>
|
||||
<template #mobile="scope">
|
||||
<el-text>{{ scope.row[scope.prop] }}</el-text>
|
||||
<copy-button
|
||||
v-if="scope.row[scope.prop]"
|
||||
:text="scope.row[scope.prop]"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</template>
|
||||
</page-content>
|
||||
|
||||
<!-- 新增 -->
|
||||
<page-modal
|
||||
ref="addModalRef"
|
||||
:modal-config="addModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
></page-modal>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<page-modal
|
||||
ref="editModalRef"
|
||||
:modal-config="editModalConfig"
|
||||
@submit-click="handleSubmitClick"
|
||||
></page-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import logApi from "@/api/system/log";
|
||||
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import type { IObject, IOperatData } from "@/components/CURD/types";
|
||||
import usePage from "@/components/CURD/usePage";
|
||||
import addModalConfig from "./config/add";
|
||||
import contentConfig from "./config/content";
|
||||
import editModalConfig from "./config/edit";
|
||||
import searchConfig from "./config/search";
|
||||
import { returnOptionsLabel } from "./config/config";
|
||||
|
||||
const {
|
||||
searchRef,
|
||||
contentRef,
|
||||
addModalRef,
|
||||
editModalRef,
|
||||
handleQueryClick,
|
||||
handleResetClick,
|
||||
// handleAddClick,
|
||||
// handleEditClick,
|
||||
handleSubmitClick,
|
||||
handleExportClick,
|
||||
handleSearchClick,
|
||||
handleFilterChange,
|
||||
} = usePage();
|
||||
|
||||
// 新增
|
||||
async function handleAddClick() {
|
||||
addModalRef.value?.setModalVisible();
|
||||
// addModalConfig.formItems[2]!.attrs!.data =
|
||||
}
|
||||
// 编辑
|
||||
async function handleEditClick(row: IObject) {
|
||||
editModalRef.value?.handleDisabled(false);
|
||||
editModalRef.value?.setModalVisible();
|
||||
// 根据id获取数据进行填充
|
||||
console.log(row);
|
||||
editModalRef.value?.setFormData({ ...row });
|
||||
}
|
||||
1;
|
||||
// 其他工具栏
|
||||
function handleToolbarClick(name: string) {
|
||||
console.log(name);
|
||||
if (name === "clear") {
|
||||
ElMessageBox.confirm("确认清空所有操作日志吗?", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
logApi.clear().then((res) => {
|
||||
ElMessage.success("清空成功");
|
||||
contentRef.value?.fetchPageData();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 其他操作列
|
||||
async function handleOperatClick(data: IOperatData) {
|
||||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue