ngds/backendEle/src/views/shop/index.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <div class="filter-box">
          <filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
      </div>
      <el-table class="table-box" ref="multipleTable" :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight()" @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="55" v-if="tableHeaders" :selectable="checkSelectable"></el-table-column>
        <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''" :prop="tableHeader.other.prop ? tableHeader.other.prop : null">
          <template slot-scope="scope">
            <template v-if="scope.row[tableHeader.index].other.tag" >
              <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
            </template>
            <template v-else>
              <div v-html="scope.row[tableHeader.index].value"></div>
            </template>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="Action" width="180"><!-- 操作 -->
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click" v-if="permission.hasPermission(`shop/goods-edit`) || permission.hasPermission(`shop/goods-delete`)">
              <el-button type="primary" size="small" @click.stop="">
                Action<!-- 操作该数据 --><i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="goods-edit" @click.native="handleEditShow(scope.row)">Edit<!-- 修改数据 --> </el-dropdown-item>
                <el-dropdown-item command="del" @click.native="handleDel(scope.row.ID)" v-show="permission.hasPermission(`shop/goods-delete`)">
                  Delete<!-- 删除数据 -->
                </el-dropdown-item>
                <el-dropdown-item command="goods-edit" @click.native="handleGoodUp(scope.row.ID)">On sale<!-- 商品上架 --> </el-dropdown-item>
                <el-dropdown-item command="goods-edit" @click.native="handleGoodDown(scope.row.ID)">Sold out<!-- 商品下架 --> </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <!--   <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="handleGroupManage(scope.row)" >
              状态管理
            </el-button>
          </template></el-table-column>-->
      </el-table>
      <div class="white-box-footer">

       <!-- <el-dropdown size="small" trigger="click">
            <el-button type="primary" size="small">
                所选数据<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="delete" @click.native="handleMuliDel()">上架</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>-->
        <el-button type="primary" size="small" @click="handlestate" icon="el-icon-plus" v-if="permission.hasPermission(`shop/goods-add`)">
          <!-- 商品添加 -->Add Product
        </el-button>

        <el-button type="success" size="small" @click="handleExport" v-show="permission.hasPermission(`shop/goods-list-export`)">Export Excel</el-button>
        <!-- <el-button-group>
          <el-button type="success" size="mini" @click.native="handleup(scope.row.ID)">上架</el-button>
          <el-button type="danger" size="mini">下架</el-button>
        </el-button-group> -->
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
    <el-dialog title="Edit Products" :visible.sync="dialogEditFormVisible"><!-- 修改商品 -->
      <el-form :model="form" label-width="250px" class="form-dialog" v-loading="dialogEditLoading">
        <el-form-item label="Product Name"><!-- 商品名称 -->
          <el-input v-model="form.goodsName"></el-input>
        </el-form-item>
          <!-- <el-form-item label="商品来源">
            <el-select v-model="form.type">
                <el-option v-for="(item,index) in goodsType" :key="index" :label="item.name"
                           :value="index"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="Member discount"><!-- 会员折扣 -->
            <el-input v-model="form.sellDiscount"></el-input>
          </el-form-item>
          <el-form-item label="Product type"><!-- 商品类型 -->
            <el-checkbox  v-for="(value,index) in GiftTypeArr" v-model="value.checked" :key="index" >{{value.name}}</el-checkbox>
          </el-form-item>
          <!-- <el-form-item label="复消购买方式">
             <el-checkbox  v-for="(value,index) in sell_type" v-model="value.checked" :key="index" >{{value.name}}</el-checkbox>
          </el-form-item> -->
          <el-form-item label="BV split">
<!--                      <el-checkbox v-model="form.pvSplit" :checked="form.pvSplit">Yes</el-checkbox>-->
            <el-select v-model="form.pvSplit" placeholder="">
              <el-option
                v-for="item in pvSplitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Product Category"> <!-- 商品分类 -->
            <el-select v-model="form.categoryType">
              <el-option v-for="item in categoryType" :key="item.id" :label="item.name" :value="item.id" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Product Code"><!-- 商品编号 -->
            <el-input v-model="form.goodsNo"></el-input>
          </el-form-item>
          <el-form-item label="Unit"><!-- 单位 -->
            <el-input v-model="form.unit"></el-input>
          </el-form-item>
          <el-form-item label="Tax Rate"><!-- 税率 -->
            <el-input v-model="form.taxRate">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="Member Price($)" p>
            <el-input v-model="form.sellPriceStandard"></el-input>
          </el-form-item>
          <el-form-item label="Member Price(₦)" p>
            <el-input v-model="form.sellPrice"></el-input>
          </el-form-item>
          <el-form-item label="Retail Price(₦)">
            <el-input v-model="form.marketPrice"></el-input>
          </el-form-item>
          <el-form-item label="Price BV" v-show="pvDisabled"> <!-- 价格BV -->
            <el-input v-model="form.pricePv"></el-input>
          </el-form-item>
