变更

src/views/Commodity/AddProduct.vue

@@ -64,7 +64,7 @@
   </el-dialog>
 </div>
 <!--  表单-->
-  <div style="position: absolute;right: 20px;top: 100px;max-width: 20%" >
+  <div style="position: absolute;right: 20px;top: 100px;max-width: 50%" >
     <el-form :model="form" label-width="auto" style="width: 750px" size="large">
       <el-form-item label="产品名称">
         <el-input v-model="form.name" />

src/views/Commodity/MerchandiseCenter.vue

@@ -1,15 +1,45 @@
 <template>
   <div>
-
-    <div style="margin: 10px 0">
+    <div >
       <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称" v-model="username" ></el-input>
+      <el-form-item label="商品类型" style="width: 200px; margin-right: 10px;display: inline-block">
+        <el-select v-model="resources" placeholder="请选择">
+          <el-option label="材料包" value="0" />
+          <el-option label="手持物" value="1" />
+          <el-option label="头饰" value="2" />
+          <el-option label="定制" value="3" />
+          <el-option label="积分兑换" value="4" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品状态" style="width: 200px;margin-right: 10px;display: inline-block">
+        <el-select v-model="Region" placeholder="请选择">
+          <el-option label="已上架" value="11" />
+          <el-option label="已下架" value="12" />
+        </el-select>
+      </el-form-item>
             <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
             <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
     </div>
+    <div style="margin: 15px 0">
+      <el-popconfirm
+          class="ml-5"
+          confirm-button-text='确定'
+          cancel-button-text='取消'
+          icon="InfoFilled"
+          icon-color="red"
+          title="您确定批量删除这些数据吗？"
+          @confirm="delBatch"
+          width=180
+      >
+        <template #reference>
+          <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>
+        </template>
+      </el-popconfirm>
+    </div>
     <el-table :data="tableData" 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="selectedItems" label="商品编号"></el-table-column>
+      <el-table-column prop="selectedItems" label="商品编号" width="70 "></el-table-column>
       <el-table-column prop="uploadedFiles" label="商品图片"></el-table-column>
       <el-table-column prop="name" label="商品名称" ></el-table-column>
       <el-table-column prop="price" label="价格"></el-table-column>
@@ -32,8 +62,6 @@
               title="您确定删除吗？"
               @confirm="del(scope.row.id)"
           >
-            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
-            <el-button type="danger" slot="reference">下架<i class="el-icon-remove-outline"></i></el-button>
           </el-popconfirm>
 
         </template>
@@ -65,15 +93,14 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button style="height: 30px;" @click="dialogTableVisible = false">取消</el-button>
-        <el-button style="height: 30px" type="primary" @click=save>确认</el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-
 import instance from '@/utils/request';
+import { ElMessage } from 'element-plus';
 import {ref, onMounted} from 'vue'
 const tableData = ref([])
 const pageNum = ref(0)
@@ -88,9 +115,9 @@ const handleSelectionChange = (row: any) => {
 }
 const username = ref('')
 const dialogTableVisible = ref(false)
-const reset =()=>{
-  username.value = ''
-}
+const resources =ref('')
+const Region = ref('')
+
 const form=ref({
   selectedItems:'',//商品编号
   uploadedFiles:'',//商品图片
@@ -103,6 +130,11 @@ const form=ref({
   label:[],//商品标签
   desc:'',//详情描述
 })
+const reset =()=>{
+  username.value = ''
+  resources.value = ''
+  Region.value = ''
+}
 const handleEdit = (row: any) => {
   dialogTableVisible.value = true
   form.value = row
@@ -118,27 +150,24 @@ const load = async () => {
     tableData.value = res.data.data
   })
 }
-
-// const save = () => {
-//   const formObj = toRaw(form.value)
-//   formObj.isCarbon = formObj.isCarbon == '是' ? true : false
-//   console.log(formObj)
-//   instance.post('/admin/updateOrInsertUser', formObj).then(res => {
-//     if(res.data.code == '200'){
-//       load()
-//       updateSuccess()
-//     }else{
-//       load()
-//       updataFail()
-//     }
-//   })
-//   dialogTableVisible.value = false
-// }
-//
-// const handleAdd = async () => {
-//   dialogTableVisible.value = true
-//   form.value = {}
-// }
+const delBatchSuccess = () => {
+  ElMessage({
+    message: '批量删除成功',
+    type: 'success',
+  })
+}
+const delBatch = async () => {
+  await instance.post('').then(res => {
+    if(res.data.code == '200'){
+      load()
+    }else{
+      ElMessage({
+        message: '批量删除失败',
+        type: 'error'
+      })
+    }
+  })
+}
 
 
 </script>