root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: vue3.3 defineOptions

Browse Source
This commit is contained in:
shizhong 2023-09-22 14:00:50 +08:00
parent 20f483f561
commit 7e5ad60d1d
23 changed files with 122 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Crontab/src/Crontab.vue
View File

@ -968,37 +968,37 @@ const submit = () => {
<style scoped>
.sc-cron:deep(.el-tabs__item) {
height: auto;
line-height: 1;
padding: 0 7px;
line-height: 1;
vertical-align: bottom;
}
.sc-cron-num {
text-align: center;
margin-bottom: 15px;
width: 100%;
margin-bottom: 15px;
text-align: center;
}
.sc-cron-num h2 {
font-size: 12px;
margin-bottom: 15px;
font-size: 12px;
font-weight: normal;
}
.sc-cron-num h4 {
display: block;
height: 32px;
line-height: 30px;
width: 100%;
font-size: 12px;
height: 32px;
padding: 0 15px;
font-size: 12px;
line-height: 30px;
background: var(--el-color-primary-light-9);
border-radius: 4px;
}
.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
background: var(--el-color-primary);
color: #fff;
background: var(--el-color-primary);
}
[data-theme='dark'] .sc-cron-num h4 {

1
src/components/Dialog/src/Dialog.vue
View File

@ -2,6 +2,7 @@
import { propTypes } from '@/utils/propTypes'
import { isNumber } from '@/utils/is'
// eslint-disable-next-line vue/no-reserved-component-names
defineOptions({ name: 'Dialog' })
const slots = useSlots()

2
src/components/DocAlert/index.vue
View File

@ -27,8 +27,8 @@ const getEnable = () => {
</script>
<style scoped>
.el-alert--success.is-light {
border: 1px solid green;
margin-bottom: 10px;
cursor: pointer;
border: 1px solid green;
}
</style>

8
src/components/Icon/src/IconSelect.vue
View File

@ -191,10 +191,10 @@ watch(
.icon-item {
&:hover {
border-color: var(--el-color-primary);
color: var(--el-color-primary);
transition: all 0.4s;
border-color: var(--el-color-primary);
transform: scaleX(1.05);
transition: all 0.4s;
}
}
@ -215,15 +215,15 @@ watch(
}
:deep(.el-tabs__item) {
height: 30px;
font-size: 12px;
font-weight: normal;
height: 30px;
line-height: 30px;
}
:deep(.el-tabs__header),
:deep(.el-tabs__nav-wrap) {
margin: 0;
position: static;
margin: 0;
}
</style>

2
src/components/InputPassword/src/InputPassword.vue
View File

@ -96,7 +96,7 @@ $prefix-cls: #{$namespace}-input-password;
background-color: transparent;
border-color: var(--el-color-white);
border-style: solid;
border-width: 0 5px 0 5px;
border-width: 0 5px;
content: '';
}

2
src/components/Qrcode/src/Qrcode.vue
View File

@ -243,7 +243,7 @@ $prefix-cls: #{$namespace}-qrcode;
.#{$prefix-cls} {
&--disabled {
background: rgba(255, 255, 255, 0.95);
background: rgb(255 255 255 / 95%);
& > div {
transform: translate(-50%, -50%);

4
src/components/UploadFile/src/UploadFile.vue
View File

@ -145,21 +145,25 @@ const listToString = (list: UploadUserFile[], separator?: string) => {
.upload-file-uploader {
margin-bottom: 5px;
}
:deep(.upload-file-list .el-upload-list__item) {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
:deep(.el-upload-list__item-file-name) {
max-width: 250px;
}
:deep(.upload-file-list .ele-upload-list__item-content) {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
:deep(.ele-upload-list__item-content-action .el-link) {
margin-right: 10px;
}

24
src/components/UploadFile/src/UploadImg.vue
View File

@ -81,7 +81,7 @@ const props = defineProps({
fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
borderRadius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
borderradius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
})
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -132,29 +132,34 @@ const uploadError = () => {
:deep(.el-upload),
:deep(.el-upload-dragger) {
border: 1px dashed var(--el-color-danger) !important;
&:hover {
border-color: var(--el-color-primary) !important;
}
}
}
}
:deep(.disabled) {
.el-upload,
.el-upload-dragger {
cursor: not-allowed !important;
background: var(--el-disabled-bg-color);
border: 1px dashed var(--el-border-color-darker) !important;
&:hover {
border: 1px dashed var(--el-border-color-darker) !important;
}
}
}
.upload-box {
.no-border {
:deep(.el-upload) {
border: none !important;
}
}
:deep(.upload) {
.el-upload {
position: relative;
@ -165,14 +170,17 @@ const uploadError = () => {
height: v-bind(height);
overflow: hidden;
border: 1px dashed var(--el-border-color-darker);
border-radius: v-bind(borderRadius);
border-radius: v-bind(borderradius);
transition: var(--el-transition-duration-fast);
&:hover {
border-color: var(--el-color-primary);
.upload-handle {
opacity: 1;
}
}
.el-upload-dragger {
display: flex;
align-items: center;
@ -183,20 +191,24 @@ const uploadError = () => {
overflow: hidden;
background-color: transparent;
border: 1px dashed var(--el-border-color-darker);
border-radius: v-bind(borderRadius);
border-radius: v-bind(borderradius);
&:hover {
border: 1px dashed var(--el-color-primary);
}
}
.el-upload-dragger.is-dragover {
background-color: var(--el-color-primary-light-9);
border: 2px dashed var(--el-color-primary) !important;
}
.upload-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.upload-empty {
position: relative;
display: flex;
@ -206,11 +218,13 @@ const uploadError = () => {
font-size: 12px;
line-height: 30px;
color: var(--el-color-info);
.el-icon {
font-size: 28px;
color: var(--el-text-color-secondary);
}
}
.upload-handle {
position: absolute;
top: 0;
@ -225,6 +239,7 @@ const uploadError = () => {
background: rgb(0 0 0 / 60%);
opacity: 0;
transition: var(--el-transition-duration-fast);
.handle-icon {
display: flex;
flex-direction: column;
@ -232,11 +247,13 @@ const uploadError = () => {
justify-content: center;
padding: 0 6%;
color: aliceblue;
.el-icon {
margin-bottom: 40%;
font-size: 130%;
line-height: 130%;
}
span {
font-size: 85%;
line-height: 85%;
@ -245,6 +262,7 @@ const uploadError = () => {
}
}
}
.el-upload__tip {
line-height: 18px;
text-align: center;

8
src/components/UploadFile/src/UploadImgs.vue
View File

@ -82,7 +82,7 @@ const props = defineProps({
fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
borderRadius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
borderradius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
})
const uploadHeaders = ref({
@ -90,7 +90,7 @@ const uploadHeaders = ref({
'tenant-id': getTenantId()
})
const fileList = ref<UploadUserFile[]>()
const fileList = ref<UploadUserFile[]>([])
// fix: 改为动态监听赋值解决图片回显问题
watch(
() => props.modelValue,
@ -218,7 +218,7 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
padding: 0;
overflow: hidden;
border: 1px dashed var(--el-border-color-darker);
border-radius: v-bind(borderRadius);
border-radius: v-bind(borderradius);
&:hover {
border: 1px dashed var(--el-color-primary);
@ -235,7 +235,7 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
width: v-bind(width);
height: v-bind(height);
background-color: transparent;
border-radius: v-bind(borderRadius);
border-radius: v-bind(borderradius);
}
.upload-image {

94
src/components/Verifition/src/Verify.vue
View File

File diff suppressed because one or more lines are too long

3
src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
View File

@ -7,8 +7,9 @@
href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
type="danger"
target="_blank"
>如何实现实现会签、或签？</el-link
>
如何实现实现会签、或签？
</el-link>
<el-form-item label="流程标识" prop="id">
<el-input
v-model="needProps.id"

9
src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
View File

@ -6,17 +6,18 @@
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="110px">
<template #default="scope">
<el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small"
>编辑</el-button
>
<el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small">
编辑
</el-button>
<el-divider direction="vertical" />
<el-button
link
size="small"
style="color: #ff4d4f"
@click="removeAttributes(scope.row, scope.$index)"
>移除</el-button
>
移除
</el-button>
</template>
</el-table-column>
</el-table>

6
src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="panel-tab__content">
<div class="panel-tab__content--title">
<span><Icon icon="ep:menu" style="margin-right: 8px; color: #555555" />消息列表</span>
<span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />消息列表</span>
<XButton type="primary" title="创建新消息" preIcon="ep:plus" @click="openModel('message')" />
</div>
<el-table :data="messageList" border>
@ -11,9 +11,9 @@
</el-table>
<div
class="panel-tab__content--title"
style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee"
style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee"
>
<span><Icon icon="ep:menu" style="margin-right: 8px; color: #555555" />信号列表</span>
<span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />信号列表</span>
<XButton type="primary" title="创建新信号" preIcon="ep:plus" @click="openModel('signal')" />
</div>
<el-table :data="signalList" border>

16
src/layout/components/Setting/src/components/LayoutRadioPicker.vue
View File

@ -68,7 +68,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
border: 2px solid #e5e7eb;
border-radius: 4px;
&:before {
&::before {
position: absolute;
top: 0;
left: 0;
@ -80,14 +80,14 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
content: '';
}
&:after {
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 25%;
background-color: #fff;
border-radius: 4px 4px 0 4px;
border-radius: 4px 4px 0;
content: '';
}
}
@ -96,7 +96,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
border: 2px solid #e5e7eb;
border-radius: 4px;
&:before {
&::before {
position: absolute;
top: 0;
left: 0;
@ -108,7 +108,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
content: '';
}
&:after {
&::after {
position: absolute;
top: 0;
left: 0;
@ -124,7 +124,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
border: 2px solid #e5e7eb;
border-radius: 4px;
&:before {
&::before {
position: absolute;
top: 0;
left: 0;
@ -141,7 +141,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
border: 2px solid #e5e7eb;
border-radius: 4px;
&:before {
&::before {
position: absolute;
top: 0;
left: 0;
@ -153,7 +153,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
content: '';
}
&:after {
&::after {
position: absolute;
top: 0;
left: 0;

4
src/views/Error/403.vue
View File

@ -1,6 +1,8 @@
<template>
<Error type="403" @error-click="push('/')" />
</template>
<script lang="ts" name="Error403" setup>
<script lang="ts" setup>
defineOptions({ name: 'Error403' })
const { push } = useRouter()
</script>

4
src/views/Error/404.vue
View File

@ -1,6 +1,8 @@
<template>
<Error @error-click="push('/')" />
</template>
<script lang="ts" name="Error404" setup>
<script lang="ts" setup>
defineOptions({ name: 'Error404' })
const { push } = useRouter()
</script>

4
src/views/Error/500.vue
View File

@ -1,6 +1,8 @@
<template>
<Error type="500" @error-click="push('/')" />
</template>
<script lang="ts" name="Error500" setup>
<script lang="ts" setup>
defineOptions({ name: 'Error500' })
const { push } = useRouter()
</script>

5
src/views/Profile/components/BasicInfo.vue
View File

@ -14,8 +14,6 @@
</template>
<script lang="ts" setup>
import type { FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { FormSchema } from '@/types/form'
import type { FormExpose } from '@/components/Form'
import {
@ -27,6 +25,7 @@ import {
defineOptions({ name: 'BasicInfo' })
const { t } = useI18n()
const message = useMessage() // 消息弹窗
// 表单校验
const rules = reactive<FormRules>({
nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
@ -78,7 +77,7 @@ const submit = () => {
if (valid) {
const data = unref(formRef)?.formModel as UserProfileUpdateReqVO
await updateUserProfileApi(data)
ElMessage.success(t('common.updateSuccess'))
message.success(t('common.updateSuccess'))
await init()
}
})

4
src/views/Profile/components/ProfileUser.vue
View File

@ -81,7 +81,7 @@ onMounted(async () => {
}
.list-group {
padding-left: 0px;
padding-left: 0;
list-style: none;
}
@ -89,7 +89,7 @@ onMounted(async () => {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
padding: 11px 0;
font-size: 13px;
}

1
src/views/Redirect/Redirect.vue
View File

@ -2,7 +2,6 @@
<div></div>
</template>
<script setup lang="ts">
defineOptions({ name: 'Redirect' })
const { currentRoute, replace } = useRouter()

1
src/views/mall/product/spu/components/SkuList.vue
View File

@ -264,6 +264,7 @@ import { PropertyAndValues } from './index'
import { ElTable } from 'element-plus'
defineOptions({ name: 'SkuList' })
const message = useMessage() // 消息弹窗
const props = defineProps({

2
src/views/mall/trade/delivery/expressTemplate/index.vue
View File

@ -92,7 +92,7 @@
<!-- 表单弹窗：添加/修改 -->
<ExpressTemplateForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as DeliveryExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'

6
src/views/mp/freePublish/index.vue
View File

@ -99,7 +99,7 @@ const handleDelete = async (item: any) => {
}
</script>
<style lang="scss" scoped>
@media (min-width: 992px) and (max-width: 1300px) {
@media (width >= 992px) and (width <= 1300px) {
.waterfall {
column-count: 3;
}
@ -109,7 +109,7 @@ const handleDelete = async (item: any) => {
}
}
@media (min-width: 768px) and (max-width: 991px) {
@media (width >= 768px) and (width <= 991px) {
.waterfall {
column-count: 2;
}
@ -119,7 +119,7 @@ const handleDelete = async (item: any) => {
}
}
@media (max-width: 767px) {
@media (width <= 767px) {
.waterfall {
column-count: 1;
}