yos_web/src/HManagement/siteManage/custom_option/modules/list.vue

<template>
  <div class="container normal-panel" >
    <tableLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true" :height="tableHieght" @rowClick="rowShow">
      <template v-slot:customcol="scope" >
        <p>{{scope.column.data[scope.column.columnname]}}</p>
      </template>
    </tableLayout>
    <div style="margin-top:16px;text-align:right">
      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="param.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import add from './add'
export default {
  data () {
    return {
      param:{
        "id": 20220901092401,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where":{
            "condition":""
          }
        }
      },
      tableHieght:560,
      tablecols:[],
      // optionmxlist:[],
      // expands: [],
      list:[],
      total:0,
      currentPage:0,
      row:[]
      // optiontypeid:0,
    }
  },
  components:{
    add
  },
  methods:{
    async queryOptions () {
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      this.$emit('rowShow',this.list[0])
      console.log(res)
    },
    rowShow(row){
      this.$emit('rowShow',row)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.queryOptions()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.queryOptions()
    },
    // async queryoptionmx (id) {
    //   const res = await this.$api.requested({
    //     "id": 20220901092501,
    //     "content": {
    //       "optiontypeid":id
    //     }
    //   })
    //   this.optionmxlist = res.data
    // },
    // getRowKeys: function (row) {
    //   return row.optiontypeid
    // },
    // handleExpandChange (row, expandedRows) {
    //   var that = this
    //   this.queryoptionmx(row.optiontypeid)
    //   this.optiontypeid = row.optiontypeid
    //   if (expandedRows.length) {
    //     that.expands = []
    //     if (row) {
    //       that.expands.push(row.optiontypeid)
    //     }
    //   } else {
    //     that.expands = []
    //   }
    // },
    // async deleteRow (item) {
    //   const res = await this.$api.requested({
    //     "id":20220901092701,
    //     "content": {
    //         "optiontypemxid": item.optiontypemxid
    //     }
    //   })
    //   this.tool.showMessage(res,()=>{
    //     this.queryoptionmx (this.optiontypeid)
    //   })
    // }
  },
  mounted () {
    this.queryOptions()
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).optiontTable.tablecols
  }
}

</script>
<style>
</style>