套索工具(超叼版)

src/views/project/project/index.vue

@@ -43,6 +43,36 @@
       </template>
 
       <el-table v-loading="loading" :data="projectList" @selection-change="handleSelectionChange">
+        <el-table-column type="expand" width="50">
+          <template #default="{ row }">
+            <div class="w187.25 ml-12.5">
+              <el-button class="mb" type="primary" size="small" @click="handleOpenSetChild(row.id)" icon="plus">添加子项目</el-button>
+
+              <el-table :data="row.children" border stripe>
+                <el-table-column label="序号" type="index" width="55" align="center" />
+                <el-table-column label="名称" align="center" prop="projectName" width="296" />
+                <el-table-column label="创建时间" align="center" prop="createTime" width="199" />
+                <el-table-column fixed="right" align="center" label="操作" class-name="small-padding fixed-width" width="199">
+                  <template #default="scope">
+                    <el-space>
+                      <el-button
+                        link
+                        type="success"
+                        icon="Edit"
+                        @click="handleOpenSetChild(row.id, scope.row.id, scope.row.projectName)"
+                        v-hasPermi="['project:project:edit']"
+                        >修改
+                      </el-button>
+                      <el-button link type="danger" icon="Delete" @click="handleChildDel(scope.row.id)" v-hasPermi="['project:project:remove']"
+                        >删除
+                      </el-button>
+                    </el-space>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="序号" type="index" width="60" align="center" />
         <el-table-column label="项目名称" align="center" prop="projectName">
@@ -278,21 +308,33 @@
         @close="polygonStatus = false"
       ></open-layers-map>
     </el-dialog>
+    <el-dialog title="添加子项目" v-model="childProjectStatus" width="400">
+      <span>填写子项目名称</span>
+      <el-input v-model="childProjectForm.projectName"></el-input>
+      <template #footer>
+        <span>
+          <el-button @click="childProjectStatus = false">取消</el-button>
+          <el-button type="primary" @click="handleSetChild">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="Project" lang="ts">
 import {
+  addChildProject,
   addProject,
   addProjectFacilities,
   addProjectPilePoint,
   addProjectSquare,
   delProject,
+  getChildProject,
   getProject,
   listProject,
   updateProject
 } from '@/api/project/project';
-import { ProjectForm, ProjectQuery, ProjectVO, locationType } from '@/api/project/project/types';
+import { ProjectForm, ProjectQuery, ProjectVO, childProjectQuery, locationType } from '@/api/project/project/types';
 import amap from '@/components/amap/index.vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable, project_category_type, project_type } = toRefs<any>(
@@ -306,6 +348,7 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
+const childProjectStatus = ref(false);
 const amapStatus = ref(false);
 const queryFormRef = ref<ElFormInstance>();
 const projectFormRef = ref<ElFormInstance>();
@@ -313,6 +356,11 @@ const polygonStatus = ref(false);
 const dxfFile = ref(null);
 const projectId = ref<string>('');
 const designId = ref<string>('');
+const childProjectForm = reactive<childProjectQuery>({
+  projectName: '',
+  pid: '',
+  id: ''
+});
 //被选中的节点
 const nodes = ref<any>([]);
 const dialog = reactive<DialogOption>({
@@ -563,6 +611,50 @@ const handleDelete = async (row?: ProjectVO) => {
   await getList();
 };
 
+//删除子项目
+const handleChildDel = async (id) => {
+  await proxy?.$modal.confirm('是否确认删除项目编号为"' + id + '"的数据项？').finally(() => (loading.value = false));
+  await delProject(id);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+//增加/修改子项目
+const handleOpenSetChild = async (pid, id?, name?) => {
+  childProjectStatus.value = true;
+  childProjectForm.id = id;
+  childProjectForm.pid = pid;
+  childProjectForm.projectName = name;
+};
+
+const resetChildQuert = () => {
+  childProjectForm.id = '';
+  childProjectForm.pid = '';
+  childProjectForm.projectName = '';
+};
+
+//增加/修改子项目
+const handleSetChild = async () => {
+  if (!childProjectForm.projectName.trim()) return proxy.$modal.msgError('请填写项目名称');
+  if (childProjectForm.id) {
+    let res = await updateProject({ id: childProjectForm.id, projectName: childProjectForm.projectName });
+    if (res.code == 200) {
+      proxy.$modal.msgSuccess('修改成功');
+      childProjectStatus.value = false;
+      resetChildQuert();
+      getList();
+    }
+  } else {
+    let res = await addChildProject(childProjectForm);
+    if (res.code == 200) {
+      proxy.$modal.msgSuccess('添加成功');
+      childProjectStatus.value = false;
+      resetChildQuert();
+      getList();
+    }
+  }
+};
+
 /** 导出按钮操作 */
 const handleExport = () => {
   proxy?.download(