更新采购申请

src/views/purchase/purchasingcategory/form.vue

@@ -0,0 +1,182 @@
+<template>
+  <el-dialog 
+    :title="dataForm.id ? '编辑' : '新增'" 
+    v-model="visible" 
+    width="600px"
+    :close-on-click-modal="false"
+    draggable>
+    <el-form 
+      ref="formRef" 
+      :model="dataForm" 
+      :rules="dataRules" 
+      label-width="100px" 
+      v-loading="loading">
+      <el-form-item label="父级节点" prop="parentCode">
+        <el-tree-select
+          v-model="dataForm.parentCode"
+          :data="parentData"
+          :props="{ value: 'code', label: 'name', children: 'children' }"
+          class="w100"
+          clearable
+          check-strictly
+          :render-after-expand="false"
+          placeholder="请选择父级节点（不选则为根节点）"
+        />
+      </el-form-item>
+      <el-form-item label="品目编码" prop="code">
+        <el-input 
+          v-model="dataForm.code" 
+          placeholder="请输入品目编码" 
+          clearable 
+          :disabled="!!dataForm.id" />
+      </el-form-item>
+      <el-form-item label="品目名称" prop="name">
+        <el-input 
+          v-model="dataForm.name" 
+          placeholder="请输入品目名称" 
+          clearable />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input 
+          v-model="dataForm.remark" 
+          type="textarea" 
+          :rows="3"
+          placeholder="请输入备注" 
+          clearable />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit" :disabled="loading">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="PurchasingCategoryForm">
+import { reactive, ref, nextTick } from 'vue'
+import { getTree, addObj, editObj } from '/@/api/purchase/purchasingcategory';
+import { useMessage } from '/@/hooks/message';
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const formRef = ref();
+const dataForm = reactive({
+  id: '',
+  parentCode: '',
+  code: '',
+  name: '',
+  remark: '',
+  isMallService: '',
+  isMallProject: '',
+});
+const parentData = ref<any[]>([]);
+const visible = ref(false);
+const loading = ref(false);
+
+const dataRules = ref({
+  code: [
+    { required: true, message: '请输入品目编码', trigger: 'blur' }
+  ],
+  name: [
+    { required: true, message: '请输入品目名称', trigger: 'blur' }
+  ],
+});
+
+// 打开弹窗
+const openDialog = (type: string, rowData?: any) => {
+  visible.value = true;
+  dataForm.id = '';
+  dataForm.parentCode = '';
+  dataForm.code = '';
+  dataForm.name = '';
+  dataForm.remark = '';
+  dataForm.isMallService = '';
+  dataForm.isMallProject = '';
+
+  nextTick(() => {
+    formRef.value?.resetFields();
+    if (type === 'add' && rowData?.code) {
+      // 新增时，rowData 是父节点数据，设置父级编码
+      dataForm.parentCode = rowData.code;
+    } else if (type === 'edit' && rowData) {
+      // 编辑时，rowData 是当前行数据
+      Object.assign(dataForm, {
+        id: rowData.id || '',
+        parentCode: rowData.parentCode || '',
+        code: rowData.code || '',
+        name: rowData.name || '',
+        remark: rowData.remark || '',
+        isMallService: rowData.isMallService || '',
+        isMallProject: rowData.isMallProject || '',
+      });
+    }
+  });
+
+  getTreeData();
+};
+
+// 提交
+const onSubmit = async () => {
+  // 立即设置 loading，防止重复点击
+  if (loading.value) return;
+  loading.value = true;
+
+  try {
+    const valid = await formRef.value.validate().catch(() => {});
+    if (!valid) {
+      loading.value = false;
+      return false;
+    }
+
+    if (dataForm.id) {
+      await editObj(dataForm);
+      useMessage().success('编辑成功');
+    } else {
+      await addObj(dataForm);
+      useMessage().success('新增成功');
+    }
+    visible.value = false;
+    emit('refresh');
+  } catch (err: any) {
+    useMessage().error(err.msg || (dataForm.id ? '编辑失败' : '新增失败'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 从后端获取树形数据
+const getTreeData = async () => {
+  try {
+    const res = await getTree();
+    parentData.value = [];
+    const root = {
+      code: '',
+      name: '根节点',
+      children: [] as any[],
+    };
+    if (res.data && Array.isArray(res.data)) {
+      root.children = res.data;
+    }
+    parentData.value.push(root);
+  } catch (err: any) {
+    useMessage().error(err.msg || '获取树形数据失败');
+    parentData.value = [];
+  }
+};
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+.w100 {
+  width: 100%;
+}
+</style>
+

src/views/purchase/purchasingcategory/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="modern-page-container">
+    <div class="page-wrapper">
+      <!-- 内容卡片 -->
+      <el-card class="content-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Document /></el-icon>
+              采购品目管理
+            </span>
+            <div class="header-actions">
+              <el-button 
+                icon="FolderAdd" 
+                type="primary"
+                v-auth="'purchase_purchasingcategory_add'"
+                @click="formDialogRef.openDialog('add')">
+                新增
+              </el-button>
+              <right-toolbar class="ml10" />
+            </div>
+          </div>
+        </template>
+
+        <!-- 树形表格（懒加载：仅首屏加载根节点，展开时再加载子节点） -->
+        <el-table 
+          ref="tableRef"
+          :data="state.dataList" 
+          v-loading="state.loading" 
+          stripe
+          lazy
+          :load="loadTreeNode"
+          :cell-style="tableStyle.cellStyle" 
+          :header-cell-style="tableStyle.headerCellStyle"
+          class="modern-table"
+          row-key="code"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+          <el-table-column type="index" label="序号" width="70" align="center">
+            <template #header>
+              <el-icon><List /></el-icon>
+            </template>
+            <template #default="{ $index, row }">
+              {{ getRowIndex($index, row) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="code" label="品目编码" min-width="150" show-overflow-tooltip>
+            <template #header>
+              <el-icon><DocumentCopy /></el-icon>
+              <span style="margin-left: 4px">品目编码</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="品目名称" min-width="200" show-overflow-tooltip>
+            <template #header>
+              <el-icon><Document /></el-icon>
+              <span style="margin-left: 4px">品目名称</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip>
+            <template #header>
+              <el-icon><EditPen /></el-icon>
+              <span style="margin-left: 4px">备注</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" fixed="right" width="150">
+            <template #default="scope">
+              <el-button 
+                icon="Edit" 
+                link 
+                type="primary"
+                v-auth="'purchase_purchasingcategory_edit'"
+                @click="formDialogRef.openDialog('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button 
+                icon="Delete" 
+                link 
+                type="danger"
+                v-auth="'purchase_purchasingcategory_del'"
+                @click="handleDelete(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+
+    <!-- 编辑、新增表单对话框 -->
+    <FormDialog ref="formDialogRef" @refresh="getDataList" />
+  </div>
+</template>
+
+<script setup lang="ts" name="PurchasingCategory">
+import { ref, reactive, defineAsyncComponent } from 'vue'
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { getTreeRoots, getTreeChildren, delObj } from "/@/api/purchase/purchasingcategory";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { List, Document, DocumentCopy, EditPen } from '@element-plus/icons-vue'
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+
+// 定义变量内容
+const tableRef = ref()
+const formDialogRef = ref()
+
+/**
+ * 查询树根节点（懒加载：首屏只加载根节点）
+ */
+const queryTreeRoots = () => {
+  return getTreeRoots().then((res: any) => {
+    const list = res?.data ?? [];
+    return { data: Array.isArray(list) ? list : [] };
+  });
+};
+
+/**
+ * 懒加载子节点：展开某行时按需请求子节点
+ * @param row 当前行
+ * @param treeNode 树节点信息
+ * @param resolve 回调，传入子节点数组
+ */
+const loadTreeNode = (row: any, treeNode: any, resolve: (data: any[]) => void) => {
+  const parentCode = row?.code;
+  if (!parentCode) {
+    resolve([]);
+    return;
+  }
+  getTreeChildren(parentCode)
+    .then((res: any) => {
+      const list = res?.data ?? [];
+      resolve(Array.isArray(list) ? list : []);
+    })
+    .catch(() => resolve([]));
+};
+
+/**
+ * 定义响应式表格数据
+ */
+const state: BasicTableProps = reactive<BasicTableProps>({
+  pageList: queryTreeRoots,
+  queryForm: {},
+  isPage: false, // 树形表格不分页
+});
+
+/**
+ * 使用 useTable 定义表格相关操作
+ */
+const { getDataList, tableStyle } = useTable(state);
+
+/**
+ * 计算行序号（考虑树形结构）
+ */
+const getRowIndex = (index: number, row: any) => {
+  // 对于树形表格，序号需要根据实际显示的行来计算
+  // 这里简化处理，直接返回 index + 1
+  return index + 1;
+};
+
+/**
+ * 删除当前行
+ * @param row - 当前行数据
+ */
+const handleDelete = async (row: any) => {
+  try {
+    await useMessageBox().confirm('确定要删除该记录吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+  } catch {
+    return;
+  }
+
+  try {
+    // 使用 id 或 code 作为删除参数（根据后端接口决定）
+    const deleteId = row.id || row.code;
+    await delObj(deleteId);
+    useMessage().success('删除成功');
+    getDataList();
+  } catch (err: any) {
+    useMessage().error(err.msg || '删除失败');
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '/@/assets/styles/modern-page.scss';
+</style>
+