create-jnrs-template-vue 1.2.3 → 1.2.4

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

@@ -8,14 +8,8 @@ import { Plus } from '@element-plus/icons-vue'
 import { objectMatchAssign, dateFormatsToObject } from '@jnrs/shared'
 import { debounce } from '@jnrs/shared/lodash'
 import { isNumberGtZero } from '@jnrs/shared/validator'
-import { getDictList, objectToFormData, downloadFile } from '@/utils/packages'
-import {
-  DemosTableApi,
-  DemosFormApi,
-  DemosImportTemplateApi,
-  DemosImportDataApi,
-  DemosExportApi
-} from '@/api/demos/index'
+import { getDictList, downloadFile } from '@/utils/packages'
+import { TableApi, EditApi, ImportTemplateApi, ImportDataApi, ExportApi } from '@/api/demos/index'
 
 import { JnDialog, JnDatetime, JnPagination, JnFileUpload, JnTable, JnImportAndExport } from '@jnrs/vue-core/components'
 import ImageView from '@/components/common/ImageView.vue'
@@ -39,7 +33,6 @@ const ruleFormRef = ref<FormInstance>()
 const ruleForm = ref<AddProjectItem>({
   id: '',
   name: '',
-  program: '',
   projectType: undefined,
   managerId: undefined,
   budget: 0,
@@ -50,7 +43,6 @@ const ruleForm = ref<AddProjectItem>({
 })
 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' }],
@@ -76,9 +68,10 @@ const handleSelectionChange = (row: ProjectItem[]) => {
   console.log(row)
 }
 
-const getDemosTable = debounce(async () => {
+const getTable = debounce(async () => {
+  loading.value = true
   try {
-    const res = await DemosTableApi({
+    const res = await TableApi({
       ...pagination.value,
       ...queryForm.value
     })
@@ -90,6 +83,8 @@ const getDemosTable = debounce(async () => {
     total.value = res.count
   } catch (error) {
     console.error(error)
+  } finally {
+    loading.value = false
   }
 }, 300)
 
@@ -115,15 +110,12 @@ const submitForm = () => {
   ruleFormRef.value?.validate(async (valid) => {
     if (valid) {
       loading.value = true
-      const formData = objectToFormData({
-        ...ruleForm.value,
-        managerId: ruleForm.value.managerId?.managerId
-      })
       try {
-        await DemosFormApi(formData)
+        await EditApi(ruleForm.value)
         ElMessage({
           message: '数据已保存',
           grouping: true,
+          showClose: true,
           type: 'success'
         })
       } catch (err) {
@@ -136,7 +128,7 @@ const submitForm = () => {
 }
 
 onActivated(() => {
-  getDemosTable()
+  getTable()
 })
 </script>
 
@@ -216,17 +208,17 @@ onActivated(() => {
     </template>
   </JnDialog>
 
-  <el-card>
+  <el-card v-loading="loading">
     <template #header>
       <div style="display: flex; justify-content: space-between; align-items: center">
         <span>项目管理</span>
         <div style="display: flex; justify-content: space-between; align-items: center">
           <JnImportAndExport
-            :importTemplateApi="DemosImportTemplateApi"
+            :importTemplateApi="ImportTemplateApi"
             importBtnName="导入项目"
-            :importApi="DemosImportDataApi"
+            :importApi="ImportDataApi"
             exportBtnName="导出项目"
-            :exportApi="DemosExportApi"
+            :exportApi="ExportApi"
             :exportParams="{
               ...dateFormatsToObject(queryForm.plannedStartDate)
             }"
@@ -236,7 +228,7 @@ onActivated(() => {
             }"
             :exportDisabled="tableData.length === 0"
             size="small"
-            @change="getDemosTable()"
+            @change="getTable()"
           />
           <el-button type="primary" size="small" :icon="Plus" @click="handleEdit()" style="margin-left: 12px">
             新增
@@ -248,9 +240,9 @@ onActivated(() => {
     <!-- 查询条件 -->
     <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">
+        <el-input v-model="queryForm.code" clearable style="width: 200px">
           <template #append>
-            <el-button icon="Search" @click="getDemosTable()" />
+            <el-button icon="Search" @click="getTable()" />
           </template>
         </el-input>
       </el-form-item>
@@ -260,8 +252,8 @@ onActivated(() => {
           filterable
           placeholder=""
           clearable
-          style="width: 150px"
-          @change="getDemosTable()"
+          style="width: 200px"
+          @change="getTable()"
         >
           <el-option
             :label="item.label"
@@ -277,7 +269,7 @@ onActivated(() => {
           :initialParams="{ role: 1 }"
           size="small"
           width="200px"
-          @change="getDemosTable()"
+          @change="getTable()"
         ></SelectManager>
       </el-form-item>
       <el-form-item label="计划开始时间" prop="plannedStartDate">
@@ -285,8 +277,8 @@ onActivated(() => {
           v-model="queryForm.plannedStartDate"
           value-format="YYYY-MM-DD"
           size="small"
-          style="width: 150px"
-          @change="getDemosTable()"
+          style="width: 200px"
+          @change="getTable()"
         />
       </el-form-item>
     </el-form>
@@ -303,11 +295,7 @@ onActivated(() => {
       @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 }">
-          {{ row.name }}
-        </template>
-      </el-table-column>
+      <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip />
       <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 }">
@@ -359,6 +347,6 @@ onActivated(() => {
     </JnTable>
 
     <!-- 表格分页 -->
-    <JnPagination :total="total" v-model="pagination" @change="getDemosTable" />
+    <JnPagination :total="total" v-model="pagination" @change="getTable" />
   </el-card>
 </template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { TableApi } from '@/api/demos/index'
+import { JnDatetime } from '@jnrs/vue-core/components'
+import CardTable from '@/components/common/CardTable.vue'
+import ImageView from '@/components/common/ImageView.vue'
+import PdfView from '@/components/common/PdfView.vue'
+import DictTag from '@/components/common/DictTag.vue'
+</script>
+
+<template>
+  <CardTable :getTableDataApi="TableApi">
+    <template #header>项目列表</template>
+    <template #table>
+      <el-table-column prop="name" label="项目名称" min-width="200" sortable show-overflow-tooltip />
+      <el-table-column prop="projectType" label="项目类型" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <DictTag dictName="projectType" :value="row.projectType" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="manager" label="项目经理" width="100" align="center" sortable />
+      <el-table-column prop="plannedStartDate" label="计划开始时间" width="130" align="center" sortable>
+        <template #default="{ row }">
+          <JnDatetime :value="row.plannedStartDate" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="imageDocument" label="图片" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <ImageView :loadKeys="row.newImageFiles" preview height="50px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="attachmentDocument" label="附件" width="100" align="center" sortable>
+        <template #default="{ row }">
+          <PdfView :loadKeys="row.newAttachmentFile" isPdf />
+        </template>
+      </el-table-column>
+    </template>
+  </CardTable>
+</template>
+
+<style lang="scss" scoped></style>

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

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { objectToFormData } from '@/utils/packages'
 import { LoginApi, UserInfoApi } from '@/api/system'
-import { NotFoundApi, NoAuth, DetailsApi } from '@/api/demos'
+import { NotFoundApi, NoAuthApi, DetailsApi } from '@/api/demos'
 import { getFileUrl } from '@/utils/file'
 import { downloadFile } from '@/utils/packages'
 
@@ -36,7 +36,7 @@ const handleNotFoundApi = async () => {
 
 const handleNoAuth = async (showErrorMsg = true) => {
   try {
-    const res = await NoAuth(showErrorMsg)
+    const res = await NoAuthApi(showErrorMsg)
     console.log(res)
   } catch (error) {
     console.log(error)

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

@@ -45,18 +45,22 @@ const submitForm = async () => {
       const { token, dict, ...restParameter } = loginRes
       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()
-          ])
-        ]
+      try {
+        // 获取角色列表，将登录人角色对应的权限叠加给当前登录人（一次性获取叠加）
+        const roleRes = await RoleApi()
+        if (Array.isArray(restParameter.permissions)) {
+          permissionsMerger = [
+            ...new Set([
+              ...restParameter.permissions,
+              ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
+            ])
+          ]
+        }
+        setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
+      } catch (e) {
+        console.log(e)
       }
-      setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
 
       setUserInfo({
         ...restParameter,
@@ -153,6 +157,7 @@ const submitForm = async () => {
 
 .topBarBtn {
   font-size: 22px;
+  color: #c2c2c2;
 }
 
 .topFixed_right {
@@ -163,9 +168,9 @@ const submitForm = async () => {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  background: var(--jnrs-card-primary);
-  padding: 4px 16px;
-  border-radius: 10px;
+  padding: 8px 16px;
+  // background: var(--jnrs-card-primary);
+  // border-radius: 10px;
 }
 
 .card {
@@ -204,7 +209,6 @@ const submitForm = async () => {
       .title {
         text-align: center;
         font-size: 24px;
-        letter-spacing: 4px;
         white-space: nowrap;
         font-weight: normal;
         font-family: AlimamaShuHeiTi-Bold;
@@ -289,7 +293,6 @@ 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

@@ -1,12 +1,11 @@
 <script setup lang="ts">
+import type { DictItem } from '@jnrs/shared'
 import { ElMessage } from 'element-plus'
 import { ref, onActivated } from 'vue'
 import { DictApi, DictDetailApi, DictChangeApi } from '@/api/system'
-import { useReactivityTableHeight } from '@jnrs/vue-core/composables'
-import type { DictItem } from '@jnrs/shared'
 import { hasPermission } from '@/utils/permissions'
+import { JnTable } from '@jnrs/vue-core/components'
 
-const { maxHeight } = useReactivityTableHeight({ className: 'el_table_dict', bottomGap: 0 })
 const PERMISSION_EDIT = ['dict:edit']
 const loading = ref(false)
 const tableData = ref<DictItem[]>()
@@ -73,80 +72,68 @@ const editKeyValue = (row: DictItem) => {
 </script>
 
 <template>
-  <div class="main">
-    <el-card shadow="never">
-      <template #header>
-        <div class="card_header">
-          <h3>字典管理</h3>
-        </div>
-      </template>
-      <el-table
-        class="el_table_dict"
-        :data="tableData"
-        :height="maxHeight"
-        scrollbar-always-on
-        border
-        v-loading="loading"
-        row-key="id"
-        @expand-change="handleExpandChange"
-      >
-        <el-table-column prop="dictName" label="字典名" />
-        <el-table-column prop="describe" label="说明" />
-        <el-table-column type="expand" fixed="right" label="字典值" width="100">
-          <template #default="scope">
-            <div class="table_expand animation15" style="animation-duration: 0.5s; animation-delay: 0s">
-              <div class="table_expand_top">
-                <h5>字典值列表</h5>
-              </div>
-              <el-table :data="scope.row.options" :border="true" size="small" row-key="value">
-                <el-table-column label="value" prop="value" width="100" align="center"></el-table-column>
-                <el-table-column label="label" prop="label">
-                  <template #default="optionScope">
-                    <el-input
-                      v-model="optionScope.row.label"
-                      maxlength="20"
-                      :disabled="!hasPermission(PERMISSION_EDIT)"
-                    />
-                  </template>
-                </el-table-column>
-                <el-table-column label="颜色" prop="displayColor">
-                  <template #default="optionScope">
-                    <el-color-picker
-                      v-model="optionScope.row.displayColor"
-                      :predefine="predefineColors"
-                      :disabled="!hasPermission(PERMISSION_EDIT)"
-                    />
-                    <span style="margin-left: 10px">
-                      {{ optionScope.row.displayColor || '无' }}
-                    </span>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="sequence" label="排序" width="180" align="center">
-                  <template #default="optionScope">
-                    <el-input-number
-                      v-model="optionScope.row.sequence"
-                      :min="1"
-                      :max="999"
-                      :step="1"
-                      controls-position="right"
-                      step-strictly
-                      :disabled="!hasPermission(PERMISSION_EDIT)"
-                      style="width: 140px"
-                    />
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="100" align="center" fixed="right" v-permissions="PERMISSION_EDIT">
-                  <template #default="optionScope">
-                    <el-button type="success" size="small" @click="editKeyValue(optionScope.row)">确认修改</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
+  <el-card v-loading="loading">
+    <template #header>
+      <span>字典管理</span>
+    </template>
+
+    <JnTable :data="tableData" @expand-change="handleExpandChange">
+      <el-table-column prop="dictName" label="字典名" />
+      <el-table-column prop="describe" label="说明" />
+      <el-table-column type="expand" fixed="right" label="字典值" width="100">
+        <template #default="scope">
+          <div class="table_expand">
+            <div class="table_expand_top">
+              <h5>字典值列表</h5>
             </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-  </div>
+            <el-table :data="scope.row.options" :border="true" size="small" row-key="value">
+              <el-table-column label="value" prop="value" width="100" align="center"></el-table-column>
+              <el-table-column label="label" prop="label">
+                <template #default="optionScope">
+                  <el-input
+                    v-model="optionScope.row.label"
+                    maxlength="20"
+                    :disabled="!hasPermission(PERMISSION_EDIT)"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="颜色" prop="displayColor">
+                <template #default="optionScope">
+                  <el-color-picker
+                    v-model="optionScope.row.displayColor"
+                    :predefine="predefineColors"
+                    :disabled="!hasPermission(PERMISSION_EDIT)"
+                  />
+                  <span style="margin-left: 10px">
+                    {{ optionScope.row.displayColor || '无' }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="sequence" label="排序" width="180" align="center">
+                <template #default="optionScope">
+                  <el-input-number
+                    v-model="optionScope.row.sequence"
+                    :min="1"
+                    :max="999"
+                    :step="1"
+                    controls-position="right"
+                    step-strictly
+                    :disabled="!hasPermission(PERMISSION_EDIT)"
+                    style="width: 140px"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="100" align="center" fixed="right" v-permissions="PERMISSION_EDIT">
+                <template #default="optionScope">
+                  <el-button type="success" size="small" @click="editKeyValue(optionScope.row)">确认修改</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </el-table-column>
+    </JnTable>
+  </el-card>
 </template>
 
 <style scoped lang="scss">

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

@@ -1,65 +1,53 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useMenuStore } from '@jnrs/vue-core/pinia'
-import { useReactivityTableHeight } from '@jnrs/vue-core/composables'
+import { JnTable } from '@jnrs/vue-core/components'
 
-const { maxHeight } = useReactivityTableHeight({ className: 'el_table_menu', bottomGap: 0 })
 const loading = ref(false)
 
 const { menus } = useMenuStore()
 </script>
 
 <template>
-  <div>
-    <el-card shadow="never">
-      <template #header>
-        <div class="card_header">
-          <h3>菜单管理</h3>
-        </div>
-      </template>
-      <el-table
-        class="el_table_menu"
-        :data="menus"
-        :height="maxHeight"
-        scrollbar-always-on
-        row-key="meta.uuid"
-        border
-        v-loading="loading"
-      >
-        <el-table-column prop="meta.title" label="标题" min-width="120" header-align="center" />
-        <el-table-column prop="icon" label="图标" width="60" align="center">
-          <template #default="{ row }">
-            <el-icon v-if="row.meta.icon"><component :is="row.meta.icon" /></el-icon>
-          </template>
-        </el-table-column>
-        <el-table-column prop="path" label="路由地址" min-width="120" header-align="center" />
-        <el-table-column prop="component" label="component path" min-width="120" header-align="center" />
-        <el-table-column prop="redirect" label="redirect" min-width="120" header-align="center" />
-        <el-table-column prop="editRole" label="权限标识" min-width="120" header-align="center">
-          <template #default="{ row }">
-            <span v-if="!row.meta.permissions" style="color: #999">auto</span>
-            <span v-else>{{ row.meta.permissions }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="type" label="类型" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag type="primary" v-if="row.path">菜单</el-tag>
-            <el-tag type="success" v-else>目录</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="type" label="NoAuth" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag type="danger" v-if="row.meta.noAuth">否</el-tag>
-            <el-tag type="success" v-else>是</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="type" label="Global" width="80" align="center">
-          <template #default="{ row }">
-            <el-tag type="success" v-if="row.meta.global">是</el-tag>
-            <el-tag type="primary" v-else>否</el-tag>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-  </div>
+  <el-card v-loading="loading">
+    <template #header>
+      <span>菜单管理</span>
+    </template>
+
+    <JnTable :data="menus" row-key="meta.uuid" :showScrollbar="true">
+      <el-table-column prop="meta.title" label="标题" min-width="120" header-align="center" />
+      <el-table-column prop="icon" label="图标" width="60" align="center">
+        <template #default="{ row }">
+          <el-icon v-if="row.meta.icon"><component :is="row.meta.icon" /></el-icon>
+        </template>
+      </el-table-column>
+      <el-table-column prop="path" label="路由地址" min-width="120" header-align="center" />
+      <el-table-column prop="component" label="component path" min-width="120" header-align="center" />
+      <el-table-column prop="redirect" label="redirect" min-width="120" header-align="center" />
+      <el-table-column prop="editRole" label="权限标识" min-width="120" header-align="center">
+        <template #default="{ row }">
+          <span v-if="!row.meta.permissions" style="color: #999">auto</span>
+          <span v-else>{{ row.meta.permissions }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="类型" width="80" align="center">
+        <template #default="{ row }">
+          <el-tag type="primary" v-if="row.path">菜单</el-tag>
+          <el-tag type="success" v-else>目录</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="NoAuthApi" width="80" align="center">
+        <template #default="{ row }">
+          <el-tag type="danger" v-if="row.meta.noAuth">否</el-tag>
+          <el-tag type="success" v-else>是</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="Global" width="80" align="center">
+        <template #default="{ row }">
+          <el-tag type="success" v-if="row.meta.global">是</el-tag>
+          <el-tag type="primary" v-else>否</el-tag>
+        </template>
+      </el-table-column>
+    </JnTable>
+  </el-card>
 </template>