dromara/dax-pay-ui
1
0
Fork 0
mirror of https://gitee.com/bootx/dax-pay-ui.git synced 2025-09-11 14:39:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xxm
2022-10-10 18:37:12 +08:00
parent 3185a2c903
commit 242ea9a26e
15 changed files with 201 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
build/vite/plugin/index.ts
View File

@@ -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

2
package.json
View File

@@ -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",

12
src/components/Bootx/Query/BQuery.vue
View File

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

13
src/design/components/antdv.less Normal file
View File

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

16
src/design/components/global.less Normal file
View File

@@ -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;
}
}

3
src/design/components/index.less Normal file
View File

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

50
src/design/components/wangEditor.less Normal file
View File

@@ -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 */

1
src/design/index.less
View File

@@ -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;

37
src/hooks/bootx/useFrom.ts Normal file
View File

@@ -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,
}
}

24
src/hooks/bootx/useTable.ts
View File

@@ -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按钮

21
src/views/modules/system/client/Client.api.ts
View File

@@ -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
// }

39
src/views/modules/system/client/ClientEdit.vue
View File

@@ -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-item label="主键" name="id" hidden="true">
<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-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: '',
name: '',
code: null,
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: '请输入应用名称' }],
enable: [{ required: true, message: '请选择启用状态' }],
name: [{ required: true, message: '请输入应用名称', trigger: ['change', 'blur'] }],
enable: [{ required: true, message: '请选择启用状态', trigger: ['change', 'blur'] }],
})
function handleCancel() {
@@ -126,21 +124,4 @@
})
</script>
<style lang="less" scoped>
/* 抽屉样式按钮 */
.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>
<style lang="less" scoped></style>

5
src/views/modules/system/client/ClientList.vue
View File

@@ -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,

26
types/web.d.ts vendored
View File

@@ -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,
}

8
yarn.lock
View File

@@ -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:
version "3.2.9"
resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.9.tgz#0ec3d02912a3f8596680d7f7a71749e8f01288cb"
integrity sha512-fnZJpAf4tYAPGBALD9dv8VBmeqfJ+xPt87DfgY1/JI6x3hn6Gfge7voF1GkS0yVT0zLyzc2aTWkDVFWKB5iupA==
ant-design-vue@^3.2.13:
version "3.2.13"
resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.13.tgz#2e2823d2ee84b83827816a5591c7bb7563852662"
integrity sha512-zO+0hhu5LN+UQOL9L+7Wlpj3WZcG6DT41OyuMJNS6Ja3impLNR2d1UwAVXr+eRdMd3TKd6dRc+KYn5/XTS9K8Q==
dependencies:
"@ant-design/colors" "^6.0.0"
"@ant-design/icons-vue" "^6.1.0"