web/src/components/settings/item/group/GroupList.vue

<template>
  <Mask :width="800" :height="600" :is-show="show" @close="show=false" title="项目组套列表" :show-footer="true">
    <template #default>
      <div class="search_content_wrapper">
        <div class="search_wrapper">
          <span class="default-btn" @click="add">
              <span class="iconfont icon-jia"></span>
            添加组套
          </span>
        </div>
        <div class="content">
          <el-table border style="height: 100%" :data="tableList" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
            <el-table-column
                prop="itemName"
                label="组套名称">
            </el-table-column>
            <el-table-column
                prop="purchaseUnitPrice"
                label="原价">
            </el-table-column>
            <el-table-column
                prop="unitPrice"
                label="售价">
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" link @click="editGroup(scope.row)">编辑</el-button>
                <el-button type="primary" link @click="deleteGroup(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="bottom">
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="current_page"
            :page-size="20"
            :total="total">
        </el-pagination>
      </div>
    </template>
  </Mask>
  <GroupAdd ref="addGroupRef" @close="init"></GroupAdd>
</template>
<script setup lang="ts">
import {ref, nextTick} from "vue";
import {post} from '@/utils/request.ts'
import Mask from "@/components/common/Mask.vue";
import GroupAdd from "@/components/settings/item/group/GroupAdd.vue";
import {ElMessage, ElMessageBox} from "element-plus";

let current_page = ref(1)
const show = ref(false);
const emit = defineEmits(["confirm"])
const deleteGroup = (row: any) => {
  ElMessageBox.confirm('确定删除该组套？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    post("item/deleteGroup", {id: row.id}).then((res: any) => {
      init();
    })
  }).catch((err) => {

  })


}
const init = () => {

  post("item/groupList", {
    page: current_page.value,
    size: 10,
  }).then((res: any) => {
    tableList.value = res.list
    total.value = res.total_count
    show.value = true;
  })

};
defineExpose({init});


const tableList = ref<any>([
  {
    name: '',
    purchaseUnitPrice: '',
    unitPrice: '',
  }
])

const addGroupRef = ref<any>(null);
const editGroup = (row: any) => {
  nextTick(() => {
    addGroupRef.value?.init(row);
  })
}
const add = () => {
  nextTick(() => {
    addGroupRef.value?.init(null);
  })
}
const total = ref<any>(0)
const handleCurrentChange = (val: any) => {
  current_page.value = val;
  init();
}
</script>
<style scoped lang="scss">
.search_bottom {
  display: block;
}

.search_content_wrapper {
  background-color: #FFF;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 24px;
  .search_wrapper {
    width: 100%;
    display: flex;
    margin: 0 auto;
    height: 60px;

    .input {
      display: block;
      flex: 1;
    }

    button {
      width: 80px;
      line-height: 40px;
      color: #FFF;
      margin-left: 10px;
      height: 40px;
      background-color: #409EFF;
      border: none;
    }
  }

  .content {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;

    table {
      //border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      //border: 1px solid #ccc;
      padding: 8px;
      text-align: left;

    }

    th {
      //background-color: #F9F9F9;
    }

    /* 可选：为可点击的行添加鼠标悬停效果 */
    tr:hover {
      //background-color: #f5f5f5;
    }
  }
}


:deep(.invalid) {
  color: #409EFF;
}

.search_result {
  width: 100%;
  height: 400px;
}

.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
}
</style>