后端开发11.文件上传模块

控制器

package jkw.controller;

import com.github.tobato.fastdfs.domain.fdfs.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import jkw.exception.MyException;
import jkw.vo.BaseResult;
import jkw.vo.CodeEnum;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStream;

@RestController
@RequestMapping("/file")
@CrossOrigin
public class FileController {
    @Autowired
    private FastFileStorageClient fastFileStorageClient;
    @Value("${fdfs.fileUrl}")
    private String fileUrl; // Nginx访问FastDFS中文件的路径

    /**
     * fastdfs上传文件
     *
     * @param file 文件
     * @return
     * @throws IOException
     */
    @PostMapping("/fastdfs/upload")
    public BaseResult<String> fastdfsUpload(MultipartFile file) throws IOException {
        // MultipartFile对象不能再服务间传递，必须转为byte数组
        byte[] fileBytes = file.getBytes();
        String fileName = file.getOriginalFilename();
        String imageUrl = "";
        if (fileBytes.length != 0) {
            try {
                // 1.将文件字节数组转为输入流
                InputStream inputStream = new ByteArrayInputStream(fileBytes);
                // 2.获取文件的后缀名
                String fileSuffix = fileName.substring(fileName.lastIndexOf(".") + 1);
                // 3.上传文件
                StorePath storePath = fastFileStorageClient.uploadFile(inputStream, inputStream.available(), fileSuffix, null);
                // 4.返回图片路径
                imageUrl = fileUrl + "/" + storePath.getFullPath();

            } catch (IOException ioException) {
                throw new MyException(CodeEnum.FILE_FASTDFS_UPLOAD_ERROR.getCode(), CodeEnum.FILE_FASTDFS_UPLOAD_ERROR.getMessage());
            }
        } else {
            throw new MyException(CodeEnum.FILE_FASTDFS_UPLOAD_ERROR.getCode(), CodeEnum.FILE_FASTDFS_UPLOAD_ERROR.getMessage());
        }
        return BaseResult.ok(imageUrl);
    }

    /**
     * fastdfs删除文件
     *
     * @param filePath 文件路径
     * @return
     */
    @DeleteMapping("/fastdfs/delete")
    public BaseResult fastdfsDelete(String filePath) {
        System.out.println(filePath);
        fastFileStorageClient.deleteFile(filePath);
        return BaseResult.ok();
    }


}

