添加注释，测试功能，选择部门组件报错，会员详情积分字段展示错误，售后原因添加标识判断是新增还是编辑
mabo
parent
9130485631
commit
a198fc0161
|
|
@ -26,7 +26,6 @@
|
|||
"pinyin": "^2.9.0",
|
||||
"print-js": "^1.0.63",
|
||||
"qrcodejs2": "0.0.2",
|
||||
"quill": "^1.3.7",
|
||||
"sass-loader": "^8.0.2",
|
||||
"sockjs-client": "^1.4.0",
|
||||
"stompjs": "^2.3.3",
|
||||
|
|
|
|||
|
|
@ -29,8 +29,6 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/wangeditor@3.1.1/release/wangEditor.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -36,12 +36,6 @@ export const otherRouter = {
|
|||
name: "change_password",
|
||||
component: () => import("@/views/change-password/change-password.vue")
|
||||
},
|
||||
{
|
||||
path: "message",
|
||||
title: "消息中心",
|
||||
name: "message_index",
|
||||
component: () => import("@/views/message/message.vue")
|
||||
},
|
||||
{
|
||||
path: "category",
|
||||
title: "类型列表",
|
||||
|
|
@ -72,12 +66,6 @@ export const otherRouter = {
|
|||
name: "shop-detail",
|
||||
component: () => import("@/views/seller/shop/shopDetail.vue")
|
||||
},
|
||||
{
|
||||
path: "add_message",
|
||||
title: "会员站内信",
|
||||
name: "add_message",
|
||||
component: () => import("@/views/member/notice/addMessage.vue")
|
||||
},
|
||||
{
|
||||
path: "bill-detail",
|
||||
title: "结算单详情",
|
||||
|
|
|
|||
|
|
@ -24,9 +24,6 @@
|
|||
</Row>
|
||||
<!-- 拼图验证码 -->
|
||||
<verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
|
||||
<div v-if="socialLogining">
|
||||
<RectLoading />
|
||||
</div>
|
||||
<Footer />
|
||||
</Col>
|
||||
<!-- <LangSwitch /> -->
|
||||
|
|
@ -40,15 +37,11 @@ import Cookies from "js-cookie";
|
|||
import Header from "@/views/main-components/header";
|
||||
import Footer from "@/views/main-components/footer";
|
||||
import LangSwitch from "@/views/main-components/lang-switch";
|
||||
import RectLoading from "@/views/my-components/lili/rect-loading";
|
||||
import CountDownButton from "@/views/my-components/lili/count-down-button";
|
||||
import util from "@/libs/util.js";
|
||||
import verify from "@/views/my-components/verify";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountDownButton,
|
||||
RectLoading,
|
||||
LangSwitch,
|
||||
Header,
|
||||
Footer,
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
<DropdownItem v-if="res.waitPayBill" @click.native="navigateTo('accountStatementBill')">
|
||||
<Badge :count="res.waitPayBill">待与商家对账</Badge>
|
||||
</DropdownItem>
|
||||
|
||||
<div></div>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,6 @@ export default {
|
|||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
// 带多条件搜索参数获取表单数据 请自行修改接口
|
||||
getUserWallet(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
|
|
|
|||
|
|
@ -64,13 +64,13 @@
|
|||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card class="mt_10">
|
||||
<Tabs type="point" @on-click="memberInfoChange">
|
||||
<TabPane label="TA的积分" name="point">
|
||||
<div class="pointsTitle" style="justify-content: flex-start; text-align: left;">
|
||||
<div style="width: 120px;">
|
||||
<div class="points-top-title">
|
||||
积分余额
|
||||
剩余积分
|
||||
</div>
|
||||
<div class="points-top-text">
|
||||
{{memberInfo.point?memberInfo.point:0}}
|
||||
|
|
@ -85,8 +85,6 @@
|
|||
:data="pointData"
|
||||
class="mt_10"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="pointChangeSort"
|
||||
>
|
||||
</Table>
|
||||
|
||||
|
|
@ -174,8 +172,6 @@
|
|||
:data="orderData"
|
||||
ref="table"
|
||||
class="mt_10"
|
||||
sortable="custom"
|
||||
@on-sort-change="orderChangeSort"
|
||||
>
|
||||
</Table>
|
||||
|
||||
|
|
@ -253,8 +249,6 @@
|
|||
:data="walletData"
|
||||
ref="table"
|
||||
class="mt_10"
|
||||
sortable="custom"
|
||||
@on-sort-change="walletChangeSort"
|
||||
>
|
||||
</Table>
|
||||
|
||||
|
|
@ -295,8 +289,6 @@
|
|||
:data="receiptRecordData"
|
||||
class="mt_10"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="walletChangeSort"
|
||||
>
|
||||
<template slot="orderSnSlot" slot-scope="scope">
|
||||
|
||||
|
|
@ -428,7 +420,7 @@
|
|||
key: "point",
|
||||
width: 150,
|
||||
render: (h, params) => {
|
||||
if (params.row.pointType == 1) {
|
||||
if (params.row.pointType == 'INCREASE') {
|
||||
return h('div', [
|
||||
h('span', {
|
||||
style: {
|
||||
|
|
@ -1079,6 +1071,7 @@
|
|||
,
|
||||
//积分记录页数变化
|
||||
pointChangePageSize(v) {
|
||||
this.pointSearchForm.pageNumber = 1;
|
||||
this.pointSearchForm.pageSize = v;
|
||||
this.getPointData();
|
||||
}
|
||||
|
|
@ -1091,6 +1084,7 @@
|
|||
,
|
||||
//会员地址记录页数变化
|
||||
addressChangePageSize(v) {
|
||||
this.addressSearchForm.pageNumber = 1;
|
||||
this.addressSearchForm.pageSize = v;
|
||||
this.getPointData();
|
||||
},
|
||||
|
|
@ -1103,6 +1097,7 @@
|
|||
,
|
||||
//余额记录页数变化
|
||||
walletChangePageSize(v) {
|
||||
this.walletSearchForm.pageNumber = 1;
|
||||
this.walletSearchForm.pageSize = v;
|
||||
this.getDepositLogData();
|
||||
},
|
||||
|
|
@ -1115,31 +1110,11 @@
|
|||
,
|
||||
//订单记录页数变化
|
||||
orderChangePageSize(v) {
|
||||
this.orderSearchForm.pageNumber = 1;
|
||||
this.orderSearchForm.pageSize = v;
|
||||
this.getOrderData();
|
||||
},
|
||||
orderChangeSort(e) {
|
||||
this.orderSearchForm.sort = e.key;
|
||||
this.orderSearchForm.order = e.order;
|
||||
this.getOrderData();
|
||||
},
|
||||
addressChangeSort(e) {
|
||||
this.addressSearchForm.sort = e.key;
|
||||
this.addressSearchForm.order = e.order;
|
||||
this.getPointData();
|
||||
}
|
||||
|
||||
,
|
||||
walletChangeSort(e) {
|
||||
this.walletSearchForm.sort = e.key;
|
||||
this.walletSearchForm.order = e.order;
|
||||
this.getDepositLogData();
|
||||
},
|
||||
pointChangeSort(e) {
|
||||
this.pointSearchForm.sort = e.key;
|
||||
this.pointSearchForm.order = e.order;
|
||||
this.getPointData();
|
||||
},
|
||||
// 起止时间从新赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.orderSearchForm.startDate = v[0];
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.wangEditor {
|
||||
.ivu-form-item-content {
|
||||
line-height: unset !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,211 +0,0 @@
|
|||
<style lang="scss" scoped>
|
||||
@import "../message-manage/messageManage.scss";
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<Card>
|
||||
<p slot="title">
|
||||
<span v-if="type==0">发送新消息</span>
|
||||
<span v-else>编辑消息</span>
|
||||
</p>
|
||||
<Row>
|
||||
<Form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:label-width="90"
|
||||
:rules="formValidate"
|
||||
style="position:relative"
|
||||
>
|
||||
<FormItem label="标题" prop="title">
|
||||
<Input v-model="form.title" style="width:600px" />
|
||||
</FormItem>
|
||||
<FormItem label="内容" prop="content" class="wangEditor">
|
||||
<editor v-model="form.content"></editor>
|
||||
</FormItem>
|
||||
<div v-if="type==0">
|
||||
<FormItem label="发送范围">
|
||||
<RadioGroup type="button" button-style="solid" v-model="form.sendType" >
|
||||
<Radio label="ALL">全部会员</Radio>
|
||||
<Radio label="SELECT">指定会员</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<div>
|
||||
<FormItem label="选择用户" v-if="form.sendType==='SELECT'">
|
||||
<member-choose text="选择发送用户" @on-change="handleSelectUser"></member-choose>
|
||||
</FormItem>
|
||||
</div>
|
||||
</div>
|
||||
<Form-item class="br">
|
||||
<Button
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="handleSubmit"
|
||||
style="width:100px"
|
||||
>提交</Button>
|
||||
<Button @click="handelCancel">取消</Button>
|
||||
</Form-item>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
</Form>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import editor from "@/views/my-components/lili/editor";
|
||||
import memberChoose from "@/views/my-components/lili/member-choose";
|
||||
export default {
|
||||
name: "add_message",
|
||||
components: {
|
||||
memberChoose,
|
||||
editor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: 0, // 0 发送新消息 1 编辑消息
|
||||
loading: false, // 表单加载状态
|
||||
selectUsers: [], // 选择用户
|
||||
modalTitle: "", // 添加或编辑标题
|
||||
form: {
|
||||
// 添加或编辑表单对象初始化数据
|
||||
title: "",
|
||||
content: "",
|
||||
sendType: "ALL",
|
||||
memberIds: ""
|
||||
},
|
||||
formValidate: {
|
||||
// 表单验证规则
|
||||
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
|
||||
content: [{ required: true, message: "内容不能为空", trigger: "blur" }]
|
||||
},
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
backRoute: "" // back路由路径
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.type = this.$route.query.type;
|
||||
this.backRoute = this.$route.query.backRoute;
|
||||
if (this.type == 1) {
|
||||
this.form.id = this.$route.query.id;
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.loading = true;
|
||||
getMessageDataById(this.form.id).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// 转换null为""
|
||||
let v = res.result;
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let data = JSON.parse(str);
|
||||
this.form = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
|
||||
let ids = [];
|
||||
this.selectUsers.forEach(e => {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
if (ids.length > 0) {
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
}
|
||||
this.form.memberIds = ids;
|
||||
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
if (this.modalType === 0) {
|
||||
// 添加 避免编辑后传入id等数据 记得删除
|
||||
this.postRequest("/memberNoticeSenter/insertOrUpdate", this.form).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 编辑
|
||||
this.postRequest("/memberNoticeSenter/insertOrUpdate", this.form).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handelSubmit() {
|
||||
console.log()
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
if (this.type == 0) {
|
||||
// 添加 避免编辑后传入id等数据 记得删除
|
||||
delete this.form.id;
|
||||
// 用户id数据
|
||||
|
||||
addMessage(this.form).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.closeCurrentPage();
|
||||
}
|
||||
});
|
||||
} else if (this.type == 1) {
|
||||
// 编辑
|
||||
editMessage(this.form).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.closeCurrentPage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSelectUser(v) {
|
||||
this.selectUsers = v;
|
||||
},
|
||||
handelCancel() {
|
||||
this.closeCurrentPage();
|
||||
},
|
||||
// 关闭当前页面
|
||||
closeCurrentPage() {
|
||||
this.$store.commit("removeTag", "add_message");
|
||||
localStorage.pageOpenedList = JSON.stringify(
|
||||
this.$store.state.app.pageOpenedList
|
||||
);
|
||||
this.$router.push({
|
||||
name: this.backRoute
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
// 监听路由变化
|
||||
$route(to, from) {
|
||||
if (to.name == "member-notice-sender") {
|
||||
this.type = this.$route.query.type;
|
||||
if (this.type == 1) {
|
||||
this.form.id = this.$route.query.id;
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,370 +0,0 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
:label-width="70"
|
||||
class="search-form"
|
||||
>
|
||||
<Form-item label="标题" prop="title">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入标题"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="消息内容" prop="content">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.content"
|
||||
placeholder="请输入消息内容"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<span v-if="drop">
|
||||
<Form-item label="发送类型" prop="sendType">
|
||||
<Select
|
||||
v-model="searchForm.sendType"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<Option value="ALL">全站会员</Option>
|
||||
<Option value="SELECT">指定会员</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="创建人" prop="createBy">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.createBy"
|
||||
placeholder="请输入创建人"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
</span>
|
||||
<Form-item style="margin-left: -35px" class="br">
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search"
|
||||
>搜索</Button
|
||||
>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
<a class="drop-down" @click="dropDown">
|
||||
{{ dropDownContent }}
|
||||
<Icon :type="dropDownIcon"></Icon>
|
||||
</a>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Row>
|
||||
<Row class="operation">
|
||||
<Button @click="add" type="primary" icon="md-add">发送新消息</Button>
|
||||
<Button @click="delAll" icon="md-trash">批量删除</Button>
|
||||
<Button @click="getDataList" icon="md-refresh">刷新</Button>
|
||||
</Row>
|
||||
<Row v-show="openTip">
|
||||
<Alert show-icon>
|
||||
已选择 <span class="select-count">{{ selectCount }}</span> 项
|
||||
<a class="select-clear" @click="clearSelectAll">清空</a>
|
||||
</Alert>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "member-notice-sender",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
openSearch: true, // 显示搜索
|
||||
openTip: true, // 显示提示
|
||||
loading: true, // 表单加载状态
|
||||
modalType: 0, // 添加或编辑标识
|
||||
modalVisible: false, // 添加或编辑显示
|
||||
modalTitle: "", // 添加或编辑标题
|
||||
drop: false, // 更多搜索项
|
||||
dropDownContent: "展开", // drop中文提示
|
||||
dropDownIcon: "ios-arrow-down", // drop图标
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
},
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
type: "index",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "标题",
|
||||
key: "title",
|
||||
minWidth: 120,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
title: "发送类型",
|
||||
key: "sendType",
|
||||
minWidth: 120,
|
||||
sortable: false,
|
||||
|
||||
render: (h, params) => {
|
||||
if (params.row.sendType == "ALL") {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "全部会员",
|
||||
},
|
||||
}),
|
||||
]);
|
||||
} else {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "指定会员",
|
||||
},
|
||||
}),
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
key: "createBy",
|
||||
minWidth: 120,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
minWidth: 120,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
icon: "md-trash",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
handleReset() {
|
||||
this.$refs.searchForm.resetFields();
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
// 重新加载数据
|
||||
this.getDataList();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
dropDown() {
|
||||
if (this.drop) {
|
||||
this.dropDownContent = "展开";
|
||||
this.dropDownIcon = "ios-arrow-down";
|
||||
} else {
|
||||
this.dropDownContent = "收起";
|
||||
this.dropDownIcon = "ios-arrow-up";
|
||||
}
|
||||
this.drop = !this.drop;
|
||||
},
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
// 带多条件搜索参数获取表单数据 请自行修改接口
|
||||
this.getRequest("/memberNoticeSenter/getByPage", this.searchForm).then(
|
||||
(res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
}
|
||||
);
|
||||
// 以下为模拟数据
|
||||
//this.data = [
|
||||
//];
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
add() {
|
||||
let query = { type: 0, backRoute: this.$route.name };
|
||||
this.$router.push({
|
||||
name: "add_message",
|
||||
query: query,
|
||||
});
|
||||
},
|
||||
edit(v) {
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑";
|
||||
this.$refs.form.resetFields();
|
||||
// 转换null为""
|
||||
for (let attr in v) {
|
||||
if (v[attr] === null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let data = JSON.parse(str);
|
||||
this.form = data;
|
||||
this.modalVisible = true;
|
||||
},
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
// 记得确认修改此处
|
||||
content: "您确认要删除么?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 删除
|
||||
this.deleteRequest("/memberNoticeSenter/delByIds/" + v.id).then(
|
||||
(res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getDataList();
|
||||
}
|
||||
}
|
||||
);
|
||||
// 模拟请求成功
|
||||
//this.$Message.success("操作成功");
|
||||
//this.$Modal.remove();
|
||||
//this.getDataList();
|
||||
},
|
||||
});
|
||||
},
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
// 批量删除
|
||||
this.deleteRequest("/memberNoticeSenter/delByIds/" + ids).then(
|
||||
(res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.clearSelectAll();
|
||||
this.getDataList();
|
||||
}
|
||||
}
|
||||
);
|
||||
// 模拟请求成功
|
||||
//this.$Message.success("操作成功");
|
||||
//this.$Modal.remove();
|
||||
//this.clearSelectAll();
|
||||
//this.getDataList();
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,55 +1,50 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Row>
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
:label-width="70"
|
||||
class="search-form"
|
||||
>
|
||||
<Form-item label="会员名称" prop="username">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button >
|
||||
</Form>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</Row>
|
||||
|
||||
<Card style="padding:0 10px 10px 0">
|
||||
<Form
|
||||
@keydown.enter.native="handleSearch"
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
style="margin-top:10px"
|
||||
:label-width="70"
|
||||
class="search-form"
|
||||
>
|
||||
<Form-item label="会员名称" prop="username">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button >
|
||||
</Form>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
class="mt_10"
|
||||
>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -57,9 +52,9 @@
|
|||
import region from "@/views/lili-components/region";
|
||||
import * as API_Member from "@/api/member.js";
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
import * as RegExp from '@/libs/RegExp.js';
|
||||
|
||||
export default {
|
||||
// 积分历史页面
|
||||
name: "point",
|
||||
components: {
|
||||
region,
|
||||
|
|
@ -67,14 +62,11 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
descFlag: false, //编辑查看框
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
{
|
||||
title: "会员名称",
|
||||
|
|
@ -141,41 +133,27 @@
|
|||
callback(val) {
|
||||
this.$emit("callback", val);
|
||||
},
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getData();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getData();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getData();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getData();
|
||||
},
|
||||
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getData();
|
||||
},
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
//查新积分列表
|
||||
getData() {
|
||||
this.loading = true;
|
||||
|
|
|
|||
|
|
@ -1,161 +0,0 @@
|
|||
.message {
|
||||
&-main-con {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
&-mainlist-con {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
width: 300px;
|
||||
bottom: 0;
|
||||
padding: 10px 0;
|
||||
div {
|
||||
padding: 10px;
|
||||
margin: 0 20px;
|
||||
border-bottom: 1px dashed #d2d3d2;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
.mes-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.message-count-badge-outer {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.message-count-badge {
|
||||
background: #d2d3d2;
|
||||
}
|
||||
.message-count-badge-red {
|
||||
background: #ed3f14;
|
||||
}
|
||||
.mes-type-btn-text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content-con {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 300px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, .1);
|
||||
overflow: auto;
|
||||
.message-title-list-con {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.message-content-top-bar {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-bottom: 1px solid #dededb;
|
||||
.mes-back-btn-con {
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
.mes-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 70px;
|
||||
bottom: 0;
|
||||
left: 70px;
|
||||
line-height: 40px;
|
||||
padding: 0 30px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.mes-time-con {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #b7b7b5;
|
||||
}
|
||||
.message-content-body {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
.message-content {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-fix {
|
||||
position: fixed;
|
||||
right: 2vw;
|
||||
bottom: 3vh;
|
||||
}
|
||||
|
||||
.back-message-list-enter,
|
||||
.back-message-list-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.back-message-list-enter-active,
|
||||
.back-message-list-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.back-message-list-enter-to,
|
||||
.back-message-list-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.view-message-enter,
|
||||
.view-message-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.view-message-enter-active,
|
||||
.view-message-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.view-message-enter-to,
|
||||
.view-message-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mes-current-type-btn-enter,
|
||||
.mes-current-type-btn-leave-to {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.mes-current-type-btn-enter-active,
|
||||
.mes-current-type-btn-leave-active {
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.mes-current-type-btn-enter-to,
|
||||
.mes-current-type-btn-leave {
|
||||
opacity: 1;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -1,464 +0,0 @@
|
|||
<style lang="scss" scoped>
|
||||
@import "./message.scss";
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="message-main-con">
|
||||
<div class="message-mainlist-con">
|
||||
<div>
|
||||
<Button @click="setCurrentMesType('unread')" size="large" long type="text">
|
||||
<div class="mes-wrap">
|
||||
<transition name="mes-current-type-btn">
|
||||
<Icon v-show="currentMessageType == 'unread'" type="md-checkmark"></Icon>
|
||||
</transition>
|
||||
<span class="mes-type-btn-text">未读消息</span>
|
||||
<Badge
|
||||
class="message-count-badge-outer"
|
||||
class-name="message-count-badge-red"
|
||||
:count="unreadCount"
|
||||
></Badge>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="setCurrentMesType('hasread')" size="large" long type="text">
|
||||
<div class="mes-wrap">
|
||||
<transition name="mes-current-type-btn">
|
||||
<Icon v-show="currentMessageType == 'hasread'" type="md-checkmark"></Icon>
|
||||
</transition>
|
||||
<span class="mes-type-btn-text">已读消息</span>
|
||||
<Badge
|
||||
class="message-count-badge-outer"
|
||||
class-name="message-count-badge"
|
||||
:count="hasreadCount"
|
||||
></Badge>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="setCurrentMesType('recyclebin')" size="large" long type="text">
|
||||
<div class="mes-wrap">
|
||||
<transition name="mes-current-type-btn">
|
||||
<Icon v-show="currentMessageType == 'recyclebin'" type="md-checkmark"></Icon>
|
||||
</transition>
|
||||
<span class="mes-type-btn-text">回收站</span>
|
||||
<Badge
|
||||
class="message-count-badge-outer"
|
||||
class-name="message-count-badge"
|
||||
:count="recyclebinCount"
|
||||
></Badge>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content-con">
|
||||
<transition name="view-message">
|
||||
<div v-if="showMesTitleList" class="message-title-list-con">
|
||||
<Table
|
||||
ref="messageList"
|
||||
:loading="loading"
|
||||
:columns="mesTitleColumns"
|
||||
:data="currentMesList"
|
||||
:no-data-text="noDataText"
|
||||
></Table>
|
||||
<Page
|
||||
:current="params.pageNumber"
|
||||
:total="total"
|
||||
:page-size="params.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[5,10]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
class="page-fix"
|
||||
></Page>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="back-message-list">
|
||||
<div v-if="!showMesTitleList" class="message-view-content-con">
|
||||
<div class="message-content-top-bar">
|
||||
<span class="mes-back-btn-con">
|
||||
<Button type="text" @click="backMesTitleList">
|
||||
<Icon type="ios-arrow-back"></Icon> 返回
|
||||
</Button>
|
||||
</span>
|
||||
<h3 class="mes-title">{{ mes.title }}</h3>
|
||||
</div>
|
||||
<p class="mes-time-con">
|
||||
<Icon type="android-time"></Icon>
|
||||
{{ mes.time }}
|
||||
</p>
|
||||
<div class="message-content-body">
|
||||
<p class="message-content" v-html="mes.content">{{ mes.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from "js-cookie";
|
||||
import {
|
||||
getMessageSendData,
|
||||
editMessageSend,
|
||||
deleteMessageSend
|
||||
} from "@/api/index";
|
||||
export default {
|
||||
name: "message_index",
|
||||
data() {
|
||||
const markAsreadBtn = (h, params) => {
|
||||
return h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
icon: "md-eye-off",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
// 标记已读
|
||||
let v = params.row;
|
||||
// 转换null为""
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let data = JSON.parse(str);
|
||||
data.status = 1;
|
||||
this.loading = true;
|
||||
editMessageSend(data).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.unreadCount -= 1;
|
||||
this.hasreadCount += 1;
|
||||
this.$store.commit("setMessageCount", this.unreadCount);
|
||||
this.refreshMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
"标为已读"
|
||||
);
|
||||
};
|
||||
const deleteMesBtn = (h, params) => {
|
||||
return h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
icon: "md-trash",
|
||||
size: "small",
|
||||
type: "error"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
// 移除
|
||||
let v = params.row;
|
||||
// 转换null为""
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let data = JSON.parse(str);
|
||||
data.status = 2;
|
||||
this.loading = true;
|
||||
editMessageSend(data).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.hasreadCount -= 1;
|
||||
this.recyclebinCount += 1;
|
||||
this.refreshMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
"删除"
|
||||
);
|
||||
};
|
||||
const restoreBtn = (h, params) => {
|
||||
return h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
icon: "md-redo",
|
||||
size: "small"
|
||||
},
|
||||
style: {
|
||||
margin: "0 5px 0 0"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
// 还原
|
||||
let v = params.row;
|
||||
// 转换null为""
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let data = JSON.parse(str);
|
||||
data.status = 1;
|
||||
this.loading = true;
|
||||
editMessageSend(data).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.recyclebinCount -= 1;
|
||||
this.hasreadCount += 1;
|
||||
this.refreshMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
"还原"
|
||||
);
|
||||
};
|
||||
const deleteRealBtn = (h, params) => {
|
||||
return h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
icon: "md-trash",
|
||||
size: "small",
|
||||
type: "error"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
// 彻底删除
|
||||
let v = params.row;
|
||||
this.loading = true;
|
||||
deleteMessageSend(v.id).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.recyclebinCount -= 1;
|
||||
this.refreshMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
"彻底删除"
|
||||
);
|
||||
};
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
params: { // 请求参数
|
||||
userId: JSON.parse(Cookies.get("userInfo")).id,
|
||||
status: 0,
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc" // 默认排序方式
|
||||
},
|
||||
total: 0, // 消息总数
|
||||
totalUnread: 0, // 所有未读消息数
|
||||
totalRead: 0, // 所有已读消息数
|
||||
totalRemove: 0, // 所有回收站消息数
|
||||
currentMesList: [], // 当前消息列表
|
||||
unreadMesList: [], // 未读消息列表
|
||||
hasreadMesList: [], // 已读消息列表
|
||||
recyclebinList: [], // 回收站消息
|
||||
currentMessageType: "unread", // 展示消息类型
|
||||
showMesTitleList: true, // 展示消息列表
|
||||
unreadCount: 0, // 未读数
|
||||
hasreadCount: 0, // 已读数
|
||||
recyclebinCount: 0, // 回收站消息数量
|
||||
noDataText: "暂无未读消息", // 无消息提示
|
||||
mes: { // 信息表单
|
||||
title: "",
|
||||
time: "",
|
||||
content: ""
|
||||
},
|
||||
mesTitleColumns: [
|
||||
{
|
||||
type: "index",
|
||||
width: 50,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: " ",
|
||||
key: "title",
|
||||
align: "left",
|
||||
ellipsis: true,
|
||||
render: (h, params) => {
|
||||
return h("span", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
margin: "0 30px 0 0"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.showMesTitleList = false;
|
||||
this.mes.title = params.row.title;
|
||||
this.mes.time = params.row.createTime;
|
||||
this.getContent(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"【" + params.row.type + "】 " + params.row.title
|
||||
)
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: " ",
|
||||
key: "time",
|
||||
align: "center",
|
||||
width: 190,
|
||||
render: (h, params) => {
|
||||
return h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: "md-time",
|
||||
size: 16
|
||||
},
|
||||
style: {
|
||||
margin: "0 5px 3px 0"
|
||||
}
|
||||
}),
|
||||
h("span", params.row.createTime)
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: " ",
|
||||
key: "asread",
|
||||
align: "center",
|
||||
width: 210,
|
||||
render: (h, params) => {
|
||||
if (this.currentMessageType == "unread") {
|
||||
return h("div", [markAsreadBtn(h, params)]);
|
||||
} else if (this.currentMessageType == "hasread") {
|
||||
return h("div", [deleteMesBtn(h, params)]);
|
||||
} else {
|
||||
return h("div", [
|
||||
restoreBtn(h, params),
|
||||
deleteRealBtn(h, params)
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changePage(v) {
|
||||
this.params.pageNumber = v;
|
||||
this.refreshMessage();
|
||||
},
|
||||
changePageSize(v) {
|
||||
this.params.pageSize = v;
|
||||
this.refreshMessage();
|
||||
},
|
||||
refreshMessage() {
|
||||
let status = 0;
|
||||
let type = this.currentMessageType;
|
||||
if (type == "unread") {
|
||||
status = 0;
|
||||
} else if (type == "hasread") {
|
||||
status = 1;
|
||||
} else {
|
||||
status = 2;
|
||||
}
|
||||
this.params.status = status;
|
||||
this.loading = true;
|
||||
getMessageSendData(this.params).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.currentMesList = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
initMessage() {
|
||||
this.params.status = 0;
|
||||
getMessageSendData(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.unreadCount = res.result.total;
|
||||
this.initReadMessage();
|
||||
}
|
||||
});
|
||||
},
|
||||
initReadMessage() {
|
||||
this.params.status = 1;
|
||||
getMessageSendData(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.hasreadCount = res.result.total;
|
||||
this.initRemoveMessage();
|
||||
}
|
||||
});
|
||||
},
|
||||
initRemoveMessage() {
|
||||
this.params.status = 2;
|
||||
getMessageSendData(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.recyclebinCount = res.result.total;
|
||||
this.setCurrentMesType("unread");
|
||||
}
|
||||
});
|
||||
},
|
||||
editMessage(status) {
|
||||
editMessageSend().then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteMessage(id) {
|
||||
deleteMessageSend(id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
backMesTitleList() {
|
||||
this.showMesTitleList = true;
|
||||
},
|
||||
setCurrentMesType(type) {
|
||||
if (this.currentMessageType !== type) {
|
||||
this.showMesTitleList = true;
|
||||
}
|
||||
this.currentMessageType = type;
|
||||
if (type == "unread") {
|
||||
this.noDataText = "暂无未读消息";
|
||||
} else if (type == "hasread") {
|
||||
this.noDataText = "暂无已读消息";
|
||||
} else {
|
||||
this.noDataText = "回收站无消息";
|
||||
}
|
||||
this.params.pageNumber = 1;
|
||||
this.refreshMessage();
|
||||
},
|
||||
getContent(v) {
|
||||
this.mes.content = v.content;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMessage();
|
||||
},
|
||||
watch: {
|
||||
// 监听路由变化通过id获取数据
|
||||
$route(to, from) {
|
||||
if (to.name == "message_index") {
|
||||
this.initMessage();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1,633 +0,0 @@
|
|||
<template>
|
||||
<Collapse v-model="open_panel">
|
||||
<Panel name="1">
|
||||
规格名称
|
||||
<div slot="content" class="sku-item-content">
|
||||
<Form :model="skuForm" @submit.native.prevent style="width:100%;">
|
||||
<div v-for="(item, $index) in skuInfo" :key="$index" class="sku_value">
|
||||
<Card :bordered="true" style="margin: 15px 0;">
|
||||
<FormItem label="规格名：" class="sku-item-content-name">
|
||||
<AutoComplete
|
||||
style="width: 150px;"
|
||||
v-model="item.name"
|
||||
:maxlength="30"
|
||||
:data="skuKey"
|
||||
placeholder="请输入规格项名称"
|
||||
:filter-method="filterMethod"
|
||||
@on-change="skuItemChange(item.name,$index)"
|
||||
@keyup.enter.native="editSkuItem(item, $index)"
|
||||
>
|
||||
<!-- @on-focus="getActiveSkuItem(index, $index ,item, val)"
|
||||
@on-blur="editSkuItem(item, $index)"
|
||||
on-change 变更
|
||||
on-focus 聚焦时触发 event
|
||||
on-blur 失焦时触发
|
||||
keyup.enter.native 回车时 -->
|
||||
</AutoComplete>
|
||||
<Button
|
||||
type="error"
|
||||
style="margin-left: 10px;"
|
||||
@click="handleCloseSkuItem($index)"
|
||||
>删除</Button>
|
||||
<Checkbox
|
||||
v-if="$index === 0"
|
||||
style="padding: 0px 0px 0px 30px;"
|
||||
v-model="checkedImage"
|
||||
@on-change="handleChangeImage"
|
||||
>规格图片</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="规格值：" class="sku-item-content-value">
|
||||
<!--规格值文本列表-->
|
||||
<div
|
||||
v-for="(val, index) in item.spec_values"
|
||||
:key="index"
|
||||
style="padding: 0px 20px 10px 0px;float: left"
|
||||
>
|
||||
<div style="display:inline-block;">
|
||||
<AutoComplete
|
||||
style="width: 150px; float: left"
|
||||
v-model="val.value"
|
||||
:maxlength="30"
|
||||
:data="skuValue"
|
||||
placeholder="请输入规格值名称"
|
||||
:filter-method="filterMethod"
|
||||
@on-change="skuValueChange(val.value,$index)"
|
||||
@on-focus="editSkuIValue($index)"
|
||||
@keyup.enter.native="editSkuIValue(item, val, $index, index)"
|
||||
></AutoComplete>
|
||||
<Button
|
||||
type="error"
|
||||
style="float: left;margin-left: 10px"
|
||||
@click="handleCloseSkuValue($index, index)"
|
||||
>删除</Button>
|
||||
</div>
|
||||
<div>
|
||||
<upload-pic-thumb
|
||||
style="text-align: left;"
|
||||
v-show="$index === 0 && checkedImage"
|
||||
v-model="val.spec_image" v-on:change="thumbChange" :multiple="false" v-on:uploadchange="uploadchange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left">
|
||||
<Button type="primary" @click="addSpec($index, item)">添加规格值</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Card>
|
||||
</div>
|
||||
</Form>
|
||||
<Button type="primary" size="mini" @click="addSkuItem">添加规格项目</Button>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel name="2">
|
||||
规格详细
|
||||
<div slot="content">
|
||||
<div slot="content">
|
||||
<Table
|
||||
:columns="skuTableColumn"
|
||||
:data="skuTableData"
|
||||
style="width: 100%;.ivu-table-overflowX{ overflow-x: hidden;}"
|
||||
:span-method="handleSpan"
|
||||
>
|
||||
<template slot-scope="{ row }" slot="sn">
|
||||
<Input
|
||||
v-model="row.sn"
|
||||
placeholder="请输入货号"
|
||||
@on-change="updateSkuTable(row,'sn')"
|
||||
@on-focus="updateSkuTable(row,'sn')"
|
||||
@on-blur="updateSkuTable(row,'sn')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template slot-scope="{ row }" slot="weight">
|
||||
<Input
|
||||
v-model="row.weight"
|
||||
placeholder="请输入重量"
|
||||
@on-change="updateSkuTable(row,'weight')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template slot-scope="{ row }" slot="quantity">
|
||||
<Input
|
||||
v-model="row.quantity"
|
||||
placeholder="请输入库存"
|
||||
@on-change="updateSkuTable(row,'quantity')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template slot-scope="{ row }" slot="cost">
|
||||
<Input
|
||||
v-model="row.cost"
|
||||
placeholder="请输入成本价"
|
||||
@on-change="updateSkuTable(row,'cost')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template slot-scope="{ row }" slot="price">
|
||||
<Input
|
||||
v-model="row.price"
|
||||
placeholder="请输入成本价"
|
||||
@on-change="updateSkuTable(row,'price')"
|
||||
/>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</template>
|
||||
<script>
|
||||
import { regular } from "@/utils";
|
||||
import uploadPicThumb from "../lili/upload-pic-thumb.vue";
|
||||
import cloneObj from "@/utils/index";
|
||||
export default {
|
||||
name: "goodsSku",
|
||||
components: {
|
||||
uploadPicThumb
|
||||
},
|
||||
props: {
|
||||
open_panel: {
|
||||
type: [String, Number],
|
||||
default: false
|
||||
},
|
||||
/** 是否自动生成货号 */
|
||||
productSn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/** 当前商品编号 */
|
||||
goodsSn: {
|
||||
type: [String, Number],
|
||||
default: ['', 0]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/** 请求数据*/
|
||||
skuData: [],
|
||||
|
||||
/** 当前可选择的 规格名称*/
|
||||
skuKey: [],
|
||||
|
||||
/** 当前可选择的 规格值*/
|
||||
skuValue: [],
|
||||
|
||||
/** 表单数据*/
|
||||
skuForm: {},
|
||||
/** 表格头 */
|
||||
skuTableColumn: [],
|
||||
/** 表格数据 */
|
||||
skuTableData: [
|
||||
{
|
||||
sn: '',
|
||||
weight: '',
|
||||
quantity: '',
|
||||
cost: '',
|
||||
price: ''
|
||||
}
|
||||
],
|
||||
/** 要提交的规格数据*/
|
||||
skuInfo: [],
|
||||
|
||||
/** 当前规格项下的规格值列表*/
|
||||
specList: [],
|
||||
|
||||
/** 当前规格项索引 */
|
||||
activeSkuItemIndex: 0,
|
||||
|
||||
/** 当前规格项 */
|
||||
activeSkuItem: {},
|
||||
|
||||
/** 规格图片 */
|
||||
images: [],
|
||||
/** 当前规格值索引 */
|
||||
activeSkuValIndex: 0,
|
||||
|
||||
/** 当前规格值 */
|
||||
activeSkuVal: {},
|
||||
/** 存储未通过校验的单元格位置 */
|
||||
validateError: [],
|
||||
//规格照片
|
||||
checkedImage:false
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
watch: {
|
||||
/** 自动生成货号 */
|
||||
productSn() {
|
||||
if (this.productSn && this.skuTableData.length > 0) {
|
||||
let count = 1
|
||||
this.skuTableData.forEach(key => {
|
||||
key.sn = this.goodsSn + '-00000' + count
|
||||
count++
|
||||
})
|
||||
/** 异步更新skuTableData数据 */
|
||||
this.$emit("getTableData", this.skuTableData);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadchange(url){
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
/** 添加规格项 */
|
||||
addSkuItem() {
|
||||
// 写入对象，下标，具体对象
|
||||
this.$set(this.skuInfo, this.skuInfo.length, {
|
||||
spec_values: []
|
||||
});
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
|
||||
/** 移除当前规格项 进行数据变化*/
|
||||
handleCloseSkuItem($index) {
|
||||
this.skuInfo.splice($index, 1);
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
|
||||
/** 规格变更 */
|
||||
skuItemChange(value, $index) {
|
||||
this.activeSkuItemIndex = $index;
|
||||
//判定是否存在这个规格分组
|
||||
let item = this.findSpec(value);
|
||||
/** 更新skuInfo数据 */
|
||||
this.$set(this.skuInfo[this.activeSkuItemIndex], "name", item.name);
|
||||
this.$set(this.skuInfo[this.activeSkuItemIndex], "spec_values", []);
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
/**
|
||||
* 根据规格项名称，搜索对应的规格对象（如果是服务器设置过的话）
|
||||
*/
|
||||
findSpec(name) {
|
||||
let spec = { name: name };
|
||||
this.skuData.forEach(item => {
|
||||
if (item.name === name) {
|
||||
spec = item;
|
||||
}
|
||||
});
|
||||
return spec;
|
||||
},
|
||||
|
||||
/** 选中/不选中 添加规格图片 是否显示上传组件*/
|
||||
handleChangeImage(val) {
|
||||
this.$set(this.skuInfo, this.skuInfo.length, {});
|
||||
this.skuInfo.splice(this.skuInfo.length - 1, 1);
|
||||
this.checkedImage = val;
|
||||
/** 如果 图片按钮不显示 则置空图片列表中的所有图片数据 并且spec_type设置为0 */
|
||||
if (!val) {
|
||||
this.skuInfo.forEach(key => {
|
||||
if (key.spec_values) {
|
||||
key.spec_values.forEach(item => {
|
||||
item.spec_image = "";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
|
||||
|
||||
},
|
||||
|
||||
/** 规格值 */
|
||||
|
||||
/** 添加当前规格项的规格值*/
|
||||
addSpec($index, item) {
|
||||
this.activeSkuItemIndex = $index;
|
||||
this.$set(
|
||||
this.skuInfo[$index].spec_values,
|
||||
this.skuInfo[$index].spec_values.length,
|
||||
{
|
||||
name: item.name
|
||||
}
|
||||
);
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
|
||||
/** 移除当前规格值 */
|
||||
handleCloseSkuValue($index, index) {
|
||||
this.skuInfo[$index].spec_values.splice(index, 1);
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
|
||||
/** 选择规格值时触发 */
|
||||
skuValueChange(val) {
|
||||
/** 更新skuInfo数据 */
|
||||
let _arr = cloneObj(this.skuInfo[this.activeSkuItemIndex]);
|
||||
this.$set(_arr.spec_values[this.activeSkuValIndex], "name", _arr.name);
|
||||
this.$set(this.skuInfo, this.activeSkuItemIndex, _arr);
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
|
||||
/** 编辑规格值时触发 */
|
||||
editSkuIValue($index) {
|
||||
if (this.skuInfo.length >= $index) {
|
||||
let data = this.findSpec(this.skuInfo[$index].name);
|
||||
this.skuValue = data.value;
|
||||
}
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
/** 获取编辑时的skuInfo信息 */
|
||||
getSkuInfo() {
|
||||
/** 下拉列表数据(skuData)存在时 检测productSkuInfo中对应的规格(spec_id)项 并且赋值于skuInfo中对应的规格项信息（描述 + 名称） */
|
||||
if (this.categoryId) {
|
||||
API_spec.getSpecValuesListData(this.categoryId, {}).then(response => {
|
||||
this.skuData = response;
|
||||
if (
|
||||
this.skuData.length > 0 &&
|
||||
Array.isArray(this.productSkuInfo) &&
|
||||
this.productSkuInfo.length > 0
|
||||
) {
|
||||
this.skuInfo = cloneObj(this.productSkuInfo);
|
||||
if (this.skuInfo.length > 0) {
|
||||
this.skuInfo.forEach(key => {
|
||||
this.skuData.forEach(item => {
|
||||
if (key.spec_id === item.spec_id) {
|
||||
key.name = item.name;
|
||||
key.spec_memo = item.spec_memo;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
/** 如果存在图片则进行显示 */
|
||||
if (this.skuInfo[0].spec_values[0].spec_type === 1) {
|
||||
this.checkedImage = true;
|
||||
}
|
||||
/** 触发一次数据转换（规格选择数据=> 规格表格数据） */
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
},
|
||||
/**
|
||||
* 渲染table所需要的column 和 data
|
||||
*/
|
||||
renderTableData() {
|
||||
this.skuTableColumn = [];
|
||||
this.skuTableData = [];
|
||||
|
||||
//渲染头部
|
||||
|
||||
this.skuInfo.forEach(sku => {
|
||||
//列名称
|
||||
let columnName = sku.name;
|
||||
this.skuTableColumn.push({
|
||||
title: columnName,
|
||||
key: columnName
|
||||
});
|
||||
});
|
||||
this.skuTableColumn.push(
|
||||
{
|
||||
title: "货号",
|
||||
slot: "sn"
|
||||
},
|
||||
{
|
||||
title: "重量",
|
||||
slot: "weight"
|
||||
},
|
||||
{
|
||||
title: "库存",
|
||||
slot: "quantity"
|
||||
},
|
||||
{
|
||||
title: "成本价",
|
||||
slot: "cost"
|
||||
},
|
||||
{
|
||||
title: "价格",
|
||||
slot: "price"
|
||||
}
|
||||
);
|
||||
|
||||
//克隆所有渲染的数据
|
||||
let cloneTemp = cloneObj(this.skuInfo);
|
||||
|
||||
//数据清空一次
|
||||
this.skuTableData = [];
|
||||
//判定 是否存在规格分组
|
||||
if (cloneTemp[0]) {
|
||||
//存放最终结果
|
||||
let result = [];
|
||||
|
||||
//记录存放表格的 key
|
||||
//循环选中的 sku 数据
|
||||
if(this.checkedImage===false){
|
||||
cloneTemp[0].spec_values.forEach(specItem => {
|
||||
result.push({
|
||||
[specItem.name]: specItem.value
|
||||
});
|
||||
});
|
||||
}else{
|
||||
cloneTemp[0].spec_values.forEach(specItem => {
|
||||
result.push({
|
||||
[specItem.name]: specItem.value,
|
||||
images: specItem.spec_image
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
cloneTemp.splice(0, 1);
|
||||
|
||||
result = this.specIterator(result, cloneTemp);
|
||||
result = this.defaultParams(result);
|
||||
this.skuTableData = result;
|
||||
}
|
||||
this.$emit("getTableData", this.skuTableData);
|
||||
},
|
||||
|
||||
/** 自动完成表单所需方法*/
|
||||
filterMethod(value, option) {
|
||||
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
||||
},
|
||||
|
||||
/** 根据分类id获取系统设置规格信息*/
|
||||
Get_SkuInfoByCategory() {
|
||||
if (this.baseInfoForm.categoryId) {
|
||||
getGoodsSpecInfo(this.baseInfoForm.categoryId, {}).then(response => {
|
||||
this.skuData = response;
|
||||
if (this.skuData.length > 0) {
|
||||
this.skuData.forEach(spec => {
|
||||
this.skuKey.push(spec.name);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 检测是否未通过0-99999999之间的数字校验 */
|
||||
isValidate(index, scope) {
|
||||
return this.validateError.some(key => {
|
||||
return key[0] === index && key[1] === scope.$index
|
||||
})
|
||||
},
|
||||
/** 数据改变之后 抛出数据 */
|
||||
updateSkuTable(row, item) {
|
||||
let index = row._index;
|
||||
this.skuTableData[index][item] = row[item];
|
||||
/** 进行自定义校验 判断是否是数字（小数也能通过）重量 */
|
||||
if (
|
||||
(!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(row[item]) &&
|
||||
item === "weight") ||
|
||||
parseInt(row[item]) < 0 ||
|
||||
parseInt(row[item]) > 99999999
|
||||
) {
|
||||
this.$Message.error("请输入0~99999999之间的数字值");
|
||||
return;
|
||||
} else if (
|
||||
(item === "quantity" && !/^[0-9]\d*$/.test(row[item])) ||
|
||||
parseInt(row[item]) < 0 ||
|
||||
parseInt(row[item]) > 99999999
|
||||
) {
|
||||
// 库存
|
||||
this.$Message.error("请输入0~99999999之间的整数");
|
||||
return;
|
||||
} else if (
|
||||
((item === "cost" || item === "price") &&
|
||||
!regular.money.test(row[item])) ||
|
||||
parseInt(row[item]) < 0 ||
|
||||
parseInt(row[item]) > 99999999
|
||||
) {
|
||||
// 成本价 价格
|
||||
this.$Message.error("请输入0~99999999之间的价格");
|
||||
return;
|
||||
}
|
||||
this.skuTableData[index][item] = row[item];
|
||||
this.$emit("getTableData", this.skuTableData);
|
||||
// console.log(999, this.skuTableData)
|
||||
},
|
||||
/**
|
||||
* 迭代属性，形成表格
|
||||
* result 渲染的数据
|
||||
* array spec数据
|
||||
*/
|
||||
specIterator(result, cloneTemp) {
|
||||
//是否还可以循环
|
||||
if (cloneTemp.length > 0) {
|
||||
let table = [];
|
||||
result.forEach(resItem => {
|
||||
let tableItem = [];
|
||||
cloneTemp[0].spec_values.forEach(valItem => {
|
||||
let obj = cloneObj(resItem);
|
||||
obj[valItem.name] = valItem.value;
|
||||
table.push(obj);
|
||||
});
|
||||
});
|
||||
result = [];
|
||||
table.forEach(t => {
|
||||
result.push(t);
|
||||
});
|
||||
//清除当前循环的分组
|
||||
cloneTemp.splice(0, 1);
|
||||
} else {
|
||||
return result;
|
||||
}
|
||||
return this.specIterator(result, cloneTemp);
|
||||
},
|
||||
showData() {
|
||||
// console.log(JSON.stringify(this.skuTableData));
|
||||
// console.warn(this.specList);
|
||||
},
|
||||
/**
|
||||
* 添加固有属性
|
||||
*/
|
||||
defaultParams(tableData) {
|
||||
return tableData;
|
||||
},
|
||||
|
||||
handleSpan({ row, column, rowIndex, columnIndex }) {},
|
||||
|
||||
thumbChange(){
|
||||
this.$emit("getTableData", this.skuTableData);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.sku-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.sku-item-content-name {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.demo-upload-list{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.demo-upload-list img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-upload-list-cover{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
.demo-upload-list:hover .demo-upload-list-cover{
|
||||
display: block;
|
||||
}
|
||||
.demo-upload-list-cover i{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<Button
|
||||
:countTime="countTime"
|
||||
:loading="loading"
|
||||
:type="type"
|
||||
:size="size"
|
||||
:ghost="ghost"
|
||||
:disabled="disabled||clicked"
|
||||
:icon="icon"
|
||||
:shape="shape"
|
||||
:long="long"
|
||||
@click="handleClick"
|
||||
>{{buttonText}}</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "iconChoose",
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: "提交"
|
||||
},
|
||||
autoCountDown: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
countTime: {
|
||||
type: [Number, String],
|
||||
default: 60
|
||||
},
|
||||
suffixText: {
|
||||
type: String,
|
||||
default: "后重试"
|
||||
},
|
||||
type: String,
|
||||
size: String,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
ghost: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: String,
|
||||
shape: String,
|
||||
long: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
buttonText: this.text, // 按钮文字
|
||||
count: Number(this.countTime), // 计时时间
|
||||
clicked: false // 是否可点击
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {},
|
||||
handleClick() {
|
||||
if (this.autoCountDown) {
|
||||
this.clicked = true;
|
||||
this.countDown();
|
||||
}
|
||||
this.$emit("on-click", true);
|
||||
},
|
||||
startCountDown() {
|
||||
this.clicked = true;
|
||||
this.countDown();
|
||||
},
|
||||
countDown() {
|
||||
let that = this;
|
||||
if (this.count == 0) {
|
||||
this.clicked = false;
|
||||
this.count = this.countTime;
|
||||
this.buttonText = this.text;
|
||||
return;
|
||||
} else {
|
||||
this.buttonText = this.count + " 秒" + this.suffixText;
|
||||
this.count--;
|
||||
}
|
||||
setTimeout(function() {
|
||||
that.countDown();
|
||||
}, 1000);
|
||||
},
|
||||
setText(value) {
|
||||
if (value === this.buttonText) {
|
||||
return;
|
||||
}
|
||||
this.buttonText = value;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
text(val) {
|
||||
this.setText(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
||||
|
|
@ -1,346 +0,0 @@
|
|||
<template>
|
||||
<div class="sku-choose">
|
||||
<Button @click="showDrawer=true" :icon="icon">{{ text }}</Button>
|
||||
<span @click="clearSelectData" class="clear">清空已选</span>
|
||||
<Collapse simple class="collapse">
|
||||
<Panel name="1">
|
||||
已选择
|
||||
<span class="select-count">{{ selectObj.length }}</span> 件
|
||||
<p slot="content">
|
||||
<Tag
|
||||
v-for="(item, i) in selectObj"
|
||||
:key="i"
|
||||
:name="item.id"
|
||||
color="default"
|
||||
closable
|
||||
@on-close="handleCancelObj"
|
||||
>{{ createName(item) }}
|
||||
</Tag>
|
||||
</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Drawer title="选择活动优惠券" closable v-model="showDrawer" :width="width" draggable>
|
||||
<Table
|
||||
:loading="showLoading"
|
||||
border
|
||||
:columns="tableColumns"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
ref="tableData"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" style="margin: 10px 0;">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="tableTotal"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changeDataPage"
|
||||
@on-page-size-change="changeDataPageSize"
|
||||
:page-size-opts="[10,20,50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
<div class="my-drawer-footer">
|
||||
已选择
|
||||
<span class="select-count">{{ selectObj.length }}</span> 件
|
||||
<Button @click="clearSelectData" style="margin-left:10px">清空已选</Button>
|
||||
<Button @click="showDrawer=false" type="primary" style="margin-left:10px">关闭</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPlatformCouponList
|
||||
} from "@/api/promotion";
|
||||
|
||||
export default {
|
||||
name: "userChoose",
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: "选择SKU"
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "md-basket"
|
||||
},
|
||||
initData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
createName: {
|
||||
type: Function,
|
||||
default: function (item) {
|
||||
return item.goodsName
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.selectObj = this.initData
|
||||
console.log(JSON.stringify(this.initData))
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//默认值后续计算
|
||||
height: 500,
|
||||
width: 500,
|
||||
//加载状态
|
||||
showLoading: true,
|
||||
//展示抽屉
|
||||
showDrawer: false,
|
||||
selectObj: [], // 选择数据
|
||||
searchForm: { // 请求参数
|
||||
getType: "ACTIVITY",// 活动优惠券
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
|
||||
},
|
||||
tableColumns: [ // 表头
|
||||
{
|
||||
type: "index",
|
||||
width: 60,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
key: "goodsName",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
title: "规格",
|
||||
key: "specName",
|
||||
minWidth: 140,
|
||||
},
|
||||
{
|
||||
title: "图片",
|
||||
key: "thumbnail",
|
||||
width: 80,
|
||||
align: "center",
|
||||
render: (h, params) => {
|
||||
return h("Avatar", {
|
||||
props: {
|
||||
src: params.row.face
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 120,
|
||||
render: (h, params) => {
|
||||
if (params.row.delFlag == 0) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "正常"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.delFlag == -1) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "禁用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 130,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
let select;
|
||||
this.selectObj.forEach(item => {
|
||||
if (item.id === params.row.id) {
|
||||
select = params.row
|
||||
}
|
||||
});
|
||||
|
||||
if (select) {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.chooseCancel(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"取消选择"
|
||||
)
|
||||
]);
|
||||
} else {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.chooseObj(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"选择"
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
tableData: [], // 表格数据
|
||||
tableTotal: 0 // 总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeDataPage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.searchData();
|
||||
},
|
||||
changeDataPageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.searchData();
|
||||
},
|
||||
searchData() {
|
||||
this.showLoading = true;
|
||||
getPlatformCouponList(this.searchForm).then(res => {
|
||||
this.showLoading = false;
|
||||
if (res.success) {
|
||||
this.tableData = res.result.records;
|
||||
this.tableTotal = res.result.total;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
handleSearchData() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.searchData();
|
||||
},
|
||||
handleResetObj() {
|
||||
this.$refs.searchForm.resetFields();
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 9;
|
||||
this.searchForm.departmentId = "";
|
||||
// 重新加载数据
|
||||
this.searchData();
|
||||
},
|
||||
setData(v) {
|
||||
this.selectObj = v;
|
||||
this.$emit("on-change", this.selectObj);
|
||||
},
|
||||
chooseCancel(v) {
|
||||
let _index;
|
||||
this.selectObj.forEach((e, index) => {
|
||||
if (v.id == e.id) {
|
||||
_index = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (_index || _index == 0) {
|
||||
this.selectObj.splice(_index, 1);
|
||||
this.$emit("on-change", this.selectObj);
|
||||
}
|
||||
},
|
||||
chooseObj(v) {
|
||||
// 去重
|
||||
let that = this;
|
||||
let flag = true;
|
||||
this.selectObj.forEach(e => {
|
||||
if (v.id == e.id) {
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
if (flag) {
|
||||
this.selectObj.push(v);
|
||||
this.$emit("on-change", this.selectObj);
|
||||
}
|
||||
},
|
||||
clearSelectData() {
|
||||
this.selectObj = [];
|
||||
this.$emit("on-change", this.selectObj);
|
||||
},
|
||||
handleCancelObj(e, id) {
|
||||
// 删除所选用户
|
||||
let newArray = [];
|
||||
this.selectObj.forEach(e => {
|
||||
if (id != e.id) {
|
||||
newArray.push(e);
|
||||
}
|
||||
});
|
||||
this.selectObj = newArray;
|
||||
this.$emit("on-change", this.selectObj);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 计算高度
|
||||
this.height = Number(document.documentElement.clientHeight - 230);
|
||||
this.width = Number(document.documentElement.clientWidth / 2) > 900 ? 900 : Number(document.documentElement.clientWidth / 2)
|
||||
this.searchData();
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sku-choose {
|
||||
.clear {
|
||||
font-size: 12px;
|
||||
margin-left: 15px;
|
||||
color: #40a9ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
font-size: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.select-count {
|
||||
font-weight: 600;
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.my-drawer-footer {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { initDepartment, loadDepartment } from "@/api/index";
|
||||
import { initDepartment } from "@/api/index";
|
||||
export default {
|
||||
name: "departmentChoose",
|
||||
props: {
|
||||
|
|
@ -27,50 +27,13 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取部门数据
|
||||
initDepartmentData() {
|
||||
initDepartment().then(res => {
|
||||
if (res.success) {
|
||||
res.result.forEach(function(e) {
|
||||
if (e.isParent) {
|
||||
e.value = e.id;
|
||||
e.label = e.title;
|
||||
e.loading = false;
|
||||
e.children = [];
|
||||
} else {
|
||||
e.value = e.id;
|
||||
e.label = e.title;
|
||||
}
|
||||
if (e.status == -1) {
|
||||
e.label = "[已禁用] " + e.label;
|
||||
e.disabled = true;
|
||||
}
|
||||
});
|
||||
this.department = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
loadData(item, callback) {
|
||||
item.loading = true;
|
||||
loadDepartment(item.value).then(res => {
|
||||
item.loading = false;
|
||||
if (res.success) {
|
||||
res.result.forEach(function(e) {
|
||||
if (e.isParent) {
|
||||
e.value = e.id;
|
||||
e.label = e.title;
|
||||
e.loading = false;
|
||||
e.children = [];
|
||||
} else {
|
||||
e.value = e.id;
|
||||
e.label = e.title;
|
||||
}
|
||||
if (e.status == -1) {
|
||||
e.label = "[已禁用] " + e.label;
|
||||
e.disabled = true;
|
||||
}
|
||||
});
|
||||
item.children = res.result;
|
||||
callback();
|
||||
const arr = res.result;
|
||||
this.filterData(arr)
|
||||
this.department = arr
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -82,8 +45,21 @@ export default {
|
|||
}
|
||||
this.$emit("on-change", departmentId);
|
||||
},
|
||||
// 清空已选列表
|
||||
clearSelect() {
|
||||
this.selectDep = [];
|
||||
},
|
||||
// 处理部门数据
|
||||
filterData (data) {
|
||||
data.forEach(e => {
|
||||
e.value = e.id;
|
||||
e.label = e.title;
|
||||
if (e.children) {
|
||||
this.filterData(e.children)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
<div class="dep-tree-bar">
|
||||
<Tree
|
||||
:data="dataDep"
|
||||
:load-data="loadData"
|
||||
@on-select-change="selectTree"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="depLoading"></Spin>
|
||||
|
|
@ -34,7 +33,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {initDepartment, loadDepartment, searchDepartment} from "@/api/index";
|
||||
import {initDepartment, searchDepartment} from "@/api/index";
|
||||
|
||||
export default {
|
||||
name: "departmentTreeChoose",
|
||||
|
|
@ -63,40 +62,14 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取部门数据
|
||||
initDepartmentData() {
|
||||
initDepartment().then(res => {
|
||||
if (res.success) {
|
||||
res.result.forEach(function (e) {
|
||||
if (e.isParent) {
|
||||
e.loading = false;
|
||||
e.children = [];
|
||||
}
|
||||
if (e.status == -1) {
|
||||
e.title = "[已禁用] " + e.title;
|
||||
e.disabled = true;
|
||||
}
|
||||
});
|
||||
this.dataDep = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
loadData(item, callback) {
|
||||
loadDepartment(item.id).then(res => {
|
||||
if (res.success) {
|
||||
res.result.forEach(function (e) {
|
||||
if (e.isParent) {
|
||||
e.loading = false;
|
||||
e.children = [];
|
||||
}
|
||||
if (e.status == -1) {
|
||||
e.title = "[已禁用] " + e.title;
|
||||
e.disabled = true;
|
||||
}
|
||||
});
|
||||
callback(res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
searchDep() {
|
||||
// 搜索部门
|
||||
if (this.searchKey) {
|
||||
|
|
@ -117,6 +90,7 @@ export default {
|
|||
this.initDepartmentData();
|
||||
}
|
||||
},
|
||||
// 选择回调
|
||||
selectTree(v) {
|
||||
if (v.length === 0) {
|
||||
this.$emit("on-change", null);
|
||||
|
|
@ -132,6 +106,7 @@ export default {
|
|||
}
|
||||
this.$emit("on-change", department);
|
||||
},
|
||||
// 清除选中方法
|
||||
clearSelect() {
|
||||
this.departmentId = [];
|
||||
this.departmentTitle = "";
|
||||
|
|
@ -143,6 +118,7 @@ export default {
|
|||
}
|
||||
this.$emit("on-clear");
|
||||
},
|
||||
// 设置数据 回显用
|
||||
setData(ids, title) {
|
||||
this.departmentTitle = title;
|
||||
if (this.multiple) {
|
||||
|
|
@ -151,7 +127,6 @@ export default {
|
|||
this.departmentId = [];
|
||||
this.departmentId.push(ids);
|
||||
}
|
||||
// this.$emit("on-change", this.departmentId);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -159,16 +159,19 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
// 编辑html
|
||||
editHTML() {
|
||||
this.dataEdit = this.data;
|
||||
this.showHTMLModal = true;
|
||||
},
|
||||
// 保存
|
||||
editHTMLOk() {
|
||||
editor.txt.html(this.dataEdit);
|
||||
this.$emit("input", this.data);
|
||||
this.$emit("on-change", this.data);
|
||||
this.showHTMLModal = false;
|
||||
},
|
||||
// 清空编辑器
|
||||
clear() {
|
||||
this.$Modal.confirm({
|
||||
title: "确认清空",
|
||||
|
|
@ -181,6 +184,7 @@ export default {
|
|||
},
|
||||
});
|
||||
},
|
||||
// 回显数据
|
||||
setData(value) {
|
||||
if (!editor) {
|
||||
this.initEditor();
|
||||
|
|
|
|||
|
|
@ -1,346 +0,0 @@
|
|||
<template>
|
||||
<div class="member-choose">
|
||||
<Button @click="userModalVisible=true" :icon="icon">{{text}}</Button>
|
||||
<span @click="clearSelectData" class="clear">清空已选</span>
|
||||
<Collapse simple class="collapse">
|
||||
<Panel name="1">
|
||||
已选择
|
||||
<span class="select-count">{{selectUsers.length}}</span> 人
|
||||
<p slot="content">
|
||||
<Tag
|
||||
v-for="(item, i) in selectUsers"
|
||||
:key="i"
|
||||
:name="item.id"
|
||||
color="default"
|
||||
closable
|
||||
@on-close="handleCancelUser"
|
||||
>{{item.username}}
|
||||
</Tag>
|
||||
</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Drawer title="选择用户" closable v-model="userModalVisible" width="800" draggable>
|
||||
<Form ref="searchUserForm" :model="searchUserForm" inline :label-width="55">
|
||||
<Form-item label="用户名" prop="username">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchUserForm.username"
|
||||
clearable
|
||||
placeholder="请输入用户名"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item style="margin-left:-35px;" class="br">
|
||||
<Button @click="handleSearchUser" type="primary" icon="ios-search">搜索</Button>
|
||||
<Button @click="handleResetUser">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
<Table
|
||||
:loading="userLoading"
|
||||
border
|
||||
:columns="userColumns"
|
||||
:data="userData"
|
||||
:height="height"
|
||||
ref="userTable"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" style="margin: 10px 0;">
|
||||
<Page
|
||||
:current="searchUserForm.pageNumber"
|
||||
:total="totalUser"
|
||||
:page-size="searchUserForm.pageSize"
|
||||
@on-change="changeUserPage"
|
||||
@on-page-size-change="changeUserPageSize"
|
||||
:page-size-opts="[10,20,50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
<div class="my-drawer-footer">
|
||||
已选择
|
||||
<span class="select-count">{{selectUsers.length}}</span> 人
|
||||
<Button @click="clearSelectData" style="margin-left:10px">清空已选</Button>
|
||||
<Button @click="userModalVisible=false" type="primary" style="margin-left:10px">关闭</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getMember} from "@/api/member";
|
||||
|
||||
export default {
|
||||
name: "userChoose",
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: "选择会员"
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "md-person-add"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 500, // 表格高度
|
||||
userLoading: true, // 加载状态
|
||||
userModalVisible: false, // modal显隐
|
||||
selectUsers: [], // 已选用户
|
||||
searchUserForm: { // 请求参数
|
||||
username: "",
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc" // 默认排序方式
|
||||
},
|
||||
userColumns: [ // 表头
|
||||
{
|
||||
type: "index",
|
||||
width: 60,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: "用户名",
|
||||
key: "username",
|
||||
minWidth: 140,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: "头像",
|
||||
key: "face",
|
||||
width: 80,
|
||||
align: "center",
|
||||
render: (h, params) => {
|
||||
return h("Avatar", {
|
||||
props: {
|
||||
src: params.row.face
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "手机",
|
||||
key: "mobile",
|
||||
width: 125,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 120,
|
||||
render: (h, params) => {
|
||||
if (params.row.delFlag == 0) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "正常启用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.delFlag == -1) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "禁用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 130,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
let select;
|
||||
this.selectUsers.forEach(item => {
|
||||
if (item.id === params.row.id) {
|
||||
select = params.row
|
||||
}
|
||||
});
|
||||
|
||||
if (select) {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.chooseCancel(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"取消选择"
|
||||
)
|
||||
]);
|
||||
} else {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.chooseUser(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"选择"
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
userData: [], // 用户数据
|
||||
totalUser: 0 // 数量
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeUserPage(v) {
|
||||
this.searchUserForm.pageNumber = v;
|
||||
this.getUserDataList();
|
||||
},
|
||||
changeUserPageSize(v) {
|
||||
this.searchUserForm.pageSize = v;
|
||||
this.getUserDataList();
|
||||
},
|
||||
getUserDataList() {
|
||||
this.userLoading = true;
|
||||
getMember(this.searchUserForm).then(res => {
|
||||
this.userLoading = false;
|
||||
if (res.success) {
|
||||
this.userData = res.result.records;
|
||||
this.totalUser = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSearchUser() {
|
||||
this.searchUserForm.pageNumber = 1;
|
||||
this.searchUserForm.pageSize = 10;
|
||||
this.getUserDataList();
|
||||
},
|
||||
handleResetUser() {
|
||||
this.$refs.searchUserForm.resetFields();
|
||||
this.searchUserForm.pageNumber = 1;
|
||||
this.searchUserForm.pageSize = 9;
|
||||
this.$refs.dep.clearSelect();
|
||||
this.searchUserForm.departmentId = "";
|
||||
// 重新加载数据
|
||||
this.getUserDataList();
|
||||
},
|
||||
setData(v) {
|
||||
this.selectUsers = v;
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
},
|
||||
chooseCancel(v){
|
||||
let _index;
|
||||
this.selectUsers.forEach((e,index) => {
|
||||
if (v.id == e.id) {
|
||||
_index = index;
|
||||
}
|
||||
});
|
||||
|
||||
if(_index||_index==0){
|
||||
this.selectUsers.splice(_index,1);
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
}
|
||||
},
|
||||
chooseUser(v) {
|
||||
// 去重
|
||||
let that = this;
|
||||
let flag = true;
|
||||
this.selectUsers.forEach(e => {
|
||||
if (v.id == e.id) {
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
if (flag) {
|
||||
let u = {
|
||||
id: v.id,
|
||||
username: v.username
|
||||
};
|
||||
this.selectUsers.push(u);
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
}
|
||||
},
|
||||
clearSelectData() {
|
||||
this.selectUsers = [];
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
},
|
||||
handleCancelUser(e, id) {
|
||||
// 删除所选用户
|
||||
let newArray = [];
|
||||
this.selectUsers.forEach(e => {
|
||||
if (id != e.id) {
|
||||
newArray.push(e);
|
||||
}
|
||||
});
|
||||
this.selectUsers = newArray;
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
this.$Message.success("删除所选用户成功");
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 计算高度
|
||||
this.height = Number(document.documentElement.clientHeight - 230);
|
||||
this.getUserDataList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.member-choose {
|
||||
.clear {
|
||||
font-size: 12px;
|
||||
margin-left: 15px;
|
||||
color: #40a9ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
font-size: 12px;
|
||||
margin-top: 15px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.select-count {
|
||||
font-weight: 600;
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.my-drawer-footer {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="toolbar">
|
||||
<button class="ql-bold" title="粗体"></button>
|
||||
<button class="ql-italic" title="斜体"></button>
|
||||
<button class="ql-underline" title="下划线"></button>
|
||||
<button class="ql-strike" title="删除线"></button>
|
||||
<select class="ql-size" title="字体大小">
|
||||
<option value="small"></option>
|
||||
<option selected></option>
|
||||
<option value="large"></option>
|
||||
<option value="huge"></option>
|
||||
</select>
|
||||
<select class="ql-header" title="标题大小">
|
||||
<option value="1"></option>
|
||||
<option value="2"></option>
|
||||
<option value="3"></option>
|
||||
<option value="4"></option>
|
||||
<option value="5"></option>
|
||||
<option value="6"></option>
|
||||
<option selected></option>
|
||||
</select>
|
||||
<select class="ql-font" title="字体"></select>
|
||||
<select class="ql-align" title="对齐方式"></select>
|
||||
<select class="ql-color" title="字体颜色"></select>
|
||||
<select class="ql-background" title="背景颜色"></select>
|
||||
<button class="ql-blockquote" title="引用"></button>
|
||||
<button class="ql-code-block" title="代码块"></button>
|
||||
<button class="ql-list" value="ordered" title="数字列表"></button>
|
||||
<button class="ql-list" value="bullet" title="点列表"></button>
|
||||
<button class="ql-script" value="sub" title="右下标"></button>
|
||||
<button class="ql-script" value="super" title="右上标"></button>
|
||||
<button class="ql-indent" value="-1" title="向左缩进"></button>
|
||||
<button class="ql-indent" value="+1" title="向右缩进"></button>
|
||||
<button class="ql-clean" title="清空样式"></button>
|
||||
|
||||
<button class="ql-link" title="链接"></button>
|
||||
<button class="ql-image" title="插入图片" v-if="base64"></button>
|
||||
<div class="q-menu" title="插入图片" v-if="!base64">
|
||||
<Upload
|
||||
:action="uploadFileUrl"
|
||||
:headers="accessToken"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:format="['jpg','jpeg','png','gif','bmp']"
|
||||
accept=".jpg, .jpeg, .png, .gif, .bmp"
|
||||
:max-size="5120"
|
||||
:on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
:before-upload="beforeUpload"
|
||||
:show-upload-list="false"
|
||||
ref="qup"
|
||||
>
|
||||
<Icon type="md-images" size="20" />
|
||||
</Upload>
|
||||
</div>
|
||||
<button class="ql-video" title="插入视频链接"></button>
|
||||
<div class="q-menu" title="编辑HTML代码" @click="editHTML" v-if="expandHtml">
|
||||
<Icon type="md-code-working" size="22" />
|
||||
</div>
|
||||
<div class="q-menu" title="预览" @click="fullscreenModal=true" v-if="expandPreview">
|
||||
<Icon type="ios-eye" size="24" />
|
||||
</div>
|
||||
<div class="q-menu q-trash" title="清空" @click="clear" v-if="expandClear">
|
||||
<Icon type="md-trash" size="18" style="display: block;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :id="id" :style="{minHeight: minHeight}"></div>
|
||||
|
||||
<Modal
|
||||
title="编辑html代码"
|
||||
v-model="showHTMLModal"
|
||||
:mask-closable="false"
|
||||
:width="900"
|
||||
:fullscreen="full"
|
||||
>
|
||||
<Input
|
||||
v-if="!full"
|
||||
v-model="dataEdit"
|
||||
:rows="15"
|
||||
type="textarea"
|
||||
style="max-height:60vh;overflow:auto;"
|
||||
/>
|
||||
<Input v-if="full" v-model="dataEdit" :rows="32" type="textarea" />
|
||||
<div slot="footer">
|
||||
<Button @click="full=!full" icon="md-expand">全屏开/关</Button>
|
||||
<Button @click="editHTMLOk" type="primary" icon="md-checkmark-circle-outline">确定保存</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal title="预览" v-model="fullscreenModal" fullscreen>
|
||||
<div v-html="data">{{data}}</div>
|
||||
<div slot="footer">
|
||||
<Button @click="fullscreenModal=false">关闭</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from "@/api/index";
|
||||
import Quill from "quill";
|
||||
import "quill/dist/quill.snow.css";
|
||||
import xss from "xss";
|
||||
var editor = null;
|
||||
export default {
|
||||
name: "editor",
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "quill"
|
||||
},
|
||||
value: String,
|
||||
base64: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
minHeight: {
|
||||
type: String,
|
||||
default: "300px"
|
||||
},
|
||||
expandHtml: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
expandPreview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
expandClear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
openXss: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
accessToken: {}, // 验证token
|
||||
uploadFileUrl: uploadFile, // 上传地址
|
||||
editor: null, // 富文本初始化
|
||||
options: { // 富文本配置
|
||||
theme: "snow",
|
||||
modules: {
|
||||
toolbar: "#toolbar"
|
||||
},
|
||||
placeholder: "在这输入内容 ..."
|
||||
},
|
||||
data: this.value, // 富文本数据
|
||||
dataEdit: "", // 编辑数据
|
||||
showHTMLModal: false, // 显示html
|
||||
full: false, // html全屏开关
|
||||
fullscreenModal: false // 显示全屏预览
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initEditor() {
|
||||
this.accessToken = {
|
||||
accessToken: this.getStore("accessToken")
|
||||
};
|
||||
editor = new Quill(`#${this.id}`, this.options);
|
||||
let that = this;
|
||||
if (this.value) {
|
||||
editor.pasteHTML(this.value);
|
||||
}
|
||||
editor.on("text-change", function(delta, oldDelta, source) {
|
||||
let html = editor.container.firstChild.innerHTML;
|
||||
if (that.openXss) {
|
||||
that.data = xss(html);
|
||||
} else {
|
||||
that.data = html;
|
||||
}
|
||||
that.$emit("input", that.data);
|
||||
that.$emit("on-change", that.data);
|
||||
});
|
||||
},
|
||||
handleFormatError(file) {
|
||||
this.$Notice.warning({
|
||||
title: "不支持的文件格式",
|
||||
desc:
|
||||
"所选文件‘ " +
|
||||
file.name +
|
||||
" ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp格式文件"
|
||||
});
|
||||
},
|
||||
handleMaxSize(file) {
|
||||
this.$Notice.warning({
|
||||
title: "文件大小过大",
|
||||
desc: "所选文件‘ " + file.name + " ’大小过大, 不得超过 5M."
|
||||
});
|
||||
},
|
||||
beforeUpload() {
|
||||
return true;
|
||||
},
|
||||
handleSuccess(res, file) {
|
||||
if (res.success) {
|
||||
let url = res.result;
|
||||
// 获取光标位置
|
||||
let range = editor.getSelection(true);
|
||||
// 总元素
|
||||
let delta = editor.getContents().length;
|
||||
let index;
|
||||
if (range) {
|
||||
index = range.index;
|
||||
} else {
|
||||
index = delta;
|
||||
}
|
||||
// 插入元素
|
||||
editor.insertEmbed(index, "image", url);
|
||||
editor.setSelection(index + 1, 0);
|
||||
} else {
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
},
|
||||
handleError(error, file, fileList) {
|
||||
this.$Message.error(error.toString());
|
||||
},
|
||||
editHTML() {
|
||||
this.dataEdit = this.data;
|
||||
this.showHTMLModal = true;
|
||||
},
|
||||
editHTMLOk() {
|
||||
editor.pasteHTML(this.dataEdit);
|
||||
this.$emit("input", this.data);
|
||||
this.$emit("on-change", this.data);
|
||||
this.showHTMLModal = false;
|
||||
},
|
||||
clear() {
|
||||
this.$Modal.confirm({
|
||||
title: "确认清空",
|
||||
content: "确认要清空编辑器内容？清空后不能撤回",
|
||||
onOk: () => {
|
||||
this.data = "";
|
||||
editor.pasteHTML(this.data);
|
||||
this.$emit("input", this.data);
|
||||
this.$emit("on-change", this.data);
|
||||
}
|
||||
});
|
||||
},
|
||||
setData(value) {
|
||||
if (!editor) {
|
||||
this.initEditor();
|
||||
}
|
||||
if (value && value != this.data) {
|
||||
this.data = value;
|
||||
let index = editor.selection.savedRange.index;
|
||||
editor.pasteHTML(this.data);
|
||||
editor.setSelection(index, 0);
|
||||
this.$emit("input", this.data);
|
||||
this.$emit("on-change", this.data);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.setData(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initEditor();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-menu {
|
||||
margin: 0 3px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
:hover {
|
||||
color: #06c;
|
||||
}
|
||||
}
|
||||
.q-trash {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.ql-tooltip {
|
||||
left: 30% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<template>
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "rectLoading"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spinner {
|
||||
margin-top: 20vh;
|
||||
margin-bottom: 30vh;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-top: 1vh;
|
||||
}
|
||||
div {
|
||||
margin-right: 4px;
|
||||
background-color: #4e9ff5;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
display: inline-block;
|
||||
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
|
||||
animation: stretchdelay 1.2s infinite ease-in-out;
|
||||
}
|
||||
.rect2 {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
.rect3 {
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
.rect4 {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
.rect5 {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes stretchdelay {
|
||||
0%,
|
||||
40%,
|
||||
100% {
|
||||
-webkit-transform: scaleY(0.4);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stretchdelay {
|
||||
0%,
|
||||
40%,
|
||||
100% {
|
||||
transform: scaleY(0.4);
|
||||
-webkit-transform: scaleY(0.4);
|
||||
}
|
||||
20% {
|
||||
transform: scaleY(1);
|
||||
-webkit-transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -108,11 +108,13 @@ export default {
|
|||
this.strengthValue = 100;
|
||||
}
|
||||
},
|
||||
// 密码变动后回调
|
||||
handleChange(v) {
|
||||
this.strengthChange();
|
||||
this.$emit("input", this.currentValue);
|
||||
this.$emit("on-change", this.currentValue, this.grade, this.strength);
|
||||
},
|
||||
// 监听密码变动，实时回显密码强度
|
||||
setCurrentValue(value) {
|
||||
if (value === this.currentValue) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -1,358 +0,0 @@
|
|||
<template>
|
||||
<div class="sku-choose">
|
||||
<Button @click="showDrawer=true" :icon="icon">{{text}}</Button>
|
||||
<span @click="clearSelectData" class="clear">清空已选</span>
|
||||
<Collapse simple class="collapse">
|
||||
<Panel name="1">
|
||||
已选择
|
||||
<span class="select-count">{{selectObj.length}}</span> 件
|
||||
<p slot="content">
|
||||
<Tag
|
||||
v-for="(item, i) in selectObj"
|
||||
:key="i"
|
||||
:name="item.id"
|
||||
color="default"
|
||||
closable
|
||||
@on-close="handleCancelObj"
|
||||
>{{createName(item)}}
|
||||
</Tag>
|
||||
</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Drawer title="选择SKU" closable v-model="showDrawer" :width="width" draggable>
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="55">
|
||||
<Form-item label="名称" prop="goodsName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.goodsName"
|
||||
clearable
|
||||
placeholder="输入商品名称"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item style="margin-left:-35px;" class="br">
|
||||
<Button @click="handleSearchData" type="primary" icon="ios-search">搜索</Button>
|
||||
<Button @click="handleResetObj">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
<Table
|
||||
:loading="showLoading"
|
||||
border
|
||||
:columns="tableColumns"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
ref="tableData"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" style="margin: 10px 0;">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="tableTotal"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changeDataPage"
|
||||
@on-page-size-change="changeDataPageSize"
|
||||
:page-size-opts="[10,20,50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
<div class="my-drawer-footer">
|
||||
已选择
|
||||
<span class="select-count">{{selectObj.length}}</span> 件
|
||||
<Button @click="clearSelectData" style="margin-left:10px">清空已选</Button>
|
||||
<Button @click="showDrawer=false" type="primary" style="margin-left:10px">关闭</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getSkuPage} from "@/api/goods";
|
||||
|
||||
export default {
|
||||
name: "userChoose",
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: "选择SKU"
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "md-basket"
|
||||
},
|
||||
initData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
createName: {
|
||||
type: Function,
|
||||
default: function (item) {
|
||||
return item.goodsName
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.selectObj = this.initData
|
||||
console.log(JSON.stringify(this.initData))
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//默认值后续计算
|
||||
height: 500,
|
||||
width: 500,
|
||||
//加载状态
|
||||
showLoading: true,
|
||||
//展示抽屉
|
||||
showDrawer: false,
|
||||
selectObj: [], // 选择数据
|
||||
searchForm: { // 请求参数
|
||||
goodsName: "",
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc" // 默认排序方式
|
||||
},
|
||||
tableColumns: [ // 表头
|
||||
{
|
||||
type: "index",
|
||||
width: 60,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
key: "goodsName",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
title: "规格",
|
||||
key: "specName",
|
||||
minWidth: 140,
|
||||
},
|
||||
{
|
||||
title: "图片",
|
||||
key: "thumbnail",
|
||||
width: 80,
|
||||
align: "center",
|
||||
render: (h, params) => {
|
||||
return h("Avatar", {
|
||||
props: {
|
||||
src: params.row.face
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 120,
|
||||
render: (h, params) => {
|
||||
if (params.row.delFlag == 0) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "正常"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.delFlag == -1) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "禁用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 130,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
let select;
|
||||
this.selectObj.forEach(item => {
|
||||
if (item.id === params.row.id) {
|
||||
select = params.row
|
||||
}
|
||||
});
|
||||
|
||||
if (select) {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.chooseCancel(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"取消选择"
|
||||
)
|
||||
]);
|
||||
} else {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.chooseObj(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"选择"
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
tableData: [], // 表格数据
|
||||
tableTotal: 0 // 总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeDataPage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.searchData();
|
||||
},
|
||||
changeDataPageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.searchData();
|
||||
},
|
||||
searchData() {
|
||||
this.showLoading = true;
|
||||
getSkuPage(this.searchForm).then(res => {
|
||||
this.showLoading = false;
|
||||
if (res.success) {
|
||||
this.tableData = res.result.records;
|
||||
this.tableTotal = res.result.total;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
handleSearchData() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.searchData();
|
||||
},
|
||||
handleResetObj() {
|
||||
this.$refs.searchForm.resetFields();
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 9;
|
||||
this.searchForm.departmentId = "";
|
||||
// 重新加载数据
|
||||
this.searchData();
|
||||
},
|
||||
setData(v) {
|
||||
this.selectObj = v;
|
||||
this.$emit("on-change", this.selectObj);
|
||||
},
|
||||
chooseCancel(v) {
|
||||
let _index;
|
||||
this.selectObj.forEach((e, index) => {
|
||||
if (v.id == e.id) {
|
||||
_index = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (_index || _index == 0) {
|
||||
this.selectObj.splice(_index, 1);
|
||||
this.$emit("on-change", this.selectObj);
|
||||
}
|
||||
},
|
||||
chooseObj(v) {
|
||||
// 去重
|
||||
let that = this;
|
||||
let flag = true;
|
||||
this.selectObj.forEach(e => {
|
||||
if (v.id == e.id) {
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
if (flag) {
|
||||
this.selectObj.push(v);
|
||||
this.$emit("on-change", this.selectObj);
|
||||
}
|
||||
},
|
||||
clearSelectData() {
|
||||
this.selectObj = [];
|
||||
this.$emit("on-change", this.selectObj);
|
||||
},
|
||||
handleCancelObj(e, id) {
|
||||
// 删除所选用户
|
||||
let newArray = [];
|
||||
this.selectObj.forEach(e => {
|
||||
if (id != e.id) {
|
||||
newArray.push(e);
|
||||
}
|
||||
});
|
||||
this.selectObj = newArray;
|
||||
this.$emit("on-change", this.selectObj);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 计算高度
|
||||
this.height = Number(document.documentElement.clientHeight - 230);
|
||||
this.width = Number(document.documentElement.clientWidth/2)>900?900:Number(document.documentElement.clientWidth/2)
|
||||
this.searchData();
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sku-choose {
|
||||
.clear {
|
||||
font-size: 12px;
|
||||
margin-left: 15px;
|
||||
color: #40a9ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
font-size: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.select-count {
|
||||
font-weight: 600;
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.my-drawer-footer {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -91,27 +91,30 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 拖拽结束事件
|
||||
onEnd() {
|
||||
this.returnValue();
|
||||
},
|
||||
// 初始化方法
|
||||
init() {
|
||||
this.setData(this.value, true);
|
||||
this.accessToken = {
|
||||
accessToken: this.getStore("accessToken")
|
||||
};
|
||||
},
|
||||
// 预览图片
|
||||
handleView(imgUrl) {
|
||||
this.imgUrl = imgUrl;
|
||||
this.viewImage = true;
|
||||
},
|
||||
// 移除图片
|
||||
handleRemove(file) {
|
||||
this.uploadList = this.uploadList.filter(i => i.url !== file.url);
|
||||
this.returnValue();
|
||||
},
|
||||
// 上传成功
|
||||
handleSuccess(res, file) {
|
||||
if (res.success) {
|
||||
|
||||
|
||||
file.url = res.result;
|
||||
// 单张图片处理
|
||||
if (!this.multiple && this.uploadList.length > 0) {
|
||||
|
|
@ -122,12 +125,14 @@ export default {
|
|||
// 返回组件值
|
||||
this.returnValue();
|
||||
} else {
|
||||
// this.$Message.error(res.message);
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
},
|
||||
// 上传失败
|
||||
handleError(error, file, fileList) {
|
||||
this.$Message.error(error.toString());
|
||||
},
|
||||
// 格式校验
|
||||
handleFormatError(file) {
|
||||
this.$Notice.warning({
|
||||
title: "不支持的文件格式",
|
||||
|
|
@ -137,6 +142,7 @@ export default {
|
|||
" ’格式不正确, 请选择 .jpg .jpeg .png .gif图片格式文件"
|
||||
});
|
||||
},
|
||||
// 上传文件大小校验
|
||||
handleMaxSize(file) {
|
||||
this.$Notice.warning({
|
||||
title: "文件大小过大",
|
||||
|
|
@ -148,6 +154,7 @@ export default {
|
|||
"M."
|
||||
});
|
||||
},
|
||||
// 上传之前钩子
|
||||
handleBeforeUpload() {
|
||||
if (this.multiple && this.uploadList.length >= this.limit) {
|
||||
this.$Message.warning("最多只能上传" + this.limit + "张图片");
|
||||
|
|
@ -155,6 +162,7 @@ export default {
|
|||
}
|
||||
return true;
|
||||
},
|
||||
// 返回组件值
|
||||
returnValue() {
|
||||
if (!this.uploadList || this.uploadList.length < 1) {
|
||||
if (!this.multiple) {
|
||||
|
|
@ -180,6 +188,7 @@ export default {
|
|||
this.$emit("on-change", v);
|
||||
}
|
||||
},
|
||||
// 传入值变化时改变值
|
||||
setData(v, init) {
|
||||
if (typeof v == "string") {
|
||||
// 单张
|
||||
|
|
|
|||
|
|
@ -1,352 +0,0 @@
|
|||
<template>
|
||||
<div class="user-choose">
|
||||
<Button @click="userModalVisible=true" :icon="icon">{{text}}</Button>
|
||||
<span @click="clearSelectData" class="clear">清空已选</span>
|
||||
<Collapse simple class="collapse">
|
||||
<Panel name="1">
|
||||
已选择
|
||||
<span class="select-count">{{selectUsers.length}}</span> 人
|
||||
<p slot="content">
|
||||
<Tag
|
||||
v-for="(item, i) in selectUsers"
|
||||
:key="i"
|
||||
:name="item.id"
|
||||
color="default"
|
||||
closable
|
||||
@on-close="handleCancelUser"
|
||||
>{{item.username}}</Tag>
|
||||
</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Drawer title="选择用户" closable v-model="userModalVisible" width="800" draggable>
|
||||
<Form ref="searchUserForm" :model="searchUserForm" inline :label-width="55">
|
||||
<Form-item label="用户名" prop="username">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchUserForm.username"
|
||||
clearable
|
||||
placeholder="请输入用户名"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="部门" prop="department">
|
||||
<department-choose @on-change="handleSelectDep" style="width: 200px" ref="dep"></department-choose>
|
||||
</Form-item>
|
||||
<Form-item style="margin-left:-35px;" class="br">
|
||||
<Button @click="handleSearchUser" type="primary" icon="ios-search">搜索</Button>
|
||||
<Button @click="handleResetUser">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
<Table
|
||||
:loading="userLoading"
|
||||
border
|
||||
:columns="userColumns"
|
||||
:data="userData"
|
||||
:height="height"
|
||||
ref="userTable"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" style="margin: 10px 0;">
|
||||
<Page
|
||||
:current="searchUserForm.pageNumber"
|
||||
:total="totalUser"
|
||||
:page-size="searchUserForm.pageSize"
|
||||
@on-change="changeUserPage"
|
||||
@on-page-size-change="changeUserPageSize"
|
||||
:page-size-opts="[10,20,50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
<div class="my-drawer-footer">
|
||||
已选择
|
||||
<span class="select-count">{{selectUsers.length}}</span> 人
|
||||
<Button @click="clearSelectData" style="margin-left:10px">清空已选</Button>
|
||||
<Button @click="userModalVisible=false" type="primary" style="margin-left:10px">关闭</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserListData } from "@/api/index";
|
||||
import departmentChoose from "./department-choose";
|
||||
export default {
|
||||
name: "userChoose",
|
||||
components: {
|
||||
departmentChoose
|
||||
},
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: "选择用户"
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "md-person-add"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//高度 下方已重新计算
|
||||
height: 500,
|
||||
//加载
|
||||
userLoading: true,
|
||||
//显示选择器
|
||||
userModalVisible: false,
|
||||
//选择的对象
|
||||
selectUsers: [],
|
||||
//搜索参数
|
||||
searchUserForm: {
|
||||
username: "",
|
||||
type: "",
|
||||
status: "",
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc" // 默认排序方式
|
||||
},
|
||||
userColumns: [
|
||||
{
|
||||
type: "index",
|
||||
width: 60,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: "用户名",
|
||||
key: "username",
|
||||
minWidth: 140,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: "头像",
|
||||
key: "avatar",
|
||||
width: 80,
|
||||
align: "center",
|
||||
render: (h, params) => {
|
||||
return h("Avatar", {
|
||||
props: {
|
||||
src: params.row.avatar
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "所属部门",
|
||||
key: "departmentTitle",
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: "手机",
|
||||
key: "mobile",
|
||||
width: 125,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: "邮箱",
|
||||
key: "email",
|
||||
width: 180,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
key: "sex",
|
||||
width: 70,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: "用户类型",
|
||||
key: "type",
|
||||
align: "center",
|
||||
width: 100,
|
||||
render: (h, params) => {
|
||||
let re = "";
|
||||
if (params.row.type == 1) {
|
||||
re = "管理员";
|
||||
} else if (params.row.type == 0) {
|
||||
re = "普通用户";
|
||||
}
|
||||
return h("div", re);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 120,
|
||||
render: (h, params) => {
|
||||
if (params.row.status == 0) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "正常启用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.status == -1) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "禁用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 130,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.chooseUser(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"添加该用户"
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
userData: [], // 表格数据
|
||||
totalUser: 0 // 总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSelectDep(v) {
|
||||
this.searchUserForm.departmentId = v;
|
||||
},
|
||||
changeUserPage(v) {
|
||||
this.searchUserForm.pageNumber = v;
|
||||
this.getUserDataList();
|
||||
},
|
||||
changeUserPageSize(v) {
|
||||
this.searchUserForm.pageSize = v;
|
||||
this.getUserDataList();
|
||||
},
|
||||
getUserDataList() {
|
||||
this.userLoading = true;
|
||||
getUserListData(this.searchUserForm).then(res => {
|
||||
this.userLoading = false;
|
||||
if (res.success) {
|
||||
this.userData = res.result.records;
|
||||
this.totalUser = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSearchUser() {
|
||||
this.searchUserForm.pageNumber = 1;
|
||||
this.searchUserForm.pageSize = 9;
|
||||
this.getUserDataList();
|
||||
},
|
||||
handleResetUser() {
|
||||
this.$refs.searchUserForm.resetFields();
|
||||
this.searchUserForm.pageNumber = 1;
|
||||
this.searchUserForm.pageSize = 9;
|
||||
this.$refs.dep.clearSelect();
|
||||
this.searchUserForm.departmentId = "";
|
||||
// 重新加载数据
|
||||
this.getUserDataList();
|
||||
},
|
||||
setData(v) {
|
||||
this.selectUsers = v;
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
},
|
||||
chooseUser(v) {
|
||||
// 去重
|
||||
let that = this;
|
||||
let flag = true;
|
||||
this.selectUsers.forEach(e => {
|
||||
if (v.id == e.id) {
|
||||
that.$Message.warning("已经添加过啦，请勿重复选择");
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
if (flag) {
|
||||
let u = {
|
||||
id: v.id,
|
||||
username: v.username
|
||||
};
|
||||
this.selectUsers.push(u);
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
this.$Message.success(`添加用户 ${v.username} 成功`);
|
||||
}
|
||||
},
|
||||
clearSelectData() {
|
||||
this.selectUsers = [];
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
},
|
||||
handleCancelUser(e, id) {
|
||||
// 删除所选用户
|
||||
let newArray = [];
|
||||
this.selectUsers.forEach(e => {
|
||||
if (id != e.id) {
|
||||
newArray.push(e);
|
||||
}
|
||||
});
|
||||
this.selectUsers = newArray;
|
||||
this.$emit("on-change", this.selectUsers);
|
||||
this.$Message.success("删除所选用户成功");
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 计算高度
|
||||
this.height = Number(document.documentElement.clientHeight - 230);
|
||||
this.getUserDataList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-choose {
|
||||
.clear {
|
||||
font-size: 12px;
|
||||
margin-left: 15px;
|
||||
color: #40a9ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.collapse {
|
||||
font-size: 12px;
|
||||
margin-top: 15px;
|
||||
width: 500px;
|
||||
}
|
||||
.select-count {
|
||||
font-weight: 600;
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
.my-drawer-footer {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,184 +1,184 @@
|
|||
<template>
|
||||
<div class="map">
|
||||
<Modal
|
||||
v-model="showMap"
|
||||
title="选择地址"
|
||||
width="800"
|
||||
>
|
||||
<div class="address">{{addrContent.address}}</div>
|
||||
<div id="map-container"></div>
|
||||
<Modal v-model="showMap" title="选择地址" width="800">
|
||||
<div class="address">{{ addrContent.address }}</div>
|
||||
<div id="map-container"></div>
|
||||
|
||||
<div class="search-con">
|
||||
<Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch"/>
|
||||
<ul>
|
||||
<li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
|
||||
<p>{{tip.name}}</p>
|
||||
<p>{{tip.district + tip.address}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<Button type="default" @click="showMap = false">取消</Button>
|
||||
<Button type="primary" :loading="loading" @click="ok">确定</Button>
|
||||
</div>
|
||||
<div class="search-con">
|
||||
<Input
|
||||
placeholder="输入关键字搜索"
|
||||
id="input-map"
|
||||
v-model="mapSearch"
|
||||
/>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(tip, index) in tips"
|
||||
:key="index"
|
||||
@click="selectAddr(tip.location)"
|
||||
>
|
||||
<p>{{ tip.name }}</p>
|
||||
<p>{{ tip.district + tip.address }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<Button type="default" @click="showMap = false">取消</Button>
|
||||
<Button type="primary" :loading="loading" @click="ok">确定</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import {getRegion} from '@/api/common.js'
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { getRegion } from "@/api/common.js";
|
||||
export default {
|
||||
name:'map',
|
||||
data() {
|
||||
name: "map",
|
||||
data() {
|
||||
return {
|
||||
showMap:false, // modal显隐
|
||||
mapSearch:'', // 地图搜索
|
||||
map:null, // 初始化地图
|
||||
autoComplete:null, // 初始化搜索方法
|
||||
geocoder:null, // 初始化地理、坐标转化
|
||||
positionPicker:null, // 地图拖拽选点
|
||||
tips:[], //搜索关键字列表
|
||||
addrContent:{}, // 回显地址信息
|
||||
loading:false, // 加载状态
|
||||
showMap: false, // modal显隐
|
||||
mapSearch: "", // 地图搜索
|
||||
map: null, // 初始化地图
|
||||
autoComplete: null, // 初始化搜索方法
|
||||
geocoder: null, // 初始化地理、坐标转化
|
||||
positionPicker: null, // 地图拖拽选点
|
||||
tips: [], //搜索关键字列表
|
||||
addrContent: {}, // 回显地址信息
|
||||
loading: false, // 加载状态
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
mapSearch:function(val){
|
||||
this.searchOfMap(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok(){ // 确定选择
|
||||
|
||||
this.loading = true
|
||||
|
||||
const codeObj = {}
|
||||
const params = {
|
||||
cityCode: this.addrContent.regeocode.addressComponent.citycode,
|
||||
townName: this.addrContent.regeocode.addressComponent.township
|
||||
}
|
||||
getRegion(params).then(res=>{
|
||||
if(res.success) {
|
||||
this.addrContent.addr = res.result.name.replace(/,/g," ")
|
||||
this.addrContent.addrId = res.result.id
|
||||
this.loading = false
|
||||
this.showMap = false;
|
||||
this.$emit('getAddress',this.addrContent);
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
watch: {
|
||||
mapSearch: function (val) {
|
||||
this.searchOfMap(val);
|
||||
},
|
||||
init() {
|
||||
AMapLoader.load({
|
||||
key: "b440952723253aa9fe483e698057bf7d", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
"AMap.ToolBar",
|
||||
"AMap.Autocomplete",
|
||||
"AMap.PlaceSearch",
|
||||
"AMap.Geolocation",
|
||||
'AMap.Geocoder'
|
||||
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
"AMapUI": { // 是否加载 AMapUI，缺省不加载
|
||||
"version": '1.1', // AMapUI 缺省 1.1
|
||||
"plugins":['misc/PositionPicker'], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
let that = this;
|
||||
this.map = new AMap.Map("map-container",{
|
||||
zoom:12
|
||||
});
|
||||
that.map.addControl(new AMap.ToolBar());
|
||||
that.map.addControl(new AMap.Autocomplete());
|
||||
that.map.addControl(new AMap.PlaceSearch());
|
||||
that.map.addControl(new AMap.Geocoder());
|
||||
|
||||
// 实例化Autocomplete
|
||||
let autoOptions = {
|
||||
city: "全国"
|
||||
};
|
||||
that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
|
||||
that.geocoder = new AMap.Geocoder(autoOptions)
|
||||
|
||||
|
||||
that.positionPicker = new AMapUI.PositionPicker({ // 拖拽选点
|
||||
mode: 'dragMap',
|
||||
map:that.map
|
||||
});
|
||||
that.positionPicker.start()
|
||||
/**
|
||||
*
|
||||
* 所有回显数据，都在positionResult里面
|
||||
* 需要字段可以查找
|
||||
*
|
||||
*/
|
||||
that.positionPicker.on('success', function(positionResult) {
|
||||
|
||||
that.addrContent = positionResult;
|
||||
});
|
||||
|
||||
})
|
||||
.catch((e) => {});
|
||||
},
|
||||
searchOfMap(val) { // 地图搜索
|
||||
let that = this;
|
||||
this.autoComplete.search(val, function (status, result) {
|
||||
// 搜索成功时，result即是对应的匹配数据
|
||||
if(status == 'complete' && result.info == 'OK'){
|
||||
that.tips = result.tips;
|
||||
}else {
|
||||
that.tips = []
|
||||
}
|
||||
});
|
||||
},
|
||||
selectAddr(location) { // 选择坐标
|
||||
if(!location){
|
||||
this.$Message.warning('请选择正确点位')
|
||||
return false;
|
||||
},
|
||||
methods: {
|
||||
ok() {
|
||||
// 确定选择
|
||||
this.loading = true;
|
||||
const params = {
|
||||
cityCode: this.addrContent.regeocode.addressComponent.citycode,
|
||||
townName: this.addrContent.regeocode.addressComponent.township,
|
||||
};
|
||||
getRegion(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.addrContent.addr = res.result.name.replace(/,/g, " ");
|
||||
this.addrContent.addrId = res.result.id;
|
||||
this.loading = false;
|
||||
this.showMap = false;
|
||||
this.$emit("getAddress", this.addrContent);
|
||||
}
|
||||
const lnglat = [location.lng,location.lat]
|
||||
this.positionPicker.start(lnglat)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
});
|
||||
},
|
||||
// 初始化地图组件
|
||||
init() {
|
||||
AMapLoader.load({
|
||||
key: "b440952723253aa9fe483e698057bf7d", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
"AMap.ToolBar",
|
||||
"AMap.Autocomplete",
|
||||
"AMap.PlaceSearch",
|
||||
"AMap.Geolocation",
|
||||
"AMap.Geocoder",
|
||||
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: "1.1", // AMapUI 缺省 1.1
|
||||
plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
}).then((AMap) => {
|
||||
let that = this;
|
||||
this.map = new AMap.Map("map-container", {
|
||||
zoom: 12,
|
||||
});
|
||||
that.map.addControl(new AMap.ToolBar());
|
||||
that.map.addControl(new AMap.Autocomplete());
|
||||
that.map.addControl(new AMap.PlaceSearch());
|
||||
that.map.addControl(new AMap.Geocoder());
|
||||
|
||||
// 实例化Autocomplete
|
||||
let autoOptions = {
|
||||
city: "全国",
|
||||
};
|
||||
that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
|
||||
that.geocoder = new AMap.Geocoder(autoOptions);
|
||||
|
||||
that.positionPicker = new AMapUI.PositionPicker({
|
||||
// 拖拽选点
|
||||
mode: "dragMap",
|
||||
map: that.map,
|
||||
});
|
||||
that.positionPicker.start();
|
||||
/**
|
||||
*
|
||||
* 所有回显数据，都在positionResult里面
|
||||
* 需要字段可以查找
|
||||
*
|
||||
*/
|
||||
that.positionPicker.on("success", function (positionResult) {
|
||||
that.addrContent = positionResult;
|
||||
});
|
||||
}).catch((e) => {});
|
||||
},
|
||||
searchOfMap(val) {
|
||||
// 地图搜索
|
||||
let that = this;
|
||||
this.autoComplete.search(val, function (status, result) {
|
||||
// 搜索成功时，result即是对应的匹配数据
|
||||
if (status == "complete" && result.info == "OK") {
|
||||
that.tips = result.tips;
|
||||
} else {
|
||||
that.tips = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
selectAddr(location) {
|
||||
// 选择坐标
|
||||
if (!location) {
|
||||
this.$Message.warning("请选择正确点位");
|
||||
return false;
|
||||
}
|
||||
const lnglat = [location.lng, location.lat];
|
||||
this.positionPicker.start(lnglat);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#map-container{
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
#map-container {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.search-con{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 64px;
|
||||
width: 260px;
|
||||
ul{
|
||||
width: 260px;
|
||||
height: 400px;
|
||||
overflow: scroll;
|
||||
li{
|
||||
padding: 5px;
|
||||
p:nth-child(2){
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
&:hover{
|
||||
background-color:#eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-con {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 64px;
|
||||
width: 260px;
|
||||
ul {
|
||||
width: 260px;
|
||||
height: 400px;
|
||||
overflow: scroll;
|
||||
li {
|
||||
padding: 5px;
|
||||
p:nth-child(2) {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address{
|
||||
margin-bottom: 10px;
|
||||
// color: $theme_color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.address {
|
||||
margin-bottom: 10px;
|
||||
// color: $theme_color;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,146 +1,114 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<Tabs value="RETURN_MONEY" @on-click="handleClickType">
|
||||
<TabPane label="退款" name="RETURN_MONEY">
|
||||
<Row>
|
||||
<Col>
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" >添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="取消" name="CANCEL">
|
||||
<Row>
|
||||
<Col>
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="退货" name="RETURN_GOODS">
|
||||
<Row>
|
||||
<Col>
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="投诉" name="COMPLAIN">
|
||||
<Row>
|
||||
<Col>
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
<Button @click="getDataList" icon="md-refresh">刷新</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card>
|
||||
<Tabs value="RETURN_MONEY" @on-click="handleClickType">
|
||||
<TabPane label="退款" name="RETURN_MONEY">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" >添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="取消" name="CANCEL">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="退货" name="RETURN_GOODS">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane label="投诉" name="COMPLAIN">
|
||||
<Row class="operation" style="margin-bottom: 10px">
|
||||
<Button @click="add" type="primary" icon="md-add">添加</Button>
|
||||
<Button @click="getDataList" icon="md-refresh">刷新</Button>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="modalVisible"
|
||||
|
|
@ -171,9 +139,6 @@
|
|||
modalVisible: false,//添加售后原因弹出框
|
||||
modalTitle: "", //添加售后原因弹出框标题
|
||||
loading: true, // 表单加载状态
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
modalType: 0, // 添加或编辑标识
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
form: {
|
||||
reason: ""
|
||||
|
|
@ -261,20 +226,18 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
this.getDataList();
|
||||
},
|
||||
//切换tab
|
||||
handleClickType(v) {
|
||||
this.searchForm.pageNumber = 1 // 当前页数
|
||||
|
|
@ -309,10 +272,6 @@
|
|||
});
|
||||
this.loading = false;
|
||||
},
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
//添加售后原因
|
||||
add() {
|
||||
this.form.reason = ""
|
||||
|
|
@ -331,7 +290,7 @@
|
|||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
if (this.modalType == 0) {
|
||||
if (this.modalTitle == '添加售后原因') {
|
||||
// 添加
|
||||
delete this.form.id;
|
||||
API_Order.addAfterSaleReason(this.form).then((res) => {
|
||||
|
|
|
|||
|
|
@ -1,127 +1,121 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="订单编号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="售后单号" prop="sn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.sn"
|
||||
placeholder="请输入售后单号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="售后状态">
|
||||
<Select v-model="searchForm.serviceStatus" placeholder="全部" clearable style="width: 200px">
|
||||
<Option value="APPLY">申请售后</Option>
|
||||
<Option value="PASS">通过售后</Option>
|
||||
<Option value="REFUSE">拒绝售后</Option>
|
||||
<Option value="BUYER_RETURN">买家退货，待卖家收货</Option>
|
||||
<Option value="SELLER_CONFIRM">卖家确认收货</Option>
|
||||
<Option value="SELLER_TERMINATION">卖家终止售后</Option>
|
||||
<Option value="BUYER_CANCEL">买家取消售后</Option>
|
||||
<Option value="COMPLETE">完成售后</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="申请时间">
|
||||
<DatePicker
|
||||
v-model="selectDate"
|
||||
type="datetimerange"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
clearable
|
||||
@on-change="selectDateRange"
|
||||
placeholder="选择起始时间"
|
||||
style="width: 200px"
|
||||
></DatePicker>
|
||||
</Form-item>
|
||||
<Form-item label="商家名称" prop="storeName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.storeName"
|
||||
placeholder="请输入商家名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="会员名称" prop="memberName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="售后类型">
|
||||
<Select v-model="searchForm.serviceType" placeholder="全部" clearable style="width: 200px">
|
||||
<Option value="RETURN_MONEY">退款</Option>
|
||||
<Option value="RETURN_GOODS">退货</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="goodsSlot" slot-scope="{row}">
|
||||
<div style="margin-top: 5px;height: 80px; display: flex;">
|
||||
<div style="">
|
||||
<img :src="row.goodsImage" style="height: 60px;margin-top: 3px">
|
||||
</div>
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="订单编号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="售后单号" prop="sn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.sn"
|
||||
placeholder="请输入售后单号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="售后状态">
|
||||
<Select v-model="searchForm.serviceStatus" placeholder="全部" clearable style="width: 200px">
|
||||
<Option value="APPLY">申请售后</Option>
|
||||
<Option value="PASS">通过售后</Option>
|
||||
<Option value="REFUSE">拒绝售后</Option>
|
||||
<Option value="BUYER_RETURN">买家退货，待卖家收货</Option>
|
||||
<Option value="SELLER_CONFIRM">卖家确认收货</Option>
|
||||
<Option value="SELLER_TERMINATION">卖家终止售后</Option>
|
||||
<Option value="BUYER_CANCEL">买家取消售后</Option>
|
||||
<Option value="COMPLETE">完成售后</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="申请时间">
|
||||
<DatePicker
|
||||
v-model="selectDate"
|
||||
type="datetimerange"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
clearable
|
||||
@on-change="selectDateRange"
|
||||
placeholder="选择起始时间"
|
||||
style="width: 200px"
|
||||
></DatePicker>
|
||||
</Form-item>
|
||||
<Form-item label="商家名称" prop="storeName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.storeName"
|
||||
placeholder="请输入商家名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="会员名称" prop="memberName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="售后类型">
|
||||
<Select v-model="searchForm.serviceType" placeholder="全部" clearable style="width: 200px">
|
||||
<Option value="RETURN_MONEY">退款</Option>
|
||||
<Option value="RETURN_GOODS">退货</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
class="mt_10"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="goodsSlot" slot-scope="{row}">
|
||||
<div style="margin-top: 5px;height: 80px; display: flex;">
|
||||
<div style="">
|
||||
<img :src="row.goodsImage" style="height: 60px;margin-top: 3px">
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 13px;">
|
||||
<div class="div-zoom">
|
||||
<a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
|
||||
</div>
|
||||
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
|
||||
<div slot="content">
|
||||
<vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
|
||||
</div>
|
||||
<img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
|
||||
</Poptip>
|
||||
</div>
|
||||
<div style="margin-left: 13px;">
|
||||
<div class="div-zoom">
|
||||
<a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
|
||||
</div>
|
||||
<Poptip trigger="hover" title="扫码在手机中查看" transfer>
|
||||
<div slot="content">
|
||||
<vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
|
||||
</div>
|
||||
<img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
|
||||
</Poptip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -130,7 +124,6 @@
|
|||
|
||||
export default {
|
||||
name: "orderList",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
|
|
@ -158,8 +151,6 @@
|
|||
endTime: "",
|
||||
billPrice: "",
|
||||
},
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
{
|
||||
title: "售后服务单号",
|
||||
|
|
@ -287,44 +278,35 @@
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 开始结束时间分别赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getAfterSaleOrderPage(this.searchForm).then((res) => {
|
||||
|
|
@ -337,25 +319,7 @@
|
|||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
//确认收款
|
||||
confirmPrice(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认收款",
|
||||
content: "您确定要收款吗？",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
API_Order.orderPay(v.sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success("收款成功")
|
||||
this.getDataList()
|
||||
}
|
||||
this.$Modal.remove();
|
||||
})
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// 跳转订单详情
|
||||
detail(v) {
|
||||
let sn = v.sn;
|
||||
this.$router.push({
|
||||
|
|
|
|||
|
|
@ -321,24 +321,9 @@ export default {
|
|||
logisticsModal: false, //查询物流模态框
|
||||
|
||||
logisticsInfo: {}, //物流信息
|
||||
form: {
|
||||
logisticsNo: "",
|
||||
logisticsId: "",
|
||||
}, //换货发货form
|
||||
formValidate: {
|
||||
logisticsNo: [
|
||||
{ required: true, message: "发货单号不能为空", trigger: "change" },
|
||||
],
|
||||
logisticsId: [
|
||||
{ required: true, message: "请选择物流公司", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
modalVisible: false, // 添加或编辑显示
|
||||
afterSaleInfo: {}, // 售后信息
|
||||
afterSaleImage: [], //会员申诉图片
|
||||
appealImages: [], //商家申诉的图片
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
checkedLogistics: [], //选中的物流公司集合
|
||||
storeMsg: {}, // 商家地址信息
|
||||
//商家处理意见
|
||||
params: {
|
||||
|
|
@ -389,9 +374,6 @@ export default {
|
|||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {},
|
||||
},
|
||||
methods: {
|
||||
// 获取售后详情
|
||||
getDetail() {
|
||||
|
|
@ -427,9 +409,6 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
orderDeliverCancel() {
|
||||
this.modalVisible = false;
|
||||
},
|
||||
//平台退款
|
||||
refundPriceSubmit() {
|
||||
if (this.refundPriceForm.remark == "") {
|
||||
|
|
@ -499,7 +478,6 @@ export default {
|
|||
return flag
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.sn = this.$route.query.sn;
|
||||
this.getDetail();
|
||||
|
|
|
|||
|
|
@ -40,9 +40,7 @@
|
|||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
class="mt_10"
|
||||
>
|
||||
<template slot-scope="{row}" slot="goodsName">
|
||||
<a class="mr_10" @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
|
||||
|
|
@ -69,56 +67,6 @@
|
|||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
>
|
||||
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||
<FormItem label="评价内容">
|
||||
<span v-if="content == ''">暂无评价</span>
|
||||
<span v-else>{{content}}</span>
|
||||
</FormItem>
|
||||
<FormItem label="评价图片">
|
||||
<upload-pic-thumb
|
||||
v-model="image"
|
||||
:disable="true"
|
||||
:remove="false"
|
||||
></upload-pic-thumb>
|
||||
</FormItem>
|
||||
<FormItem label="回复内容" prop="reply">
|
||||
<Input v-if="replyStatus == false"
|
||||
v-model="form.reply"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
:rows="4"
|
||||
clearable
|
||||
style="width:260px"
|
||||
/>
|
||||
<span v-else>
|
||||
{{form.reply}}
|
||||
</span>
|
||||
</FormItem>
|
||||
<FormItem label="回复图片" prop="replyImage">
|
||||
<upload-pic-thumb v-if="replyStatus == false"
|
||||
v-model="form.replyImage"
|
||||
:limit="5"
|
||||
></upload-pic-thumb>
|
||||
<upload-pic-thumb v-else
|
||||
v-model="form.replyImage"
|
||||
:disable="true"
|
||||
:remove="false"
|
||||
></upload-pic-thumb>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button v-if="replyStatus == false" type="primary" :loading="submitLoading" @click="handleSubmit" >回复
|
||||
</Button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -133,15 +81,7 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
image:[],//评价图片
|
||||
replyStatus:false,//回复状态
|
||||
modalType: 0, // 添加或编辑标识
|
||||
modalVisible: false, // 添加或编辑显示
|
||||
modalTitle: "", // 添加或编辑标题
|
||||
loading: true, // 表单加载状态
|
||||
content: "",//评价内容
|
||||
drop: false, // 更多搜索项
|
||||
dropDownIcon: "ios-arrow-down", // drop 图标
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
|
|
@ -149,10 +89,6 @@
|
|||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
},
|
||||
form: {}, // 表单
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
|
|
@ -271,54 +207,28 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
dropDown() {
|
||||
if (this.drop) {
|
||||
this.dropDownContent = "展开";
|
||||
this.dropDownIcon = "ios-arrow-down";
|
||||
} else {
|
||||
this.dropDownContent = "收起";
|
||||
this.dropDownIcon = "ios-arrow-up";
|
||||
}
|
||||
this.drop = !this.drop;
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getOrderComplain(this.searchForm).then((res) => {
|
||||
|
|
|
|||
|
|
@ -1,238 +1,228 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Row>
|
||||
<Col style="width:100%;">
|
||||
<Card>
|
||||
<div class="main-content">
|
||||
<div class="div-flow-left">
|
||||
<Card>
|
||||
<div class="main-content">
|
||||
<div class="div-flow-left">
|
||||
<div class="div-form-default">
|
||||
<h3>投诉信息</h3>
|
||||
<dl>
|
||||
<dt>投诉商品</dt>
|
||||
<dd>{{complaintInfo.goodsName}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉状态</dt>
|
||||
<dd v-if="complaintInfo.complainStatus =='NEW'">新投诉</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='CANCEL'">已撤销</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='WAIT_APPEAL'">待申诉</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='COMMUNICATION'">对话中</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='WAIT_ARBITRATION'">等待仲裁</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='COMPLETE'">已完成</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉时间</dt>
|
||||
<dd>{{complaintInfo.createTime}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉主题</dt>
|
||||
<dd>{{complaintInfo.complainTopic}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉内容</dt>
|
||||
<dd>{{complaintInfo.content}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉凭证</dt>
|
||||
<dd v-if="images == ''">
|
||||
暂无投诉凭证
|
||||
</dd>
|
||||
<dd v-else>
|
||||
<div class="div-img" v-for="(item, index) in images" :key="index">
|
||||
<img class="complain-img" :src=item>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default" v-if="complaintInfo.appealContent">
|
||||
<h3>商家申诉信息</h3>
|
||||
<dl>
|
||||
<dt>申诉时间</dt>
|
||||
<dd>{{complaintInfo.appealTime}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>申诉内容</dt>
|
||||
<dd>{{complaintInfo.appealContent}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>申诉凭证</dt>
|
||||
<dd v-if="complaintInfo.appealImagesList.length == 0">
|
||||
暂无申诉凭证
|
||||
</dd>
|
||||
<dd v-else>
|
||||
<div class="div-img" v-for="(item, index) in complaintInfo.appealImagesList" :key="index">
|
||||
<img class="complain-img" :src="item">
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default">
|
||||
<h3>投诉信息</h3>
|
||||
<h3>对话详情</h3>
|
||||
<dl>
|
||||
<dt>投诉商品</dt>
|
||||
<dd>{{complaintInfo.goodsName}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉状态</dt>
|
||||
<dd v-if="complaintInfo.complainStatus =='NEW'">新投诉</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='CANCEL'">已撤销</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='WAIT_APPEAL'">待申诉</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='COMMUNICATION'">对话中</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='WAIT_ARBITRATION'">等待仲裁</dd>
|
||||
<dd v-if="complaintInfo.complainStatus =='COMPLETE'">已完成</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉时间</dt>
|
||||
<dd>{{complaintInfo.createTime}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉主题</dt>
|
||||
<dd>{{complaintInfo.complainTopic}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉内容</dt>
|
||||
<dd>{{complaintInfo.content}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>投诉凭证</dt>
|
||||
<dd v-if="images == ''">
|
||||
暂无投诉凭证
|
||||
</dd>
|
||||
<dd v-else>
|
||||
<div class="div-img" v-for="(item, index) in images">
|
||||
<img class="complain-img" :src=item>
|
||||
<dt>对话记录</dt>
|
||||
<dd>
|
||||
<div class="div-content">
|
||||
<p v-for="(item, index) in complaintInfo.orderComplaintCommunications" :key="index">
|
||||
<span v-if="item.owner == 'STORE'">商家[{{ item.createTime }}]</span>
|
||||
<span v-if="item.owner == 'BUYER'">买家[{{ item.createTime }}]</span>
|
||||
<span v-if="item.owner == 'PLATFORM'">平台[{{ item.createTime }}]</span>
|
||||
{{ item.content }}
|
||||
</p>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default" v-if="complaintInfo.appealContent">
|
||||
<h3>商家申诉信息</h3>
|
||||
<dl>
|
||||
<dt>申诉时间</dt>
|
||||
<dd>{{complaintInfo.appealTime}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>申诉内容</dt>
|
||||
<dd>{{complaintInfo.appealContent}}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>申诉凭证</dt>
|
||||
<dd v-if="complaintInfo.appealImagesList.length == 0">
|
||||
暂无申诉凭证
|
||||
</dd>
|
||||
<dd v-else>
|
||||
<div class="div-img" v-for="(item, index) in complaintInfo.appealImagesList">
|
||||
<img class="complain-img" :src="item">
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default">
|
||||
<h3>对话详情</h3>
|
||||
<dl>
|
||||
<dt>对话记录</dt>
|
||||
<dd>
|
||||
<div class="div-content">
|
||||
<p v-for="(item, index) in complaintInfo.orderComplaintCommunications">
|
||||
<span v-if="item.owner == 'STORE'">商家[{{ item.createTime }}]</span>
|
||||
<span v-if="item.owner == 'BUYER'">买家[{{ item.createTime }}]</span>
|
||||
<span v-if="item.owner == 'PLATFORM'">平台[{{ item.createTime }}]</span>
|
||||
{{ item.content }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</dd>
|
||||
</dl>
|
||||
<dl v-if="complaintInfo.complainStatus!='COMPLETE'">
|
||||
<dt>发送对话</dt>
|
||||
<dd>
|
||||
<Input
|
||||
v-model="params.content"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
:rows="4"
|
||||
clearable
|
||||
style="width:260px"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
|
||||
<dt></dt>
|
||||
<dd>
|
||||
<div style="text-align: right;width: 45%;margin-top: 10px">
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
|
||||
回复
|
||||
</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="returnDataList" style="margin-left: 5px">
|
||||
返回列表
|
||||
</Button>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default" v-if="complaintInfo.complainStatus == 'COMPLETE'">
|
||||
<h3>仲裁结果</h3>
|
||||
<dl>
|
||||
<dt>仲裁意见</dt>
|
||||
<dd>
|
||||
{{complaintInfo.arbitrationResult}}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default" v-if="complaintInfo.complainStatus != 'COMPLETE'">
|
||||
<h3>平台仲裁</h3>
|
||||
<dl v-if="arbitrationResultShow == true">
|
||||
<dt>仲裁</dt>
|
||||
<dl v-if="complaintInfo.complainStatus!='COMPLETE'">
|
||||
<dt>发送对话</dt>
|
||||
<dd>
|
||||
<Input v-model="arbitrationParams.arbitrationResult" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
|
||||
<Input
|
||||
v-model="params.content"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
:rows="4"
|
||||
clearable
|
||||
style="width:260px"
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dl v-if="complaintInfo.complainStatus != 'COMPLETE'">
|
||||
<dt></dt>
|
||||
<dd style="text-align:right;display:flex; justify-content: space-between;">
|
||||
<Button type="primary" ghost :loading="submitLoading" v-if="arbitrationResultShow == false" @click="arbitrationHandle">
|
||||
直接仲裁结束投诉流程
|
||||
</Button>
|
||||
<Button :loading="submitLoading" v-if="complaintInfo.complainStatus == 'NEW'" @click="handleStoreComplaint">
|
||||
交由商家申诉
|
||||
</Button>
|
||||
<Button type="primary" :loading="submitLoading" v-if="arbitrationResultShow == true" @click="arbitrationHandleSubmit">
|
||||
提交仲裁
|
||||
</Button>
|
||||
<dd>
|
||||
<div style="text-align: right;width: 45%;margin-top: 10px">
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
|
||||
回复
|
||||
</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="returnDataList" style="margin-left: 5px">
|
||||
返回列表
|
||||
</Button>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-form-default" v-if="complaintInfo.complainStatus == 'COMPLETE'">
|
||||
<h3>仲裁结果</h3>
|
||||
<dl>
|
||||
<dt>仲裁意见</dt>
|
||||
<dd>
|
||||
{{complaintInfo.arbitrationResult}}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="div-flow-center">
|
||||
|
||||
</div>
|
||||
<div class="div-flow-right">
|
||||
<div class="div-form-default">
|
||||
<h3>相关商品交易信息</h3>
|
||||
<dl>
|
||||
<dt>
|
||||
<img :src="complaintInfo.goodsImage" height="60px">
|
||||
</dt>
|
||||
<dd>
|
||||
<a>{{complaintInfo.goodsName}}</a><br>
|
||||
<span>￥{{complaintInfo.goodsPrice}} * {{complaintInfo.num}}(数量)</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<div class="div-form-default">
|
||||
<h3>订单相关信息</h3>
|
||||
<dl>
|
||||
<dt>
|
||||
订单编号
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.orderSn}}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
下单时间
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.createTime}}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
订单金额
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.orderPrice}}
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<div class="div-form-default">
|
||||
<h3>收件人信息</h3>
|
||||
<dl>
|
||||
<dt>
|
||||
收货人
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeName}}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
收货地址
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeAddressPath}}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
收货人手机
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeMobile}}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="div-form-default" v-if="complaintInfo.complainStatus != 'COMPLETE'">
|
||||
<h3>平台仲裁</h3>
|
||||
<dl v-if="arbitrationResultShow == true">
|
||||
<dt>仲裁</dt>
|
||||
<dd>
|
||||
<Input v-model="arbitrationParams.arbitrationResult" type="textarea" maxlength="200" :rows="4" clearable style="width:260px" />
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt></dt>
|
||||
<dd style="text-align:right;display:flex; justify-content: space-between;">
|
||||
<Button type="primary" ghost :loading="submitLoading" v-if="arbitrationResultShow == false" @click="arbitrationHandle">
|
||||
直接仲裁结束投诉流程
|
||||
</Button>
|
||||
<Button :loading="submitLoading" v-if="complaintInfo.complainStatus == 'NEW'" @click="handleStoreComplaint">
|
||||
交由商家申诉
|
||||
</Button>
|
||||
<Button type="primary" :loading="submitLoading" v-if="arbitrationResultShow == true" @click="arbitrationHandleSubmit">
|
||||
提交仲裁
|
||||
</Button>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-flow-center">
|
||||
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div class="div-flow-right">
|
||||
<div class="div-form-default">
|
||||
<h3>相关商品交易信息</h3>
|
||||
<dl>
|
||||
<dt>
|
||||
<img :src="complaintInfo.goodsImage" height="60px">
|
||||
</dt>
|
||||
<dd>
|
||||
<a>{{complaintInfo.goodsName}}</a><br>
|
||||
<span>￥{{complaintInfo.goodsPrice}} * {{complaintInfo.num}}(数量)</span>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<div class="div-form-default">
|
||||
<h3>订单相关信息</h3>
|
||||
<dl>
|
||||
<dt>
|
||||
订单编号
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.orderSn}}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
下单时间
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.createTime}}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
订单金额
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.orderPrice}}
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<div class="div-form-default">
|
||||
<h3>收件人信息</h3>
|
||||
<dl>
|
||||
<dt>
|
||||
收货人
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeName}}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
收货地址
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeAddressPath}}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
收货人手机
|
||||
</dt>
|
||||
<dd>
|
||||
{{complaintInfo.consigneeMobile}}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Order from "@/api/order";
|
||||
import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
|
||||
|
||||
export default {
|
||||
name: "orderComplaint",
|
||||
components: {
|
||||
uploadPicThumb,
|
||||
},
|
||||
name: "orderComplaintDetail",
|
||||
data() {
|
||||
return {
|
||||
id: 0, // 投诉id
|
||||
|
|
@ -267,9 +257,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 获取投诉详情
|
||||
getDetail() {
|
||||
this.loading = true;
|
||||
API_Order.getOrderComplainDetail(this.id).then((res) => {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Row>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
|
||||
size="small" show-total show-elevator show-sizer></Page>
|
||||
|
|
@ -41,12 +41,9 @@ import * as API_Order from "@/api/order";
|
|||
|
||||
export default {
|
||||
name: "paymentLog",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
drop: false, // 更多搜索项
|
||||
dropDownIcon: "ios-arrow-down", // drop图标
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
|
|
@ -161,6 +158,7 @@ export default {
|
|||
},
|
||||
// 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@
|
|||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Row>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
|
||||
@on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
|
||||
@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
|
||||
|
|
@ -34,8 +33,7 @@
|
|||
import * as API_Order from "@/api/order";
|
||||
|
||||
export default {
|
||||
name: "paymentLog",
|
||||
components: {},
|
||||
name: "refundLog",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
|
|
@ -50,6 +48,7 @@ export default {
|
|||
orderSn: "",
|
||||
isRefund: "",
|
||||
},
|
||||
// 退款起止时间
|
||||
selectDate: null,
|
||||
columns: [
|
||||
{
|
||||
|
|
@ -112,51 +111,35 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
handleReset() {
|
||||
this.$refs.searchForm.resetFields();
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.selectDate = null;
|
||||
this.searchForm.startDate = "";
|
||||
this.searchForm.endDate = "";
|
||||
// 重新加载数据
|
||||
this.getDataList();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 起止时间从新赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.refundLog(this.searchForm).then((res) => {
|
||||
|
|
@ -166,7 +149,6 @@ export default {
|
|||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,79 +1,75 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="订单号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="会员名称" prop="buyerName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.buyerName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="订单状态" prop="orderStatus">
|
||||
<Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
|
||||
<Option value="NEW">新订单</Option>
|
||||
<Option value="CONFIRM">已确认</Option>
|
||||
<Option value="TAKE">待核验</Option>
|
||||
<Option value="COMPLETE">已完成</Option>
|
||||
<Option value="WAIT_PINTUAN">待成团</Option>
|
||||
<Option value="CANCELLED">已取消</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="下单时间">
|
||||
<DatePicker
|
||||
v-model="selectDate"
|
||||
type="datetimerange"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
clearable
|
||||
@on-change="selectDateRange"
|
||||
placeholder="选择起始时间"
|
||||
style="width: 200px"
|
||||
></DatePicker>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="订单号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="会员名称" prop="buyerName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.buyerName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="订单状态" prop="orderStatus">
|
||||
<Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
|
||||
<Option value="NEW">新订单</Option>
|
||||
<Option value="CONFIRM">已确认</Option>
|
||||
<Option value="TAKE">待核验</Option>
|
||||
<Option value="COMPLETE">已完成</Option>
|
||||
<Option value="WAIT_PINTUAN">待成团</Option>
|
||||
<Option value="CANCELLED">已取消</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
<Form-item label="下单时间">
|
||||
<DatePicker
|
||||
v-model="selectDate"
|
||||
type="datetimerange"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
clearable
|
||||
@on-change="selectDateRange"
|
||||
placeholder="选择起始时间"
|
||||
style="width: 200px"
|
||||
></DatePicker>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
class="mt_10"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -81,8 +77,7 @@
|
|||
import * as API_Order from "@/api/order";
|
||||
|
||||
export default {
|
||||
name: "orderList",
|
||||
components: {},
|
||||
name: "fictitiousOrderList",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
|
|
@ -100,9 +95,6 @@
|
|||
orderStatus: ""
|
||||
},
|
||||
selectDate: null, // 下单时间
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
{
|
||||
title: "订单号",
|
||||
|
|
@ -226,24 +218,28 @@
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
|
||||
// 列表排序
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
|
|
@ -252,19 +248,14 @@
|
|||
}
|
||||
this.getDataList();
|
||||
},
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 起止时间从新赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getOrderList(this.searchForm).then((res) => {
|
||||
|
|
@ -295,7 +286,7 @@
|
|||
});
|
||||
|
||||
},
|
||||
|
||||
// 订单详情
|
||||
detail(v) {
|
||||
let sn = v.sn;
|
||||
this.$router.push({
|
||||
|
|
|
|||
|
|
@ -1,142 +1,134 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<div>
|
||||
<Col>
|
||||
<div>
|
||||
<Card style="height: 60px">
|
||||
<div style="">
|
||||
|
||||
<Button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</Button>
|
||||
|
||||
<Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button>
|
||||
|
||||
<Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button>
|
||||
|
||||
<Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">收款</Button>
|
||||
<Button @click="orderLog" type="info" ghost>订单日志</Button>
|
||||
<Card style="height: 60px">
|
||||
<div style="">
|
||||
<Button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</Button>
|
||||
<Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button>
|
||||
<Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button>
|
||||
<Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">收款</Button>
|
||||
<Button @click="orderLog" type="info" ghost>订单日志</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="mt_10 clearfix">
|
||||
<div style="width: 30%; float: left; margin-left: 20px">
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">订单号：</div>
|
||||
<div class="div-item-right">{{ orderInfo.order.sn }}</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card style="height: 400px">
|
||||
<div style="width: 30%; float: left; margin-left: 20px">
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">订单号：</div>
|
||||
<div class="div-item-right">{{ orderInfo.order.sn }}</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">订单来源：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.order.clientType | clientTypeWay}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">订单状态：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.orderStatusValue }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">下单时间：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.order.createTime }}
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">订单来源：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.order.clientType | clientTypeWay}}
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 30%; float: left; margin-left: 20px">
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == false">
|
||||
<div class="div-item-left">发票信息：</div>
|
||||
<div class="div-item-right">暂无发票信息</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票抬头：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptTitle ? orderInfo.receipt.receiptTitle : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true && orderInfo.receipt.taxpayerId">
|
||||
<div class="div-item-left">发票税号：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票内容：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptContent ? orderInfo.receipt.receiptContent : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票金额：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptPrice ? orderInfo.receipt.receiptPrice : '暂无' | unitPrice('￥')}}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">是否开票：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptStatus == 0 ? '未开' : '已开' }}</div>
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">订单状态：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.orderStatusValue }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 36%; float: left">
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">收货信息：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.order.consigneeName }}
|
||||
{{ orderInfo.order.consigneeMobile }}
|
||||
{{ orderInfo.order.consigneeAddressPath }}
|
||||
{{ orderInfo.order.consigneeDetail }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">支付方式：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.paymentMethodValue }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">买家留言：</div>
|
||||
<div class="div-item-right">{{ orderInfo.order.remark }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == false">
|
||||
<div class="div-item-left">发票信息：</div>
|
||||
<div class="div-item-right">暂无发票信息</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票抬头：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptTitle ? orderInfo.receipt.receiptTitle : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true && orderInfo.receipt.taxpayerId">
|
||||
<div class="div-item-left">发票税号：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票内容：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptContent ? orderInfo.receipt.receiptContent : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票金额：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptPrice ? orderInfo.receipt.receiptPrice : '暂无' | unitPrice('￥')}}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">是否开票：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptStatus == 0 ? '未开' : '已开' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">配送方式：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.deliveryMethodValue }}
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">下单时间：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.order.createTime }}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
<Card>
|
||||
</div>
|
||||
<div style="width: 30%; float: left; margin-left: 20px">
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == false">
|
||||
<div class="div-item-left">发票信息：</div>
|
||||
<div class="div-item-right">暂无发票信息</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票抬头：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptTitle ? orderInfo.receipt.receiptTitle : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true && orderInfo.receipt.taxpayerId">
|
||||
<div class="div-item-left">发票税号：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票内容：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptContent ? orderInfo.receipt.receiptContent : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票金额：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptPrice ? orderInfo.receipt.receiptPrice : '暂无' | unitPrice('￥')}}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">是否开票：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptStatus == 0 ? '未开' : '已开' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 36%; float: left">
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">收货信息：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.order.consigneeName }}
|
||||
{{ orderInfo.order.consigneeMobile }}
|
||||
{{ orderInfo.order.consigneeAddressPath }}
|
||||
{{ orderInfo.order.consigneeDetail }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">支付方式：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.paymentMethodValue }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">买家留言：</div>
|
||||
<div class="div-item-right">{{ orderInfo.order.remark }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == false">
|
||||
<div class="div-item-left">发票信息：</div>
|
||||
<div class="div-item-right">暂无发票信息</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票抬头：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptTitle ? orderInfo.receipt.receiptTitle : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true && orderInfo.receipt.taxpayerId">
|
||||
<div class="div-item-left">发票税号：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票内容：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptContent ? orderInfo.receipt.receiptContent : '暂无' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票金额：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptPrice ? orderInfo.receipt.receiptPrice : '暂无' | unitPrice('￥')}}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">是否开票：</div>
|
||||
<div class="div-item-right">{{ orderInfo.receipt.receiptStatus == 0 ? '未开' : '已开' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<div class="div-item-left">配送方式：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.deliveryMethodValue }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="mt_10">
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="goodsSlot" slot-scope="{row}">
|
||||
|
|
@ -608,7 +600,6 @@ export default {
|
|||
<style lang="scss">
|
||||
.order-log-div {
|
||||
line-height: 30px;
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
<Option value="VIRTUAL">核验订单</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="下单时间">
|
||||
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 160px"></DatePicker>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
<Form-item label="订单状态" prop="orderStatus">
|
||||
<Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 160px">
|
||||
<Option value="UNPAID">未付款</Option>
|
||||
|
|
@ -28,10 +32,7 @@
|
|||
<Option value="CANCELLED">已取消</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="下单时间">
|
||||
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 160px"></DatePicker>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
|
||||
</Form>
|
||||
<div>
|
||||
<download-excel class="export-excel-wrapper" :data="data" :fields="fields" name="商品订单.xls">
|
||||
|
|
@ -111,9 +112,6 @@ export default {
|
|||
orderStatus: "",
|
||||
},
|
||||
selectDate: null,
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
{
|
||||
title: "订单号",
|
||||
|
|
@ -222,51 +220,35 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
handleReset() {
|
||||
this.$refs.searchForm.resetFields();
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.selectDate = null;
|
||||
this.searchForm.startDate = "";
|
||||
this.searchForm.endDate = "";
|
||||
// 重新加载数据
|
||||
this.getDataList();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 起止时间从新赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getOrderList(this.searchForm).then((res) => {
|
||||
|
|
|
|||
|
|
@ -1,293 +0,0 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form
|
||||
ref="searchForm"
|
||||
:model="searchForm"
|
||||
inline
|
||||
:label-width="70"
|
||||
class="search-form"
|
||||
>
|
||||
<Form-item label="订单编号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.orderSn"
|
||||
clearable
|
||||
placeholder="请输入订单编号"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="会员名称" prop="memberName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.memberName"
|
||||
clearable
|
||||
placeholder="请输入会员名称"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="店铺名称" prop="storeName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.storeName"
|
||||
clearable
|
||||
placeholder="请输入会员名称"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="发票抬头" prop="receiptTitle">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.receiptTitle"
|
||||
clearable
|
||||
placeholder="请输入发票抬头"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
|
||||
<Form-item label="状态" prop="receiptStatus">
|
||||
<Select v-model="searchForm.receiptStatus" placeholder="请选择" clearable style="width: 200px">
|
||||
<Option value="0">未开票</Option>
|
||||
<Option value="1">已开票</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
|
||||
</Form>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
>
|
||||
<!-- 订单详情格式化 -->
|
||||
<template slot="orderSlot" slot-scope="scope">
|
||||
<a
|
||||
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Order from "@/api/order";
|
||||
import { getShopListData } from "@/api/shops.js";
|
||||
export default {
|
||||
name: "receipt",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc", // 默认排序方式
|
||||
receiptStatus: "", // 起始时间
|
||||
},
|
||||
shopsData: [], // 店铺数据
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
{
|
||||
title: "订单号",
|
||||
key: "orderSn",
|
||||
minWidth: 120,
|
||||
slot: "orderSlot",
|
||||
},
|
||||
{
|
||||
title: "会员名称",
|
||||
key: "memberName",
|
||||
minWidth: 90,
|
||||
tooltip: true
|
||||
},
|
||||
|
||||
{
|
||||
title: "发票抬头",
|
||||
key: "receiptTitle",
|
||||
minWidth: 90,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: "纳税人识别号",
|
||||
key: "taxpayerId",
|
||||
minWidth: 100,
|
||||
tooltip: true
|
||||
|
||||
},
|
||||
{
|
||||
title: "发票内容",
|
||||
key: "receiptContent",
|
||||
minWidth: 120,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: "发票金额",
|
||||
key: "billPrice",
|
||||
width: 90,
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
"div",
|
||||
this.$options.filters.unitPrice(params.row.receiptPrice, "￥")
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "发票状态",
|
||||
key: "receiptStatus",
|
||||
width: 90,
|
||||
tooltip: true,
|
||||
render: (h, params) => {
|
||||
if(params.row.receiptStatus == 0){
|
||||
return h(
|
||||
"div",
|
||||
"未开票"
|
||||
);
|
||||
}else{
|
||||
return h(
|
||||
"div",
|
||||
"已开票"
|
||||
);
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "订单状态",
|
||||
key: "orderStatus",
|
||||
width: 90,
|
||||
render: (h, params) => {
|
||||
if (params.row.orderStatus == "UNPAID") {
|
||||
return h('div', [h('span', { }, '未付款'),]);
|
||||
} else if (params.row.orderStatus == "PAID") {
|
||||
return h('div', [h('span', { }, '已付款'),]);
|
||||
} else if (params.row.orderStatus == "UNDELIVERED") {
|
||||
return h('div', [h('span', { }, '待发货'),]);
|
||||
}else if (params.row.orderStatus == "DELIVERED") {
|
||||
return h('div', [h('span', { }, '已发货'),]);
|
||||
}else if (params.row.orderStatus == "COMPLETED") {
|
||||
return h('div', [h('span', { }, '已完成'),]);
|
||||
}else if (params.row.orderStatus == "TAKE") {
|
||||
return h('div', [h('span', { }, '待核验'),]);
|
||||
}else if (params.row.orderStatus == "CANCELLED") {
|
||||
return h('div', [h('span', { }, '已取消'),]);
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getData();
|
||||
this.getShopList();
|
||||
},
|
||||
handleReachBottom() {
|
||||
setTimeout(() => {
|
||||
if (this.params.pageNumber * this.params.pageSize <= this.total) {
|
||||
this.params.pageNumber++;
|
||||
this.getShopList();
|
||||
}
|
||||
}, 1500);
|
||||
},
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getData();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.getData();
|
||||
},
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getData();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getData();
|
||||
},
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
getShopList() {
|
||||
getShopListData(this.params).then((res) => {
|
||||
if (res.success) {
|
||||
/**
|
||||
* 解决数据请求中，滚动栏会一直上下跳动
|
||||
*/
|
||||
this.shopTotal = res.result.total;
|
||||
this.shopsData.push(...res.result.records);
|
||||
}
|
||||
});
|
||||
},
|
||||
getData() {
|
||||
this.loading = true;
|
||||
API_Order.getReceiptPage(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 建议引入通用样式 可删除下面样式代码
|
||||
@import "../../../styles/table-common.scss";
|
||||
</style>
|
||||
|
|
@ -1,305 +1,322 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="operation mb_10">
|
||||
<Button @click="addParent" icon="md-add">添加一级分类</Button>
|
||||
<div>
|
||||
<Card>
|
||||
<div class="operation mb_10">
|
||||
<Button @click="addParent" type="primary" icon="md-add">添加一级分类</Button>
|
||||
</div>
|
||||
<tree-table
|
||||
ref="treeTable"
|
||||
size="default"
|
||||
:loading="loading"
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:border="true"
|
||||
:show-index="false"
|
||||
:is-fold="true"
|
||||
:expand-type="false"
|
||||
primary-key="id"
|
||||
>
|
||||
<template slot="action" slot-scope="scope">
|
||||
<Button
|
||||
type="info"
|
||||
@click="edit(scope.row)"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
>编辑
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="error"
|
||||
@click="remove(scope.row)"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
>删除
|
||||
</Button>
|
||||
<Button
|
||||
v-show="scope.row.level != 2"
|
||||
type="success"
|
||||
@click="addChildren(scope.row)"
|
||||
size="small"
|
||||
style="margin-right: 5px"
|
||||
>添加子分类
|
||||
</Button>
|
||||
</template>
|
||||
</tree-table>
|
||||
</Card>
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
>
|
||||
<Form
|
||||
ref="form"
|
||||
:model="formAdd"
|
||||
:label-width="100"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级分类" prop="parentId">
|
||||
{{ parentTitle }}
|
||||
<Input
|
||||
v-model="formAdd.parentId"
|
||||
clearable
|
||||
style="width: 100%; display: none"
|
||||
/>
|
||||
</FormItem>
|
||||
</div>
|
||||
<tree-table
|
||||
ref="treeTable"
|
||||
size="default"
|
||||
:loading="loading"
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:border="true"
|
||||
:show-index="false"
|
||||
:is-fold="true"
|
||||
:expand-type="false"
|
||||
primary-key="id">
|
||||
<template slot="action" slot-scope="scope">
|
||||
<Button
|
||||
type="info"
|
||||
@click="edit(scope.row)"
|
||||
size="small"
|
||||
style="margin-right:5px"
|
||||
>编辑
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="error"
|
||||
@click="remove(scope.row)"
|
||||
size="small"
|
||||
style="margin-right:5px"
|
||||
>删除
|
||||
</Button>
|
||||
<Button
|
||||
v-show="scope.row.level != 2 "
|
||||
type="success"
|
||||
@click="addChildren(scope.row)"
|
||||
size="small"
|
||||
style="margin-right:5px"
|
||||
>添加子分类
|
||||
</Button>
|
||||
</template>
|
||||
</tree-table>
|
||||
|
||||
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
|
||||
<Form ref="form" :model="formAdd" :label-width="100" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级分类" prop="parentId">
|
||||
{{parentTitle}}
|
||||
<Input v-model="formAdd.parentId" clearable style="width:100%;display:none"/>
|
||||
</FormItem>
|
||||
</div>
|
||||
<FormItem label="分类名称" prop="name">
|
||||
<Input v-model="formAdd.articleCategoryName" clearable style="width:100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sort" style="width:345px">
|
||||
<InputNumber v-model="formAdd.sort"></InputNumber>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible=false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="Submit">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
<FormItem label="分类名称" prop="name">
|
||||
<Input
|
||||
v-model="formAdd.articleCategoryName"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sort" style="width: 345px">
|
||||
<InputNumber v-model="formAdd.sort"></InputNumber>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="Submit"
|
||||
>提交</Button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
saveArticleCategory,
|
||||
getArticleCategory,
|
||||
delArticleCategory,
|
||||
updateArticleCategory
|
||||
} from "@/api/pages";
|
||||
import TreeTable from "@/views/my-components/tree-table/Table/Table";
|
||||
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
|
||||
import {
|
||||
saveArticleCategory,
|
||||
getArticleCategory,
|
||||
delArticleCategory,
|
||||
updateArticleCategory,
|
||||
} from "@/api/pages";
|
||||
import TreeTable from "@/views/my-components/tree-table/Table/Table";
|
||||
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
|
||||
|
||||
export default {
|
||||
name: "lili-components",
|
||||
components: {
|
||||
TreeTable,
|
||||
uploadPicInput
|
||||
export default {
|
||||
name: "lili-components",
|
||||
components: {
|
||||
TreeTable,
|
||||
uploadPicInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, // 加载状态
|
||||
expandLevel: 1, // 展开的层级
|
||||
modalType: 0, // 添加或编辑标识
|
||||
modalVisible: false, // 添加或编辑显示
|
||||
modalTitle: "", // 添加或编辑标题
|
||||
showParent: false, // 是否展示上级菜单
|
||||
parentTitle: "", // 父级菜单名称
|
||||
formAdd: {
|
||||
// 添加或编辑表单对象初始化数据
|
||||
parentId: "",
|
||||
name: "",
|
||||
sort: 1,
|
||||
level: 0,
|
||||
},
|
||||
// 表单验证规则
|
||||
formValidate: {},
|
||||
columns: [
|
||||
{
|
||||
title: "分类名称",
|
||||
key: "articleCategoryName",
|
||||
witt: "100px",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currView: "index", // 展示哪一类
|
||||
loading: false, // 加载状态
|
||||
brands: [], //品牌集合
|
||||
Specifications: [], //规格集合
|
||||
expandLevel: 1, // 展开的层级
|
||||
modalType: 0, // 添加或编辑标识
|
||||
modalVisible: false, // 添加或编辑显示
|
||||
modalTitle: "", // 添加或编辑标题
|
||||
showParent: false, // 是否展示上级菜单
|
||||
parentTitle: "", // 父级菜单名称
|
||||
formAdd: { // 添加或编辑表单对象初始化数据
|
||||
parentId: "",
|
||||
name: "",
|
||||
sort: 1,
|
||||
level: 0,
|
||||
},
|
||||
// 表单验证规则
|
||||
formValidate: {},
|
||||
columns: [
|
||||
{
|
||||
title: "分类名称",
|
||||
key: "articleCategoryName",
|
||||
witt: "100px",
|
||||
},
|
||||
{
|
||||
title: "排序",
|
||||
key: "sort",
|
||||
width: "100px",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
headerAlign: "center",
|
||||
width: "400px",
|
||||
type: "template",
|
||||
template: "action",
|
||||
}
|
||||
],
|
||||
tableData: []
|
||||
};
|
||||
{
|
||||
title: "排序",
|
||||
key: "sort",
|
||||
width: "100px",
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getAllList();
|
||||
// this.getBrandList();
|
||||
// this.getSpecList()
|
||||
},
|
||||
addChildren(v) {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加子分类";
|
||||
this.formAdd.articleCategoryName = "";
|
||||
this.parentTitle = v.articleCategoryName;
|
||||
this.formAdd.level = eval(v.level + "+1");
|
||||
this.showParent = true;
|
||||
delete this.formAdd.id;
|
||||
this.formAdd.parentId = v.id;
|
||||
this.modalVisible = true;
|
||||
},
|
||||
edit(v) {
|
||||
console.log(v);
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑";
|
||||
this.formAdd.id = v.id;
|
||||
this.formAdd.articleCategoryName = v.articleCategoryName;
|
||||
this.formAdd.level = v.level;
|
||||
this.formAdd.parentId = v.parentId;
|
||||
this.formAdd.sort = v.sort;
|
||||
this.showParent = false;
|
||||
this.modalVisible = true;
|
||||
},
|
||||
addParent() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加一级分类";
|
||||
this.parentTitle = "顶级分类";
|
||||
this.showParent = true;
|
||||
this.$refs.form.resetFields();
|
||||
delete this.formAdd.id;
|
||||
this.formAdd.parentId = 0;
|
||||
this.modalVisible = true;
|
||||
},
|
||||
Submit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
|
||||
|
||||
|
||||
this.submitLoading = true;
|
||||
if (this.modalType === 0) {
|
||||
// 添加 避免编辑后传入id等数据 记得删除
|
||||
delete this.formAdd.id;
|
||||
saveArticleCategory(this.formAdd).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
|
||||
|
||||
|
||||
this.formAdd={}
|
||||
} else {
|
||||
// this.$Message.error(res.message);
|
||||
}
|
||||
this.getAllList();
|
||||
this.modalVisible = false;
|
||||
});
|
||||
} else {
|
||||
// 编辑
|
||||
updateArticleCategory(this.formAdd, this.formAdd.id).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("修改成功");
|
||||
} else {
|
||||
// this.$Message.error(res.message);
|
||||
}
|
||||
this.getAllList();
|
||||
this.modalVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
// 记得确认修改此处
|
||||
content: "您确认要删除 " + v.articleCategoryName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 删除
|
||||
delArticleCategory(v.id).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getAllList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
getAllList() {
|
||||
this.loading = true;
|
||||
getArticleCategory().then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// 仅展开指定级数 默认后台已展开所有
|
||||
let expandLevel = this.expandLevel;
|
||||
res.result.forEach(function (e) {
|
||||
if (expandLevel == 1) {
|
||||
if (e.level == 0) {
|
||||
e.expand = false;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 2) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 3) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = true;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.tableData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
headerAlign: "center",
|
||||
width: "400px",
|
||||
type: "template",
|
||||
template: "action",
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
],
|
||||
tableData: [] // 表格数据
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getAllList();
|
||||
},
|
||||
// 添加子分类
|
||||
addChildren(v) {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加子分类";
|
||||
this.formAdd.articleCategoryName = "";
|
||||
this.parentTitle = v.articleCategoryName;
|
||||
this.formAdd.level = eval(v.level + "+1");
|
||||
this.showParent = true;
|
||||
delete this.formAdd.id;
|
||||
this.formAdd.parentId = v.id;
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 编辑分类
|
||||
edit(v) {
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑";
|
||||
this.formAdd.id = v.id;
|
||||
this.formAdd.articleCategoryName = v.articleCategoryName;
|
||||
this.formAdd.level = v.level;
|
||||
this.formAdd.parentId = v.parentId;
|
||||
this.formAdd.sort = v.sort;
|
||||
this.showParent = false;
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 添加一级分类
|
||||
addParent() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加一级分类";
|
||||
this.parentTitle = "顶级分类";
|
||||
this.showParent = true;
|
||||
this.$refs.form.resetFields();
|
||||
delete this.formAdd.id;
|
||||
this.formAdd.parentId = 0;
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 提交
|
||||
Submit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
if (this.modalType === 0) {
|
||||
// 添加 避免编辑后传入id等数据 记得删除
|
||||
delete this.formAdd.id;
|
||||
saveArticleCategory(this.formAdd).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
|
||||
this.formAdd = {};
|
||||
} else {
|
||||
// this.$Message.error(res.message);
|
||||
}
|
||||
this.getAllList();
|
||||
this.modalVisible = false;
|
||||
});
|
||||
} else {
|
||||
// 编辑
|
||||
updateArticleCategory(this.formAdd, this.formAdd.id).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("修改成功");
|
||||
} else {
|
||||
// this.$Message.error(res.message);
|
||||
}
|
||||
this.getAllList();
|
||||
this.modalVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除分类
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除 " + v.articleCategoryName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
// 删除
|
||||
delArticleCategory(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getAllList();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
// 获取分类数据
|
||||
getAllList() {
|
||||
this.loading = true;
|
||||
getArticleCategory().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// 仅展开指定级数 默认后台已展开所有
|
||||
let expandLevel = this.expandLevel;
|
||||
res.result.forEach(function (e) {
|
||||
if (expandLevel == 1) {
|
||||
if (e.level == 0) {
|
||||
e.expand = false;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 2) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = false;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (expandLevel == 3) {
|
||||
if (e.level == 0) {
|
||||
e.expand = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach(function (c) {
|
||||
if (c.level == 1) {
|
||||
c.expand = true;
|
||||
}
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
if (b.level == 2) {
|
||||
b.expand = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.tableData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.article {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.article {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 12px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<template>
|
||||
|
||||
<div class="wrapper">
|
||||
<Row>
|
||||
<Col style=" height: 100%;" span="4">
|
||||
<Card class="article-category">
|
||||
<Card class="article-category mr_10">
|
||||
<Tree :data="treeData" @on-select-change="handleCateChange"></Tree>
|
||||
</Card>
|
||||
</Col>
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
<Row class="operation padding-row">
|
||||
<Button @click="add" type="primary">添加</Button>
|
||||
</Row>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-selection-change="changeSelect">
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table">
|
||||
<!-- 页面展示 -->
|
||||
<template slot="openStatusSlot" slot-scope="scope">
|
||||
<div>
|
||||
|
|
@ -38,46 +37,44 @@
|
|||
|
||||
</Page>
|
||||
</Row>
|
||||
<template v-if="!selected">
|
||||
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1100">
|
||||
<Form ref="form" :model="form" :label-width="100">
|
||||
<FormItem label="文章标题" prop="title">
|
||||
<Input v-model="form.title" clearable style="width: 40%" />
|
||||
</FormItem>
|
||||
<FormItem label="文章分类" prop="categoryId">
|
||||
<Select v-model="treeValue" placeholder="请选择" clearable style="width: 180px">
|
||||
<Option :value="treeValue" style="display: none">{{
|
||||
treeValue
|
||||
}}
|
||||
</Option>
|
||||
<Tree :data="treeData" @on-select-change="handleCheckChange"></Tree>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="文章排序" prop="sort">
|
||||
<Input type="number" v-model="form.sort" clearable style="width: 10%" />
|
||||
</FormItem>
|
||||
<FormItem class="form-item-view-el" label="文章内容" prop="content">
|
||||
<editor openXss v-model="form.content"></editor>
|
||||
</FormItem>
|
||||
<FormItem label="是否展示" prop="openStatus">
|
||||
<i-switch size="large" v-model="form.openStatus" :true-value="open" :false-value="close">
|
||||
<span slot="open">展示</span>
|
||||
<span slot="close">隐藏</span>
|
||||
</i-switch>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
|
||||
<template v-if="!selected">
|
||||
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1100">
|
||||
<Form ref="form" :model="form" :label-width="100">
|
||||
<FormItem label="文章标题" prop="title">
|
||||
<Input v-model="form.title" clearable style="width: 40%" />
|
||||
</FormItem>
|
||||
<FormItem label="文章分类" prop="categoryId">
|
||||
<Select v-model="treeValue" placeholder="请选择" clearable style="width: 180px">
|
||||
<Option :value="treeValue" style="display: none">{{
|
||||
treeValue
|
||||
}}
|
||||
</Option>
|
||||
<Tree :data="treeData" @on-select-change="handleCheckChange"></Tree>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="文章排序" prop="sort">
|
||||
<Input type="number" v-model="form.sort" clearable style="width: 10%" />
|
||||
</FormItem>
|
||||
<FormItem class="form-item-view-el" label="文章内容" prop="content">
|
||||
<editor openXss v-model="form.content"></editor>
|
||||
</FormItem>
|
||||
<FormItem label="是否展示" prop="openStatus">
|
||||
<i-switch size="large" v-model="form.openStatus" :true-value="open" :false-value="close">
|
||||
<span slot="open">展示</span>
|
||||
<span slot="close">隐藏</span>
|
||||
</i-switch>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -135,8 +132,6 @@ export default {
|
|||
//树结构
|
||||
treeData: [],
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
selectList: [], // 多选数据
|
||||
selectCount: 0, // 多选计数
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
|
|
@ -293,10 +288,10 @@ export default {
|
|||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 改变页码
|
||||
changePageSize(v) {
|
||||
this.selected.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
|
|
@ -306,15 +301,6 @@ export default {
|
|||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
// 取消全选
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
// 列表选择回调
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 获取全部文章分类
|
||||
getAllList(parent_id) {
|
||||
this.loading = true;
|
||||
|
|
@ -353,7 +339,6 @@ export default {
|
|||
getDataList(val) {
|
||||
if (val) this.form = {};
|
||||
this.loading = true;
|
||||
// 带多条件搜索参数获取表单数据 请自行修改接口
|
||||
getArticle(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
|
|
@ -434,10 +419,10 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 删除文章
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
// 记得确认修改此处
|
||||
content: "您确认要删除么?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
|
|
|
|||
|
|
@ -8,15 +8,12 @@
|
|||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="changeSelect"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="pageNumber"
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
|
|
@ -28,7 +25,7 @@
|
|||
</Row>
|
||||
</Card>
|
||||
<!-- 修改模态框 -->
|
||||
<Modal v-model="formValidate" :title="modalTitle" @on-ok="" width="500">
|
||||
<Modal v-model="formValidate" title="详细信息" width="500">
|
||||
<Form
|
||||
ref="formValidate"
|
||||
:model="form"
|
||||
|
|
@ -54,7 +51,7 @@
|
|||
暂无
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-for="(item, index) in this.form.images.split(',')">
|
||||
<span v-for="(item, index) in this.form.images.split(',')" :key="index">
|
||||
<Avatar shape="square" icon="ios-person" size="large" style="width: 80px;height: 90px;margin-right: 5px" :src="item"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -75,25 +72,17 @@
|
|||
} from "@/api/other";
|
||||
|
||||
export default {
|
||||
name: "role-manage",
|
||||
name: "feedback",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
modalType: 0, // 0 添加 1 编辑
|
||||
form: {}, // 表单数据
|
||||
searchForm: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
modalTitle: "详细", // modal标题
|
||||
formValidate: false, // modal显隐
|
||||
images: [], // 图片列表
|
||||
columns: [ // 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "会员名称",
|
||||
key: "userName",
|
||||
|
|
@ -140,7 +129,6 @@
|
|||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 130,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
|
|
@ -166,42 +154,27 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
permData: [],
|
||||
editRolePermId: "",
|
||||
selectAllFlag: false,
|
||||
depData: [],
|
||||
dataType: 0,
|
||||
editDepartments: [],
|
||||
data: [], // 表格数据
|
||||
total: 0 // 数据总数
|
||||
|
||||
saveRoleWay: [], //用户保存用户点击的菜单
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getFeedback();
|
||||
},
|
||||
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getFeedback();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getFeedback();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.sortColumn = e.key;
|
||||
this.sortType = e.order;
|
||||
if (e.order == "normal") {
|
||||
this.sortType = "";
|
||||
}
|
||||
this.getFeedback();
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询意见反馈
|
||||
*/
|
||||
|
|
@ -226,7 +199,6 @@
|
|||
this.formValidate = true
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -64,15 +64,13 @@ import {
|
|||
userInfo,
|
||||
userInfoEdit,
|
||||
} from "@/api/index";
|
||||
import CountDownButton from "@/views/my-components/lili/count-down-button";
|
||||
import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
|
||||
import Cookies from "js-cookie";
|
||||
import util from "@/libs/util";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uploadPicThumb,
|
||||
CountDownButton
|
||||
uploadPicThumb
|
||||
},
|
||||
name: "personal-enter",
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ module.exports = {
|
|||
gitalk: "Gitalk",
|
||||
"js-cookie": "Cookies",
|
||||
wangEditor: "wangEditor",
|
||||
quill: "Quill",
|
||||
stompjs: "Stomp",
|
||||
"sockjs-client": "SockJS",
|
||||
vuedraggable: "vuedraggable"
|
||||
|
|
|
|||
Loading…
Reference in New Issue