create-jnrs-template-vue 1.2.1 → 1.2.3

package/jnrs-template-vue/src/composables/tools/useMouseSelection.ts

@@ -0,0 +1,150 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : useMouseSelection.ts
+ * @Date   : 2025/04/14
+ * @Desc.  : 鼠标框选表格进行多选、回车执行回调
+ */
+
+import { onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
+
+/**
+ * @param {*} containerClass 表格或容器类名，默认值 el-table，如果页面存在多个表格，则必须分别传入自定义类名
+ * @param {*} rowClass 表格或容器类名，默认值 el-table__row
+ * @param {*} callback 框选后的回调，默认处理的是 input[type='checkbox'] 元素
+ * @returns handleMouseDown
+ * @example <el-table @mousedown="handleMouseDown" @selection-change="handleSelectionChange">
+ */
+export function useMouseSelection({
+  containerClass = 'jn_table',
+  rowClass = 'el-table__row',
+  callback = handleSelection
+} = {}) {
+  let isDragging = false
+  let startPoint = { x: 0, y: 0 }
+  let endPoint = { x: 0, y: 0 }
+
+  onMounted(() => {
+    window.addEventListener('mouseup', handleMouseUp)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('mouseup', handleMouseUp)
+  })
+
+  onActivated(() => {
+    window.addEventListener('mouseup', handleMouseUp)
+  })
+
+  onDeactivated(() => {
+    window.removeEventListener('mouseup', handleMouseUp)
+  })
+
+  // 鼠标按下事件
+  const handleMouseDown = (event: MouseEvent) => {
+    window.addEventListener('mousemove', handleMouseMove)
+    isDragging = false
+    startPoint = { x: event.clientX, y: event.clientY }
+    endPoint = { ...startPoint }
+  }
+
+  // 鼠标移动事件
+  const handleMouseMove = (event: MouseEvent) => {
+    endPoint = { x: event.clientX, y: event.clientY }
+    // 判断是否为拖动
+    if (Math.abs(endPoint.x - startPoint.x) > 5 && Math.abs(endPoint.y - startPoint.y) > 25) {
+      isDragging = true
+    }
+    // 如果没有拖动，则认为是单击
+    if (isDragging) {
+      selectRows()
+    }
+    setFixedRectBoxStyle()
+  }
+
+  // 鼠标抬起事件
+  const handleMouseUp = () => {
+    window.removeEventListener('mousemove', handleMouseMove)
+    // 如果没有拖动，则认为是单击
+    if (isDragging) {
+      isDragging = false
+    }
+    setFixedRectBoxStyle()
+  }
+
+  // 判断选中的行
+  const selectRows = () => {
+    const container = document.querySelector(`.${containerClass}`) as HTMLElement
+    const rows = container?.querySelectorAll(`.${rowClass}`) as NodeListOf<HTMLElement>
+    if (!rows) {
+      return false
+    }
+    rows.forEach((row) => {
+      const rect = row.getBoundingClientRect()
+      const isIntersecting =
+        rect.right > Math.min(startPoint.x, endPoint.x) &&
+        rect.left < Math.max(startPoint.x, endPoint.x) &&
+        rect.bottom > Math.min(startPoint.y, endPoint.y) &&
+        rect.top < Math.max(startPoint.y, endPoint.y)
+      if (isIntersecting && callback) {
+        callback(row)
+      }
+    })
+  }
+
+  // 设置框选框的位置
+  const setFixedRectBoxStyle = () => {
+    const selectionBox = document.querySelector('.useMouseSelection_fixedRectBox') as HTMLElement
+    if (selectionBox) {
+      const left = Math.min(startPoint.x, endPoint.x) + 'px'
+      const top = Math.min(startPoint.y, endPoint.y) + 'px'
+      const width = Math.abs(endPoint.x - startPoint.x) + 'px'
+      const height = Math.abs(endPoint.y - startPoint.y) + 'px'
+      Object.assign(selectionBox.style, {
+        display: isDragging ? 'block' : 'none',
+        left: left,
+        top: top,
+        width: width,
+        height: height
+      })
+
+      const container = document.querySelector(`.${containerClass}`) as HTMLElement
+      Object.assign(container.style, {
+        'user-select': isDragging ? 'none' : 'auto'
+      })
+    }
+  }
+
+  checkAndAddElement()
+
+  return {
+    handleMouseDown
+  }
+}
+
+// 回调选中逻辑
+const handleSelection = (row: HTMLElement) => {
+  const checkbox = row.querySelector("input[type='checkbox']") as HTMLInputElement
+  if (checkbox && !checkbox.checked) {
+    checkbox.click()
+  }
+}
+
+// 往页面上添加框选框元素
+const checkAndAddElement = () => {
+  const fixedRectBox = document.querySelector('.useMouseSelection_fixedRectBox')
+  if (!fixedRectBox) {
+    const newDiv = document.createElement('div')
+    newDiv.className = 'useMouseSelection_fixedRectBox'
+    Object.assign(newDiv.style, {
+      display: 'none',
+      position: 'fixed',
+      'z-index': 100,
+      border: '2px dashed #409eff',
+      'background-color': 'rgba(64, 158, 255, 0.2)',
+      'pointer-events': 'none',
+      'will-change': 'transform'
+    })
+    document.body.appendChild(newDiv)
+  }
+}

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

@@ -68,6 +68,7 @@ $mainFontColor: rgba(255, 255, 255, 0.8);
       font-weight: normal;
       font-family: AlimamaShuHeiTi-Bold;
       white-space: nowrap;
+      letter-spacing: 2px;
       transform: translate(-50%, -50%);
       transition: all 0.3s ease;
       filter: opacity(1);

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

@@ -8,7 +8,7 @@ import { useSystemStore, useAuthStore, useMenuStore } from '@jnrs/vue-core/pinia
 import { LogoutApi } from '@/api/system'
 import { getDictLabel, getDictColor } from '@/utils/packages'
 
-import ImageView from '@/components/base/ImageView.vue'
+import ImageView from '@/components/common/ImageView.vue'
 
 const { userInfo, clearAuth } = useAuthStore()
 const { clearMenu } = useMenuStore()

package/jnrs-template-vue/src/locales/en.ts

@@ -8,7 +8,7 @@ export default {
     formAccount: 'Please enter your account',
     formPassword: 'Please enter your password',
     formBtn: 'Log In',
-    greeting: 'Welcome to'
+    greeting: 'Welcome'
   },
   layout: {}
 }

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

