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

<template>
    <div>
      <Toptitle title="合同列表">

      </Toptitle>
      <div style="height:85%;overflow:auto">
      <Form :label-width='100' class="search_form">
          <FormItem label='项目编码：'>
              <Input v-model="searchData.order_no" clearable placeholder="请搜索" class="form_item"/>
          </FormItem>
          <FormItem label='项目名称：'>
              <Input v-model="searchData.project_title" clearable placeholder="请搜索" class="form_item"/>
          </FormItem>
          <FormItem label='项目阶段：'>
              <Select filterable clearable v-model="searchData.phase" placeholder="请选择" class="form_item">
                  <Option v-for="(item,index) in agreementList" :key="index" :value="item.id" :label="item.title"></Option>
              </Select>
          </FormItem>
          <FormItem label='客户名称：'>
              <Input v-model="searchData.customer" clearable placeholder="请搜索" class="form_item"/>
          </FormItem>
          <FormItem label='金螳螂ID：'>
              <Input v-model="searchData.customer_id" clearable placeholder="请搜索" class="form_item"/>
          </FormItem>
          <FormItem label='项目日期：'>
                 <DatePicker type="date" placeholder="年/月/日" style="width: 200px" v-model="searchData.start_time" class="form_item"></DatePicker>~
                  <DatePicker type="date" placeholder="年/月/日" style="width: 200px" v-model="searchData.end_time" class="form_item"></DatePicker>
          </FormItem>
          <FormItem>
              <Button type="primary" @click="search(searchData)">搜索</Button>
          </FormItem>
      </Form>
      <div class="table_top">
          <Button type="primary" @click="goAdd(1,null)">新增</Button>
      </div>
      <Table :data='tableData' :columns='tableColumns' max-height='550' border>
        <template slot="set" slot-scope="{row}">
            <a @click="goAdd(2,row)">编辑</a>
            <a style="margin-left:10px" @click="goAdd(3,row)">变更</a>
            <a style="margin-left:10px" @click="goAdd(4,row)">详情</a>
            <a style="margin-left:10px">下计划</a>
            <a style="margin-left:10px" @click='goAdd(5,row)'>删除</a>
        </template>
      </Table>
      </div>
        <div class="content_body_page">
        <Page
          :page-size-opts="[10, 20, 30, 40, 100]"
          @on-page-size-change="changeSize"
          @on-change="changePage"
          :current="pageIndex"
          show-total
          show-elevator
          :total="total"
          show-sizer
          :page-size="pageSize"
        />
      </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            proxyData:{},
            pageSize:10,
            pageIndex:1,
            total:0,
        agreementList:[{title:'立项',id:1},{title:'评审',id:2},{title:'报价',id:3},{title:'投标',id:4},{title:'中标',id:5},{title:'废标',id:6}],
        searchData:{
            phase:'',//项目阶段
            order_no:'',//项目编码
            project_title:'',//项目名称
            customer:'',//客户名称
            start_time:'',//
            customer_id:'',//金螳螂id
            end_time:''//
        },
           tableData:[],
           tableColumns:[
               {title:'序号',type:'index',align:'center',minWidth:80},
               {title:'项目编码',align:'center',minWidth:120,key:'order_no'},
               {title:'项目名称',align:'center',minWidth:120,key:'project_title'},
               {title:'项目地址',align:'center',minWidth:150,key:'project_address'},
               {title:'联系人',align:'center',minWidth:100,key:'connect_person'},
               {title:'联系电话',align:'center',minWidth:130,key:'connect_phone'},
               {title:'项目阶段',align:'center',minWidth:100,key:'phase',render:(h,params)=>{
                   const {row} = params;
                   const text = this.agreementList.filter(v=>{
                       return row.phase.split(',').indexOf(v.id.toString())>=0
                   })
                   let val = []
                   text.forEach(element => {
                       val.push(element.title)
                   });
                   return h('span',{},val.toString());
               }},
               {title:'项目日期',align:'center',minWidth:120,key:'project_date',render:(h,params)=>{
                   const {row} = params;
                   return h('span',{},this.func.replaceDateNoHMS(row.project_date))
               }},
               {title:'客户名称',align:'center',minWidth:100,key:'customer'},
               {title:'紧急程度',align:'center',minWidth:100,key:'warning_state',render:(h,params)=>{
                   const {row} = params;
                   const text = row.warning_state==1?'普通':row.warning_state==2?'紧急':'非常紧急';
                   return h('span',{},text);
               }},
               {title:'金螳螂ID',align:'center',minWidth:120,key:'customer_id'},
               {title:'合同金额',align:'center',minWidth:120,key:'agreement_price'},
               {title:'核量金额',align:'center',minWidth:120,key:'quantity_price'},
               {title:'备注',align:'center',minWidth:150,key:'remark'},
               {title:'操作',align:'center',minWidth:250,key:'set',slot:"set", fixed: 'right'},
           ]
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        search(row){
               this.proxyData = row;
               this.initData(row);
        },
        goAdd(type,row){
            //1 新增 2 编辑 3 变更 4 详情 
            switch(type){
                case 1:
                    this.$router.push({path:'/cms/Agreement/edit',query:{type}})
                    break;
                case 2:
                    
                case 3:
                   
                case 4:
                    this.$router.push({path:'/cms/Agreement/edit',query:{type,order_no:row.order_no}})
                    break;
                case 5:
                     this.confirmDelete({
                   title:'删除确认?',
                   content:"是否确定删除?",
                   then: ()=>{
                        this.axios.post('/api/contract_del',{order_no:row.order_no}).then(res=>{
                        if(res.code==200){
                            this.$Message.success(res.msg);
                            this.initData();
                        }
                    })
                   }
                     })
                   
                    break;
            }
          
        },
        initData(row){
           let data = [];
            if(row){
                data = JSON.parse(JSON.stringify(row));
               data.start_time = data.start_time?Date.parse(data.start_time).toString().slice(0,10):'';
               data.end_time = data.end_time?Date.parse(data.end_time).toString().slice(0,10):'';
            }
             this.axios.post('/api/contract_list',{...data}).then(res=>{
                 this.tableData = res.data.data;
                 this.total = res.data.total
             })
        },
        changePage(e){
            this.pageIndex = e;
            this.initData(this.proxyData)
        },
        changeSize(e){
            this.pageIndex = 1;
            this.pageSize = e;
             this.initData(this.proxyData)
        }

    },
      beforeRouteLeave(to, from, next) {
    if (
      to.path == "/cms/Agreement/edit"
    ) {
      next();
    } else {
      from.meta.keepAlive = false;
      next();
    }
      }
}
</script>
<style lang="scss" scoped>
.search_form{
    display: flex;
    flex-wrap: wrap;
}
.table_top{
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}
.content_body_page{
    text-align: center;
    margin-top: 10px;
}
.form_item{
    width:200px
}
</style>