优化

MrShi

昨天 4eac422e52a4d28fb651b75d0f054697c7a2c0fa

 admin/src/components/business/OperaGoodsShopWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,301 @@
<template>
  <GlobalWindow
      :title="title"
      width="100%"
      :visible.sync="visible"
  >
    <TableLayout >
      <!-- æœç´¢è¡¨å• -->
      <el-form ref="searchForm" slot="search-form" :model="searchForm"  label-width="10px" style="display: block;" >
        <el-form-item label="" prop="name" style="display: inline-block;margin-right: 30px;width: 180px">
          <el-input v-model="searchForm.name" placeholder="商品名称" @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="" prop="id" style="display: inline-block;margin-right: 30px;;width: 180px">
          <el-input v-model="searchForm.id" placeholder="商品ID" @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="" prop="categoryId" style="display: inline-block;margin-right: 30px;">
          <!-- 0正常 1禁用 -->
          <el-select
              v-model="searchForm.categoryId"
              style="width: 120px"
              placeholder="所属分类"
              clearable
              @change="search"
          >
            <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" style="display: inline-block;margin-right: 30px;">
          <!-- 0正常 1禁用 -->
          <el-select
              v-model="searchForm.brandId"
              style="width: 120px"
              placeholder="所属品牌"
              clearable
              @change="search"
          >
            <el-option
                v-for="item in brands"
                :key="item.id"
                :value="item.id"
                :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="status" style="display: inline-block;margin-right: 30px;">
          <!-- 0正常 1禁用 -->
          <el-select
              v-model="searchForm.status"
              style="width: 120px"
              @change="search"
              clearable
              placeholder="上下架状态"
          >
            <el-option :key="0" :value="0" label="上架"></el-option>
            <el-option :key="1" :value="1" label="下架"></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>
<!--        <ul class="toolbar" >
          <li><el-button type="primary" icon="el-icon-plus" @click="setPriceBatch"  >批量定价</el-button></li>
        </ul>-->
        <div :style="'display: flex;height:'+tabelHeight+'px;'">
        <el-table
            :height="tabelHeight"
            v-loading="isWorking.search"
            :data="tableData.list"
            stripe
            border
            @selection-change="handleSelectionChange"
        >
<!--
          <el-table-column type="selection" width="55"></el-table-column>
