goods.vue

<template>
  <div class="goods pagex">
    <div class="goods-con">
      <el-form :inline="true" :model="formParam" class="demo-form-inline" ref="formParam">
        <el-form-item label="型号" prop="goods_name">
          <el-autocomplete v-model="formParam.goods_name" :trigger-on-focus="false" @keyup.enter.native="onSubmit" :fetch-suggestions="querySearchAsync" placeholder="请输入型号" clearable></el-autocomplete>
        </el-form-item>
        <el-form-item label="品牌" prop="brand_name">
          <el-autocomplete v-model="formParam.brand_name" :trigger-on-focus="false" @keyup.enter.native="onSubmit" :fetch-suggestions="querySearchAsyncBrand" placeholder="请输入品牌" clearable></el-autocomplete>
        </el-form-item>
        <el-form-item label="分类">
          <el-cascader clearable expand-trigger="hover" placeholder="试试搜索：分类" :options="options" filterable @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">搜索</el-button>
          <el-button @click="resetForm('formParam')">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="btn-nav clr">
        <el-button type="primary" @click="updateBrand">修改</el-button>
        <el-button type="primary" @click="downOut">导出</el-button>
        <a :href="downHref" ref="downs" target="_blank" style="display:none">下载</a>
      </div>
      <div class="data-box th-all" v-if="tableData">
        <el-table :data="tableData" border max-height="600" @selection-change="handleSelectionChange">
          <el-table-column fixed type="selection" width="40"></el-table-column>
          <el-table-column prop="spu_name" label="型号" width="200" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="brand_name" label="品牌" width="200" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="encap" label="封装" width="100" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="pdf" label="规格书" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope" v-if="scope.row.pdf">
              <a :href="scope.row.pdf" target="_blank" class="pdf"><span class="icon iconfont"></span></a>
            </template>
          </el-table-column>
          <el-table-column prop="images_l" label="图片" width="130" align="center">
            <template slot-scope="scope" v-if="scope.row.images_l">
              <el-image style="width: 100px; height: 23px" :src="scope.row.images_l" fit="cover" :preview-src-list="[scope.row.images_l]"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="商品备注" min-width="50" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="140"></el-table-column>
          <el-table-column prop="update_time" label="更新时间" width="140"></el-table-column>
        </el-table>
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
      </div>
      <!--修改商品弹窗-->
      <el-dialog title="修改商品" :visible.sync="dialogVisible" width="1000px">
        <div class="kc-mask">
          <el-table :data="updateGoodsdata" border max-height="600">
            <el-table-column prop="spu_name" label="型号" min-width="15%">
            </el-table-column>
            <el-table-column prop="brand_name" label="品牌" min-width="15%">
            </el-table-column>
            <el-table-column prop="encap" label="封装" min-width="15%">
            </el-table-column>
            <el-table-column prop="pdf" label="规格书" min-width="15%">
              <template slot-scope="scope" v-if="scope.row.pdf">
                <a :href="scope.row.pdf" target="_blank" class="pdf"><span class="icon iconfont"></span></a>
              </template>
            </el-table-column>
            <el-table-column prop="images_l" label="图片" min-width="15%">
              <template slot-scope="scope" v-if="scope.row.images_l">
                <img :src="scope.row.images_l" class="brand-img" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="商品备注" width="320">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark" placeholder="点击修改"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitUpdate">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <Menu/>
  </div>

</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import {Autocomplete, Button, Cascader, Dialog, Form, FormItem, Image, Input, Message, Option, Pagination, Select, Table, TableColumn} from 'element-ui'

