销售数据，数据看板新增查看明细导出功能

src/views/salesData/components/boxLine.vue

@@ -51,7 +51,7 @@
             ></el-progress>
           </div>
         </div>
-        <div style="width: 20%; height: 150px; margin-left: 16px">
+        <div style="width: 20%; height: 150px; margin-left: 16px" @click="onClick">
           <div style="display: inline-block; height: 120px; margin-top: 16px">
             <p class="box-title">{{ $t("实际金额") }}</p>
             <p style="font-size: 26px; color: #4f7bfd">
@@ -300,13 +300,121 @@
         </div>
       </div>
     </div>
+    <el-drawer
+        :title="$t(this.typeDate) + '_' + $t(this.title) + $t('明细')"
+        :visible.sync="visibleShow"
+        size="90%"
+        direction="rtl"
+        append-to-body
+        @close="onClose"
+    >
+      <div class="drawer__panel_new">
+        <div>
+          <div class="mt-10 inline-16">
+            <span class="search__label" >{{$t('部门')}}:</span>
+            <el-cascader disabled :placeholder="$t('请选择')" class="inline-16" ref="selectdep" size="small" v-model="depment" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep" ></el-cascader>
+          </div>
+          <div class="mt-10 inline-16">
+            <span class="search__label" >{{$t('业务员')}}:</span>
+            <el-select disabled class="inline-16" v-model="person" filterable :placeholder="$t('请选择')" size="small"  @change="selectPerson" >
+              <el-option
+                  v-for="item in personnelList"
+                  :key="item.index"
+                  :label="$t(item.name)"
+                  :value="item.userid">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="mt-10 inline-16">
+            <span class="search__label" >{{$t('订单类型')}}:</span>
+            <el-select class="inline-16" v-model="orderType" filterable :placeholder="$t('请选择')" size="small" clearable   @change="selectOrderType" >
+              <el-option
+                  v-for="item in orderTypes"
+                  :key="item.index"
+                  :label="$t(item.value)"
+                  :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="mt-10 inline-16">
+            <span class="search__label" >{{$t('领域')}}:</span>
+            <el-select class="inline-16" v-model="tradefield" filterable :placeholder="$t('请选择')" size="small" clearable  @focus="queryTradefield"  @change="selectTradefield" >
+              <el-option
+                  v-for="item in tradefieldList"
+                  :key="item.index"
+                  :label="$t(item.value)"
+                  :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="mt-10 inline-16">
+            <el-input style="width:200px;!important;" :placeholder="$t(`搜索`)" :suffix-icon="paramDetail.content.where.condition?paramDetail.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="paramDetail.content.where.condition" @keyup.native.enter="listDataInfo(paramDetail.content.pageNUmber = 1)" @clear="listDataInfo(paramDetail.content.pageNUmber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
+            </el-input>
+          </div>
+          <div class="mt-10 inline-16">
+            <exportFile :param="paramDetail" :columns="tablecols" :fileName="$t(this.typeDate) + '_' + $t(this.title) + $t('明细')"></exportFile>
+          </div>
+        </div>
+        <tableTemplate style="margin-top: 10px" ref="table" :layout="tablecols" :data="listInfo" :opwidth="200" :custom="true" :height="height" fixedName="operation">
+          <template v-slot:customcol="scope">
+            <div v-if="scope.column.columnname === 'nominalpressure'">
+              {{tool.nominalPressureSet(scope.column.data.nominalpressure)}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'marketprice'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'price'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'amount'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'invoiceamount'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'writeoffamount'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'returnamount'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'logisticsamount'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'uninvoiceamount'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'unwriteoffamount'">
+              {{scope.column.data[scope.column.columnname]?tool.formatAmount(scope.column.data[scope.column.columnname],2,'¥'):'¥0.00'}}
+            </div>
+            <div v-else>{{scope.column.data[scope.column.columnname]?$t(scope.column.data[scope.column.columnname]):'--'}}</div>
+          </template>
+        </tableTemplate>
+        <div  class="container normal-panel" style="text-align:right;float: right">
+          <el-pagination
+              background
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :pager-count="5"
+              :page-sizes="[100,150, 200]"
+              :page-size="100"
+              layout="total,sizes, prev, pager, next, jumper"
+              :total="total">
+          </el-pagination>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
+import tableTemplate from './table';
+import exportFile from '@/components/export_file/index5'
 export default {
   name: "boxLine",
   props: ["title", "typeDate", "index"],
+  components:{tableTemplate,exportFile},
   data() {
     return {
       list: [],
@@ -323,6 +431,55 @@ export default {
           },
         },
       },
+      visibleShow:false,
+      depmentid:'',
+      deplist:[],
+      personnelList:[],
+      depment:'',
+      person:'',
+      depParam:{
+        "id": 20230620102004,
+        "content": {
+        }
+      },
+      orderTypes:[
+        {
+          value:'标准订单'
+        },
+        {
+          value:'特殊订单'
+        },
+        {
+          value:'项目订单'
+        },
+        {
+          value:'促销订单'
+        },
+        {
+          value:'工具订单'
+        }
+      ],
+      orderType:'',
+      tradefield:'',
+      tradefieldList:[],
+      paramDetail:{
+        "id": 2025032613405702,
+        "content": {
+          "type": "1",
+          "dataid": 58,
+          "dateType": "去年", //去年，本年，本季，本月
+          "where": {
+            "condition": "",
+            "type": "",
+            "tradefield": ""
+          }
+        }
+      },
+      tablecols:[],
+      listInfo:[],
+      height:'calc(100vh - 195px)',
+      currentPage:0,
+      total:0
     };
   },
   methods: {
@@ -341,6 +498,164 @@ export default {
       this.list = res.data;
       this.percentage = Math.round(this.list.wcamount * 100 * 100) / 100;
     },
+    onClick(){
+      console.log('点击',this.title)
+      this.orderType = ''
+      this.tradefield = ''
+      this.paramDetail.content.where.condition = ''
+      this.paramDetail.content.pageNUmber = 1
+      this.paramDetail.content.where.type = ''
+      this.paramDetail.content.where.tradefield = ''
+      this.visibleShow = true
+      if (this.title == '订单'){
+        this.tablecols = this.tool.tabelCol(this.$route.name).orderDetailsTable.tablecols
+      }else if (this.title == '出货'){
+        this.tablecols = this.tool.tabelCol(this.$route.name).shippingDetailsTable.tablecols
+      }else if (this.title == '开票'){
+        this.tablecols = this.tool.tabelCol(this.$route.name).billingDetailsTable.tablecols
+      }else if (this.title == '回款'){
+        this.tablecols = this.tool.tabelCol(this.$route.name).paymentScheduleTable.tablecols
+      }
+      this.queryDep()
+      this.paramDetail.content.pageNUmber = 1
+      this.listDataInfo()
+    },
+    onClose(){
+      this.visibleShow = false
+    },
+    /*获取部门*/
+    async queryDep(){
+      const res = await this.$api.requested(this.depParam)
+      this.deplist = this.createMenu(res.data.dep)
+      this.personnelList = res.data.hr
+      const usertype = JSON.parse(sessionStorage.getItem('active_account')).usertype
+      const userName = JSON.parse(sessionStorage.getItem('active_account')).name
+      const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
+      if (this.param.content.type == 1){
+        this.depment = this.param.content.dataid
+        this.person = ''
+      }else {
+        console.log(usertype,userName,'eeeeee',userid,this.param.content.dataid)
+        this.person = userid === this.param.content.dataid?userName:this.param.content.dataid
+        console.log(this.person,'person')
+        this.depment = ''
+      }
+    },
+    createMenu (array) {
+      var that = this
+      let arr = []
+      function convertToElementTree(node) {
+        // 新节点
+        if (node.subdep.length === 0){
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            disabled:that.pageOnlyRead,
+          }
+        }else {
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            disabled:that.pageOnlyRead,
+            children: []
+          }
+        }
+        if (node.subdep && node.subdep.length > 0) {
+          // 如果存在子节点
+          for (var index = 0; index < node.subdep.length; index++) {
+            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
+            elNode.children.push(convertToElementTree(node.subdep[index]));
+          }
+        }
+        return elNode;
+      }
+      array.forEach((element) => {
+        arr.push(convertToElementTree(element))
+      });
+      return arr
+    },
+    /*选择部门*/
+    selectDep(val){
+      this.person = ''
+      this.depmentid = val[val.length -1]
+      this.param.content.pageNumber = 1
+      this.listData(1,val[val.length -1],this.nowEndDate)
+    },
+    /*选择业务员*/
+    selectPerson(val){
+      this.depment = ''
+      this.depmentid = val
+      this.param.content.pageNumber = 1
+      this.listData(0,val,this.nowEndDate)
+    },
+    /*选择订单类型*/
+    selectOrderType(){
+      this.paramDetail.content.pageNUmber = 1
+      this.paramDetail.content.type = this.orderType
+      this.listDataInfo()
+    },
+    async queryTradefield(){
+      if (this.tradefieldList.length < 1){
+        const res = await this.$store.dispatch('optiontypeselect','tradefield')
+        this.tradefieldList = res.data
+      }
+    },
+    /*选择领域*/
+    selectTradefield(){
+      this.paramDetail.content.pageNUmber = 1
+      this.listDataInfo()
+    },
+    async listDataInfo(){
+      if (this.title == '订单'){
+        this.paramDetail.id = 2025032613405702
+      }else if (this.title == '出货'){
+        this.paramDetail.id = 2025032615330102
+      }else if (this.title == '开票'){
+        this.paramDetail.id = 2025032616343302
+      }else if (this.title == '回款'){
+        this.paramDetail.id = 2025032616352402
+      }
+      this.paramDetail.content.type = this.param.content.type
+      this.paramDetail.content.dataid = this.param.content.dataid
+      this.paramDetail.content.dateType = this.param.content.dateType
+      this.paramDetail.content.where.type = this.orderType
+      this.paramDetail.content.where.tradefield = this.tradefield
+      const res = await this.$api.requested(this.paramDetail)
+      this.listInfo = res.data
+      this.total = res.total
+      this.currentPage = res.pageNumber
+      console.log(res.data,'数据1111')
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.paramDetail.content.pageSize = val
+      this.listDataInfo()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.paramDetail.content.pageNumber = val
+      this.listDataInfo()
+    },
   },
 };
 </script>

