mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 07:36:30 +08:00
Merge pull request #65 from Tencent/refactor/setupscript
Refactor/setupscript
This commit is contained in:
commit
9472ca622f
|
@ -11,6 +11,10 @@
|
||||||
"jest": true,
|
"jest": true,
|
||||||
"es6": true
|
"es6": true
|
||||||
},
|
},
|
||||||
|
"globals": {
|
||||||
|
"defineProps": "readonly",
|
||||||
|
"defineEmits": "readonly"
|
||||||
|
},
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"vue",
|
"vue",
|
||||||
"@typescript-eslint"
|
"@typescript-eslint"
|
||||||
|
|
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -20,3 +20,4 @@ yarn-error.log
|
||||||
.stylelintcache
|
.stylelintcache
|
||||||
yarn.lock
|
yarn.lock
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
pnpm-lock.yaml
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
# 选择一个 Base 镜像
|
|
||||||
FROM node:16
|
|
||||||
|
|
||||||
# 设置工作目录
|
|
||||||
WORKDIR /space
|
|
||||||
|
|
||||||
# 将 by 中的文件列表 COPY 过来
|
|
||||||
COPY . .
|
|
||||||
|
|
||||||
# 根据 COPY 过来的文件进行依赖的安装
|
|
||||||
RUN npm i
|
|
||||||
|
|
||||||
# 设置好需要的环境变量
|
|
||||||
ENV NODE_PATH=/space/node_modules
|
|
||||||
|
|
|
@ -1,20 +0,0 @@
|
||||||
server {
|
|
||||||
if ($request_method = HEAD) {
|
|
||||||
return 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
location / {
|
|
||||||
alias /usr/share/nginx/html/;
|
|
||||||
index index.html index.htm;
|
|
||||||
try_files $uri $uri/ /index.html;
|
|
||||||
}
|
|
||||||
|
|
||||||
access_log /var/log/nginx/access.log main;
|
|
||||||
error_log /var/log/nginx/error.log error;
|
|
||||||
|
|
||||||
|
|
||||||
error_page 500 502 503 504 /50x.html;
|
|
||||||
location = /50x.html {
|
|
||||||
root /usr/share/nginx/html;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -23,9 +23,9 @@
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"qrcode.vue": "^3.2.2",
|
"qrcode.vue": "^3.2.2",
|
||||||
"tdesign-icons-vue-next": "^0.0.6",
|
"tdesign-icons-vue-next": "^0.0.6",
|
||||||
"tdesign-vue-next": "0.7.0-alpha.0",
|
"tdesign-vue-next": "0.8.1",
|
||||||
"tvision-color": "^1.3.1",
|
"tvision-color": "^1.3.1",
|
||||||
"vue": "^3.1.5",
|
"vue": "^3.2.31",
|
||||||
"vue-color-kit": "^1.0.5",
|
"vue-color-kit": "^1.0.5",
|
||||||
"vue-router": "^4.0.11",
|
"vue-router": "^4.0.11",
|
||||||
"vue3-clipboard": "^1.0.0",
|
"vue3-clipboard": "^1.0.0",
|
||||||
|
|
5570
pnpm-lock.yaml
5570
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
19
src/App.vue
19
src/App.vue
|
@ -1,26 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<router-view :class="[mode]" />
|
<router-view :class="[mode]" />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, computed, onMounted } from 'vue';
|
import { computed, onMounted } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import config from '@/config/style';
|
import config from '@/config/style';
|
||||||
|
|
||||||
export default defineComponent({
|
const store = useStore();
|
||||||
setup() {
|
|
||||||
const store = useStore();
|
|
||||||
|
|
||||||
const mode = computed(() => {
|
const mode = computed(() => {
|
||||||
return store.getters['setting/mode'];
|
return store.getters['setting/mode'];
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
store.dispatch('setting/changeTheme', { ...config });
|
store.dispatch('setting/changeTheme', { ...config });
|
||||||
});
|
|
||||||
return {
|
|
||||||
mode,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
|
|
@ -9,21 +9,15 @@
|
||||||
<user-avatar-icon v-if="product.type === 4" />
|
<user-avatar-icon v-if="product.type === 4" />
|
||||||
<laptop-icon v-if="product.type === 5" />
|
<laptop-icon v-if="product.type === 5" />
|
||||||
</div>
|
</div>
|
||||||
<t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">{{
|
<t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">
|
||||||
product.isSetup ? '已启用' : '已停用'
|
{{ product.isSetup ? '已启用' : '已停用' }}
|
||||||
}}</t-tag>
|
</t-tag>
|
||||||
</t-row>
|
</t-row>
|
||||||
<p class="list-card-item_detail--name">
|
<p class="list-card-item_detail--name">{{ product.name }}</p>
|
||||||
{{ product.name }}
|
<p class="list-card-item_detail--desc">{{ product.description }}</p>
|
||||||
</p>
|
|
||||||
<p class="list-card-item_detail--desc">
|
|
||||||
{{ product.description }}
|
|
||||||
</p>
|
|
||||||
<t-row justify="space-between" align="middle" :class="cardControlClass">
|
<t-row justify="space-between" align="middle" :class="cardControlClass">
|
||||||
<div>
|
<div>
|
||||||
<t-button shape="circle" :disabled="!product.isSetup">
|
<t-button shape="circle" :disabled="!product.isSetup">{{ typeMap[product.type - 1] }}</t-button>
|
||||||
{{ typeMap[product.type - 1] }}
|
|
||||||
</t-button>
|
|
||||||
<t-button shape="circle" :disabled="!product.isSetup">
|
<t-button shape="circle" :disabled="!product.isSetup">
|
||||||
<add-icon />
|
<add-icon />
|
||||||
</t-button>
|
</t-button>
|
||||||
|
@ -52,8 +46,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, defineComponent, PropType } from 'vue';
|
import { computed, PropType } from 'vue';
|
||||||
import {
|
import {
|
||||||
ShopIcon,
|
ShopIcon,
|
||||||
CalendarIcon,
|
CalendarIcon,
|
||||||
|
@ -71,63 +65,35 @@ export interface CardProductType {
|
||||||
name: string;
|
name: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'ListCardComponent',
|
|
||||||
components: {
|
|
||||||
ShopIcon,
|
|
||||||
CalendarIcon,
|
|
||||||
ServiceIcon,
|
|
||||||
UserAvatarIcon,
|
|
||||||
LaptopIcon,
|
|
||||||
MoreIcon,
|
|
||||||
AddIcon,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
product: {
|
product: {
|
||||||
type: Object as PropType<CardProductType>,
|
type: Object as PropType<CardProductType>,
|
||||||
default: () => {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
emits: ['manage-product', 'delete-item'],
|
|
||||||
setup(props, ctx) {
|
|
||||||
const { emit } = ctx;
|
|
||||||
const cardClass = computed(() => [
|
|
||||||
'list-card-item',
|
|
||||||
{
|
|
||||||
'list-card-item__disabled': !props.product.isSetup,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const cardLogoClass = computed(() => [
|
|
||||||
'list-card-item_detail--logo',
|
|
||||||
{
|
|
||||||
'list-card-item_detail--logo__disabled': !props.product.isSetup,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const cardControlClass = computed(() => [
|
|
||||||
'list-card-item_detail--control',
|
|
||||||
{
|
|
||||||
'list-card-item_detail--control__disabled': !props.product.isSetup,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
return {
|
|
||||||
cardClass,
|
|
||||||
cardLogoClass,
|
|
||||||
cardControlClass,
|
|
||||||
typeMap: ['A', 'B', 'C', 'D', 'E'],
|
|
||||||
handleClickManage(product) {
|
|
||||||
emit('manage-product', product);
|
|
||||||
},
|
|
||||||
handleClickDelete(product) {
|
|
||||||
emit('delete-item', product);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['manage-product', 'delete-item']);
|
||||||
|
|
||||||
|
const cardClass = computed(() => ['list-card-item', { 'list-card-item__disabled': !props.product.isSetup }]);
|
||||||
|
|
||||||
|
const cardLogoClass = computed(() => [
|
||||||
|
'list-card-item_detail--logo',
|
||||||
|
{ 'list-card-item_detail--logo__disabled': !props.product.isSetup },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const cardControlClass = computed(() => [
|
||||||
|
'list-card-item_detail--control',
|
||||||
|
{ 'list-card-item_detail--control__disabled': !props.product.isSetup },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const typeMap = ['A', 'B', 'C', 'D', 'E'];
|
||||||
|
|
||||||
|
const handleClickManage = (product: CardProductType) => {
|
||||||
|
emit('manage-product', product);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClickDelete = (product: CardProductType) => {
|
||||||
|
emit('delete-item', product);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -16,44 +16,33 @@
|
||||||
<div v-if="size !== 'small'" class="card-spacer-bottom" />
|
<div v-if="size !== 'small'" class="card-spacer-bottom" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, PropType, computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'Card',
|
title: String,
|
||||||
props: {
|
subtitle: String,
|
||||||
title: {
|
describe: String,
|
||||||
type: String as PropType<string>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
type: String as PropType<string>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
compact: {
|
compact: {
|
||||||
type: Boolean as PropType<boolean>,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
describe: {
|
|
||||||
type: String as PropType<string>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
size: {
|
size: {
|
||||||
type: String as PropType<string>,
|
type: String,
|
||||||
default: 'default',
|
default: 'default',
|
||||||
},
|
},
|
||||||
border: {
|
border: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
setup(props) {
|
|
||||||
const containerCls = computed(() => {
|
const containerCls = computed(() => {
|
||||||
const { compact, border } = props;
|
const { compact, border } = props;
|
||||||
return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
|
return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
|
||||||
});
|
});
|
||||||
|
|
||||||
const titleCls = computed(() => {
|
const titleCls = computed(() => {
|
||||||
const { size } = props;
|
const { size } = props;
|
||||||
return [
|
return [
|
||||||
'card-title',
|
'card-title',
|
||||||
|
@ -62,9 +51,9 @@ export default defineComponent({
|
||||||
'card-title--default': size !== 'small',
|
'card-title--default': size !== 'small',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
const titleTextCls = computed(() => {
|
const titleTextCls = computed(() => {
|
||||||
const { size } = props;
|
const { size } = props;
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
@ -72,14 +61,6 @@ export default defineComponent({
|
||||||
'card-title__text--default': size !== 'small',
|
'card-title__text--default': size !== 'small',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
containerCls,
|
|
||||||
titleCls,
|
|
||||||
titleTextCls,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
|
|
@ -1,37 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<div :style="style" class="color-container" />
|
<div :style="style" class="color-container" />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, defineComponent, PropType } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import { getBrandColor } from '@/config/color';
|
import { getBrandColor } from '@/config/color';
|
||||||
|
|
||||||
const panelColor =
|
const panelColor =
|
||||||
'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)';
|
'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'Color',
|
|
||||||
props: {
|
|
||||||
value: {
|
value: {
|
||||||
type: String as PropType<string>,
|
type: String,
|
||||||
default: 'default',
|
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
setup(props) {
|
|
||||||
const store = useStore();
|
|
||||||
|
|
||||||
const style = computed(() => {
|
const store = useStore();
|
||||||
|
|
||||||
|
const style = computed(() => {
|
||||||
const { value } = props;
|
const { value } = props;
|
||||||
const { colorList } = store.state.setting;
|
const { colorList } = store.state.setting;
|
||||||
return {
|
return {
|
||||||
background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
|
background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
|
||||||
};
|
};
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
style,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -8,36 +8,22 @@
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, PropType, computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import Result403Icon from '@/assets/assets-result-403.svg?component';
|
import Result403Icon from '@/assets/assets-result-403.svg?component';
|
||||||
import Result404Icon from '@/assets/assets-result-404.svg?component';
|
import Result404Icon from '@/assets/assets-result-404.svg?component';
|
||||||
import Result500Icon from '@/assets/assets-result-500.svg?component';
|
import Result500Icon from '@/assets/assets-result-500.svg?component';
|
||||||
import ResultIeIcon from '@/assets/assets-result-ie.svg?component';
|
import ResultIeIcon from '@/assets/assets-result-ie.svg?component';
|
||||||
import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
|
import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'Result',
|
bgUrl: String,
|
||||||
props: {
|
title: String,
|
||||||
bgUrl: {
|
tip: String,
|
||||||
type: String as PropType<string>,
|
type: String,
|
||||||
default: '',
|
});
|
||||||
},
|
|
||||||
title: {
|
const dynamicComponent = computed(() => {
|
||||||
type: String as PropType<string>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
tip: {
|
|
||||||
type: String as PropType<string>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String as PropType<string>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const dynamicComponent = computed(() => {
|
|
||||||
switch (props.type) {
|
switch (props.type) {
|
||||||
case '403':
|
case '403':
|
||||||
return Result403Icon;
|
return Result403Icon;
|
||||||
|
@ -52,11 +38,6 @@ export default defineComponent({
|
||||||
default:
|
default:
|
||||||
return Result403Icon;
|
return Result403Icon;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
return {
|
|
||||||
dynamicComponent,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -1,23 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<img :class="className" :src="url" />
|
<img :class="className" :src="url" />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, computed, PropType } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'Thumbnail',
|
url: String,
|
||||||
props: {
|
|
||||||
url: {
|
|
||||||
type: String as PropType<string>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
type: {
|
type: {
|
||||||
type: String as PropType<string>,
|
type: String,
|
||||||
default: 'layout',
|
default: 'layout',
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
setup(props) {
|
|
||||||
const className = computed(() => {
|
const className = computed(() => {
|
||||||
const { type } = props;
|
const { type } = props;
|
||||||
return [
|
return [
|
||||||
'thumbnail-container',
|
'thumbnail-container',
|
||||||
|
@ -26,9 +21,6 @@ export default defineComponent({
|
||||||
'thumbnail-layout': type === 'layout',
|
'thumbnail-layout': type === 'layout',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
|
||||||
return { className };
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -20,27 +20,19 @@
|
||||||
<span>{{ describe }}</span>
|
<span>{{ describe }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, computed, PropType } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'Trend',
|
type: String,
|
||||||
props: {
|
describe: [String, Number],
|
||||||
type: {
|
|
||||||
type: String as PropType<string>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
describe: {
|
|
||||||
type: [String, Number] as PropType<string | number>,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
isReverseColor: {
|
isReverseColor: {
|
||||||
type: Boolean as PropType<boolean>,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
setup(props) {
|
|
||||||
const containerCls = computed(() => {
|
const containerCls = computed(() => {
|
||||||
const { isReverseColor, type } = props;
|
const { isReverseColor, type } = props;
|
||||||
return [
|
return [
|
||||||
'trend-container',
|
'trend-container',
|
||||||
|
@ -50,16 +42,9 @@ export default defineComponent({
|
||||||
'trend-container__down': !isReverseColor && type === 'down',
|
'trend-container__down': !isReverseColor && type === 'down',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
|
||||||
|
|
||||||
const iconCls = computed(() => ['trend-icon-container']);
|
|
||||||
|
|
||||||
return {
|
|
||||||
containerCls,
|
|
||||||
iconCls,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const iconCls = computed(() => ['trend-icon-container']);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -6,17 +6,11 @@
|
||||||
</t-breadcrumb>
|
</t-breadcrumb>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
export default defineComponent({
|
const crumbs = computed(() => {
|
||||||
name: 'TdesignStarterBreadcrumb',
|
|
||||||
props: {
|
|
||||||
isVisible: Boolean,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const crumbs = computed(() => {
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
const pathArray = route.path.split('/');
|
const pathArray = route.path.split('/');
|
||||||
|
@ -31,12 +25,6 @@ export default defineComponent({
|
||||||
return breadcrumbArray;
|
return breadcrumbArray;
|
||||||
}, []);
|
}, []);
|
||||||
return breadcrumbs;
|
return breadcrumbs;
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crumbs,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -2,18 +2,8 @@
|
||||||
<div :class="prefix + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
|
<div :class="prefix + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import { prefix } from '@/config/global';
|
import { prefix } from '@/config/global';
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: `${prefix}-footer`,
|
|
||||||
setup() {
|
|
||||||
return {
|
|
||||||
prefix,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -63,8 +63,8 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, PropType, computed, ref } from 'vue';
|
import { PropType, computed } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
@ -76,24 +76,17 @@ import Notice from './Notice.vue';
|
||||||
import Search from './Search.vue';
|
import Search from './Search.vue';
|
||||||
import MenuContent from './MenuContent';
|
import MenuContent from './MenuContent';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
components: {
|
|
||||||
tLogoFull,
|
|
||||||
Notice,
|
|
||||||
Search,
|
|
||||||
MenuContent,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
theme: {
|
theme: {
|
||||||
type: String as PropType<string>,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
layout: {
|
layout: {
|
||||||
type: String as PropType<string>,
|
type: String,
|
||||||
default: 'top',
|
default: 'top',
|
||||||
},
|
},
|
||||||
showLogo: {
|
showLogo: {
|
||||||
type: Boolean as PropType<boolean>,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
menu: {
|
menu: {
|
||||||
|
@ -101,27 +94,27 @@ export default defineComponent({
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
isFixed: {
|
isFixed: {
|
||||||
type: Boolean as PropType<boolean>,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
isCompact: {
|
isCompact: {
|
||||||
type: Boolean as PropType<boolean>,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
maxLevel: {
|
maxLevel: {
|
||||||
type: Number as PropType<number>,
|
type: Number,
|
||||||
default: 3,
|
default: 3,
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
setup(props) {
|
|
||||||
const store = useStore();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const toggleSettingPanel = () => {
|
const store = useStore();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const toggleSettingPanel = () => {
|
||||||
store.commit('setting/toggleSettingPanel', true);
|
store.commit('setting/toggleSettingPanel', true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const active = computed(() => {
|
const active = computed(() => {
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
if (!route.path) {
|
if (!route.path) {
|
||||||
return '';
|
return '';
|
||||||
|
@ -131,13 +124,11 @@ export default defineComponent({
|
||||||
.filter((item, index) => index <= props.maxLevel && index > 0)
|
.filter((item, index) => index <= props.maxLevel && index > 0)
|
||||||
.map((item) => `/${item}`)
|
.map((item) => `/${item}`)
|
||||||
.join('');
|
.join('');
|
||||||
});
|
});
|
||||||
|
|
||||||
const showMenu = computed(() => !(props.layout === 'mix' && props.showLogo));
|
const layoutCls = computed(() => [`${prefix}-header-layout`]);
|
||||||
|
|
||||||
const layoutCls = computed(() => [`${prefix}-header-layout`]);
|
const menuCls = computed(() => {
|
||||||
|
|
||||||
const menuCls = computed(() => {
|
|
||||||
const { isFixed, layout, isCompact } = props;
|
const { isFixed, layout, isCompact } = props;
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
@ -147,51 +138,27 @@ export default defineComponent({
|
||||||
[`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
|
[`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
|
||||||
|
|
||||||
const userVisible = ref(false);
|
|
||||||
const userVisibleChange = (value: boolean) => {
|
|
||||||
userVisible.value = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeCollapsed = () => {
|
|
||||||
store.commit('setting/toggleSidebarCompact');
|
|
||||||
};
|
|
||||||
const isSidebarCompact = computed(() => store.state.setting.isSidebarCompact);
|
|
||||||
|
|
||||||
const handleNav = (url) => {
|
|
||||||
router.push(url);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLogout = () => {
|
|
||||||
router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const navToGitHub = () => {
|
|
||||||
window.open('https://github.com/tencent/tdesign-vue-next-starter');
|
|
||||||
};
|
|
||||||
|
|
||||||
const navToHelper = () => {
|
|
||||||
window.open('http://tdesign.tencent.com/starter/docs/get-started');
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
isSidebarCompact,
|
|
||||||
toggleSettingPanel,
|
|
||||||
active,
|
|
||||||
showMenu,
|
|
||||||
layoutCls,
|
|
||||||
userVisible,
|
|
||||||
userVisibleChange,
|
|
||||||
menuCls,
|
|
||||||
changeCollapsed,
|
|
||||||
handleNav,
|
|
||||||
handleLogout,
|
|
||||||
navToGitHub,
|
|
||||||
navToHelper,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const changeCollapsed = () => {
|
||||||
|
store.commit('setting/toggleSidebarCompact');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNav = (url) => {
|
||||||
|
router.push(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const navToGitHub = () => {
|
||||||
|
window.open('https://github.com/tencent/tdesign-vue-next-starter');
|
||||||
|
};
|
||||||
|
|
||||||
|
const navToHelper = () => {
|
||||||
|
window.open('http://tdesign.tencent.com/starter/docs/get-started');
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import '@/style/variables.less';
|
@import '@/style/variables.less';
|
||||||
|
|
|
@ -45,21 +45,19 @@
|
||||||
</t-popup>
|
</t-popup>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import { NotificationItem } from '@/interface';
|
import { NotificationItem } from '@/interface';
|
||||||
|
|
||||||
export default defineComponent({
|
const router = useRouter();
|
||||||
setup() {
|
const store = useStore();
|
||||||
const router = useRouter();
|
const { msgData } = store.state.notification;
|
||||||
const store = useStore();
|
|
||||||
const { msgData } = store.state.notification;
|
|
||||||
|
|
||||||
const unreadMsg = computed(() => store.getters['notification/unreadMsg']);
|
const unreadMsg = computed(() => store.getters['notification/unreadMsg']);
|
||||||
|
|
||||||
const setRead = (type: string, item?: NotificationItem) => {
|
const setRead = (type: string, item?: NotificationItem) => {
|
||||||
const changeMsg = msgData;
|
const changeMsg = msgData;
|
||||||
if (type === 'all') {
|
if (type === 'all') {
|
||||||
changeMsg.forEach((e: NotificationItem) => {
|
changeMsg.forEach((e: NotificationItem) => {
|
||||||
|
@ -73,19 +71,11 @@ export default defineComponent({
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
store.commit('notification/setMsgData', changeMsg);
|
store.commit('notification/setMsgData', changeMsg);
|
||||||
};
|
};
|
||||||
|
|
||||||
const goDetail = () => {
|
const goDetail = () => {
|
||||||
router.push('/detail/secondary');
|
router.push('/detail/secondary');
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
|
||||||
goDetail,
|
|
||||||
unreadMsg,
|
|
||||||
setRead,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -36,31 +36,21 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, PropType } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const layout = defineProps({
|
||||||
props: {
|
type: String,
|
||||||
layout: {
|
});
|
||||||
type: String as PropType<string>,
|
|
||||||
},
|
const isSearchFocus = ref(false);
|
||||||
},
|
const searchData = ref('');
|
||||||
setup() {
|
const changeSearchFocus = (value: boolean) => {
|
||||||
const isSearchFocus = ref(false);
|
|
||||||
const searchData = ref('');
|
|
||||||
const changeSearchFocus = (value: boolean) => {
|
|
||||||
if (!value) {
|
if (!value) {
|
||||||
searchData.value = '';
|
searchData.value = '';
|
||||||
}
|
}
|
||||||
isSearchFocus.value = value;
|
isSearchFocus.value = value;
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
isSearchFocus,
|
|
||||||
searchData,
|
|
||||||
changeSearchFocus,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import '@/style/variables.less';
|
@import '@/style/variables.less';
|
||||||
|
|
|
@ -90,8 +90,8 @@
|
||||||
</div>
|
</div>
|
||||||
</t-drawer>
|
</t-drawer>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, computed, watch, onMounted } from 'vue';
|
import { ref, computed, watch, onMounted, watchEffect } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import { ColorPicker } from 'vue-color-kit';
|
import { ColorPicker } from 'vue-color-kit';
|
||||||
import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
|
import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
|
||||||
|
@ -118,29 +118,25 @@ const MODE_OPTIONS = [
|
||||||
{ type: 'auto', text: '跟随系统' },
|
{ type: 'auto', text: '跟随系统' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default defineComponent({
|
const formData = ref({ ...STYLE_CONFIG });
|
||||||
name: 'DefaultLayoutSetting',
|
const store = useStore();
|
||||||
components: { Thumbnail, ColorContainer, ColorPicker },
|
const colors = ref();
|
||||||
setup() {
|
const isColoPickerDisplay = ref(false);
|
||||||
const formData = ref({ ...STYLE_CONFIG });
|
|
||||||
const store = useStore();
|
|
||||||
const colors = ref();
|
|
||||||
const isColoPickerDisplay = ref(false);
|
|
||||||
|
|
||||||
const showSettingPanel = computed({
|
const showSettingPanel = computed({
|
||||||
get() {
|
get() {
|
||||||
return store.state.setting.showSettingPanel;
|
return store.state.setting.showSettingPanel;
|
||||||
},
|
},
|
||||||
set(newVal) {
|
set(newVal) {
|
||||||
store.commit('setting/toggleSettingPanel', newVal);
|
store.commit('setting/toggleSettingPanel', newVal);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const mode = computed(() => {
|
const mode = computed(() => {
|
||||||
return store.getters['setting/mode'];
|
return store.getters['setting/mode'];
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => colors.value,
|
() => colors.value,
|
||||||
(newColor) => {
|
(newColor) => {
|
||||||
const { hex } = newColor;
|
const { hex } = newColor;
|
||||||
|
@ -160,11 +156,11 @@ export default defineComponent({
|
||||||
|
|
||||||
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
|
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
const changeColor = (val) => {
|
|
||||||
|
const changeColor = (val) => {
|
||||||
const { hex } = val;
|
const { hex } = val;
|
||||||
const { setting } = store.state;
|
const { setting } = store.state;
|
||||||
|
|
||||||
// hex 主题色
|
// hex 主题色
|
||||||
const newPalette = Color.getPaletteByGradation({
|
const newPalette = Color.getPaletteByGradation({
|
||||||
colors: [hex],
|
colors: [hex],
|
||||||
|
@ -178,21 +174,21 @@ export default defineComponent({
|
||||||
insertThemeStylesheet(hex, colorMap, mode);
|
insertThemeStylesheet(hex, colorMap, mode);
|
||||||
|
|
||||||
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
|
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
|
document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
|
||||||
isColoPickerDisplay.value = true;
|
isColoPickerDisplay.value = true;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
|
const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
|
||||||
if (!visible && context.trigger === 'document') {
|
if (!visible && context.trigger === 'document') {
|
||||||
isColoPickerDisplay.value = visible;
|
isColoPickerDisplay.value = visible;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCopy = () => {
|
const handleCopy = () => {
|
||||||
const text = JSON.stringify(formData.value, null, 4);
|
const text = JSON.stringify(formData.value, null, 4);
|
||||||
const { toClipboard } = useClipboard();
|
const { toClipboard } = useClipboard();
|
||||||
toClipboard(text)
|
toClipboard(text)
|
||||||
|
@ -204,8 +200,8 @@ export default defineComponent({
|
||||||
MessagePlugin.closeAll();
|
MessagePlugin.closeAll();
|
||||||
MessagePlugin.error('复制失败');
|
MessagePlugin.error('复制失败');
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const getModeIcon = (mode: string) => {
|
const getModeIcon = (mode: string) => {
|
||||||
if (mode === 'light') {
|
if (mode === 'light') {
|
||||||
return SettingLightIcon;
|
return SettingLightIcon;
|
||||||
}
|
}
|
||||||
|
@ -213,37 +209,18 @@ export default defineComponent({
|
||||||
return SettingDarkIcon;
|
return SettingDarkIcon;
|
||||||
}
|
}
|
||||||
return SettingAutoIcon;
|
return SettingAutoIcon;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseDrawer = () => {
|
const handleCloseDrawer = () => {
|
||||||
store.commit('setting/toggleSettingPanel', false);
|
store.commit('setting/toggleSettingPanel', false);
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
mode,
|
const getThumbnailUrl = (name: string): string => {
|
||||||
changeColor,
|
|
||||||
isColoPickerDisplay,
|
|
||||||
onPopupVisibleChange,
|
|
||||||
MODE_OPTIONS,
|
|
||||||
LAYOUT_OPTION,
|
|
||||||
COLOR_OPTIONS,
|
|
||||||
formData,
|
|
||||||
showSettingPanel,
|
|
||||||
handleCopy,
|
|
||||||
getModeIcon,
|
|
||||||
handleCloseDrawer,
|
|
||||||
getThumbnailUrl(name: string): string {
|
|
||||||
return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
|
return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
watchEffect(() => {
|
||||||
watch: {
|
store.dispatch('setting/changeTheme', formData.value);
|
||||||
formData: {
|
|
||||||
handler(newVal) {
|
|
||||||
this.$store.dispatch('setting/changeTheme', newVal);
|
|
||||||
},
|
|
||||||
deep: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<t-row :gutter="[16, 16]">
|
<t-row :gutter="[16, 16]">
|
||||||
<t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3">
|
<t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3">
|
||||||
<card :subtitle="item.title" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }" size="small">
|
<card :subtitle="item.title" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }">
|
||||||
<div class="dashboard-item">
|
<div class="dashboard-item">
|
||||||
<div class="dashboard-item-top">
|
<div class="dashboard-item-top">
|
||||||
<span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
|
<span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
|
||||||
|
@ -202,8 +202,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
|
import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
|
|
||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
|
@ -241,83 +241,76 @@ const getThisMonth = (checkedValues?: string[]) => {
|
||||||
return `${date.getFullYear()}-${startMonth} 至 ${date2.getFullYear()}-${endMonth}`;
|
return `${date.getFullYear()}-${startMonth} 至 ${date2.getFullYear()}-${endMonth}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defineComponent({
|
const store = useStore();
|
||||||
name: 'DashboardBase',
|
const resizeTime = ref(1);
|
||||||
components: {
|
|
||||||
Card,
|
|
||||||
Trend,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const store = useStore();
|
|
||||||
const resizeTime = ref(1);
|
|
||||||
|
|
||||||
const chartColors = computed(() => store.state.setting.chartColors);
|
const chartColors = computed(() => store.state.setting.chartColors);
|
||||||
|
|
||||||
// moneyCharts
|
// moneyCharts
|
||||||
let moneyContainer: HTMLElement;
|
let moneyContainer: HTMLElement;
|
||||||
let moneyChart: echarts.ECharts;
|
let moneyChart: echarts.ECharts;
|
||||||
const renderMoneyChart = () => {
|
const renderMoneyChart = () => {
|
||||||
if (!moneyContainer) {
|
if (!moneyContainer) {
|
||||||
moneyContainer = document.getElementById('moneyContainer');
|
moneyContainer = document.getElementById('moneyContainer');
|
||||||
}
|
}
|
||||||
moneyChart = echarts.init(moneyContainer);
|
moneyChart = echarts.init(moneyContainer);
|
||||||
moneyChart.setOption(constructInitDashboardDataset('line'));
|
moneyChart.setOption(constructInitDashboardDataset('line'));
|
||||||
};
|
};
|
||||||
|
|
||||||
// refundCharts
|
// refundCharts
|
||||||
let refundContainer: HTMLElement;
|
let refundContainer: HTMLElement;
|
||||||
let refundChart: echarts.ECharts;
|
let refundChart: echarts.ECharts;
|
||||||
const renderRefundChart = () => {
|
const renderRefundChart = () => {
|
||||||
if (!refundContainer) {
|
if (!refundContainer) {
|
||||||
refundContainer = document.getElementById('refundContainer');
|
refundContainer = document.getElementById('refundContainer');
|
||||||
}
|
}
|
||||||
refundChart = echarts.init(refundContainer);
|
refundChart = echarts.init(refundContainer);
|
||||||
refundChart.setOption(constructInitDashboardDataset('bar'));
|
refundChart.setOption(constructInitDashboardDataset('bar'));
|
||||||
};
|
};
|
||||||
|
|
||||||
// stokeCharts
|
// stokeCharts
|
||||||
let stokeContainer: HTMLElement;
|
let stokeContainer: HTMLElement;
|
||||||
let stokeChart: echarts.ECharts;
|
let stokeChart: echarts.ECharts;
|
||||||
const renderStokeChart = () => {
|
const renderStokeChart = () => {
|
||||||
if (!stokeContainer) {
|
if (!stokeContainer) {
|
||||||
stokeContainer = document.getElementById('stokeContainer');
|
stokeContainer = document.getElementById('stokeContainer');
|
||||||
}
|
}
|
||||||
stokeChart = echarts.init(stokeContainer);
|
stokeChart = echarts.init(stokeContainer);
|
||||||
stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
|
stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
// monitorChart
|
// monitorChart
|
||||||
let monitorContainer: HTMLElement;
|
let monitorContainer: HTMLElement;
|
||||||
let monitorChart: echarts.ECharts;
|
let monitorChart: echarts.ECharts;
|
||||||
const renderMonitorChart = () => {
|
const renderMonitorChart = () => {
|
||||||
if (!monitorContainer) {
|
if (!monitorContainer) {
|
||||||
monitorContainer = document.getElementById('monitorContainer');
|
monitorContainer = document.getElementById('monitorContainer');
|
||||||
}
|
}
|
||||||
monitorChart = echarts.init(monitorContainer);
|
monitorChart = echarts.init(monitorContainer);
|
||||||
monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
|
monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
// monitorChart
|
// monitorChart
|
||||||
let countContainer: HTMLElement;
|
let countContainer: HTMLElement;
|
||||||
let countChart: echarts.ECharts;
|
let countChart: echarts.ECharts;
|
||||||
const renderCountChart = () => {
|
const renderCountChart = () => {
|
||||||
if (!countContainer) {
|
if (!countContainer) {
|
||||||
countContainer = document.getElementById('countContainer');
|
countContainer = document.getElementById('countContainer');
|
||||||
}
|
}
|
||||||
countChart = echarts.init(countContainer);
|
countChart = echarts.init(countContainer);
|
||||||
countChart.setOption(getPieChartDataSet(chartColors.value));
|
countChart.setOption(getPieChartDataSet(chartColors.value));
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderCharts = () => {
|
const renderCharts = () => {
|
||||||
renderMoneyChart();
|
renderMoneyChart();
|
||||||
renderRefundChart();
|
renderRefundChart();
|
||||||
renderStokeChart();
|
renderStokeChart();
|
||||||
renderMonitorChart();
|
renderMonitorChart();
|
||||||
renderCountChart();
|
renderCountChart();
|
||||||
};
|
};
|
||||||
|
|
||||||
// chartSize update
|
// chartSize update
|
||||||
const updateContainer = () => {
|
const updateContainer = () => {
|
||||||
if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
|
if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
|
||||||
resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
|
resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
|
||||||
} else if (document.documentElement.clientWidth < 1080) {
|
} else if (document.documentElement.clientWidth < 1080) {
|
||||||
|
@ -345,30 +338,30 @@ export default defineComponent({
|
||||||
width: resizeTime.value * 326,
|
width: resizeTime.value * 326,
|
||||||
height: resizeTime.value * 326,
|
height: resizeTime.value * 326,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
renderCharts();
|
renderCharts();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
updateContainer();
|
updateContainer();
|
||||||
});
|
});
|
||||||
window.addEventListener('resize', updateContainer, false);
|
window.addEventListener('resize', updateContainer, false);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('resize', updateContainer);
|
window.removeEventListener('resize', updateContainer);
|
||||||
});
|
});
|
||||||
|
|
||||||
const currentMonth = ref(getThisMonth());
|
const currentMonth = ref(getThisMonth());
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => store.state.setting.brandTheme,
|
() => store.state.setting.brandTheme,
|
||||||
() => {
|
() => {
|
||||||
changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
|
changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => store.state.setting.mode,
|
() => store.state.setting.mode,
|
||||||
() => {
|
() => {
|
||||||
[moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
|
[moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
|
||||||
|
@ -377,33 +370,21 @@ export default defineComponent({
|
||||||
|
|
||||||
renderCharts();
|
renderCharts();
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
const onCurrencyChange = (checkedValues: string[]) => {
|
||||||
resizeTime,
|
|
||||||
currentMonth,
|
|
||||||
LAST_7_DAYS,
|
|
||||||
PANE_LIST,
|
|
||||||
BUY_TEND_LIST,
|
|
||||||
SALE_TEND_LIST,
|
|
||||||
SALE_COLUMNS,
|
|
||||||
BUY_COLUMNS,
|
|
||||||
onCurrencyChange(checkedValues: string[]) {
|
|
||||||
currentMonth.value = getThisMonth(checkedValues);
|
currentMonth.value = getThisMonth(checkedValues);
|
||||||
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
|
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
|
||||||
},
|
};
|
||||||
onStokeDataChange(checkedValues: string[]) {
|
const onStokeDataChange = (checkedValues: string[]) => {
|
||||||
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
|
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
|
||||||
},
|
};
|
||||||
rehandleClickOp(val: MouseEvent) {
|
const rehandleClickOp = (val: MouseEvent) => {
|
||||||
console.log(val);
|
console.log(val);
|
||||||
},
|
};
|
||||||
getRankClass(index: number) {
|
const getRankClass = (index: number) => {
|
||||||
return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
|
return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import './index.less';
|
@import './index.less';
|
||||||
|
|
|
@ -57,8 +57,8 @@
|
||||||
</card>
|
</card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
|
|
||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
|
@ -76,36 +76,28 @@ import Card from '@/components/card/index.vue';
|
||||||
|
|
||||||
echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
|
echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
|
||||||
|
|
||||||
export default defineComponent({
|
const store = useStore();
|
||||||
name: 'DashboardDetail',
|
const chartColors = computed(() => store.state.setting.chartColors);
|
||||||
components: {
|
// lineChart logic
|
||||||
Card,
|
let lineContainer: HTMLElement;
|
||||||
Trend,
|
let lineChart: echarts.ECharts;
|
||||||
ProductCard,
|
const renderLineChart = () => {
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const store = useStore();
|
|
||||||
const chartColors = computed(() => store.state.setting.chartColors);
|
|
||||||
// lineChart logic
|
|
||||||
let lineContainer: HTMLElement;
|
|
||||||
let lineChart: echarts.ECharts;
|
|
||||||
const renderLineChart = () => {
|
|
||||||
lineContainer = document.getElementById('lineContainer');
|
lineContainer = document.getElementById('lineContainer');
|
||||||
lineChart = echarts.init(lineContainer);
|
lineChart = echarts.init(lineContainer);
|
||||||
lineChart.setOption(getFolderLineDataSet({ ...chartColors.value }));
|
lineChart.setOption(getFolderLineDataSet({ ...chartColors.value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
// scatterChart logic
|
// scatterChart logic
|
||||||
let scatterContainer: HTMLElement;
|
let scatterContainer: HTMLElement;
|
||||||
let scatterChart: echarts.ECharts;
|
let scatterChart: echarts.ECharts;
|
||||||
const renderScatterChart = () => {
|
const renderScatterChart = () => {
|
||||||
scatterContainer = document.getElementById('scatterContainer');
|
scatterContainer = document.getElementById('scatterContainer');
|
||||||
scatterChart = echarts.init(scatterContainer);
|
scatterChart = echarts.init(scatterContainer);
|
||||||
scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
|
scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
// chartSize update
|
// chartSize update
|
||||||
const updateContainer = () => {
|
const updateContainer = () => {
|
||||||
lineChart?.resize({
|
lineChart?.resize({
|
||||||
width: lineContainer.clientWidth,
|
width: lineContainer.clientWidth,
|
||||||
height: lineContainer.clientHeight,
|
height: lineContainer.clientHeight,
|
||||||
|
@ -114,53 +106,47 @@ export default defineComponent({
|
||||||
width: scatterContainer.clientWidth,
|
width: scatterContainer.clientWidth,
|
||||||
height: scatterContainer.clientHeight,
|
height: scatterContainer.clientHeight,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderCharts = () => {
|
const renderCharts = () => {
|
||||||
renderScatterChart();
|
renderScatterChart();
|
||||||
renderLineChart();
|
renderLineChart();
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
renderCharts();
|
renderCharts();
|
||||||
window.addEventListener('resize', updateContainer, false);
|
window.addEventListener('resize', updateContainer, false);
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
updateContainer();
|
updateContainer();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('resize', updateContainer);
|
window.removeEventListener('resize', updateContainer);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => store.state.setting.mode,
|
() => store.state.setting.mode,
|
||||||
() => {
|
() => {
|
||||||
renderCharts();
|
renderCharts();
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => store.state.setting.brandTheme,
|
() => store.state.setting.brandTheme,
|
||||||
() => {
|
() => {
|
||||||
changeChartsTheme([lineChart, scatterChart]);
|
changeChartsTheme([lineChart, scatterChart]);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
const onSatisfyChange = () => {
|
||||||
LAST_7_DAYS,
|
|
||||||
PRODUCT_LIST,
|
|
||||||
PANE_LIST_DATA,
|
|
||||||
onSatisfyChange() {
|
|
||||||
scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
|
scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
|
||||||
},
|
};
|
||||||
onMaterialChange(value: string[]) {
|
|
||||||
|
const onMaterialChange = (value: string[]) => {
|
||||||
const chartColors = computed(() => store.state.setting.chartColors);
|
const chartColors = computed(() => store.state.setting.chartColors);
|
||||||
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
|
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
|
|
|
@ -109,42 +109,35 @@
|
||||||
</t-dialog>
|
</t-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { prefix } from '@/config/global';
|
import { prefix } from '@/config/global';
|
||||||
import { BASE_INFO_DATA, TABLE_COLUMNS_DATA, PRODUCT_LIST } from './constants';
|
import { BASE_INFO_DATA, TABLE_COLUMNS_DATA as columns, PRODUCT_LIST } from './constants';
|
||||||
import request from '@/utils/request';
|
import request from '@/utils/request';
|
||||||
import { ResDataType } from '@/interface';
|
import { ResDataType } from '@/interface';
|
||||||
|
|
||||||
import Card from '@/components/card/index.vue';
|
import Card from '@/components/card/index.vue';
|
||||||
import Product from './components/Product.vue';
|
import Product from './components/Product.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const data = ref([]);
|
||||||
name: 'DetailAdvanced',
|
const pagination = ref({
|
||||||
components: {
|
|
||||||
Card,
|
|
||||||
Product,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const data = ref([]);
|
|
||||||
const pagination = ref({
|
|
||||||
defaultPageSize: 10,
|
defaultPageSize: 10,
|
||||||
total: 100,
|
total: 100,
|
||||||
defaultCurrent: 1,
|
defaultCurrent: 1,
|
||||||
});
|
});
|
||||||
|
|
||||||
const updateCurrent = ref(0);
|
const updateCurrent = ref(0);
|
||||||
|
|
||||||
const stepUpdate = () => {
|
const stepUpdate = () => {
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
if (updateCurrent.value > 5) {
|
if (updateCurrent.value > 5) {
|
||||||
updateCurrent.value = -1;
|
updateCurrent.value = -1;
|
||||||
}
|
}
|
||||||
updateCurrent.value += 1;
|
updateCurrent.value += 1;
|
||||||
}, 2000);
|
}, 2000);
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
try {
|
try {
|
||||||
const res: ResDataType = await request.get('/api/get-purchase-list');
|
const res: ResDataType = await request.get('/api/get-purchase-list');
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
|
@ -158,42 +151,29 @@ export default defineComponent({
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
stepUpdate();
|
stepUpdate();
|
||||||
fetchData();
|
fetchData();
|
||||||
});
|
|
||||||
|
|
||||||
const visible = ref(false);
|
|
||||||
|
|
||||||
return {
|
|
||||||
BASE_INFO_DATA,
|
|
||||||
prefix,
|
|
||||||
PRODUCT_LIST,
|
|
||||||
columns: TABLE_COLUMNS_DATA,
|
|
||||||
data,
|
|
||||||
pagination,
|
|
||||||
visible,
|
|
||||||
updateCurrent,
|
|
||||||
sortChange(val) {
|
|
||||||
console.log(val);
|
|
||||||
},
|
|
||||||
rehandleChange(changeParams, triggerAndData) {
|
|
||||||
console.log('统一Change', changeParams, triggerAndData);
|
|
||||||
},
|
|
||||||
listClick() {
|
|
||||||
visible.value = true;
|
|
||||||
},
|
|
||||||
deleteClickOp(columns) {
|
|
||||||
data.value.splice(columns.rowIndex, 1);
|
|
||||||
},
|
|
||||||
onConfirm() {
|
|
||||||
visible.value = false;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const visible = ref(false);
|
||||||
|
const sortChange = (val) => {
|
||||||
|
console.log(val);
|
||||||
|
};
|
||||||
|
const rehandleChange = (changeParams, triggerAndData) => {
|
||||||
|
console.log('统一Change', changeParams, triggerAndData);
|
||||||
|
};
|
||||||
|
const listClick = () => {
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
const deleteClickOp = (columns) => {
|
||||||
|
data.value.splice(columns.rowIndex, 1);
|
||||||
|
};
|
||||||
|
const onConfirm = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
|
|
|
@ -26,8 +26,7 @@
|
||||||
</card>
|
</card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import Card from '@/components/card/index.vue';
|
import Card from '@/components/card/index.vue';
|
||||||
|
|
||||||
const BASE_INFO_DATA = [
|
const BASE_INFO_DATA = [
|
||||||
|
@ -108,16 +107,6 @@ const BASE_INFO_DATA = [
|
||||||
type: null,
|
type: null,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'ListBase',
|
|
||||||
components: { Card },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
BASE_INFO_DATA,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
|
|
|
@ -68,8 +68,8 @@
|
||||||
</t-dialog>
|
</t-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, onMounted, onUnmounted, ref, watch, computed } from 'vue';
|
import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
|
|
||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
|
@ -78,7 +78,7 @@ import { BarChart, LineChart } from 'echarts/charts';
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
|
||||||
import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index';
|
import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index';
|
||||||
import { BASE_INFO_DATA, TABLE_COLUMNS } from './constants';
|
import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
|
||||||
|
|
||||||
import { prefix } from '@/config/global';
|
import { prefix } from '@/config/global';
|
||||||
import Card from '@/components/card/index.vue';
|
import Card from '@/components/card/index.vue';
|
||||||
|
@ -96,21 +96,17 @@ echarts.use([
|
||||||
CanvasRenderer,
|
CanvasRenderer,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export default defineComponent({
|
const store = useStore();
|
||||||
name: 'DetailDeploy',
|
|
||||||
components: { Card },
|
|
||||||
setup() {
|
|
||||||
const store = useStore();
|
|
||||||
|
|
||||||
const chartColors = computed(() => store.state.setting.chartColors);
|
const chartColors = computed(() => store.state.setting.chartColors);
|
||||||
const data = ref([]);
|
const data = ref([]);
|
||||||
const pagination = ref({
|
const pagination = ref({
|
||||||
defaultPageSize: 10,
|
defaultPageSize: 10,
|
||||||
total: 100,
|
total: 100,
|
||||||
defaultCurrent: 1,
|
defaultCurrent: 1,
|
||||||
});
|
});
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
try {
|
try {
|
||||||
const res: ResDataType = await request.get('/api/get-project-list');
|
const res: ResDataType = await request.get('/api/get-project-list');
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
|
@ -124,34 +120,34 @@ export default defineComponent({
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
|
|
||||||
// monitorChart logic
|
// monitorChart logic
|
||||||
let monitorContainer: HTMLElement;
|
let monitorContainer: HTMLElement;
|
||||||
let monitorChart: echarts.ECharts;
|
let monitorChart: echarts.ECharts;
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
monitorContainer = document.getElementById('monitorContainer');
|
monitorContainer = document.getElementById('monitorContainer');
|
||||||
monitorChart = echarts.init(monitorContainer);
|
monitorChart = echarts.init(monitorContainer);
|
||||||
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
|
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
|
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
|
||||||
}, 3000);
|
}, 3000);
|
||||||
});
|
});
|
||||||
|
|
||||||
// dataChart logic
|
// dataChart logic
|
||||||
let dataContainer: HTMLElement;
|
let dataContainer: HTMLElement;
|
||||||
let dataChart: echarts.ECharts;
|
let dataChart: echarts.ECharts;
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
dataContainer = document.getElementById('dataContainer');
|
dataContainer = document.getElementById('dataContainer');
|
||||||
dataChart = echarts.init(dataContainer);
|
dataChart = echarts.init(dataContainer);
|
||||||
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
|
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
|
||||||
});
|
});
|
||||||
|
|
||||||
const intervalTimer = null;
|
const intervalTimer = null;
|
||||||
|
|
||||||
/// / chartSize update
|
/// / chartSize update
|
||||||
const updateContainer = () => {
|
const updateContainer = () => {
|
||||||
monitorChart.resize({
|
monitorChart.resize({
|
||||||
width: monitorContainer.clientWidth,
|
width: monitorContainer.clientWidth,
|
||||||
height: monitorContainer.clientHeight,
|
height: monitorContainer.clientHeight,
|
||||||
|
@ -160,54 +156,44 @@ export default defineComponent({
|
||||||
width: dataContainer.clientWidth,
|
width: dataContainer.clientWidth,
|
||||||
height: dataContainer.clientHeight,
|
height: dataContainer.clientHeight,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('resize', updateContainer);
|
window.removeEventListener('resize', updateContainer);
|
||||||
clearInterval(intervalTimer);
|
clearInterval(intervalTimer);
|
||||||
});
|
});
|
||||||
|
|
||||||
const onAlertChange = () => {
|
const onAlertChange = () => {
|
||||||
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
|
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchData();
|
fetchData();
|
||||||
window.addEventListener('resize', updateContainer, false);
|
window.addEventListener('resize', updateContainer, false);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => store.state.setting.brandTheme,
|
() => store.state.setting.brandTheme,
|
||||||
() => {
|
() => {
|
||||||
changeChartsTheme([monitorChart, dataChart]);
|
changeChartsTheme([monitorChart, dataChart]);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
return {
|
|
||||||
prefix,
|
const sortChange = (val) => {
|
||||||
BASE_INFO_DATA,
|
|
||||||
columns: TABLE_COLUMNS,
|
|
||||||
data,
|
|
||||||
pagination,
|
|
||||||
visible,
|
|
||||||
sortChange(val) {
|
|
||||||
console.log(val);
|
console.log(val);
|
||||||
},
|
};
|
||||||
rehandleChange(changeParams, triggerAndData) {
|
const rehandleChange = (changeParams, triggerAndData) => {
|
||||||
console.log('统一Change', changeParams, triggerAndData);
|
console.log('统一Change', changeParams, triggerAndData);
|
||||||
},
|
};
|
||||||
listClick() {
|
const listClick = () => {
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
},
|
};
|
||||||
onConfirm() {
|
const onConfirm = () => {
|
||||||
visible.value = false;
|
visible.value = false;
|
||||||
},
|
};
|
||||||
deleteClickOp(e) {
|
const deleteClickOp = (e) => {
|
||||||
data.value.splice(e.rowIndex, 1);
|
data.value.splice(e.rowIndex, 1);
|
||||||
},
|
};
|
||||||
onAlertChange,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('../base/index.less');
|
@import url('../base/index.less');
|
||||||
|
|
|
@ -49,8 +49,8 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, computed, ComputedRef } from 'vue';
|
import { ref, computed, ComputedRef } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import { NOTIFICATION_TYPES } from '@/constants';
|
import { NOTIFICATION_TYPES } from '@/constants';
|
||||||
import { NotificationItem } from '@/interface';
|
import { NotificationItem } from '@/interface';
|
||||||
|
@ -71,34 +71,28 @@ const TAB_LIST = [
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default defineComponent({
|
const tabValue = ref('msgData');
|
||||||
name: 'DetailSecondary',
|
|
||||||
components: {
|
|
||||||
EmptyIcon,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const tabValue = ref('msgData');
|
|
||||||
|
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const selectedItem = ref<NotificationItem>();
|
const selectedItem = ref<NotificationItem>();
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|
||||||
const { msgData } = store.state.notification;
|
const { msgData } = store.state.notification;
|
||||||
|
|
||||||
const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
|
const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
|
||||||
if (tabValue.value === 'msgData') return msgData;
|
if (tabValue.value === 'msgData') return msgData;
|
||||||
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
|
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
|
||||||
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
|
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
|
||||||
return [];
|
return [];
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleClickDeleteBtn = (item: NotificationItem) => {
|
const handleClickDeleteBtn = (item: NotificationItem) => {
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
selectedItem.value = item;
|
selectedItem.value = item;
|
||||||
};
|
};
|
||||||
|
|
||||||
const setReadStatus = (item: NotificationItem) => {
|
const setReadStatus = (item: NotificationItem) => {
|
||||||
const changeMsg = msgData;
|
const changeMsg = msgData;
|
||||||
changeMsg.forEach((e: NotificationItem) => {
|
changeMsg.forEach((e: NotificationItem) => {
|
||||||
if (e.id === item.id) {
|
if (e.id === item.id) {
|
||||||
|
@ -106,9 +100,9 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
store.commit('notification/setMsgData', changeMsg);
|
store.commit('notification/setMsgData', changeMsg);
|
||||||
};
|
};
|
||||||
|
|
||||||
const deleteMsg = () => {
|
const deleteMsg = () => {
|
||||||
const item = selectedItem.value;
|
const item = selectedItem.value;
|
||||||
const changeMsg = msgData;
|
const changeMsg = msgData;
|
||||||
changeMsg.forEach((e: NotificationItem, index: number) => {
|
changeMsg.forEach((e: NotificationItem, index: number) => {
|
||||||
|
@ -118,21 +112,7 @@ export default defineComponent({
|
||||||
});
|
});
|
||||||
visible.value = false;
|
visible.value = false;
|
||||||
store.commit('notification/setMsgData', changeMsg);
|
store.commit('notification/setMsgData', changeMsg);
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
|
||||||
TAB_LIST,
|
|
||||||
NOTIFICATION_TYPES,
|
|
||||||
visible,
|
|
||||||
selectedItem,
|
|
||||||
tabValue,
|
|
||||||
msgDataList,
|
|
||||||
handleClickDeleteBtn,
|
|
||||||
setReadStatus,
|
|
||||||
deleteMsg,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
|
|
|
@ -154,30 +154,22 @@
|
||||||
</div>
|
</div>
|
||||||
</t-form>
|
</t-form>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { MessagePlugin } from 'tdesign-vue-next';
|
import { MessagePlugin } from 'tdesign-vue-next';
|
||||||
import { FORM_RULES, INITIAL_DATA, TYPE_OPTIONS, PARTY_A_OPTIONS, PARTY_B_OPTIONS } from './constants';
|
import { FORM_RULES, INITIAL_DATA, TYPE_OPTIONS, PARTY_A_OPTIONS, PARTY_B_OPTIONS } from './constants';
|
||||||
|
|
||||||
export default defineComponent({
|
const formData = ref({ ...INITIAL_DATA });
|
||||||
name: 'FormBase',
|
|
||||||
setup() {
|
const onReset = () => {
|
||||||
const formData = ref({ ...INITIAL_DATA });
|
|
||||||
return {
|
|
||||||
TYPE_OPTIONS,
|
|
||||||
PARTY_A_OPTIONS,
|
|
||||||
PARTY_B_OPTIONS,
|
|
||||||
FORM_RULES,
|
|
||||||
formData,
|
|
||||||
onReset() {
|
|
||||||
MessagePlugin.warning('取消新建');
|
MessagePlugin.warning('取消新建');
|
||||||
},
|
};
|
||||||
onSubmit({ validateResult }) {
|
const onSubmit = ({ validateResult }) => {
|
||||||
if (validateResult === true) {
|
if (validateResult === true) {
|
||||||
MessagePlugin.success('新建成功');
|
MessagePlugin.success('新建成功');
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
beforeUpload(file) {
|
const beforeUpload = (file) => {
|
||||||
if (!/\.(pdf)$/.test(file.name)) {
|
if (!/\.(pdf)$/.test(file.name)) {
|
||||||
MessagePlugin.warning('请上传pdf文件');
|
MessagePlugin.warning('请上传pdf文件');
|
||||||
return false;
|
return false;
|
||||||
|
@ -187,17 +179,14 @@ export default defineComponent({
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
},
|
};
|
||||||
handleFail({ file }) {
|
const handleFail = ({ file }) => {
|
||||||
MessagePlugin.error(`文件 ${file.name} 上传失败`);
|
MessagePlugin.error(`文件 ${file.name} 上传失败`);
|
||||||
},
|
};
|
||||||
// 用于格式化接口响应值,error 会被用于上传失败的提示文字;url 表示文件/图片地址
|
// 用于格式化接口响应值,error 会被用于上传失败的提示文字;url 表示文件/图片地址
|
||||||
formatResponse(res) {
|
const formatResponse = (res) => {
|
||||||
return { ...res, error: '上传失败,请重试', url: res.url };
|
return { ...res, error: '上传失败,请重试', url: res.url };
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
|
|
|
@ -139,8 +139,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { ValidateResultContext } from 'tdesign-vue-next';
|
import { ValidateResultContext } from 'tdesign-vue-next';
|
||||||
import Card from '@/components/card/index.vue';
|
import Card from '@/components/card/index.vue';
|
||||||
|
@ -155,16 +155,12 @@ import {
|
||||||
INITIAL_DATA3,
|
INITIAL_DATA3,
|
||||||
} from './constants';
|
} from './constants';
|
||||||
|
|
||||||
export default defineComponent({
|
const formData1 = ref({ ...INITIAL_DATA1 });
|
||||||
name: 'FormStep',
|
const formData2 = ref({ ...INITIAL_DATA2 });
|
||||||
components: { Card },
|
const formData3 = ref({ ...INITIAL_DATA3 });
|
||||||
setup() {
|
const activeForm = ref(0);
|
||||||
const formData1 = ref({ ...INITIAL_DATA1 });
|
|
||||||
const formData2 = ref({ ...INITIAL_DATA2 });
|
|
||||||
const formData3 = ref({ ...INITIAL_DATA3 });
|
|
||||||
const activeForm = ref(0);
|
|
||||||
|
|
||||||
const amount = computed(() => {
|
const amount = computed(() => {
|
||||||
if (formData1.value.name === '1') {
|
if (formData1.value.name === '1') {
|
||||||
return '565421';
|
return '565421';
|
||||||
}
|
}
|
||||||
|
@ -175,33 +171,20 @@ export default defineComponent({
|
||||||
return '109824';
|
return '109824';
|
||||||
}
|
}
|
||||||
return '--';
|
return '--';
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
const onSubmit = (result: ValidateResultContext<FormData>, val: number) => {
|
||||||
NAME_OPTIONS,
|
|
||||||
TYPE_OPTIONS,
|
|
||||||
ADDRESS_OPTIONS,
|
|
||||||
FORM_RULES,
|
|
||||||
formData1,
|
|
||||||
formData2,
|
|
||||||
formData3,
|
|
||||||
activeForm,
|
|
||||||
amount,
|
|
||||||
onSubmit(result: ValidateResultContext<FormData>, val: number) {
|
|
||||||
if (result.validateResult === true) {
|
if (result.validateResult === true) {
|
||||||
activeForm.value = val;
|
activeForm.value = val;
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
onReset(val: number) {
|
const onReset = (val: number) => {
|
||||||
activeForm.value = val;
|
activeForm.value = val;
|
||||||
},
|
};
|
||||||
complete() {
|
const complete = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
router.replace({ path: '/detail/advanced' });
|
router.replace({ path: '/detail/advanced' });
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
|
|
|
@ -64,8 +64,8 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, onMounted, computed } from 'vue';
|
import { ref, onMounted, computed } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||||
import { MessagePlugin } from 'tdesign-vue-next';
|
import { MessagePlugin } from 'tdesign-vue-next';
|
||||||
|
@ -78,25 +78,17 @@ import request from '@/utils/request';
|
||||||
|
|
||||||
import { COLUMNS } from './constants';
|
import { COLUMNS } from './constants';
|
||||||
|
|
||||||
export default defineComponent({
|
const data = ref([]);
|
||||||
name: 'ListBaseCard',
|
const pagination = ref({
|
||||||
components: {
|
|
||||||
Card,
|
|
||||||
SearchIcon,
|
|
||||||
Trend,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const data = ref([]);
|
|
||||||
const pagination = ref({
|
|
||||||
defaultPageSize: 20,
|
defaultPageSize: 20,
|
||||||
total: 100,
|
total: 100,
|
||||||
defaultCurrent: 1,
|
defaultCurrent: 1,
|
||||||
});
|
});
|
||||||
|
|
||||||
const searchValue = ref('');
|
const searchValue = ref('');
|
||||||
|
|
||||||
const dataLoading = ref(false);
|
const dataLoading = ref(false);
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
dataLoading.value = true;
|
dataLoading.value = true;
|
||||||
try {
|
try {
|
||||||
const res: ResDataType = await request.get('/api/get-list');
|
const res: ResDataType = await request.get('/api/get-list');
|
||||||
|
@ -113,32 +105,32 @@ export default defineComponent({
|
||||||
} finally {
|
} finally {
|
||||||
dataLoading.value = false;
|
dataLoading.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const deleteIdx = ref(-1);
|
const deleteIdx = ref(-1);
|
||||||
const confirmBody = computed(() => {
|
const confirmBody = computed(() => {
|
||||||
if (deleteIdx.value > -1) {
|
if (deleteIdx.value > -1) {
|
||||||
const { name } = data.value[deleteIdx.value];
|
const { name } = data.value[deleteIdx.value];
|
||||||
return `删除后,${name}的所有合同信息将被清空,且无法恢复`;
|
return `删除后,${name}的所有合同信息将被清空,且无法恢复`;
|
||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchData();
|
fetchData();
|
||||||
});
|
});
|
||||||
|
|
||||||
const confirmVisible = ref(false);
|
const confirmVisible = ref(false);
|
||||||
|
|
||||||
const selectedRowKeys = ref([1, 2]);
|
const selectedRowKeys = ref([1, 2]);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const resetIdx = () => {
|
const resetIdx = () => {
|
||||||
deleteIdx.value = -1;
|
deleteIdx.value = -1;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onConfirmDelete = () => {
|
const onConfirmDelete = () => {
|
||||||
// 真实业务请发起请求
|
// 真实业务请发起请求
|
||||||
data.value.splice(deleteIdx.value, 1);
|
data.value.splice(deleteIdx.value, 1);
|
||||||
pagination.value.total = data.value.length;
|
pagination.value.total = data.value.length;
|
||||||
|
@ -149,50 +141,33 @@ export default defineComponent({
|
||||||
confirmVisible.value = false;
|
confirmVisible.value = false;
|
||||||
MessagePlugin.success('删除成功');
|
MessagePlugin.success('删除成功');
|
||||||
resetIdx();
|
resetIdx();
|
||||||
};
|
};
|
||||||
|
|
||||||
const onCancel = () => {
|
const onCancel = () => {
|
||||||
resetIdx();
|
resetIdx();
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
const rowKey = 'index';
|
||||||
CONTRACT_STATUS,
|
|
||||||
CONTRACT_TYPES,
|
const rehandleSelectChange = (val: number[]) => {
|
||||||
CONTRACT_PAYMENT_TYPES,
|
|
||||||
COLUMNS,
|
|
||||||
data,
|
|
||||||
searchValue,
|
|
||||||
dataLoading,
|
|
||||||
pagination,
|
|
||||||
confirmBody,
|
|
||||||
confirmVisible,
|
|
||||||
rowKey: 'index',
|
|
||||||
onConfirmDelete,
|
|
||||||
onCancel,
|
|
||||||
selectedRowKeys,
|
|
||||||
rehandleSelectChange(val: number[]) {
|
|
||||||
selectedRowKeys.value = val;
|
selectedRowKeys.value = val;
|
||||||
},
|
};
|
||||||
rehandlePageChange(curr, pageInfo) {
|
const rehandlePageChange = (curr, pageInfo) => {
|
||||||
console.log('分页变化', curr, pageInfo);
|
console.log('分页变化', curr, pageInfo);
|
||||||
},
|
};
|
||||||
rehandleChange(changeParams, triggerAndData) {
|
const rehandleChange = (changeParams, triggerAndData) => {
|
||||||
console.log('统一Change', changeParams, triggerAndData);
|
console.log('统一Change', changeParams, triggerAndData);
|
||||||
},
|
};
|
||||||
handleClickDetail() {
|
const handleClickDetail = () => {
|
||||||
router.push('/detail/base');
|
router.push('/detail/base');
|
||||||
},
|
};
|
||||||
handleSetupContract() {
|
const handleSetupContract = () => {
|
||||||
router.push('/form/base');
|
router.push('/form/base');
|
||||||
},
|
};
|
||||||
handleClickDelete(row: { rowIndex: any }) {
|
const handleClickDelete = (row: { rowIndex: any }) => {
|
||||||
deleteIdx.value = row.rowIndex;
|
deleteIdx.value = row.rowIndex;
|
||||||
confirmVisible.value = true;
|
confirmVisible.value = true;
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '@/style/variables';
|
@import '@/style/variables';
|
||||||
|
|
|
@ -8,8 +8,8 @@
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
<t-form-item label="产品状态" name="status">
|
<t-form-item label="产品状态" name="status">
|
||||||
<t-radio-group v-model="formData.status">
|
<t-radio-group v-model="formData.status">
|
||||||
<t-radio value="0"> 已停用 </t-radio>
|
<t-radio value="0">已停用</t-radio>
|
||||||
<t-radio value="1"> 已启用 </t-radio>
|
<t-radio value="1">已启用</t-radio>
|
||||||
</t-radio-group>
|
</t-radio-group>
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
<t-form-item label="产品描述" name="description">
|
<t-form-item label="产品描述" name="description">
|
||||||
|
@ -26,16 +26,16 @@
|
||||||
<t-textarea v-model="textareaValue" :style="{ width: '480px' }" placeholder="请输入内容" name="description" />
|
<t-textarea v-model="textareaValue" :style="{ width: '480px' }" placeholder="请输入内容" name="description" />
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
<t-form-item style="float: right">
|
<t-form-item style="float: right">
|
||||||
<t-button variant="outline" @click="onClickCloseBtn"> 取消 </t-button>
|
<t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
|
||||||
<t-button theme="primary" type="submit"> 确定 </t-button>
|
<t-button theme="primary" type="submit">确定</t-button>
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
</t-form>
|
</t-form>
|
||||||
</template>
|
</template>
|
||||||
</t-dialog>
|
</t-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
import { MessagePlugin } from 'tdesign-vue-next';
|
import { MessagePlugin } from 'tdesign-vue-next';
|
||||||
|
|
||||||
const INITIAL_DATA = {
|
const INITIAL_DATA = {
|
||||||
|
@ -53,8 +53,7 @@ const SELECT_OPTIONS = [
|
||||||
{ label: 'CVM', value: '3' },
|
{ label: 'CVM', value: '3' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
props: {
|
|
||||||
visible: {
|
visible: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
|
@ -65,13 +64,13 @@ export default defineComponent({
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
setup(props, ctx) {
|
|
||||||
const formVisible = ref(false);
|
|
||||||
const formData = ref(props.data);
|
|
||||||
const textareaValue = ref('');
|
|
||||||
|
|
||||||
const onSubmit = ({ result, firstError }) => {
|
const formVisible = ref(false);
|
||||||
|
const formData = ref(props.data);
|
||||||
|
const textareaValue = ref('');
|
||||||
|
|
||||||
|
const onSubmit = ({ result, firstError }) => {
|
||||||
if (!firstError) {
|
if (!firstError) {
|
||||||
MessagePlugin.success('提交成功');
|
MessagePlugin.success('提交成功');
|
||||||
formVisible.value = false;
|
formVisible.value = false;
|
||||||
|
@ -79,46 +78,36 @@ export default defineComponent({
|
||||||
console.log('Errors: ', result);
|
console.log('Errors: ', result);
|
||||||
MessagePlugin.warning(firstError);
|
MessagePlugin.warning(firstError);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickCloseBtn = () => {
|
const onClickCloseBtn = () => {
|
||||||
formVisible.value = false;
|
formVisible.value = false;
|
||||||
formData.value = { ...INITIAL_DATA };
|
formData.value = { ...INITIAL_DATA };
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(
|
const emit = defineEmits(['update:visible']);
|
||||||
|
watch(
|
||||||
() => formVisible.value,
|
() => formVisible.value,
|
||||||
(val) => {
|
(val) => {
|
||||||
const { emit } = ctx;
|
|
||||||
emit('update:visible', val);
|
emit('update:visible', val);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.visible,
|
() => props.visible,
|
||||||
(val) => {
|
(val) => {
|
||||||
formVisible.value = val;
|
formVisible.value = val;
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.data,
|
() => props.data,
|
||||||
(val) => {
|
(val) => {
|
||||||
formData.value = val;
|
formData.value = val;
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
const rules = {
|
||||||
SELECT_OPTIONS,
|
|
||||||
formVisible,
|
|
||||||
formData,
|
|
||||||
textareaValue,
|
|
||||||
onSubmit,
|
|
||||||
onClickCloseBtn,
|
|
||||||
rules: {
|
|
||||||
name: [{ required: true, message: '请输入产品名称', type: 'error' }],
|
name: [{ required: true, message: '请输入产品名称', type: 'error' }],
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -58,8 +58,8 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, computed, onMounted } from 'vue';
|
import { ref, computed, onMounted } from 'vue';
|
||||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||||
import { MessagePlugin } from 'tdesign-vue-next';
|
import { MessagePlugin } from 'tdesign-vue-next';
|
||||||
import Card from '@/components/card/Card.vue';
|
import Card from '@/components/card/Card.vue';
|
||||||
|
@ -76,21 +76,13 @@ const INITIAL_DATA = {
|
||||||
amount: 0,
|
amount: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defineComponent({
|
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
|
||||||
name: 'ListBase',
|
const deleteProduct = ref(undefined);
|
||||||
components: {
|
|
||||||
SearchIcon,
|
|
||||||
Card,
|
|
||||||
DialogForm,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
|
|
||||||
const deleteProduct = ref(undefined);
|
|
||||||
|
|
||||||
const productList = ref([]);
|
const productList = ref([]);
|
||||||
const dataLoading = ref(true);
|
const dataLoading = ref(true);
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
try {
|
try {
|
||||||
const res: ResDataType = await request.get('/api/get-card-list');
|
const res: ResDataType = await request.get('/api/get-card-list');
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
|
@ -106,58 +98,46 @@ export default defineComponent({
|
||||||
} finally {
|
} finally {
|
||||||
dataLoading.value = false;
|
dataLoading.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const confirmBody = computed(() =>
|
const confirmBody = computed(() =>
|
||||||
deleteProduct.value ? `确认删除后${deleteProduct.value.name}的所有产品信息将被清空, 且无法恢复` : '',
|
deleteProduct.value ? `确认删除后${deleteProduct.value.name}的所有产品信息将被清空, 且无法恢复` : '',
|
||||||
);
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchData();
|
fetchData();
|
||||||
});
|
});
|
||||||
|
|
||||||
const formDialogVisible = ref(false);
|
const formDialogVisible = ref(false);
|
||||||
const searchValue = ref('');
|
const searchValue = ref('');
|
||||||
const confirmVisible = ref(false);
|
const confirmVisible = ref(false);
|
||||||
const formData = ref({ ...INITIAL_DATA });
|
const formData = ref({ ...INITIAL_DATA });
|
||||||
|
|
||||||
return {
|
const onPageSizeChange = (size: number) => {
|
||||||
pagination,
|
|
||||||
productList,
|
|
||||||
dataLoading,
|
|
||||||
formDialogVisible,
|
|
||||||
confirmBody,
|
|
||||||
searchValue,
|
|
||||||
confirmVisible,
|
|
||||||
formData,
|
|
||||||
onPageSizeChange(size: number) {
|
|
||||||
pagination.value.pageSize = size;
|
pagination.value.pageSize = size;
|
||||||
pagination.value.current = 1;
|
pagination.value.current = 1;
|
||||||
},
|
};
|
||||||
onCurrentChange(current: number) {
|
const onCurrentChange = (current: number) => {
|
||||||
pagination.value.current = current;
|
pagination.value.current = current;
|
||||||
},
|
};
|
||||||
handleDeleteItem(product) {
|
const handleDeleteItem = (product) => {
|
||||||
confirmVisible.value = true;
|
confirmVisible.value = true;
|
||||||
deleteProduct.value = product;
|
deleteProduct.value = product;
|
||||||
},
|
};
|
||||||
onConfirmDelete() {
|
const onConfirmDelete = () => {
|
||||||
const { index } = deleteProduct.value;
|
const { index } = deleteProduct.value;
|
||||||
productList.value.splice(index - 1, 1);
|
productList.value.splice(index - 1, 1);
|
||||||
confirmVisible.value = false;
|
confirmVisible.value = false;
|
||||||
MessagePlugin.success('删除成功');
|
MessagePlugin.success('删除成功');
|
||||||
},
|
};
|
||||||
onCancel() {
|
const onCancel = () => {
|
||||||
deleteProduct.value = undefined;
|
deleteProduct.value = undefined;
|
||||||
formData.value = { ...INITIAL_DATA };
|
formData.value = { ...INITIAL_DATA };
|
||||||
},
|
};
|
||||||
handleManageProduct(product) {
|
const handleManageProduct = (product) => {
|
||||||
formDialogVisible.value = true;
|
formDialogVisible.value = true;
|
||||||
formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
|
formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '@/style/variables.less';
|
@import '@/style/variables.less';
|
||||||
|
|
|
@ -102,8 +102,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref, computed, onMounted } from 'vue';
|
import { ref, computed, onMounted } from 'vue';
|
||||||
import { MessagePlugin } from 'tdesign-vue-next';
|
import { MessagePlugin } from 'tdesign-vue-next';
|
||||||
import Trend from '@/components/trend/index.vue';
|
import Trend from '@/components/trend/index.vue';
|
||||||
import request from '@/utils/request';
|
import request from '@/utils/request';
|
||||||
|
@ -167,29 +167,22 @@ const searchForm = {
|
||||||
type: '',
|
type: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defineComponent({
|
const formData = ref({ ...searchForm });
|
||||||
name: 'ListTable',
|
const rowKey = 'index';
|
||||||
components: {
|
const verticalAlign = 'top';
|
||||||
Trend,
|
const hover = true;
|
||||||
},
|
|
||||||
setup() {
|
const pagination = ref({
|
||||||
const formData = ref({ ...searchForm });
|
|
||||||
const tableConfig = {
|
|
||||||
rowKey: 'index',
|
|
||||||
verticalAlign: 'top',
|
|
||||||
hover: true,
|
|
||||||
};
|
|
||||||
const pagination = ref({
|
|
||||||
defaultPageSize: 20,
|
defaultPageSize: 20,
|
||||||
total: 100,
|
total: 100,
|
||||||
defaultCurrent: 1,
|
defaultCurrent: 1,
|
||||||
});
|
});
|
||||||
const confirmVisible = ref(false);
|
const confirmVisible = ref(false);
|
||||||
|
|
||||||
const data = ref([]);
|
const data = ref([]);
|
||||||
|
|
||||||
const dataLoading = ref(false);
|
const dataLoading = ref(false);
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
dataLoading.value = true;
|
dataLoading.value = true;
|
||||||
try {
|
try {
|
||||||
const res: ResDataType = await request.get('/api/get-list');
|
const res: ResDataType = await request.get('/api/get-list');
|
||||||
|
@ -206,76 +199,57 @@ export default defineComponent({
|
||||||
} finally {
|
} finally {
|
||||||
dataLoading.value = false;
|
dataLoading.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const deleteIdx = ref(-1);
|
const deleteIdx = ref(-1);
|
||||||
const confirmBody = computed(() => {
|
const confirmBody = computed(() => {
|
||||||
if (deleteIdx.value > -1) {
|
if (deleteIdx.value > -1) {
|
||||||
const { name } = data.value[deleteIdx.value];
|
const { name } = data.value[deleteIdx.value];
|
||||||
return `删除后,${name}的所有合同信息将被清空,且无法恢复`;
|
return `删除后,${name}的所有合同信息将被清空,且无法恢复`;
|
||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
});
|
});
|
||||||
|
|
||||||
const resetIdx = () => {
|
const resetIdx = () => {
|
||||||
deleteIdx.value = -1;
|
deleteIdx.value = -1;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onConfirmDelete = () => {
|
const onConfirmDelete = () => {
|
||||||
// 真实业务请发起请求
|
// 真实业务请发起请求
|
||||||
data.value.splice(deleteIdx.value, 1);
|
data.value.splice(deleteIdx.value, 1);
|
||||||
pagination.value.total = data.value.length;
|
pagination.value.total = data.value.length;
|
||||||
confirmVisible.value = false;
|
confirmVisible.value = false;
|
||||||
MessagePlugin.success('删除成功');
|
MessagePlugin.success('删除成功');
|
||||||
resetIdx();
|
resetIdx();
|
||||||
};
|
};
|
||||||
|
|
||||||
const onCancel = () => {
|
const onCancel = () => {
|
||||||
resetIdx();
|
resetIdx();
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchData();
|
fetchData();
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
const handleClickDelete = ({ row }) => {
|
||||||
data,
|
|
||||||
COLUMNS,
|
|
||||||
CONTRACT_STATUS,
|
|
||||||
CONTRACT_STATUS_OPTIONS,
|
|
||||||
CONTRACT_TYPES,
|
|
||||||
CONTRACT_TYPE_OPTIONS,
|
|
||||||
CONTRACT_PAYMENT_TYPES,
|
|
||||||
formData,
|
|
||||||
pagination,
|
|
||||||
confirmVisible,
|
|
||||||
confirmBody,
|
|
||||||
...tableConfig,
|
|
||||||
onConfirmDelete,
|
|
||||||
onCancel,
|
|
||||||
dataLoading,
|
|
||||||
handleClickDelete({ row }) {
|
|
||||||
deleteIdx.value = row.rowIndex;
|
deleteIdx.value = row.rowIndex;
|
||||||
confirmVisible.value = true;
|
confirmVisible.value = true;
|
||||||
},
|
};
|
||||||
onReset(val) {
|
const onReset = (val) => {
|
||||||
console.log(val);
|
console.log(val);
|
||||||
},
|
};
|
||||||
onSubmit(val) {
|
const onSubmit = (val) => {
|
||||||
console.log(val);
|
console.log(val);
|
||||||
},
|
};
|
||||||
rehandlePageChange(curr, pageInfo) {
|
const rehandlePageChange = (curr, pageInfo) => {
|
||||||
console.log('分页变化', curr, pageInfo);
|
console.log('分页变化', curr, pageInfo);
|
||||||
},
|
};
|
||||||
rehandleChange(changeParams, triggerAndData) {
|
const rehandleChange = (changeParams, triggerAndData) => {
|
||||||
console.log('统一Change', changeParams, triggerAndData);
|
console.log('统一Change', changeParams, triggerAndData);
|
||||||
},
|
};
|
||||||
rehandleClickOp({ text, row }) {
|
const rehandleClickOp = ({ text, row }) => {
|
||||||
console.log(text, row);
|
console.log(text, row);
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
|
|
@ -1,14 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<common-table />
|
<common-table />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import CommonTable from '../components/CommonTable.vue';
|
import CommonTable from '../components/CommonTable.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'ListBase',
|
|
||||||
components: {
|
|
||||||
CommonTable,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,38 +15,24 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||||
import { prefix } from '@/config/global';
|
|
||||||
|
|
||||||
import { TREE_DATA } from './constants';
|
import { TREE_DATA } from './constants';
|
||||||
import CommonTable from '../components/CommonTable.vue';
|
import CommonTable from '../components/CommonTable.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const filterByText = ref();
|
||||||
name: 'ListTree',
|
const filterText = ref();
|
||||||
components: {
|
|
||||||
SearchIcon,
|
const expanded = ['0', '0-0', '0-1', '0-2', '0-3', '0-4'];
|
||||||
CommonTable,
|
|
||||||
},
|
const onInput = () => {
|
||||||
setup() {
|
|
||||||
const filterByText = ref();
|
|
||||||
const filterText = ref();
|
|
||||||
return {
|
|
||||||
prefix,
|
|
||||||
TREE_DATA,
|
|
||||||
expanded: ['0', '0-0', '0-1', '0-2', '0-3', '0-4'],
|
|
||||||
filterText,
|
|
||||||
filterByText,
|
|
||||||
onInput() {
|
|
||||||
filterByText.value = (node) => {
|
filterByText.value = (node) => {
|
||||||
const rs = node.label.indexOf(filterText.value) >= 0;
|
const rs = node.label.indexOf(filterText.value) >= 0;
|
||||||
return rs;
|
return rs;
|
||||||
};
|
};
|
||||||
},
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '@/style/variables.less';
|
@import '@/style/variables.less';
|
||||||
|
|
|
@ -15,34 +15,22 @@
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import LogoFullIcon from '@/assets/assets-logo-full.svg?component';
|
import LogoFullIcon from '@/assets/assets-logo-full.svg?component';
|
||||||
|
|
||||||
export default defineComponent({
|
const store = useStore();
|
||||||
components: { LogoFullIcon },
|
const toggleSettingPanel = () => {
|
||||||
setup() {
|
|
||||||
const store = useStore();
|
|
||||||
const toggleSettingPanel = () => {
|
|
||||||
store.commit('setting/toggleSettingPanel', true);
|
store.commit('setting/toggleSettingPanel', true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const navToGitHub = () => {
|
const navToGitHub = () => {
|
||||||
window.open('https://github.com/tencent/tdesign-vue-next-starter');
|
window.open('https://github.com/tencent/tdesign-vue-next-starter');
|
||||||
};
|
};
|
||||||
|
|
||||||
const navToHelper = () => {
|
const navToHelper = () => {
|
||||||
window.open('http://tdesign.tencent.com/starter/docs/get-started');
|
window.open('http://tdesign.tencent.com/starter/docs/get-started');
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
|
||||||
toggleSettingPanel,
|
|
||||||
navToGitHub,
|
|
||||||
navToHelper,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -70,8 +70,8 @@
|
||||||
</t-form>
|
</t-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import QrcodeVue from 'qrcode.vue';
|
import QrcodeVue from 'qrcode.vue';
|
||||||
|
@ -93,24 +93,21 @@ const FORM_RULES = {
|
||||||
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
|
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defineComponent({
|
const type = ref('password');
|
||||||
components: { QrcodeVue },
|
|
||||||
setup() {
|
|
||||||
const type = ref('password');
|
|
||||||
|
|
||||||
const formData = ref({ ...INITIAL_DATA });
|
const formData = ref({ ...INITIAL_DATA });
|
||||||
const showPsw = ref(false);
|
const showPsw = ref(false);
|
||||||
|
|
||||||
const [countDown, handleCounter] = useCounter();
|
const [countDown, handleCounter] = useCounter();
|
||||||
|
|
||||||
const switchType = (val: string) => {
|
const switchType = (val: string) => {
|
||||||
type.value = val;
|
type.value = val;
|
||||||
};
|
};
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|
||||||
const onSubmit = async ({ validateResult }) => {
|
const onSubmit = async ({ validateResult }) => {
|
||||||
if (validateResult === true) {
|
if (validateResult === true) {
|
||||||
try {
|
try {
|
||||||
await store.dispatch('user/login', formData.value);
|
await store.dispatch('user/login', formData.value);
|
||||||
|
@ -123,18 +120,5 @@ export default defineComponent({
|
||||||
MessagePlugin.error(e.message);
|
MessagePlugin.error(e.message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
|
||||||
FORM_RULES,
|
|
||||||
formData,
|
|
||||||
showPsw,
|
|
||||||
type,
|
|
||||||
switchType,
|
|
||||||
countDown,
|
|
||||||
handleCounter,
|
|
||||||
onSubmit,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -70,8 +70,8 @@
|
||||||
</t-form>
|
</t-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { MessagePlugin } from 'tdesign-vue-next';
|
import { MessagePlugin } from 'tdesign-vue-next';
|
||||||
import { useCounter } from '@/hooks';
|
import { useCounter } from '@/hooks';
|
||||||
|
|
||||||
|
@ -93,47 +93,30 @@ const FORM_RULES = {
|
||||||
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
|
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defineComponent({
|
const type = ref('phone');
|
||||||
setup(props, ctx) {
|
|
||||||
const type = ref('phone');
|
|
||||||
const emailOptions = ref([]);
|
|
||||||
|
|
||||||
const form = ref();
|
const form = ref();
|
||||||
const formData = ref({ ...INITIAL_DATA });
|
const formData = ref({ ...INITIAL_DATA });
|
||||||
|
|
||||||
const showPsw = ref(false);
|
const showPsw = ref(false);
|
||||||
|
|
||||||
const [countDown, handleCounter] = useCounter();
|
const [countDown, handleCounter] = useCounter();
|
||||||
|
|
||||||
const onSubmit = ({ validateResult }) => {
|
const emit = defineEmits(['registerSuccess']);
|
||||||
|
|
||||||
|
const onSubmit = ({ validateResult }) => {
|
||||||
if (validateResult === true) {
|
if (validateResult === true) {
|
||||||
if (!formData.value.checked) {
|
if (!formData.value.checked) {
|
||||||
MessagePlugin.error('请同意TDesign服务协议和TDesign 隐私声明');
|
MessagePlugin.error('请同意TDesign服务协议和TDesign 隐私声明');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
MessagePlugin.success('注册成功');
|
MessagePlugin.success('注册成功');
|
||||||
const { emit } = ctx;
|
|
||||||
emit('registerSuccess');
|
emit('registerSuccess');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const switchType = (val) => {
|
const switchType = (val) => {
|
||||||
form.value.reset();
|
form.value.reset();
|
||||||
type.value = val;
|
type.value = val;
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
|
||||||
FORM_RULES,
|
|
||||||
formData,
|
|
||||||
showPsw,
|
|
||||||
form,
|
|
||||||
type,
|
|
||||||
emailOptions,
|
|
||||||
countDown,
|
|
||||||
handleCounter,
|
|
||||||
onSubmit,
|
|
||||||
switchType,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -22,34 +22,18 @@
|
||||||
<footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
|
<footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
import Login from './components/Login.vue';
|
import Login from './components/Login.vue';
|
||||||
import Register from './components/Register.vue';
|
import Register from './components/Register.vue';
|
||||||
import LoginHeader from './components/Header.vue';
|
import LoginHeader from './components/Header.vue';
|
||||||
import TdesignSetting from '@/layouts/setting.vue';
|
import TdesignSetting from '@/layouts/setting.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const type = ref('login');
|
||||||
name: 'LoginIndex',
|
const switchType = (val: string) => {
|
||||||
components: {
|
|
||||||
Login,
|
|
||||||
Register,
|
|
||||||
LoginHeader,
|
|
||||||
TdesignSetting,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const type = ref('login');
|
|
||||||
const switchType = (val: string) => {
|
|
||||||
type.value = val;
|
type.value = val;
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
|
||||||
type,
|
|
||||||
switchType,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
|
|
|
@ -4,12 +4,6 @@
|
||||||
</result>
|
</result>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import Result from '@/components/result/index.vue';
|
import Result from '@/components/result/index.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Result403',
|
|
||||||
components: { Result },
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,12 +4,6 @@
|
||||||
</result>
|
</result>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import Result from '@/components/result/index.vue';
|
import Result from '@/components/result/index.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Result404',
|
|
||||||
components: { Result },
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,12 +4,6 @@
|
||||||
</result>
|
</result>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import Result from '@/components/result/index.vue';
|
import Result from '@/components/result/index.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Result500',
|
|
||||||
components: { Result },
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -19,15 +19,9 @@
|
||||||
</result>
|
</result>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import Result from '@/components/result/index.vue';
|
import Result from '@/components/result/index.vue';
|
||||||
import Thumbnail from '@/components/thumbnail/index.vue';
|
import Thumbnail from '@/components/thumbnail/index.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'ResultBrowserIncompatible',
|
|
||||||
components: { Result, Thumbnail },
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '@/style/variables.less';
|
@import '@/style/variables.less';
|
||||||
|
|
|
@ -10,14 +10,6 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'ResultSuccess',
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '@/style/variables.less';
|
@import '@/style/variables.less';
|
||||||
|
|
||||||
|
|
|
@ -7,12 +7,6 @@
|
||||||
</result>
|
</result>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import Result from '@/components/result/index.vue';
|
import Result from '@/components/result/index.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'ResultNetworkError',
|
|
||||||
components: { Result },
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -10,14 +10,6 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'ResultSuccess',
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '@/style/variables.less';
|
@import '@/style/variables.less';
|
||||||
|
|
||||||
|
|
|
@ -89,8 +89,8 @@
|
||||||
</t-col>
|
</t-col>
|
||||||
</t-row>
|
</t-row>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
|
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
|
||||||
|
@ -109,21 +109,16 @@ import Card from '@/components/card/index.vue';
|
||||||
|
|
||||||
echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
|
echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
|
||||||
|
|
||||||
export default defineComponent({
|
let lineContainer: HTMLElement;
|
||||||
components: {
|
let lineChart: echarts.ECharts;
|
||||||
Card,
|
const store = useStore();
|
||||||
},
|
const chartColors = computed(() => store.state.setting.chartColors);
|
||||||
setup() {
|
|
||||||
let lineContainer: HTMLElement;
|
|
||||||
let lineChart: echarts.ECharts;
|
|
||||||
const store = useStore();
|
|
||||||
const chartColors = computed(() => store.state.setting.chartColors);
|
|
||||||
|
|
||||||
const onLineChange = (value) => {
|
const onLineChange = (value) => {
|
||||||
lineChart.setOption(getFolderLineDataSet(value));
|
lineChart.setOption(getFolderLineDataSet(value));
|
||||||
};
|
};
|
||||||
|
|
||||||
const initChart = () => {
|
const initChart = () => {
|
||||||
lineContainer = document.getElementById('lineContainer');
|
lineContainer = document.getElementById('lineContainer');
|
||||||
lineChart = echarts.init(lineContainer);
|
lineChart = echarts.init(lineContainer);
|
||||||
lineChart.setOption({
|
lineChart.setOption({
|
||||||
|
@ -135,27 +130,27 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
...getFolderLineDataSet({ ...chartColors.value }),
|
...getFolderLineDataSet({ ...chartColors.value }),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateContainer = () => {
|
const updateContainer = () => {
|
||||||
lineChart?.resize({
|
lineChart?.resize({
|
||||||
width: lineContainer.clientWidth,
|
width: lineContainer.clientWidth,
|
||||||
height: lineContainer.clientHeight,
|
height: lineContainer.clientHeight,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
initChart();
|
initChart();
|
||||||
});
|
});
|
||||||
window.addEventListener('resize', updateContainer, false);
|
window.addEventListener('resize', updateContainer, false);
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('resize', updateContainer);
|
window.removeEventListener('resize', updateContainer);
|
||||||
});
|
});
|
||||||
|
|
||||||
const getIcon = (type) => {
|
const getIcon = (type) => {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'a':
|
case 'a':
|
||||||
return ProductAIcon;
|
return ProductAIcon;
|
||||||
|
@ -168,25 +163,14 @@ export default defineComponent({
|
||||||
default:
|
default:
|
||||||
return ProductAIcon;
|
return ProductAIcon;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => store.state.setting.brandTheme,
|
() => store.state.setting.brandTheme,
|
||||||
() => {
|
() => {
|
||||||
changeChartsTheme([lineChart]);
|
changeChartsTheme([lineChart]);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
|
||||||
LAST_7_DAYS,
|
|
||||||
USER_INFO_LIST,
|
|
||||||
TEAM_MEMBERS,
|
|
||||||
PRODUCT_LIST,
|
|
||||||
onLineChange,
|
|
||||||
getIcon,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('./index.less');
|
@import url('./index.less');
|
||||||
|
|
Loading…
Reference in New Issue
Block a user