create-jnrs-template-vue 1.1.4 → 1.1.6

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

@@ -1,41 +1,32 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+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 type { User } from '@jnrs/shared'
 
-const { userInfo, token } = useAuthStore()
+const { userInfo, token } = storeToRefs(useAuthStore())
 const { avatar } = useAvatar()
 const loading = ref(false)
 const ruleFormRef = ref()
-const ruleForm = ref({
+const ruleForm = ref<User>({
+  id: 0,
   account: '',
   name: '',
   workNo: '',
-  jobTitle: '',
+  jobTitle: 0,
   workgroup: '',
-  role: ''
+  role: 0,
+  avatarFileName: ''
 })
 const rules = ref({
   // account: { required: true, message: '请输入', trigger: 'change' },
   // role: { required: true, message: '请输入', trigger: 'change' },
   // name: { required: true, message: '请输入', trigger: 'change' },
   // workNo: { required: true, message: '请输入', trigger: 'change' },
-  // email: [
-  //   { required: false, message: '请输入', trigger: 'change' },
-  //   {
-  //     validator: (rule, value, callback) => {
-  //       if (value && !isEmail(value)) {
-  //         callback(new Error('请输入有效的邮箱!'))
-  //       } else {
-  //         callback()
-  //       }
-  //     },
-  //     required: false,
-  //     trigger: 'blur'
-  //   }
-  // ]
 })
 
 interface ApiResponse {
@@ -44,9 +35,15 @@ interface ApiResponse {
   data: string
 }
 
+onMounted(() => {
+  if (userInfo.value) {
+    ruleForm.value = userInfo.value
+  }
+})
+
 const handleAvatarSuccess: UploadProps['onSuccess'] = (response: ApiResponse) => {
   loading.value = false
-  if (response.code === 0) {
+  if (userInfo.value && response.code === 0) {
     userInfo.value.avatarFileName = response.data
     ElMessage.success({ message: '头像上传成功' })
   }
@@ -69,28 +66,39 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 </script>
 
 <template>
-  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
+  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" disabled>
     <el-form-item label="登录账号" prop="account">
-      <el-input v-model.trim="ruleForm.account" style="width: 200px" disabled />
+      <el-input v-model.trim="ruleForm.account" style="width: 200px" />
     </el-form-item>
     <el-form-item label="名称" prop="name">
-      <el-input v-model.trim="ruleForm.name" style="width: 200px" disabled />
+      <el-input v-model.trim="ruleForm.name" style="width: 200px" />
     </el-form-item>
     <el-form-item label="工号" prop="workNo">
-      <el-input v-model.trim="ruleForm.workNo" style="width: 200px" disabled />
+      <el-input v-model.trim="ruleForm.workNo" style="width: 200px" />
     </el-form-item>
     <el-form-item label="职称" prop="jobTitle">
-      <el-input v-model.trim="ruleForm.jobTitle" style="width: 200px" disabled />
+      <el-select v-model="ruleForm.jobTitle" style="width: 200px">
+        <el-option
+          :label="item.label"
+          :value="item.value"
+          v-for="(item, index) in getOneDictList('jobTitle')"
+          :key="index"
+        />
+      </el-select>
     </el-form-item>
     <el-form-item label="部门/班组" prop="workgroup">
-      <el-input v-model.trim="ruleForm.workgroup" style="width: 200px" disabled />
+      <el-input v-model.trim="ruleForm.workgroup" style="width: 200px" />
     </el-form-item>
     <el-form-item label="职位/账号权限" prop="role">
-      <el-input v-model.trim="ruleForm.role" style="width: 200px" disabled />
+      <el-select v-model="ruleForm.role" style="width: 200px">
+        <el-option
+          :label="item.label"
+          :value="item.value"
+          v-for="(item, index) in getOneDictList('role')"
+          :key="index"
+        />
+      </el-select>
     </el-form-item>
-    <!-- <el-form-item label="邮箱" prop="email">
-      <el-input v-model.trim="ruleForm.email" style="width: 200px" />
-    </el-form-item> -->
     <el-form-item label="头像" prop="avatarFileName" class="uploader_item">
       <el-upload
         action="/api/user/avatar"

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

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import { LoginApi, PasswordChangeApi } from '@/api/base'
+import { PasswordChangeApi } from '@/api/system'
 import { useAuthStore } from '@/stores'
 import { handleRouter } from '@jnrs/vue-core/router'
-import { isWeakPwd } from '@/utils/validator'
-import type { FormInstance } from 'element-plus'
-import type { RuleItem } from 'async-validator'
+import { isWeakPwd } from '@jnrs/shared/validator'
+import type { FormInstance, FormItemRule } from 'element-plus'
 import { ElMessage } from 'element-plus'
-import { LogoutApi } from '@/api/base/index'
+import { LogoutApi } from '@/api/system'
 
 const { userInfo, asyncClearAuth } = useAuthStore()
 const loading = ref(false)
@@ -21,47 +20,41 @@ const rules = reactive({
   originPassword: [{ required: true, message: '请输入', trigger: 'change' }],
   password: [
     { required: true, message: '请输入', trigger: 'change' },
-    { min: 6, max: 36, message: '密码长度为 6 - 36 个字符', trigger: 'change' },
     {
-      validator: (rule: RuleItem, value: string | undefined, callback: (error?: Error) => void) =>
-        isWeakPwd(rule, value, callback)
+      validator: isWeakPwd,
+      trigger: 'change'
     }
-  ] as RuleItem[],
+  ],
   repassword: [
     { required: true, message: '请输入', trigger: 'change' },
     {
-      validator: (rule: RuleItem, value: string | undefined, callback: (error?: Error) => void) => {
-        if (value != '' && value !== ruleForm.value.password) {
-          callback(new Error('两次密码不一致!'))
+      validator: (rule: FormItemRule, value: string, callback: (error?: string) => void) => {
+        if (value && value !== ruleForm.value.password) {
+          callback('两次密码不一致!')
         } else {
           callback()
         }
       },
-      required: false
+      required: false,
+      trigger: 'change'
     }
-  ] as RuleItem[]
+  ]
 })
 
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   try {
     const valid = await formEl.validate()
-    if (valid) {
+    if (valid && userInfo?.id) {
       loading.value = true
-      const loginRes = await LoginApi({
-        account: userInfo.account,
-        password: ruleForm.value.originPassword
+      await PasswordChangeApi({
+        userId: userInfo.id,
+        password: ruleForm.value.password
       })
-      if (loginRes.token) {
-        await PasswordChangeApi({
-          userId: userInfo.id,
-          password: ruleForm.value.password
-        })
-        ElMessage.success('密码修改成功，请重新登录系统')
-        await LogoutApi()
-        await asyncClearAuth()
-        handleRouter({ name: 'Login' }, 'replace')
-      }
+      ElMessage.success('密码修改成功，请重新登录系统')
+      await LogoutApi()
+      await asyncClearAuth()
+      handleRouter({ name: 'Login' }, 'replace')
     }
   } catch {
   } finally {
@@ -100,9 +93,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       />
     </el-form-item>
     <el-form-item>
-      <el-button class="form_submit" type="primary" @click="submitForm(formRef)">
-        保存修改
-      </el-button>
+      <el-button class="form_submit" type="primary" @click="submitForm(formRef)">保存修改</el-button>
     </el-form-item>
   </el-form>
 </template>

package/jnrs-template-vue/src/views/system/role/editDialog.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus'
+import { ref, nextTick } from 'vue'
+defineOptions({
+  name: 'editDialog'
+})
+
+const loading = ref(false)
+const dialogVisible = ref(false)
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = ref({
+  id: '',
+  name: '',
+  enname: '',
+  remark: '',
+  usable: '1'
+})
+const rules = ref({
+  name: { required: true, message: '请输入角色名称', trigger: 'change' },
+  enname: { required: true, message: '请输入英文名称', trigger: 'change' },
+  usable: { required: true, message: '请选择是否可用', trigger: 'change' }
+})
+
+const toggleVisible = () => {
+  dialogVisible.value = !dialogVisible.value
+  nextTick(() => {
+    ruleFormRef.value?.resetFields()
+  })
+}
+
+const submitForm = () => {
+  if (!ruleFormRef.value) return
+  ruleFormRef.value.validate(async (valid) => {
+    if (!valid) return
+  })
+}
+
+defineExpose({
+  toggleVisible
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    width="600"
+    :append-to-body="true"
+    :close-on-click-modal="true"
+    :close-on-press-escape="true"
+  >
+    <template #header>
+      <h3>{{ ruleForm.id ? '修改' : '添加' }}角色</h3>
+    </template>
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="auto"
+      v-loading="loading"
+      style="width: 80%; margin: 0 auto"
+    >
+      <el-form-item prop="id" v-show="false">
+        <el-input v-model="ruleForm.id" />
+      </el-form-item>
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="ruleForm.name" maxlength="20" />
+      </el-form-item>
+      <el-form-item label="英文名称" prop="enname">
+        <el-input v-model="ruleForm.enname" maxlength="20" />
+      </el-form-item>
+      <el-form-item label="说明" prop="remark">
+        <el-input v-model="ruleForm.remark" maxlength="200" type="textarea" :rows="5" />
+      </el-form-item>
+      <el-form-item label="是否可用" prop="usable">
+        <el-switch
+          v-model="ruleForm.usable"
+          inline-prompt
+          active-text="是"
+          inactive-text="否"
+          :active-value="true"
+          :inactive-value="false"
+          width="50"
+          style="--el-switch-on-color: #67c23a; --el-switch-off-color: #f56c6c"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="toggleVisible()" :loading="loading">取消</el-button>
+        <el-button type="primary" @click="submitForm()" :loading="loading">提交</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>

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

@@ -1,9 +1,36 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useAuthStore } from '@/stores'
+
+const { dict } = useAuthStore()
+const loading = ref(false)
+const tableData = ref(dict?.role)
 </script>
 
 <template>
-  <div>role</div>
+  <div class="main">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card_header">
+          <h3>角色管理</h3>
+        </div>
+      </template>
+      <el-table
+        class="el_table_role"
+        header-cell-class-name="tableData_header_cell"
+        :data="tableData"
+        scrollbar-always-on
+        border
+        v-loading="loading"
+      >
+        <el-table-column prop="label" label="角色名称" align="center" />
+        <!-- <el-table-column prop="codeValue" label="系统权限" align="center" /> -->
+        <el-table-column prop="value" label="值" align="center">
+          <template #default="scope">
+            {{ scope.row.value + '[' + typeof scope.row.value + ']' }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -20,4 +20,9 @@ const goBack = () => {
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@use 'sass:math';
+@function px2vw($px) {
+  @return math.div($px, 1920) * 100vw;
+}
+</style>

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

@@ -6,7 +6,7 @@ import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import compression from 'vite-plugin-compression'
 import { viteMockServe } from 'vite-plugin-mock'
-// import vueDevTools from 'vite-plugin-vue-devtools'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 const path = (url: string) => fileURLToPath(new URL(url, import.meta.url))
 const config = loadEnv('development', './')
@@ -15,11 +15,12 @@ const isMock = config.VITE_USE_MOCK === 'true'
 export default defineConfig({
   plugins: [
     vue(),
-    // vueDevTools(),
+    vueDevTools(),
     AutoImport({
       resolvers: [ElementPlusResolver()]
     }),
     Components({
+      dirs: [], // 禁用本地组件自动导入
       resolvers: [ElementPlusResolver()]
     }),
     compression({
@@ -32,8 +33,9 @@ export default defineConfig({
     }),
     viteMockServe({
       mockPath: 'viteMockServe', // mock 文件目录
+      watchFiles: true, // mock 文件热更新
       enable: isMock, // 是否开启
-      logger: isMock // 打印 mock 日志
+      logger: isMock // 是否在终端显示请求日志
     })
   ],
   resolve: {
@@ -49,7 +51,7 @@ export default defineConfig({
       '/api': {
         target: 'http://' + config.VITE_BASE_URL,
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+        rewrite: (path: string) => path.replace(/^\/api/, '')
       },
       '/ws': {
         target: 'ws://' + config.VITE_BASE_URL,

package/jnrs-template-vue/viteMockServe/dictItemRes.json

@@ -0,0 +1,27 @@
+{
+  "data": [
+    {
+      "id": 7,
+      "value": 0,
+      "label": "未审批",
+      "displayColor": "#FEA822",
+      "sequence": 1
+    },
+    {
+      "id": 8,
+      "value": 1,
+      "label": "未通过",
+      "displayColor": "#E43634",
+      "sequence": 2
+    },
+    {
+      "id": 9,
+      "value": 2,
+      "label": "已通过",
+      "displayColor": "#65DC79",
+      "sequence": 3
+    }
+  ],
+  "code": 0,
+  "msg": "操作成功"
+}

package/jnrs-template-vue/viteMockServe/dictRes.json

@@ -0,0 +1,141 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "dictName": "defectiveWorkHourStatus",
+      "describe": null
+    },
+    {
+      "id": 2,
+      "dictName": "factoryManagerDefectiveWorkHourReviewStatus",
+      "describe": null
+    },
+    {
+      "id": 3,
+      "dictName": "productionDepartmentDefectiveWorkHourReviewStatus",
+      "describe": null
+    },
+    {
+      "id": 4,
+      "dictName": "workHourType",
+      "describe": null
+    },
+    {
+      "id": 5,
+      "dictName": "workHourStatue",
+      "describe": null
+    },
+    {
+      "id": 6,
+      "dictName": "assignmentStatus",
+      "describe": null
+    },
+    {
+      "id": 7,
+      "dictName": "planExecutionStatus",
+      "describe": null
+    },
+    {
+      "id": 8,
+      "dictName": "jobTitle",
+      "describe": null
+    },
+    {
+      "id": 9,
+      "dictName": "userLogType",
+      "describe": null
+    },
+    {
+      "id": 10,
+      "dictName": "rectificationNoticeStatus",
+      "describe": null
+    },
+    {
+      "id": 11,
+      "dictName": "attendanceStatus",
+      "describe": null
+    },
+    {
+      "id": 12,
+      "dictName": "weekday",
+      "describe": null
+    },
+    {
+      "id": 13,
+      "dictName": "factoryManagerWorkHourReduceApplicationReviewStatus",
+      "describe": null
+    },
+    {
+      "id": 14,
+      "dictName": "productionDepartmentWorkHourReduceApplicationReviewStatus",
+      "describe": null
+    },
+    {
+      "id": 15,
+      "dictName": "role",
+      "describe": null
+    },
+    {
+      "id": 16,
+      "dictName": "attendanceRequestStatus",
+      "describe": null
+    },
+    {
+      "id": 17,
+      "dictName": "abilityCoefficientFilter",
+      "describe": null
+    },
+    {
+      "id": 18,
+      "dictName": "groupRemainWorkHourFilterType",
+      "describe": null
+    },
+    {
+      "id": 19,
+      "dictName": "workHourReduceApplicationStatus",
+      "describe": null
+    },
+    {
+      "id": 20,
+      "dictName": "workHourModifyApplicationReviewStatus",
+      "describe": null
+    },
+    {
+      "id": 21,
+      "dictName": "firstThenReviewStatus",
+      "describe": null
+    },
+    {
+      "id": 22,
+      "dictName": "planExecutionDateFilter",
+      "describe": null
+    },
+    {
+      "id": 23,
+      "dictName": "overtimeWorkHourFilter",
+      "describe": null
+    },
+    {
+      "id": 24,
+      "dictName": "statisticWorkHourUserDataOrderByType",
+      "describe": null
+    },
+    {
+      "id": 25,
+      "dictName": "jobStatus",
+      "describe": null
+    },
+    {
+      "id": 26,
+      "dictName": "reviewType",
+      "describe": null
+    },
+    {
+      "id": 27,
+      "dictName": "rectificationNoticeTaskStatus",
+      "describe": null
+    }
+  ],
+  "code": 0,
+  "msg": "操作成功"
+}

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

@@ -0,0 +1,26 @@
+const res_fail = {
+  code: 1,
+  msg: '操作失败'
+}
+
+export default [
+  // 权限不足
+  {
+    url: '/mock/auth/no',
+    method: 'post',
+    response: () => {
+      return {
+        code: 3,
+        msg: '暂无权限'
+      }
+    }
+  },
+  // 操作失败
+  {
+    url: '/mock/auth/fail',
+    method: 'post',
+    response: () => {
+      return res_fail
+    }
+  }
+]

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

@@ -1,17 +1,13 @@
-import loginRes from './login.json'
+import successMock from './success'
+import failMock from './fail'
+import loginRes from './loginRes.json'
+import dictRes from './dictRes.json'
+import dictItemRes from './dictItemRes.json'
 import menuRes from '../public/system/menu.json'
 
-const res_success = {
-  code: 0,
-  msg: '操作成功'
-}
-
-const res_fail = {
-  code: 1,
-  msg: '操作失败'
-}
-
 export default [
+  ...successMock,
+  ...failMock,
   // 获取菜单
   {
     url: '/mock/menu',
@@ -20,7 +16,7 @@ export default [
       return menuRes
     }
   },
-  // 模拟登录
+  // 登录
   {
     url: '/mock/api/auth/login',
     method: 'post',
@@ -28,31 +24,28 @@ export default [
       return loginRes
     }
   },
-  // 模拟退出登录
+  // 获取个人信息
   {
-    url: '/mock/api/auth/logout',
+    url: '/mock/api/auth/user-info',
     method: 'get',
     response: () => {
-      return res_success
+      return loginRes
     }
   },
-  // 模拟获取个人信息
+  // 获取字典
   {
-    url: '/mock/api/auth/user-info',
+    url: '/mock/api/dict-manager',
     method: 'get',
     response: () => {
-      return loginRes
+      return dictRes
     }
   },
-  // 模拟权限不足
+  // 获取单个字典
   {
-    url: '/mock/auth/no',
-    method: 'post',
+    url: /\/mock\/api\/dict-manager\/detail\/\d+/,
+    method: 'get',
     response: () => {
-      return {
-        code: 3,
-        msg: '暂无权限'
-      }
+      return dictItemRes
     }
   }
 ]

package/jnrs-template-vue/viteMockServe/{login.json → loginRes.json}

@@ -8,6 +8,7 @@
     "workgroup": null,
     "jobTitle": 0,
     "role": 6,
+    "permissions": ["system:view", "mine:view", "mine:edit"],
     "abilityCoefficient": 0.0,
     "dict": {
       "defectiveWorkHourStatus": [