feat 添加scss, 完善终端管理, 增加登录方式, 修复页面路由不生效问题

2026-08-13 07:45:41 +08:00 · 2022-10-11 23:35:33 +08:00
parent d46cfd8180
commit cfe559d2b5
10 changed files with 268 additions and 13 deletions
--- a/package.json
+++ b/package.json
@@ -121,6 +121,7 @@
    "rimraf": "^3.0.2",
    "rollup": "^2.70.2",
    "rollup-plugin-visualizer": "^5.6.0",
+    "sass": "^1.55.0",
    "stylelint": "^14.7.1",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recommended": "^7.0.0",
--- a/src/components/Bootx/Query/BQuery.vue
+++ b/src/components/Bootx/Query/BQuery.vue
@@ -74,7 +74,7 @@

 <style lang="less" scoped>
  .query {
-    /deep/ .ant-form-item {
+    .ant-form-item {
      margin-bottom: 8px;
    }
    .ant-row {
--- a/src/components/VxeTable/index.ts
+++ b/src/components/VxeTable/index.ts
@@ -1,7 +1,7 @@
 import { App } from 'vue'
 import 'xe-utils'
 import VXETable from 'vxe-table'
-import 'vxe-table/lib/style.css'
+import 'vxe-table/styles/index.scss'

 /**
 * 加载vxe-table
--- a/src/router/routes/modules/system.ts
+++ b/src/router/routes/modules/system.ts
@@ -13,12 +13,20 @@ const system: AppRouteModule = {
  children: [
    {
      path: 'client',
-      name: 'Client',
+      name: 'ClientList',
      component: () => import('/@/views/modules/system/client/ClientList.vue'),
      meta: {
        title: '终端管理',
      },
    },
+    {
+      path: 'loginType',
+      name: 'LoginTypeList',
+      component: () => import('/@/views/modules/system/loginType/LoginTypeList.vue'),
+      meta: {
+        title: '登录方式',
+      },
+    },
  ],
 }

--- a/src/views/modules/system/client/Client.api.ts
+++ b/src/views/modules/system/client/Client.api.ts
@@ -68,9 +68,10 @@ export const existsByCode = (code: string) => {
  return defHttp.get<Result<boolean>>({
    url: '/client/existsByCode',
    method: 'GET',
+    params: { code }
  })
 }
-export const existsByCodeNotId = (code: string, id: number) => {
+export const existsByCodeNotId = (code: string, id) => {
  return defHttp.get<Result<boolean>>({
    url: '/client/existsByCodeNotId',
    method: 'GET',
--- a/src/views/modules/system/client/ClientEdit.vue
+++ b/src/views/modules/system/client/ClientEdit.vue
@@ -8,15 +8,15 @@
    :confirmLoading="confirmLoading"
  >
    <a-spin :spinning="confirmLoading">
-      <a-form class="small-from-item" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form class="small-from-item" ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="主键" :hidden="true">
          <a-input v-model:value="form.id" :disabled="showable" />
        </a-form-item>
        <a-form-item label="编码" v-bind="validateInfos.code" name="code">
-          <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入编码" />
+          <a-input v-model:value="form.code" :disabled="showable" @blur="validate('code')" placeholder="请输入编码" />
        </a-form-item>
        <a-form-item label="名称" v-bind="validateInfos.name" name="name">
-          <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
+          <a-input v-model:value="form.name" :disabled="showable" @blur="validate('name')" placeholder="请输入名称" />
        </a-form-item>
        <a-form-item label="启用状态" v-bind="validateInfos.enable" name="enable">
          <a-switch checked-children="开" un-checked-children="关" v-model:checked="form.enable" :disabled="showable || form.system" />
@@ -58,9 +58,11 @@
 <script lang="ts" setup>
  import { nextTick, reactive, ref } from 'vue'
  import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { add, Client, get, update } from './Client.api'
+  import { add, Client, existsByCode, existsByCodeNotId, get, update } from './Client.api'
  import { useForm } from 'ant-design-vue/lib/form'
  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { FormInstance } from 'ant-design-vue/es'
+  import { findAll, LoginType } from '/@/views/modules/system/loginType/LoginType.api'

  const {
    initFormModel,
@@ -76,7 +78,7 @@
    showable,
    formEditType,
  } = useFormEdit()
-  const loginTypes = ref([])
+  const loginTypes = ref([] as Array<LoginType>)
  const form = ref({
    id: null,
    code: '',
@@ -90,12 +92,21 @@
  const rules = reactive({
    code: [
      { required: true, message: '请输入应用编码' },
-      // { validator: validateCode, trigger: 'blur' },
+      { validator: validateCode, trigger: 'blur' },
    ],
    name: [{ required: true, message: '请输入应用名称' }],
    enable: [{ required: true, message: '请选择启用状态' }],
  })
-  function validateCode(rule, value, callback) {}
+  // 校验编码重复
+  async function validateCode() {
+    const { code, id } = form.value
+    if (!code) {
+      return Promise.resolve()
+    }
+    const res = formEditType.value === FormEditType.Edit ? await existsByCodeNotId(code, id) : await existsByCode(code)
+    return res.data ? Promise.reject('该编码已存在!') : Promise.resolve()
+  }
+  const formRef = ref<FormInstance>()

  // 表单
  const { resetFields, validate, validateInfos } = useForm(form, rules)
@@ -106,6 +117,7 @@
  function init(id, editType: FormEditType) {
    initFormModel(id, editType)
    resetForm()
+    initLoginTypes()
    getInfo(id, editType)
  }
  // 获取信息
@@ -121,6 +133,11 @@
      confirmLoading.value = false
    }
  }
+  // 初始化登录方式列表
+  async function initLoginTypes() {
+    const { data } = await findAll()
+    loginTypes.value = data
+  }
  // 保存
  function handleOk() {
    validate().then(async () => {
--- a/src/views/modules/system/loginType/LoginType.api.ts
+++ b/src/views/modules/system/loginType/LoginType.api.ts
@@ -0,0 +1,86 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+
+/**
+ * 分页
+ */
+export const page = (params) => {
+  return defHttp.get<Result<PageResult<LoginType>>>({
+    url: '/loginType/page',
+    params,
+  })
+}
+
+/**
+ * 获取单条
+ */
+export const get = (id) => {
+  return defHttp.get<Result<LoginType>>({
+    url: '/loginType/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export const add = (obj: LoginType) => {
+  return defHttp.post({
+    url: '/loginType/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export const update = (obj: LoginType) => {
+  return defHttp.post({
+    url: '/loginType/update',
+    data: obj,
+  })
+}
+
+/**
+ * 删除
+ */
+export const del = (id) => {
+  return defHttp.delete({
+    url: '/loginType/delete',
+    params: { id },
+  })
+}
+
+/**
+ * 查询全部
+ */
+export const findAll = () => {
+  return defHttp.get<Result<Array<LoginType>>>({
+    url: '/loginType/findAll',
+  })
+}
+
+/**
+ * 实体类接口
+ */
+export interface LoginType extends BaseEntity {
+  // 编码
+  code: string
+  // 名称
+  name: string
+  // 类型
+  type: string
+  // 是否系统内置
+  system: boolean
+  // 在线时长 秒
+  timeout: number
+  // 启用验证码
+  captcha: boolean
+  // 密码错误次数
+  pwdErrNum: number
+  // 是否可用
+  enable: boolean
+  // 描述
+  description: string
+}
--- a/src/views/modules/system/loginType/LoginTypeEdit.vue
+++ b/src/views/modules/system/loginType/LoginTypeEdit.vue
@@ -0,0 +1,5 @@
+<template> </template>
+
+<script lang="ts" setup></script>
+
+<style lang="less" scoped></style>
--- a/src/views/modules/system/loginType/LoginTypeList.vue
+++ b/src/views/modules/system/loginType/LoginTypeList.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar :refresh="{ query: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="code" title="编码" />
+        <vxe-column field="name" title="名称" />
+        <vxe-column field="captcha" title="系统内置">
+          <template #default="{ row }">
+            <a-tag v-if="row.system" color="green">是</a-tag>
+            <a-tag v-else color="red">否</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="captcha" title="启用验证码">
+          <template #default="{ row }">
+            <a-tag v-if="row.captcha" color="green">开启</a-tag>
+            <a-tag v-else color="red">关闭</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="enable" title="启用状态">
+          <template #default="{ row }">
+            <a-tag v-if="row.enable" color="green">启用</a-tag>
+            <a-tag v-else color="red">停用</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="description" title="描述" />
+        <vxe-column field="createTime" title="创建时间" />
+        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a href="javascript:" @click="show(row)">查看</a>
+            </span>
+            <a-divider type="vertical" />
+            <span>
+              <a href="javascript:" @click="edit(row)">编辑</a>
+            </span>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
+              <a href="javascript:" style="color: red">删除</a>
+            </a-popconfirm>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+      <login-type-edit ref="loginTypeEdit" @ok="queryPage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+  import { del, page } from './LoginType.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import LoginTypeEdit from './LoginTypeEdit.vue'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { STRING } from '/@/components/Bootx/Query/SuperQueryCode'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const loginType = ref()
+  // 查询条件
+  const fields = [
+    { field: 'code', formType: STRING, name: '编码', placeholder: '请输入登录方式编码' },
+    { field: 'name', formType: STRING, name: '名称', placeholder: '请输入登录方式名称' },
+  ]
+
+  onMounted(() => {
+    queryPage()
+  })
+
+  // 分页查询
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  // 新增
+  function add() {
+    loginType.value.init(null, FormEditType.Add)
+  }
+  // 查看
+  function edit(record) {
+    loginType.value.init(record.id, FormEditType.Edit)
+  }
+  // 查看
+  function show(record) {
+    loginType.value.init(record.id, FormEditType.Show)
+  }
+
+  // 删除
+  const { notification } = useMessage()
+  function remove(record) {
+    del(record.id).then(() => {
+      notification.success({ message: '删除成功' })
+    })
+    queryPage()
+  }
+</script>
+
+<style lang="less" scoped></style>
--- a/yarn.lock
+++ b/yarn.lock
@@ -2842,7 +2842,7 @@ chardet@^0.7.0:
  resolved "https://registry.npmmirror.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==

-chokidar@^3.5.2:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
  version "3.5.3"
  resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -5325,6 +5325,11 @@ imagemin@^7.0.1:
    p-pipe "^3.0.0"
    replace-ext "^1.0.0"

+immutable@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
+  integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
  version "3.3.0"
  resolved "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -7798,6 +7803,15 @@ safe-regex@^1.1.0:
  resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

+sass@^1.55.0:
+  version "1.55.0"
+  resolved "https://registry.npmmirror.com/sass/-/sass-1.55.0.tgz#0c4d3c293cfe8f8a2e8d3b666e1cf1bff8065d1c"
+  integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4:
  version "1.2.4"
  resolved "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -8032,7 +8046,7 @@ sortablejs@^1.15.0:
  resolved "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a"
  integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==

-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
  version "1.0.2"
  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==