jf-frock/src/views/PayrollRequisition/list.vue

<template>
    <div>
       <Toptitle title="采购请款单">
         <Dropdown  trigger="click" @on-click='handleTotalAll'>
     <Button type="primary">批量<Icon type="ios-arrow-down" style="padding-left:10px"/></Button>
        <DropdownMenu slot="list">
            <DropdownItem name='1'>提交审批</DropdownItem>
            <DropdownItem name='2'>审批</DropdownItem>
            <DropdownItem name='3'>删除</DropdownItem>
             <DropdownItem name='4'>打印</DropdownItem>
        </DropdownMenu>
    </Dropdown>
       </Toptitle>
       <div class="content">
       <Form class="form_content" :label-width='120'>
           <FormItem label='请款单号：'>
               <Input class="form_item" placeholder="请搜素" v-model="searchData.payment_no" clearable/>
           </FormItem>
           <FormItem label='申请部门：'>
              <Select class="form_item" v-model="searchData.section_id" filterable clearable>
                   <Option v-for="item in sectionList" :key="item.id" :label="item.title" :value="item.id"/>
               </Select>
           </FormItem>
           <FormItem label='请款人：'>
               <Select class="form_item" v-model="searchData.payment_id" filterable clearable>
                   <Option v-for="item in users" :key='item.id' :value="item.id" :label="item.nickname"/>
               </Select>
           </FormItem>
           <FormItem label='供应商名称：'>
               <Select class="form_item" v-model="searchData.supply_id" filterable clearable>
                   <Option v-for="(item,index) in suppliersList" :key="index" :value="item.id" :label="item.title"></Option>
               </Select>
           </FormItem>
           <FormItem label='联系人：'>
               <Select class="form_item" v-model="searchData.link" filterable clearable>
                   <Option v-for="item in users" :key='item.id' :value="item.id" :label="item.nickname"/>
               </Select>
           </FormItem>
           <FormItem label='制单人：'>
                <Select class="form_item" v-model="searchData.crt_id" filterable clearable>
                   <Option v-for="item in users" :key='item.id' :value="item.id" :label="item.nickname"/>
               </Select>
           </FormItem>
           <FormItem label='审批状态：'>
                  <Select class="form_item" v-model="searchData.state" clearable>
                      <Option :value="0" label="未提交审批"/>
                      <Option :value="1" label="已提交未审批"/>
                        <Option :value="2" label='已审批'/>
                  </Select>
           </FormItem>
            <FormItem label='待审人：' >
                <Select class="form_item" v-model="searchData.pend_id" clearable>
                   <Option v-for="item in users" :key='item.id' :value="item.id" :label="item.nickname"/>
               </Select>
           </FormItem>
            <FormItem label='审批人：' style="width:100%">
                <Select class="form_item" v-model="searchData.check_id" filterable clearable>
                   <Option v-for="item in users" :key='item.id' :value="item.id" :label="item.nickname"/>
               </Select>
           </FormItem>
           <FormItem label='创建时间：'>
                  <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.crt_start_time"></DatePicker>~
                  <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.crt_end_time"></DatePicker>
           </FormItem>
           <FormItem label='请款日期：'>
                   <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.payment_start_time"></DatePicker>~
                  <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.payment_end_time"></DatePicker>
           </FormItem>
           <FormItem label='回票时间：'>
                    <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.invoice_start_time"></DatePicker>~
                  <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.invoice_end_time"></DatePicker>
           </FormItem>
             <FormItem label='审批时间：'>
                   <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.check_start_time"></DatePicker>~
                  <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.check_end_time"></DatePicker>
           </FormItem>
           <FormItem :label-width='50'>
               <Button type="primary" @click="initData(searchData)">搜索</Button>
           </FormItem>
       </Form>
       <div class="before_table"><Button type="primary" @click="goPage(1)">新增</Button></div>
       <Table :data='tableData' :columns='tableColumns' border max-height='350' @on-selection-change='DataSelect' :loading='loading'>
              <template slot="set" slot-scope="{row}">
                  <a style="margin-right:10px" v-show="row.state==0||row.state==2" @click='handelSet(row,1)'>提交审批</a>
                    <a style="margin-right:10px" v-show="row.state==2" @click='handelSet(row,2)'>弃审</a>
                   <a style="margin-right:10px" v-show="row.state==1" @click='handelSet(row,1)'>审批</a>
                     <a style="margin-right:10px" v-show="row.state==1" @click='handelSet(row,2)'>撤销提交</a>
                  <a style="margin-right:10px" @click="goPage(3,row)">详情</a>
                  <a @click="goPage(2,row)" style="margin-right:10px">编辑</a>
                  <a style="margin-right:10px" v-show="row.state==0" @click="handleDel(row)">删除</a>
                  <a>打印</a>
              </template>
       </Table>
       </div>
         <div class="pageSlotStyle">
        <Page :page-size-opts="[10, 20, 30, 40,100,1000]"
              @on-page-size-change='changeSize'
              @on-change='changePage'
              :current='page_index'
              show-total
              :total="total"
              show-sizer
              :page-size='page_size' />
      </div>
      <Modal title="提交审批" v-model="show_submit">
          <Form :label-width='100'>
              <FormItem label="审批人：">
                  <Select v-model="check_id">
                      <Option v-for="item in users" :key='item.id' :value="item.id" :label="item.nickname"></Option>
                  </Select>
              </FormItem>
          </Form>
           <div slot="footer">
              <Button type="primary" ghost @click="show_submit=false">取消</Button>
              <Button type="primary" @click="submit">确认</Button>
              
          </div>
      </Modal>
    </div>