src/views/salesData/index.vue

@@ -32,7 +32,7 @@
             </div>
           </div>
           <!--  数字看板      -->
-          <digitalSigns ref="digitalSigns" :windowWidth="windowWidth"></digitalSigns>
+          <digitalSigns ref="digitalSigns" :windowWidth="windowWidth" :depment="depment" :person="person" ></digitalSigns>
           <!--  客户账户余额分析      -->
           <customerAccountBalanceAnalysis ref="customerAccountBalanceAnalysis" :dataid="departmentid" :windowWidth="windowWidth" :scrollHeight="scrollData" @backFull="backFull" ></customerAccountBalanceAnalysis>
           <!--  客户业务员销售      -->

src/views/salesData/modules/digitalSigns.vue

@@ -11,10 +11,10 @@
       </el-button-group>
     </div>
     <div class="container-div">
-      <boxLine :title="$t(`订单`)" ref="order"  :style="{width:windowWidth > 1880? '49%':'100%',marginRight: windowWidth > 1880?'1%':'0',marginBottom:windowWidth > 1880?'16px':'16px'}"></boxLine>
-      <boxLine :title="$t(`出货`)" ref="shipment"  :style="{width:windowWidth > 1880? '50%':'100%',marginBottom:windowWidth > 1880?'16px':'16px'}"></boxLine>
-      <boxLine :title="$t(`开票`)" ref="invoicing"  :style="{width:windowWidth > 1880? '49%':'100%',marginRight: windowWidth > 1880?'1%':'0',marginBottom:windowWidth > 1880?'0':'16px'}"></boxLine>
-      <boxLine :title="$t(`回款`)" ref="returned"  :style="{width:windowWidth > 1880? '50%':'100%'}"></boxLine>
+      <boxLine :title="$t(`订单`)" ref="order"   :typeDate="dataType"  :style="{width:windowWidth > 1880? '49%':'100%',marginRight: windowWidth > 1880?'1%':'0',marginBottom:windowWidth > 1880?'16px':'16px'}"></boxLine>
+      <boxLine :title="$t(`出货`)" ref="shipment"  :typeDate="dataType" :style="{width:windowWidth > 1880? '50%':'100%',marginBottom:windowWidth > 1880?'16px':'16px'}"></boxLine>
+      <boxLine :title="$t(`开票`)" ref="invoicing"  :typeDate="dataType" :style="{width:windowWidth > 1880? '49%':'100%',marginRight: windowWidth > 1880?'1%':'0',marginBottom:windowWidth > 1880?'0':'16px'}"></boxLine>
+      <boxLine :title="$t(`回款`)" ref="returned"  :typeDate="dataType" :style="{width:windowWidth > 1880? '50%':'100%'}"></boxLine>
     </div>
   </div>
 </template>
@@ -24,7 +24,7 @@ import boxLine from "@/views/salesData/components/boxLine";
 export default {
   name: "digitalSigns",
   components:{boxLine},
-  props:['windowWidth'],
+  props:['windowWidth',"depment","person"],
   data(){
     return {
       dataType:'本年',