-->
          <el-table-column prop="imgurl" label="商品信息" min-width="80px">
            <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" min-width="120px" ></el-table-column>
          <el-table-column prop="name" label="商品名称" min-width="180px" show-overflow-tooltip></el-table-column>
          <el-table-column prop="categoryName" label="所属分类" min-width="120px"></el-table-column>
          <el-table-column prop="brandName" label="所属品牌" min-width="120px"></el-table-column>
          <el-table-column prop="stockNum" label="剩余库存量" min-width="100px"></el-table-column>
          <el-table-column prop="status" label="上下架状态" min-width="100px"   align="center">
            <template slot-scope="{row}">
              <span  v-if="row.status ==1" class="red">已下架</span>
              <span v-else class="green">已上架</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="展示价格" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="skuPrice" label="销售价(元)"  fixed="right" min-width="100px" align="center">
            <template slot-scope="{row}">
              <span  class="orange">{{ row.skuPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shopPrice" label="供货价(元)" align="center" min-width="100px" fixed="right">
            <template slot-scope="scope">
              <el-input v-if="scope.row.isPriceSelected" v-model="scope.row.shopPrice"
                        @focus="focusEvent(scope.row,scope.$index,scope.column)"
                        @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
              <p :style="'cursor: pointer;'+((scope.row.skuPrice||0) <= (scope.row.shopPrice||0)?'color: red':'')+';'" class="blue" title="点击编辑" @click="cellClick(scope.row, scope.column)" v-else>
                {{scope.row.shopPrice || '未设置' }}
                <i v-if="(scope.row.skuPrice||0) <= (scope.row.shopPrice||0)" class="el-icon-warning" style="color: red"></i>
              </p>
            </template>
          </el-table-column>
<!--          <el-table-column
              label="操作"
              min-width="160"
              fixed="right"
          >
            <template slot-scope="{row}">
              <el-button type="text" v-permissions="['business:goods:update']" @click="setPrice(row)">设置价格</el-button>
            </template>
          </el-table-column>-->
        </el-table>
        <pagination
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :pagination="tableData.pagination"
        >
        </pagination>
        </div>
      </template>
    </TableLayout>
    <template  v-slot:footer>
      <el-button @click="visible=false">返回</el-button>
    </template>
  </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'
import { setGoodsPrice } from '@/api/business/shop'
export default {
  name: 'OperaShopGoodsWindow',
  extends: BaseTable,
  components: { GlobalWindow, TableLayout, Pagination },
  data () {
    return {
      title: '',
      price: null,
      visible: false,
      tabelHeight: null,
      // æœç´¢
      searchForm: {
        id: '',
        name: '',
        shopId: null,
        categoryId: '',
        brandId: '',
        // ç±»åž‹ 0平台商城 1咖豆商城 2咖啡计划商品
        type: '0', // å¹³å°å•†å“
        status: 0,
        labels: ''
      },
      labels: [],
      brands: []
    }
  },
  mounted () {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  created: function () {
    this.config({
      module: '商品信息表',
      api: '/business/goods',
      'field.id': 'id',
      'field.main': 'id'
    })
    this.handleResize()
    labelList({
      type: 0 // å•†å“åˆ†ç±»
    }).then(res => {
      this.labels = res
    })
    labelList({
      type: 1 // å•†å“å“ç‰Œ
    })
      .then(res => {
        this.brands = res
      })
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  methods: {
    setPrice (row) {
      if (row.skuPrice == null) {
        this.$tip.warning('请先设置商品销售价！')
        return
      }
      console.log(row)
    },
    setPriceBatch () {
    },
    handleResize () {
      this.tabelHeight = window.innerHeight - 400
    },
    open (title, info) {
      this.title = title
      this.visible = true
      this.searchForm.shopId = info.id
      this.search()
      this.handleResize()
    },
    handlePageChange: function (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 => {
          (data.records || []).forEach((item) => {
            item.isPriceSelected = false
          })
          this.tableData.list = data.records || []
          this.tableData.pagination.total = data.total
          console.log(this.tableData.list)
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.search = false
        })
    },
    cellClick (row, column) {
      row.isPriceSelected = !row.isPriceSelected
    },
    focusEvent (row, index, column) {
      row.oldShopsPrice = row.shopPrice
    },
    blurEvent (row, curIndex, column) {
      if ( !row.skuPrice) {
        this.$tip.error('商品销售价未设置！')
        row.isPriceSelected = !row.isPriceSelected
        row.shopPrice = row.oldShopsPrice// ä»·æ ¼è¿˜åŽŸ
        return
      }
      if (  row.skuPrice <= row.shopPrice) {
        this.$tip.error('供货价不能大于销售价')
        row.isPriceSelected = !row.isPriceSelected
        row.shopPrice = row.oldShopsPrice// ä»·æ ¼è¿˜åŽŸ
        return
      }
      if (row.shopPrice == row.oldShopsPrice) {
        row.isPriceSelected = !row.isPriceSelected
        return
      }
      setGoodsPrice({
        id: this.searchForm.shopId,
        goodsId: row.id,
        goodsPrice: row.shopPrice
      }).then(res => {
        row.oldShopsPrice = row.shopPrice
        this.$tip.success('修改成功')
        this.$emit('success')
      }).catch(e => {
        row.shopPrice = row.oldShopsPrice// ä»·æ ¼è¿˜åŽŸ
      }).finally(() => {
        row.isPriceSelected = !row.isPriceSelected
      })
    },
    handleClick (val) {
    }
  }
}
</script>
<style scoped>
.table-pagination{
  position: fixed !important;
  bottom: 50px;
}
</style>