采购申请修改

src/views/purchase/purchasingPurchaseManager/form.vue

@@ -0,0 +1,228 @@
+<template>
+  <el-dialog
+    :title="form.id ? '编辑' : '新增'"
+    v-model="visible"
+    width="700px"
+    :close-on-click-modal="false"
+    draggable>
+    <el-form
+      ref="dataFormRef"
+      :model="form"
+      :rules="dataRules"
+      label-width="120px"
+      v-loading="loading">
+      <!-- 新增时先选取用户，选后自动带出姓名、工号 -->
+      <el-form-item label="选取用户" prop="userId">
+        <org-selector
+          v-model:orgList="userList"
+          type="user"
+          :multiple="false"
+          @update:orgList="handleUserChange" />
+      </el-form-item>
+      <el-form-item label="姓名" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="选择用户后自动填充"
+          readonly />
+      </el-form-item>
+      <el-form-item label="用户工号" prop="username">
+        <el-input
+          v-model="form.username"
+          placeholder="选择用户后自动填充"
+          readonly />
+      </el-form-item>
+      <el-form-item label="部门" prop="deptId">
+        <org-selector
+          v-model:orgList="deptList"
+          type="dept"
+          :multiple="false"
+          @update:orgList="handleDeptChange" />
+      </el-form-item>
+      <el-form-item label="部门名称" prop="deptName">
+        <el-input
+          v-model="form.deptName"
+          placeholder="选择部门后自动填充"
+          readonly />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.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="PurchasingPurchaseManagerForm">
+import { reactive, ref, nextTick } from 'vue'
+import { getObj, addObj, putObj } from '/@/api/purchase/purchasingPurchaseManager';
+import { useMessage } from '/@/hooks/message';
+import orgSelector from '/@/components/OrgSelector/index.vue';
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const deptList = ref<any[]>([]);
+const userList = ref<any[]>([]);
+const form = reactive({
+  id: '',
+  deptId: '',
+  deptName: '',
+  userId: '',
+  username: '',
+  name: '',
+  remark: '',
+});
+const visible = ref(false);
+const loading = ref(false);
+
+const dataRules = ref({
+  userId: [
+    { required: true, message: '请选取用户（分管负责人）', trigger: 'change' }
+  ],
+  deptId: [
+    { required: true, message: '请选择部门', trigger: 'change' }
+  ],
+  name: [
+    { required: true, message: '请先选取用户', trigger: 'blur' }
+  ],
+  username: [
+    { required: true, message: '请先选取用户', trigger: 'blur' }
+  ],
+});
+
+// 处理部门选择变化
+const handleDeptChange = (list: any[]) => {
+  if (list && list.length > 0) {
+    const dept = list[0];
+    form.deptId = dept.deptId || dept.id || '';
+    form.deptName = dept.name || dept.deptName || '';
+  } else {
+    form.deptId = '';
+    form.deptName = '';
+  }
+};
+
+// 处理用户选择变化（选取用户后自动带出姓名、工号）
+const handleUserChange = (list: any[]) => {
+  if (list && list.length > 0) {
+    const user = list[0];
+    form.userId = user.userId || user.id || '';
+    form.username = user.username || user.userName || '';
+    form.name = user.name || user.realName || '';
+  } else {
+    form.userId = '';
+    form.username = '';
+    form.name = '';
+  }
+};
+
+// 打开弹窗
+const openDialog = async (id?: string) => {
+  visible.value = true;
+  form.id = '';
+  form.deptId = '';
+  form.deptName = '';
+  form.userId = '';
+  form.username = '';
+  form.name = '';
+  form.remark = '';
+  deptList.value = [];
+  userList.value = [];
+
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+    if (id) {
+      // 编辑时，先获取详情数据
+      loading.value = true;
+      getObj(id).then((res: any) => {
+        if (res.data && res.data.length > 0) {
+          const data = res.data[0];
+          Object.assign(form, {
+            id: data.id || '',
+            deptId: data.deptId || '',
+            deptName: data.deptName || '',
+            userId: data.userId || '',
+            username: data.username || '',
+            name: data.name || '',
+            remark: data.remark || '',
+          });
+          // 设置部门列表用于回显
+          if (data.deptId) {
+            deptList.value = [{
+              deptId: data.deptId,
+              name: data.deptName,
+              id: data.deptId,
+              type: 'dept',
+            }];
+          }
+          // 设置用户列表用于回显
+          if (data.userId) {
+            userList.value = [{
+              userId: data.userId,
+              username: data.username,
+              name: data.name,
+              id: data.userId,
+              userName: data.username,
+              realName: data.name,
+              type: 'user',
+            }];
+          }
+        }
+        loading.value = false;
+      }).catch((err: any) => {
+        useMessage().error(err.msg || '获取详情失败');
+        loading.value = false;
+      });
+    }
+  });
+};
+
+// 提交
+const onSubmit = async () => {
+  // 立即设置 loading，防止重复点击
+  if (loading.value) return;
+  loading.value = true;
+
+  try {
+    const valid = await dataFormRef.value.validate().catch(() => {});
+    if (!valid) {
+      loading.value = false;
+      return false;
+    }
+
+    if (form.id) {
+      await putObj(form);
+      useMessage().success('编辑成功');
+    } else {
+      await addObj(form);
+      useMessage().success('新增成功');
+    }
+    visible.value = false;
+    emit('refresh');
+  } catch (err: any) {
+    useMessage().error(err.msg || (form.id ? '编辑失败' : '新增失败'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+</style>

src/views/purchase/purchasingPurchaseManager/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="modern-page-container">
+    <div class="page-wrapper">
+      <!-- 搜索表单卡片 -->
+      <el-card v-show="showSearch" class="search-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">
+              <el-icon class="title-icon"><Search /></el-icon>
+              筛选条件
+            </span>
+          </div>
+        </template>
+        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList" class="search-form">
+          <el-form-item label="部门名称" prop="deptName">
+            <el-input
+              v-model="state.queryForm.deptName"
+              placeholder="请输入部门名称"
+              clearable
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="用户工号" prop="username">
+            <el-input
+              v-model="state.queryForm.username"
+              placeholder="请输入用户工号"
+              clearable
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="姓名" prop="name">
+            <el-input
+              v-model="state.queryForm.name"
+              placeholder="请输入姓名"
+              clearable
+              style="width: 200px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+
+      <!-- 内容卡片 -->
+      <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"
+                @click="formDialogRef.openDialog()"
+                v-auth="'purchase_manager_add'">
+                新增
+              </el-button>
+              <el-button
+                plain
+                :disabled="multiple"
+                icon="Delete"
+                type="primary"
+                class="ml10"
+                v-auth="'purchase_manager_del'"
+                @click="handleDelete(selectObjs)">
+                删除
+              </el-button>
+              <right-toolbar
+                v-model:showSearch="showSearch"
+                :export="'purchase_manager_export'"
+                @exportExcel="exportExcel"
+                class="ml10"
+                @queryTable="getDataList" />
+            </div>
+          </div>
+        </template>
+
+        <!-- 表格 -->
+        <el-table
+          ref="tableRef"
+          :data="state.dataList"
+          v-loading="state.loading"
+          stripe
+          :cell-style="tableStyle.cellStyle"
+          :header-cell-style="tableStyle.headerCellStyle"
+          @selection-change="selectionChangHandle"
+          @sort-change="sortChangeHandle"
+          class="modern-table">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="index" label="序号" width="70" align="center">
+            <template #header>
+              <el-icon><List /></el-icon>
+            </template>
+          </el-table-column>
+          <el-table-column prop="deptName" label="部门名称" min-width="200" show-overflow-tooltip>
+            <template #header>
+              <el-icon><OfficeBuilding /></el-icon>
+              <span style="margin-left: 4px">部门名称</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="姓名" min-width="120" show-overflow-tooltip>
+            <template #header>
+              <el-icon><User /></el-icon>
+              <span style="margin-left: 4px">姓名</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="username" label="用户工号" min-width="150" show-overflow-tooltip>
+            <template #header>
+              <el-icon><UserFilled /></el-icon>
+              <span style="margin-left: 4px">用户工号</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="300" show-overflow-tooltip>
+            <template #header>
+              <el-icon><EditPen /></el-icon>
+              <span style="margin-left: 4px">备注</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip>
+            <template #header>
+              <el-icon><Clock /></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="Delete"
+                link
+                type="danger"
+                v-auth="'purchase_manager_del'"
+                @click="handleDelete([scope.row.id])">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <pagination
+          v-if="state.pagination"
+          v-show="state.pagination.total && state.pagination.total > 0"
+          :total="state.pagination.total"
+          :current="state.pagination.current"
+          :size="state.pagination.size"
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+        />
+      </el-card>
+    </div>
+
+    <!-- 编辑、新增表单对话框 -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList" />
+  </div>
+</template>
+
+<script setup lang="ts" name="PurchasingPurchaseManager">
+import { ref, reactive, defineAsyncComponent } from 'vue'
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObjs } from "/@/api/purchase/purchasingPurchaseManager";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import { List, Document, User, UserFilled, EditPen, Clock, Search, OfficeBuilding } from '@element-plus/icons-vue'
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+
+// 定义变量内容
+const tableRef = ref()
+const formDialogRef = ref()
+const queryRef = ref()
+const showSearch = ref(true)
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+/**
+ * 定义响应式表格数据
+ */
+const state: BasicTableProps = reactive<BasicTableProps>({
+  pageList: fetchList,
+  queryForm: {
+    deptName: '',
+    username: '',
+    name: '',
+  },
+  createdIsNeed: true
+});
+
+/**
+ * 使用 useTable 定义表格相关操作
+ */
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+  tableStyle
+} = useTable(state);
+
+/**
+ * 重置搜索表单
+ */
+const resetQuery = () => {
+  queryRef.value?.resetFields();
+  selectObjs.value = [];
+  multiple.value = true;
+  getDataList();
+};
+
+/**
+ * 导出Excel文件
+ */
+const exportExcel = () => {
+  downBlobFile(
+    '/purchasingPurchaseManager/export',
+    Object.assign(state.queryForm, { ids: selectObjs.value }),
+    'purchasingPurchaseManager.xlsx'
+  );
+};
+
+/**
+ * 表格多选事件处理
+ * @param objs 选中的数据行
+ */
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+/**
+ * 删除当前行
+ * @param ids - 要删除的ID数组
+ */
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('确定要删除该记录吗？');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    useMessage().success('删除成功');
+    getDataList();
+  } catch (err: any) {
+    useMessage().error(err.msg || '删除失败');
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '/@/assets/styles/modern-page.scss';
+</style>