init

src/api/modules/contractApi.js

@@ -245,7 +245,18 @@ const contractInterface={
 	getAllocationStatistic:params=>{
 		return http.get('/cygx/allocation/statistics',params)
 	},
-
+	// 订单列表接口
+	getOrderList:params=>{
+		return http.get('/cygx/order/list',params)
+	},
+	// 退款
+	orderRefund:params=>{
+		return http.psst('/cygx/order/refund',params)
+	},
+	// 退款记录
+	orderRefundList:params=>{
+		return http.psst('/cygx/order/refund/list',params)
+	},
 	
 }
 

src/routes/modules/contractRoutes.js

@@ -177,6 +177,15 @@ export default [
 					keepAlive: false
 				}
 			},
+			{
+				path:"refundRecord",
+				component:()=>import("@/views/contract_manage/refundRecord.vue"),
+				name:"研选退款记录",
+				hidden:false,
+				meta: {
+					keepAlive: false
+				}
+			},
 		]
 	},
 ]

src/views/contract_manage/components/tableColums.js

@@ -4,17 +4,18 @@ export const tableColums = (type) => {
     ? [
         {
           label: "订单号",
-          key: "Title",
-          minwidthsty: 140,
+          key: "OrderCode",
+          widthsty: 190,
         },
         {
           label: "姓名",
-          key: "PermissionName",
+          key: "RealName",
           widthsty: 80,
         },
         {
           label: "手机号",
-          key: "IndustryName",
+          key: "Mobile",
+          widthsty: 110,
         },
         {
           label: "公司名称",
@@ -23,57 +24,57 @@ export const tableColums = (type) => {
         {
           label: "所属销售",
           key: "SellerName",
+          widthsty: 100,
         },
         {
           label: "推荐人",
-          key: "CreateTime",
+          key: "InviteName",
+          widthsty: 100,
         },
         {
           label: "金额",
-          key: "StopTime",
+          key: "OrderMoney",
           widthsty: 80,
         },
         {
           label: "创建时间",
-          key: "RegisterPlatform",
-          widthsty: 80,
+          key: "CreateTime",
         },
         {
           label: "畅读卡类型",
           key: "RegisterPlatform",
-          widthsty: 80,
+          widthsty: 100,
         },
         {
           label: "有效期",
-          key: "RegisterPlatform",
-          widthsty: 80,
+          key: "StartDate",
         },
         {
           label: "付款对象",
-          key: "RegisterPlatform",
-          widthsty: 80,
+          key: "SourceTitle",
         },
         {
           label: "状态",
-          key: "RegisterPlatform",
-          widthsty: 80,
+          key: "OrderStatus",
+          widthsty: 90,
         },
       ]
     : type == 2
     ? [
         {
           label: "订单号",
-          key: "Title",
-          minwidthsty: 140,
+          key: "OrderCode",
+          widthsty: 190,
         },
         {
           label: "姓名",
-          key: "PermissionName",
+          key: "RealName",
           widthsty: 80,
         },
         {
           label: "手机号",
-          key: "IndustryName",
+          key: "Mobile",
+          widthsty: 110,
         },
         {
           label: "公司名称",
@@ -82,37 +83,34 @@ export const tableColums = (type) => {
         {
           label: "所属销售",
           key: "SellerName",
+          widthsty: 100,
         },
         {
           label: "推荐人",
-          key: "CreateTime",
+          key: "InviteName",
+          widthsty: 100,
         },
         {
           label: "金额",
-          key: "StopTime",
+          key: "OrderMoney",
           widthsty: 80,
         },
         {
           label: "创建时间",
-          key: "RegisterPlatform",
-          widthsty: 80,
+          key: "CreateTime",
         },
-
-        //
         {
           label: "付款项目",
-          key: "RegisterPlatform",
-          widthsty: 80,
+          key: "PaymentProject",
         },
         {
           label: "标题",
-          key: "Title",
-          widthsty: 80,
+          key: "SourceTitle",
         },
         {
           label: "状态",
-          key: "RegisterPlatform",
-          widthsty: 80,
+          key: "OrderStatus",
+          widthsty: 90,
         },
       ]
     : [];

src/views/contract_manage/paymentRecords.vue

@@ -30,47 +30,71 @@
         >
         </el-cascader>
 
-        <el-select style="margin-right: 20px; width: 220px" v-model="payInfo" placeholder="付款项目" clearable>
-          <!-- <el-option v-for="item in tradeArr" :key="item.IndustryId" :label="item.IndustryName" :value="item.IndustryId"> </el-option> -->
+        <el-select @change="handleSelectChange" style="margin-right: 20px; width: 220px" v-model="payInfo" placeholder="付款项目" clearable>
+          <el-option v-for="item in paymentProjectList" :key="item" :label="item" :value="item"> </el-option>
         </el-select>
-        <el-select style="margin-right: 20px; width: 220px" v-model="payStatus" placeholder="支付状态" clearable>
-          <!-- <el-option v-for="item in tradeArr" :key="item.IndustryId" :label="item.IndustryName" :value="item.IndustryId"> </el-option> -->
+        <el-select @change="handleSelectChange" style="margin-right: 20px; width: 220px" v-model="payStatus" placeholder="支付状态" clearable>
+          <el-option v-for="item in payStatusList" :key="item.key" :label="item.lable" :value="item.key"> </el-option>
         </el-select>
-        <el-input style="margin-right: 20px; width: 220px" prefix-icon="el-icon-search" v-model="orderNumber" placeholder="请输入订单号" />
+        <el-input @input="handleSelectChange" style="margin-right: 20px; width: 220px; margin-bottom: 20px" prefix-icon="el-icon-search" v-model="orderNumber" placeholder="请输入订单号" />
 
-        <el-input style="width: 220px" prefix-icon="el-icon-search" v-model="orderNumber" placeholder="请输入姓名/手机号" />
+        <el-input @input="handleSelectChange" style="width: 220px; margin-bottom: 20px" prefix-icon="el-icon-search" v-model="keyWord" placeholder="请输入姓名/手机号" />
       </div>
-      <el-table :data="tableData" style="width: 100%" border>
+      <el-table :data="tableOrderData" style="width: 100%" border>
         <el-table-column align="center" v-for="item in tableColums" :key="item.key" :prop="item.key" :label="item.label" :width="item.widthsty">
           <template slot-scope="{ row }">
             <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="支付时间" prop="item.key" align="center"> </el-table-column>
-        <el-table-column label="操作" align="center">
+        <el-table-column label="支付时间" prop="PayTime" align="center"> </el-table-column>
+        <el-table-column label="操作" align="center" width="80">
           <template slot-scope="{ row }">
-            <span>退款</span>
+            <span class="editsty" @click="refundHandler(row)">退款</span>
           </template>
         </el-table-column>
       </el-table>
+      <!-- 页数选择器 -->
+      <m-page :page_no="page_no" :pageSize="page_size" :total="total" style="margin: 20px 0" @handleCurrentChange="pageChange" />
     </el-card>
+
+    <el-dialog center v-dialogDrag title="退款" :visible.sync="dialogVisible" append-to-body width="30%" :before-close="handleClose">
+      <div>
+        <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 8 }" placeholder="请输入退款原因" v-model="refundTextarea"> </el-input>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="refundDialogHandlerVisible">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { contractInterface, customInterence } from "@/api/api.js";
 import { tableColums } from "./components/tableColums.js";
+import mPage from "@/components/mPage.vue";
+
 export default {
   name: "",
-  components: {},
+  components: {
+    mPage,
+  },
   props: {},
   data() {
     return {
       tabsList: [
-        { lable: "畅读卡订单", key: "1" },
-        { lable: "单场付费订单", key: "2" },
+        { lable: "畅读卡订单", key: 1 },
+        { lable: "单场付费订单", key: 2 },
+      ],
+      paymentProjectList: ["上市公司小范围", "专家调研", "买方交流"],
+      payStatusList: [
+        { lable: "已取消", key: 0 },
+        { lable: "待支付", key: 1 },
+        { lable: "已支付", key: 2 },
+        { lable: "已退款", key: 3 },
       ],
       tabs_index: 1,
-      timeRange: "", // 时间筛选
+      timeRange: [], // 时间筛选
       sales: [],
       salesArr: [], //销售
       defaultSalesProps: {
@@ -82,19 +106,76 @@ export default {
       payStatus: "", //支付状态
       payInfo: "", //付款项目
       orderNumber: "", //订单号
+      keyWord: "",
       tableColums: [],
+      tableOrderData: [],
+      total: 0,
+      page_no: 1,
+      page_size: 10,
+      dialogVisible: false, // 退款的弹框
+      refundTextarea: "", // 退款原因
+      orderRefundCode: "",
     };
   },
   computed: {},
   watch: {},
   created() {},
   mounted() {
+    this.getSale();
+    this.getOrderList();
     this.tableColums = tableColums(1);
   },
   methods: {
-    tabActive() {},
-    //
-    handleSelectChange() {},
+    // 修改页码
+    pageChange(page_no) {
+      this.page_no = page_no;
+      this.getOrderList();
+    },
+    /* 获取销售 */
+    getSale() {
+      customInterence.getSale().then((res) => {
+        if (res.Ret === 200) {
+          this.salesArr = res.Data.List;
+        }
+      });
+    },
+    // 获取数据
+    async getOrderList() {
+      let salesArr = [];
+      if (this.sales.length) {
+        salesArr = this.sales.map((item) => {
+          return item[item.length - 1];
+        });
+      }
+      const res = await contractInterface.getOrderList({
+        PageSize: this.page_size,
+        CurrentIndex: this.page_no,
+        AdminId: salesArr.join(","),
+        StartDate: this.timeRange.length ? this.timeRange[0] : "",
+        EndDate: this.timeRange.length ? this.timeRange[1] : "",
+        OrderType: this.tabs_index,
+        PaymentProject: this.payInfo,
+        OrderCode: this.orderNumber,
+        KeyWord: this.keyWord,
+        OrderStatus: this.payStatus,
+      });
+      if (res.Ret === 200) {
+        this.tableOrderData = res.Data.List;
+        this.total = res.Data.Paging.Totals || 0;
+      }
+      console.log(res);
+    },
+    tabActive(item) {
+      if (this.tabs_index == item.key) return;
+      this.tableColums = tableColums(item.key);
+      this.tabs_index = item.key;
+      this.handleSelectChange();
+    },
+    // 所有筛选的改变
+    handleSelectChange() {
+      this.page_no = 1;
+      this.getOrderList();
+    },
 
     // 表格三件套
     // 表格点击了
@@ -113,11 +194,39 @@ export default {
       let styleColor = {
         Title: "color: #409eff; cursor: pointer",
         CompanyName: "color: #409eff; cursor: pointer",
+        SourceTitle: "color: #409eff; cursor: pointer",
       };
       return styleColor[key] ? styleColor[key] : "";
     },
     // 文本是否需要处理
-    handleRowContent(row, key) {},
+    handleRowContent(row, key) {
+      if (key == "StartDate") return `${row["StartDate"]} ~ ${row["EndDate"]}`;
+      if (key == "OrderStatus") return row[key] == 0 ? "已取消" : row[key] == 1 ? "待支付" : row[key] == 2 ? "已支付" : row[key] == 3 ? "已退款" : "";
+      return row[key];
+    },
+    // 点击了退款按钮
+    refundHandler(row) {
+      this.orderRefundCode = row.OrderCode;
+      this.dialogVisible = true;
+    },
+    // 关闭了退款弹框
+    handleClose() {
+      this.refundTextarea = "";
+      this.dialogVisible = false;
+    },
+    // 退款的确认弹框
+    async refundDialogHandlerVisible() {
+      if (!this.refundTextarea) return this.$message.warning("退款原因不能为空");
+      // 等待接口
+      const res = await contractInterface.orderRefund({
+        OrderCode: this.orderRefundCode,
+        Remark: this.refundTextarea,
+      });
+      if (res.Ret === 200) {
+        this.$message.success("操作成功");
+        this.handleClose();
+      }
+    },
   },
 };
 </script>
@@ -156,7 +265,7 @@ export default {
 
   .select-box {
     /deep/ .el-input {
-      margin-bottom: 20px;
+      margin-bottom: 20px !important;
     }
   }
 }

src/views/contract_manage/refundRecord.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="container payment-records-container">
+    <div class="dataReport-top">
+      <span v-for="item in tabsList" :key="item.key" :class="tabs_index == item.key ? 'tab_active' : ''" @click="tabActive(item)">{{ item.lable }}</span>
+    </div>
+    <el-card>
+      <div class="select-box">
+        <el-date-picker
+          style="margin-bottom: 20px; margin-right: 20px; width: 300px"
+          v-model="timeRange"
+          type="daterange"
+          @change="handleSelectChange"
+          value-format="yyyy-MM-dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+        <el-cascader
+          v-model="sales"
+          placeholder="所属销售"
+          style="width: 220px; margin: 0 20px 20px 0"
+          :options="salesArr"
+          :props="defaultSalesProps"
+          :show-all-levels="false"
+          collapse-tags
+          clearable
+          filterable
+          @change="handleSelectChange"
+        >
+        </el-cascader>
+
+        <el-select @change="handleSelectChange" style="margin-right: 20px; width: 220px" v-model="payInfo" placeholder="付款项目" clearable>
+          <el-option v-for="item in paymentProjectList" :key="item" :label="item" :value="item"> </el-option>
+        </el-select>
+        <el-select @change="handleSelectChange" style="margin-right: 20px; width: 220px" v-model="payStatus" placeholder="退款状态" clearable>
+          <!-- <el-option v-for="item in tradeArr" :key="item.IndustryId" :label="item.IndustryName" :value="item.IndustryId"> </el-option> -->
+        </el-select>
+        <el-input @input="handleSelectChange" style="margin-right: 20px; width: 220px" prefix-icon="el-icon-search" v-model="orderNumber" placeholder="请输入退款单号" />
+
+        <el-input @input="handleSelectChange" style="width: 220px" prefix-icon="el-icon-search" v-model="keyWord" placeholder="请输入姓名/手机号" />
+      </div>
+      <el-table :data="tableOrderData" style="width: 100%" border>
+        <el-table-column align="center" v-for="item in tableColums" :key="item.key" :prop="item.key" :label="item.label" :width="item.widthsty">
+          <template slot-scope="{ row }">
+            <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="支付时间" prop="PayTime" align="center"> </el-table-column>
+        <el-table-column label="操作" align="center" width="80">
+          <template slot-scope="{ row }">
+            <span class="editsty" @click="closeRefundHandler(row)">关闭退款</span>
+            <span class="editsty" @click="refundHandler(row)">退款原因</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 页数选择器 -->
+      <m-page :page_no="page_no" :pageSize="page_size" :total="total" style="margin: 20px 0" @handleCurrentChange="pageChange" />
+    </el-card>
+
+    <el-dialog center v-dialogDrag title="退款" :visible.sync="dialogVisible" append-to-body width="30%" :before-close="handleClose">
+      <div>
+        {{ refundTextarea }}
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { contractInterface, customInterence } from "@/api/api.js";
+import { tableColums } from "./components/tableColums.js";
+import mPage from "@/components/mPage.vue";
+
+export default {
+  name: "",
+  components: {
+    mPage,
+  },
+  props: {},
+  data() {
+    return {
+      tabsList: [
+        { lable: "畅读卡订单", key: 1 },
+        { lable: "单场付费订单", key: 2 },
+      ],
+      paymentProjectList: ["上市公司小范围", "专家调研", "买方交流"],
+      tabs_index: 1,
+      timeRange: [], // 时间筛选
+      sales: [],
+      salesArr: [], //销售
+      defaultSalesProps: {
+        multiple: true,
+        label: "RealName",
+        children: "ChildrenList",
+        value: "AdminId",
+      }, //销售级联配置
+      payStatus: "", //支付状态
+      payInfo: "", //付款项目
+      orderNumber: "", //订单号
+      keyWord: "",
+      tableColums: [],
+      tableOrderData: [],
+      total: 0,
+      page_no: 1,
+      page_size: 10,
+      dialogVisible: false, // 退款的弹框
+      refundTextarea: "", // 退款原因
+      orderRefundCode: "",
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getSale();
+    this.getOrderRefundList();
+    this.tableColums = tableColums(1);
+  },
+  methods: {
+    // 修改页码
+    pageChange(page_no) {
+      this.page_no = page_no;
+      this.getOrderRefundList();
+    },
+    /* 获取销售 */
+    getSale() {
+      customInterence.getSale().then((res) => {
+        if (res.Ret === 200) {
+          this.salesArr = res.Data.List;
+        }
+      });
+    },
+    // 获取数据
+    async getOrderRefundList() {
+      let salesArr = [];
+      if (this.sales.length) {
+        salesArr = this.sales.map((item) => {
+          return item[item.length - 1];
+        });
+      }
+      const res = await contractInterface.orderRefundList({
+        PageSize: this.page_size,
+        CurrentIndex: this.page_no,
+        AdminId: salesArr.join(","),
+        StartDate: this.timeRange.length ? this.timeRange[0] : "",
+        EndDate: this.timeRange.length ? this.timeRange[1] : "",
+        OrderType: this.tabs_index,
+        PaymentProject: this.payInfo,
+        OrderCode: this.orderNumber,
+        KeyWord: this.keyWord,
+      });
+      if (res.Ret === 200) {
+        this.tableOrderData = res.Data.List;
+        this.total = res.Data.Paging.Totals || 0;
+      }
+      console.log(res);
+    },
+    tabActive(item) {
+      if (this.tabs_index == item.key) return;
+      this.tableColums = tableColums(item.key);
+      this.tabs_index = item.key;
+      this.handleSelectChange();
+    },
+    // 所有筛选的改变
+    handleSelectChange() {
+      this.page_no = 1;
+      this.getOrderRefundList();
+    },
+
+    // 表格三件套
+    // 表格点击了
+    handleRowClick(row, key) {
+      if (key == "CompanyName") {
+        this.$router.replace({
+          path: "/customDetail",
+          query: {
+            id: row.CompanyId,
+          },
+        });
+      }
+    },
+    // 表格样式
+    handleRowStyle(key) {
+      let styleColor = {
+        Title: "color: #409eff; cursor: pointer",
+        CompanyName: "color: #409eff; cursor: pointer",
+        SourceTitle: "color: #409eff; cursor: pointer",
+      };
+      return styleColor[key] ? styleColor[key] : "";
+    },
+    // 文本是否需要处理
+    handleRowContent(row, key) {
+      if (key == "StartDate") return `${row["StartDate"]} ~ ${row["EndDate"]}`;
+      if (key == "OrderStatus") return row[key] == 0 ? "已取消" : row[key] == 1 ? "待支付" : row[key] == 2 ? "已支付" : row[key] == 3 ? "已退款" : "";
+      return row[key];
+    },
+    // 点击了退款按钮
+    refundHandler(row) {
+      this.refundTextarea = row.RefundRemark;
+      this.dialogVisible = true;
+    },
+    // 关闭了退款弹框
+    handleClose() {
+      this.refundTextarea = "";
+      this.dialogVisible = false;
+    },
+    // 关闭退款
+    closeRefundHandler(row) {
+      this.$confirm("确定要关闭这笔退款吗？", "关闭退款", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    // 退款的确认弹框
+    async refundDialogHandlerVisible() {
+      if (!this.refundTextarea) return this.$message.warning("退款原因不能为空");
+      // 等待接口
+      const res = await contractInterface.orderRefund({
+        OrderCode: this.orderRefundCode,
+        Remark: this.refundTextarea,
+      });
+      if (res.Ret === 200) {
+        this.$message.success("操作成功");
+        this.handleClose();
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.payment-records-container {
+  .dataReport-top {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ececec;
+    padding: 20px 30px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+    margin-bottom: 20px;
+    .tab_active {
+      background-color: #409eff;
+      color: #fff;
+    }
+    span {
+      display: inline-block;
+      box-sizing: border-box;
+      padding: 0 24px;
+      line-height: 38px;
+      height: 40px;
+      background: #ecf5ff;
+      border: 1px solid #b3d8ff;
+      opacity: 1;
+      font-weight: 500;
+      font-size: 16px;
+      color: #409eff;
+      border-radius: 4px;
+      margin-right: 30px;
+      cursor: pointer;
+    }
+  }
+
+  .select-box {
+    /deep/ .el-input {
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>