添加丹灵销售分析页面

马宇豪

2025-01-24 f08c38b9cb4e1ac4185a98d21c9ad2696bd8a633

添加丹灵销售分析页面

 src/api/productPurchaseSearch.js

@@ -14,6 +14,17 @@
    })
}

export function getDLPersonListData(data) {
    return request({
        headers:{
            'Authorization': getToken()
        },
        url: process.env.BASE_API+'/order/danLingSaleRecord4',
        method: 'post',
        data:data
    })
}

export function getCityInOut(data) {
    return request({
        headers:{

 src/views/purchase/danlingPerson.vue

对比新文件
@@ -0,0 +1,446 @@
<template>
    <div class="app-container">
        <div class="filter-container">

            <div style="display: block;">
                <div class="basic_search" style="padding-top: 10px;">
                    <span>按照时间查询：</span>
                    <el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="validTime"
                        type="daterange"
                        :default-time="['00:00:00','23:59:59']"
                        :picker-options="pickerOptions"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </div>

                <div class="basic_search" style="padding-top: 10px;margin-left: 20px" >
                    <span>是否需上传身份证：</span>
                    <el-select v-model="listQuery.filter.isNeedUploadPhoto" placeholder="请选择" style="width:100px">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div style="margin-top: 10px;">
<!--                <div style="display: block">-->
<!--                    <div class="basic_search">-->
<!--                        <span>区域：</span>-->
<!--                        <el-select v-model="listQuery.filter.province" clearable filterable size="small" @change="changeArea('province')">-->
<!--                            <el-option-->
<!--                                v-for="item in provinceList"-->
<!--                                :key="item.id"-->
<!--                                :label="item.name"-->
<!--                                :value="item.name"-->
<!--                            >-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                    <div class="basic_search">-->
<!--                        <el-select v-model="listQuery.filter.city" prop="city" clearable filterable size="small" @change="changeArea('city')">-->
<!--                            <el-option-->
<!--                                v-for="item in cityList"-->
<!--                                :key="item.id"-->
<!--                                :label="item.name"-->
<!--                                :value="item.name"-->
<!--                            >-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                    <div class="basic_search">-->
<!--                        <el-select v-model="listQuery.filter.district" clearable filterable size="small" @change="changeArea('district')">-->
<!--                            <el-option-->
<!--                                v-for="item in districtList"-->
<!--                                :key="item.id"-->
<!--                                :label="item.name"-->
<!--                                :value="item.name"-->
<!--                            >-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                    <div class="basic_search">-->
<!--                        <el-select v-model="listQuery.filter.street"clearable filterable size="small" @change="changeArea('street')" >-->
<!--                            <el-option-->
<!--                                v-for="item in streetList"-->
<!--                                :key="item.id"-->
<!--                                :label="item.name"-->
<!--                                :value="item.name"-->
<!--                            >-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                    <div class="basic_search">-->
<!--                        <el-select v-model="listQuery.filter.committee" size="small" clearable filterable>-->
<!--                            <el-option-->
<!--                                v-for="item in committeeList"-->
<!--                                :key="item.id"-->
<!--                                :label="item.name"-->
<!--                                :value="item.name"-->
<!--                            >-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                </div>-->
            <div style="display: block;margin-top: 10px">
                <div class="basic_search" >
                    <span>购买人身份证：</span>
                    <el-input filterable clearable v-model="listQuery.filter.identify"  size="small" style="width:200px">
                    </el-input>
                </div>
                <div class="basic_search" style="margin-left: 15px">
                    <span>产品流向码：</span>
                    <el-input filterable clearable v-model="listQuery.filter.directioncode" size="small"  style="width:200px">
                    </el-input>
                </div>
                <div class="basic_search" style="margin-left: 15px">
                    <span>民族：</span>
                    <el-input filterable clearable v-model="listQuery.filter.nation" size="small"  style="width:200px">
                    </el-input>
                </div>
            </div>

            <div style="margin-top: 10px">
                <div class="basic_search" style="margin-left: 15px">
                    <span>按企业名称：</span>
                    <el-input filterable clearable v-model="listQuery.filter.enterprisename" size="small"  style="width:200px">
                    </el-input>
                </div>
                <div class="basic_search" >
                    <el-button style="margin-left: 10px;" type="primary" @click="reset()" size="small">重置</el-button>
                    <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="searchProductSearch('查询','')" size="small">查询</el-button>
                    <el-button style="margin-left: 10px;" type="primary" icon="el-icon-download" @click="exportToExcel" v-long-re-click size="small">导出</el-button>
                </div>

            </div>
            </div>
        </div>
        <div class="table_content">
            <el-table
                v-loading="listLoading"
                :key="tableKey"
                :data="personPurchaseData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
            >
                <el-table-column label="序号" type="index" align="center" width="60"/>
                <el-table-column label="地区" prop="city" align="center" width="150">
                </el-table-column>
                <el-table-column label="公司名称" prop="enterprisename" align="center"  width="200">
                </el-table-column>
                <el-table-column label="公司编号" prop="companynumber" align="center">
                </el-table-column>
                <el-table-column label="购买人姓名" prop="name" align="center">
                </el-table-column>
                <el-table-column label="民族" prop="nation" align="center">
                </el-table-column>
                <el-table-column label="购买人身份证" prop="identify" align="center"  width="200">
                </el-table-column>
                <el-table-column label="购买数量(挂、个)" prop="num" align="center" width="100">
                </el-table-column>
                <el-table-column label="退货数量(挂、个)" prop="returnnum" align="center" width="100">
                </el-table-column>
                <el-table-column label="最近购买时间" prop="saletime" align="center" width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.saletime | formatDate}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="证件照" align="center">
                    <template slot-scope="scope">
                        <el-image
                            v-if="scope.row.path !== null"
                            style="width: 66px; height: 66px"
                            :src="scope.row.path"
                            :preview-src-list="previewList">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <!--            <el-button type="text" @click="showEditHandle(scope.row)">编辑</el-button>-->
                        <el-button type="text" @click="showPurchaseDetail(scope.row)" v-if="scope.row.companynumber !== undefined">查看</el-button>
                        <el-button type="text" @click="showUploadDialogHandler(scope.row.identify)"  v-if="Cookies.get('isSupervision') !=='null'">上传</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <el-pagination
                v-show="recordTotal>0"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="pageSize"
                :total="recordTotal"
                layout="total, sizes, prev, pager, next, jumper"
                background
                style="float:right;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
            <br>
        </div>
        <el-dialog
            title="提示"
            center
            :visible.sync="reClickTip"
            width="50%">
            <span style="color: red">由于导出数据量大，请各监管单位导出数据时不要连续点击，导出按钮已限制30s内只允许点击一次。</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="reClickTip = false">取 消</el-button>
            <el-button type="primary" @click="reClickTip = false">确 定</el-button>
          </span>
        </el-dialog>
        <personPurchaseDetail ref="person"></personPurchaseDetail>
        <upload-dialog ref="upload" @refresh="refresh"></upload-dialog>
    </div>
</template>

<script>
import personPurchaseDetail from './personPurchaseDetail/index'
import { computePageCount } from "../../utils";
import {exportPerson, getDLPersonListData, getPersonListData} from "../../api/productPurchaseSearch";
import {getCityListData, getProvinceListData , } from "../../api/area";
import uploadDialog from "./customerPhoto/index";
import Cookies from "js-cookie";

export default {
    name: "person",
    data(){
        return{
            tableKey:'',
            validTime:['',''],
            reClickTip: false,
            listQuery: {
                pageSize:10,
                pageIndex:1,
                filter: {
                    starttime: '',
                    endtime: '',
                    identify: '',
                    enterprisename: '',
                    directioncode:'',
                    isNeedUploadPhoto:'',
                    nation:''
                },
            },
            Cookies:Cookies,
            pageSize: 20,
            recordTotal: 0,
            currentPage: 1,
            pageTotal: 0,
            listLoading:false,
            personPurchaseData:[],
            previewList:[],
          options: [
            { label: '全部', value: '' },
            { label: '是', value:1 },
            { label: '否', value: -1 }
          ],
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
        }
    },
    components:{
      personPurchaseDetail,
      uploadDialog
    },
    created() {
      this.initValidTime()
      this.getPersonProductList()
    },
    watch: {
    },
    methods:{
        async getPersonProductList(){
            this.listLoading = true
            if( this.validTime !== null ){
                this.listQuery.filter.starttime = this.validTime[0]
                this.listQuery.filter.endtime = this.validTime[1]
            }else{
                this.listQuery.filter.starttime = ''
                this.listQuery.filter.endtime = ''
            }
            let res = await getDLPersonListData(this.listQuery)
            let data = JSON.parse(Base64.decode(res.data))
            if(data.code === "200"){
                this.recordTotal = data.result.total
                this.pageSize = data.result.size
                this.pageTotal = computePageCount(data.result.total, data.result.size)
                this.currentPage = data.result.current
                data.result.records.map(item => item.path = (item.path === undefined ? null : process.env.IMG_API + item.path))
                this.previewList = data.result.records.map(item => item.path).filter(item=>item !== null)
                this.personPurchaseData = data.result.records
            }else{
                this.$message({
                    type:'warning',
                    message:res.data.message
                })
            }
            this.listLoading = false
        },

        showPurchaseDetail(val){
            this.$refs.person.openPersonPurchaseDetail(this.listQuery.filter.starttime,this.listQuery.filter.endtime,val.identify,val.companynumber,this.listQuery.filter.directioncode)
        },
      showUploadDialogHandler(idCard) {
          this.$refs.upload.showDialog(idCard)
      },
      refresh(){
        this.getPersonProductList()
      },

        async exportToExcel(){
            this.reClickTip = true
            if( this.validTime !== null ){
                this.listQuery.filter.starttime = this.validTime[0]
                this.listQuery.filter.endtime = this.validTime[1]
            }else{
                this.listQuery.filter.starttime = ''
                this.listQuery.filter.endtime = ''
            }
            let res = await exportPerson(this.listQuery)
            if(res.data.code === '200'){
                this.reClickTip = false
                if(res.data.result === null ||res.data.result === [] || res.data.result.length === 0){
                    this.$message({
                        type:'warning',
                        message:'无数据可导出'
                    })
                }else{
                    let allData = res.data.result
                    import('@/vendor/Export2Excel').then((excel) => {
                        const tHeader = [
                            '地区',
                            '公司名称',
                            '购买人姓名',
                            '民族',
                            '购买人身份证',
                            '购买数量(挂、个)',
                            '退货数量(挂、个)',
                            '最近购买时间',
                        ]
                        // const filterVal = [
                        //     'province',
                        //     'enterprisename',
                        //     'companynumber',
                        //     'name',
                        //     'identify',
                        //     'num',
                        //     'returnnum',
                        //     'saletime',
                        // ]
                        const data = allData.map(item =>{
                            return [
                                item.city,
                                item.enterprisename,
                                item.name,
                                item.nation,
                                item.identify,
                                item.num,
                                item.returnnum,
                                item.saletime,
                            ]
                        })
                        excel.export_json_to_excel({
                            header: tHeader,
                            data,
                            filename: '实名销售分析'
                        })
                    })
                }

            }else{
                this.$message({
                    message:res.data.message,
                    type:'warning'
                })
            }
        },

        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },

        reset(){
            this.listQuery= {
                pageSize:10,
                pageIndex:1,
                filter: {
                    starttime: '',
                    endtime: '',
                    identify: '',
                    enterprisename: '',
                    directioncode:'',
                    isNeedUploadPhoto:'',
                    nation:''
                },
            }
            this.validTime = ['', '']
            this.initValidTime()
            this.getPersonProductList()
        },

        searchProductSearch(){
            this.listQuery.pageIndex = 1
            const date1 = new Date(this.validTime[0]);
            const date2 = new Date(this.validTime[1]);
            const differenceInMs = Math.abs(date2 - date1);
            const differenceInDays = differenceInMs / (1000 * 60 * 60 * 24)
            if(differenceInDays > 32){
                this.$message({
                    type: 'warning',
                    message: '时间跨度超过一个月的，请联系管理员查询数据'
                })
                return
            }
            this.getPersonProductList()
        },

        handleSizeChange(val) {
            this.listQuery.pageSize = val
            this.getPersonProductList()
        },
        handleCurrentChange(val) {
            this.listQuery.pageIndex = val
            this.getPersonProductList()
        },
      initValidTime(){
          const end = new Date();
          this.validTime[0] = end.toISOString().slice(0, 10) + " 00:00:00";
          this.validTime[1] = end.toISOString().slice(0, 10) + " 23:59:59";
      }
    },
}
</script>

<style scoped>
.basic_search{
    display:inline-block;
}

</style>