jf-frock/src/views/PurchasingManage/extraCosts/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>
        </DropdownMenu>
    </Dropdown>
       </Toptitle>
       <div class="content">
       <Form class="form_content" :label-width='120'>
           <FormItem label='费用单据号：'>
               <Input class="form_item" placeholder="请搜索" v-model="searchData.cost_no" clearable/>
           </FormItem>
           <FormItem label='相关项目'>
              <Select class="form_item" v-model="searchData.project_name" filterable clearable>
                  <Option v-for="(item,index) in projectTitleList" :key="index" :value="item.project_title" :label="item.project_title"></Option>
               </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='已审批'/>
                  </Select>
           </FormItem>
            <FormItem label='审批人：'>
                <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='供应商'>
               <Select filterable clearable v-model="searchData.supply_id" >
                   <Option v-for="(item,index) in suppliersList" :key="index" :value="item.id" :label="item.title"></Option>
               </Select>
           </FormItem>
           <FormItem label='创建时间：' style="width:100%">
                  <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.start_time"></DatePicker>~
                  <DatePicker type="date" placeholder="年/月/日" class="form_item" v-model="searchData.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==1" @click='handelSet(row)'>弃审</a>
                   <a style="margin-right:10px" v-show="row.state==0" @click='handelSet(row)'>审批</a>
                  <a style="margin-right:10px" @click="goPage(3,row)">详情</a>
                  <a @click="goPage(2,row)" style="margin-right:10px" v-show="row.state==0">编辑</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>
    </div>
</template>
<script>
export default {
    data(){
        return{
            suppliersList:[],
            projectTitleList:[],
            loading:false,
            searchData:{
                cost_no:'',
                project_name:'',
                crt_id:'',
                state:"",
                check_id:'',
                supply_id:'',
                start_time:'',
                end_time:'',
                check_start_time:'',
                check_end_time:'',
            },
            chooseData:{},
            check_id:'',
            users:[],
            page_index:1,
            page_size:10,
            total:0,
            selectData:[],
            tableData:[],
            tableColumns:[
                {type:'selection',minWidth:80,align:'center'},
                {title:'费用单据号',align:'center',minWidth:140,key:'cost_no'},
                {title:'相关项目',align:'center',minWidth:150,key:'project_name'},
                {title:'供应商',align:'center',minWidth:150,key:'supply_title'},
                {title:'合计金额',align:'center',minWidth:120,key:'total_price'},
                {title:'制单人',align:'center',minWidth:120,key:'user_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?'未审批':'已审批';
                    return h('span',{},text)
                }},
                {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.post('/api/cost_order_list').then(res=>{
            this.projectTitleList = 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 ar = [];
                    ar = this.selectData.filter(v=>{
                        return v.state == 1;
                    })
                    if(ar.length!=0){
                        return this.$Message.warning('数据中有不能审批的数据！')
                    }
                     this.confirmDelete({
                    title:'确认',
        content: '确认审批么？',
        then: () => {
                    let cost_no = [];
                    this.selectData.forEach(v=>{
                        cost_no.push(v.cost_no);
                    })
                       this.axios.post('/api/cost_check',{cost_no,state:0}).then(res=>{
                              if(res.code==200){
                        this.$Message.success(res.msg);
                        this.initData(this.searchData);
                    }
                        })
        }})
                    break;
                case '2':
                     if(this.selectData.length==0){
                        return this.$Message.warning('请先选择数据！');
                    };
                    let sureData = this.selectData.filter(v=>{
                        return v.state == 1;
                    });
                    if(sureData.length!=0){
                         return this.$Message.warning('已审批的数据不能删除！')
                    }
                   let cost = [];
                   this.selectData.forEach(v=>{
                       cost.push(v.cost_no);
                   })
                      this.confirmDelete({
        content: "确认删除么？",
        then: () => {
          this.axios
            .post("/api/cost_del", { cost_no:cost})
            .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 '3':
                     if(this.selectData.length==0){
                        return this.$Message.warning('请先选择数据！');
                    };
                    break;
             }
        },
        handleDel(row){
              this.confirmDelete({
        content: "确认删除么？",
        then: () => {
          this.axios
            .post("/api/cost_del", { cost_no:[row.cost_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);
        },
        handelSet(row){
         
                      this.confirmDelete({
        title:'确认',
        content: `${row.state==0?'确定审批吗？':'确定弃审吗?'}`,
        then: () => {
          this.axios
            .post("/api/cost_check", { cost_no:[row.cost_no],state: row.state })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.initData(this.searchData);
                // this.undata_navData();
              }
            });
        },
      });
        },
        initData(row){
            let obj = {};
            if(row){
                obj = JSON.parse(JSON.stringify(row));
                 obj.start_time = obj.start_time?Date.parse(obj.start_time).toString().slice(0,10):'';
                obj.end_time = obj.end_time?Date.parse(obj.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/cost_list',{...obj,page_size:this.page_size,page_index:this.page_index}).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/PurchasingManage/extraCosts/edit',query:{type}})
            }else{
                 this.$router.push({path:'/cms/PurchasingManage/extraCosts/edit',query:{type,cost_no:row.cost_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>