jiangchengfeiyi-Web/src/views/OtherManagement/EntityCarouseCenter.vue

<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入图片名称" v-model="simpleList.name"></el-input>
      <el-button class="ml-5" type="primary" @click="onSearch" style="height: 25px;">搜索</el-button>
      <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
    </div>
    <div style="margin: 15px 0">
      <el-popconfirm
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="InfoFilled"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm=""
          width=180
      >
        <template #reference>
          <el-button style="height: 25px"  type="danger" slot="reference">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>
        </template>
      </el-popconfirm>
    </div>
    <el-table :data="simpleList" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
              @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="图片序号" width="50"></el-table-column>
      <el-table-column prop="imgUrl" label="图片">
        <template #default="scope"><img :src="scope.row.imgUrl" alt="" style="height: 50px;"></template>
      </el-table-column>
      <el-table-column prop="name" label="商品图片" ></el-table-column>
      <el-table-column prop="tips" label="对应商品"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="success" @click="editCarouse(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
          <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="deleteCarouse"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <!-- 分页器 -->
      <el-pagination
          :current-page="searchParams.current"
          :page-size="searchParams.pageSize"
          :page-sizes="[2, 5, 10, 20]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :small="null"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>
  </div>
  <!-- 编辑/详情表单 -->
  <el-dialog v-model="DialogVisible" title="轮播图编辑">
    <el-form label-width="100px" :disabled="disabled">
      <el-form-item label="轮播图">
        <el-upload
            v-model:file-list="carouseImg"
            ref="uploadImg"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            multiple="true"
            :on-remove="removePic"
            @change="(event: any) => handleChange(event)"
            :on-exceed="Exceed_ProductImg"
            limit="1" >
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="图片名称">
        <el-input v-model="editForm.productImg" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="对应商品" prop="price">
        <el-select v-model="editForm.prdouctName" @change="(event: any) => loadForm(event)" style="width: 120px;">
          <el-option v-for="item in goodList" :key="item" :label="item" :value="item"  />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer >
      <span class="dialog-footer">
        <el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
        <el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { type UploadProps , type UploadUserFile , genFileId ,type UploadRawFile } from 'element-plus';
import myAxios from '@/api/myAxios';
import {ref, onMounted , inject} from 'vue'
import { WarnInfo, SuccessInfo , ErrorInfo, CommInfo } from '@/utils/messageInfo';
const simpleList : any = ref([
  {
    id: '1', //图片id
    name: '样例1',  //图片名称
    imgUrl: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgGwBQzmm-cxz.png',  //图片样例
    grade: '等级1',  //图片级别
    correspondingGoods: '非遗发簪'  //对应商品
  },
  {
    id: '2',  //图片id
    name: '样例2',  //图片名称
    imgUrl: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgGwBQzmm-cxz.png',  //图片样例
    grade: '等级2',  //图片级别
    correspondingGoods: '非遗螺钿'  //对应商品
  }
])
const goodList = ref([])  //商品名称
const DialogVisible = ref(false);  //表单显示
const disabled = ref(false)
const editForm : any= ref({})
const uploadImg : any = ref()  //图片上传的ref绑定
const carouseImg: any = ref<UploadUserFile[]>([]) //给商品中心页面编辑商品使用
const tableData = ref([])  //获取的所有数据
const total = ref(0) //筛选条数
const fileSimple = ref() //单个文件
//请求参数
const searchParams: any = ref({
  //当前页码
  current: 1,
  //每页显示条数
  pageSize: 5
})
//导入组件刷新
const reload : any = inject("reload")
onMounted(() => {
})
//重置按钮
const reset =()=>{
  reload()
}
const handleSelectionChange  = (val:any)=>{
  console.log(val)
}
// 处理行数大小变化
const handleSizeChange = (newSize:any) => {
  searchParams.value.pageSize = newSize //新的页面条数
  //重新发起请求
};
// 处理当前页变化
const handleCurrentChange = (Current:any) => {
  searchParams.value.current = Current //新的当前页面
  //重新发起请求
};
//搜索按钮方法
const onSearch = (data : String)=>{
  searchParams.value.name = data
  searchParams.value.current = 1
  //重新发请求
}
const deleteCarouse = async (index: number,row: any) =>{  //删除单个轮播图
  simpleList.value.splice(index,1)
}
const editCarouse = async (obj: any) =>{
  carouseImg.value.splice(0,carouseImg.value.length)
  carouseImg.value.push({   //编辑展示
    url: obj.imgUrl
  })
  editForm.value = obj
  DialogVisible.value = true
}
const saveEdit = ()=>{  //保存表单
  DialogVisible.value = false
}
const removePic : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {    //uploadFile表示当前删除的图片，uploadFiles是还剩余的图片信息
}
//将 等级选项 赋值到表格里
const loadForm = (value: any) => {
  editForm.value.grade = value
}
const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片   'onExceed'当文件个数超过限制时，做出的判断
  WarnInfo('请移除之前的再上传')
}
const handleChange = async (file: any ) => {
  fileSimple.value = file
  let formData = new FormData()  //这一步很重要 创建一个FormData对象
  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
  // const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
  //     url: '/file/uploadFile',
  //     method: 'post',
  //     headers: {
  //         'content-Type': 'multipart/form-data'
  //     },
  //     data: {
  //         biz: "test",
  //         // 取出formData对象中的file
  //         file: formData.get("file")
  //     }
  // })
}
</script>


<style scoped>
.headerBg{
  background-color: #eee !important;
}
</style>