create-jnrs-vue 2.0.2 → 2.0.4

package/jnrs-vue/src/views/examples/program-management/subPage/editDialog.vue

@@ -9,7 +9,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import { ref, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { objectMatchAssign, verifyNumberGtZero } from '@jnrs/shared'
-import { getDictList, extractFieldId } from '@/utils'
+import { extractFieldId } from '@/utils'
 import {
   type SubProject,
   type AddSubProject,
@@ -19,6 +19,7 @@ import {
 } from '@/api/examples/program-management/sub-project'
 import { JnDialog } from '@jnrs/vue-core/components'
 import SelectManager from '@/components/select/SelectManager.vue'
+import DictSelector from '@/components/common/DictSelector.vue'
 
 const emit = defineEmits<{
   success: []
@@ -28,6 +29,7 @@ const loading = ref(false)
 const editDialogRef = ref()
 const ruleFormRef = ref<FormInstance>()
 const currentProgramId = ref<string | undefined>(undefined)
+const editingRow = ref<{ code?: number; name?: string } | null>(null)
 const ruleForm = ref<AddSubProject | UpdateSubProject>({
   id: '',
   programId: undefined,
@@ -56,6 +58,7 @@ const rules = ref<FormRules>({
 
 // 打开弹窗
 const open = (programId: string | undefined, row?: SubProject) => {
+  editingRow.value = row ? { code: row.code, name: row.name } : null
   currentProgramId.value = programId
   editDialogRef.value.open()
   nextTick(() => {
@@ -132,6 +135,14 @@ defineExpose({
 <template>
   <!-- 编辑弹窗 -->
   <JnDialog ref="editDialogRef" title="子项目" width="600px">
+    <el-alert v-if="editingRow" type="info" :closable="false" show-icon>
+      <template #title>
+        当前编辑：子项目编码
+        <strong>{{ editingRow.code }}</strong>
+        | 子项目名称
+        <strong>{{ editingRow.name }}</strong>
+      </template>
+    </el-alert>
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" v-loading="loading">
       <el-form-item prop="id"></el-form-item>
       <el-form-item label="子项目编码" prop="code">
@@ -148,14 +159,7 @@ defineExpose({
         <el-input v-model.trim="ruleForm.name" maxlength="20" show-word-limit style="width: 100%" />
       </el-form-item>
       <el-form-item label="项目类型" prop="projectType">
-        <el-select v-model="ruleForm.projectType" filterable placeholder="">
-          <el-option
-            :label="item.label"
-            :value="item.value"
-            v-for="item in getDictList('projectType')"
-            :key="item.value"
-          />
-        </el-select>
+        <DictSelector v-model="ruleForm.projectType" dictName="projectType" />
       </el-form-item>
       <el-form-item label="负责人" prop="managerId">
         <SelectManager
@@ -181,18 +185,10 @@ defineExpose({
         </el-input-number>
       </el-form-item>
       <el-form-item label="计划开始时间" prop="plannedStartDate">
-        <el-date-picker
-          v-model="ruleForm.plannedStartDate"
-          value-format="YYYY-MM-DD"
-          style="width: 220px"
-        />
+        <el-date-picker v-model="ruleForm.plannedStartDate" value-format="YYYY-MM-DD" style="width: 220px" />
       </el-form-item>
       <el-form-item label="计划完成时间" prop="plannedFinishDate">
-        <el-date-picker
-          v-model="ruleForm.plannedFinishDate"
-          value-format="YYYY-MM-DD"
-          style="width: 220px"
-        />
+        <el-date-picker v-model="ruleForm.plannedFinishDate" value-format="YYYY-MM-DD" style="width: 220px" />
       </el-form-item>
     </el-form>
     <template #footer>

package/jnrs-vue/src/views/examples/project-management/EditDialog.vue

@@ -2,7 +2,7 @@
  @Author : TanRui
  @WeChat : Tan578853789
  @Title  : 项目编辑组件
- @File   : /agentic/crud/EditDialog.vue
+ @File   : /examples/project-management/EditDialog.vue
  @Date   : 2026/01/01
  @Desc.  : 该页面为增删改查类业务功能的页面模板，包含了常见的功能如表单控件、components/common 通用功能组件、导入导出、图片附件、附件上传等功能。开发者可以在此基础上进行修改和扩展，以适应具体的业务需求。
  -->
@@ -12,17 +12,19 @@ import type { FormInstance, FormRules } from 'element-plus'
 import { ref, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { objectMatchAssign, verifyNumberGtZero } from '@jnrs/shared'
-import { getDictList, downloadFile, extractFieldId } from '@/utils'
+import { downloadFile, extractFieldId } from '@/utils'
 import { useDateRangeField } from '@/composables/useDateRangeField'
 import {
   type Project,
   type AddProject,
   type UpdateProject,
   addProjectApi,
-  editProjectApi
+  editProjectApi,
+  getProjectByIdApi
 } from '@/api/examples/project-management'
 import { JnDialog, JnFileUpload } from '@jnrs/vue-core/components'
 import SelectManager from '@/components/select/SelectManager.vue'
+import DictSelector from '@/components/common/DictSelector.vue'
 
 const emit = defineEmits<{
   success: []
@@ -31,6 +33,7 @@ const emit = defineEmits<{
 const loading = ref(false)
 const editDialogRef = ref()
 const ruleFormRef = ref<FormInstance>()
+const editingRow = ref<{ code?: number; name?: string } | null>(null)
 const ruleForm = ref<AddProject | UpdateProject>({
   id: '',
   code: 0,
@@ -65,22 +68,48 @@ const rules = ref<FormRules>({
 })
 
 // 打开弹窗
-const open = (row?: Project) => {
+const open = async (row?: Project) => {
+  editingRow.value = row ? { code: row.code, name: row.name } : null
   editDialogRef.value.open()
-  nextTick(() => {
+  nextTick(async () => {
     handleReset()
-    ruleForm.value = objectMatchAssign(ruleForm.value, row)
-    if (row && row.managerId && row.managerName) {
-      ruleForm.value.managerId = {
-        id: row.managerId,
-        name: row.managerName
+    if (row?.id) {
+      // 编辑模式：通过 API 获取最新详情
+      loading.value = true
+      try {
+        const detail = await getProjectByIdApi(row.id)
+        ruleForm.value = objectMatchAssign(ruleForm.value, detail)
+        if (detail.managerId && detail.managerName) {
+          ruleForm.value.managerId = {
+            id: detail.managerId,
+            name: detail.managerName
+          }
+        }
+        if (detail.pmoManagerId && detail.pmoManagerName) {
+          ruleForm.value.pmoManagerId = detail.pmoManagerId.map((item, index) => ({
+            id: item,
+            name: detail.pmoManagerName[index] || ''
+          }))
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        loading.value = false
+      }
+    } else {
+      ruleForm.value = objectMatchAssign(ruleForm.value, row)
+      if (row && row.managerId && row.managerName) {
+        ruleForm.value.managerId = {
+          id: row.managerId,
+          name: row.managerName
+        }
+      }
+      if (row && row.pmoManagerId && row.pmoManagerName) {
+        ruleForm.value.pmoManagerId = row.pmoManagerId.map((item, index) => ({
+          id: item,
+          name: row.pmoManagerName[index] || ''
+        }))
       }
-    }
-    if (row && row.pmoManagerId && row.pmoManagerName) {
-      ruleForm.value.pmoManagerId = row.pmoManagerId.map((item, index) => ({
-        id: item,
-        name: row.pmoManagerName[index] || ''
-      }))
     }
   })
 }
@@ -143,6 +172,14 @@ defineExpose({
 <template>
   <!-- 编辑弹窗 -->
   <JnDialog ref="editDialogRef" title="项目管理" width="800px">
+    <el-alert v-if="editingRow" type="info" :closable="false" show-icon>
+      <template #title>
+        当前编辑：项目编号
+        <strong>{{ editingRow.code }}</strong>
+        | 项目名称
+        <strong>{{ editingRow.name }}</strong>
+      </template>
+    </el-alert>
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" v-loading="loading">
       <el-form-item prop="id"></el-form-item>
       <el-form-item label="项目编号" prop="code">
@@ -159,14 +196,7 @@ defineExpose({
         <el-input v-model.trim="ruleForm.name" maxlength="20" show-word-limit style="width: 100%" />
       </el-form-item>
       <el-form-item label="项目类型" prop="projectType">
-        <el-select v-model="ruleForm.projectType" filterable placeholder="">
-          <el-option
-            :label="item.label"
-            :value="item.value"
-            v-for="item in getDictList('projectType')"
-            :key="item.value"
-          />
-        </el-select>
+        <DictSelector v-model="ruleForm.projectType" dictName="projectType" />
       </el-form-item>
       <el-form-item label="项目经理" prop="managerId">
         <SelectManager

package/jnrs-vue/src/views/examples/project-management/index.vue

@@ -2,7 +2,7 @@
  @Author : TanRui
  @WeChat : Tan578853789
  @Title  : 项目管理
- @File   : /agentic/crud/index.vue
+ @File   : /examples/project-management/index.vue
  @Date   : 2026/01/01
  @Desc.  : 该页面为增删改查类业务功能的页面模板，包含了常见的功能和组件使用示例，如表格、分页、查询条件、编辑弹窗、图片和附件预览等。开发者可以在此基础上进行修改和扩展，以适应具体的业务需求。
  -->
@@ -14,7 +14,6 @@ import { Plus } from '@element-plus/icons-vue'
 import { useRoute } from '@jnrs/vue-core/router'
 import { dateFormatsToObject } from '@jnrs/shared'
 import { debounce } from '@jnrs/shared/lodash'
-import { getDictList } from '@/utils'
 import { showDeleteConfirm } from '@/utils/common'
 import {
   type Project,
@@ -32,6 +31,7 @@ import ImageView from '@/components/common/ImageView.vue'
 import PdfView from '@/components/common/PdfView.vue'
 import DictTag from '@/components/common/DictTag.vue'
 import SelectManager from '@/components/select/SelectManager.vue'
+import DictSelector from '@/components/common/DictSelector.vue'
 import EditDialog from './EditDialog.vue'
 import { useDateRangeField } from '@/composables/useDateRangeField'
 
@@ -184,14 +184,7 @@ onActivated(() => {
         <el-input v-model="queryForm.code" clearable style="width: 150px" />
       </el-form-item>
       <el-form-item label="项目类型" prop="projectType">
-        <el-select v-model="queryForm.projectType" filterable placeholder="" clearable style="width: 100px">
-          <el-option
-            :label="item.label"
-            :value="item.value"
-            v-for="item in getDictList('projectType')"
-            :key="item.value"
-          />
-        </el-select>
+        <DictSelector v-model="queryForm.projectType" dictName="projectType" width="100px" />
       </el-form-item>
       <el-form-item label="项目经理" prop="managerId">
         <SelectManager
@@ -287,14 +280,7 @@ onActivated(() => {
       </el-table-column>
       <el-table-column prop="projectStatus" label="状态" width="120" align="center" sortable>
         <template #default="{ row }">
-          <el-select v-model="row.projectStatus" filterable placeholder="">
-            <el-option
-              :label="item.label"
-              :value="item.value"
-              v-for="item in getDictList('projectStatus')"
-              :key="item.value"
-            />
-          </el-select>
+          <DictSelector v-model="row.projectStatus" dictName="projectStatus" width="100px" />
         </template>
       </el-table-column>
       <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />

package/jnrs-vue/viteMockServe/auth.mock.ts

@@ -0,0 +1,41 @@
+import loginResAdmin from './json/auth-login-admin.json'
+import loginResUser from './json/auth-login-user.json'
+
+interface LoginResponseParams {
+  body: {
+    account?: string
+    [key: string]: unknown
+  }
+}
+
+interface UserInfoResponseParams {
+  headers: {
+    authorization?: string
+    [key: string]: unknown
+  }
+}
+
+export default [
+  // 登录
+  {
+    url: '/api/mock/auth/login',
+    method: 'post',
+    response: (opt: LoginResponseParams) => {
+      if (opt.body.account === 'admin') {
+        return loginResAdmin
+      }
+      return loginResUser
+    }
+  },
+  // 获取个人信息
+  {
+    url: '/api/mock/auth/user-info',
+    method: 'get',
+    response: (opt: UserInfoResponseParams) => {
+      if ((opt.headers.authorization ?? '').includes('admin')) {
+        return loginResAdmin
+      }
+      return loginResUser
+    }
+  }
+]

package/jnrs-vue/viteMockServe/details.mock.ts

@@ -0,0 +1,12 @@
+import detailsRes from './json/details.json'
+
+export default [
+  // 获取数据详情
+  {
+    url: '/api/mock/details',
+    method: 'get',
+    response: () => {
+      return detailsRes
+    }
+  }
+]

package/jnrs-vue/viteMockServe/dict.mock.ts

@@ -0,0 +1,21 @@
+import dictRes from './json/dict-list.json'
+import dictItemRes from './json/dict-detail.json'
+
+export default [
+  // 获取字典
+  {
+    url: '/api/mock/dict-manager',
+    method: 'get',
+    response: () => {
+      return dictRes
+    }
+  },
+  // 获取单个字典
+  {
+    url: /\/api\/mock\/dict-manager\/detail\/\d+/,
+    method: 'get',
+    response: () => {
+      return dictItemRes
+    }
+  }
+]