jiangchengfeiyi-Web/src/views/CostumeAppointments/ClothingGrade.vue

<template>
    <div style="margin-bottom: 10px;">
      <el-button type="success" @click="add">添加等级</el-button>
    </div>
  <el-table :data="orders" border stripe header-cell-class-name="headerBg"
            :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
            :header-cell-style="{ 'text-align': 'center' }">
    <el-table-column prop="id" label="序号" width="50"></el-table-column>
    <el-table-column prop="image" label="图片">
      <template #default="scope">
        <div>
          <img :src="scope.row.image" alt="" style="height: 50px;">
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="clothesType" label="等级" ></el-table-column>
    <el-table-column prop="minPrice" label="最低价（元）" ></el-table-column>
    <el-table-column prop="maxPrice" label="最高价（元）" ></el-table-column>
    <el-table-column prop="brief" label="简介" ></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" @click="change(scope.$index, scope.row)">修改等级</el-button>
        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
                       title="是否确认删除" @confirm="Delete(scope.row.id)" width=180>
          <template #reference>
            <el-button style="height: 25px" class="ml-5" type="danger">删除等级</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogVisible" title="服装等级" width="500">
    <el-form :model="order" label-width="auto" style="max-width: 600px">
      <el-form-item label="添加类别图片">
        <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            multiple="true"
            :on-remove="handleRemove"
            @change="(event: any) => handleChange(event)"
            limit="1" >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="order.clothesType"/>
            </el-form-item>
            <el-form-item label="最低价(元)">
              <el-input v-model="order.minPrice" />
            </el-form-item>
            <el-form-item label="最高价(元)">
              <el-input v-model="order.maxPrice"/>
            </el-form-item>
            <el-form-item label="简介">
              <el-input v-model="order.brief" maxlength="30" placeholder="30字以内"/>
            </el-form-item>
          </el-form>
    <template #footer #default="{ row, $index }">
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addType">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import myAxios from "@/api/myAxios";
import {ElMessage, type UploadProps} from "element-plus";
onMounted(()=>{
  getOrder()
})
const total = ref(0)
const orders = ref([{}])
const flag = ref(0)//请求类型
const dialogVisible = ref(false)//弹窗
const selectedItems = ref([])
const getOrder = async ()=>{
  const res = await myAxios.post('/clothesGrade/list')
  console.log(res)
  if (res.data.code === 1) {
    orders.value = res.data.data
    total.value = parseInt(res.data.data.total)
  }else {
    ElMessage({
      message:'获取数据失败',
    })
    return
  }
}
//添加
const add = async () => {
  dialogVisible.value = true
  flag.value = 0
}
//取消
const cancel = () => {
  dialogVisible.value = false
  restOrder()
}
//修改
const change = async (index:number, row: any) => {
  order.value = row
  dialogVisible.value = true
  flag.value = 1
}
//提交
const addType = async () => {
 if(
    order.value.clothesType == ''||
     order.value.image ==''||
     order.value.brief == ''||
     order.value.minPrice == 0||
     order.value.maxPrice == 0) {
   ElMessage({
     type:'warning',
     message:'内容不能为空'
   })
   return
 }
 dialogVisible.value = false
  if(flag.value === 0){
    const res =await myAxios.post('/clothesGrade/add',{
      clothesType:order.value.clothesType,
      image:order.value.image,
      minPrice:order.value.minPrice,
      maxPrice:order.value.maxPrice,
      brief:order.value.brief,
    })
    if(res.data.code === 1) {
      restOrder()
    }else {
      ElMessage.error(res.data.message)
    }
  }
  if(flag.value === 1){
    const res = await myAxios.post('/clothesGrade/update',{
      clothesType:order.value.clothesType,
      image:order.value.image,
      minPrice:order.value.minPrice,
      maxPrice:order.value.maxPrice,
      brief:order.value.brief,
      id:order.value.id
    })
    if(res.data.code === 1) {
      ElMessage({
        type:'success',
        message:'更新成功'
      })
    }else {
      ElMessage.error(res.data.message)
    }
  }
  getOrder()
}
//重置
const restOrder = ()=>{
  order.value = {
    image:'',
    clothesType:'',
    minPrice:0,
    maxPrice:0,
    brief:'',
    id:0
  }
}
const order=ref({
  image:'',
  clothesType:'',
  minPrice:0,
  maxPrice:0,
  brief:'',
  id:0
})
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
const handleSelectionChange = (row: any) => {
  selectedItems.value = JSON.parse(JSON.stringify(row))
}
//删除
const Delete= async (index: number) => {
  const res = await myAxios.post('/clothesGrade/delete',{ id : index })
  if(res.data.code === 1) {
    ElMessage({
      type: 'success',
      message:"删除成功"
    })
  }
  getOrder()
}
const fileSimple = ref()
const handleChange = async (file: any) => {
  fileSimple.value = file
  let formData = new FormData()
  formData.append("file", fileSimple.value.raw)
  const res = await myAxios({
    url: '/file/upload/server/not_login',
    method: 'post',
    headers: {
      'content-Type': 'multipart/form-data'
    },
    data: {
      biz: "test",
      file: formData.get("file")
    }
  })
  if ( res.data.code === 1) {
    order.value.image = res.data.data
  }
}

</script>

<style scoped>

</style>