jiangchengfeiyi-Web/src/views/Commodity/MerchandiseCenter.vue

<template>
  <div>

    <div style="margin: 10px 0">
      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称" v-model="username"></el-input>
      <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>
    <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="uploadedFiles" label="商品图片"></el-table-column>
      <el-table-column prop="name" label="商品名称" ></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="resource" label="类型"></el-table-column>
      <el-table-column prop="quantity" label="商品数量"></el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" slot="reference">详情<i class="el-icon-remove-outline"></i></el-button>
          <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>

          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              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>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[2, 5, 10, 20]"
          :small="null"
          :disabled="null"
          :background="null"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>
  </div>
  <el-dialog title="商品信息" v-model="dialogTableVisible" width="30%">
    <el-table-column property="name" label="商品名称" width="150" />
    <el-table-column property="price" label="商品价格" width="200" />
    <el-table-column property="quantity" label="商品数量" />
    <el-table-column property="region" label="是否为限定产品" />
    <el-table-column property="resource" label="商品类型" />
    <el-table-column property="label" label="商品标签" />
    <el-table-column property="desc" label="详情描述" />
    <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 {ref, onMounted} from 'vue'
const tableData = ref([])
const pageNum = ref(0)
const pageSize = ref(0)
const total = ref(0)
const selectedItems = ref([])
onMounted(() => {
  load()
})
const handleSelectionChange = (row: any) => {
  selectedItems.value = JSON.parse(JSON.stringify(row))
}
const username = ref('')
const dialogTableVisible = ref(false)
const reset =()=>{
  username.value = ''
}
const form=ref({
  selectedItems:'',
  uploadedFiles:'',
  name:'',
  price:'',
  resource:'',
  quantity:'',
  state:'',
  region:'',
  label:[],
  desc:'',
})
const handleEdit = (row: any) => {
  dialogTableVisible.value = true
  form.value = row
  load()
}

const load = async () => {
  await instance.get('/admin/findAllUsers').then(res => {
    console.log(res.data.data)
    res.data.data.foreach((item:any) => {
      console.log(item)
    })
    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 = {}
}


</script>


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