<!--                    <el-form-item label="Exchange points" v-show="false"> &lt;!&ndash; 兑换积分 &ndash;&gt;-->
<!--                        <el-input v-model="form.point"></el-input>-->
<!--                    </el-form-item>-->
          <el-form-item label="Inventory"> <!-- 库存 -->
            <el-input v-model="form.storeNums"></el-input>
          </el-form-item>
          <el-form-item label="Product details"><!-- 商品详情 -->
            <el-input
              type="textarea"
              :rows="2"
              placeholder="Please enter the content"
              v-model="form.content">
            </el-input><!-- 请输入内容 -->
          </el-form-item>
          <el-form-item label="Order"> <!-- 排序 -->
            <el-input v-model="form.sort"></el-input>
          </el-form-item>

          <el-form-item label="Upload Images"> <!-- 上传图片 -->
            <div class='up_load'>
           <!-- <img v-if="form.cover&&img_show" :src="form.cover" alt=""> -->
              <leo-uploader
                  @on-success='upLoadSuccess'
                  :request-route="'shop/upload'"
                  ref='up_load'
                  :defaultImageUrl='form.cover'
              ></leo-uploader>
            </div>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditFormVisible = false">Cancel<!-- 取 消 --></el-button>
          <el-button type="primary" @click.native="handleEdit">Edit<!-- 修 改 --></el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import network from '@/utils/network'
