BST_bigScreen/src/views/leadMatch/roomList/list.vue

<template>
  <div>
    <Toptitle title="房间列表">
      <slot name="titleButton"> </slot>
    </Toptitle>
    <div class="weight_memo_content">
      <div>
        <Topsearch :list="list" @init="initData" @searchData="initData" />
      </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", minWidth: 140 },
        { title: "项目名称", key: "project_name", align: "center", minWidth: 140 },
        { title: "项目简称", key: "abbreviation", align: "center", minWidth: 140 },
        { 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", minWidth: 140 ,slot:"make_data"},
        { title: "操作", key:'',align: "center", minWidth: 140 , 
         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: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    initData(row) {
      console.log(row)
      this.axios.get('/api/cut_order_list',{params:{
        page_index:this.pageIndex,
        page_size:this.pageSize,
        ...row
        }}).then(res=>{
        this.tableData = res.data.data;
        this.total = res.data.total;
      })
    },
    del(row){
      console.log(row)
          this.axios.post('/api/cut_order_delete',{cut_order_id:row.id,order_type:2}).then(()=>{
            this.initData()
          })
    },
    gotoPage(type,row){
      //1 编辑 2 查看 3 新增
      switch(type){
        case 1:
          case 2:this.$router.push({ path: '/cms/leadMatch/roomList/edit', query: { type:type,cut_order_id:row.id} });
          break
          case 3:this.$router.push({ path: '/cms/leadMatch/roomList/edit', query: { type:type} });
          break
      }
    },
    changeSize (e) {
      this.pageSize = e;
      this.initData()
    },
     changePage (e) {
      this.pageIndex = e;
      this.initData()
    },
  },
};
</script>
<style scoped lang='scss'>
.weight_memo_content{
    height: 650px;
    overflow: auto;
}
.content_body_page{
    margin-top: 10px;
    text-align: center;
}
</style>