webapp / GreenwayWeb

<!--  -->
<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="pending">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商品管理</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">商品管理</span></div>
      </div>
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="商品状态">
            <el-radio-group
              v-model="formInline.shelveState"
              @change="changeState"
            >
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="0">已下架</el-radio-button>
              <el-radio-button label="1">已上架</el-radio-button>
              <el-radio-button label="2">待审核</el-radio-button>
              <el-radio-button label="3">审核失败</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <br>
          <el-form-item label="商品ID">
            <el-input
              v-model="formInline.productId"
              placeholder="请输入商品ID"
            />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input
              v-model="formInline.productName"
              placeholder="请输入商品名称"
            />
          </el-form-item>
          <el-form-item label="商户名称">
            <el-input
              v-model="formInline.shopName"
              placeholder="请输入商户名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button style="background-color: #3F9B6A;color: #fff" @click="search">查询</el-button>
            <el-button class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"  @click="clear">重置</el-button>
            <el-button style="background-color: #3F9B6A;color: #fff" @click="productDataExport">导出商品</el-button>
            <!-- <span
              v-for="(item, index) in btnList"
              :key="index"
              class="promissStyle"
            >
              <el-button type="success" plain @click="btnClick(item)">{{
                item.permissionName
              }}</el-button>
            </span> -->
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
         :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          tooltip-effect="dark"
        >
          <el-table-column
            prop="productId"
            label="商品id"
            show-overflow-tooltip
            width="80"
          />
          <el-table-column label="商品主图" width="150" align="center">
            <template slot-scope="scope">
              <img height="80" width="80" :src="$baseURL+msgList(scope.row.image)" alt srcset>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="180" />
          <el-table-column prop="shopName" label="商家名称" width="180" />
          <el-table-column
            prop="sectionPrice"
            label="售价区间"
            show-overflow-tooltip
          />
          <!-- <el-table-column
            prop="memberSection"
            label="会员价"
            show-overflow-tooltip
          /> -->
          <el-table-column
            prop="stockNumber"
            label="库存"
            show-overflow-tooltip
          />
          <el-table-column
            prop="volume"
            label="实际销售"
            show-overflow-tooltip
          />
          <el-table-column
            prop="fictitiousNumber"
            label="虚拟销售"
            show-overflow-tooltip
          />
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column
            prop="shelveState"
            label="上架状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.shelveState == 0">已下架</span>
              <span v-if="scope.row.shelveState == 1">已上架</span>
              <span v-if="scope.row.shelveState == 2">待审核</span>
              <span v-if="scope.row.shelveState == 3">审核失败</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <div class="btnList">
                <div
                  v-if="scope.row.shelveState == 1"
                  class="tableBtn greens"
                  @click="OutForced(scope.row)"
                >强制下架</div>
                <div
                  v-if="scope.row.shelveState == 1"
                  class="tableBtn greens"
                  @click="setFictitious(scope.row)"
                >虚拟销量</div>
                <div
                  v-if="scope.row.shelveState == 2"
                  class="tableBtn greens"
                  @click="examineShow(scope.row)"
                >审核</div>
                <div
                 class="tableBtn greens"
                  @click="Godetails(scope.row)"
                >查看详情</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 上架审核 -->
    <el-dialog title="上架审核" :visible.sync="examineVisible" width="30%" style="margin-top:10%">
      <el-form :model="ForcedForm">
        <el-form-item label="审核状态" label-width="120px">
          <el-radio-group v-model="ForcedForm.shelveState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="3">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="ForcedForm.shelveState == 3"
          label="驳回原因"
          label-width="120px"
        >
          <el-input
            v-model="ForcedForm.reject"
            type="textarea"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineVisible = false" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" >取 消</el-button>
        <el-button style="background-color: #3F9B6A;color: #fff"  @click="submintUs">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设置虚拟销量 -->
    <el-dialog
      title="自定义虚拟销量"
      :visible.sync="FictitiousVisible"
      width="460px"
    >
      <el-form :model="ForcedForm">
        <el-form-item label="" label-width="110px">
          <el-input-number
            v-model="ForcedForm.fictitiousNumber"
            :precision="0"
            :min="1"
            :max="999999999"
            label="请输入整数"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="FictitiousVisible = false" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
        <el-button style="background-color: #3F9B6A;color: #fff" @click="FicSubmintUs">确 定</el-button>
      </span>
    </el-dialog>
    <add-commodity ref="addCommodity" :examine-show="examineShow" @reset="reset" />
  </div>
</template>

