优化

MrShi

昨天 4eac422e52a4d28fb651b75d0f054697c7a2c0fa

 admin/src/components/business/OperaCouponGoodsWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,248 @@
<template>
  <GlobalWindow
    :title="title"
    width="100%"
    :visible.sync="visible"
    @confirm="confirm"
  >
    <TableLayout>
      <!-- æœç´¢è¡¨å• -->
      <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" style="display: block;" >
        <el-form-item label="" prop="name" label-width="5px" style="display: inline-block;margin-right: 30px;">
          <el-input v-model="searchForm.name" style="width: 150px;" placeholder="商品名称" clearable @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="" prop="categoryId" label-width="5px" style="display: inline-block;margin-right: 30px;" >
          <el-select v-model="searchForm.categoryId" placeholder="所属分类"    clearable style="width: 150px;"  >
            <el-option  v-for="item in labels"  :key="item.id" :value="item.id"  :label="item.name" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="brandId" label-width="5px" style="display: inline-block">
          <el-select  v-model="searchForm.brandId"  placeholder="所属品牌"  style="width: 150px;"   >
            <el-option  v-for="item in brands"   :key="item.id"   :value="item.id"  :label="item.name"    clearable ></el-option>
          </el-select>
        </el-form-item>
        <section>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </section>
      </el-form>
      <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
      <template v-slot:table-wrap>
        <div :style="'display: flex;height:'+tabelHeight+'px;'">
          <div style="flex: 6;">
            <ul class="toolbar">
              <li><el-button type="primary"  icon="el-icon-plus"  @click="addAll()" :disabled="!(tableData.selectedRows &&  tableData.selectedRows.length)">批量添加</el-button></li>
            </ul>
          <el-table
              ref="singleTable"
              :height="tabelHeight-80"
              v-loading="isWorking.search"
              :data="tableData.list"
              stripe
              border
              @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"  :selectable="checkSelectable" width="55"></el-table-column>
            <el-table-column prop="imgurl" label="列表图" min-width="70px">
              <template slot-scope="{row}">
                <el-image style="width: 50px;height: 50px;" v-if="row.imgurl && row.imgurl!=''" :src="row.resourcePath+row.imgurl" :preview-src-list="[row.resourcePath+row.imgurl]"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="商品ID"   ></el-table-column>
            <el-table-column prop="name" label="商品名称"   show-overflow-tooltip></el-table-column>
            <el-table-column prop="categoryName" label="所属分类"  ></el-table-column>
            <el-table-column prop="brandName" label="所属品牌"  ></el-table-column>
            <el-table-column prop="price" label="展示价格"  ></el-table-column>
            <el-table-column prop="skuPrice" label="零售价(元)" ></el-table-column>
            <el-table-column  label="操作"   align="center" min-width="80px"   fixed="right"  >
              <template slot-scope="{ row }">
                <el-button style="color: red"  v-if="row.tabStatus === 2" type="text" icon="el-icon-delete" @click="delItem(row)">移除</el-button>
                <el-button v-else type="text" icon="el-icon-plus" @click="add(row)">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              :pagination="tableData.pagination"
          >
          </pagination>
          </div>
          <div  style="flex: 2;margin-left: 20px;border: 1px solid #f2f2f2;padding: 10px;font-size: 12px;">
              <div style="display: flex;">
                <div style="flex: 6"> <span>已选择<i class="blue" style="margin: 0 10px">{{selectGoods.length||0}}</i>件商品</span></div>
                <div style="flex: 1;text-align: right"> <el-button size="mini" type="danger" class="blue" @click="cleanAll">清空</el-button></div>
              </div>
              <div :style="`display: flex;flex-direction: column;max-height: ${tabelHeight-80}px;overflow: auto`">
                <div  v-for="(item,index) in selectGoods" style="display: flex;margin: 10px 0;" :key="'selGoods'+item.id">
                  <div style="flex: 6">{{item.name}}<br><span class="red">ï¿¥{{item.skuPrice || 0}}</span></div>
                  <div style="flex: 1;text-align: right;">
                    <el-button class="blue" style="border: none;color: red" icon="el-icon-delete" @click="del(item,index)"></el-button>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </template>
    </TableLayout>
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseTable from '@/components/base/BaseTable'
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import { findAll as labelList } from '@/api/business/labels'
export default {
  name: 'OperaCouponGoodsWindow',
  extends: BaseTable,
  components: { GlobalWindow, TableLayout, Pagination },
  data () {
    return {
      title: '',
      visible: false,
      // æœç´¢
      searchForm: {
        id: '',
        bindShopId: ''
      },
      shops: []
    }
  },
  created () {
    this.config({
      module: '商品信息表',
      api: '/business/goods',
      'field.id': 'id',
      'field.main': 'id'
    })
    labelList({
      type: 0 // å•†å“åˆ†ç±»
    }).then(res => {
      this.labels = res
    })
    labelList({
      type: 1 // å•†å“å“ç‰Œ
    })
      .then(res => {
        this.brands = res
      })
    this.handleResize()
  },
  methods: {
    handleResize(){
      this.tabelHeight = window.innerHeight - 300
    },
    checkSelectable (row) {
      return row.tabStatus !== 2
    },
    addAll () {
      if (this.tableData.selectedRows && this.tableData.selectedRows.length) {
        this.tableData.selectedRows.forEach(item => {
          this.add(item)
        })
        this.$nextTick(() => {
          if (this.$refs.singleTable) {
            this.$refs.singleTable.clearSelection()
          }
        })
      }
    },
    cleanAll () {
      this.selectGoods = []
      this.tableData.list.forEach(item => {
        item.tabStatus = 1
      })
      this.$nextTick(() => {
        if (this.$refs.singleTable) {
          this.$refs.singleTable.clearSelection()
        }
      })
    },
    add (row) {
      var add = true
      row.tabStatus = 2
      console.log(this.tableData.list)
      this.selectGoods.forEach(item => {
        if (item.id === row.id) {
          add = false
        }
      })
      if (add) {
        this.selectGoods.push(row)
      }
    },
    del (row, index) {
      this.selectGoods.splice(index, 1)
      this.tableData.list.forEach(item => {
        if (item.id === row.id) {
          item.tabStatus = 1
        }
      })
    },
    delItem (delItem) {
      this.selectGoods.forEach((item, index) => {
        if (item.id === delItem.id) {
          this.del(item, index)
        }
      })
    },
    confirm () {
      this.$emit('success', this.selectGoods)
      this.visible = false
    },
    open (title, goods) {
      this.title = title
      this.visible = true
      this.cleanAll()
      if (goods && goods.length) {
        goods.forEach(item => {
          this.selectGoods.push(item)
        })
      }
      this.search()
    },
    handlePageChange (pageIndex) {
      this.__checkApi()
      this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
      this.isWorking.search = true
      this.api.fetchList({
        page: this.tableData.pagination.pageIndex,
        capacity: this.tableData.pagination.pageSize,
        model: this.searchForm,
        sorts: this.tableData.sorts
      })
        .then(data => {
          this.tableData.list = data.records || []
          this.tableData.pagination.total = data.total
          this.tableData.list.forEach(item => {
            item.tabStatus = 1
            this.selectGoods.forEach(row => {
              if (item.id === row.id) {
                item.tabStatus = 2
              }
            })
          })
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.search = false
        })
    },
    goPriceSet (row) {

    },
    handleClick (val) {
    }
  }
}
</script>
<style scoped>
.table-pagination{
  position: fixed !important;
  bottom: 50px;
}
</style>