123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504 |
- <style scoped lang="scss">
- ::v-deep a {
- color: #409eff;
- display: block;
- }
- .item-name-calss p {
- margin: 0;
- text-align: left;
- }
- .tableBox {
- width: 100%;
- }
- ::v-deep .el-table {
- height: calc(100vh - 280px);
- }
- </style>
- <template>
- <div class="app-container" style="height: 100%">
- <el-form
- :model="queryParams"
- ref="queryForm"
- size="small"
- :inline="true"
- v-show="showSearch"
- label-width="100px"
- >
- <el-form-item label="人员名称" prop="userId">
- <el-select
- filterable
- v-model="queryParams.userId"
- placeholder="人员名称"
- clearable
- style="width: 240px"
- >
- <el-option
- v-for="item in queryParamsList.personList"
- :key="item.userId"
- :label="item.nickMame"
- :value="item.userId"
- >
- <div style="display: flex">
- <span
- style="
- width: 10px;
- height: 10px;
- border-radius: 50%;
- background-color: green;
- position: relative;
- top: 12px;
- margin-right: 5px;
- "
- :style="
- item.status == '0'
- ? 'backgroundColor:green'
- : 'backgroundColor:red'
- "
- >{{ item.value }}</span
- ><span>{{ item.nickMame }}</span>
- </div>
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="商品名称" prop="itemTitle">
- <el-input
- v-model="queryParams.itemTitle"
- placeholder="请输入商品名称"
- clearable
- style="width: 240px"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="商品Id" prop="itemId">
- <el-input
- v-model="queryParams.itemId"
- placeholder="请输入商品Id"
- clearable
- style="width: 240px"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="选择日期">
- <el-date-picker
- v-model="uploadDate"
- style="width: 240px"
- value-format="yyyy-MM-dd"
- format="yyyy-MM-dd"
- type="daterange"
- range-separator="-"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- ></el-date-picker>
- </el-form-item>
- <el-form-item>
- <el-button
- type="primary"
- icon="el-icon-search"
- size="mini"
- @click="handleQuery"
- >搜索
- </el-button
- >
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
- >重置
- </el-button
- >
- <el-button
- type="warning"
- plain
- icon="el-icon-download"
- size="mini"
- @click="handleExport"
- :loading="downLoadLoading"
- >导出
- </el-button
- >
- </el-form-item>
- </el-form>
- <div class="tableBox">
- <el-table
- v-loading="loading"
- :data="typeList"
- @selection-change="handleSelectionChange"
- ref="multipleTable"
- @sort-change="sortChange"
- height="calc(100vh - 100px);"
- >
- <el-table-column
- label="商品名称"
- align="center"
- prop="itemTitle"
- width="400"
- >
- <template slot-scope="scope">
- <div style="display: flex; width: 100%">
- <div style="width: 40%">
- <img
- :src="scope.row.imageUrl"
- alt=""
- style="width: 70px; height: auto"
- />
- </div>
- <div style="width: 60%" class="item-name-calss">
- <a
- @click="toIndexDetail(scope.row)"
- style="
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- width: 100%;
- "
- :title="scope.row.itemTitle"
- >
- {{ scope.row.itemTitle }}
- </a>
- <p>商品Id: {{ scope.row.itemId }}</p>
- <p>商品单价: {{ scope.row.reservePrice}}元</p>
- <p>
- 佣金率:
- {{
- scope.row.itemCommissionRate
- }}
- </p>
- </div>
- </div>
- </template>
- </el-table-column>
- <el-table-column
- label="订单数"
- align="center"
- prop="orderNum"
- sortable="custom"
- >
- </el-table-column>
- <el-table-column
- label="环比"
- align="center"
- prop="orderNumRatio"
- sortable="custom"
- >
- <template slot-scope="scope">
- <i :style=" scope.row.orderNumRatio > 0 ? 'color:red' : 'color:green'"
- >{{ scope.row.orderNumRatio + "%" }}
- </i>
- </template>
- </el-table-column>
- <el-table-column
- label="有效订单数"
- align="center"
- prop="validOrderNUm"
- sortable="custom"
- />
- <el-table-column
- label="有效率"
- align="center"
- prop="validRadio"
- sortable="custom"
- >
- <template slot-scope="scope">
- {{
- scope.row.validRadio
- }}
- </template>
- </el-table-column>
- <el-table-column
- label="预估服务费"
- align="center"
- prop="regimentalPromotionAmount"
- width="80"
- >
- <template slot-scope="scope">
- {{scope.row.regimentalPromotionAmount }}
- </template>
- </el-table-column>
- <el-table-column
- label="二级团预估服务费"
- align="center"
- prop="regimentalPromotionAmount"
- width="80"
- >
- <template slot-scope="scope">
- {{scope.row.secondEstimatedCommission }}
- </template>
- </el-table-column>
- <el-table-column label="归属人" align="center" prop="userName">
- </el-table-column>
- <el-table-column label="top3的达人" align="center" prop="topAnchors">
- <template slot-scope="scope">
- <el-popover
- placement="top"
- title="top3"
- width="600"
- trigger="hover"
- @show="showTitle(scope.row)"
- >
- <asamplingList
- v-for="(item, index) in videoTag"
- :key="index"
- @click="toDetail(item)"
- style="text-align: left; display: block"
- >
- {{ item.promoterNickName }}(Id:{{ item.promoterId }};订单数量:{{
- item.orderNum
- }})
- </asamplingList>
- <a slot="reference">查看</a>
- </el-popover>
- </template>
- </el-table-column>
- </el-table>
- <pagination
- v-show="total > 0"
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getList"
- />
- </div>
- </div>
- </template>
- <script>
- import {
- listType,
- getType,
- delType,
- addType,
- updateType,
- refreshCache,
- } from "@/api/system/dict/type";
- import {
- getBytedanceItemList,
- downFile,
- getSupplyChainUserList,
- getBytedanceTopPromoterByItemId
- } from "@/api/bytedance/bytedance";
- export default {
- name: "Goods",
- dicts: ["sys_normal_disable"],
- data() {
- return {
- downLoadLoading: false,
- dialogTableVisible: false,
- logPage: {
- pageNum: 1,
- pageSize: 10,
- },
- logData: [],
- logTotal: 0,
- logLoading: false,
- // 遮罩层
- loading: true,
- // 选中数组
- ids: [],
- // 非单个禁用
- single: true,
- // 非多个禁用
- multiple: true,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 字典表格数据
- typeList: [],
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- // 分配销售
- openAllocation: false,
- // 选择的销售id
- saleId: undefined,
- // 获取用户id
- userId: undefined,
- // 销售列表
- saleList: [],
- // 分配销售确定loading
- confirmLoadingSale: false,
- // 日期范围
- dateRange: [],
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- userId: undefined,
- itemId: undefined,
- itemTitle: undefined,
- orderStartDate: undefined,
- orderEndDate: undefined,
- },
- uploadDate: [new Date(), new Date()],
- //查询参数所用下拉数据
- queryParamsList: {
- personList: [],
- },
- videoTag: [],
- videoVisibleChange: undefined,
- prop: "orderNum",
- sort: "desc",
- };
- },
- created() {
- this.userId = this.$store.getters.userId;
- let date = new Date();
- let y = date.getFullYear();
- let MM = date.getMonth() + 1;
- MM = MM < 10 ? "0" + MM : MM;
- let dd = date.getDate();
- dd = dd < 10 ? "0" + dd : dd;
- this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
- },
- mounted() {
- this.$nextTick(() => {
- this.getPersonList();
- this.getList();
- });
- },
- methods: {
- showTitle(visible) {
- console.log(visible);
- if (this.videoVisibleChange != visible.itemId) {
- this.videoVisibleChange = visible.itemId;
- this.videoTag = [];
- getBytedanceTopPromoterByItemId(
- this.addDateRange(
- {itemId: visible.itemId},
- this.uploadDate,
- "orderStartDate",
- "orderEndDate"
- )
- ).then((res) => {
- this.videoTag = res.rows;
- });
- } else {
- return;
- }
- },
- /** 导出按钮操作 */
- handleExport() {
- this.downLoadLoading = true;
- downFile(
- "/bytedance/order/exportBytedanceItemList",
- this.addDateRange(
- this.queryParams,
- this.uploadDate,
- "orderStartDate",
- "orderEndDate"
- )
- ).then((res) => {
- let blob = new Blob([res], {
- type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
- });
- let downloadElement = document.createElement("a");
- let href = window.URL.createObjectURL(blob); //创建下载的链接
- downloadElement.href = href;
- downloadElement.download = `商品列表_${this.uploadDate[0]}-${this.uploadDate[1]}.xlsx`; //下载后文件名
- document.body.appendChild(downloadElement);
- downloadElement.click(); //点击下载
- document.body.removeChild(downloadElement); //下载完成移除元素
- window.URL.revokeObjectURL(href); //释放掉blob对象
- this.downLoadLoading = false;
- });
- },
- toDetail(item) {
- this.$router.replace({
- path: "/supplyChain/kuaishou/indexDetails",
- query: {
- id: item.promoterId,
- name: item.promoterNickName,
- orderStartDate: this.uploadDate[0],
- orderEndDate: this.uploadDate[1],
- },
- });
- },
- toIndexDetail(item) {
- this.$router.replace({
- path: "/supplyChain/bytedance/bytedanceGoodsDetails",
- query: {
- id: item.itemId,
- name: item.itemTitle,
- orderStartDate: this.uploadDate[0],
- orderEndDate: this.uploadDate[1],
- },
- });
- },
- sortChange(col, prop, order) {
- this.prop = col.prop;
- this.sort = !!col.order
- ? col.order == "descending"
- ? "desc"
- : "asc"
- : "desc";
- this.handleQuery();
- },
- getPersonList() {
- getSupplyChainUserList().then((response) => {
- this.queryParamsList.personList = response.rows;
- });
- },
- /** 查询字典类型列表 */
- getList() {
- this.loading = true;
- getBytedanceItemList(
- this.addDateRange(
- {...this.queryParams, fieId: this.prop, sort: this.sort},
- this.uploadDate,
- "orderStartDate",
- "orderEndDate"
- )
- ).then((response) => {
- this.typeList = response.rows;
- this.total = response.total;
- this.loading = false;
- });
- },
- // 取消按钮
- cancel() {
- this.open = false;
- this.confirmLoading = false;
- this.reset();
- },
- // 表单重置
- reset() {
- this.form = {};
- this.dateFile = null;
- this.resetForm("form");
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getList();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.dateRange = [];
- let date = new Date();
- let y = date.getFullYear();
- let MM = date.getMonth() + 1;
- MM = MM < 10 ? "0" + MM : MM;
- let dd = date.getDate();
- dd = dd < 10 ? "0" + dd : dd;
- this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
- this.resetForm("queryForm");
- this.queryParams.pageNum = 1;
- this.handleQuery();
- },
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.ids = selection.map((item) => item.id);
- },
- },
- };
- </script>
|