|
@@ -0,0 +1,331 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <Toptitle title="板材统计表详情">
|
|
|
+ <Button type="primary" style="margin-right: 10px" @click="checkTotal">查看合计</Button>
|
|
|
+ <Button @click="AllSelect" style="margin-right: 10px" type="primary">{{state?'取消全选':'全选'}}</Button>
|
|
|
+ <Button type="primary" ghost @click='exportData()' style="margin-right: 10px">导出</Button>
|
|
|
+ <Button type="primary" @click="$router.go(-1)">返回</Button>
|
|
|
+ </Toptitle>
|
|
|
+ <Form :label-width='80' style="display:flex;flex-wrap:wrap;margin-top:15px">
|
|
|
+ <FormItem label='图号'>
|
|
|
+ <Select filterable multiple v-model="searchData.url_number" style="width:200px">
|
|
|
+ <Option v-for="(item,index) in urlNumber_list" :key="index" :value="item" :label="item"></Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label='产品名称'>
|
|
|
+ <Select filterable multiple v-model="searchData.product_id" style="width:200px">
|
|
|
+ <Option v-for="(item,index) in product_list" :key="index" :value="item" :label="item"/>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label='派工时间'>
|
|
|
+ <DatePicker type="date" placeholder="年/月/日" style="width: 200px" v-model="searchData.start_time"></DatePicker>~
|
|
|
+ <DatePicker type="date" placeholder="年/月/日" style="width: 200px" v-model="searchData.end_time"></DatePicker>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem><Button type="primary" @click="initData(searchData)">搜索</Button></FormItem>
|
|
|
+ </Form>
|
|
|
+ <div style="height:80%;overflow:auto">
|
|
|
+ <Card v-for="(item,index) in infoNumber" :key="index">
|
|
|
+ <div class="table_header">
|
|
|
+ <div class="table_header_left">
|
|
|
+ <Checkbox v-model="item.is_select" @on-change='itemSelect($event,item,index)'></Checkbox>
|
|
|
+ <span>图号:{{item.url_number}}</span>
|
|
|
+ <span>产品名称:{{item.product_title}}</span>
|
|
|
+ <span>派工时间:{{item.crt_time?func.replaceDateNoHMS(item.crt_time):''}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="table_header_right">
|
|
|
+ <div @click="show(item,index)" style="cursor: pointer;"><span style="font-size:16px;">{{item.showType?'收缩':'展开'}}</span><Icon type="md-arrow-dropright" ref="ico" class="ico"/></div>
|
|
|
+ <span>总计{{item.total}}条数据</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.showType">
|
|
|
+ <div>
|
|
|
+ <Form style="display:flex;" :label-width='80'>
|
|
|
+ <FormItem label='物料分类:'>
|
|
|
+ <Select v-model="underFormData.type_id" filterable multiple style="width:250px">
|
|
|
+ <Option v-for="item in material_typeList" :key="item.id" :value="item.id" :label="item.title"/>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label='物料名称:'>
|
|
|
+ <Select v-model="underFormData.material_title" filterable multiple style="width:250px">
|
|
|
+ <Option v-for="val in materialList" :key="val.id" :value="val.title" :label="val.title"/>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem><Button type="primary" @click="initUnderData(underFormData)">搜索</Button></FormItem>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ <Table :columns="tableColumns" border :data="tableData" max-height="450">
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <Modal title="详情" width='50' v-model="show_total">
|
|
|
+ <Form :label-width='100' class="modal_form">
|
|
|
+ <FormItem label='物料分类:'>
|
|
|
+ <Input placeholder="请输入物料分类" v-model="modalData.type_title" size="small" class="modal_item" clearable/>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label='物料名称:'>
|
|
|
+ <Input placeholder="请输入物料名称" v-model="modalData.material_title" size="small" class="modal_item" clearable/>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem :label-width='50'>
|
|
|
+ <Button type="primary" size='small' @click="checkTotal(modalData)">搜索</Button>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ <Table :data='modalTableData' :columns='modalTableColumns' border max-height='550'>
|
|
|
+
|
|
|
+ </Table>
|
|
|
+ <div style="text-align:center;margin-top:20px">
|
|
|
+ <Page :page-size-opts="[10, 20, 30, 40,100]"
|
|
|
+ @on-page-size-change='changeSize'
|
|
|
+ @on-change='changePage'
|
|
|
+ :current='pageIndex'
|
|
|
+ show-total
|
|
|
+ :total="total"
|
|
|
+ show-sizer
|
|
|
+ :page-size='pageSize' />
|
|
|
+ </div>
|
|
|
+ <div slot="footer" style="text-align:center">
|
|
|
+ <Button type="primary" @click="modalBack" style="width:200px">返回</Button>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ proxyData:{},
|
|
|
+ total:0,
|
|
|
+ pageSize:10,
|
|
|
+ pageIndex:1,
|
|
|
+ modalTableData:[],
|
|
|
+ modalTableColumns:[
|
|
|
+ {type:'index',title:'序号',align:'center',minWidth:80},
|
|
|
+ {title:'物料分类',key:'type_title',minWidth:100,align:'center'},
|
|
|
+ {title:'物料名称',key:'material_title',minWidth:100,align:'center'},
|
|
|
+ {title:'计量单位',key:'unit',minWidth:100,align:'center'},
|
|
|
+ {title:'数量',key:'num',minWidth:100,align:'center'},
|
|
|
+ ],
|
|
|
+ modalData:{
|
|
|
+ type_title:'',
|
|
|
+ material_title:''
|
|
|
+ },
|
|
|
+ show_total:false,
|
|
|
+ tableColumns:[
|
|
|
+ {title:'序号',type:'index',align:'center',minWidth:60},
|
|
|
+ {title:'物料分类',align:'center',minWidth:100,key:'type_title'},
|
|
|
+ {title:'物料名称',align:'center',minWidth:150,key:'material_title'},
|
|
|
+ // {title:'规格型号',align:'center',minWidth:150,key:'measure',render:(h,params)=>{
|
|
|
+ // const {row} = params;
|
|
|
+ // const text = `${row.long?row.long:0}*${row.wide?row.wide:0}*${row.thick?row.thick:0}`
|
|
|
+ // return h('span',{},text)
|
|
|
+ // }},
|
|
|
+ {title:'原料尺寸',align:'center',minWidth:150,key:'storage_size'},
|
|
|
+ {title:'计量单位',align:'center',minWidth:80,key:'unit'},
|
|
|
+ {title:'精裁面积',align:'center',minWidth:150,key:'cut_area'},
|
|
|
+ {title:'数量',align:'center',minWidth:80,key:'num'},
|
|
|
+ ],
|
|
|
+ tableData:[],
|
|
|
+ selectData:[],
|
|
|
+ infoNumber:[],
|
|
|
+ underFormData:{
|
|
|
+ type_id:[],
|
|
|
+ material_title:[],
|
|
|
+ },
|
|
|
+ searchData:{
|
|
|
+ url_number:[],
|
|
|
+ product_id:[],
|
|
|
+ start_time:'',
|
|
|
+ end_time:''
|
|
|
+ },
|
|
|
+ material_typeList:[],
|
|
|
+ materialList:[],
|
|
|
+ urlNumber_list:[],
|
|
|
+ product_list:[],
|
|
|
+ url_number:'',
|
|
|
+ state:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ //获取物料分类
|
|
|
+ this.axios.get('/api/basics_material_index').then(res => {
|
|
|
+ this.material_typeList = res.data.data;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ //获取物料名称
|
|
|
+ this.axios.get('/api/material').then(res=>{
|
|
|
+ this.materialList = res.data.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ modalBack(){
|
|
|
+ this.show_total = false;
|
|
|
+ this.modalData.type_title = '';
|
|
|
+ this.modalData.material_title = '';
|
|
|
+ },
|
|
|
+ changePage(e){
|
|
|
+ this.pageIndex = e;
|
|
|
+ },
|
|
|
+ changeSize(e){
|
|
|
+ this.pageSize = e;
|
|
|
+ this.pageIndex = 1;
|
|
|
+ },
|
|
|
+ checkTotal(data){
|
|
|
+ if(this.selectData.length==0){
|
|
|
+ return this.$Message.warning('请先选择图号!')
|
|
|
+ }
|
|
|
+ let url_number = [];
|
|
|
+ this.selectData.forEach(v=>{
|
|
|
+ url_number.push(v.url_number);
|
|
|
+ })
|
|
|
+ this.axios.post('/api/finance_quota_detail_material_total',{url_number,order_no:this.$route.query.order_no,...data}).then(res=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ this.modalTableData = res.data.data;
|
|
|
+ this.total = res.data.total;
|
|
|
+ this.show_total = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ itemSelect(e,item,index){
|
|
|
+ console.log(e);
|
|
|
+ if(e){
|
|
|
+ this.selectData.push(item);
|
|
|
+ this.infoNumber[index].is_select = true;
|
|
|
+ let arr = this.infoNumber.filter(v=>{
|
|
|
+ return v.is_select == false;
|
|
|
+ })
|
|
|
+ if(arr.length == 0){
|
|
|
+ this.state = true;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.state = false;
|
|
|
+ this.infoNumber[index].is_select = false;
|
|
|
+ this.selectData.forEach((v,idx)=>{
|
|
|
+ if(v.index == item.index){
|
|
|
+ this.selectData.splice(idx,1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ AllSelect(){
|
|
|
+ if(this.state){
|
|
|
+ this.infoNumber.forEach(v=>{
|
|
|
+ v.is_select = false;
|
|
|
+ this.state = false;
|
|
|
+
|
|
|
+ })
|
|
|
+ this.selectData = [];
|
|
|
+ }else{
|
|
|
+ this.infoNumber.forEach(v=>{
|
|
|
+ v.is_select = true;
|
|
|
+ this.state = true;
|
|
|
+ })
|
|
|
+ this.selectData = JSON.parse(JSON.stringify(this.infoNumber))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async exportData(){
|
|
|
+ // console.log(this.selectData);
|
|
|
+ if(this.selectData.length==0){
|
|
|
+ return this.$Message.warning('请先选择图号!')
|
|
|
+ }
|
|
|
+ let url_number = [];
|
|
|
+ this.selectData.forEach(v=>{
|
|
|
+ url_number.push(v.url_number);
|
|
|
+ })
|
|
|
+ const res = await this.axios.post('/api/finance_quota_export',{order_no:this.$route.query.order_no,url_number})
|
|
|
+ if(res.code == 200){
|
|
|
+ let url = `${this.$store.state.ip}/api/storage/${res.data.file}`
|
|
|
+ location.href = url
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initUnderData(row){
|
|
|
+ this.axios.post('/api/finance_quota_detail_material',{order_no:this.$route.query.order_no,
|
|
|
+ url_number:this.url_number,...row}).then(res=>{
|
|
|
+ this.tableData = res.data.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ show(item,index){
|
|
|
+ item.showType = !item.showType;
|
|
|
+ this.infoNumber.forEach((v,indx)=>{
|
|
|
+ if(indx!=index){
|
|
|
+ v.showType = false;
|
|
|
+ document.getElementsByClassName('ico')[index].style.transform = 'rotate(0deg)'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(item.showType){
|
|
|
+ document.getElementsByClassName('ico')[index].style.transform = 'rotate(90deg)';
|
|
|
+ this.url_number = item.url_number;
|
|
|
+ this.underFormData={
|
|
|
+ type_id:[],
|
|
|
+ material_title:[],
|
|
|
+ };
|
|
|
+ this.initUnderData();
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ initData(row){
|
|
|
+ this.proxyData=row;
|
|
|
+ let data = [];
|
|
|
+ if(row){
|
|
|
+ data = JSON.parse(JSON.stringify(row));
|
|
|
+ data.end_time = row.end_time?Date.parse(row.end_time).toString().slice(0,10):'';
|
|
|
+ data.start_time = row.start_time?Date.parse(row.start_time).toString().slice(0,10):'';
|
|
|
+ }
|
|
|
+
|
|
|
+ this.axios.post('/api/finance_quota_detail',{order_no:this.$route.query.order_no,...data}).then(res=>{
|
|
|
+ res.data.data.forEach((v,index) => {
|
|
|
+ v.showType = false;
|
|
|
+ v.is_select=false;
|
|
|
+ v.index = index;
|
|
|
+ });
|
|
|
+ this.infoNumber = res.data.data;
|
|
|
+ this.urlNumber_list = res.data.url_number;
|
|
|
+ this.product_list = res.data.product_title;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.table_header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .table_header_left{
|
|
|
+ span{
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table_header_right {
|
|
|
+ width: 240px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .ivu-card{
|
|
|
+ border-radius: 15px;
|
|
|
+ margin: 15px 0;
|
|
|
+ background: rgb(236, 236, 236);
|
|
|
+}
|
|
|
+.mate_info{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+.ico{
|
|
|
+ height:14px;
|
|
|
+ transition: all 0.4s;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.modal_form{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .modal_item{
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|