1

src/index.less

@@ -184,3 +184,14 @@ a {
 .ivu-upload-list {
   display: none;
 }
+
+
+.commons-select-search {
+  padding:0 20px;
+  li {
+    height:30px;
+    line-height:30px;
+    list-style:none;
+    cursor: pointer;
+  }
+}

src/view/base-manage/provider-maintenance/provider-maintenance2.vue

@@ -2,11 +2,25 @@
 <template>
   <div class="container">
     <Form  :label-width="60" inline>
-      <FormItem label="关键词">
-        <Input v-model="params.search" placeholder="请输入供应商名称、供应商编码"></Input>
+      <FormItem label="关键词"> 
+        <Poptip trigger="focus"  width="250" placement="bottom">
+            <div slot="content">
+              <ul style="" class="commons-select-search">
+                <li :key="i.id" v-for="i in supplierList" @click="params.search = i.name">
+                  {{i.name}}
+                </li>
+              </ul>
+            </div>
+            <Input v-model="params.search" @on-change="getSupplierSelectList" placeholder="请输入用途关键词"></Input>
+        </Poptip>
+        
       </FormItem>
       <FormItem label="用途">
-        <Input v-model="params.Purpose" placeholder="请输入用途关键词"></Input>
+        <Select v-model="params.PurposeIndex" style="width:200px" @on-change="selectPurposeFn" filterable>
+            <div slot="empty">无匹配数据</div>
+            <Option  :value="999">全部</Option>
+            <Option v-for="(i,index) in selectPurposeList" :value="index" :key="index">{{ i.purpose }}</Option>
+        </Select>
       </FormItem>
       <Button type="primary" @click="getStatisticsClassify();changePage(1)">查询</Button>
       <div style="float:right">
@@ -68,6 +82,7 @@ export default {
       title: '',
       show: false,
       accountShow: false,
+      supplierList:[],
       data: [],
       deleteId: '',
       formType: '',
@@ -1034,9 +1049,20 @@ export default {
         search:null,
       },
       total:0,
+      loading:false,
+      selectPurposeList:[],
     }
   },
   methods: {
+    selectPurposeFn(e){
+      console.log(e)
+      if(e == 999){
+        this.params.Purpose = ''
+      }else{
+        this.params.Purpose = this.selectPurposeList[e].purpose
+      }
+      
+    },
     cfm (type, formData) {
       if (type === 'add') {
         axios.post('/cloudApi/supplier/add',formData).then(res=>{
@@ -1142,6 +1168,29 @@ export default {
       //   }
       // })
     },
+    getMaterialSelectPurposeList(){
+      const v = this
+      v.loading = true
+      axios
+        .get('/cloudApi/material/selectPurposeList?purpose=' + '', {})
+        .then((res) => {
+          v.selectPurposeList = res.data.data
+          v.loading = false
+        })
+    },
+
+    getSupplierSelectList(req){
+      const v = this
+      v.loading = true
+      axios
+        .post('/cloudApi/supplier/selectList', {search:this.params.search})
+        .then((res) => {
+          v.supplierList = res.data.data
+          v.loading = false
+          console.log(v.supplierList)
+        })
+    },
+    
     getStatisticsClassify(){
       
       function filter(str) { // 特殊字符转义
@@ -1188,6 +1237,8 @@ export default {
     // this.getUserPageList()
     this.getMaterialCategoryZTree()
     this.getStatisticsClassify()
+    this.getSupplierSelectList()
+    this.getMaterialSelectPurposeList()
   }
 }
 </script>

src/view/base-manage/provider-maintenance/purchaseList.vue

@@ -1,6 +1,34 @@
 <!-- 供应商维护 -->
 <template>
 	<div class="container">
+		<div style="display: flex; justify-content: space-between">
+			<h3>供应商采购概况</h3>
+			<Form ref="formInline" inline :label-width="80" style="float: left">
+				<Form-item label="按产品查看">
+					<Input
+						type="text"
+						v-model="params.supplierName"
+						placeholder="输入关键字模糊搜索"
+					></Input>
+				</Form-item>
+				<Form-item label="关键词">
+					<Input
+						type="text"
+						v-model="params.search"
+						placeholder="输入关键字模糊搜索"
+					></Input>
+				</Form-item>
+				<Button
+					type="primary"
+					style="margin-right: 10px"
+					@click="changePage(1);getStatisticsClassify()"
+					>查询</Button
+				>
+				<Button type="primary" @click="$router.push('/pay_history')"
+					>供应商历史付款记录</Button
+				>
+			</Form>
+		</div>
 		<div class="tabs-warp">
 			<div
 				@click="
@@ -13,8 +41,13 @@
 				v-for="i in statisticsClassifyData"
 				:key="i.technologyType"
 			>
-				{{ technologyTypeList[i.technologyType] }}（<span>{{
-					i.categoryCount
+				{{
+					i.technologyType == 99
+						? '全部'
+						: technologyTypeList[i.technologyType]
+				}}
+				（<span>{{
+					i.technologyType == 99 ? total : i.categoryCount
 				}}</span
 				>）
 			</div>
@@ -23,9 +56,7 @@
 			:calcHeight="110"
 			:data="data"
 			:columns="columns"
-			:table-filter="tableFilter"
 			:table-page="params"
-			@event-handle="eventHandle"
 			@on-change="changePage"
 		>
 		</my-table>
@@ -370,18 +401,17 @@ export default {
 					title: '物料类型',
 					key: 'technologyType',
 					minWidth: 150,
-					render:(h,p)=>{
-						if(p.row.technologyType < 0){
-							return h('span',{},
-								'其他'
-							)
-						}else{
-							return h('span',{},
+					render: (h, p) => {
+						if (p.row.technologyType < 0) {
+							return h('span', {}, '其他')
+						} else {
+							return h(
+								'span',
+								{},
 								this.technologyTypeList[p.row.technologyType]
 							)
 						}
-						
-					}
+					},
 				},
 				{
 					title: '采购总额',
@@ -422,7 +452,7 @@ export default {
 									style: {
 										marginRight: '20px',
 										color: '#1A3AF0',
-										cursor: 'pointer'
+										cursor: 'pointer',
 									},
 									on: {
 										click: () => {
@@ -451,14 +481,13 @@ export default {
 									style: {
 										marginRight: '20px',
 										color: '#1A3AF0',
-										cursor: 'pointer'
+										cursor: 'pointer',
 									},
 									on: {
 										click: () => {
-											
 											this.$router.push({
-												name:"purchaseListDtl",
-												query:params.row
+												name: 'purchaseListDtl',
+												query: params.row,
 											})
 										},
 									},
@@ -478,6 +507,7 @@ export default {
 				search: null,
 			},
 			statisticsClassifyData: [],
+			total: 0,
 		}
 	},
 	methods: {
@@ -501,16 +531,58 @@ export default {
 					})
 					break
 				case 'account':
-					this.$router.push('/pay-history2')
+					this.$router.push('/pay_history')
 					break
 			}
 		},
 		getStatisticsClassify() {
+			function filter(str) {
+				// 特殊字符转义
+				str += '' // 隐式转换
+				str = str.replace(/%/g, '%25')
+				str = str.replace(/\+/g, '%2B')
+				str = str.replace(/ /g, '%20')
+				str = str.replace(/\//g, '%2F')
+				str = str.replace(/\?/g, '%3F')
+				str = str.replace(/&/g, '%26')
+				str = str.replace(/\=/g, '%3D')
+				str = str.replace(/#/g, '%23')
+				return str
+			}
+
+			function formateObjToParamStr(paramObj) {
+				const sdata = []
+				for (let attr in paramObj) {
+					sdata.push(`${attr}=${filter(paramObj[attr])}`)
+				}
+				return sdata.join('&')
+			}
 			axios
-				.get('/cloudApi/supplier/statisticsClassify', {})
+				.get(
+					'/cloudApi/supplier/statisticsClassify?' +
+						formateObjToParamStr(this.params)
+				)
 				.then((res) => {
+					res.data.data.unshift({
+						technologyType: 99,
+						categoryCount: 0,
+					})
+					axios
+						.post('/cloudApi/supplier/list/count', {
+							...this.params,
+						})
+						.then((res) => {
+							this.total = res.data.data
+						})
 					this.statisticsClassifyData = res.data.data
 				})
+			axios
+				.post('/cloudApi/supplier/list/count', {
+					...this.params,
+				})
+				.then((res) => {
+					this.total = res.data.data
+				})
 		},
 		changePage(pageNum) {
 			this.params.pageNum = pageNum
@@ -519,13 +591,17 @@ export default {
 		getList() {
 			this.$Spin.show()
 			axios
-				.post('/cloudApi/supplier/purchase/list', { ...this.params,search:this.params.key })
+				.post('/cloudApi/supplier/purchase/list', {
+					...this.params,
+				})
 				.then((res) => {
 					this.$Spin.hide()
 					this.data = res.data.data
 				})
 			axios
-				.post('/cloudApi/supplier/list/count', { ...this.params,search:this.params.key })
+				.post('/cloudApi/supplier/list/count', {
+					...this.params,
+				})
 				.then((res) => {
 					this.params.total = res.data.data
 				})

src/view/index/msg/msg.vue

@@ -1,7 +1,21 @@
 <!-- 消息列表 -->
 <template>
   <div class="container">
-    <my-table :data="data" :columns="columns" :table-filter="tableFilter" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
+    <div style="margin-bottom:10px">
+      <RadioGroup v-model="params.readState" style="border-right:1px solid #dcdcdc" @on-change="readStateChange">
+          <Radio :label="1">已读</Radio>
+          <Radio :label="0">未读</Radio>
+      </RadioGroup>
+      <RadioGroup v-model="params.sourceType" style="margin:0 10px">
+          <Radio :label="i.sourceType" v-for="i in uMessageStatisticsClassify" :key="i.sourceType">
+            {{sourceTypeList[i.sourceType]}}<span style="color:red">({{i.count}})</span>
+          </Radio>
+      </RadioGroup>
+      
+    </div>
+    <div style="height:calc(100vh - 200px)">
+      <my-table :data="data" :columns="columns" :table-filter="tableFilter" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
+    </div>
     <purchase-form v-model="purchaseShow" :data="formData" @getlist="getList"></purchase-form>
     <contract-form v-model="contractShow" :data="formData" @getlist="getList"></contract-form>
     <pay-form v-model="payShow" :data="formData" @getlist="getList"></pay-form>
@@ -42,6 +56,7 @@ import {
 } from '@/api/applyPurchase'
 import { GetApplyStockInBackRequestDto, GetApplyStockOutBill, GetApplyTakePageList } from '@/api/stock'
 import { GetChangePriceCheck, GetMaterialEditCheckData } from '@/api/baseData'
+import axios from 'axios'
 export default {
   name: 'msg',
   components: {
@@ -63,6 +78,7 @@ export default {
   data () {
     return {
       formData: {},
+      sourceTypeList:['物料申购','入库管理','库存管理','出库管理','系统提醒','盘点提醒'],
       show: false,
       storeInShow: false,
       delContractShow: false,
@@ -89,8 +105,14 @@ export default {
         },
         {
           title: '提醒来源',
-          key: 'sourceType',
-          minWidth: 150
+          key: 'sourcetype',
+          minWidth: 150,
+          render:(h,p)=>{
+            return h('span',{},
+              this.sourceTypeList[p.row.sourcetype]
+              
+            )
+          }
         },
         {
           title: '提醒内容',
@@ -328,24 +350,27 @@ export default {
           align: 'right',
           e: 'toHome'
         },
-        {
-          name: 'RadioGroup',
-          value: 'readState',
-          list: [
-            { label: '未读消息', value: 0 },
-            { label: '已读消息', value: 1 }
-          ]
-        }
+        
       ],
       params: {
         pageIndex: 1,
         pageSize: 20,
         total: 0,
-        readState: 0
-      }
+        readState: 0,
+        userNo:window.localStorage.getItem('jobNo'),
+        readState:1,
+        search:'',
+      },
+      uMessageStatisticsClassify:[],
     }
   },
   methods: {
+    readStateChange(){
+      const v = this
+      v.params.pageIndex = 1
+      v.getList()
+      v.getMsgState()
+    },
     cfm (type, formData) {
 
     },
@@ -355,7 +380,6 @@ export default {
         case 'search':
           this.params.pageIndex = 1
           this.params.keyWord = option.key
-          this.params.readState = option.readState
           this.getList()
           break
         case 'add':
@@ -386,11 +410,21 @@ export default {
       this.params.pageIndex = pageIndex
       this.getList()
     },
+    getMsgState(){
+      const v = this
+      v.loading = true
+      axios
+        .post('/cloudApi/uMessage/statisticsClassify', v.params)
+        .then((res) => {
+          v.uMessageStatisticsClassify = res.data.data
+          console.log(res.data.data)
+        })
+    },
     getList () {
-      GetMessageRemindPage(this.params).then(res => {
-        if (res.code === 0) {
-          
-          res.result.list.forEach(item => {
+      const v = this
+      axios.post('/cloudApi/uMessage/list',v.params).then(res=>{
+        
+        res.data.data.forEach(item => {
             item.readState = this.params.readState
             if(item.content.indexOf('请尽快确认合同') != -1) item.routerPushUrl = 'material_contract'
             if(item.content.indexOf('退货审批') != -1) item.routerPushUrl = 'return_material'
@@ -402,15 +436,35 @@ export default {
             if(item.content.indexOf('驳回') != -1) item.routerPushUrl = 'schedule'
             if(item.content.indexOf('进行处理') != -1) item.routerPushUrl = 'inventory_record'
           }) 
-          this.data = res.result.list
+          this.data = res.data.data
           console.log(this.data)
-          this.params.total = res.result.totalCount
-        }
+          // this.params.total = res.result.totalCount
       })
+      // GetMessageRemindPage(this.params).then(res => {
+      //   if (res.code === 0) {
+          
+      //     res.result.list.forEach(item => {
+      //       item.readState = this.params.readState
+      //       if(item.content.indexOf('请尽快确认合同') != -1) item.routerPushUrl = 'material_contract'
+      //       if(item.content.indexOf('退货审批') != -1) item.routerPushUrl = 'return_material'
+      //       if(item.content.indexOf('退货申请') != -1) item.routerPushUrl = 'return_material'
+      //       if(item.content.indexOf('盘点工作') != -1) item.routerPushUrl = 'inventory_record'
+      //       if(item.content.indexOf('出库数量超标') != -1) item.routerPushUrl = 'error_out'
+      //       if(item.content.indexOf('出库物料错误') != -1) item.routerPushUrl = 'error_out'
+      //       if(item.content.indexOf('信息已发生变化') != -1) item.routerPushUrl = 'material_maintenance'
+      //       if(item.content.indexOf('驳回') != -1) item.routerPushUrl = 'schedule'
+      //       if(item.content.indexOf('进行处理') != -1) item.routerPushUrl = 'inventory_record'
+      //     }) 
+      //     this.data = res.result.list
+      //     console.log(this.data)
+      //     this.params.total = res.result.totalCount
+      //   }
+      // })
     }
   },
   mounted () {
     this.getList()
+    this.getMsgState()
   }
 }
 </script>

src/view/material-manege/pay/pay-history.vue

@@ -1,158 +1,570 @@
+
+<!-- 合同付款详情 -->
 <template>
-  <div class="container">
-    <div class="filter">
-      <span style="font-size: 14px;font-weight: bold;margin-right: 10px;">历史付款记录</span>
-      <DatePicker v-model="params.beginTime" @on-change="filterChange" type="month" placeholder="开始日期" style="width: 150px"></DatePicker>
-      <span style="padding: 0 10px">-</span>
-      <DatePicker v-model="params.endTime" @on-change="filterChange" type="month" placeholder="结束日期" style="width: 150px"></DatePicker>
-      <span style="margin-left: 10px;">
-        共有
-        <span style="color: red;">{{ data.supplierNum }}</span>
-        个供应商付款，
-        <span style="color: red;">{{ data.contractNum }}</span>
-        个合同，合同金额
-        <span style="color: red;">{{ data.contractAmount }}</span>
-        元，总计付款
-        <span style="color: red;">{{ data.totalAmount }}</span>
-        元
-      </span>
-      <span style="float: right;cursor: pointer;" @click="back">&lt;&lt;返回</span>
+  <div class="container-wrap">
+    <div style="margin-bottom:10px">
+		<Form ref="formInline" inline :label-width="100" style="float:left">
+          <Form-item  label="按供应商查找">
+              <Input type="text" v-model="params.supplierName" placeholder="输入关键字模糊搜索"></Input>
+          </Form-item>
+          <Form-item label="按物料查找">
+              <Input type="text" v-model="params.materialName" placeholder="输入关键字模糊搜索"></Input>
+          </Form-item>
+          <Button type="primary" @click="searchFn()">搜索</Button>
+      </Form>
+        <date-select v-model="params" @change="selectTime"></date-select>
+    </div>
+    <div style="background:#fff;padding:10px;margin-bottom:10px">
+        
+        <Tabs v-model="salesVolumeCompanyTotalType" @on-click="tabsChange">
+            <TabPane  label="全部" name="1"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '50万以上('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['50up']),
+                    h('span', ')')])
+            }" name="2"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '20-50万('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['20-50']),
+                    h('span', ')')])
+            }" name="3"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '10-20万('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['10-20']),
+                    h('span', ')')])
+            }" name="4"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '5-10万('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['5-10']),
+                    h('span', ')')])
+            }" name="5"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '5万以下('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['5down']),
+                    h('span', ')')])
+            }" name="6"></TabPane>
+        </Tabs>
+        <div>
+            <Button style="margin:0 10px 5px 0" :type="params.supplierId == null || params.supplierId =='' ? 'primary' : 'default'" @click="changeCompany(null,0,'')" >全部</Button>
+            <Button 
+                style="margin:0 10px 5px 0" 
+                @click="changeCompany(i.supplierId,index,i.supplierName)" 
+                v-for="(i,index) in statisticsData" 
+                :type="params.supplierId == i.supplierId ? 'primary' : 'default'"
+                :key="i.supplierId"
+                v-if="i.type == salesVolumeCompanyTotalType || salesVolumeCompanyTotalType == '1'">
+                {{i.supplierName}}<span :style="params.companySelectId == i.supplierId ?  'color:#ffc107' : 'color:red'"> ({{i.total}})</span>
+            </Button>
+        </div>
     </div>
-    <div class="table">
-      <my-table :data="data.payItems" :columns="columns" :is-show-filter="false" :table-page="params" @on-change="changePage"></my-table>
+    <div class="container">
+      
+      <!-- 表格 -->
+      <div class="table-content">
+        <div v-if="data && data.length === 0" style="height: 100%;display: flex;justify-content: center;align-items: center">
+          暂无数据
+        </div>
+        <div v-else class="list">
+          <div class="item" v-for="(item, index) in data" :key="index">
+            <div class="content">
+              <div class="item-left">
+                <div class="row">
+                  <div class="col">
+                    <div class="label">合同编码：</div>
+                    <div class="value">{{ item.purchaseBillNo }}</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">供应商：</div>
+                    <div class="value">{{ item.supplierName }}</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">付款期限：</div>
+                    <div class="value">{{ item.check.payDate }}</div>
+                  </div>
+                  <div class="col" style="flex: 1">
+                    <div class="label">单价：</div>
+                    <div class="value">{{ item.price }}</div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col">
+                    <div class="label">物料名称：</div>
+                    <div class="value">{{ item.materialName }}</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">规格：</div>
+                    <div class="value">{{ item.materialSpec }}</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">采购数量：</div>
+                    <div class="value">{{ item.purchaseQty * 1 }}</div>
+                  </div>
+                  <div class="col" style="flex: 1"></div>
+                </div>
+                <div class="row">
+                  <div class="col">
+                    <div class="label">合同金额：</div>
+                    <div class="value">{{ item.contractAmount * 1 }}元</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">质检金额：</div>
+                    <div class="value">{{ item.adjustAmount * 1 }}元</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">已付金额：</div>
+                    <div class="value">{{ item.hadPayAmount * 1 }}元</div>
+                  </div>
+                  <div class="col" style="flex: 1">
+                    <div class="label">本次应付：</div>
+                    <div class="value">
+                      <span style="color: red">{{ item.actAmount  }}</span>元
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="item-right">
+                <div class="forms">
+                  <div class="row">
+                    <div class="col">
+                      <span class="text" @click="showForm(0, item)">申购单</span>
+                      <Icon type="md-checkmark" color="#07C909" size="20" />
+                    </div>
+                    <div class="col">
+                      <span class="text" @click="showForm(1, item)">入库单</span>
+                      <Icon v-if="item.check.inoutBillCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                    <div class="col">
+                      <span class="text" @click="showForm(2, item)">质检单</span>
+                      <Icon v-if="item.check.quantityCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col">
+                      <span class="text" @click="showForm(3, item)">合同</span>
+                      <Icon v-if="item.check.ContractCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                    <div class="col">
+                      <span class="text" @click="showForm(4, item)">发票</span>
+                      <Icon v-if="item.check.invoiceCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                    <div class="col"></div>
+                  </div>
+                  <div class="row">
+                    <div class="col" style="justify-content: flex-start">
+                      <span class="text" style="text-decoration: none;cursor: auto">质检金额&lt;=发票金额</span>
+                      <Icon v-if="item.check.invoiceCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="other" style="margin-top: 2px" v-if="item.hasOtherPayBill">
+              <Collapse :value="item.payObjList ? '1' : '0'" @on-change="open(item)">
+                <Panel name="1">
+                  合同付款记录
+                  <div slot="content">
+                    <div class="row" v-for="(payItem, payIndex) in item.payObjList" :key="payIndex">
+                      <div class="col">
+                        <div class="label">付款时间：</div>
+                        <div class="value">{{ payItem.payTime }}</div>
+                      </div>
+                      <div class="col">
+                        <div class="label">付款金额：</div>
+                        <div class="value">
+                          <span style="color: red">{{ payItem.payAmount }}</span>元
+                        </div>
+                      </div>
+                      <div class="col">
+                        <div class="label">审批状态：</div>
+                        <div class="value" :style="{color: payItem.approvalStateStr === '待审批'? 'red' : '' }">
+                          {{ payItem.approvalStateStr }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </Panel>
+              </Collapse>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <div class="table-page">
+        <Page :current="params.pageIndex" :total="params.total" :show-total="true" :page-size="10" show-elevator @on-change="changePage" />
+      </div>
     </div>
+    <pass-modal v-model="passShow" :data="currentItem" @getlist="getList"></pass-modal>
+    <my-form-pay v-model="payShow" type="form" :data="currentItem" :showSider="false"></my-form-pay>
+    <store-in-form v-model="storeInShow" :data="currentItem"></store-in-form>
+    <quality-form v-model="qualityShow" :data="qualityData"></quality-form>
+    <invoice-form v-model="invoiceShow" :data="currentItem" @getlist="getList"></invoice-form>
+    <contract-form v-model="contractShow" :data="currentItem" @getlist="getList"></contract-form>
+    <apply-form v-model="applyShow" :data="currentItem" @getlist="getList"></apply-form>
   </div>
 </template>
 
 <script>
+import {
+  GetHistoryPaymentRecord,
+  GetHistoryPaymentMaterial,
+  GetApplyPurchasePageList,
+  GetContractQtyCheckBill,
+  GetApplyPayBill
+} from '@/api/applyPurchase'
 import MyTable from '_c/my-table/my-table'
-import { GetHistoryPaymentSum } from '@/api/applyPurchase'
+import MyFormPay from '_c/my-modal-pay'
+import PassModal from './modals/pass-modal'
+import StoreInForm from './modals/store-in-form'
+import QualityForm from './modals/quality-form'
+import InvoiceForm from './modals/invoice-form'
+import ContractForm from './modals/contract-form'
+import ApplyForm from './modals/apply-pass-form'
+import { GetInStockBill } from '@/api/stock'
+import  dateSelect  from '@/components/dateSelect/dateSelect'
+import axios from 'axios'
 export default {
-  name: 'pay_history',
+  name: 'material_pay_detail',
   components: {
-    MyTable
+    MyTable,
+    PassModal,
+    MyFormPay,
+    StoreInForm,
+    QualityForm,
+    InvoiceForm,
+    ContractForm,
+    ApplyForm,
+    dateSelect
   },
   data () {
     return {
-      data: {
-        payItems: []
-      },
-      columns: [
-        // {
-        //   title: '序号',
-        //   type: 'index',
-        //   width: 60,
-        //   align: 'center'
-        // },
-        {
-          title: '付款时间',
-          key: 'payTime',
-          minWidth: 150,
-          align: 'center'
-        },
-        {
-          title: '供应商',
-          key: 'supplierName',
-          minWidth: 150,
-          align: 'center'
+        statisticsData:[],
+      salesVolumeCompanyTotalType:'1',
+      salesVolumeCompanyTotal:{
+            '50up':0,
+            '20-50':0,
+            '10-20':0,
+            '5-10':0,
+            '5down':0,
         },
-        {
-          title: '付款金额',
-          key: 'payAmount',
-          minWidth: 100,
-          align: 'center'
-        },
-        {
-          title: '操作',
-          align: 'center',
-          minWidth: 100,
-          render: (h, params) => {
-            let _this = this
-            return h('span', {
-              style: {
-                color: 'blue',
-                textDecoration: 'underline',
-                cursor: 'pointer'
-              },
-              on: {
-                click (e) {
-                  e.stopPropagation()
-                  _this.$router.push({
-                    name: 'pay_history_detail',
-                    query: {
-                      supplierId: params.row.supplierId,
-                      supplierList: _this.data.payItems.map(item => {
-                        return {
-                          label: item.supplierName,
-                          value: item.supplierId
-                        }
-                      }),
-                      beginTime: (_this.params.beginTime && _this.$dayjs(_this.params.beginTime).format('YYYY-MM')) || '',
-                      endTime: (_this.params.endTime && _this.$dayjs(_this.params.endTime).format('YYYY-MM')) || ''
-                    }
-                  })
-                }
-              }
-            }, '查看详情')
-          }
-        }
-      ],
+        company:[],
+      titleDay: 0,
+      tabsIndex: 0,
+      access: this.$store.state.user.access,
+      contractShow: false,
+      invoiceShow: false,
+      qualityShow: false,
+      storeInShow: false,
+      payShow: false, // 申购单
+      passShow: false, // 驳回
+      applyShow: false,
+      currentItem: {},
+      qualityData: [],
+      list: [],
+      supplierList: [],
+      data: [],
       params: {
-        pageIndex: 1,
-        pageSize: 20,
+        pageNum: 1,
+        pageSize: 10,
         total: 0,
-        beginTime: '',
-        endTime: ''
+        supplierId: '',
+        supplierName: '',
+        strTime: '',
+        endTime: '',
       }
     }
   },
   methods: {
+	searchFn(){
+		const v = this
+		v.getStatistics()
+		v.changePage(1)
+
+	},
+    selectTime(){
+      const v = this
+      v.params.supplierId = ''
+      v.params.pageNum = 1
+      v.getList()
+      v.getStatistics()
+    },
+    changeCompany(_id,index,_name){
+			const v = this
+			v.params.pageIndex = 1
+			if(v.params.supplierId == _id || _id == null){
+				// v.showList = v.showListCopy.slice(0,10)
+				v.params.supplierId = null
+        
+			}else{
+				v.params.supplierId =  _id
+        
+			}
+			v.getList()
+			
+		},
+    tabsChange(){
+        const v = this
+        v.params.supplierId = null
+        //v.searchFn()
+    },
     filterChange () {
       this.params.pageIndex = 1
+      this.params.materialCode = ''
+      this.getHistoryPaymentMaterial()
+      this.getList()
+    },
+    materialChange () {
+      this.params.pageIndex = 1
       this.getList()
     },
     back () {
       this.$store.commit('closeTag', this.$route)
       setTimeout(() => {
-        this.$router.push('material_pay')
+        this.$router.push('pay_history')
       }, 500)
     },
+    open (item) {
+      if (!item.payObjList) {
+        GetApplyPayBill({
+          purchaseBillNo: item.purchaseBillNo,
+          payBillId: item.payBillId
+        }).then(res => {
+          if (res.code === 0) {
+            this.$set(item, 'payObjList', res.result)
+          }
+        })
+      }
+    },
     changePage (pageIndex) {
       this.params.pageIndex = pageIndex
       this.getList()
     },
-    getList () {
-      GetHistoryPaymentSum({
-        ...this.params
+    showForm (type, item) {
+      this.currentItem = { ...item }
+      switch (type) {
+        // 申购单
+        case 0:
+          this.currentItem.id = this.currentItem.payBillId
+          GetApplyPurchasePageList({
+            pageIndex: 1,
+            pageSize: 1,
+            purBillState: 1,
+            keyWord: this.currentItem.applyBillNo
+          }).then(res => {
+            if (res.code === 0) {
+              this.currentItem = { ...this.currentItem, ...res.result.list[0] }
+              this.payShow = true
+              console.log(this.currentItem)
+            }
+          })
+          break
+        case 1:
+          GetInStockBill({
+            inOutStorageNo: this.currentItem.inOutStorageNo,
+            applyBillNo: this.currentItem.applyBillNo
+          }).then(res => {
+            if (res.code === 0) {
+              this.currentItem = { ...this.currentItem, ...res.result }
+              this.storeInShow = true
+            }
+          })
+          break
+        case 2:
+          GetContractQtyCheckBill({
+            purchaseBillNo: this.currentItem.purchaseBillNo
+          }).then(res => {
+            if (res.code === 0) {
+              this.qualityData = res.result
+              this.qualityShow = true
+            }
+          })
+          break
+        case 3:
+          this.contractShow = true
+          break
+        case 4:
+          this.invoiceShow = true
+          break
+      }
+    },
+    getHistoryPaymentMaterial () {
+      GetHistoryPaymentMaterial({
+        beginTime: this.params.beginTime,
+        endTime: this.params.endTime,
+        supplierId: this.params.supplierId
       }).then(res => {
         if (res.code === 0) {
-          this.data = res.result
-          this.params.total = res.result.supplierNum
+          this.list = res.result.map(item => {
+            return {
+              label: item.value,
+              value: item.key
+            }
+          })
         }
       })
+    },
+    getStatistics(){
+        const v = this
+        axios
+            .post('/cloudApi/purchaseContract/pay/statistics', v.params)
+            .then((res) => {
+                this.statisticsData = res.data.data
+                v.salesVolumeCompanyTotal = {
+                    '50up':0,
+                    '20-50':0,
+                    '10-20':0,
+                    '5-10':0,
+                    '5down':0,
+                }
+                for (let i = 0; i < res.data.data.length; i++) {
+                    const element = res.data.data[i];
+                    element.total = element.sumMoney * 1
+                    const totalkeyName = 
+                        element.total < 50000 ? '5down' : 
+                        element.total >= 50000 && element.total < 100000 ? '5-10' :
+                        element.total >= 100000 && element.total < 200000 ? '10-20' :
+                        element.total >= 200000 && element.total < 500000 ? '20-50' :
+                        element.total >= 500000 ? '50up' : '';
+                    element.type = 
+                        element.total < 50000 ? '6' : 
+                        element.total >= 50000 && element.total < 100000 ? '5' :
+                        element.total >= 100000 && element.total < 200000 ? '4' :
+                        element.total >= 200000 && element.total < 500000 ? '3' :
+                        element.total >= 500000 ? '2' : '';
+                    v.salesVolumeCompanyTotal[totalkeyName] ++
+
+                }
+            })
+            
+    },
+    getList () {
+        const v = this
+        axios
+            .post('/cloudApi/purchaseContract/pay/list', v.params).then(res=>{
+                this.data = res.data.data
+                console.log(this.data)
+            })
+        axios
+            .post('/cloudApi/purchaseContract/pay/list/count', v.params).then(res=>{
+                this.params.total = res.data.data
+            })
+        
+      
     }
   },
   mounted () {
-    this.params.beginTime = this.$dayjs().format('YYYY-MM')
-    this.params.endTime = this.$dayjs().format('YYYY-MM')
+    this.getStatistics()
+    // this.getHistoryPaymentMaterial()
     this.getList()
   }
 }
 </script>
 
 <style lang="less" scoped>
- .container {
-   height: 100%;
-   display: flex;
-   flex-direction: column;
-   .filter {
-     margin-bottom: 10px;
-     height: 32px;
-     line-height: 32px;
-   }
-   .table {
-     flex: 1;
-     overflow: hidden;
-   }
- }
+.container-wrap {
+  
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .filter {
+    margin-bottom: 10px;
+    height: 32px;
+    line-height: 32px;
+  }
+  .container {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    .table-content {
+      flex: 1;
+      overflow: hidden;
+      .row {
+        margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        &:last-child {
+          margin-bottom: 0;
+        }
+        .col {
+          padding: 0 5px;
+          flex: 2;
+          overflow: hidden;
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          .value {
+            flex: 1;
+            overflow: hidden;
+            word-break: break-all;
+          }
+        }
+      }
+      .list {
+        height: 100%;
+        overflow: auto;
+        .item {
+          margin-bottom: 10px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+          .content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            border: 1px solid #d7d7d7;
+            border-radius: 5px;
+            background: #FFFFFF;
+            .item-left {
+              padding: 0 10px;
+              flex: 1;
+              border-right: 1px solid #333333;
+            }
+            .item-right {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              .forms {
+                padding: 0 10px;
+                .col {
+                  align-items: center;
+                  .text {
+                    text-decoration: underline;
+                    cursor: pointer;
+                  }
+                }
+              }
+              .btn {
+                display: flex;
+                flex-direction: column;
+              }
+            }
+          }
+        }
+      }
+    }
+    .table-page {
+      padding: 10px 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 43px;
+      overflow: hidden;
+    }
+  }
+}
 </style>
+
+
+

src/view/material-manege/pay/pay-history2.vue

@@ -1,566 +1,158 @@
-<!-- 合同付款详情 -->
 <template>
-  <div class="container-wrap">
-    <div style="margin-bottom:10px">
-		<Form ref="formInline" inline :label-width="100" style="float:left">
-          <Form-item  label="按供应商查找">
-              <Input type="text" v-model="params.supplierName" placeholder="输入关键字模糊搜索"></Input>
-          </Form-item>
-          <Form-item label="按物料查找">
-              <Input type="text" v-model="params.materialName" placeholder="输入关键字模糊搜索"></Input>
-          </Form-item>
-          <Button type="primary" @click="searchFn()">搜索</Button>
-      </Form>
-        <date-select v-model="params" @change="selectTime"></date-select>
+  <div class="container">
+    <div class="filter">
+      <span style="font-size: 14px;font-weight: bold;margin-right: 10px;">历史付款记录</span>
+      <DatePicker v-model="params.beginTime" @on-change="filterChange" type="month" placeholder="开始日期" style="width: 150px"></DatePicker>
+      <span style="padding: 0 10px">-</span>
+      <DatePicker v-model="params.endTime" @on-change="filterChange" type="month" placeholder="结束日期" style="width: 150px"></DatePicker>
+      <span style="margin-left: 10px;">
+        共有
+        <span style="color: red;">{{ data.supplierNum }}</span>
+        个供应商付款，
+        <span style="color: red;">{{ data.contractNum }}</span>
+        个合同，合同金额
+        <span style="color: red;">{{ data.contractAmount }}</span>
+        元，总计付款
+        <span style="color: red;">{{ data.totalAmount }}</span>
+        元
+      </span>
+      <span style="float: right;cursor: pointer;" @click="back">&lt;&lt;返回</span>
     </div>
-    <div style="background:#fff;padding:10px;margin-bottom:10px">
-        
-        <Tabs v-model="salesVolumeCompanyTotalType" @on-click="tabsChange">
-            <TabPane  label="全部" name="1"></TabPane>
-            <TabPane :label="(h) => {
-                return h('div', [
-                    h('span', '50万以上('),
-                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['50up']),
-                    h('span', ')')])
-            }" name="2"></TabPane>
-            <TabPane :label="(h) => {
-                return h('div', [
-                    h('span', '20-50万('),
-                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['20-50']),
-                    h('span', ')')])
-            }" name="3"></TabPane>
-            <TabPane :label="(h) => {
-                return h('div', [
-                    h('span', '10-20万('),
-                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['10-20']),
-                    h('span', ')')])
-            }" name="4"></TabPane>
-            <TabPane :label="(h) => {
-                return h('div', [
-                    h('span', '5-10万('),
-                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['5-10']),
-                    h('span', ')')])
-            }" name="5"></TabPane>
-            <TabPane :label="(h) => {
-                return h('div', [
-                    h('span', '5万以下('),
-                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['5down']),
-                    h('span', ')')])
-            }" name="6"></TabPane>
-        </Tabs>
-        <div>
-            <Button style="margin:0 10px 5px 0" :type="params.supplierId == null || params.supplierId =='' ? 'primary' : 'default'" @click="changeCompany(null,0,'')" >全部</Button>
-            <Button 
-                style="margin:0 10px 5px 0" 
-                @click="changeCompany(i.supplierId,index,i.supplierName)" 
-                v-for="(i,index) in statisticsData" 
-                :type="params.supplierId == i.supplierId ? 'primary' : 'default'"
-                :key="i.supplierId"
-                v-if="i.type == salesVolumeCompanyTotalType || salesVolumeCompanyTotalType == '1'">
-                {{i.supplierName}}<span :style="params.companySelectId == i.supplierId ?  'color:#ffc107' : 'color:red'"> ({{i.total}})</span>
-            </Button>
-        </div>
+    <div class="table">
+      <my-table :data="data.payItems" :columns="columns" :is-show-filter="false" :table-page="params" @on-change="changePage"></my-table>
     </div>
-    <div class="container">
-      
-      <!-- 表格 -->
-      <div class="table-content">
-        <div v-if="data && data.length === 0" style="height: 100%;display: flex;justify-content: center;align-items: center">
-          暂无数据
-        </div>
-        <div v-else class="list">
-          <div class="item" v-for="(item, index) in data" :key="index">
-            <div class="content">
-              <div class="item-left">
-                <div class="row">
-                  <div class="col">
-                    <div class="label">合同编码：</div>
-                    <div class="value">{{ item.purchaseBillNo }}</div>
-                  </div>
-                  <div class="col">
-                    <div class="label">供应商：</div>
-                    <div class="value">{{ item.supplierName }}</div>
-                  </div>
-                  <div class="col">
-                    <div class="label">付款期限：</div>
-                    <div class="value">{{ item.check.payDate }}</div>
-                  </div>
-                  <div class="col" style="flex: 1">
-                    <div class="label">单价：</div>
-                    <div class="value">{{ item.price }}</div>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col">
-                    <div class="label">物料名称：</div>
-                    <div class="value">{{ item.materialName }}</div>
-                  </div>
-                  <div class="col">
-                    <div class="label">规格：</div>
-                    <div class="value">{{ item.materialSpec }}</div>
-                  </div>
-                  <div class="col">
-                    <div class="label">采购数量：</div>
-                    <div class="value">{{ item.purchaseQty * 1 }}</div>
-                  </div>
-                  <div class="col" style="flex: 1"></div>
-                </div>
-                <div class="row">
-                  <div class="col">
-                    <div class="label">合同金额：</div>
-                    <div class="value">{{ item.contractAmount * 1 }}元</div>
-                  </div>
-                  <div class="col">
-                    <div class="label">质检金额：</div>
-                    <div class="value">{{ item.adjustAmount * 1 }}元</div>
-                  </div>
-                  <div class="col">
-                    <div class="label">已付金额：</div>
-                    <div class="value">{{ item.hadPayAmount * 1 }}元</div>
-                  </div>
-                  <div class="col" style="flex: 1">
-                    <div class="label">本次应付：</div>
-                    <div class="value">
-                      <span style="color: red">{{ item.actAmount  }}</span>元
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="item-right">
-                <div class="forms">
-                  <div class="row">
-                    <div class="col">
-                      <span class="text" @click="showForm(0, item)">申购单</span>
-                      <Icon type="md-checkmark" color="#07C909" size="20" />
-                    </div>
-                    <div class="col">
-                      <span class="text" @click="showForm(1, item)">入库单</span>
-                      <Icon v-if="item.check.inoutBillCheck" type="md-checkmark" color="#07C909" size="20" />
-                      <Icon v-else type="md-close" color="red" size="20" />
-                    </div>
-                    <div class="col">
-                      <span class="text" @click="showForm(2, item)">质检单</span>
-                      <Icon v-if="item.check.quantityCheck" type="md-checkmark" color="#07C909" size="20" />
-                      <Icon v-else type="md-close" color="red" size="20" />
-                    </div>
-                  </div>
-                  <div class="row">
-                    <div class="col">
-                      <span class="text" @click="showForm(3, item)">合同</span>
-                      <Icon v-if="item.check.ContractCheck" type="md-checkmark" color="#07C909" size="20" />
-                      <Icon v-else type="md-close" color="red" size="20" />
-                    </div>
-                    <div class="col">
-                      <span class="text" @click="showForm(4, item)">发票</span>
-                      <Icon v-if="item.check.invoiceCheck" type="md-checkmark" color="#07C909" size="20" />
-                      <Icon v-else type="md-close" color="red" size="20" />
-                    </div>
-                    <div class="col"></div>
-                  </div>
-                  <div class="row">
-                    <div class="col" style="justify-content: flex-start">
-                      <span class="text" style="text-decoration: none;cursor: auto">质检金额&lt;=发票金额</span>
-                      <Icon v-if="item.check.invoiceCheck" type="md-checkmark" color="#07C909" size="20" />
-                      <Icon v-else type="md-close" color="red" size="20" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="other" style="margin-top: 2px" v-if="item.hasOtherPayBill">
-              <Collapse :value="item.payObjList ? '1' : '0'" @on-change="open(item)">
-                <Panel name="1">
-                  合同付款记录
-                  <div slot="content">
-                    <div class="row" v-for="(payItem, payIndex) in item.payObjList" :key="payIndex">
-                      <div class="col">
-                        <div class="label">付款时间：</div>
-                        <div class="value">{{ payItem.payTime }}</div>
-                      </div>
-                      <div class="col">
-                        <div class="label">付款金额：</div>
-                        <div class="value">
-                          <span style="color: red">{{ payItem.payAmount }}</span>元
-                        </div>
-                      </div>
-                      <div class="col">
-                        <div class="label">审批状态：</div>
-                        <div class="value" :style="{color: payItem.approvalStateStr === '待审批'? 'red' : '' }">
-                          {{ payItem.approvalStateStr }}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </Panel>
-              </Collapse>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 分页 -->
-      <div class="table-page">
-        <Page :current="params.pageIndex" :total="params.total" :show-total="true" :page-size="10" show-elevator @on-change="changePage" />
-      </div>
-    </div>
-    <pass-modal v-model="passShow" :data="currentItem" @getlist="getList"></pass-modal>
-    <my-form-pay v-model="payShow" type="form" :data="currentItem" :showSider="false"></my-form-pay>
-    <store-in-form v-model="storeInShow" :data="currentItem"></store-in-form>
-    <quality-form v-model="qualityShow" :data="qualityData"></quality-form>
-    <invoice-form v-model="invoiceShow" :data="currentItem" @getlist="getList"></invoice-form>
-    <contract-form v-model="contractShow" :data="currentItem" @getlist="getList"></contract-form>
-    <apply-form v-model="applyShow" :data="currentItem" @getlist="getList"></apply-form>
   </div>
 </template>
 
 <script>
-import {
-  GetHistoryPaymentRecord,
-  GetHistoryPaymentMaterial,
-  GetApplyPurchasePageList,
-  GetContractQtyCheckBill,
-  GetApplyPayBill
-} from '@/api/applyPurchase'
 import MyTable from '_c/my-table/my-table'
-import MyFormPay from '_c/my-modal-pay'
-import PassModal from './modals/pass-modal'
-import StoreInForm from './modals/store-in-form'
-import QualityForm from './modals/quality-form'
-import InvoiceForm from './modals/invoice-form'
-import ContractForm from './modals/contract-form'
-import ApplyForm from './modals/apply-pass-form'
-import { GetInStockBill } from '@/api/stock'
-import  dateSelect  from '@/components/dateSelect/dateSelect'
-import axios from 'axios'
+import { GetHistoryPaymentSum } from '@/api/applyPurchase'
 export default {
-  name: 'material_pay_detail',
+  name: 'pay_history',
   components: {
-    MyTable,
-    PassModal,
-    MyFormPay,
-    StoreInForm,
-    QualityForm,
-    InvoiceForm,
-    ContractForm,
-    ApplyForm,
-    dateSelect
+    MyTable
   },
   data () {
     return {
-        statisticsData:[],
-      salesVolumeCompanyTotalType:'1',
-      salesVolumeCompanyTotal:{
-            '50up':0,
-            '20-50':0,
-            '10-20':0,
-            '5-10':0,
-            '5down':0,
+      data: {
+        payItems: []
+      },
+      columns: [
+        // {
+        //   title: '序号',
+        //   type: 'index',
+        //   width: 60,
+        //   align: 'center'
+        // },
+        {
+          title: '付款时间',
+          key: 'payTime',
+          minWidth: 150,
+          align: 'center'
+        },
+        {
+          title: '供应商',
+          key: 'supplierName',
+          minWidth: 150,
+          align: 'center'
+        },
+        {
+          title: '付款金额',
+          key: 'payAmount',
+          minWidth: 100,
+          align: 'center'
         },
-        company:[],
-      titleDay: 0,
-      tabsIndex: 0,
-      access: this.$store.state.user.access,
-      contractShow: false,
-      invoiceShow: false,
-      qualityShow: false,
-      storeInShow: false,
-      payShow: false, // 申购单
-      passShow: false, // 驳回
-      applyShow: false,
-      currentItem: {},
-      qualityData: [],
-      list: [],
-      supplierList: [],
-      data: [],
+        {
+          title: '操作',
+          align: 'center',
+          minWidth: 100,
+          render: (h, params) => {
+            let _this = this
+            return h('span', {
+              style: {
+                color: 'blue',
+                textDecoration: 'underline',
+                cursor: 'pointer'
+              },
+              on: {
+                click (e) {
+                  e.stopPropagation()
+                  _this.$router.push({
+                    name: 'pay_history_detail',
+                    query: {
+                      supplierId: params.row.supplierId,
+                      supplierList: _this.data.payItems.map(item => {
+                        return {
+                          label: item.supplierName,
+                          value: item.supplierId
+                        }
+                      }),
+                      beginTime: (_this.params.beginTime && _this.$dayjs(_this.params.beginTime).format('YYYY-MM')) || '',
+                      endTime: (_this.params.endTime && _this.$dayjs(_this.params.endTime).format('YYYY-MM')) || ''
+                    }
+                  })
+                }
+              }
+            }, '查看详情')
+          }
+        }
+      ],
       params: {
-        pageNum: 1,
-        pageSize: 10,
+        pageIndex: 1,
+        pageSize: 20,
         total: 0,
-        supplierId: '',
-        supplierName: '',
-        strTime: '',
-        endTime: '',
+        beginTime: '',
+        endTime: ''
       }
     }
   },
   methods: {
-	searchFn(){
-		const v = this
-		v.getStatistics()
-		v.changePage(1)
-
-	},
-    selectTime(){
-      const v = this
-      v.params.supplierId = ''
-      v.params.pageNum = 1
-      v.getList()
-      v.getStatistics()
-    },
-    changeCompany(_id,index,_name){
-			const v = this
-			v.params.pageIndex = 1
-			if(v.params.supplierId == _id || _id == null){
-				// v.showList = v.showListCopy.slice(0,10)
-				v.params.supplierId = null
-        
-			}else{
-				v.params.supplierId =  _id
-        
-			}
-			v.getList()
-			
-		},
-    tabsChange(){
-        const v = this
-        v.params.supplierId = null
-        //v.searchFn()
-    },
     filterChange () {
       this.params.pageIndex = 1
-      this.params.materialCode = ''
-      this.getHistoryPaymentMaterial()
-      this.getList()
-    },
-    materialChange () {
-      this.params.pageIndex = 1
       this.getList()
     },
     back () {
       this.$store.commit('closeTag', this.$route)
       setTimeout(() => {
-        this.$router.push('pay_history')
+        this.$router.push('material_pay')
       }, 500)
     },
-    open (item) {
-      if (!item.payObjList) {
-        GetApplyPayBill({
-          purchaseBillNo: item.purchaseBillNo,
-          payBillId: item.payBillId
-        }).then(res => {
-          if (res.code === 0) {
-            this.$set(item, 'payObjList', res.result)
-          }
-        })
-      }
-    },
     changePage (pageIndex) {
       this.params.pageIndex = pageIndex
       this.getList()
     },
-    showForm (type, item) {
-      this.currentItem = { ...item }
-      switch (type) {
-        // 申购单
-        case 0:
-          this.currentItem.id = this.currentItem.payBillId
-          GetApplyPurchasePageList({
-            pageIndex: 1,
-            pageSize: 1,
-            purBillState: 1,
-            keyWord: this.currentItem.applyBillNo
-          }).then(res => {
-            if (res.code === 0) {
-              this.currentItem = { ...this.currentItem, ...res.result.list[0] }
-              this.payShow = true
-              console.log(this.currentItem)
-            }
-          })
-          break
-        case 1:
-          GetInStockBill({
-            inOutStorageNo: this.currentItem.inOutStorageNo,
-            applyBillNo: this.currentItem.applyBillNo
-          }).then(res => {
-            if (res.code === 0) {
-              this.currentItem = { ...this.currentItem, ...res.result }
-              this.storeInShow = true
-            }
-          })
-          break
-        case 2:
-          GetContractQtyCheckBill({
-            purchaseBillNo: this.currentItem.purchaseBillNo
-          }).then(res => {
-            if (res.code === 0) {
-              this.qualityData = res.result
-              this.qualityShow = true
-            }
-          })
-          break
-        case 3:
-          this.contractShow = true
-          break
-        case 4:
-          this.invoiceShow = true
-          break
-      }
-    },
-    getHistoryPaymentMaterial () {
-      GetHistoryPaymentMaterial({
-        beginTime: this.params.beginTime,
-        endTime: this.params.endTime,
-        supplierId: this.params.supplierId
+    getList () {
+      GetHistoryPaymentSum({
+        ...this.params
       }).then(res => {
         if (res.code === 0) {
-          this.list = res.result.map(item => {
-            return {
-              label: item.value,
-              value: item.key
-            }
-          })
+          this.data = res.result
+          this.params.total = res.result.supplierNum
         }
       })
-    },
-    getStatistics(){
-        const v = this
-        axios
-            .post('/cloudApi/purchaseContract/pay/statistics', v.params)
-            .then((res) => {
-                this.statisticsData = res.data.data
-                v.salesVolumeCompanyTotal = {
-                    '50up':0,
-                    '20-50':0,
-                    '10-20':0,
-                    '5-10':0,
-                    '5down':0,
-                }
-                for (let i = 0; i < res.data.data.length; i++) {
-                    const element = res.data.data[i];
-                    element.total = element.sumMoney * 1
-                    const totalkeyName = 
-                        element.total < 50000 ? '5down' : 
-                        element.total >= 50000 && element.total < 100000 ? '5-10' :
-                        element.total >= 100000 && element.total < 200000 ? '10-20' :
-                        element.total >= 200000 && element.total < 500000 ? '20-50' :
-                        element.total >= 500000 ? '50up' : '';
-                    element.type = 
-                        element.total < 50000 ? '6' : 
-                        element.total >= 50000 && element.total < 100000 ? '5' :
-                        element.total >= 100000 && element.total < 200000 ? '4' :
-                        element.total >= 200000 && element.total < 500000 ? '3' :
-                        element.total >= 500000 ? '2' : '';
-                    v.salesVolumeCompanyTotal[totalkeyName] ++
-
-                }
-            })
-            
-    },
-    getList () {
-        const v = this
-        axios
-            .post('/cloudApi/purchaseContract/pay/list', v.params).then(res=>{
-                this.data = res.data.data
-                console.log(this.data)
-            })
-        axios
-            .post('/cloudApi/purchaseContract/pay/list/count', v.params).then(res=>{
-                this.params.total = res.data.data
-            })
-        
-      
     }
   },
   mounted () {
-    this.getStatistics()
-    // this.getHistoryPaymentMaterial()
+    this.params.beginTime = this.$dayjs().format('YYYY-MM')
+    this.params.endTime = this.$dayjs().format('YYYY-MM')
     this.getList()
   }
 }
 </script>
 
 <style lang="less" scoped>
-.container-wrap {
-  
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  .filter {
-    margin-bottom: 10px;
-    height: 32px;
-    line-height: 32px;
-  }
-  .container {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    .table-content {
-      flex: 1;
-      overflow: hidden;
-      .row {
-        margin-bottom: 5px;
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        &:last-child {
-          margin-bottom: 0;
-        }
-        .col {
-          padding: 0 5px;
-          flex: 2;
-          overflow: hidden;
-          display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          .value {
-            flex: 1;
-            overflow: hidden;
-            word-break: break-all;
-          }
-        }
-      }
-      .list {
-        height: 100%;
-        overflow: auto;
-        .item {
-          margin-bottom: 10px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-          .content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
-            border: 1px solid #d7d7d7;
-            border-radius: 5px;
-            background: #FFFFFF;
-            .item-left {
-              padding: 0 10px;
-              flex: 1;
-              border-right: 1px solid #333333;
-            }
-            .item-right {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              .forms {
-                padding: 0 10px;
-                .col {
-                  align-items: center;
-                  .text {
-                    text-decoration: underline;
-                    cursor: pointer;
-                  }
-                }
-              }
-              .btn {
-                display: flex;
-                flex-direction: column;
-              }
-            }
-          }
-        }
-      }
-    }
-    .table-page {
-      padding: 10px 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 43px;
-      overflow: hidden;
-    }
-  }
-}
+ .container {
+   height: 100%;
+   display: flex;
+   flex-direction: column;
+   .filter {
+     margin-bottom: 10px;
+     height: 32px;
+     line-height: 32px;
+   }
+   .table {
+     flex: 1;
+     overflow: hidden;
+   }
+ }
 </style>

src/view/store-manage/store-manage/store-manage-2.vue

@@ -4,16 +4,24 @@
 		<div class="total-warp">
 			<div class="h2">今日剩余</div>
 			<div class="total-box">
-				<div class="active" style="width: 7%; text-align: center" @click="getAll"
-				:style="
-						params.technologyType == null && params.purpose == null ? 'border:2px solid #0077ff' : ''
-					">
+				<div
+					class="active"
+					style="width: 7%; text-align: center"
+					@click="getAll"
+					:style="
+						params.technologyType == null && params.purpose == null
+							? 'border:2px solid #0077ff'
+							: ''
+					"
+				>
 					全部
 				</div>
 				<div
 					class="mianliao"
 					:style="
-						params.technologyType == 5 ? 'border:2px solid #0077ff' : ''
+						params.technologyType == 5
+							? 'border:2px solid #0077ff'
+							: ''
 					"
 					style="width: 50%"
 					@click="mianliaoTbleLineCk({ name: '面料' }, 5)"
@@ -57,7 +65,9 @@
 					style="width: 40%"
 					@click="moshuiCk"
 					:style="
-						params.technologyType == 3 ? 'border:2px solid #0077ff' : ''
+						params.technologyType == 3
+							? 'border:2px solid #0077ff'
+							: ''
 					"
 				>
 					<div class="label" style="border-right: 1px solid #dcdcdc">
@@ -128,11 +138,25 @@
 				>
 			</div>
 			<div class="filter-item" @keyup.enter="getList">
-				<Input
-					v-model="params.keyword"
-					clearable
-					placeholder="请输入关键字"
-				/>
+				<Poptip trigger="focus" width="250" placement="bottom">
+					<div slot="content">
+						<ul style="" class="commons-select-search">
+							<li
+								:key="i.id"
+								v-for="i in materialList"
+								@click="params.search = i.name"
+							>
+								{{ i.name }}
+							</li>
+						</ul>
+					</div>
+					
+					<Input
+						v-model="params.keyword"
+						@on-change="getMaterialSelectList"
+						placeholder="请输入用途关键词"
+					></Input>
+				</Poptip>
 			</div>
 			<div class="filter-item" style="width: 160px">
 				<my-tree-select
@@ -242,9 +266,7 @@
 								</div>
 							</div>
 							<div class="row">
-								<div class="col">
-									库存数量：{{ item.sum }}
-								</div>
+								<div class="col">库存数量：{{ item.sum }}</div>
 								<div class="col">
 									库存件数：{{ item.count }}
 								</div>
@@ -269,12 +291,16 @@
 							<div class="row">
 								<div class="col">
 									{{
-										`一楼：${item.yilouSum}，四楼：${ item.silouSum || 0}`
+										`一楼：${item.yilouSum}，四楼：${
+											item.silouSum || 0
+										}`
 									}}
 								</div>
 								<div class="col">
 									{{
-										`一楼：${item.yilouCount}，四楼：${item.silouCount || 0}`
+										`一楼：${item.yilouCount}，四楼：${
+											item.silouCount || 0
+										}`
 									}}
 								</div>
 								<div class="col"></div>
@@ -539,40 +565,57 @@ export default {
 				typeStatistics: [],
 			},
 			technologyTypeName: null,
+			materialList: [],
 		}
 	},
 	methods: {
-		rowClassName(row, index){
+		getMaterialSelectList() {
+			const v = this
+			v.loading = true
+			axios
+				.post('/cloudApi/material/selectList', {
+					pageNum:1,
+					pageSize:10,
+					search: '1231',
+				})
+				.then((res) => {
+					v.materialList = res.data.data
+					v.loading = false
+				})
+			
+		},
+		rowClassName(row, index) {
 			if (row.materialPurpose == this.technologyTypeName) {
 				return 'table-info-row'
 			}
 		},
 		rowClassName2(row, index) {
-			if(this.params.technologyType == 4){
-				if(index == 3) return 'table-info-row'
-			}else{
-				if (index == this.params.technologyType && this.params.technologyType != 3) {
+			if (this.params.technologyType == 4) {
+				if (index == 3) return 'table-info-row'
+			} else {
+				if (
+					index == this.params.technologyType &&
+					this.params.technologyType != 3
+				) {
 					return 'table-info-row'
 				}
 			}
-			
-			
 		},
-		getAll(){
+		getAll() {
 			this.params.technologyType = null
 			this.params.purpose = null
 			this.params.pageNum = 1
 			this.technologyTypeName = null
 			this.getList()
 		},
-		yongtuTbleLineCk(row,index){
+		yongtuTbleLineCk(row, index) {
 			this.technologyTypeName = row.materialPurpose
 			this.params.purpose = row.materialPurpose
 			this.params.technologyType = null
 			this.params.pageNum = 1
 			this.getList()
 		},
-		moshuiCk(){
+		moshuiCk() {
 			this.params.purpose = null
 			this.params.technologyType = 3
 			this.params.pageNum = 1
@@ -581,9 +624,9 @@ export default {
 		mianliaoTbleLineCk(row, index) {
 			this.technologyTypeName = null
 			this.params.purpose = null
-			if(index == 3){
+			if (index == 3) {
 				this.params.technologyType = 4
-			}else{
+			} else {
 				this.params.technologyType = index
 			}
 			this.getList()
@@ -596,20 +639,19 @@ export default {
 					if (res.data.code == 200) {
 						for (let i = 0; i < res.data.data.records.length; i++) {
 							const element = res.data.data.records[i]
-							element.yilouSum  = 0
-							element.yilouCount  = 0
-							element.silouSum  = 0
-							element.silouCount  = 0
+							element.yilouSum = 0
+							element.yilouCount = 0
+							element.silouSum = 0
+							element.silouCount = 0
 							for (let j = 0; j < element.houseInfo.length; j++) {
 								const jelement = element.houseInfo[j]
-								console.log(jelement,123123123)
-								if ((jelement.houseName == '一楼面料仓库')) {
+								if (jelement.houseName == '一楼面料仓库') {
 									element.yilouSum = jelement.sum || 0
-									element.yilouCount = jelement.count|| 0
+									element.yilouCount = jelement.count || 0
 								}
-								if ((jelement.houseName == '四楼面料仓')) {
-									element.silouSum = jelement.sum|| 0
-									element.silouCount = jelement.count|| 0
+								if (jelement.houseName == '四楼面料仓') {
+									element.silouSum = jelement.sum || 0
+									element.silouCount = jelement.count || 0
 								}
 							}
 						}
@@ -633,9 +675,14 @@ export default {
 				.post('/cloudApi/stockWater/remainingToday', {})
 				.then((res) => {
 					console.log(res)
-					for (let i = 0; i < res.data.data.purposeStatistics.length; i++) {
-						const element = res.data.data.purposeStatistics[i];
-						if(element.materialPurpose == '') element.materialPurpose = '其他'
+					for (
+						let i = 0;
+						i < res.data.data.purposeStatistics.length;
+						i++
+					) {
+						const element = res.data.data.purposeStatistics[i]
+						if (element.materialPurpose == '')
+							element.materialPurpose = '其他'
 					}
 					this.totalData.fabric = res.data.data.fabric
 					this.totalData.ink = res.data.data.ink
@@ -963,7 +1010,7 @@ export default {
 					font-size: 12px;
 					color: #838383;
 					line-height: 24px;
-					padding:6px 0;
+					padding: 6px 0;
 					span {
 						color: #3f3f3f;
 						font-weight: bold;