aklast/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="操作" 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="">
                                操作该数据<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)">修改数据 </el-dropdown-item>
                                <el-dropdown-item command="del" @click.native="handleDel(scope.row.ID)"
                                                  v-show="permission.hasPermission(`shop/goods-delete`)">删除数据
                                </el-dropdown-item>
                                <el-dropdown-item command="goods-edit" @click.native="handleGoodUp(scope.row.ID)">商品上架 </el-dropdown-item>
                                 <el-dropdown-item command="goods-edit" @click.native="handleGoodDown(scope.row.ID)">商品下架 </el-dropdown-item>
                                <el-dropdown-item command="goods-edit" @click.native="handleEditShowGoodsTimes(scope.row)">商品限时 </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`)">商品添加
                </el-button>

                <el-button type="success" size="small" @click="handleExport" v-show="permission.hasPermission(`shop/goods-list-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="修改套餐" :visible.sync="dialogEditFormVisible">
            <el-form :model="form" label-width="250px" class="form-dialog" v-loading="dialogEditLoading">

                    <el-form-item label="商品名称">
                        <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="会员折扣">
                        <el-input v-model="form.sellDiscount"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型">
                      <el-checkbox  v-for="(value,index) in GiftTypeArr" v-model="value.checked" :key="index" v-show="(index%2)!=0">{{value.name}}</el-checkbox>
                    </el-form-item>
                    <el-form-item label="报单类型">
                      <el-radio-group v-model="form.reconsumeType">
                        <el-radio v-for="(value,index) in GiftTypeArr" :label="index" :key="index" v-show="(index%2)==0">{{value.name}}</el-radio>
                        <el-radio :label="null">无</el-radio>
                      </el-radio-group>
                    </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="PV分期">
