股份分红奖励记录增加总额统计，并完善列表展示内容

src/views/accounts/caiwutongji/stock/index.vue

@@ -1,401 +1,434 @@
 <template>
-<div class="divBox">
+  <div class="divBox">
     <el-card class="box-card">
-        <div slot="header" class="clearfix">
-            <div class="container">
-                <el-form size="small" label-width="100px">
-                  <!--  <el-form-item label="时间选择：" class="width100">
-                        <el-radio-group v-model="tableFrom.date" type="button" class="mr20" size="small" @change="selectChange(tableFrom.date)">
-                            <el-radio-button v-for="(item,i) in fromList.fromTxt" :key="i" :label="item.val">{{ item.text }}</el-radio-button>
-                        </el-radio-group>
-                        <el-date-picker v-model="timeVal" value-format="yyyy/MM/dd" format="yyyy/MM/dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 250px;" @change="onchangeTime" />
-                    </el-form-item> -->
-                    <el-form-item label="用户手机号：" class="width100">
-                        <el-input v-model="tableFrom.account" placeholder="请输入" class="selWidth" size="small">
-                        </el-input>
-                    </el-form-item>
-					<el-form-item label="用户姓名：" class="width100">
-					    <el-input v-model="tableFrom.nickname" placeholder="请输入" class="selWidth" size="small">
-					    </el-input>
-					</el-form-item>
-
-
-                </el-form>
-
-                <div class="bottom-button">
-                  <el-button size="small" @click="reset" style="width: 100px; margin-top: 20px; border: 1px solid; " >重置</el-button>
-                  <el-button type="primary" size="small" @click="getList(1)" style="width: 100px; margin-top: 20px;">查询</el-button>
-                </div>
-            </div>
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form size="small" label-width="100px">
+            <!--  <el-form-item label="时间选择：" class="width100">
+                  <el-radio-group v-model="tableFrom.date" type="button" class="mr20" size="small" @change="selectChange(tableFrom.date)">
+                      <el-radio-button v-for="(item,i) in fromList.fromTxt" :key="i" :label="item.val">{{ item.text }}</el-radio-button>
+                  </el-radio-group>
+                  <el-date-picker v-model="timeVal" value-format="yyyy/MM/dd" format="yyyy/MM/dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 250px;" @change="onchangeTime" />
+              </el-form-item> -->
+            <el-form-item label="用户手机号：" class="width100">
+              <el-input v-model="tableFrom.account" placeholder="请输入" class="selWidth" size="small">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="用户姓名：" class="width100">
+              <el-input v-model="tableFrom.nickname" placeholder="请输入" class="selWidth" size="small">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="创建时间范围：" class="width100">
+              <el-date-picker
+                  v-model="tableFrom.dateRange"
+                  type="daterange"
+                  size="small"
+                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd"
+                  placeholder="请选择时间范围"
+                  class="small"
+                  @change="onchangeTime" />
+            </el-form-item>
+
+          </el-form>
+
+          <div class="bottom-button">
+            <el-button size="small" @click="reset" style="width: 100px; margin-top: 20px; border: 1px solid; ">重置
+            </el-button>
+            <el-button type="primary" size="small" @click="getList(1)" style="width: 100px; margin-top: 20px;">查询
+            </el-button>
+          </div>
         </div>
-		<div slot="header" class="clearfix">
-			<el-button size="small" type="primary" @click="onAdd">添加股权分红</el-button>
-		</div>
-
-        <el-table :data="tableData.data" style="width: 100%" size="mini" class="table" highlight-current-row >
-
-
-            <el-table-column label="ID" prop="id" min-width="30" />
-            <el-table-column label="用户名称" prop="real_name" min-width="50" />
-            <!-- <el-table-column label="用户昵称" prop="nickname"  min-width="130" />
-            <el-table-column label="用户账号(手机号)" prop="phone"  min-width="130" /> --> 
-
-            <el-table-column label="用户姓名" prop="nickname"  min-width="50" />
-			<el-table-column label="份数" prop="pack"  min-width="50" />
-			<el-table-column label="本次佣金" prop="getcomm"  min-width="70" />
-			<el-table-column label="累计佣金" prop="allgetcomm"  min-width="80" />
-			<el-table-column
-			  prop="create_time"
-			  label="创建时间"
-			  min-width="100"
-			/>
-			<el-table-column
-			  prop="update_time"
-			  label="更新时间"
-			  min-width="100"
-			/>
-            <!-- <el-table-column label="PV变动" prop="status"  min-width="130">
-              <template slot-scope="scope">
-                <span v-if="scope.row.pm == 1">增加</span>
-                <span v-if="scope.row.pm == 2">扣减</span>
-              </template>
-            </el-table-column> -->
-			<el-table-column label="操作" min-width="100" fixed="right" align="center">
-			  <template slot-scope="scope">
-			    <el-button type="text" size="small" @click="onEdit(scope.row.id)">编辑</el-button>
-			    <el-button type="text" size="small" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
-			  </template>
-			</el-table-column>
-        </el-table>
-		
-        <div class="block">
-          <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
-            layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
-            @current-change="pageChange" />
+      </div>
+      <div style="display: flex">
+        <div
+            class="jiangjintotal"
+            v-for="(v, k) in cardLists"
+            :key="k"
+        >
+          <span class="jiangjintotal-title">
+            {{ v.name }}
+          </span>
+          <span class="money">{{ v.count }}</span>
         </div>