相关代码

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
      <el-button round @click="syncGoodsToES" size="large" type="success">
        <span>同步数据到es中</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 1200px;">
        <el-table-column label="头图" prop="goodsHeadImg" align="center">
          <template #default="scope">
            <img :src="scope.row.goodsHeadImg" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="商品名" prop="goodsName" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="副标题" prop="goodsCaption" align="center"></el-table-column>
        <el-table-column label="价格" prop="goodsPrice" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="介绍" prop="goodsIntroduction" align="center"></el-table-column>
        <el-table-column label="状态" prop="goodsUse" align="center">
          <template #default="scope">
            <el-tag round :type="scope.row.goodsUse == '1' ? 'success' : 'info'">
              {{ scope.row.goodsUse == '1' ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="品牌" prop="goodsBrandId" align="center">
          <template #default="scope">
                  <span v-for="item in brandList.list" :key="item.goodsBrandId">
                      {{ scope.row.goodsBrandId == item.goodsBrandId ? item.goodsBrandName : '' }}
                  </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="一级分类" prop="goodsTypeId1" align="center">
          <template #default="scope">
                <span v-for="item in type1List.list" :key="item.goodsTypeId">
                    {{ scope.row.goodsTypeId1 == item.goodsTypeId ? item.goodsTypeName : '' }}
                </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="二级分类" prop="goodsTypeId2" align="center">
          <template #default="scope">
                <span v-for="item in type2List.list" :key="item.goodsTypeId">
                    {{ scope.row.goodsTypeId2 == item.goodsTypeId ? item.goodsTypeName : '' }}
                </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="三级分类" prop="goodsTypeId3" align="center">
          <template #default="scope">
                <span v-for="item in type3List.list" :key="item.goodsTypeId">
                    {{ scope.row.goodsTypeId3 == item.goodsTypeId ? item.goodsTypeName : '' }}
                </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="350">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-show="scope.row.goodsUse==='1'" size="small" type="info"
                       @click="handleUse(scope.$index, scope.row)">下架
            </el-button>
            <el-button v-if="scope.row.goodsUse=='0'" size="small" type="success"
                       @click="handleUse(scope.$index, scope.row)">上架
            </el-button>
            <el-button size="small" type="primary" @click="handleOption(scope.$index, scope.row)">规格</el-button>
            <el-button size="small" type="primary" @click="handleImage(scope.$index, scope.row)">图片</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="70%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="头图">
          <el-upload list-type="picture-card"
                     :action="uploadStore.fastdfsUploadUrl"
                     :on-success="onHeadImageAddSuccess"
                     :on-remove="onHeadImageAddRemove">
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品名">
          <el-input style="width: 600px" v-model="addFormInfo.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="副标题">
          <el-input style="width: 600px" v-model="addFormInfo.goodsCaption"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addFormInfo.goodsPrice"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-select v-model="addFormInfo.goodsBrandId" placeholder="请选择品牌" size="large">
            <el-option v-for="item in brandList.list" :key="item.goodsBrandId"
                       :label="item.goodsBrandName"
                       :value="item.goodsBrandId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一级分类">
          <el-select style="width: 100px" v-model="addFormInfo.goodsTypeId1" placeholder="请选择商品类型" size="large">
            <el-option @click="selectOne(item.goodsTypeId)" v-for="item in type1List.list" :key="item.goodsTypeId"
                       :label="item.goodsTypeName"
                       :value="item.goodsTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="70px" label="二级分类">
          <el-select style="width: 100px" v-model="addFormInfo.goodsTypeId2"
                     placeholder="请选择商品类型" size="large">
            <el-option @click="selectTwo(item.goodsTypeId)" v-for="item in type2List.list" :key="item.goodsTypeId"
                       :label="item.goodsTypeName"
                       :value="item.goodsTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="70px" label="三级分类">
          <el-select style="width: 100px" v-model="addFormInfo.goodsTypeId3"
                     placeholder="请选择商品类型" size="large">
            <el-option v-for="item in type3List.list" :key="item.goodsTypeId"
                       :label="item.goodsTypeName"
                       :value="item.goodsTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input style="width: 600px" type="textarea" rows="6" v-model="addFormInfo.goodsIntroduction"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="70%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="头图">
          <el-upload list-type="picture-card"
                     :action="uploadStore.fastdfsUploadUrl"
                     :on-success="onHeadImageEditSuccess"
          >
            <el-image :src="editorFormInfo.goodsHeadImg"/>

          </el-upload>
        </el-form-item>
        <el-form-item label="商品名">
          <el-input style="width: 600px" v-model="editorFormInfo.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="副标题">
          <el-input style="width: 600px" v-model="editorFormInfo.goodsCaption"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="editorFormInfo.goodsPrice"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-select v-model="editorFormInfo.goodsBrandId" placeholder="请选择品牌" size="large">
            <el-option v-for="item in brandList.list" :key="item.goodsBrandId"
                       :label="item.goodsBrandName"
                       :value="item.goodsBrandId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一级分类">
          <el-select style="width: 130px" v-model="editorFormInfo.goodsTypeId1" placeholder="请选择商品类型"
                     size="large">
            <el-option @click="selectOne(item.goodsTypeId)" v-for="item in type1List.list" :key="item.goodsTypeId"
                       :label="item.goodsTypeName"
                       :value="item.goodsTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="70px" label="二级分类">
          <el-select style="width: 130px" v-model="editorFormInfo.goodsTypeId2"
                     placeholder="请选择商品类型" size="large">
            <el-option @click="selectTwo(item.goodsTypeId)" v-for="item in type2List.list" :key="item.goodsTypeId"
                       :label="item.goodsTypeName"
                       :value="item.goodsTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="70px" label="三级分类">
          <el-select style="width: 130px" v-model="editorFormInfo.goodsTypeId3"
                     placeholder="请选择商品类型" size="large">
            <el-option v-for="item in type3List.list" :key="item.goodsTypeId"
                       :label="item.goodsTypeName"
                       :value="item.goodsTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input readonly style="width: 600px" type="textarea" rows="6" v-model="editorFormInfo.goodsIntroduction"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
    <!--图片对话框 start-->
    <el-dialog destroy-on-close v-model="dialogImageVisible" title="商品图片" width="70%" center>
      <el-upload
          list-type="picture-card"
          :action="uploadStore.fastdfsUploadUrl"
          :file-list="fileList.list"
          :on-success="handleOtherImageSuccess"
          :on-remove="handleOtherImageRemove"
          :on-preview="handleOtherImagePreview"
      >
        <el-icon>
          <Plus/>
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogShowVisible">
        <el-image w-full :src="dialogShowImageUrl" alt="Preview Image"/>
      </el-dialog>
      <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogImageVisible=false">关闭</el-button>
            </span>
      </template>
    </el-dialog>
    <!--图片对话框 end-->
    <!--规格对话框 start-->
    <el-dialog destroy-on-close v-model="dialogOptionVisible" title="商品规格" width="35%" center>
      <!--添加规格 start-->
      <el-form inline :model="addOptionFormInfo" label-width="150px">
        <el-form-item label="规格名">
          <el-select v-model="addOptionFormInfo.goodsSpecificationName" placeholder="请选择规格" size="large">
            <el-option @click="selectSpecification(item.goodsSpecificationId)" v-for="item in specificationList.list"
                       :key="item.goodsSpecificationId"
                       :label="item.goodsSpecificationName"
                       :value="item.goodsSpecificationId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格项">
          <el-select v-model="addOptionFormInfo.goodsSpecificationOptionId"
                     placeholder="请选择规格项" size="large">
            <el-option v-for="item in specificationOptionList.list" :key="item.goodsSpecificationOptionId"
                       :label="item.goodsSpecificationOptionName"
                       :value="item.goodsSpecificationOptionId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="large" style="margin: 10px" @click="handleOptionAdd">添加</el-button>
      <!--添加规格 end-->
      <!--规格列表 start-->
      <el-table :data="optionList.list" border size="large">
        <el-table-column label="规格名" prop="goodsSpecificationName"/>
        <el-table-column label="规格项" prop="goodsSpecificationOptionName"/>
        <el-table-column label="操作" prop="age">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleOptionDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--规格end start-->
      <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogOptionVisible=false">关闭</el-button>
            </span>
      </template>
    </el-dialog>
    <!--规格对话框 end-->
  </div>
</template>

<script setup>
import axios from "@/utils/request.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {useUploadStore} from "../../stores/uploadStore.js"

const uploadStore = useUploadStore()
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//品牌列表
const brandList = reactive({
  list: []
})
//初始化图片列表
const fileList = reactive({
  list: []
})
//初始化商品对应规格数据
const optionList = reactive({
  list: []
})
//初始化规格列表【当前商品可拥有】
const specificationList = reactive({
  list: []
})
//初始化规格项列表
const specificationOptionList = reactive({
  list: []
})
//一级类型列表
const type1List = reactive({
  list: []
})
//二级类型列表
const type2List = reactive({
  list: []
})
//三级类型列表
const type3List = reactive({
  list: []
})

//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(5)
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  goodsHeadImg: "",
  goodsName: "",
  goodsCaption: "",
  goodsPrice: "",
  goodsIntroduction: "",
  goodsUse: "",
  goodsBrandId: "",
  goodsTypeId1: "",
  goodsTypeId2: "",
  goodsTypeId3: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  goodsId: "",
  goodsHeadImg: "",
  goodsName: "",
  goodsCaption: "",
  goodsPrice: "",
  goodsIntroduction: "",
  goodsUse: "",
  goodsBrandId: "",
  goodsTypeId1: "",
  goodsTypeId2: "",
  goodsTypeId3: "",
})
//图片对话框控制器
const dialogImageVisible = ref(false)
//打开图片对话框获得的商品id
const dialogImageGoodsId = ref(0)
//图片放大对话框控制器
const dialogShowVisible = ref(false)
//初始化图片放大时显示的图片
const dialogShowImageUrl = ref(0)
//规格对话框控制器
const dialogOptionVisible = ref(false)
//打开规格对话框获得的商品id
const dialogOptionGoodsId = ref(0)
//规格对话框添加表格初始化
const addOptionFormInfo = reactive({
  goodsId: '',
  goodsSpecificationOptionId: '',
  goodsSpecificationId: ''
})
//当前商品id规格项大全
const goodsSpecificationOptionList = reactive({
  list: []
})
/**
 * 网路请求：分页查询
 *  */