<!--                      <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="商品编号">
                        <el-input v-model="form.goodsNo"></el-input>
                    </el-form-item>
                    <el-form-item label="单位">
                        <el-input v-model="form.unit"></el-input>
                    </el-form-item>
                    <el-form-item label="市场价格">
                        <el-input v-model="form.marketPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="销售价格" >
                        <el-input v-model="form.sellPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="价格PV">
                        <el-input v-model="form.pricePv"></el-input>
                    </el-form-item>
                    <el-form-item label="兑换积分" v-show="false">
                        <el-input v-model="form.point"></el-input>
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input v-model="form.storeNums"></el-input>
                    </el-form-item>
                    <el-form-item label="商品详情">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.content">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.sort"></el-input>
                    </el-form-item>

                    <el-form-item label="上传图片">
                       <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">取 消</el-button>
                <el-button type="primary" @click.native="handleEdit">修 改</el-button>
            </div>
        </el-dialog>

        <el-dialog title="商品限时" :visible.sync="dialogEditFormVisibleGoodsTimes">
            <el-form :model="form" label-width="250px" class="form-dialog" v-loading="dialogEditLoadingGoodsTimes">

                    <el-form-item label="是否限时">
                          <el-switch
                            v-model="form.statusdate"
                            active-value="1"
                            inactive-value="0">
                          </el-switch>
                    </el-form-item>
                    <transition name="el-zoom-in-top">
                    <el-form-item label="限时时间" v-show='form.statusdate==1?true:false'>
                            <el-date-picker
                              v-model="form.goodsdate"
                              type="datetime"
                              placeholder="选择日期时间"
                              value-format="timestamp"
                              popper-class='goodsdate'>
                            </el-date-picker>

                    </el-form-item>
                    </transition>
                    <transition name="el-zoom-in-top">
                    <el-form-item label="限时类型" v-show='form.statusdate==1?true:false'>

                         <el-radio v-model="form.goodsstatusdate" label="0" border>下架</el-radio>
                         <el-radio v-model="form.goodsstatusdate" label="1" border>上架</el-radio>
                    </el-form-item>
                    </transition>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditFormVisibleGoodsTimes = false">取 消</el-button>
                <el-button type="primary" @click.native="handleEdit">修 改</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} 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,
      dialogEditFormVisibleGoodsTimes: false,
      dialogEditLoadingGoodsTimes: false,
      pvSplitOptions: [
        {
          value: '0',
          label: 'No'
        },
        {
          value: '1',
          label: 'Yes'
        }],
      form: {
        sellType: [],
        goodsName: '',
        type: '',
        giftType: [],
        goodsNo: '',
        unit: '',
        marketPrice: '',
        sellPrice: '',
        pricePv: '',
        point: '',
        storeNums: '',
        content: '',
        sort: '',
        discount: '',
        cover: '',
        textarea: '',
        sellDiscount: '',
        pvSplit: '',
        statusdate: '',
        goodsstatusdate: '',
        goodsdate: '',
        reconsumeType: null
      },
      submitButtonStat: false,
      goodsType: [],
      GiftTypeArr: [],
      sell_type: [],
      img_show: true
    }
  },
  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 = tool.getLocaleLink(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

        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
              }
            })
          }
          for (let j in gift) {
            if (gift[j] % 2 != 0) {
              vueObj.form.reconsumeType = gift[j] - 1
            } else {
              vueObj.form.reconsumeType = null
            }
          }
        }
        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 = sellType

        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.CATE_ID
        vueObj.form.unit = response.goodsInfo.UNIT
        vueObj.form.marketPrice = response.goodsInfo.MARKET_PRICE
        vueObj.form.sellPrice = response.goodsInfo.SELL_PRICE
        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.statusdate = response.goodsInfo.STATUS_DATE
        vueObj.form.pvSplit = response.goodsInfo.PV_SPLIT
        vueObj.form.goodsstatusdate = response.goodsInfo.GOODS_STATUS_DATE
        vueObj.form.goodsdate = response.goodsInfo.GOODS_DATE * 1000
        // 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.getLocaleLink(response.goodsInfo.COVER, '/files/')

        this.$forceUpdate()
      })
    },
    /**
     * 2022-05-09
     * York
     * 限时商品
     */
    handleEditShowGoodsTimes (row) {
      this.dialogEditLoadingGoodsTimes = true
      this.auditId = row.ID
      this.dialogEditFormVisibleGoodsTimes = true
      let vueObj = this
      network.getData('shop/goods-edit', {id: this.auditId}).then(response => {
        vueObj.dialogEditLoadingGoodsTimes = false
        vueObj.goodsType = response.goodsType

        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 = sellType

        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.CATE_ID
        vueObj.form.unit = response.goodsInfo.UNIT
        vueObj.form.marketPrice = response.goodsInfo.MARKET_PRICE
        vueObj.form.sellPrice = response.goodsInfo.SELL_PRICE
        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.statusdate = response.goodsInfo.STATUS_DATE
        vueObj.form.goodsstatusdate = response.goodsInfo.GOODS_STATUS_DATE
        vueObj.form.goodsdate = response.goodsInfo.GOODS_DATE * 1000
        vueObj.form.coverOrigin = response.goodsInfo.COVER
        vueObj.form.cover = tool.getLocaleLink(response.goodsInfo.COVER, '/files/')

        this.$forceUpdate()
      })
    },

    handleEdit () {
      this.dialogEditFormVisible = false
      this.dialogEditFormVisibleGoodsTimes = false
      this.$message({
        message: '正在修改数据',
        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 && (index % 2 != 0)) {
          sen_gift.push(item.key)
        }
      })
      if (this.form.reconsumeType == 0 || this.form.reconsumeType == 2){ // 复消类型，单选
        sen_gift.push((this.form.reconsumeType + 1).toString())
      }
      this.form.giftType = sen_gift
      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('确定删除选定的数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        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 => {
        // console.log(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(`确定要导出当前数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return network.getData(`shop/goods-list-export`, this.filterModel)
      }).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
      }).catch(response => {

      })
    }
  }

}

</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>

<!-- <style>
  .goodsdate{
      top: 286px !important;
  }
</style> -->