<template>
    <div class="page-container row-container">
  
      <section class="list-part-container" style="flex: 2">
        <!-- 搜索区域 -->
        <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item class="section-title" label="检查类别管理" />
         
          <el-form-item label="检查类别编码：" prop="code">
                <el-input v-model="queryParams.code" placeholder="请输入检查类别编码" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="检查类别名称：" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入检查类别名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
          <el-form-item>
            <el-button type="info" icon="Search" @click="handleQuery">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Plus" @click="handleAdd(null)"
              v-hasPermi="['business:check:add']">新增</el-button>
          </el-form-item>
        
        </el-form>
        <!-- 列表区域 -->
        <div class="el-table-container">
          <div class="el-table-inner-container">
            <el-table v-loading="loading" :data="checkList" size="small" border height="100%"
            @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column type="index" label="行号" width="50" align="center" />
            <el-table-column label="检查类别编码" align="center" prop="code" />
            <el-table-column label="检查类别名称" align="center" prop="name" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="warning" size="small" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['business:check:edit']">修改</el-button>
                    <!-- <el-button link type="danger" size="small" icon="Delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['business:check:remove']">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
          </div>
        </div>
        <pagination  :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
      </section>

      <!-- 设备档案管理表单 -->
       <!-- 表单 -->
       <check-form ref="checkRef" :get-list="getList"></check-form>
    </div>
  </template>
  
  <script setup name="Equipment">
 import { listCheck, delCheck } from "@/api/business/check";
 import checkForm from "./form"
  const { proxy } = getCurrentInstance();
const checkList = ref([]);
const loading = ref(true);
const ids = ref([])
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
/** 查询对象 */
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    code: null,
    name: null,
    status: null,
})

/***********************  方法区  ****************************/

/** 查询检查类别列表 */
function getList() {
    loading.value = true;
    listCheck(queryParams.value).then(response => {
        checkList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}


// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
    proxy.$refs.checkRef.open()
}

/** 修改按钮操作 */
function handleUpdate(row) {
    const id = row.id || ids.value
    proxy.$refs.checkRef.open(id)
}


/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除选中的数据项？').then(function () {
        return delCheck(_ids);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功！");
    }).catch(() => { });
}



getList();
</script>
  <style scoped>
  :deep(.el-tree-node__label) {
    font-size: 14px !important;
    display: inline-block;
    width: 100%;
  }
  
  :deep(.el-tree-node__content) {
    height: 40px;
    border-bottom: 1px solid #ebeef5;
    padding: 8px 0;
    line-height: 23px;
  }
  
  .move-handle {
    cursor: move;
    background-color: #eee;
  }
  </style>
  