<script>
import {
  getClassifyGetAll,
  Forced,
  setFictitious,
  examine,
  productExport
} from '@/api/commodity';
import AddCommodity from './addCommodity';
export default {
  components: { AddCommodity },
  data () {
    // 这里存放数据
    return {
      loading: true,
      btnList: '',
      activeName: 'first',
      formInline: {
        shelveState: '', // 商品状态 0-已下架 1-已上架 2-待审核 3-审核失败
        productName: '', // 商品名称
        productId: '', // 商品ID
        shopName: '', // 商户名称
        page: 1, // 当前页
        pageSize: 5,
      },
      batchAdd: false,
      batchFileList: [],
      total: 1,
      tableData: [],
      currentPage: 1,
      FictitiousVisible: false,
      ForcedForm: {
        fictitiousNumber: 0,
        productId: '',
        reject: '',
        shelveState: 1,
      },
      examineVisible: false,
      isDetail: false
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getAll(this.formInline);
  },
  // 方法集合
  methods: {
    msgList(list){
      if(list && list!=''){
        let strin = list.split(',')
        return strin[0]
      }
    },
    // 查看详情
    Godetails (row) {
      this.$refs.addCommodity.show(row.productId)
    },
    // 设置虚拟销量
    setFictitious (row) {
      this.FictitiousVisible = true;
      this.ForcedForm.productId = row.productId;
      this.ForcedForm.fictitiousNumber = row.fictitiousNumber;
    },
    async FicSubmintUs () {
      const res = await setFictitious(this.ForcedForm);
      if (res.code === '') {
        this.FictitiousVisible = false;
        this.$message.success(
          '虚拟销量已设置：' + this.ForcedForm.fictitiousNumber
        );
        this.search();
      }
    },
    // 强制下架
    OutForced (row) {
      this.$alert('确定下架此商品吗？', '提示', {
        confirmButtonText: '确定',
        callback: (action) => {
          console.log(action);
          if (action === 'confirm') {
            this.ForcedForm.productId = row.productId;
            Forced(this.ForcedForm).then((res) => {
              if (res.code === '') {
                this.$message.success('下架成功');
                this.search();
              }
            });
          }
        },
      });
    },
    // 审核弹窗
    examineShow (row) {
      this.ForcedForm.productId = row.productId;
      this.ForcedForm.reject = '';
      this.examineVisible = true;
      if (row.isDetail) {
        this.isDetail = row.isDetail
      }
      console.log(row, 'test')
    },
    async submintUs () {
      if (this.ForcedForm.shelveState === 3 && this.ForcedForm.reject === '') { return this.$message.warning('请输入驳回原因'); }
      const res = await examine(this.ForcedForm);
      if (res.code === '') {
        this.examineVisible = false;
        if (this.ForcedForm.shelveState === 1) {
          this.$message.success('审核成功');
        } else {
          this.$message.success('已驳回');
        }
        this.search();
        if (this.isDetail) {
          this.$refs.addCommodity.details()
        }
      }
    },
    handleSizeChange (val) {
      console.log(val);
      this.formInline.pageSize = val;
      this.getAll(this.formInline);
    },
    handleCurrentChange (val) {
      console.log(val);
      this.formInline.page = val;
      this.getAll(this.formInline);
    },
    //  查询
    search () {
      this.total = 1;
      this.formInline.page = 1;
      this.getAll(this.formInline);
    },
    // 商品状态查询
    changeState (e) {
      console.log(e);
      this.formInline.shelveState = e;
      this.getAll(this.formInline);
    },
    // 重置
    clear () {
      this.formInline = {
        shelveState: '', // 商品状态 0-已下架 1-已上架 2-待审核 3-审核失败
        productName: '', // 商品名称
        productId: '', // 商品ID
        shopName: '', // 商户名称
        page: 1, // 当前页
        pageSize: 5,
      };
      this.getAll(this.formInline);
    },
    // 导出商品
    async productDataExport () {
      this.$message({
        message: '数据导出中，请勿重复操作！',
        type: 'success'
      })
      const res = await productExport(this.formInline)
      if (!res) {
        return
      }
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
      const fileName = '商品数据明细表.xls'
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
    // 初始化查询所有数据
    async getAll (formInline) {
      const res = await getClassifyGetAll(formInline);
      this.loading = false;
      this.total = res.data.total;
      this.tableData = res.data.list;
    },
    reset () {
      this.getAll(this.formInline)
    }
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");
.pending {
  padding: 0  20px 20px 20px;
  min-height: calc(100vh - 50px - 20px);
  background-color: #Fff;
}
.fenye {
  margin-top: 20px;
}
.clickMe {
  color: #3f9b6a;
  cursor: pointer;
}
.vipDialog {
  .priceTable {
    table {
      width: 100%;
      text-align: center;
      border-left: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
      font-size: 14px;
      color: #606266;
      border-collapse: collapse;
      tr {
        border-top: 1px solid #ebeef5;
        th {
          padding: 12px 0;
          background: #eef3ff;
          color: #333;
          border-right: 1px solid #ebeef5;
        }
        td {
          padding: 12px 0;
          border-right: 1px solid #ebeef5;
          &:nth-child(1),
          &:nth-child(2) {
            width: 80px;
          }
          .el-input {
            width: 100px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
  .tableBtn {
       display: inline-block;
       margin-right: 10px;
     }

   .greens {
       color: #3F9B6A ;
     }
     ::v-deep .buttonHover:hover{
       color:#3f9b6a !important;
       border-color: #c5e1d2 !important;
       background-color: #ecf5f0 !important;
       outline: none;
     }
     ::v-deep .el-pagination__total {
         position: absolute;
         left: 10px;
       }
</style>