const http = (page, size) => {
  axios.get('goods/goods/search', {
    params: {
      page: page,
      size: size
    }
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(currentPage.value, defaultPageSize.value)
  axios.get('goods/goodsBrand/findAll')
      .then(res => {
        if (res.data.code == 200) {
          brandList.list = res.data.data
        }
      })
  axios.get('goods/goodsType/findAllOne')
      .then(res => {
        if (res.data.code == 200) {
          type1List.list = res.data.data
        }
      })
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 选中一级事件
 */
const selectOne = (id) => {
  axios.get("goods/goodsType/findAllByParentId", {
    params: {
      id: id
    }
  }).then(res => {
    if (res.data.code == 200) {
      type2List.list = res.data.data
    }
  })
}
/**
 * 选中二级级事件
 */
const selectTwo = (id) => {
  axios.get("goods/goodsType/findAllByParentId", {
    params: {
      id: id
    }
  }).then(res => {
    if (res.data.code == 200) {
      type3List.list = res.data.data
    }
  })
}

/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 头图添加时图片上传
 */
//上传成功的钩子
const onHeadImageAddSuccess = (response, uploadFile) => {
  addFormInfo.goodsHeadImg = response.data
  ElMessage.success("上传成功")
}
//移除图片的钩子
const onHeadImageAddRemove = (response, uploadFile) => {
  axios.delete('file/fastdfs/delete', {
    params: {
      filePath: addFormInfo.goodsHeadImg
    }
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}


/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.post('goods/goods/add', {
    goodsHeadImg: addFormInfo.goodsHeadImg,
    goodsName: addFormInfo.goodsName,
    goodsCaption: addFormInfo.goodsCaption,
    goodsPrice: addFormInfo.goodsPrice,
    goodsIntroduction: addFormInfo.goodsIntroduction,
    goodsUse: '1',
    goodsBrandId: addFormInfo.goodsBrandId,
    goodsTypeId1: addFormInfo.goodsTypeId1,
    goodsTypeId2: addFormInfo.goodsTypeId2,
    goodsTypeId3: addFormInfo.goodsTypeId3,

  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.get('goods/goods/findById', {
    params: {
      goodsId: row.goodsId
    }
  }).then(res => {

    if (res.data.code == 200) {
      editorFormInfo.goodsId = res.data.data.goodsId;
      editorFormInfo.goodsHeadImg = res.data.data.goodsHeadImg;
      editorFormInfo.goodsName = res.data.data.goodsName;
      editorFormInfo.goodsCaption = res.data.data.goodsCaption;
      editorFormInfo.goodsPrice = res.data.data.goodsPrice;
      editorFormInfo.goodsIntroduction = res.data.data.goodsIntroduction;
      editorFormInfo.goodsUse = res.data.data.goodsUse;
      editorFormInfo.goodsBrandId = res.data.data.goodsBrandId;
      editorFormInfo.goodsTypeId1 = res.data.data.goodsTypeId1;
      editorFormInfo.goodsTypeId2 = res.data.data.goodsTypeId2;
      editorFormInfo.goodsTypeId3 = res.data.data.goodsTypeId3;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 头图修改时图片上传成功事件
 */
//上传成功的钩子
const onHeadImageEditSuccess = (response, uploadFile) => {
  //删除以前图片
  axios.delete('file/fastdfs/delete', {
    params: {
      filePath: editorFormInfo.goodsHeadImg
    }
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("fastdfs移除原图片成功")
    }
  })
  //替换为现在的图片
  editorFormInfo.goodsHeadImg = response.data
  ElMessage.success("上传成功")

}

/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.post('goods/goods/update', {
    goodsId: editorFormInfo.goodsId,
    goodsHeadImg: editorFormInfo.goodsHeadImg,
    goodsName: editorFormInfo.goodsName,
    goodsCaption: editorFormInfo.goodsCaption,
    goodsPrice: editorFormInfo.goodsPrice,
    goodsIntroduction: editorFormInfo.goodsIntroduction,
    goodsUse: editorFormInfo.goodsUse,
    goodsBrandId: editorFormInfo.goodsBrandId,
    goodsTypeId1: editorFormInfo.goodsTypeId1,
    goodsTypeId2: editorFormInfo.goodsTypeId2,
    goodsTypeId3: editorFormInfo.goodsTypeId3,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(currentPage.value, defaultPageSize.value)
    } else {
      //添加失败：给出提示信息(element-plus/反馈组件/message信息提示)
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.delete("goods/goods/delete", {
      params: {
        goodsId: row.goodsId
      }
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
/**
 * 上下架
 */
const handleUse = (index, row) => {
  axios.post('goods/goods/updateUse', {
    goodsId: row.goodsId
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("更新成功")
      http(currentPage.value, defaultPageSize.value)
    }
  })
}
/**
 * 图片对话框
 */
const handleImage = (index, row) => {
  dialogImageVisible.value = true
  dialogImageGoodsId.value = row.goodsId
  axios.get('goods/goodsImage/findByGoodsId', {
    params: {
      goodsId: row.goodsId
    }
  }).then(res => {
    if (res.data.code == 200) {
      //把查到的图片放入初始化图片数据中
      fileList.list = res.data.data.map(item => ({name: item.goodsName, url: item.goodsImageUrl}))
    }
  })
}
//文件上传成功时的钩子
const handleOtherImageSuccess = (response, uploadFile) => {
  axios.post('goods/goodsImage/add', {
    goodsImageTitle: uploadFile.raw.name,
    goodsImageUrl: response.data,
    goodsId: dialogImageGoodsId.value
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("添加成功")
    }
  })
}
//文件删除的钩子
const handleOtherImageRemove = (file, files) => {
  axios.delete('file/fastdfs/delete', {
    params: {
      filePath: file.url
    }
  })
  axios.delete("goods/goodsImage/deleteByUrl", {
    params: {
      url: file.url
    }
  })
}
//点击文件列表中已上传的文件时的钩子
const handleOtherImagePreview = (uploadFile) => {
  dialogShowVisible.value = true
  dialogShowImageUrl.value = uploadFile.url
}
/**
 * 封装商品对应的规格项查询
 * @param id 商品id
 */
const goodsOptionHttp = (id) => {
//查询商品对应的规格项
  axios.get("goods/goodsSpecificationOptions/findAllByGoodsId", {
    params: {
      goodsId: id
    }
  }).then(res => {
    if (res.data.code == 200) {
      optionList.list = res.data.data
    }
  })
}
/**
 * 规格对话框弹出事件
 */
const handleOption = (index, row) => {
  dialogOptionVisible.value = true
  dialogOptionGoodsId.value = row.goodsId
  //查询商品对应的规格项
  goodsOptionHttp(row.goodsId)
  //查询所有规格
  axios.get("goods/goodsSpecification/findAll")
      .then(res => {
        specificationList.list = res.data.data
      })
}
/**
 * 选择规格事件
 * @param id
 */
const selectSpecification = (id) => {
  axios.get("goods/goodsSpecificationOption/findAllByGoodsSpecificationId", {
    params: {
      id: id
    }
  }).then(res => {
    console.log(res.data)
    if (res.data.code == 200) {
      specificationOptionList.list = res.data.data
    }
  })
}
/**
 * 添加规格项
 */
const handleOptionAdd = () => {
  axios.post("goods/goodsSpecificationOptions/add", {
    goodsId: dialogOptionGoodsId.value,
    goodsSpecificationOptionId: addOptionFormInfo.goodsSpecificationOptionId
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("添加成功")
      //刷新
      goodsOptionHttp(dialogOptionGoodsId.value)
    }
  })
}
/**
 * 删除规格项
 * @param index
 * @param row
 */
const handleOptionDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.delete("goods/goodsSpecificationOptions/delete", {
      params: {
        goodsSpecificationOptionsId: row.goodsSpecificationOptionsId
      }
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        goodsOptionHttp(dialogOptionGoodsId.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })

}
/**
 * es同步数据
 */
const syncGoodsToES = () => {
  axios.get("front/search/syncGoodsToES")
      .then(res => {
        if (res.data.code == 200) {
          ElMessage.success("同步成功！！！")
        }
      })
}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>