优化

MrShi

昨天 4eac422e52a4d28fb651b75d0f054697c7a2c0fa

 admin/src/components/business/OperaShopGoodsWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,217 @@
<template>
  <GlobalWindow
    :title="title"
    width="80%"
    :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;">
          <el-input v-model="searchForm.name" placeholder="请输入名称" @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="" prop="code" style="display: inline-block;margin-right: 30px;">
          <el-input v-model="searchForm.code" placeholder="请输入门店ID" @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="" prop="saleType" style="display: inline-block;margin-right: 30px;">
          <!-- 0正常 1禁用 -->
          <el-select     v-model="searchForm.saleType"  placeholder="销售模式"  @change="search"  >
            <el-option  :key="0" :value="0"  label="平台铺货"  ></el-option>
            <el-option   :key="1" :value="1" label="自主采购"  ></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"  placeholder="请选择状态"    @change="search"   >
            <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>
        <div :style="'display: flex;height:'+tabelHeight+'px;'">
          <el-table
              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="name" label="名称" fixed align="center" min-width="100px">  </el-table-column>
            <el-table-column prop="code" label="门店ID" align="center" min-width="100px"></el-table-column>
            <el-table-column prop="bigAreaName" label="所属区域" align="center" min-width="100px"></el-table-column>
            <el-table-column prop="areaFullName" label="省市区" align="center" min-width="150px" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span v-if="row.areas!=null">{{(row.areas.provinceName||'') + (row.areas.cityName||'') + (row.areas.name||'')}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="saleType"  label="销售模式" align="center" min-width="150px">
              <template slot-scope="{row}">
                {{ row.saleType == 1?'自主采购':'平台铺货'}}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center" min-width="100px" fixed="right">
              <template slot-scope="{row}">
                {{ row.status == 1?'禁用':'正常'}}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="销售价" align="center" min-width="100px" fixed="right">
                {{ price}}
            </el-table-column>
            <el-table-column prop="goodsPrice" label="供货价" align="center" min-width="100px" fixed="right">
              <template slot-scope="scope">
                <el-input v-if="scope.row.isPriceSelected" v-model="scope.row.goodsPrice"
                          @focus="focusEvent(scope.row,scope.$index,scope.column)"
                          @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                <p style="cursor: pointer" class="blue" title="点击编辑" @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.goodsPrice || '未设置' }}</p>
              </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'
export default {
  name: 'OperaShopGoodsWindow',
  extends: BaseTable,
  components: { GlobalWindow, TableLayout, Pagination },
  data () {
    return {
      activeName: 'first',
      title: '',
      price : null,
      visible: false,
      tabelHeight: null,
      // æœç´¢
      searchForm: {
        name: '',
        goodsId: null,
        username: '',
        status: '',
        saleType: '',
        isrec: ''
      }
    }
  },
  mounted () {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  created () {
    this.config({
      module: '商品信息表',
      api: '/business/shop',
      'field.id': 'id',
      'field.main': 'id'
    })
    this.handleResize()
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  methods: {
    handleResize () {
      this.tabelHeight = window.innerHeight - 300
    },
    open (title, goods) {
      this.title = title
      this.visible = true
      this.price = goods.skuPrice
      this.searchForm.goodsId = goods.id
      this.search()
    },
    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.oldGoodsPrice = row.goodsPrice
    },
    blurEvent (row, curIndex, column) {
      if(this.price <= row.goodsPrice) {
        this.$tip.error('供货价不能大于销售价')
        row.isPriceSelected = !row.isPriceSelected
        row.goodsPrice = row.oldGoodsPrice// ä»·æ ¼è¿˜åŽŸ
        return
      }
      if( row.goodsPrice == row.oldGoodsPrice){
        row.isPriceSelected = !row.isPriceSelected
        return;
      }
      this.api.setGoodsPrice({
        id: row.id,
        goodsId: this.searchForm.goodsId,
        goodsPrice: row.goodsPrice
      }).then(res => {
        row.oldGoodsPrice = row.goodsPrice
        this.$tip.success('修改成功')
        this.$emit('success')
      }).catch(e => {
        row.goodsPrice = row.oldGoodsPrice// ä»·æ ¼è¿˜åŽŸ
      }).finally(() => {
        row.isPriceSelected = !row.isPriceSelected
      })
    },
    handleClick (val) {
    }
  }
}
</script>
<style scoped>
.table-pagination{
  position: fixed !important;
  bottom: 50px;
}
</style>