import tool from '@/utils/tool'
import baseInfo from '@/utils/baseInfo'
import FilterUser from '../../components/FilterUser'
import permission from '@/utils/permission'
import Pagination from '@/components/Pagination'
import filterHelper from '@/utils/filterHelper'
import {FRONTEND_SERVER,SERVER_API_HTTP_TYPE,SERVER_API_DOMAIN,CDN_BASE_URL} from '@/utils/config'
import store from './../../utils/vuexStore'
import LeoUploader from '@/components/Uploader';
export default {
  name: 'index',
  components: {FilterUser, Pagination, LeoUploader},
  mounted () {
    this.getData()
    // this.$refs.up_load.successImageUrl='';
  },

  data () {
    return {
      tableHeaders: null,
      tableData: null,
      loading: true,
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      multipleSelection: [],
      tool: tool,
      permission: permission,
      baseDecLevels: baseInfo.decLevels(),
      baseEmpLevels: baseInfo.empLevels(),
      filterTypes: null,
      dialogVisible: false,
      dialogLoading: false,
      filterModel: {},
      value: [],
      selectedIds: '',
      dialogEditFormVisible: false,
      dialogEditLoading: false,
      pvSplitOptions: [
        {
          value: '0',
          label: 'No'
        },
        {
          value: '1',
          label: 'Yes'
        }],
      form: {
        // sellType: [],
        goodsName: '',
        type: '',
        giftType: [],
        goodsNo: '',
        unit: '',
        marketPrice: '',
        sellPrice: '',
        sellPriceStandard: '',
        pricePv: '',
        point: '',
        storeNums: '',
        content: '',
        sort: '',
        discount: '',
        cover: '',
        textarea: '',
        sellDiscount: '',
        pvSplit: '',
        categoryType: '',
        sellType: 1,
        taxRate: 0
      },
      submitButtonStat: false,
      goodsType: [],
      GiftTypeArr: [],
      sell_type: [],
      categoryType: [],
      img_show: true,
      pvDisabled: true,
      exchangeRate: baseInfo.exchangeRate()
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange (pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    handleFilterUser (filterData) {
      filterHelper.handleFilterUser(this, filterData)
    },
    checkSelectable (row) {
      return row.DONT_DEL !== '1'
    },
    handleFilter () {
      this.getData()
    },
    handlestate () {
      this.$router.push({path: `/shop/goods-add`})
    },
    upLoadSuccess (file) {
      // this.form.cover=file;
      this.form.cover = tool.getArImage(file, '/files/')
      this.form.coverOrigin = file
      this.img_show = false
    },
    handleEditShow (row) {
      this.dialogEditLoading = true
      this.auditId = row.ID
      this.dialogEditFormVisible = true
      let vueObj = this
      network.getData('shop/goods-edit', {id: this.auditId}).then(response => {
        vueObj.dialogEditLoading = false
        vueObj.goodsType = response.goodsType
        vueObj.categoryType = response.categoryType

        let gift = response.goodsInfo.GIFT_TYPE;
        let gift_type = response.giftType

        let giftType = []
        if (gift.length > 0) {
          for (let i in gift_type) {
            giftType.push({key: i, name: gift_type[i].name, checked: false})
            gift.map((v, k) => {
              if (v === i) {
                giftType[i - 1].checked = true
              }
            })
          }
        }
        vueObj.GiftTypeArr = giftType

        // let sell = response.goodsInfo.SELL_TYPE;
        // let sell_type = response.sellType;
        // let sellType=[];
        // if(sell.length>0){
        //     for(let i in sell_type){
        //         sellType.push({key:i,name:sell_type[i].name,checked:false})
        //         sell.map((item,index)=>{
        //             if(item==i){
        //                 sellType[i-1].checked=true;
        //             }
        //         })
        //     }
        // }
        vueObj.sell_type = response.goodsInfo.SELL_TYPE;
        vueObj.form.goodsName = response.goodsInfo.GOODS_NAME
        vueObj.form.sellDiscount = response.goodsInfo.SELL_DISCOUNT
        vueObj.form.goodsNo = response.goodsInfo.GOODS_NO
        vueObj.form.type = response.goodsInfo.TYPE
        vueObj.form.unit = response.goodsInfo.UNIT
        vueObj.form.marketPrice = response.goodsInfo.MARKET_PRICE
        vueObj.form.sellPrice = response.goodsInfo.SELL_PRICE
        vueObj.form.sellPriceStandard = response.goodsInfo.SELL_PRICE_STANDARD
        vueObj.form.pricePv = response.goodsInfo.PRICE_PV
        vueObj.form.point = response.goodsInfo.POINT
        vueObj.form.storeNums = response.goodsInfo.STORE_NUMS
        vueObj.form.content = response.goodsInfo.CONTENT
        vueObj.form.sort = response.goodsInfo.SORT
        vueObj.form.id = response.goodsInfo.ID
        vueObj.form.pvSplit = response.goodsInfo.PV_SPLIT
        // vueObj.form.cover = response.goodsInfo.COVER
        vueObj.form.categoryType = parseInt(response.goodsInfo.CATEGORY_TYPE)
        vueObj.form.taxRate = response.goodsInfo.TAX_RATE
        // vueObj.form.sellType=vueObj.form.sellType.map((item,index)=>{
        //   return response.goodsInfo.SELL_TYPE.some(val=>(index+1).toString()==val)
        //   })

        vueObj.form.coverOrigin = response.goodsInfo.COVER
        vueObj.form.cover = tool.getArImage(response.goodsInfo.COVER, '/files/')

        this.$forceUpdate()
      })
    },
    handleEdit () {
      this.dialogEditFormVisible = false
      this.$message({
        message: 'Modifying data', // 正在修改数据
        type: 'info'
      })
      let path = 'shop/goods-edit'

      // let sen_sell=[];
      // this.sell_type.map((item,index)=>{
      //     if(item.checked){
      //         sen_sell.push(item.key);
      //     }
      // })
      // this.form.sellType=sen_sell;

      let sen_gift = []
      this.GiftTypeArr.map((item, index) => {
        if (item.checked) {
          sen_gift.push(item.key)
        }
      })
      this.form.giftType = sen_gift
      this.form.sellType = 1
      this.form.cover = this.form.coverOrigin
      delete this.form.coverOrigin

      network.postData(path, {...this.form}).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.getData(this.currentPage, this.pageSize)
      }).catch(response => {
      })
    },

    handleDel (id = null) {
      let obj = this
      this.$confirm('Determine to delete the selected data？', 'Hint', { // '确定删除选定的数据？', '提示'
        confirmButtonText: 'Confirm', // 确定
        cancelButtonText: 'Cancel', // 取消
        type: 'warning'
      }).then(() => {
        let selectedIds = []
        if (id === null) {
          for (let val of obj.multipleSelection) {
            selectedIds.push(val.ID)
          }
        } else {
          selectedIds.push(id)
        }
        return network.postData(`shop/goods-delete`, {
          selected: selectedIds
        })
      }).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        obj.getData(obj.currentPage, obj.pageSize)
      }).catch(response => {

      })
    },
    getData (page, pageSize) {
      let filterData = this.filterModel
      /* this.allData = response */
      network.getPageData(this, 'shop/index', page, pageSize, this.filterModel, response => {
        this.filterTypes = response.filterTypes
      })
    },
    handleGoodUp (id) {
      console.log(id)
      network.postData('shop/goods-status', {selectedIds: id, status: 1})
        .then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.getData(this.currentPage, this.pageSize)
        })
    },
    handleGoodDown (id) {
      network.postData('shop/goods-status', {selectedIds: id, status: 0})
        .then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.getData(this.currentPage, this.pageSize)
        })
    },

    handleExport () {
      this.$confirm(`Determine to export the selected data？`, 'Hint', { // 确定要导出当前数据吗？`, '提示'
        confirmButtonText: 'Confirm', // 确定
        cancelButtonText: 'Cancel', // 取消
        type: 'warning'
      }).then(() => {
        return network.getData(`shop/goods-list-export`, this.filterModel)
      }).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
      }).catch(response => {

      })
    }
  },
  watch: {
    // 监听商品分类,控制PV是否展示
    'form.categoryType': {
      deep: true,
      handler (modern, origin) {
        this.pvDisabled = (parseInt(modern) === 1)
      }
    }
    // // 监听商品标准价格,自动计算销售价格
    // 'form.sellPriceStandard': {
    //     deep: true,
    //     handler(modern, origin) {
    //         this.form.sellPrice = modern * this.exchangeRate
    //     }
    // },
  }
}

</script>

<style scoped>
    .table-box .el-form-item__label {
        width: 100px;
        color: #99a9bf;
    }

    .table-box .el-form-item {
        width: 30%;
        margin-right: 0;
        margin-bottom: 0;
    }
</style>