create-jnrs-template-vue 1.2.1 → 1.2.2

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

@@ -1,22 +1,21 @@
 <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 { debounce } from '@jnrs/shared/lodash'
 import { isNumberGtZero } from '@jnrs/shared/validator'
-import { getDictList, objectToFormData } from '@/utils/packages'
+import { getDictList, objectToFormData, downloadFile } 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 { JnDialog, JnDatetime, JnPagination, JnFileUpload, JnTable } 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 +25,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 pagination = ref<Pagination>({ pageNo: 1, pageSize: 10 })
+
+// 编辑
 const jnEditRef = 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,27 +58,33 @@ const rules = ref<FormRules>({
   ]
 })
 
-const handlePaginationChange = () => {
-  console.log(pagination.value)
-}
+// 查询
+const queryForm = ref({
+  code: '',
+  projectType: undefined,
+  manager: ''
+})
 
 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) => {
@@ -86,6 +93,13 @@ const handleEdit = (row?: ProjectItem) => {
     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 +108,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 +134,8 @@ onActivated(() => {
 </script>
 
 <template>
-  <JnEdit ref="jnEditRef" title="项目管理" width="600px">
+  <!-- 编辑弹窗 -->
+  <JnDialog ref="jnEditRef" 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 +151,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 +197,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 +207,62 @@ 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">
         <span>项目管理</span>
         <el-button type="primary" size="small" :icon="Plus" @click="handleEdit()">新增</el-button>
       </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>
+
+    <!-- 数据列表 -->
     <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 +274,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 +300,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 +321,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/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);
     }
   }

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

@@ -2,11 +2,11 @@
 import { ElMessage } from 'element-plus'
 import { ref, onActivated } from 'vue'
 import { DictApi, DictDetailApi, DictChangeApi } from '@/api/system'
-import { useAsyncTableHeight } from '@jnrs/vue-core/composables'
+import { useReactivityTableHeight } from '@jnrs/vue-core/composables'
 import type { DictItem } from '@jnrs/shared'
 import { hasPermission } from '@/utils/permissions'
 
-const { maxHeight } = useAsyncTableHeight('el_table_dict', 0)
+const { maxHeight } = useReactivityTableHeight({ className: 'el_table_dict', bottomGap: 0 })
 const PERMISSION_EDIT = ['dict:edit']
 const loading = ref(false)
 const tableData = ref<DictItem[]>()

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useMenuStore } from '@jnrs/vue-core/pinia'
-import { useAsyncTableHeight } from '@jnrs/vue-core/composables'
+import { useReactivityTableHeight } from '@jnrs/vue-core/composables'
 
-const { maxHeight } = useAsyncTableHeight('el_table_menu', 0)
+const { maxHeight } = useReactivityTableHeight({ className: 'el_table_menu', bottomGap: 0 })
 const loading = ref(false)
 
 const { menus } = useMenuStore()

package/jnrs-template-vue/tsconfig.json

@@ -20,14 +20,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": [
-    "src/**/*",
-    "vite.config.ts",
-    "../../../packages/shared/src/validate.ts",
-    "../../../packages/shared/src/validator.ts",
-    "../../../packages/vue-core/src/components/JnImageView.vue",
-    "../../../packages/vue-core/src/components/JnPdfView.vue",
-    "src/components/common/JnEdit.vue"
-  ],
+  "include": ["src/**/*", "vite.config.ts", "../../../packages/vue-core/src/composables/useMouseSelection.ts"],
   "exclude": ["node_modules", "dist"]
 }

package/jnrs-template-vue/vite.config.ts

@@ -64,8 +64,7 @@ export default defineConfig({
       output: {
         manualChunks: {
           '@jnrs/core': ['@jnrs/core'],
-          '@jnrs/shared': ['@jnrs/shared'],
-          '@jnrs/vue-core': ['@jnrs/vue-core']
+          '@jnrs/shared': ['@jnrs/shared']
         }
       }
     }

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

@@ -33,10 +33,9 @@ export default [
       try {
         const fs = await import('fs').then((m) => m.default || m)
         const path = await import('path').then((m) => m.default || m)
+        const filePath = path.resolve(process.cwd(), `viteMockServe/file/${fileName}`)
+        const fileDir = path.resolve(process.cwd(), 'viteMockServe/file')
 
-        const filePath = path.resolve(process.cwd(), `viteMockServe/fileSrc/${fileName}`)
-
-        const fileDir = path.resolve(process.cwd(), 'viteMockServe/fileSrc')
         if (!filePath.startsWith(fileDir + path.sep) && filePath !== fileDir) {
           res.statusCode = 403
           res.end('Forbidden')