Vue.prototype.$message = Message
Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Pagination)
Vue.use(TableColumn).use(Table).use(Cascader).use(Autocomplete).use(Image)
export default {
  name: "brand",
  data() {
    return {
      dialogVisible: false,
      updateGoodsdata: [],
      total: 0,
      limit: 10,
      page: 1,
      downHref: "",
      formParam: {
        goods_name: '',
        brand_name: '',
        keyword: '',
        class_id2: '',
        class_id1: ''
      },
      disabled: false,
      timer: null,
      tableData: "",
      multipleSelection: [],
      options: [],
      selectedOptions: []
    }
  },
  created() {
    this.getData();
    this.getClass();
  },
  methods: {
    getClass() {
      this.$http('get', "/api/class/get_class_list", {}).then(res => {
        if (res.code === 0) {
          var data = res.data.list || [];
          if (data.length > 0) {
            for (let i = 0; i < data.length; i++) {
              var children = []
              let children_arr = data[i].sub_class || [];
              if (children_arr.length > 0) {
                for (let j = 0; j < children_arr.length; j++) {
                  children.push({
                    value: children_arr[j].class_id,
                    label: children_arr[j].class_name
                  })
                }
              }
              this.options.push({
                value: parseInt(data[i].class_id),
                label: data[i].class_name,
                children: children
              })
            }
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      })
    },
    getData() {
      this.$http('get', "/api/spu/get_spu_list", {
        page: this.page,
        limit: this.limit,
        brand_id: this.formParam.brand_id,
        brand_name: this.formParam.brand_name,
        spu_name: this.formParam.goods_name,
        keyword: this.formParam.keyword,
        class_id2: this.formParam.class_id2,
        class_id1: this.formParam.class_id1
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list || [];
          this.total = Number(res.data.count) || 0;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //型号
    querySearchAsync(queryString, cb) {
      this.$http('get', "/api/search/getspu", {
        spu_name: queryString
      }).then(res => {
        if (res.code == 0) {
          if (res.data.list.length > 0) {
            var arrlist_ = res.data.list || [];
            var arr_ = []
            for (var i = 0; i < arrlist_.length; i++) {
              arr_.push({
                value: arrlist_[i]['spu_name']
              })
            }
            cb(arr_);
          } else {
            cb([]);
          }
        }
      })
    },
    //品牌
    querySearchAsyncBrand(queryString, cb) {
      this.$http('get', "/api/brand/get_stand_brand", {
        brand: queryString
      }).then(res => {
        if (res.code == 0) {
          if (res.data.list.length > 0) {
            var arrlist_ = res.data.list || [];
            var arr_ = []
            for (var i = 0; i < arrlist_.length; i++) {
              arr_.push({
                value: arrlist_[i]
              })
            }
            cb(arr_);
          } else {
            cb([]);
          }
        }
      })
    },
    updateBrand() {
      if (this.multipleSelection.length > 1) {
        this.$message({
          message: '只能选择一条数据',
          type: 'warning'
        });
        return false;
      }
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请至少选择一条数据',
          type: 'warning'
        });
        return false;
      }
      this.updateGoodsdata = JSON.parse(JSON.stringify(this.multipleSelection));
      this.dialogVisible = true
    },
    submitUpdate() {
      var arr_ = {
        id: this.updateGoodsdata[0].spu_id,
        remark: this.updateGoodsdata[0].remark
      }
      this.$http('post', "/api/spu/update_spu", arr_).then(res => {
        if (res.code == 0) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.getData()
          this.dialogVisible = false
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit() {
      this.page = 1;
      this.getData();
    },
    downOut() {
      if (this.disabled) {
        this.$message("正在导出中,请不要重复点击");
        return false;
      }
      this.$http('post', "/api/spu/export_spu", {
        spu_name: this.formParam.goods_name,
        brand_name: this.formParam.brand_name,
        brand_id: this.formParam.brand_id,
        class_id2: this.formParam.class_id2,
        class_id1: this.formParam.class_id1,
        keyword: this.formParam.keyword,
      }).then(res => {
        if (res.code == 0) {
          this.disabled = true;
          this.$message({
            message: '正在导出中,请耐心等待',
            type: 'warning',
            duration: 0
          });
          this.timer = setInterval(() => {
            if (!this.disabled) {
              clearInterval(this.timer)
              return false;
            }
            this.resultDown(res.data)
          }, 3000)
        }
      })
    },
    resultDown(id_) {
      this.$http('get', "/api/export/get_export_data", {
        id: id_
      }).then(res => {
        if (res.code == 0) {
          this.disabled = false;
          this.$message({
            message: '导出成功',
            type: 'success'
          });
          this.downHref = res.data
          setTimeout(() => {
            this.$message.closeAll();
            this.$refs.downs.click()
          }, 2000)
        } else if (res.code == -1) {
          //导出失败
          this.$message({
            message: res.msg,
            type: 'error'
          });
          this.disabled = false
        }
      }, error => {
        this.$message('网络出现问题,请检查网络');
        this.disabled = false
      })

    },
    handleSizeChange(val) {
      this.limit = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val || [];
    },
    handleChange(value) {
      this.formParam.class_id1 = value[0]
      this.formParam.class_id2 = value[1]
    }
  },
  components: {
    Menu
  }
};
</script>
<style scoped>
@import "../../assets/css/goods/goods.min.css";
</style>