PointsMall_Admin/src/views/product/productAdd/components/OilStationSelection.vue

<template>
  <div>
    <el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform"
             @submit.native.prevent inline>
      <el-form-item label="输入搜索">
        <el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称"
                  class="form_content_width"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="userSearchs">查询</el-button>
        <el-button type="primary" @click="submit">确定选择</el-button>
      </el-form-item>
    </el-form>
    <el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList"
              :row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14">
      <el-table-column type="selection" reserve-selection width="55">
      </el-table-column>
      <el-table-column label="油站名称" prop="siteName"></el-table-column>
      <el-table-column label="渠道" prop="channel"></el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
  </div>
</template>
<script>
import productApi from '@/api/product/productAttr.js'

export default {
  name: 'OilStationSelection',
  props: {
    OilStationSelectionList: {
      type: Array,
      default: () => []
    },
    selectAttrId: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      selectionList: [],
      loading: false,
      tableList: [],
      page: {
        'currentPage': 1,
        'pageSize': 10,
        'totalCount': 0,
        'params': {
          'siteName': ''
        }
      }
    }
  },
  watch: {
    OilStationSelectionList: {
      handler(n, o) {
        this.$refs.table.clearSelection()
        n.forEach(element => {
          this.$refs.table.toggleRowSelection(element)
        })
      },
      deep: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    submit() {
      this.$emit('submit', this.getSelectionList())
    },
    getSelectionList() {
      return this.selectionList
    },
    selectionChange(e) {
      this.selectionList = e
    },
    userSearchs() {
      this.getByPage()
    },
    isStrictPromise(value) {
      return !!value
        && typeof value === 'object'
        && typeof value.then === 'function'
        && typeof value.finally === 'function'
    },
    loadingFn(callback) {
      this.loading = true
      if (this.isStrictPromise(callback)) {
        callback.finally(() => {
          this.loading = false
        })
      }

    },
    getByPage() {
      this.loadingFn(productApi.getAllSites(this.page).then(res => {
        if (res.code === 20000) {
          this.tableList = res.data.list
          this.page.totalCount = parseInt(res.data.totalCount)

        } else {
          this.tableList = []
          this.page.totalCount = 0
        }
      }))
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getByPage()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getByPage()
    },
    del(e) {
      productApi.delete(e).then(res => {
        if (res.code == 20000) {
          this.$message.success('操作成功')
          this.handleCurrentChange()
        }
      })
    },
    edit(row) {
      let data = Object.assign({}, row, {
        name: this.selectAttrId.split('/')[1] || '',
        spec: [{
          value: row.attributeName,
          detail: row.attributeContent.split(',')
        }]
      })
      this.$parent.$parent.selection = [data]
      this.$parent.$parent.addAttr('typeUpdate')
    },
    init() {
      // this.getByPage();

      // if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) {
      //     this.page.params.typeId = this.selectAttrId.split("/")[0] || "";
      //     this.getByPage();
      // } else {
      //     this.$message.warning("初始化出错")
      // }
    }
  }
}
</script>

<style></style>