create-jnrs-template-vue 1.1.12 → 1.1.14

package/jnrs-template-vue/src/layout/index.vue

@@ -3,7 +3,7 @@ import { ref, watch, toRefs } from 'vue'
 import SideMenu from './SideMenu.vue'
 import TopHeader from './TopHeader.vue'
 import RouterTabs from './RouterTabs.vue'
-import { useAuthStore, useSystemStore } from '@/stores'
+import { useAuthStore, useSystemStore } from '@jnrs/vue-core/pinia'
 
 const watermarkFont = ref({
   color: 'rgba(0, 0, 0, 0)',

package/jnrs-template-vue/src/router/index.ts

@@ -2,7 +2,7 @@ import { LAYOUT_NAME, GLOBAL_COMPONENT, routes } from './routes'
 import { createVueRouter } from '@jnrs/vue-core/router'
 import type { FileModules, RouteLocationNormalizedGeneric } from '@jnrs/vue-core/router'
 import type { MenuItem } from '@jnrs/vue-core'
-import { useAuthStore, useMenuStore } from '@/stores'
+import { useAuthStore, useMenuStore } from '@jnrs/vue-core/pinia'
 import { MenuApi } from '@/api/system'
 import { hasMenuViewPermission } from '@/utils/permissions'
 

package/jnrs-template-vue/src/utils/file.ts

@@ -3,5 +3,19 @@
  * @WeChat : Tan578853789
  * @File   : file.ts
  * @Date   : 2025/10/16
- * @Desc.  : 文件下载功能
+ * @Desc.  : 文件处理相关函数
  */
+
+// import { blobToUrl } from '@jnrs/shared'
+import { useObjectUrl } from '@vueuse/core'
+import { FileApi } from '@/api/common'
+
+/**
+ * 根据文件下载接口返回的二进制数据生成 URL（用于图片、PDF预览）
+ * @param uniqueFileName 文件唯一名称
+ * @returns 响应式文件 URL
+ */
+export const getFileUrl = async (uniqueFileName: string) => {
+  const blob = await FileApi(uniqueFileName)
+  return useObjectUrl(blob)
+}

package/jnrs-template-vue/src/utils/{common.ts → packages.ts}

@@ -1,11 +1,22 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : common.ts
+ * @Date   : 2025/12/17
+ * @Desc.  : 对 packages 的一些公用方法进行封装
+ */
+
+import { ElMessage } from 'element-plus'
 import {
   getOneDictList as _getOneDictList,
   getDictLabel as _getDictLabel,
   getDictValue as _getDictValue,
-  getDictColor as _getDictColor
+  getDictColor as _getDictColor,
+  downloadFile as _downloadFile
 } from '@jnrs/shared'
 import { useAuthStore } from '@jnrs/vue-core/pinia'
 import { objectToFormData as _objectToFormData } from '@jnrs/shared'
+import { FileApi } from '@/api/common'
 
 /**
  * 根据字典名称获取字典数据
@@ -77,3 +88,24 @@ export const objectToFormData = (obj: Record<string, unknown>) => {
   }
   return _objectToFormData(obj, mapConfig)
 }
+
+/**
+ * 根据文件下载接口返回的二进制数据进行下载
+ * @param uniqueFileName 后端存储的唯一文件名
+ * @param filename 下载文件显示的文件名
+ * @returns loading 下载状态
+ */
+export const downloadFile = async (uniqueFileName: string, filename?: string) => {
+  let loading = true
+  ElMessage.info('文件下载中...')
+  try {
+    const blob = await FileApi(uniqueFileName)
+    _downloadFile(blob, filename || uniqueFileName)
+  } catch (error) {
+    console.error(error)
+    ElMessage.warning('文件下载失败')
+  } finally {
+    loading = false
+  }
+  return loading
+}

package/jnrs-template-vue/src/utils/permissions.ts

@@ -1,5 +1,5 @@
 import { hasPermissionWithSuffix } from '@jnrs/shared'
-import { useAuthStore } from '@/stores'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
 
 // 菜单查看权限
 export function hasMenuViewPermission(requiredPerms: string[] | undefined) {

package/jnrs-template-vue/src/views/demos/crud/index.vue

@@ -1,6 +1,108 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, onActivated } from 'vue'
+import JnTable from '@/components/common/JnTable.vue'
+import JnPagination from '@/components/common/JnPagination.vue'
+import { DemosTableApi } from '@/api/demos/index'
+import type { ProjectItem } from '@/api/demos/index'
+
+const tableData = ref<ProjectItem[]>()
+const total = ref(0)
+const pagination = ref({ currentPage: 1, pageSize: 10 })
+
+const fetchData = () => {
+  console.log(pagination.value)
+}
+
+const getDemosTable = async () => {
+  try {
+    const res = await DemosTableApi()
+    tableData.value = res
+    total.value = res.length
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const edit = (row: ProjectItem) => {
+  console.log(row)
+}
+
+const handleSelectionChange = (row: ProjectItem[]) => {
+  console.log(row)
+}
+
+onActivated(() => {
+  getDemosTable()
+})
+</script>
 
 <template>
-  <div>crud</div>
+  <el-card>
+    <template #header>
+      <span>Card name</span>
+    </template>
+    <JnTable
+      :data="tableData"
+      :pagination="pagination"
+      :showIndexColumn="true"
+      :showSelectionColumn="true"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column prop="code" label="项目编号" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip>
+        <template #default="{ row }">
+          <span>{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="program" label="项目集名称" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="type" label="项目类型" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.type }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="manager" label="项目经理" width="100" align="center" sortable />
+      <el-table-column prop="budget" label="预算" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.budget }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="plannedStartDate" label="计划开始日期" width="130" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.plannedStartDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="plannedFinishDate" label="计划完成日期" width="130" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.plannedFinishDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="progress" label="进度" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.progress }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.status }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="imageDocument" label="图片" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.imageDocument?.attachments.length || 0 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="attachmentDocument" label="附件" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <span>{{ row.attachmentDocument?.attachments.length || 0 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" align="center" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click.stop="edit(row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </JnTable>
+    <jn-pagination :total="total" v-model="pagination" @change="fetchData" />
+  </el-card>
 </template>
 <style scoped></style>

package/jnrs-template-vue/src/views/demos/unitTest/RequestPage.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus'
+import { objectToFormData } from '@/utils/packages'
+import { useMockStore } from '@jnrs/vue-core/pinia'
+import { LoginApi, UserInfoApi } from '@/api/system'
+import { NotFoundApi, NoAuth, DetailsApi } from '@/api/demos'
+import { getFileUrl } from '@/utils/file'
+import { downloadFile } from '@/utils/packages'
+
+const { isMock } = storeToRefs(useMockStore())
+const squareUrl = ref()
+
+const loginParams = ref({
+  account: 'user',
+  password: '123456'
+})
+
+const handleInfoApi = async () => {
+  try {
+    const res = await UserInfoApi()
+    console.log(res)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const handleNotFoundApi = async () => {
+  try {
+    const res = await NotFoundApi()
+    console.log(res)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const handleNoAuth = async (showErrorMsg = true) => {
+  try {
+    const res = await NoAuth(showErrorMsg)
+    console.log(res)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 验证登录接口
+const handleLogin = async () => {
+  try {
+    const res = await LoginApi(loginParams.value)
+    ElMessage.success('登录成功')
+    console.log(res)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 获取数据列表单个数据
+const handleDetailsApi = async () => {
+  try {
+    const res = await DetailsApi()
+    let formatData: Record<string, unknown> = {}
+    formatData = {
+      ...res
+    }
+    if (res.attachmentDocument?.attachments) {
+      formatData.newAttachmentFile = res.attachmentDocument.attachments
+    }
+    if (res.imageDocument?.attachments) {
+      formatData.newImageFiles = res.imageDocument.attachments
+    }
+    console.log(formatData)
+    const formData = objectToFormData(formatData)
+    console.log(formData)
+    for (const [key, value] of formData.entries()) {
+      console.log(key, value)
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 获取后端服务器文件进行下载
+const handleFileView = async () => {
+  try {
+    const url = await getFileUrl('20251217171430919-34bcc1a9-a19d-4b91-9ab6-57cb31c3df28.jpg')
+    squareUrl.value = url.value
+  } catch (error) {
+    console.log(error)
+  }
+}
+</script>
+
+<template>
+  <p>网络请求测试</p>
+  <div>
+    <span>服务器类型：</span>
+    <el-switch v-model="isMock" active-text="Mock 服务器" inactive-text="后端服务器" />
+  </div>
+  <el-button-group>
+    <el-button type="success" size="small" @click="handleInfoApi">获取用户数据</el-button>
+    <el-button type="primary" size="small" @click="handleNotFoundApi">404</el-button>
+    <el-button type="primary" size="small" @click="handleNoAuth()">暂无权限</el-button>
+    <el-button type="primary" size="small" @click="handleNoAuth(false)">暂无权限(不显示 Message)</el-button>
+  </el-button-group>
+  <el-input v-model="loginParams.account" size="small" style="width: 200px">
+    <template #append>
+      <el-button size="small" @click="handleLogin">验证登录接口</el-button>
+    </template>
+  </el-input>
+  <div>
+    <el-button-group>
+      <el-button type="primary" plain size="small" @click="handleDetailsApi">获取数据列表单个数据</el-button>
+      <el-button
+        type="primary"
+        plain
+        size="small"
+        @click="downloadFile('20251217171430919-34bcc1a9-a19d-4b91-9ab6-57cb31c3df28.jpg')"
+      >
+        获取后端服务器文件进行下载
+      </el-button>
+    </el-button-group>
+    <div>
+      <el-avatar shape="square" :src="squareUrl" />
+    </div>
+    <div>
+      <el-button type="primary" plain size="small" @click="handleFileView">获取后端服务器图片</el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+h3 {
+  color: var(--jnrs-color-primary);
+}
+p {
+  margin: 24px 0 8px;
+  color: var(--jnrs-background-primary);
+  background: var(--jnrs-font-primary);
+}
+</style>

package/jnrs-template-vue/src/views/demos/unitTest/index.vue

@@ -1,38 +1,16 @@
 <script setup lang="ts">
+import RequestPage from './RequestPage.vue'
 import { ref, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
-import { ElMessage } from 'element-plus'
-import { MenuApi, LoginApi, UserInfoApi } from '@/api/system'
-import { NotFoundApi, NoAuth, DetailsApi } from '@/api/mock'
 import { handleRouter } from '@jnrs/vue-core/router'
 import type { MenuItem } from '@jnrs/vue-core'
 import { hasPermission } from '@/utils/permissions'
-import { useMockStore } from '@/stores'
-import { objectToFormData } from '@/utils/common'
-
-const { isMock } = storeToRefs(useMockStore())
-
-const loginParams = ref({
-  account: 'user',
-  password: '123456'
-})
+import { MenuApi } from '@/api/system'
 
 const routeOptions = ref<MenuItem[]>([])
 const currentRoute = ref('')
 const datePicker = ref(new Date())
 
-onMounted(() => {
-  handleDetailsApi()
-})
-
-const handleInfoApi = async () => {
-  try {
-    const res = await UserInfoApi()
-    console.log(res)
-  } catch (error) {
-    console.log(error)
-  }
-}
+onMounted(() => {})
 
 const handleMenuApi = async () => {
   try {
@@ -43,58 +21,6 @@ const handleMenuApi = async () => {
   }
 }
 
-const handleNotFoundApi = async () => {
-  try {
-    const res = await NotFoundApi()
-    console.log(res)
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-const handleNoAuth = async (showErrorMsg = true) => {
-  try {
-    const res = await NoAuth(showErrorMsg)
-    console.log(res)
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-const handleDetailsApi = async () => {
-  try {
-    const res = await DetailsApi()
-    let formatData: Record<string, unknown> = {}
-    formatData = {
-      ...res
-    }
-    if (res.attachmentDocument?.attachments) {
-      formatData.newAttachmentFile = res.attachmentDocument.attachments
-    }
-    if (res.imageDocument?.attachments) {
-      formatData.newImageFiles = res.imageDocument.attachments
-    }
-    console.log(formatData)
-    const formData = objectToFormData(formatData)
-    console.log(formData)
-    for (const [key, value] of formData.entries()) {
-      console.log(key, value)
-    }
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-const handleLogin = async () => {
-  try {
-    const res = await LoginApi(loginParams.value)
-    ElMessage.success('登录成功')
-    console.log(res)
-  } catch (error) {
-    console.log(error)
-  }
-}
-
 const handleRouteChange = () => {
   handleRouter({
     name: currentRoute.value
@@ -128,29 +54,9 @@ const handleRouteChange = () => {
         <button size="small" v-permissions="['test:del']">删除</button>
       </li>
     </ul>
-    <p>网络请求测试</p>
-    <div>
-      <span>服务器类型：</span>
-      <el-switch v-model="isMock" active-text="Mock 服务器" inactive-text="后端服务器" />
-    </div>
-    <el-button-group>
-      <el-button type="success" size="small" @click="handleMenuApi">获取完整菜单数据</el-button>
-      <el-button type="success" size="small" @click="handleInfoApi">获取用户数据</el-button>
-      <el-button type="primary" size="small" @click="handleNotFoundApi">404</el-button>
-      <el-button type="primary" size="small" @click="handleNoAuth()">暂无权限</el-button>
-      <el-button type="primary" size="small" @click="handleNoAuth(false)">暂无权限(不显示 Message)</el-button>
-    </el-button-group>
-    <el-input v-model="loginParams.account" size="small" style="width: 200px">
-      <template #append>
-        <el-button size="small" @click="handleLogin">验证登录接口</el-button>
-      </template>
-    </el-input>
-    <div>
-      <el-button-group>
-        <el-button type="primary" plain size="small" @click="handleDetailsApi">获取数据列表单个数据</el-button>
-      </el-button-group>
-    </div>
+    <RequestPage />
     <p>完整路由测试（先点击按钮，获取完整菜单数据）</p>
+    <el-button type="success" plain @click="handleMenuApi">获取完整菜单数据</el-button>
     <el-cascader
       v-model="currentRoute"
       :options="routeOptions"

package/jnrs-template-vue/src/views/login/index.vue

@@ -2,7 +2,7 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
 import { RoleApi, LoginApi } from '@/api/system'
-import { useAuthStore } from '@/stores'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
 import { handleRouter, useRoute } from '@jnrs/vue-core/router'
 import { isWeakPwd } from '@jnrs/shared/validator'
 import { formatDateTime, formatWeekday } from '@jnrs/shared'
@@ -51,21 +51,21 @@ const submitForm = async () => {
       const loginDateTime = formatDateTime() + ' ' + formatWeekday()
 
       // 获取角色列表，将登录人角色对应的权限叠加给当前登录人（一次性获取叠加）
-      const roleRes = await RoleApi()
-      let permissionsMerger = restParameter.permissions
-      if (Array.isArray(restParameter.permissions)) {
-        permissionsMerger = [
-          ...new Set([
-            ...restParameter.permissions,
-            ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
-          ])
-        ]
-      }
+      // const roleRes = await RoleApi()
+      // let permissionsMerger = restParameter.permissions
+      // if (Array.isArray(restParameter.permissions)) {
+      //   permissionsMerger = [
+      //     ...new Set([
+      //       ...restParameter.permissions,
+      //       ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
+      //     ])
+      //   ]
+      // }
       // setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
 
       setUserInfo({
         ...restParameter,
-        permissions: permissionsMerger,
+        // permissions: permissionsMerger,
         account: ruleForm.value.account,
         loginDateTime
       })

package/jnrs-template-vue/src/views/system/menu/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useMenuStore } from '@/stores'
+import { useMenuStore } from '@jnrs/vue-core/pinia'
 import { useAsyncTableHeight } from '@jnrs/vue-core/composables'
 
 const { maxHeight } = useAsyncTableHeight('el_table_menu', 0)

package/jnrs-template-vue/src/views/system/mine/baseInfo.vue

@@ -3,9 +3,9 @@ import { ref, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus'
 import type { UploadProps } from 'element-plus'
-import { useAuthStore } from '@/stores'
-import { useAvatar } from '@/composables/common/useAvatar'
-import { getOneDictList } from '@/utils/common'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+import { useAvatar } from '@/composables/base/useAvatar'
+import { getOneDictList } from '@/utils/packages'
 import type { User } from '@jnrs/shared'
 
 const { userInfo, token } = storeToRefs(useAuthStore())

package/jnrs-template-vue/src/views/system/mine/securitySettings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { PasswordChangeApi } from '@/api/system'
-import { useAuthStore } from '@/stores'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
 import { handleRouter } from '@jnrs/vue-core/router'
 import { isWeakPwd } from '@jnrs/shared/validator'
 import type { FormInstance, FormItemRule } from 'element-plus'

package/jnrs-template-vue/viteMockServe/index.ts

@@ -7,6 +7,7 @@ import dictRes from './dictRes.json'
 import dictItemRes from './dictItemRes.json'
 import roleRes from './roleRes.json'
 import detailsRes from './detailsRes.json'
+import tableRes from './tableRes.json'
 
 export default [
   ...successMock,
@@ -72,5 +73,13 @@ export default [
     response: () => {
       return detailsRes
     }
+  },
+  // 获取表格数据
+  {
+    url: '/mock/demos/table',
+    method: 'get',
+    response: () => {
+      return tableRes
+    }
   }
 ]