</template>
<script>
export default {
    data(){
        return{
            suppliersList:[],
            sectionList:[],
            loading:false,
            submit_state:false,
            searchData:{
                 payment_no:"",
                 payment_id:'',
                 supply_id:'',
                 link:'',
                 crt_id:'',
                  section_id:'',
                  pend_id:'',
                  check_id:'',
                  state:'',
                  crt_start_time:'',
                  crt_end_time:'',
                  payment_start_time:'',
                  payment_end_time:'',
                  invoice_start_time:'',
                  invoice_end_time:'',
                  check_start_time:'',
                  check_end_time:'',
            },
            chooseData:{},
            check_id:'',
            users:[],
            show_submit:false,
            page_index:1,
            page_size:10,
            total:0,
            selectData:[],
            tableData:[],
            tableColumns:[
                {type:'selection',minWidth:80,align:'center'},
                {title:'请款单号',align:'center',minWidth:140,key:'payment_no'},
                {title:'申请部门',align:'center',minWidth:150,key:'section_title'},
                {title:'请款人',align:'center',minWidth:120,key:'payment_name'},
                {title:'请款日期',align:'center',minWidth:130,key:'payment_time',render:(h,params)=>{
                    const {row} = params;
                    return h('span',{},this.func.replaceDateNoHMS(row.payment_time))
                }},
                {title:'供应商名称',align:'center',minWidth:300,key:'supply_title'},
                {title:'联系人',align:'center',minWidth:120,key:'link'},
                {title:'联系电话',align:'center',minWidth:120,key:'mobile'},
                {title:'汇款信息',align:'center',minWidth:120,key:'information',ellipsis:true,tooltip:true},
                {title:'申请金额',align:'center',minWidth:120,key:'apply_price'},
                 {title:'回票时间',align:'center',minWidth:130,key:'invoice_time',render:(h,params)=>{
                    const {row} = params;
                    return h('span',{},this.func.replaceDateNoHMS(row.invoice_time))
                }},
                {title:'制单人',align:'center',minWidth:120,key:'crt_name'},
                {title:'创建时间',align:'center',minWidth:130,key:'crt_time',render:(h,params)=>{
                    const {row} = params;
                    return h('span',{},this.func.replaceDateNoHMS(row.crt_time))
                }},
                {title:'审批状态',align:'center',minWidth:140,key:'state',render:(h,params)=>{
                    const {row} = params;
                    const text = row.state==0?'未提交审批':row.state==1?'已提交未审批':'已审批';
                    return h('span',{},text)
                }},
                {title:'待审人',align:'center',minWidth:120,key:'pend_name'},
                {title:'审批人',align:'center',minWidth:120,key:'check_name'},
                {title:'审批时间',align:'center',minWidth:130,key:'check_time',render:(h,params)=>{
                    const {row} = params;
                    return h('span',{},this.func.replaceDateNoHMS(row.check_time))
                }},
                {title:'操作',align:'center',minWidth:300,key:'',slot:'set'}
            ]
        }
    },
    created(){
         //获取人员列表
        this.axios.get('/api/user').then(res=>{
            this.users = res.data.data
        })
         //获取部列表
         this.axios.get('/api/employee_depart_list').then(res=>{
           this.sectionList = res.data;
         });
            // 获取供应商列表
    this.axios({ method: 'get', url: '/api/supply_list', }).then((res) => { this.suppliersList = res.data.data }).catch((err) => { });
    },
    mounted(){
     this.initData();
    },
    methods:{
        handleTotalAll(name){
             switch(name){
                 case "1":
                       if(this.selectData.length==0){
                        return this.$Message.warning('请先选择数据！');
                    }
                    let arr = [];
                    arr = this.selectData.filter(v=>{
                        return v.state==0||v.state==2
                    })
                    if(arr.length != this.selectData.length){
                        return this.$Message.warning('数据中有不能提交审批的数据！')
                    }
                    console.log(arr);
                    let state = false;
                    arr.forEach(v=>{
                        if(v.state!=arr[0].state){
                            state = true;
                        }
                    })
                    if(state){
                       return this.$Message.warning('请选择状态相同的数据！')
                    }
                   this.show_submit = true;
                       this.submit_state = true;
                   this.check_id='';
                    break;
                case '2':
                    if(this.selectData.length==0){
                        return this.$Message.warning('请先选择数据！');
                    };
                    let ar = [];
                    ar = this.selectData.filter(v=>{
                        return v.state == 1;
                    })
                    if(ar.length!=this.selectData.length){
                        return this.$Message.warning('数据中有不能审批的数据！')
                    }
                       this.confirmDelete({
        title:'确认？',
        content: "确认审批？",
        then: () => {
                    let payment_no = [];
                    this.selectData.forEach(v=>{
                        payment_no.push(v.payment_no);
                    })
                       this.axios.post('/api/payment_check',{payment_no,id:JSON.parse(localStorage.getItem('user_info')).id,state:1}).then(res=>{
                              if(res.code==200){
                        this.$Message.success(res.msg);
                        this.initData(this.searchData);
                    }
                        })
        }
                       })
                    break;
                case '3':
                     if(this.selectData.length==0){
                        return this.$Message.warning('请先选择数据！');
                    };
                      let stateData = this.selectData.filter(v=>{
                        return v.state == 1||v.state == 2;
                    });
                   if(stateData.length!=0){
                       return this.$Message.warning('数据中有不能删除的数据，请重新选择！')
                   }
                   let payment = [];
                   this.selectData.forEach(v=>{
                       payment.push(v.payment_no);
                   })
                      this.confirmDelete({
        content: "确认删除么？",
        then: () => {
          this.axios
            .post("/api/payment_del", { payment_no:payment})
            .then((res) => {
              if (res.code == 200) {
                    if(this.page_index!=1||this.tableData.length==1){
                        this.page_index--;
                }
                this.$Message.success(res.msg);
                this.initData(this.searchData);
              }
            });
        },
      });
                    break;
                case '4':
                     if(this.selectData.length==0){
                        return this.$Message.warning('请先选择数据！');
                    };
                    break;
             }
        },
        handleDel(row){
              this.confirmDelete({
        content: "确认删除么？",
        then: () => {
          this.axios
            .post("/api/payment_del", { payment_no:[row.payment_no]})
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                if(this.page_index!=1||this.tableData.length==1){
                        this.page_index--;
                }
                this.initData(this.searchData);
              }
            });
        },
      });
        },
        changePage(e){
            this.page_index = e;
            this.initData(this.searchData);
        },
        changeSize(e){
          this.page_size = e;
          this.page_index =1;
          this.initData(this.searchData);
        },
        submit(){
                if(!this.check_id){
                return this.$Message.warning('请选择审批人！')
            }
               if(this.submit_state){
                   let payment_no = [];
                   this.selectData.forEach(v=>{
                        payment_no.push(v.payment_no);
                   })
                      this.axios.post('/api/payment_check',{id:this.check_id,payment_no,state:this.selectData[0].state}).then(res=>{
                    if(res.code==200){
                        this.$Message.success(res.msg);
                        this.initData(this.searchData);
                        this.check_id = '';
                        this.show_submit = false;
                        this.submit_state = false;
                    }
                })
               }else{
                    this.axios.post('/api/payment_check',{id:this.check_id,payment_no:[this.chooseData.payment_no],state:this.chooseData.state}).then(res=>{
                    if(res.code==200){
                        this.$Message.success(res.msg);
                        this.initData(this.searchData);
                        this.check_id = '';
                        this.show_submit = false;
                    }
                })
               }
               
        },
        handelSet(row,type){
          switch(type){
              case 1:
                  if(row.state == 0||row.state == 2){
                       this.show_submit = true;
                  this.chooseData = row;
                  }else{
                        this.confirmDelete({
        title:'确认？',
        content: "确认审批？",
        then: () => {
                        this.axios.post('/api/payment_check',{payment_no:[row.payment_no],id:JSON.parse(localStorage.getItem('user_info')).id,state:row.state}).then(res=>{
                              if(res.code==200){
                        this.$Message.success(res.msg);
                        this.initData(this.searchData);
                    }
                        })
        }
                        })
                  }
                  break;
             case 2:
                      this.confirmDelete({
        title:'确认',
        content: `${row.state==1?'确定撤销提交吗？':'确定弃审吗?'}`,
        then: () => {
          this.axios
            .post("/api/payment_un_check", { payment_no:row.payment_no,state: row.state })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.initData(this.searchData);
                // this.undata_navData();
              }
            });
        },
      });
                 break;
          }
        },
        initData(row){
            let obj = {};
            if(row){
                obj = JSON.parse(JSON.stringify(row));
                obj.crt_start_time = obj.crt_start_time?Date.parse(obj.crt_start_time).toString().slice(0,10):'';
                obj.crt_end_time = obj.crt_end_time?Date.parse(obj.crt_end_time).toString().slice(0,10):'';
                 obj.payment_start_time = obj.payment_start_time?Date.parse(obj.payment_start_time).toString().slice(0,10):'';
                obj.payment_end_time = obj.payment_end_time?Date.parse(obj.payment_end_time).toString().slice(0,10):'';
                 obj.invoice_start_time = obj.invoice_start_time?Date.parse(obj.invoice_start_time).toString().slice(0,10):'';
                obj.invoice_end_time = obj.invoice_end_time?Date.parse(obj.invoice_end_time).toString().slice(0,10):'';
                 obj.check_start_time = obj.check_start_time?Date.parse(obj.check_start_time).toString().slice(0,10):'';
                obj.check_end_time = obj.check_end_time?Date.parse(obj.check_end_time).toString().slice(0,10):'';
            }
            this.loading = true;
          this.axios.post('/api/payment_list',{...obj,page_index:this.page_index,page_size:this.page_size}).then(res=>{
              this.tableData = res.data.data;
              this.total = res.data.total;
              this.loading = false;
          })
        },
        DataSelect(e){
  this.selectData = e;
        },
        goPage(type,row){
            if(type==1){
                 this.$router.push({path:'/cms/PayrollRequisition/edit',query:{type}})
            }else if(type==2){
                 this.$router.push({path:'/cms/PayrollRequisition/edit',query:{type,payment_no:row.payment_no,state:row.state}})
            }else{
                 this.$router.push({path:'/cms/PayrollRequisition/detail',query:{type,payment_no:row.payment_no,state:row.state}})
            }
          
        }

    }
}
</script>
<style lang="scss" scoped>
.content{
     height: 85%;
     overflow: auto;
     .form_content{
         margin-top:10px;
           display: flex;
           flex-wrap: wrap;
           .form_item{
               width:200px
           }
     }
     .before_table{
         display: flex;
         flex-direction: row-reverse;
         margin-bottom: 10px;
     }
}
.pageSlotStyle{
    text-align: center;
    margin-top:10px;
}
</style>