jf-frock/src/views/leadMatch/roomList/BSTlist.vue

<template>
  <div>
    <Toptitle title="房间列表">
      <slot name="titleButton"> </slot>
    </Toptitle>
    <div class="weight_memo_content">
      <div>
        <Topsearch :list="list" @init="initData" @searchData="searchData" />
      </div>
      <div
        style="
          text-align: right;
          margin: 10px;
          border-top: 1px solid #f4f4f4;
          padding-top: 10px;
        "
      >
        <Button type="primary" size="small" style="margin-right: 10px" @click="gotoPage(3)"
          >新增</Button
        >
      </div>
      <Table :columns="tableColumns" border :data="tableData">
        <template slot="make_data" slot-scope="{row}">
          <span>{{func.replaceDate(row.crt_time)}}</span>
        </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 {
      list: [
        {
          title: "项目编号",
          name: "Input",
          value: "",
          placeholder: "请输入项目编号",
          serverName: "project_number",
        },
        {
          title: "项目名称",
          name: "Input",
          value: "",
          placeholder: "请输入项目名称",
          serverName: "project_name",
        },
        {
          title: "项目简称",
          name: "Input",
          value: "",
          placeholder: "请输入项目简称",
          serverName: "abbreviation",
        },
        // {
        //   title: "匹配状态",
        //   name: "Select",
        //   value: "",
        //   placeholder: "请选择",
        //   serverName: "state",
        //   option: [
        //     { label: "匹配完成", value: 2 },
        //     { label: "未匹配", value: 0 },
        //      { label: "匹配中", value: 1 },
        //   ]
        // },
      ],
      tableColumns: [
        { title: "项目编码", key: "project_number", align: "center", resizable: true,
                        width: 350},
        { title: "项目名称", key: "project_name", align: "center", resizable: true,
                        width: 350},
        { title: "项目简称", key: "abbreviation", align: "center",resizable: true,
                        width: 350},
        // { title: "匹配状态", key: "state", align: "center", minWidth: 140 ,
        // render:(h,params)=>{
        //   return h('span',{},params.row.state===0?'未匹配':params.row.state===2?'匹配完成':'匹配中')
        // }},
        { title: "制单日期", key: "make_data", align: "center", resizable: true,
                        width: 350 ,slot:"make_data"},
        { title: "操作", key:'',align: "center", minWidth: 150 , 
         render: (h, params) => {
                            return h('div', [
                                h('a', { style: {
                                        marginRight: '5px'
                                    }, on: {
                                        click: () => {
                                            this.gotoPage(1,params.row)
                                        }
                                    }
                                    }, '编辑'),
                                h('a', { style: {
                                        marginRight: '5px'
                                    }, on: {
                                        click: () => {
                                            this.gotoPage(2,params.row)
                                        }
                                    }
                                    }, '查看'),
                                h('a',{ style: {
                                        marginRight: '5px'
                                    }, on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }},'删除')
                            ]);
                        }},
      ],
      tableData: [],
      pageIndex: JSON.parse(localStorage.getItem("pageIndex")) || 1,
      pageSize: JSON.parse(localStorage.getItem("pageSize")) || 10,
      total: 0,
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
    if (localStorage.getItem("searchList")) {
      this.$nextTick(() => {
        this.initData(JSON.parse(localStorage.getItem("searchList")));
      });
    }
  },
  methods: {
    searchData(){
      this.pageIndex = 1;
      this.pageSize = 10;
      let row = {};
      this.list.forEach((e) => {
        if (e.serverName == "project_number") {
          this.$set(row, "project_number", e.value);
        }
        if (e.serverName == "project_name") {
          this.$set(row, "project_name", e.value);
        }
        if (e.serverName == "abbreviation") {
          this.$set(row, "abbreviation", e.value);
        }
        // this.$set(对象, key, 数组);
      });
      localStorage.setItem("searchList", JSON.stringify(row));
      this.initData(row);
    },
    initData(row) {
      console.log(row)
      this.axios.get('/api/cut_order_list',{params:{
        page_index:this.pageIndex,
        page_size:this.pageSize,
        order_type:2,
        ...row
        }}).then(res=>{
        this.tableData = res.data.data;
        this.total = res.data.total;
      })
    },
    del(row){
           this.confirmDelete({
                content:'是否删除？',
                title:'房间删除',
                type:'primary',
                then:()=>{
                      this.axios.post('/api/cut_order_delete',{cut_order_id:row.id,order_type:2}).then(()=>{
            this.initData()
          })
                },
                cancel:()=>{}
            })
         
    },
    gotoPage(type,row){
      localStorage.setItem("list", JSON.stringify(this.list));
      localStorage.setItem("pageSize", this.pageSize);
      localStorage.setItem("pageIndex", this.pageIndex);
      //1 编辑 2 查看 3 新增
      switch(type){
        case 1:
          case 2:this.$router.push({ path: '/cms/leadMatch/roomList/BSTedit', query: { type:type,cut_order_id:row.id} });
          break
          case 3:this.$router.push({ path: '/cms/leadMatch/roomList/BSTedit', query: { type:type} });
          break
      }
    },
    changeSize (e) {
      this.pageSize = e;
        if (localStorage.getItem("searchList")) {
        this.initData(JSON.parse(localStorage.getItem("searchList")));
      }else{
        this.initData()
      } 
    },
     changePage (e) {
      this.pageIndex = e;
        if (localStorage.getItem("searchList")) {
        this.initData(JSON.parse(localStorage.getItem("searchList")));
      }else{
        this.initData()
      } 
    },
  },
};
</script>
<style scoped lang='scss'>
.weight_memo_content{
    height: 80%;
    overflow: auto;
}
.content_body_page{
    margin-top: 10px;
    text-align: center;
}
</style>