@@ -4,7 +4,7 @@ import en from './en'
 import { zhCn as vueCore_zhCn, en as vueCore_en } from '@jnrs/vue-core/locales'
 
 const i18n = createI18n({
-  legacy: false, // 启用 Composition API 模式
+  legacy: false, // legacy 为 false 则启用 Composition API 模式
   globalInjection: true, // 允许在模板中使用 $t
   locale: 'zhCn',
   fallbackLocale: 'en',

package/jnrs-template-vue/src/main.ts

@@ -1,7 +1,7 @@
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import '@jnrs/shared/styles/theme.scss'
-import '@/assets/styles/main.scss'
+import '@/assets/styles/index.scss'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

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

@@ -1,5 +1,5 @@
 /**
- * 附件（文件）信息
+ * 文件信息
  */
 export interface Attachment {
   /**
@@ -15,7 +15,7 @@ export interface Attachment {
    */
   fileName: string
   /**
-   * 文件名唯一标识
+   * 文件名唯一标识（用于文件获取 API）
    */
   uniqueFileName: string
   /**
@@ -29,10 +29,52 @@ export interface Attachment {
 }
 
 /**
- * 文档容器（用于图片或附件）
+ * 文件容器（用于图片或附件）
  */
 export interface Document {
   id: number
   description: string | null
   attachments: Attachment[]
 }
+
+/**
+ * 图片 & 附件数据
+ */
+export interface FileContainer {
+  /**
+   * 图片
+   */
+  imageDocument?: Document
+  /**
+   * 附件
+   */
+  attachmentDocument?: Document
+}
+
+/**
+ * 分页
+ */
+export interface Pagination {
+  /**
+   * 当前页码
+   */
+  pageNo: number
+  /**
+   * 每页大小
+   */
+  pageSize: number
+}
+
+/**
+ * 分页列表数据
+ */
+export interface PageTableData<T> extends Pagination {
+  /**
+   * 数据列表
+   */
+  list: T[]
+  /**
+   * 数据总数
+   */
+  count: number
+}

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

@@ -1,22 +1,27 @@
 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
-import type { Attachment } from '@/types'
+import type { Attachment, Pagination } from '@/types'
 import type { ProjectItem, AddProjectItem } from '@/api/demos/index'
 import { ref, onActivated } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { objectMatchAssign } from '@jnrs/shared'
+import { objectMatchAssign, dateFormatsToObject } from '@jnrs/shared'
+import { debounce } from '@jnrs/shared/lodash'
 import { isNumberGtZero } from '@jnrs/shared/validator'
-import { getDictList, objectToFormData } from '@/utils/packages'
-import { DemosTableApi, DemosFormApi } from '@/api/demos/index'
-import JnTable from '@/components/common/JnTable.vue'
-import JnPagination from '@/components/common/JnPagination.vue'
-import ImageView from '@/components/base/ImageView.vue'
-import PdfView from '@/components/base/PdfView.vue'
-import JnEdit from '@/components/common/JnEdit.vue'
-import JnDictTag from '@/components/common/JnDictTag.vue'
-import JnDatetime from '@/components/common/JnDatetime.vue'
-import JnFileUpload from '@/components/base/JnFileUpload.vue'
+import { getDictList, objectToFormData, downloadFile } from '@/utils/packages'
+import {
+  DemosTableApi,
+  DemosFormApi,
+  DemosImportTemplateApi,
+  DemosImportDataApi,
+  DemosExportApi
+} from '@/api/demos/index'
+
+import { JnDialog, JnDatetime, JnPagination, JnFileUpload, JnTable, JnImportAndExport } from '@jnrs/vue-core/components'
+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'
 
 interface ProcessedProjectItem extends ProjectItem {
   newImageFiles?: Attachment[]
@@ -26,28 +31,30 @@ interface ProcessedProjectItem extends ProjectItem {
 const loading = ref(false)
 const tableData = ref<ProcessedProjectItem[]>([])
 const total = ref(0)
-const pagination = ref({ currentPage: 1, pageSize: 10 })
-const jnEditRef = ref()
-const ruleFormRef = ref<FormInstance>()
+const pagination = ref<Pagination>({ pageNo: 1, pageSize: 10 })
 
+// 编辑
+const editDialogRef = ref()
+const ruleFormRef = ref<FormInstance>()
 const ruleForm = ref<AddProjectItem>({
   id: '',
   name: '',
   program: '',
   projectType: undefined,
+  managerId: undefined,
   budget: 0,
   plannedStartDate: '',
   description: '',
   newImageFiles: [],
   newAttachmentFile: []
 })
-
 const rules = ref<FormRules>({
   name: [{ required: true, message: '请输入', trigger: 'change' }],
   program: [{ required: true, message: '请选择', trigger: 'change' }],
   projectType: [{ required: true, message: '请选择', trigger: 'change' }],
   plannedStartDate: [{ required: true, message: '请选择', trigger: 'change' }],
   newImageFiles: [{ required: true, message: '请上传', trigger: 'change' }],
+  managerId: [{ required: true, message: '请选择', trigger: 'change' }],
   budget: [
     { required: true, message: '请输入', trigger: 'change' },
     {
@@ -57,35 +64,49 @@ const rules = ref<FormRules>({
   ]
 })
 
-const handlePaginationChange = () => {
-  console.log(pagination.value)
-}
+// 查询
+const queryForm = ref({
+  code: '',
+  projectType: undefined,
+  manager: '',
+  plannedStartDate: ''
+})
 
 const handleSelectionChange = (row: ProjectItem[]) => {
   console.log(row)
 }
 
-const getDemosTable = async () => {
+const getDemosTable = debounce(async () => {
   try {
-    const res = await DemosTableApi()
-    tableData.value = res.map((item) => ({
+    const res = await DemosTableApi({
+      ...pagination.value,
+      ...queryForm.value
+    })
+    tableData.value = res.list.map((item) => ({
       ...item,
       newImageFiles: item.imageDocument?.attachments ?? undefined,
       newAttachmentFile: item.attachmentDocument?.attachments ?? undefined
     }))
-    total.value = res.length
+    total.value = res.count
   } catch (error) {
     console.error(error)
   }
-}
+}, 300)
 
 // 新增和修改
 const handleEdit = (row?: ProjectItem) => {
-  jnEditRef.value.open()
+  editDialogRef.value.open()
   queueMicrotask(() => {
     ruleFormRef.value?.resetFields()
     const matched = objectMatchAssign(ruleForm.value, row)
     ruleForm.value = matched
+    // Select 组件数据回填
+    if (row && 'managerId' in row && 'manager' in row) {
+      ruleForm.value.managerId = {
+        managerId: row.managerId,
+        manager: row.manager
+      }
+    }
   })
 }
 
@@ -94,7 +115,10 @@ const submitForm = () => {
   ruleFormRef.value?.validate(async (valid) => {
     if (valid) {
       loading.value = true
-      const formData = objectToFormData(ruleForm.value)
+      const formData = objectToFormData({
+        ...ruleForm.value,
+        managerId: ruleForm.value.managerId?.managerId
+      })
       try {
         await DemosFormApi(formData)
         ElMessage({
@@ -117,7 +141,8 @@ onActivated(() => {
 </script>
 
 <template>
-  <JnEdit ref="jnEditRef" title="项目管理" width="600px">
+  <!-- 编辑弹窗 -->
+  <JnDialog ref="editDialogRef" title="项目管理" width="600px">
     <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="name">
@@ -133,6 +158,14 @@ onActivated(() => {
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="项目经理" prop="managerId">
+        <SelectManager
+          v-model="ruleForm.managerId"
+          :formRef="ruleFormRef"
+          validateFieldName="managerId"
+          :simpleValue="false"
+        ></SelectManager>
+      </el-form-item>
       <el-form-item label="预算" prop="budget">
         <el-input-number v-model="ruleForm.budget" :min="0" :precision="2" :step="10000" controls-position="right">
           <template #prefix>
@@ -171,6 +204,7 @@ onActivated(() => {
           :fileSizeMb="50"
           :limit="3"
           drag
+          :downloadFileFn="(file) => downloadFile(file.uniqueFileName, file.fileName)"
         />
       </el-form-item>
       <el-form-item label="上传文件" prop="newAttachmentFile">
@@ -180,20 +214,92 @@ onActivated(() => {
     <template #footer>
       <el-button type="success" icon="Select" :loading="loading" @click="submitForm()">提交</el-button>
     </template>
-  </JnEdit>
+  </JnDialog>
 
   <el-card>
     <template #header>
-      <div class="card_header">
+      <div style="display: flex; justify-content: space-between; align-items: center">
         <span>项目管理</span>
-        <el-button type="primary" size="small" :icon="Plus" @click="handleEdit()">新增</el-button>
+        <div style="display: flex; justify-content: space-between; align-items: center">
+          <JnImportAndExport
+            :importTemplateApi="DemosImportTemplateApi"
+            importBtnName="导入项目"
+            :importApi="DemosImportDataApi"
+            exportBtnName="导出项目"
+            :exportApi="DemosExportApi"
+            :exportParams="{
+              ...dateFormatsToObject(queryForm.plannedStartDate)
+            }"
+            :exportDynamicParamsConfig="{
+              label: '项目编号',
+              prop: 'code'
+            }"
+            :exportDisabled="tableData.length === 0"
+            size="small"
+            @change="getDemosTable()"
+          />
+          <el-button type="primary" size="small" :icon="Plus" @click="handleEdit()" style="margin-left: 12px">
+            新增
+          </el-button>
+        </div>
       </div>
     </template>
+
+    <!-- 查询条件 -->
+    <el-form :model="queryForm" size="small" inline v-loading="loading">
+      <el-form-item label="项目编号" prop="code">
+        <el-input v-model="queryForm.code" clearable style="width: 150px">
+          <template #append>
+            <el-button icon="Search" @click="getDemosTable()" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="项目名称" prop="projectType">
+        <el-select
+          v-model="queryForm.projectType"
+          filterable
+          placeholder=""
+          clearable
+          style="width: 150px"
+          @change="getDemosTable()"
+        >
+          <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="item in getDictList('projectType')"
+            :key="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目经理" prop="manager">
+        <SelectManager
+          v-model="queryForm.manager"
+          :initialParams="{ role: 1 }"
+          size="small"
+          width="200px"
+          @change="getDemosTable()"
+        ></SelectManager>
+      </el-form-item>
+      <el-form-item label="计划开始时间" prop="plannedStartDate">
+        <el-date-picker
+          v-model="queryForm.plannedStartDate"
+          value-format="YYYY-MM-DD"
+          size="small"
+          style="width: 150px"
+          @change="getDemosTable()"
+        />
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据列表 -->
     <JnTable
       :data="tableData"
       :pagination="pagination"
+      :autoHeight="true"
+      :showScrollbar="true"
       :showIndexColumn="true"
       :showSelectionColumn="true"
+      :showMouseSelection="true"
       @selection-change="handleSelectionChange"
     >
       <el-table-column prop="code" label="项目编号" min-width="200" sortable show-overflow-tooltip />
@@ -205,7 +311,7 @@ onActivated(() => {
       <el-table-column prop="program" label="项目集名称" min-width="200" sortable show-overflow-tooltip />
       <el-table-column prop="projectType" label="项目类型" width="100" align="center" sortable>
         <template #default="{ row }">
-          <JnDictTag dictName="projectType" :value="row.projectType" />
+          <DictTag dictName="projectType" :value="row.projectType" />
         </template>
       </el-table-column>
       <el-table-column prop="manager" label="项目经理" width="100" align="center" sortable />
@@ -231,7 +337,7 @@ onActivated(() => {
       </el-table-column>
       <el-table-column prop="status" label="状态" width="100" align="center" sortable>
         <template #default="{ row }">
-          <JnDictTag dictName="status" :value="row.status" :showColor="false" />
+          <DictTag dictName="status" :value="row.status" :showColor="false" />
         </template>
       </el-table-column>
       <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
@@ -252,13 +358,7 @@ onActivated(() => {
       </el-table-column>
     </JnTable>
 
-    <JnPagination :total="total" v-model="pagination" @change="handlePaginationChange" />
+    <!-- 表格分页 -->
+    <JnPagination :total="total" v-model="pagination" @change="getDemosTable" />
   </el-card>
 </template>
-
-<style lang="scss" scoped>
-.card_header {
-  display: flex;
-  justify-content: space-between;
-}
-</style>

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

@@ -7,7 +7,7 @@ import { NotFoundApi, NoAuth, DetailsApi } from '@/api/demos'
 import { getFileUrl } from '@/utils/file'
 import { downloadFile } from '@/utils/packages'
 
-import ImageView from '@/components/base/ImageView.vue'
+import ImageView from '@/components/common/ImageView.vue'
 
 const squareUrl = ref()
 

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

@@ -5,12 +5,16 @@ import { handleRouter } from '@jnrs/vue-core/router'
 import type { MenuItem } from '@jnrs/vue-core'
 import { hasPermission } from '@/utils/permissions'
 import { MenuApi } from '@/api/system'
+import { formatDateTime, formatWeekday } from '@jnrs/shared'
+import { isFloatGtZero } from '@jnrs/shared/validator'
+import { testI18n } from '@jnrs/shared/request'
 
 const routeOptions = ref<MenuItem[]>([])
 const currentRoute = ref('')
 const datePicker = ref(new Date())
-
-onMounted(() => {})
+const datetime = ref(formatDateTime() + ' ' + formatWeekday())
+const validator = ref()
+const testI18nInCore = ref('')
 
 const handleMenuApi = async () => {
   try {
@@ -26,11 +30,31 @@ const handleRouteChange = () => {
     name: currentRoute.value
   })
 }
+
+const changeI18n = () => {
+  datetime.value = formatDateTime() + ' ' + formatWeekday()
+  isFloatGtZero({}, '0', (msg) => {
+    validator.value = msg
+  })
+  testI18nInCore.value = testI18n()
+}
+
+onMounted(() => {
+  isFloatGtZero({}, '0', (msg) => {
+    validator.value = msg
+  })
+  testI18nInCore.value = testI18n()
+})
 </script>
 
 <template>
   <div>
     <h3>Playground - 功能测试</h3>
+    <p>国际化测试</p>
+    <div>@jnrs/shared: {{ datetime }}</div>
+    <div>@jnrs/shared/validator: {{ validator }}</div>
+    <div>@jnrs/shared/request: {{ testI18nInCore }}</div>
+    <el-button type="primary" size="small" @click="changeI18n">切换语言后点击按钮更新国际化显示</el-button>
     <p>权限测试（admin 账号拥有全部权限，请用非 admin 账号测试该功能）</p>
     <ul>
       <li>

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

@@ -191,8 +191,6 @@ const submitForm = async () => {
     box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
     // background: url('@/assets/img/common/card_bg.png') no-repeat;
     // background-size: 100% 100%;
-    text-align: center;
-    font-size: 22px;
 
     .card_left_mid {
       width: 50%;
@@ -204,7 +202,10 @@ const submitForm = async () => {
       }
 
       .title {
+        text-align: center;
         font-size: 24px;
+        letter-spacing: 4px;
+        white-space: nowrap;
         font-weight: normal;
         font-family: AlimamaShuHeiTi-Bold;
         color: rgba(255, 255, 255, 0.5);
@@ -238,6 +239,7 @@ const submitForm = async () => {
 
       .title {
         text-align: center;
+        text-transform: uppercase;
         color: var(--jnrs-color-primary);
       }
 
@@ -261,6 +263,7 @@ const submitForm = async () => {
         color: var(--jnrs-color-primary-06);
         font-size: 14px;
         text-align: center;
+        text-transform: uppercase;
 
         &::before,
         &::after {
@@ -286,6 +289,8 @@ const submitForm = async () => {
       position: absolute;
       bottom: 5px;
       font-size: 12px;
+      letter-spacing: 2px;
+      text-transform: uppercase;
       color: rgba(0, 0, 0, 0.1);
     }
   }