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

<template>
    <div>
        <Toptitle title="深化单列表"></Toptitle>
        <div class="content">
        <Form :label-width='120' class="form_content">
            <FormItem label='金螳螂ID：'>
                <Input clearable v-model="searchData.jtl_id"/>
            </FormItem>
            <FormItem label='项目编码：'>
                <Input clearable v-model="searchData.order_no"/>
            </FormItem>
            <FormItem label='项目名称：'>
                <Input clearable v-model="searchData.project_title"/>
            </FormItem>
            <FormItem label='项目简称：'>
                <Input clearable v-model="searchData.abbreviation"/>
            </FormItem>
            <FormItem :label-width='40'>
                <Button type="primary" @click="initData(searchData)">搜索</Button>
            </FormItem>
        </Form>
        <div class="before_table">
            <Button type="primary" @click="handleSet(1,null)">新增</Button>
        </div>
        <Table :data='tableData' :columns='tableColumns' border max-height='550'>
            <template slot="set" slot-scope="{row}">
                <a @click="handleSet(2,row)" style="margin-right:10px">编辑</a>
                <a @click="handleSet(3,row)" style="margin-right:10px">查看</a>
                <a @click="handleSet(4,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{
            pageIndex:1,
            pageSize:10,
            total:0,
            tableData:[],
            tableColumns:[
                {title:'金螳螂ID',align:'center',minWidth:120,key:'jtl_id'},
                {title:'项目编号',align:'center',minWidth:120,key:'order_no'},
                {title:'项目名称',align:'center',minWidth:120,key:'project_title'},
                {title:'项目简称',align:'center',minWidth:120,key:'abbreviation'},
                {title:'操作',align:'center',minWidth:120,key:'set',slot:'set'}
            ],
               searchData:{
                   jtl_id:'',
                   order_no:'',
                   project_title:'',
                   abbreviation:'',
               }
        }
    },
    mounted(){
           this.initData();
    },
    methods:{
        initData(row){

         this.axios.post('/api/contract_deep_list',{...row,page_size:this.pageSize,page_index:this.pageIndex}).then(res=>{
             this.tableData = res.data.data;
             this.total = res.data.total;
         })
        },
        changePage(e){
          this.pageIndex = e;
          this.initData(this.searchData);
        },
        changeSize(e){
            this.pageIndex = 1;
            this.pageSize = e;
            this.initData(this.searchData);
        },
        handleSet(type,row){
            //type 1新增 2编辑 3查看 4删除
            switch(type){
                case 1:
                   this.$router.push({path:'/cms/Agreement/deepen/edit',query:{type}})
                    break;
                case 2:
                case 3:
                    this.$router.push({path:'/cms/Agreement/deepen/edit',query:{type,order_no:row.order_no}})
                    break;
                case 4:
                       this.confirmDelete({
        content: '确认删除么？',
        then: () => {
          this.axios.post('/api/contract_deep_del', { order_no: row.order_no}).then(res => {
            if (res.code == 200) {
              this.$Message.success(res.msg)
              this.initData(this.searchData)
            }
          })
        }
      })
                    break;
            }
        }
    },
    beforeRouteLeave(to, from, next) {
      if (
        to.path == "/cms/Agreement/deepen/edit"
      ) {
        next();
      } else {
        from.meta.keepAlive = false;
        next();
      }
    }
}
</script>
<style lang="scss" scoped>
.content{
    height:85%;
    overflow: auto;
}
.form_content{
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
}
.before_table{
    display: flex;
    flex-direction: row-reverse;
    margin-bottom:10px;
}
.content_body_page{
    text-align: center;
    margin-top:10px;
}
</style>