jf-frock/src/views/BidSystem/ContractList/BSTList.vue

<template>
  <div class="BidsList">
     <Toptitle title="工装订单">
      <slot name="titleButton">
         <Button type="primary" ghost style="margin-right:10px" @click="goDetailPage">统计报表</Button>
        <Button type="primary"
                style="margin-right:10px;"
           
                ghost>导入</Button>
      </slot>
    </Toptitle>
    <div style="height:84%;overflow:auto">
      <Form style="display:flex;flex-wrap:wrap;margin:10px 0" :label-width="80">
        <FormItem label='项目编码:'>
          <Input size="small" clearable v-model="searchData.order_no"></Input>
        </FormItem>
       <FormItem label="项目名称:">
         <Input size="small" clearable v-model="searchData.residential_name"></Input>
       </FormItem>
        <FormItem label="项目简称:">
          <Input size="small" clearable v-model="searchData.abbreviation"></Input>
        </FormItem>
         <FormItem label="制单日期:">
           <DatePicker type="date" placeholder="年/月/日" style="width: 130px" size='small' v-model="searchData.start_time"></DatePicker>
            ~
             <DatePicker type="date" placeholder="年/月/日" style="width: 130px" size='small'  v-model="searchData.end_time"></DatePicker>
         </FormItem>
        <FormItem>
          <Button
         type="primary"
         size='small'
         @click="init">
            搜索
          </Button>
        </FormItem>
      </Form>
      <Table 
        :data='tableData'
    :columns='tableColumns'
    border
      >
      <template slot="crt_time" slot-scope="{row}">
        <span>{{func.replaceDate(row.crt_time)}}</span>
        </template>
        <template slot="set" slot-scope="{row}"> 
          <a @click="goPageDetail(row,1)" style="margin-right:10px">编辑</a>
          <a @click="goPageDetail(row,2)" style="margin-right:10px">详情</a>
          <a @click="goPageDetail(row,3)">图号导入</a>
        </template>
        </Table>
    </div>
     <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>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  data() {
    // 这里存放数据
    return {
      pageSize:10,
      pageIndex:1,
      total:0,
         searchData:{
           order_no:'',
           residential_name:'',
           abbreviation:'',
           start_time:'',
         end_time:''},
         tableData:[],
        tableColumns:[
          {title:'项目编码',align:'center',key:'order_no',minWidth:80},
           {title:'项目名称',align:'center',key:'residential_name',minWidth:80},
            {title:'项目简称',align:'center',key:'abbreviation',minWidth:80},
             {title:'合同金额',align:'center',key:'contract_price',minWidth:80},
              {title:'核量金额',align:'center',key:'quantity_price',minWidth:80},
               {title:'制单日期',align:'center',key:'crt_time',minWidth:80,slot:'crt_time'},
                {title:'操作',align:'center',slot:'set',minWidth:80},
        ]
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getData();
  },
 methods:{
    goDetailPage(){
           this.$router.push({path:'/cms/BidSystem/ContractList/detailReport'})
        },
   init(){
      let data = [];
      data=JSON.parse(JSON.stringify(this.searchData));
      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.getData(data)
   },
   goPageDetail(row,type){
     switch(type){
       case 1:
         case 2:this.$router.push({path:'/cms/BidSystem/ContractList/edit',query:{order_no:row.order_no,type}})
         break;
         case 3:this.$router.push({path:'/cms/BidSystem/ContractList/urlLeading',query:{order_no:row.order_no,type}})
         break;
     }
         
   },
   changeSize(e){
        this.pageSize = e;
        this.getData();
   },
   changePage(e){
      this.pageIndex = e;
      this.getData();
   },
   getData(row){
     this.axios.get('/api/frock_list',{params:{...row,page_size:this.pageSize,page_index:this.pageIndex}}).then(res=>{
          this.tableData = res.data.data;
          this.total = res.data.total;
     })
   }
 },
  // 监听属性 类似于data概念
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.BidsList{
  margin-top: 10px;
  height: 100%;
}
</style>