hoto
/
hoto-auth-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

灵感？

Browse Source
main
expressgy 3 months ago
parent fcdf22d13e
commit ca2bce89fe
7 changed files with 130 additions and 60 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      pnpm-lock.yaml
  2. 31
      src/assets/custom.css
  3. 20
      src/components/AntDesignVue/CustomAntDesignVue/Button/AckCreateAntdButton.vue
  4. 2
      src/components/AntDesignVue/CustomAntDesignVue/index.js
  5. 10
      src/components/AntDesignVue/index.js
  6. 105
      src/views/Auth/Dict/DictForm.vue
  7. 13
      src/views/Auth/Dict/index.vue

9
pnpm-lock.yaml
Unescape View File

@ -529,55 +529,46 @@ packages:
resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==}
cpu: [arm]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.18.0':
resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==}
cpu: [arm]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.18.0':
resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.18.0':
resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==}
cpu: [arm64]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-powerpc64le-gnu@4.18.0':
resolution: {integrity: sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-riscv64-gnu@4.18.0':
resolution: {integrity: sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-s390x-gnu@4.18.0':
resolution: {integrity: sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.18.0':
resolution: {integrity: sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==}
cpu: [x64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.18.0':
resolution: {integrity: sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==}
cpu: [x64]
os: [linux]
libc: [musl]
'@rollup/rollup-win32-arm64-msvc@4.18.0':
resolution: {integrity: sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==}

31
src/assets/custom.css
Unescape View File

@ -6,3 +6,34 @@
text-align: center;
}
}
/* Antd Custom */
/* 模态框 */
.ant-modal{
position: relative;
max-height: 75vh;
height: 900px;
overflow: hidden;
.ant-modal-content{
position: relative;
box-sizing: border-box;
max-height: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
.ant-modal-body{
height: 100%;
overflow: hidden;
& > *{
position: relative;
height: 100%;
overflow: auto;
padding: 0 5px ;
}
}
}
}

20
src/components/AntDesignVue/CustomAntDesignVue/Button/AckCreateAntdButton.vue
Unescape View File

@ -0,0 +1,20 @@
<script setup name="AckCreateAntdButton">
import { h, ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
const canClick = ref(true);
const handleClick = () => {
if (canClick.value) {
canClick.value = false;
setTimeout(() => {
canClick.value = true;
}, 750);
}
};
</script>
<template>
<AButton type="primary" :disabled="!canClick" @click="handleClick" :icon="h(PlusOutlined)">确认创建</AButton>
</template>
<style scoped></style>

2
src/components/AntDesignVue/CustomAntDesignVue/index.js
Unescape View File

@ -12,11 +12,13 @@
// | ------------------------------------------------------------
import CreateAntdButton from './Button/CreateAntdButton.vue';
import AckCreateAntdButton from './Button/AckCreateAntdButton.vue';
// ! 全局导出自定义的Antd组件
export default function setupCustomAntdComponents(app) {
const customComponentList = [
CreateAntdButton, // ! 主要添加按钮
AckCreateAntdButton
];
for (let component of customComponentList) {
app.component(component.__name, component);

10
src/components/AntDesignVue/index.js
Unescape View File

@ -24,7 +24,12 @@ import {
Space,
Flex,
Select,
SelectOption, Textarea, Input, Radio, RadioGroup, InputNumber,
SelectOption,
Textarea,
Input,
Radio,
RadioGroup,
InputNumber, Affix,
} from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
@ -50,12 +55,13 @@ export function setupCustomAntDesignVueComponents(app) {
Space, // ! 间隔
Flex, // ! 弹性布局
Select, // ! 选择器
SelectOption,// ! 选择项
SelectOption, // ! 选择项
Textarea, // ! 多行文本
Input, // ! 输入框
RadioGroup, // ! 单选组
Radio, // ! 单选
InputNumber, // ! 数字输入框
Affix, // ! 固钉
];
for (let component of componentList) {
app.component(component.name, component);

105
src/views/Auth/Dict/DictForm.vue
Unescape View File

@ -1,10 +1,13 @@
<script setup name="DictForm">
import { onMounted, h, watch, reactive } from 'vue';
import { onMounted, h, watch, reactive, ref } from 'vue';
import { useBaseDataStore } from '@/stores/baseData.js';
import { ReloadOutlined, SettingOutlined } from '@ant-design/icons-vue';
const baseDataStore = useBaseDataStore();
const props = defineProps({
status: {
type: Boolean,
},
form: {
type: Object,
default: () => ({
@ -46,6 +49,9 @@ const props = defineProps({
const form = reactive({
...props.form,
});
// ! ref
const bodyRef = ref(null);
const offsetBottom = ref(null);
// ! pid
watch(form, (newVal, oldVal) => {
if (form.pid != '') {
@ -58,6 +64,8 @@ watch(form, (newVal, oldVal) => {
}
});
onMounted(() => {
window.pino.info('DictForm Mounted');
offsetBottom.value = 0;
// ! 检测获取字典列表
if (baseDataStore.state.dictList?.length == 0) {
baseDataStore.getDictList();
@ -66,57 +74,66 @@ onMounted(() => {
if (baseDataStore.state.serviceList?.length == 0) {
baseDataStore.getServiceList();
}
console.log(props);
});
function change(affixed) {
console.log(affixed);
}
</script>
<template>
<AForm :model="form" name="DictForm" :label-col="{ span: 8 }" layout="vertical">
<AFormItem label="上级字典" name="pid">
<AFlex gap="small">
<ACascader flex="1" allowClear showSearch v-model:value="form.pid" :options="baseDataStore.state.dictTree" placeholder="请选择上级字典" change-on-select />
<AButton flex="0" :icon="h(ReloadOutlined)" @click="baseDataStore.getDictList()" shape="circle" />
</AFlex>
</AFormItem>
<AFormItem label="所属服务" name="serviceKey">
<AFlex gap="small">
<ASelect
placeholder="请选择所属服务"
ref="serviceKey"
v-model:value="form.serviceKey"
:options="baseDataStore.state.serviceList"
:field-names="{ label: 'serviceName', value: 'serviceKey', options: 'children' }"
/>
<AButton flex="0" :icon="h(ReloadOutlined)" @click="baseDataStore.getServiceList()" shape="circle" />
</AFlex>
</AFormItem>
<div ref="bodyRef" v-if="props.status">
<AForm :model="form" name="DictForm" :label-col="{ span: 8 }" layout="vertical">
<AFormItem label="上级字典" name="pid">
<AFlex gap="small">
<ACascader flex="1" allowClear showSearch v-model:value="form.pid" :options="baseDataStore.state.dictTree" placeholder="请选择上级字典" change-on-select />
<AButton flex="0" :icon="h(ReloadOutlined)" @click="baseDataStore.getDictList()" shape="circle" />
</AFlex>
</AFormItem>
<AFormItem label="所属服务" name="serviceKey">
<AFlex gap="small">
<ASelect
placeholder="请选择所属服务"
ref="serviceKey"
v-model:value="form.serviceKey"
:options="baseDataStore.state.serviceList"
:field-names="{ label: 'serviceName', value: 'serviceKey', options: 'children' }"
/>
<AButton flex="0" :icon="h(ReloadOutlined)" @click="baseDataStore.getServiceList()" shape="circle" />
</AFlex>
</AFormItem>
<AFormItem label="字典名称" name="dictName">
<AInput style="width: 100%" v-model:value="form.dictName" placeholder="请输入字典名称" :maxlength="32" showCount/>
</AFormItem>
<AFormItem label="字典名称" name="dictName">
<AInput style="width: 100%" v-model:value="form.dictName" placeholder="请输入字典名称" :maxlength="32" showCount />
</AFormItem>
<AFormItem label="字典类型" name="dictType">
<ASelect placeholder="请选择字典类型" ref="dictType" v-model:value="form.dictType" :options="baseDataStore.state.dictTypeList"/>
</AFormItem>
<AFormItem label="字典类型" name="dictType">
<ASelect placeholder="请选择字典类型" ref="dictType" v-model:value="form.dictType" :options="baseDataStore.state.dictTypeList" />
</AFormItem>
<AFormItem label="字典图标" name="dictIcon">
<ASelect placeholder="请选择字典图标" ref="dictIcon" v-model:value="form.dictIcon" :options="baseDataStore.state.dictTypeList"/>
</AFormItem>
<AFormItem label="字典图标" name="dictIcon">
<ASelect placeholder="请选择字典图标" ref="dictIcon" v-model:value="form.dictIcon" :options="baseDataStore.state.dictTypeList" />
</AFormItem>
<AFormItem label="字典描述" name="dictDesc">
<ATextarea style="width: 100%" v-model:value="form.dictDesc" :rows="3" placeholder="请输入字典描述" :maxlength="255" showCount/>
</AFormItem>
<AFormItem label="原始数据Root" name="root">
<ARadioGroup v-model:value="form.root" name="radioGroup">
<ARadio :value="true">是</ARadio>
<a-radio :value="false">否</a-radio>
</ARadioGroup>
</AFormItem>
<AFormItem label="排序" name="orderNum">
<AInputNumber v-model:value="form.orderNum">
<template #addonAfter><SettingOutlined/></template>
</AInputNumber>
</AFormItem>
</AForm>
<AFormItem label="字典描述" name="dictDesc">
<ATextarea style="width: 100%" v-model:value="form.dictDesc" :rows="3" placeholder="请输入字典描述" :maxlength="255" showCount />
</AFormItem>
<AFormItem label="原始数据Root" name="root">
<ARadioGroup v-model:value="form.root" name="radioGroup">
<ARadio :value="true">是</ARadio>
<a-radio :value="false">否</a-radio>
</ARadioGroup>
</AFormItem>
<AFormItem label="排序" name="orderNum">
<AInputNumber v-model:value="form.orderNum">
<template #addonAfter><SettingOutlined /></template>
</AInputNumber>
</AFormItem>
</AForm>
<AAffix :target="() => bodyRef" :offset-bottom="0">
<AckCreateAntdButton @click="props.handleAck" />
</AAffix>
</div>
</template>
<style scoped></style>

13
src/views/Auth/Dict/index.vue
Unescape View File

@ -5,7 +5,7 @@ import DictForm from './DictForm.vue';
// ! 关于新增修改的表单
const form = reactive({
// 弹窗状态
status: true,
status: false,
// 表单数据
formData: {
pid: 0,
@ -14,7 +14,7 @@ const form = reactive({
// 字典描述
dictDesc: '',
// 字典名
dictName: '',
dictName: 'AAAAAAA',
// 图标
dictIcon: '',
// 字典的数据类型
@ -27,7 +27,9 @@ const form = reactive({
orderNum: 0,
},
// 确认
handleAck: () => {},
handleAck: () => {
console.log('确认');
},
// 取消
handleCancel: () => {},
});
@ -40,8 +42,9 @@ const form = reactive({
<CreateAntdButton name="字典" @click="form.status = true"/>
</template>
<template #modal>
<AModal v-model:open="form.status" title="添加字典" :centered="true">
<DictForm :form="form.formData" :handleAck="form.handleAck" :handleCancel="form.handleCancel"></DictForm>
<AModal v-model:open="form.status" title="添加字典" :centered="true" :maskClosable="false">
<DictForm v-if="form.status" :form="form.formData" :handleAck="form.handleAck" :handleCancel="form.handleCancel" :status:="form.status"></DictForm>
<template #footer></template>
</AModal>
</template>
</WorkContainer>

Write Preview
Loading…
Cancel
Save