create-jnrs-vue 1.2.11

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

@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+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 { useRoute } from '@jnrs/vue-core/router'
+import { objectMatchAssign, dateFormatsToObject } from '@jnrs/shared'
+import { debounce } from '@jnrs/shared/lodash'
+import { isNumberGtZero } from '@jnrs/shared/validator'
+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'
+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[]
+  newAttachmentFile?: Attachment[]
+}
+
+const loading = ref(false)
+const tableData = ref<ProcessedProjectItem[]>([])
+const total = ref(0)
+const pagination = ref<Pagination>({ pageNo: 1, pageSize: 20 })
+const route = useRoute()
+
+// 编辑
+const editDialogRef = ref()
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = ref<AddProjectItem>({
+  id: '',
+  name: '',
+  projectType: undefined,
+  managerId: undefined,
+  budget: 0,
+  plannedStartDate: '',
+  description: '',
+  newImageFiles: [],
+  newAttachmentFile: []
+})
+const rules = ref<FormRules>({
+  name: [{ 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' },
+    {
+      validator: isNumberGtZero,
+      trigger: 'change'
+    }
+  ]
+})
+
+// 查询
+const queryForm = ref({
+  code: '',
+  projectType: undefined,
+  manager: '',
+  plannedStartDate: ''
+})
+
+const handleSelectionChange = (row: ProjectItem[]) => {
+  console.log(row)
+}
+
+const getTable = debounce(async () => {
+  loading.value = true
+  try {
+    const res = await TableApi({
+      ...pagination.value,
+      ...queryForm.value
+    })
+    tableData.value = res.list.map((item) => ({
+      ...item,
+      newImageFiles: item.imageDocument?.attachments,
+      newAttachmentFile: item.attachmentDocument?.attachments
+    }))
+    total.value = res.count
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}, 300)
+
+// 新增和修改
+const handleEdit = (row?: ProjectItem) => {
+  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
+      }
+    }
+  })
+}
+
+// 提交表单
+const submitForm = () => {
+  ruleFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      loading.value = true
+      try {
+        await EditApi(ruleForm.value)
+        ElMessage({
+          message: '数据已保存',
+          grouping: true,
+          showClose: true,
+          type: 'success'
+        })
+      } catch (err) {
+        console.error(err)
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+
+onActivated(() => {
+  console.log(route.meta)
+  getTable()
+})
+</script>
+
+<template>
+  <!-- 编辑弹窗 -->
+  <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">
+        <el-input v-model.trim="ruleForm.name" maxlength="20" show-word-limit />
+      </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>
+      </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>
+            <span>￥</span>
+          </template>
+        </el-input-number>
+      </el-form-item>
+      <el-form-item label="计划开始时间" prop="plannedStartDate">
+        <el-date-picker
+          v-model="ruleForm.plannedStartDate"
+          type="datetime"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :disabled-date="
+            (time: number) => {
+              return time < Date.now() - 86400000
+            }
+          "
+        />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input
+          v-model="ruleForm.description"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          type="textarea"
+          maxlength="200"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item label="上传图片" prop="newImageFiles">
+        <JnFileUpload
+          v-model="ruleForm.newImageFiles"
+          :formRef="ruleFormRef"
+          validateFieldName="newImageFiles"
+          accept=".png,.jpg,.bmp,.gif"
+          :fileSizeMb="50"
+          :limit="3"
+          drag
+          :downloadFileFn="(file) => downloadFile(file.uniqueFileName, file.fileName)"
+        />
+      </el-form-item>
+      <el-form-item label="上传文件" prop="newAttachmentFile">
+        <JnFileUpload v-model="ruleForm.newAttachmentFile" accept=".pdf" :limit="1" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="success" icon="Select" :loading="loading" @click="submitForm()">提交</el-button>
+    </template>
+  </JnDialog>
+
+  <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="ImportTemplateApi"
+            importBtnName="导入项目"
+            :importApi="ImportDataApi"
+            exportBtnName="导出项目"
+            :exportApi="ExportApi"
+            :exportParams="{
+              ...dateFormatsToObject(queryForm.plannedStartDate)
+            }"
+            :exportDynamicParamsConfig="{
+              label: '项目编号',
+              prop: 'code'
+            }"
+            :exportDisabled="tableData.length === 0"
+            size="small"
+            @change="getTable()"
+          />
+          <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: 200px">
+          <template #append>
+            <el-button icon="Search" @click="getTable()" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="项目名称" prop="projectType">
+        <el-select
+          v-model="queryForm.projectType"
+          filterable
+          placeholder=""
+          clearable
+          style="width: 200px"
+          @change="getTable()"
+        >
+          <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="getTable()"
+        ></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: 200px"
+          @change="getTable()"
+        />
+      </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 />
+      <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 }">
+          <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="budget" label="预算(¥)" width="100" align="center" sortable>
+        <template #default="{ row }">
+          {{ row.budget }}
+        </template>
+      </el-table-column>
+      <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="plannedFinishDate" label="计划完成日期" width="130" align="center" sortable>
+        <template #default="{ row }">
+          {{ row.plannedFinishDate }}
+        </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 }">
+          <DictTag dictName="status" :value="row.status" :showColor="false" />
+        </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 maxHeight="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>
+      <el-table-column label="操作" width="100" align="center" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click.stop="handleEdit(row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </JnTable>
+
+    <!-- 表格分页 -->
+    <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

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { objectToFormData } from '@/utils/packages'
+import { LoginApi, UserInfoApi } from '@/api/system'
+import { NotFoundApi, NoAuthApi, DetailsApi } from '@/api/demos'
+import { getFileUrl } from '@/utils/file'
+import { downloadFile } from '@/utils/packages'
+
+import ImageView from '@/components/common/ImageView.vue'
+
+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 NoAuthApi(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('mock-png-1.png')
+    squareUrl.value = url.value
+  } catch (error) {
+    console.log(error)
+  }
+}
+</script>
+
+<template>
+  <p>网络请求测试</p>
+  <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('mock-pdf.pdf')">
+        获取后端服务器文件进行下载
+      </el-button>
+    </el-button-group>
+    <div>
+      <span>通过 ImageView 组件显示的图片（可支持预览）</span>
+      <ImageView
+        loadKeys="mock-png-1.png"
+        preview
+        style="width: 300px; height: 50px; border: 1px solid var(--jnrs-color-primary)"
+      />
+    </div>
+    <div>
+      <el-button type="primary" plain size="small" @click="handleFileView">获取后端服务器图片</el-button>
+      <el-avatar shape="circle" :src="squareUrl" />
+    </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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import RequestPage from './RequestPage.vue'
+import { ref, onMounted } from 'vue'
+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())
+const datetime = ref(formatDateTime() + ' ' + formatWeekday())
+const validator = ref()
+const testI18nInCore = ref('')
+
+const handleMenuApi = async () => {
+  try {
+    const res = await MenuApi()
+    routeOptions.value = res
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const handleRouteChange = () => {
+  handleRouter({
+    name: currentRoute.value
+  })
+}
+
+const handleRouterSystemMine = () => {
+  handleRouter({
+    name: 'SystemMine',
+    query: {
+      id: 1
+    }
+  })
+  // handleRouter({
+  //   path: '/system/mine/index',
+  //   query: {
+  //     id: 1
+  //   }
+  // })
+}
+
+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>
+        <span>有权限：(期望：正常显示按钮)</span>
+        <el-button type="primary" size="small" v-permissions="['mine:view']">添加</el-button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮禁用 -> UI 组件：使用 UI 框架提供的禁用属性)</span>
+        <el-button type="primary" size="small" :disabled="!hasPermission(['test:del'])">删除</el-button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮禁用 -> 原生元素：添加 disabled 属性和类名)</span>
+        <button size="small" v-permissions.disabled="['test:del']">删除</button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮不可见 -> 添加样式 display:none)</span>
+        <button size="small" v-permissions.display="['test:del']">删除</button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮不可见 -> remove HTMLElement)</span>
+        <button size="small" v-permissions="['test:del']">删除</button>
+      </li>
+    </ul>
+    <RequestPage />
+    <p>完整路由测试（先点击按钮，获取完整菜单数据）</p>
+    <el-button type="success" plain size="small" @click="handleRouterSystemMine">跳转到个人中心</el-button>
+    <el-button type="success" plain size="small" @click="handleMenuApi">获取完整菜单数据</el-button>
+    <el-cascader
+      v-model="currentRoute"
+      :options="routeOptions"
+      :props="{
+        emitPath: false,
+        value: 'name',
+        label: 'name'
+      }"
+      size="small"
+      :show-all-levels="false"
+      @change="handleRouteChange"
+    >
+      <template #default="{ data }">
+        <span>{{ data.meta.title }}</span>
+      </template>
+    </el-cascader>
+    <p>Element 组件测试</p>
+    <el-date-picker-panel v-model="datePicker" />
+  </div>
+  <router-view></router-view>
+</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/home/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+</script>
+
+<template>
+  <div>欢迎使用</div>
+</template>
+
+<style lang="scss" scoped></style>

package/jnrs-template-vue/src/views/lingshuSmart/editorPage.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { LingshuSmartEditor } from '@jnrs/lingshu-smart/components'
+</script>
+
+<template>
+  <LingshuSmartEditor />
+</template>
+
+<style lang="scss" scoped></style>