+      </div>
+
+      <div slot="header" class="clearfix">
+        <el-button size="small" type="primary" @click="onAdd">添加股权分红</el-button>
+      </div>
+
+      <el-table :data="tableData.data" style="width: 100%" size="mini" class="table" highlight-current-row>
+
+
+        <el-table-column label="ID" prop="id" min-width="30"/>
+<!--        <el-table-column label="用户名称" prop="real_name" min-width="50"/>-->
+        <el-table-column label="用户昵称" prop="nickname"  min-width="80" />
+        <el-table-column label="用户账号(手机号)" prop="account"  min-width="80" />
+
+<!--        <el-table-column label="用户姓名" prop="nickname" min-width="50"/>-->
+        <el-table-column label="份数" prop="pack" min-width="50"/>
+        <el-table-column label="本次佣金" prop="getcomm" min-width="70"/>
+        <el-table-column label="累计佣金" prop="allgetcomm" min-width="80"/>
+        <el-table-column
+            prop="create_time"
+            label="创建时间"
+            min-width="100"
+        />
+        <el-table-column
+            prop="update_time"
+            label="更新时间"
+            min-width="100"
+        />
+        <!-- <el-table-column label="PV变动" prop="status"  min-width="130">
+          <template slot-scope="scope">
+            <span v-if="scope.row.pm == 1">增加</span>
+            <span v-if="scope.row.pm == 2">扣减</span>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="操作" min-width="100" fixed="right" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="onEdit(scope.row.id)">编辑</el-button>
+            <el-button type="text" size="small" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="block">
+        <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
+                       layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
+                       @size-change="handleSizeChange"
+                       @current-change="pageChange"/>
+      </div>
     </el-card>
 
 
-</div>
+  </div>
 </template>
 
 <script>
-import {
-    redPointListApi,
-    exportOrderApi,
-} from "@/api/order";
+// import {
+//   redPointListApi,
+//   exportOrderApi,
+// } from "@/api/order";
 
-import { performanceDivvyLstApi } from '@/api/protocol'
+// import {performanceDivvyLstApi} from '@/api/protocol'
 
-import fileList from "@/components/exportFile/fileList";
-import cardsData from "@/components/cards/index";
-import {getStockListApi,stockCreateForm,stockUpdateForm,stockDelete} from "@/api/accounts";
+// import fileList from "@/components/exportFile/fileList";
+// import cardsData from "@/components/cards/index";
+import {getStockListApi, stockCreateForm, stockUpdateForm, stockDelete} from "@/api/accounts";
 import {roterPre} from "@/settings";
