|
@@ -0,0 +1,235 @@
|
|
|
+<template>
|
|
|
+ <div >
|
|
|
+ <el-table border v-loading="loading" :data="customerHisOrderList" >
|
|
|
+ <el-table-column type="expand" >
|
|
|
+ <template slot-scope="props">
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ :data="props.row.items"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="productName"
|
|
|
+ label="名称"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="count"
|
|
|
+ label="数量"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单号" width="120px" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.order.orderCode}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品数量" width="120px" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.order.count}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单金额" width="120px" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.order.orderPrice}}元
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订金" width="120px" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.order.djPrice}}元
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="代收" width="120px" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.order.shippingPrice}}元
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="支付金额" width="120px" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.order.payPrice}}元
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listCustomerHisOrder, getCustomerHisOrder, delCustomerHisOrder, addCustomerHisOrder, updateCustomerHisOrder, exportCustomerHisOrder } from "@/api/crm/customerHisOrder";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "CustomerHisOrder",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 客户历史订单表格数据
|
|
|
+ customerHisOrderList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ customerId: null,
|
|
|
+ customerCode: null,
|
|
|
+ orderJson: null,
|
|
|
+ itemJson: null,
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData(customerId){
|
|
|
+ this.queryParams.customerId=customerId;
|
|
|
+ this.queryParams.pageNum=1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 查询客户历史订单列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listCustomerHisOrder(this.queryParams).then(response => {
|
|
|
+ this.customerHisOrderList = response.rows;
|
|
|
+ this.customerHisOrderList.forEach(function(value,index,array){
|
|
|
+ var order=JSON.parse(value.orderJson);
|
|
|
+ value.order=order;
|
|
|
+ var items=JSON.parse(value.itemJson);
|
|
|
+ value.items=items;
|
|
|
+ });
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ orderId: null,
|
|
|
+ customerId: null,
|
|
|
+ customerCode: null,
|
|
|
+ orderJson: null,
|
|
|
+ itemJson: null,
|
|
|
+ createTime: null
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.orderId)
|
|
|
+ this.single = selection.length!==1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ this.reset();
|
|
|
+ this.open = true;
|
|
|
+ this.title = "添加客户历史订单";
|
|
|
+ },
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.reset();
|
|
|
+ const orderId = row.orderId || this.ids
|
|
|
+ getCustomerHisOrder(orderId).then(response => {
|
|
|
+ this.form = response.data;
|
|
|
+ this.open = true;
|
|
|
+ this.title = "修改客户历史订单";
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.orderId != null) {
|
|
|
+ updateCustomerHisOrder(this.form).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addCustomerHisOrder(this.form).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const orderIds = row.orderId || this.ids;
|
|
|
+ this.$confirm('是否确认删除客户历史订单编号为"' + orderIds + '"的数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return delCustomerHisOrder(orderIds);
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.msgSuccess("删除成功");
|
|
|
+ }).catch(function() {});
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ const queryParams = this.queryParams;
|
|
|
+ this.$confirm('是否确认导出所有客户历史订单数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return exportCustomerHisOrder(queryParams);
|
|
|
+ }).then(response => {
|
|
|
+ this.download(response.msg);
|
|
|
+ }).catch(function() {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|