巡检记录，巡检路线，巡检点完成，巡检项目完成

src/views/system/inspection/Item/index2.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="p-2">
+  <div class="h-full flex flex-col p-2">
+    <Pageheader></Pageheader>
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
@@ -16,7 +17,7 @@
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card class="flex-1" shadow="never">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -39,12 +40,22 @@
 
       <el-table v-loading="loading" border :data="itemList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="项目名称" align="center" prop="itemName" />
+        <el-table-column label="项目名称" width="200" align="center" prop="itemName" />
         <el-table-column label="巡检标准" align="center" prop="inspectionStandard" />
-        <el-table-column label="状态：0-开启，1-关闭" align="center" prop="status" />
-        <el-table-column label="添加人" align="center" prop="remark" />
-        <el-table-column label="添加时间" align="center" prop="remark" />
-        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="状态" width="200" align="center" prop="status">
+          <template #default="scope">
+            <el-switch
+              @change="(val) => handleChange(val, scope.row.id)"
+              v-model="scope.row.status"
+              active-value="0"
+              inactive-value="1"
+              active-text="开启"
+              inactive-text="关闭"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="添加人" width="150" align="center" prop="remark" />
+        <el-table-column label="添加时间" width="150" align="center" prop="remark" />
         <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
@@ -59,49 +70,11 @@
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
-    <!-- 添加或修改巡检项目对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="itemFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="项目名称" prop="itemName">
-          <el-input v-model="form.itemName" placeholder="请输入项目名称" />
-        </el-form-item>
-        <el-form-item label="项目编号" prop="itemCode">
-          <el-input v-model="form.itemCode" placeholder="请输入项目编号" />
-        </el-form-item>
-        <el-form-item label="巡检标准" prop="inspectionStandard">
-          <el-input v-model="form.inspectionStandard" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="项目类别" prop="category">
-          <el-input v-model="form.category" placeholder="请输入项目类别" />
-        </el-form-item>
-        <el-form-item label="项目描述" prop="description">
-          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="默认值" prop="defaultValue">
-          <el-input v-model="form.defaultValue" placeholder="请输入默认值" />
-        </el-form-item>
-        <el-form-item label="选项，多个用逗号分隔" prop="options">
-          <el-input v-model="form.options" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="是否必填：0-否，1-是" prop="isRequired">
-          <el-input v-model="form.isRequired" placeholder="请输入是否必填：0-否，1-是" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
 <script setup name="Item" lang="ts">
-import { listItem, getItem, delItem, addItem, updateItem } from '@/api/system/InspectionItem/index';
+import { listItem, getItem, delItem, addItem, updateItem, updateItemStatus } from '@/api/system/InspectionItem/index';
 import { ItemVO, ItemQuery, ItemForm } from '@/api/system/InspectionItem/type';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -202,21 +175,39 @@ const handleSelectionChange = (selection: ItemVO[]) => {
   multiple.value = !selection.length;
 };
 
+const router = useRouter();
+
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加巡检项目';
+  router.push({
+    path: '/inspection/addItem'
+  });
 };
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: ItemVO) => {
-  reset();
-  const _id = row?.id || ids.value[0];
-  const res = await getItem(_id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改巡检项目';
+  router.push({
+    path: '/inspection/addItem',
+    query: {
+      id: row.id
+    }
+  });
+};
+
+const handleChange = (value: string, id: string) => {
+  console.log(value, id, typeof value, typeof id);
+  updateItemStatus({
+    id,
+    status: value
+  })
+    .then(() => {
+      proxy?.$modal.msgSuccess('状态修改成功');
+      getList();
+    })
+    .catch(() => {
+      proxy?.$modal.msgError('状态修改失败，请稍后再试');
+      getList();
+    });
 };
 
 /** 提交按钮 */
@@ -239,7 +230,7 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: ItemVO) => {
   const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除巡检项目编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await proxy?.$modal.confirm('是否确认删除？').finally(() => (loading.value = false));
   await delItem(_ids);
   proxy?.$modal.msgSuccess('删除成功');
   await getList();
@@ -260,3 +251,9 @@ onMounted(() => {
   getList();
 });
 </script>
+
+<style lang="scss" scoped>
+.el-table {
+  height: calc(100% - 80px);
+}
+</style>