mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 12:58:55 +08:00
♻️ Refactoring code. 调整前端组件增加相关api 方便二次开发
This commit is contained in:
lbw
parent
487ddeadb0
commit
3ece22d8ab
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<el-cascader :options="optionsData" v-model="selectedOptions" @change="handleChange" />
|
||||
<el-cascader :options="optionsData" :disabled="disabled" v-model="selectedOptions" @change="handleChange" />
|
||||
</template>
|
||||
<script setup lang="ts" name="china-area">
|
||||
import { provinceAndCityData, provinceAndCityDataPlus, regionData, regionDataPlus } from '/@/utils/chinaArea';
|
||||
|
||||
const emit = defineEmits(['update:value', 'change']);
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
const optionsData = ref();
|
||||
const props = defineProps({
|
||||
// 当前的值
|
||||
@ -18,6 +18,11 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
});
|
||||
|
||||
const selectedOptions = computed({
|
||||
@ -25,7 +30,7 @@ const selectedOptions = computed({
|
||||
return props.modelValue?.split(',');
|
||||
},
|
||||
set: (val) => {
|
||||
emit('update:value', val?.join(','));
|
||||
emit('update:modelValue', val?.join(','));
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -47,8 +47,7 @@ export default {
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
},
|
||||
default: () => {},
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
@ -116,7 +115,6 @@ export default {
|
||||
border: 1px solid #ddd;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.code-editor:deep(.CodeMirror) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -43,10 +43,10 @@
|
||||
<el-form>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="value.second.type">
|
||||
<el-radio border label="0">任意值</el-radio>
|
||||
<el-radio border label="1">范围</el-radio>
|
||||
<el-radio border label="2">间隔</el-radio>
|
||||
<el-radio border label="3">指定</el-radio>
|
||||
<el-radio-button label="0">任意值</el-radio-button>
|
||||
<el-radio-button label="1">范围</el-radio-button>
|
||||
<el-radio-button label="2">间隔</el-radio-button>
|
||||
<el-radio-button label="3">指定</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围" v-if="value.second.type == 1">
|
||||
@ -77,10 +77,10 @@
|
||||
<el-form>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="value.minute.type">
|
||||
<el-radio border label="0">任意值</el-radio>
|
||||
<el-radio border label="1">范围</el-radio>
|
||||
<el-radio border label="2">间隔</el-radio>
|
||||
<el-radio border label="3">指定</el-radio>
|
||||
<el-radio-button label="0">任意值</el-radio-button>
|
||||
<el-radio-button label="1">范围</el-radio-button>
|
||||
<el-radio-button label="2">间隔</el-radio-button>
|
||||
<el-radio-button label="3">指定</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围" v-if="value.minute.type == 1">
|
||||
@ -111,10 +111,10 @@
|
||||
<el-form>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="value.hour.type">
|
||||
<el-radio border label="0">任意值</el-radio>
|
||||
<el-radio border label="1">范围</el-radio>
|
||||
<el-radio border label="2">间隔</el-radio>
|
||||
<el-radio border label="3">指定</el-radio>
|
||||
<el-radio-button label="0">任意值</el-radio-button>
|
||||
<el-radio-button label="1">范围</el-radio-button>
|
||||
<el-radio-button label="2">间隔</el-radio-button>
|
||||
<el-radio-button label="3">指定</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围" v-if="value.hour.type == 1">
|
||||
@ -145,12 +145,12 @@
|
||||
<el-form>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="value.day.type">
|
||||
<el-radio border label="0">任意值</el-radio>
|
||||
<el-radio border label="1">范围</el-radio>
|
||||
<el-radio border label="2">间隔</el-radio>
|
||||
<el-radio border label="3">指定</el-radio>
|
||||
<el-radio border label="4">本月最后一天</el-radio>
|
||||
<el-radio border label="5">不指定</el-radio>
|
||||
<el-radio-button label="0">任意值</el-radio-button>
|
||||
<el-radio-button label="1">范围</el-radio-button>
|
||||
<el-radio-button label="2">间隔</el-radio-button>
|
||||
<el-radio-button label="3">指定</el-radio-button>
|
||||
<el-radio-button label="4">本月最后一天</el-radio-button>
|
||||
<el-radio-button label="5">不指定</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围" v-if="value.day.type == 1">
|
||||
@ -181,10 +181,10 @@
|
||||
<el-form>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="value.month.type">
|
||||
<el-radio border label="0">任意值</el-radio>
|
||||
<el-radio border label="1">范围</el-radio>
|
||||
<el-radio border label="2">间隔</el-radio>
|
||||
<el-radio border label="3">指定</el-radio>
|
||||
<el-radio-button label="0">任意值</el-radio-button>
|
||||
<el-radio-button label="1">范围</el-radio-button>
|
||||
<el-radio-button label="2">间隔</el-radio-button>
|
||||
<el-radio-button label="3">指定</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围" v-if="value.month.type == 1">
|
||||
@ -216,12 +216,12 @@
|
||||
<el-form>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="value.week.type">
|
||||
<el-radio border label="0">任意值</el-radio>
|
||||
<el-radio border label="1">范围</el-radio>
|
||||
<el-radio border label="2">间隔</el-radio>
|
||||
<el-radio border label="3">指定</el-radio>
|
||||
<el-radio border label="4">本月最后一周</el-radio>
|
||||
<el-radio border label="5">不指定</el-radio>
|
||||
<el-radio-button label="0">任意值</el-radio-button>
|
||||
<el-radio-button label="1">范围</el-radio-button>
|
||||
<el-radio-button label="2">间隔</el-radio-button>
|
||||
<el-radio-button label="3">指定</el-radio-button>
|
||||
<el-radio-button label="4">本月最后一周</el-radio-button>
|
||||
<el-radio-button label="5">不指定</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围" v-if="value.week.type == 1">
|
||||
@ -265,11 +265,11 @@
|
||||
<el-form>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="value.year.type">
|
||||
<el-radio border label="-1">忽略</el-radio>
|
||||
<el-radio border label="0">任意值</el-radio>
|
||||
<el-radio border label="1">范围</el-radio>
|
||||
<el-radio border label="2">间隔</el-radio>
|
||||
<el-radio border label="3">指定</el-radio>
|
||||
<el-radio-button label="-1">忽略</el-radio-button>
|
||||
<el-radio-button label="0">任意值</el-radio-button>
|
||||
<el-radio-button label="1">范围</el-radio-button>
|
||||
<el-radio-button label="2">间隔</el-radio-button>
|
||||
<el-radio-button label="3">指定</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="范围" v-if="value.year.type == 1">
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(item, index) in props.options">
|
||||
<template v-if="values.includes(item.value)">
|
||||
<span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="index" :index="index" :class="item.elTagClass">{{ item.label }}</span>
|
||||
<template v-if="values.includes(item.value || item)">
|
||||
<span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="index" :index="index" :class="item.elTagClass">{{
|
||||
item.label || item
|
||||
}}</span>
|
||||
<el-tag
|
||||
v-else
|
||||
:disable-transitions="true"
|
||||
@ -10,7 +12,7 @@
|
||||
:index="index"
|
||||
:type="item.elTagType === 'primary' ? '' : item.elTagType"
|
||||
:class="item.elTagClass"
|
||||
>{{ item.label }}</el-tag
|
||||
>{{ item.label || item }}</el-tag
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div class="custom-link mt-[30px]">
|
||||
<div class="flex flex-wrap items-center">
|
||||
自定义链接
|
||||
<div class="ml-4 flex-1 min-w-[100px]">
|
||||
<el-input :model-value="modelValue.query?.url" placeholder="请输入链接地址" @input="handleInput" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-tips">请填写完整的带有“https://”或“http://”的链接地址，链接的域名必须在微信公众平台设置业务域名</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
import { LinkTypeEnum, type Link } from '.';
|
||||
|
||||
defineProps({
|
||||
modelValue: {
|
||||
type: Object as PropType<Link>,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: Link): void;
|
||||
}>();
|
||||
|
||||
const handleInput = (value: string) => {
|
||||
emit('update:modelValue', {
|
||||
path: '/pages/webview/webview',
|
||||
query: {
|
||||
url: value,
|
||||
},
|
||||
type: LinkTypeEnum.CUSTOM_LINK,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
export enum LinkTypeEnum {
|
||||
'SHOP_PAGES' = 'shop',
|
||||
'CUSTOM_LINK' = 'custom',
|
||||
}
|
||||
|
||||
export interface Link {
|
||||
path: string;
|
||||
name?: string;
|
||||
type: string;
|
||||
query?: Record<string, any>;
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div class="flex link">
|
||||
<el-menu :default-active="activeMenu" class="!w-[160px] min-h-[350px] link-menu" @select="handleSelect">
|
||||
<el-menu-item v-for="(item, index) in menus" :index="item.type" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="flex-1 pl-4">
|
||||
<shop-pages v-model="activeLink" v-if="LinkTypeEnum.SHOP_PAGES == activeMenu" />
|
||||
<custom-link v-model="activeLink" v-if="LinkTypeEnum.CUSTOM_LINK == activeMenu" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
import { LinkTypeEnum, type Link } from '.';
|
||||
import ShopPages from './shop-pages.vue';
|
||||
import CustomLink from './custom-link.vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object as PropType<Link>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: any): void;
|
||||
}>();
|
||||
|
||||
const menus = ref([
|
||||
{
|
||||
name: '商城页面',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
link: {},
|
||||
},
|
||||
{
|
||||
name: '自定义链接',
|
||||
type: LinkTypeEnum.CUSTOM_LINK,
|
||||
link: {},
|
||||
},
|
||||
]);
|
||||
|
||||
const activeLink = computed({
|
||||
get() {
|
||||
return menus.value.find((item) => item.type == activeMenu.value)?.link as Link;
|
||||
},
|
||||
set(value) {
|
||||
menus.value.forEach((item) => {
|
||||
if (item.type == activeMenu.value) {
|
||||
item.link = value;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const activeMenu = ref<string>(LinkTypeEnum.SHOP_PAGES);
|
||||
|
||||
const handleSelect = (index: string) => {
|
||||
activeMenu.value = index;
|
||||
};
|
||||
|
||||
watch(activeLink, (value) => {
|
||||
if (!value?.type) return;
|
||||
emit('update:modelValue', value);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
activeMenu.value = value.type;
|
||||
activeLink.value = value;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.link-menu {
|
||||
--el-menu-item-height: 40px;
|
||||
:deep(.el-menu-item) {
|
||||
border-color: transparent !important;
|
||||
&.is-active {
|
||||
border-right-width: 2px !important;
|
||||
border-color: var(--el-color-primary) !important;
|
||||
background-color: var(--el-color-primary-light-9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div class="flex-1 link-picker" @click="!disabled && popupRef?.open()">
|
||||
<el-input :model-value="getLink" placeholder="请选择链接123" readonly :disabled="disabled"> </el-input>
|
||||
<popup ref="popupRef" width="700px" title="链接选择" @confirm="handleConfirm">
|
||||
<link-content v-model="activeLink" />
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LinkTypeEnum, type Link } from '.';
|
||||
import LinkContent from './index.vue';
|
||||
import Popup from '/@/components/Popup/index.vue';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: any): void;
|
||||
}>();
|
||||
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>();
|
||||
const activeLink = ref<Link>({ path: '', type: LinkTypeEnum.SHOP_PAGES });
|
||||
const handleConfirm = () => {
|
||||
emit('update:modelValue', activeLink.value);
|
||||
};
|
||||
|
||||
const getLink = computed(() => {
|
||||
switch (props.modelValue?.type) {
|
||||
case LinkTypeEnum.SHOP_PAGES:
|
||||
return props.modelValue.name;
|
||||
case LinkTypeEnum.CUSTOM_LINK:
|
||||
return props.modelValue.query?.url;
|
||||
default:
|
||||
return props.modelValue?.name;
|
||||
}
|
||||
});
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
if (value?.type) {
|
||||
activeLink.value = value as Link;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.link-picker {
|
||||
:deep(.el-input) {
|
||||
&.is-disabled {
|
||||
.el-input__inner {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.el-input__suffix {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.el-input__inner {
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-input__suffix {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div class="shop-pages">
|
||||
<div class="flex flex-wrap link-list">
|
||||
<div
|
||||
class="link-item border border-br px-5 py-[5px] rounded-[3px] cursor-pointer mr-[10px] mb-[10px]"
|
||||
v-for="(item, index) in linkList"
|
||||
:class="{
|
||||
'border-primary text-primary': modelValue.path == item.path && modelValue.name == item.name,
|
||||
}"
|
||||
:key="index"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
import { LinkTypeEnum, type Link } from '.';
|
||||
|
||||
defineProps({
|
||||
modelValue: {
|
||||
type: Object as PropType<Link>,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: Link): void;
|
||||
}>();
|
||||
|
||||
const linkList = ref([
|
||||
{
|
||||
path: '/pages/index/index',
|
||||
name: '首页',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/news/news',
|
||||
name: '文章资讯',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/user/user',
|
||||
name: '个人中心',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/collection/collection',
|
||||
name: '我的收藏',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/customer_service/customer_service',
|
||||
name: '联系客服',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/user_set/user_set',
|
||||
name: '个人设置',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/as_us/as_us',
|
||||
name: '关于我们',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/user_data/user_data',
|
||||
name: '个人资料',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/agreement/agreement',
|
||||
name: '隐私政策',
|
||||
query: {
|
||||
type: 'privacy',
|
||||
},
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/agreement/agreement',
|
||||
name: '服务协议',
|
||||
query: {
|
||||
type: 'service',
|
||||
},
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
},
|
||||
{
|
||||
path: '/pages/search/search',
|
||||
name: '搜索',
|
||||
type: LinkTypeEnum.SHOP_PAGES,
|
||||
}
|
||||
]);
|
||||
|
||||
const handleSelect = (value: Link) => {
|
||||
emit('update:modelValue', value);
|
||||
};
|
||||
</script>
|
||||
@ -18,7 +18,7 @@
|
||||
<el-input
|
||||
v-else
|
||||
v-model.trim="inputValue"
|
||||
:maxlength="limit"
|
||||
:maxlength="maxlength"
|
||||
:show-word-limit="showLimit"
|
||||
:type="type"
|
||||
:size="size"
|
||||
@ -27,8 +27,8 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-none popover-input__btns">
|
||||
<el-button link @click="close">取消</el-button>
|
||||
<el-button type="primary" :size="size" @click="handleConfirm">确定</el-button>
|
||||
<el-button link @click="close">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" :size="size" @click="handleConfirm">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<template #reference>
|
||||
@ -45,7 +45,7 @@ import { useEventListener } from '@vueuse/core';
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
},
|
||||
type: {
|
||||
@ -73,6 +73,10 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 200,
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
showLimit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@ -82,28 +86,33 @@ const props = defineProps({
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['confirm']);
|
||||
const emit = defineEmits(['confirm', 'update:modelValue']);
|
||||
|
||||
const visible = ref(false);
|
||||
const inPopover = ref(false);
|
||||
const inputValue = ref();
|
||||
const handleConfirm = () => {
|
||||
close();
|
||||
emit('confirm', inputValue.value);
|
||||
emit('update:modelValue', inputValue.value);
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
visible.value = true;
|
||||
inputValue.value = '';
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
() => inputValue.value,
|
||||
(value) => {
|
||||
inputValue.value = value;
|
||||
emit('update:modelValue', value);
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
|
||||
@ -21,11 +21,11 @@
|
||||
<!-- 底部弹窗页脚 -->
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button v-if="cancelButtonText" @click="handleEvent('cancel')">
|
||||
{{ cancelButtonText }}
|
||||
<el-button @click="handleEvent('cancel')">
|
||||
{{ $t('common.cancelButtonText') }}
|
||||
</el-button>
|
||||
<el-button v-if="confirmButtonText" type="primary" @click="handleEvent('confirm')">
|
||||
{{ confirmButtonText }}
|
||||
<el-button type="primary" @click="handleEvent('confirm')">
|
||||
{{ $t('common.confirmButtonText') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@ -46,16 +46,6 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
confirmButtonText: {
|
||||
// 确认按钮内容
|
||||
type: [String, Boolean],
|
||||
default: '确定',
|
||||
},
|
||||
cancelButtonText: {
|
||||
// 取消按钮内容
|
||||
type: [String, Boolean],
|
||||
default: '取消',
|
||||
},
|
||||
width: {
|
||||
// 弹窗的宽度
|
||||
type: String,
|
||||
|
||||
@ -4,5 +4,6 @@ export default {
|
||||
displayTheSearch: 'displayTheSearch',
|
||||
refresh: 'refresh',
|
||||
print: 'print',
|
||||
view: 'view'
|
||||
},
|
||||
};
|
||||
|
||||
@ -4,5 +4,6 @@ export default {
|
||||
displayTheSearch: '显示搜索',
|
||||
refresh: '刷新',
|
||||
print: '打印',
|
||||
view: '视图'
|
||||
},
|
||||
};
|
||||
|
||||
@ -21,6 +21,9 @@
|
||||
<el-tooltip class="item" effect="dark" :content="$t('queryTree.refresh')" placement="top">
|
||||
<el-button circle icon="Refresh" @click="handleRefresh()" />
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 插槽 -->
|
||||
<slot></slot>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -20,15 +20,15 @@
|
||||
<div class="upload-handle" @click.stop>
|
||||
<div class="handle-icon" @click="editImg" v-if="!self_disabled">
|
||||
<el-icon :size="props.iconSize"><Edit /></el-icon>
|
||||
<span v-if="!props.iconSize">编辑</span>
|
||||
<span v-if="!props.iconSize">{{ $t('common.editBtn') }}</span>
|
||||
</div>
|
||||
<div class="handle-icon" @click="imgViewVisible = true">
|
||||
<el-icon :size="props.iconSize"><ZoomIn /></el-icon>
|
||||
<span v-if="!props.iconSize">查看</span>
|
||||
<span v-if="!props.iconSize">{{ $t('common.viewBtn') }}</span>
|
||||
</div>
|
||||
<div class="handle-icon" @click="deleteImg" v-if="!self_disabled">
|
||||
<el-icon :size="props.iconSize"><Delete /></el-icon>
|
||||
<span v-if="!props.iconSize">删除</span>
|
||||
<span v-if="!props.iconSize">{{ $t('common.delBtn') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -71,6 +71,7 @@ interface UploadFileProps {
|
||||
width?: string; // 组件宽度 ==> 非必传（默认为 150px）
|
||||
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
|
||||
iconSize?: number;
|
||||
dir?: string; // 文件目录
|
||||
}
|
||||
|
||||
// 接受父组件参数
|
||||
@ -84,6 +85,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
|
||||
height: '150px',
|
||||
width: '150px',
|
||||
borderRadius: '8px',
|
||||
dir: ''
|
||||
});
|
||||
|
||||
// 生成组件唯一id
|
||||
@ -111,6 +113,7 @@ const emit = defineEmits<UploadEmits>();
|
||||
const handleHttpUpload = async (options: UploadRequestOptions) => {
|
||||
let formData = new FormData();
|
||||
formData.append('file', options.file);
|
||||
formData.append('dir', props.dir);
|
||||
try {
|
||||
const { data } = await request({
|
||||
url: props.uploadFileUrl,
|
||||
|
||||
@ -11,5 +11,7 @@ export default {
|
||||
size: 'size not exceeding',
|
||||
format: 'format',
|
||||
file: 'file',
|
||||
sizeErrorText: 'file size error, max ',
|
||||
typeErrorText: 'file type error, upload ',
|
||||
},
|
||||
};
|
||||
|
||||
@ -11,5 +11,7 @@ export default {
|
||||
size: '大小不超过',
|
||||
format: '格式为',
|
||||
file: '的文件',
|
||||
sizeErrorText: '文件大小不超过',
|
||||
typeErrorText: '文件类型错误，请上传 ',
|
||||
},
|
||||
};
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-remove="handleRemove"
|
||||
:data="data"
|
||||
:on-preview="handlePreview"
|
||||
:data="formData"
|
||||
:auto-upload="autoUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
class="upload-file-uploader"
|
||||
@ -47,7 +48,7 @@
|
||||
:auto-upload="autoUpload"
|
||||
:on-error="handleUploadError"
|
||||
:on-remove="handleRemove"
|
||||
:data="data"
|
||||
:data="formData"
|
||||
:on-success="handleUploadSuccess"
|
||||
class="upload-file-uploader"
|
||||
multiple
|
||||
@ -61,6 +62,8 @@
|
||||
import {useMessage} from '/@/hooks/message';
|
||||
import {Session} from '/@/utils/storage';
|
||||
import other from '/@/utils/other';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: [String, Array],
|
||||
// 数量限制
|
||||
@ -95,6 +98,11 @@ const props = defineProps({
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default:{}
|
||||
},
|
||||
dir: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
autoUpload: {
|
||||
type: Boolean,
|
||||
@ -108,7 +116,9 @@ const number = ref(0);
|
||||
const fileList = ref([]) as any;
|
||||
const uploadList = ref([]) as any;
|
||||
const fileUpload = ref();
|
||||
const { t } = useI18n();
|
||||
|
||||
// 请求头处理
|
||||
const headers = computed(() => {
|
||||
return {
|
||||
Authorization: 'Bearer ' + Session.get('token'),
|
||||
@ -116,6 +126,11 @@ const headers = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
// 请求参数处理
|
||||
const formData = computed(() => {
|
||||
return Object.assign(props.data,{dir: props.dir});
|
||||
});
|
||||
|
||||
// 上传前校检格式和大小
|
||||
const handleBeforeUpload = (file: File) => {
|
||||
// 校检文件类型
|
||||
@ -124,7 +139,7 @@ const handleBeforeUpload = (file: File) => {
|
||||
const fileExt = fileName[fileName.length - 1];
|
||||
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
|
||||
if (!isTypeOk) {
|
||||
useMessage().error(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
|
||||
useMessage().error(`${t('excel.typeErrorText')} ${props.fileType.join('/')}!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -132,7 +147,7 @@ const handleBeforeUpload = (file: File) => {
|
||||
if (props.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSize;
|
||||
if (!isLt) {
|
||||
useMessage().error(`上传文件大小不能超过 ${props.fileSize} MB!`);
|
||||
useMessage().error(`${t('excel.sizeErrorText')} ${props.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -143,7 +158,7 @@ const handleBeforeUpload = (file: File) => {
|
||||
// 上传成功回调
|
||||
function handleUploadSuccess(res: any, file: any) {
|
||||
if (res.code === 0) {
|
||||
uploadList.value.push({ name: res.data.fileName, url: res.data.url });
|
||||
uploadList.value.push({ name: file.name, url: res.data.url });
|
||||
uploadedSuccessfully();
|
||||
} else {
|
||||
number.value--;
|
||||
@ -170,6 +185,10 @@ const handleRemove = (file: any) => {
|
||||
emit('update:modelValue', listToString(fileList.value));
|
||||
};
|
||||
|
||||
const handlePreview = (file: any) => {
|
||||
other.downBlobFile(file.url, {}, file.name);
|
||||
};
|
||||
|
||||
/**
|
||||
* 将对象数组转为字符串，以逗号分隔。
|
||||
* @param list 待转换的对象数组。
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<script setup lang="ts" name="global-websocket">
|
||||
import { ElNotification } from 'element-plus';
|
||||
import { Session } from '/@/utils/storage';
|
||||
import other from "/@/utils/other";
|
||||
|
||||
const emit = defineEmits(['rollback']);
|
||||
|
||||
@ -49,7 +50,7 @@ const initWebSocket = () => {
|
||||
let host = window.location.host;
|
||||
// baseURL
|
||||
let baseURL = import.meta.env.VITE_API_URL;
|
||||
let wsUri = `ws://${host}${baseURL}${props.uri}?access_token=${token.value}&TENANT-ID=${tenant.value}`;
|
||||
let wsUri = `ws://${host}${baseURL}${other.adaptationUrl(props.uri)}?access_token=${token.value}&TENANT-ID=${tenant.value}`;
|
||||
// 建立连接
|
||||
state.webSocket = new WebSocket(wsUri);
|
||||
// 连接成功
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog title="上传文件" v-model="visible" :close-on-click-modal="false" draggable>
|
||||
<el-dialog :title="$t('file.uploadFile')" v-model="visible" :close-on-click-modal="false" draggable>
|
||||
<upload @change="success" :model-value="fileList" />
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
|
||||
@ -4,6 +4,7 @@ export default {
|
||||
importsysFileTip: 'import SysFile',
|
||||
id: 'id',
|
||||
fileName: 'fileName',
|
||||
uploadFile: 'upload file',
|
||||
bucketName: 'bucketName',
|
||||
original: 'original',
|
||||
type: 'type',
|
||||
|
||||
@ -3,6 +3,7 @@ export default {
|
||||
index: '#',
|
||||
importsysFileTip: '导入文件管理表',
|
||||
id: '编号',
|
||||
uploadFile: '上传文件',
|
||||
fileName: '文件名称',
|
||||
bucketName: '桶名称',
|
||||
original: '原文件名',
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
<el-form-item prop="avatar">
|
||||
<ImageUpload v-model:imageUrl="formData.avatar" borderRadius="50%">
|
||||
<template #empty>
|
||||
<el-icon><Avatar /></el-icon>
|
||||
<el-icon>
|
||||
<Avatar/>
|
||||
</el-icon>
|
||||
<span>请上传头像</span>
|
||||
</template>
|
||||
</ImageUpload>
|
||||
@ -49,11 +51,13 @@
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="安全信息">
|
||||
<el-form :model="passwordFormData" :rules="passwordRuleForm" label-width="100px" class="mt30" ref="passwordFormdataRef">
|
||||
<el-form :model="passwordFormData" :rules="passwordRuleForm" label-width="100px" class="mt30"
|
||||
ref="passwordFormdataRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="原密码" prop="password">
|
||||
<el-input v-model="passwordFormData.password" placeholder="请输入密码" clearable type="password"></el-input>
|
||||
<el-input v-model="passwordFormData.password" placeholder="请输入密码" clearable
|
||||
type="password"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
@ -70,7 +74,8 @@
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="确认密码" prop="newpassword2">
|
||||
<strength-meter v-model="passwordFormData.newpassword2" :minlength="6" :maxlength="16" placeholder="请重复密码"></strength-meter>
|
||||
<strength-meter v-model="passwordFormData.newpassword2" :minlength="6" :maxlength="16"
|
||||
placeholder="请重复密码"></strength-meter>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
@ -81,24 +86,6 @@
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="第三方账号">
|
||||
<el-table :data="socialList" class="mt10">
|
||||
<el-table-column type="index" label="序号" width="80"></el-table-column>
|
||||
<el-table-column prop="name" label="平台"></el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.openId"> 已绑定 </el-tag>
|
||||
<el-tag v-else> 未绑定 </el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="action" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button @click="Unbinding(scope.row.type)" text type="primary" v-if="scope.row.openId"> 解绑 </el-button>
|
||||
<el-button @click="handleClick(scope.row.type)" text type="primary" v-else> 绑定 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-drawer>
|
||||
</template>
|
||||
@ -187,7 +174,7 @@ const passwordRuleForm = reactive({
|
||||
|
||||
const score = ref(0);
|
||||
|
||||
const passwordScore = (e) => {
|
||||
const passwordScore = (e: any) => {
|
||||
score.value = e;
|
||||
};
|
||||
|
||||
@ -234,25 +221,6 @@ const handleSaveUser = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleClick = (thirdpart: string) => {
|
||||
let appid, client_id, redirect_uri, url;
|
||||
redirect_uri = encodeURIComponent(window.location.origin + '/#/authredirect');
|
||||
if (thirdpart === 'wechat') {
|
||||
appid = 'wxd1678d3f83b1d83a';
|
||||
url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect`;
|
||||
} else if (thirdpart === 'tencent') {
|
||||
client_id = '101322838';
|
||||
url = `https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
|
||||
} else if (thirdpart === 'gitee') {
|
||||
client_id = '0c29cfd9cb1e0037fc837521bc08c1a7483d8fd9b3e123d46beec59a5544a881';
|
||||
url = `https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
|
||||
} else if (thirdpart === 'osc') {
|
||||
client_id = 'neIIqlwGsjsfsA6uxNqD';
|
||||
url = `https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=${client_id}&state=OSC-BIND&redirect_uri=${redirect_uri}`;
|
||||
}
|
||||
other.openWindow(url, thirdpart, 540, 540);
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
visible.value = true;
|
||||
const data = useUserInfo().userInfos;
|
||||
@ -266,7 +234,6 @@ const initUserInfo = (userId: any) => {
|
||||
getObj(userId)
|
||||
.then((res) => {
|
||||
formData.value = res.data;
|
||||
initSocialList();
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
@ -275,45 +242,6 @@ const initUserInfo = (userId: any) => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
const socialList = ref([] as any);
|
||||
|
||||
const initSocialList = () => {
|
||||
socialList.value = [
|
||||
{
|
||||
name: '微信公众号',
|
||||
type: 'wechat',
|
||||
openId: formData.value.wxOpenid,
|
||||
},
|
||||
{
|
||||
name: 'QQ',
|
||||
type: 'tencent',
|
||||
openId: formData.value.qqOpenid,
|
||||
},
|
||||
{
|
||||
name: 'gitee',
|
||||
type: 'gitee',
|
||||
openId: formData.value.giteeOpenId,
|
||||
},
|
||||
{
|
||||
name: '开源中国',
|
||||
type: 'osc',
|
||||
openId: formData.value.oscOpenId,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const Unbinding = (type) => {
|
||||
UnbindingUser(type)
|
||||
.then(() => {
|
||||
useMessage().success('解绑成功');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
initUserInfo(formData.value.userId);
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user