+
 export default {
-    components: {
-        cardsData,
-        fileList
-    },
-    data() {
-        return {
-            performanceList:[],
-            merSelect: [],
-            timeVal: '',
-            tableData: {
-                data: [],
-                total: 0,
-            },
-            listLoading: true,
-            tableFrom: {
-                uid: "",
-                date: "",
-                page: 1,
-                limit: 20,
-                type: "",
-                pm: ""
-            },
-            fromList: {
-                title: "选择时间",
-                custom: true,
-                fromTxt: [{
-                        text: "全部",
-                        val: ""
-                    },
-                    {
-                        text: "今天",
-                        val: "today"
-                    },
-                    {
-                        text: "昨天",
-                        val: "yesterday"
-                    },
-                    {
-                        text: "本周",
-                        val: "thisWeek"
-                    },
-                    {
-                        text: "上周",
-                        val: "lastWeek"
-                    },
-                    {
-                        text: "最近30天",
-                        val: "lately30"
-                    },
-                    {
-                        text: "本月",
-                        val: "month"
-                    },
-                    {
-                        text: "本年",
-                        val: "year"
-                    },
-                ],
-            },
-            fileVisible: false,
-            cardLists: [],
-            teamList: [],
-
-        };
-    },
-    mounted() {
-        this.getList(1);
+  components: {
+    // cardsData,
+    // fileList
+  },
+  data() {
+    return {
+      performanceList: [],
+      merSelect: [],
+      timeVal: '',
+      tableData: {
+        data: [],
+        total: 0,
+      },
+      listLoading: true,
+      tableFrom: {
+        uid: "",
+        date: "",
+        page: 1,
+        limit: 20,
+        type: "",
+        pm: ""
+      },
+      fromList: {
+        title: "选择时间",
+        custom: true,
+        fromTxt: [{
+          text: "全部",
+          val: ""
+        },
+          {
+            text: "今天",
+            val: "today"
+          },
+          {
+            text: "昨天",
+            val: "yesterday"
+          },
+          {
+            text: "本周",
+            val: "thisWeek"
+          },
+          {
+            text: "上周",
+            val: "lastWeek"
+          },
+          {
+            text: "最近30天",
+            val: "lately30"
+          },
+          {
+            text: "本月",
+            val: "month"
+          },
+          {
+            text: "本年",
+            val: "year"
+          },
+        ],
+      },
+      fileVisible: false,
+      cardLists: [],
+      teamList: [],
 
-    },
-    methods: {
+    };
+  },
+  mounted() {
+    this.getList(1);
 
-      pushToOrderList(orderIds) {
+  },
+  methods: {
 
+    pushToOrderList(orderIds) {
 
-        // accounts/extract
 
-        this.$router.push({
-          path: roterPre + "/order/list/",
-          query: { order_sn: orderIds },
-        });
-      },
+      // accounts/extract
 
-      tanchuang() {
-        this.dialogVisible = true
-      },
+      this.$router.push({
+        path: roterPre + "/order/list/",
+        query: {order_sn: orderIds},
+      });
+    },
 
-      selectData(name) {
-        if (name == '系统奖励红PV数') {
-          this.tableFrom.pm = '1'
-        } else if (name == '系统销毁红PV数') {
-          this.tableFrom.pm = '2'
-        } else if (name == '人工奖励红PV数') {
-          this.tableFrom.pm = '3'
-        } else if (name == '人工销毁红PV数') {
-          this.tableFrom.pm = '4'
-        }
+    tanchuang() {
+      this.dialogVisible = true
+    },
 
-        this.getList(1)
-      },
-	  // 添加
-	  onAdd() {
-	    this.$modalForm(stockCreateForm()).then(() => this.getList())
-	  },
-	  // 编辑
-	  onEdit(id) {
-	    this.$modalForm(stockUpdateForm(id)).then(() => this.getList())
-	  },
-	  // 删除
-	  handleDelete(id, idx) {
-	    this.$modalSure().then(() => {
-	      stockDelete(id).then(({ message }) => {
-	        this.$message.success(message)
-	        this.tableData.data.splice(idx, 1)
-	      }).catch(({ message }) => {
-	        this.$message.error(message)
-	      })
-	    })
-	  },
-      // 重置
-      reset() {
-        this.tableFrom ={
-            uid: "",
-            date: "",
-            page: 1,
-            limit: 20,
-            type: "",
-            pm: ""
-          }
-        this.getList();
-      },
-      exportSearchResult() {
-        this.tableFrom.is_excel = 1;
-        getPvCountApi(this.tableFrom).then(res => {
-            console.log( res.data)
-            console.log( res.data.path)
-            this.tableFrom.is_excel = 0;
-            this.$message.success('导出成功')
-            window.open( res.data.path)
-        }).catch((res) => {
-            this.$message.error('导出失败');
+    selectData(name) {
+      if (name === '系统奖励红PV数') {
+        this.tableFrom.pm = '1'
+      } else if (name === '系统销毁红PV数') {
+        this.tableFrom.pm = '2'
+      } else if (name === '人工奖励红PV数') {
+        this.tableFrom.pm = '3'
+      } else if (name === '人工销毁红PV数') {
+        this.tableFrom.pm = '4'
+      }
+
+      this.getList(1)
+    },
+    // 添加
+    onAdd() {
+      this.$modalForm(stockCreateForm()).then(() => this.getList())
+    },
+    // 编辑
+    onEdit(id) {
+      this.$modalForm(stockUpdateForm(id)).then(() => this.getList())
+    },
+    // 删除
+    handleDelete(id, idx) {
+      this.$modalSure().then(() => {
+        stockDelete(id).then(({message}) => {
+          this.$message.success(message)
+          this.tableData.data.splice(idx, 1)
+        }).catch(({message}) => {
+          this.$message.error(message)
         })
-      },
-
-
-
-        // 表格某一行添加特定的样式
-        addTdClass(val) {
-            if (val.row.status > 0 && val.row.paid == 1) {
-                for (let i = 0; i < val.row.orderProduct.length; i++) {
-                    if (val.row.orderProduct[i].refund_num > 0 && val.row.orderProduct[i].refund_num < val.row.orderProduct[i].product_num) {
-                        return "row-bg";
-                    }
-                }
-            } else {
-                return " ";
-            }
-        },
+      })
+    },
+    // 重置
+    reset() {
+      this.tableFrom = {
+        uid: "",
+        date: "",
+        page: 1,
+        limit: 20,
+        type: "",
+        pm: ""
+      }
+      this.getList();
+    },
+    // exportSearchResult() {
+    //   this.tableFrom.is_excel = 1;
+    //   getPvCountApi(this.tableFrom).then(res => {
+    //     console.log(res.data)
+    //     console.log(res.data.path)
+    //     this.tableFrom.is_excel = 0;
+    //     this.$message.success('导出成功')
+    //     window.open(res.data.path)
+    //   }).catch((res) => {
+    //     this.$message.error('导出失败');
+    //   })
+    // },
+
+
+    // 表格某一行添加特定的样式
+    addTdClass(val) {
+      if (val.row.status > 0 && val.row.paid === 1) {
+        for (let i = 0; i < val.row.orderProduct.length; i++) {
+          if (val.row.orderProduct[i].refund_num > 0 && val.row.orderProduct[i].refund_num < val.row.orderProduct[i].product_num) {
+            return "row-bg";
+          }
+        }
+      } else {
+        return " ";
+      }
+    },
 
-        // 导出
-        exportOrder() {
-            exportOrderApi(this.tableFrom)
-                .then((res) => {
-                    // this.$message.success(res.message);
-                    // this.fileVisible = true;
-                    // this.$refs.exportList.exportFileList();
-                  const h = this.$createElement;
-                  this.$msgbox({
-                    title: '提示',
-                    message: h('p', null, [
-                      h('span', null, '文件正在生成中，请稍后点击"'),
-                      h('span', { style: 'color: teal' }, '导出已生成列表'),
-                      h('span', null, '"查看~ '),
-                    ]),
-                    confirmButtonText: '我知道了',
-                  }).then(action => {
-
-                  });                })
-                .catch((res) => {
-                    this.$message.error(res.message);
-                });
-        },
-        getExportFileList() {
-            this.fileVisible = true;
-            this.$refs.exportList.exportFileList('order');
-        },
+    // // 导出
+    // exportOrder() {
+    //   exportOrderApi(this.tableFrom)
+    //       .then((res) => {
+    //         // this.$message.success(res.message);
+    //         // this.fileVisible = true;
+    //         // this.$refs.exportList.exportFileList();
+    //         const h = this.$createElement;
+    //         this.$msgbox({
+    //           title: '提示',
+    //           message: h('p', null, [
+    //             h('span', null, '文件正在生成中，请稍后点击"'),
+    //             h('span', {style: 'color: teal'}, '导出已生成列表'),
+    //             h('span', null, '"查看~ '),
+    //           ]),
+    //           confirmButtonText: '我知道了',
+    //         }).then(action => {
+    //
+    //         });
+    //       })
+    //       .catch((res) => {
+    //         this.$message.error(res.message);
+    //       });
+    // },
+    getExportFileList() {
+      this.fileVisible = true;
+      this.$refs.exportList.exportFileList('order');
+    },
 
-        handleSelectionChange(val) {
-            this.selectionList = val;
-            const data = [];
-            this.selectionList.map((item) => {
-                data.push(item.order_id);
-            });
-            this.ids = data.join(",");
-        },
-        // 选择时间
-        selectChange(tab) {
-            this.timeVal = [];
-            this.tableFrom.date = tab;
-            this.getList(1);
-        },
-        // 具体日期
-        onchangeTime(e) {
-            this.timeVal = e;
-            this.tableFrom.date = e ? this.timeVal.join("-") : "";
-            this.getList(1);
-        },
+    handleSelectionChange(val) {
+      this.selectionList = val;
+      const data = [];
+      this.selectionList.map((item) => {
+        data.push(item.order_id);
+      });
+      this.ids = data.join(",");
+    },
+    // 选择时间
+    selectChange(tab) {
+      this.timeVal = [];
+      this.tableFrom.date = tab;
+      this.getList(1);
+    },
+    // 具体日期
+    onchangeTime(e) {
+      this.timeVal = e;
+      this.tableFrom.date = e ? this.timeVal.join("-") : "";
+      this.getList(1);
+    },
 
-        // 列表
-        getList(num) {
-            this.tableFrom.page = num ? num : this.tableFrom.page;
-            getStockListApi(this.tableFrom).then((res) => {
-                this.tableData.data = res.data.list;
-                this.tableData.total = res.data.count;
-            }).catch((res) => { 
-                this.$message.error(res.message);
-            });
-        },
-        pageChange(page) {
-            this.tableFrom.page = page;
-            this.getList('');
-        },
-        handleSizeChange(val) {
-            this.tableFrom.limit = val;
-            this.getList('');
-        },
-    }
+    // 列表
+    getList(num) {
+      this.tableFrom.page = num ? num : this.tableFrom.page;
+      getStockListApi(this.tableFrom).then((res) => {
+        this.tableData.data = res.data.list;
+        this.tableData.total = res.data.count;
+
+        this.cardLists = [
+          {info: '', name: '本次分红总额', count: res.data.stock_getcomm},
+          {info: '', name: '累计分红总额', count: res.data.stock_allgetcomm},
+        ];
+      }).catch((res) => {
+        this.$message.error(res.message);
+      });
+    },
+    pageChange(page) {
+      this.tableFrom.page = page;
+      this.getList('');
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getList('');
+    },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .selWidth {
-    width: 300px;
+  width: 300px;
 }
 
 .el-dropdown-link {
-    cursor: pointer;
-    color: #409eff;
-    font-size: 12px;
+  cursor: pointer;
+  color: #409eff;
+  font-size: 12px;
 }
 
 .el-icon-arrow-down {
-    font-size: 12px;
+  font-size: 12px;
 }
 
 .tabBox_tit {
-    width: 53%;
-    font-size: 12px !important;
-    margin: 0 2px 0 10px;
-    letter-spacing: 1px;
-    padding: 5px 0;
-    box-sizing: border-box;
+  width: 53%;
+  font-size: 12px !important;
+  margin: 0 2px 0 10px;
+  letter-spacing: 1px;
+  padding: 5px 0;
+  box-sizing: border-box;
 }
 
 ::v-deep .row-bg {
-    .cell {
-        color: red !important;
-    }
+  .cell {
+    color: red !important;
+  }
 }
 
 .filter-item {
-  width:50%;
+  width: 50%;
 }
 
 
 .cancel-order-mark {
-    margin-top: 30px;
+  margin-top: 30px;
 
-    .cancel-order-select-reason {
-        height: 30px;
-    }
+  .cancel-order-select-reason {
+    height: 30px;
+  }
 
-    .canel-order-remark-input {
-        width: 75%;
-        margin-left: 35px;
-    }
+  .canel-order-remark-input {
+    width: 75%;
+    margin-left: 35px;
+  }
 
 
 }
 
 .bottom-button {
-    margin-top: 30px;
-    margin-left: 300px;
-    width: 250px;
-    display: flex;
-    justify-content: space-between;
-  }
+  margin-top: 30px;
+  margin-left: 300px;
+  width: 250px;
+  display: flex;
+  justify-content: space-between;
+}
 
 .cancel-button {
-        display: flex;
-        justify-content: center;
-        margin-top: 20px;
-        gap:50px;
-        height: 30px;
-        // background-color: rebeccapurple;
-
-        .confirm {
-          width: 70px;
-          // height: 30px;
-        }
-        .cacnel-item {
-          width: 70px;
-          // height: 30px;
-        }
-    }
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  gap: 50px;
+  height: 30px;
+  // background-color: rebeccapurple;
+
+  .confirm {
+    width: 70px;
+    // height: 30px;
+  }
+
+  .cacnel-item {
+    width: 70px;
+    // height: 30px;
+  }
+}
 
 .selected-kuang {
   width: 500px;