feat 样式优化, 表单编辑开发

build/vite/plugin/index.ts

@@ -21,7 +21,10 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 
   const vitePlugins: (PluginOption | PluginOption[])[] = [
     // have to
-    vue(),
+    vue({
+      // 响应式变量
+      reactivityTransform: true,
+    }),
     // have to
     vueJsx(),
     // support name

package.json

@@ -41,7 +41,7 @@
     "@vueuse/core": "^8.3.0",
     "@vueuse/shared": "^8.3.0",
     "@zxcvbn-ts/core": "^2.0.1",
-    "ant-design-vue": "^3.2.0",
+    "ant-design-vue": "^3.2.13",
     "axios": "^0.26.1",
     "codemirror": "^5.65.3",
     "cropperjs": "^1.5.12",

src/components/Bootx/Query/BQuery.vue

@@ -73,10 +73,12 @@
 </script>
 
 <style lang="less" scoped>
-  /deep/ .ant-form-item {
+  .query {
-    margin-bottom: 8px;
+    /deep/ .ant-form-item {
-  }
+      margin-bottom: 8px;
-  .ant-row {
+    }
-    width: 100%;
+    .ant-row {
+      width: 100%;
+    }
   }
 </style>

src/design/components/antdv.less

@@ -0,0 +1,13 @@
+
+/* 表单项间隔(小) */
+.mini-from-item {
+  .ant-form-item {
+    margin-bottom: 8px;
+  }
+}
+/* 表单项间隔(小) */
+.small-from-item  {
+  .ant-form-item {
+    margin-bottom: 15px;
+  }
+}

src/design/components/global.less

@@ -0,0 +1,16 @@
+/* 抽屉样式按钮 */
+.drawer-button {
+  z-index: 1;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  left: 0;
+  background: #fff;
+  border-radius: 0 0 2px 2px;
+  .ant-btn {
+    margin-left: 10px;
+  }
+}

src/design/components/index.less

@@ -0,0 +1,3 @@
+@import "antdv.less";
+@import "global.less";
+@import "wangEditor.less";

src/design/components/wangEditor.less

@@ -0,0 +1,50 @@
+/* wangEditor start */
+.editor-content-view {
+  border: 3px solid #ccc;
+  border-radius: 5px;
+  padding: 0 10px;
+  margin-top: 20px;
+  overflow-x: auto;
+  blockquote {
+    border-left: 8px solid #d0e5f2;
+    padding: 10px 10px;
+    margin: 10px 0;
+    background-color: #f1f1f1;
+  }
+  code {
+    font-family: monospace;
+    background-color: #eee;
+    padding: 3px;
+    border-radius: 3px;
+  }
+  pre {
+    & > code {
+      display: block;
+      padding: 10px;
+    }
+  }
+  table {
+    border-collapse: collapse;
+  }
+  th {
+    background-color: #f1f1f1;
+  }
+  input[type="checkbox"] {
+    margin-right: 5px;
+  }
+}
+.editor-content-view p,
+.editor-content-view li {
+  white-space: pre-wrap;
+}
+.editor-content-view td,
+.editor-content-view th {
+  border: 1px solid #ccc;
+  min-width: 50px;
+  height: 20px;
+}
+.editor-content-view ul,
+.editor-content-view ol {
+  padding-left: 20px;
+}
+/* wangEditor end */

src/design/index.less

@@ -3,6 +3,7 @@
 @import 'public.less';
 @import 'ant/index.less';
 @import './theme.less';
+@import './components/index.less';
 
 input:-webkit-autofill {
   box-shadow: 0 0 0 1000px white inset !important;

src/hooks/bootx/useFrom.ts

@@ -0,0 +1,37 @@
+import { reactive, ref, toRefs } from 'vue'
+import { FormType } from '/#/web'
+
+export default function () {
+  const model = reactive({
+    // 表单项标题文字
+    labelCol: {
+      sm: { span: 7 },
+    },
+    // 表单项内容
+    wrapperCol: {
+      sm: { span: 13 },
+    },
+    title: '新增',
+    modalWidth: '50%',
+    confirmLoading: false,
+    visible: false,
+    editable: false,
+    addable: false,
+    showable: false,
+    type: FormType.Add,
+  })
+  const { labelCol, wrapperCol, title, modalWidth, confirmLoading, visible, editable, addable, showable, type } = toRefs(model)
+  return {
+    model,
+    labelCol,
+    wrapperCol,
+    title,
+    modalWidth,
+    confirmLoading,
+    visible,
+    editable,
+    addable,
+    showable,
+    type,
+  }
+}

src/hooks/bootx/useTable.ts

@@ -1,11 +1,11 @@
 import { TablePageModel } from '/#/web'
-import { reactive, toRefs } from 'vue'
+import { reactive, ref, toRefs } from 'vue'
 import { PageResult } from '/#/axios'
 
 /**
  * 获取数据对象
  */
-export default function (queryPageCallback: CallableFunction) {
+export default function <T>(queryPageCallback: CallableFunction) {
   // 数据内容
   const model = reactive({
     pages: {
@@ -13,19 +13,21 @@ export default function (queryPageCallback: CallableFunction) {
       current: 1,
     },
     queryParam: {},
-    loading: false,
-    batchOperateFlag: false,
-    superQueryFlag: false,
     pagination: {},
-  } as TablePageModel)
+  } as TablePageModel<T>)
+
+  // 加载状态
+  const loading = ref(false)
+  // 批量操作标识
+  const batchOperateFlag = ref(false)
+  // 高级查询条件生效状态
+  const superQueryFlag = ref(false)
 
-  // 拆分
-  const { loading, batchOperateFlag, superQueryFlag } = toRefs(model)
   // 不可以被重新赋值, 否则会失去绑定
   const { pages, pagination } = model
   // 普通查询
   function query() {
-    model.superQueryFlag = false
+    superQueryFlag.value = false
     resetPage()
     queryPageCallback()
   }
@@ -45,7 +47,7 @@ export default function (queryPageCallback: CallableFunction) {
     pagination.size = Number(res.size)
     pagination.total = Number(res.total)
     pagination.records = res.records
-    model.loading = false
+    loading.value = false
   }
   // 重置查询
   function resetQuery() {
@@ -54,7 +56,7 @@ export default function (queryPageCallback: CallableFunction) {
   }
   // 重置查询参数
   function resetQueryParams() {
-    model.superQueryFlag = false
+    superQueryFlag.value = false
     model.queryParam = {}
   }
   // ok按钮

src/views/modules/system/client/Client.api.ts

@@ -1,5 +1,6 @@
 import { defHttp } from '/@/utils/http/axios'
 import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
 
 /**
  * 分页
@@ -10,3 +11,23 @@ export const page = (params) => {
     params,
   })
 }
+
+/**
+ * 实体类
+ */
+// export class Client extends BaseEntity {
+//   // 编码
+//   public code: string
+//   // 名称
+//   name: string
+//   // 是否系统内置
+//   system: boolean
+//   // 是否可用
+//   enable: boolean
+//   // 关联登录方式
+//   loginTypeIds: string
+//   // 关联登录方式
+//   loginTypeIdList: Array<number>
+//   // 描述
+//   description: string
+// }

src/views/modules/system/client/ClientEdit.vue

@@ -8,14 +8,14 @@
     :confirmLoading="confirmLoading"
   >
     <a-spin :spinning="confirmLoading">
-      <a-form ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form class="small-from-item" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-form-item label="主键" name="id" hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
           <a-input v-model:value="form.id" :disabled="showable" />
         </a-form-item>
-        <a-form-item label="编码" name="code">
+        <a-form-item label="编码" has-feedback name="code">
           <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入编码" />
         </a-form-item>
-        <a-form-item label="名称" name="name">
+        <a-form-item label="名称" has-feedback name="name">
           <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
         </a-form-item>
         <a-form-item label="启用状态" name="enable">
@@ -57,7 +57,6 @@
 
 <script lang="ts" setup>
   import { reactive, toRef, toRefs } from 'vue'
-
   const model = reactive({
     // 表单项标题文字
     labelCol: {
@@ -78,11 +77,10 @@
     type: 'add',
   })
   const { labelCol, wrapperCol, title, modalWidth, confirmLoading, visible, editable, addable, showable, type } = toRefs(model)
-
   const form = reactive({
     id: null,
-    code: '',
+    code: null,
-    name: '',
+    name: null,
     system: false,
     enable: true,
     loginTypeIdList: [],
@@ -90,11 +88,11 @@
   })
   const rules = reactive({
     code: [
-      { required: true, message: '请输入应用编码' },
+      { required: true, message: '请输入应用编码', trigger: ['change', 'blur'] },
       // { validator: validateCode, trigger: 'blur' },
     ],
-    name: [{ required: true, message: '请输入应用名称' }],
+    name: [{ required: true, message: '请输入应用名称', trigger: ['change', 'blur'] }],
-    enable: [{ required: true, message: '请选择启用状态' }],
+    enable: [{ required: true, message: '请选择启用状态', trigger: ['change', 'blur'] }],
   })
 
   function handleCancel() {
@@ -126,21 +124,4 @@
   })
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-  /* 抽屉样式按钮 */
-  .drawer-button {
-    z-index: 1;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    border-top: 1px solid #e8e8e8;
-    padding: 10px 16px;
-    text-align: right;
-    left: 0;
-    background: #fff;
-    border-radius: 0 0 2px 2px;
-    .ant-btn {
-      margin-left: 10px;
-    }
-  }
-</style>

src/views/modules/system/client/ClientList.vue

@@ -54,8 +54,7 @@
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTable(queryPage)
   const clientEdit = ref()
-
+  // 查询条件z
-  // 查询条件
   const fields = [
     { field: 'code', type: STRING, name: '编码', placeholder: '请输入终端编码' },
     { field: 'name', type: STRING, name: '名称', placeholder: '请输入终端名称' },
@@ -67,7 +66,7 @@
 
   // 分页查询
   function queryPage() {
-    model.loading = true
+    loading.value = true
     page({
       ...model.queryParam,
       ...pages,

types/web.d.ts

@@ -23,12 +23,6 @@ export interface PageParam {
  * 分页表格列表对象
  */
 export interface TablePageModel<T = any> {
-  // 加载状态
-  loading: boolean
-  // 批量操作标识
-  batchOperateFlag: boolean
-  // 高级查询条件生效状态
-  superQueryFlag: boolean
   // 分页参数
   pages: PageParam
   // 查询参数
@@ -40,4 +34,22 @@ export interface TablePageModel<T = any> {
 /**
  * 编辑界面参数对象
  */
-export interface EditModel {}
+export interface EditModel {
+
+}
+
+/**
+ * 基础实体对象
+ */
+export class BaseEntity {
+  id: number
+}
+
+/**
+ * 表单类型
+ */
+export enum FormType {
+  Add,
+  Edit,
+  Show,
+}

yarn.lock

@@ -2266,10 +2266,10 @@ ansi-styles@^6.0.0:
   resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
   integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
 
-ant-design-vue@^3.2.0:
+ant-design-vue@^3.2.13:
-  version "3.2.9"
+  version "3.2.13"
-  resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.9.tgz#0ec3d02912a3f8596680d7f7a71749e8f01288cb"
+  resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.13.tgz#2e2823d2ee84b83827816a5591c7bb7563852662"
-  integrity sha512-fnZJpAf4tYAPGBALD9dv8VBmeqfJ+xPt87DfgY1/JI6x3hn6Gfge7voF1GkS0yVT0zLyzc2aTWkDVFWKB5iupA==
+  integrity sha512-zO+0hhu5LN+UQOL9L+7Wlpj3WZcG6DT41OyuMJNS6Ja3impLNR2d1UwAVXr+eRdMd3TKd6dRc+KYn5/XTS9K8Q==
   dependencies:
     "@ant-design/colors" "^6.0.0"
     "@ant-design/icons-vue" "^6.1.0"