mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 04:26:30 +08:00
refactor(setup): use setup script
This commit is contained in:
parent
c02c4117a0
commit
e3055c16b6
|
@ -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;
|
||||
}
|
||||
}
|
11
src/App.vue
11
src/App.vue
|
@ -1,13 +1,11 @@
|
|||
<template>
|
||||
<router-view :class="[mode]" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, onMounted } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import config from '@/config/style';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore();
|
||||
|
||||
const mode = computed(() => {
|
||||
|
@ -17,11 +15,6 @@ export default defineComponent({
|
|||
onMounted(() => {
|
||||
store.dispatch('setting/changeTheme', { ...config });
|
||||
});
|
||||
return {
|
||||
mode,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import '@/style/variables.less';
|
||||
|
|
|
@ -52,8 +52,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, PropType, defineEmits } from 'vue';
|
||||
import {
|
||||
ShopIcon,
|
||||
CalendarIcon,
|
||||
|
@ -71,63 +71,35 @@ export interface CardProductType {
|
|||
name: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListCardComponent',
|
||||
components: {
|
||||
ShopIcon,
|
||||
CalendarIcon,
|
||||
ServiceIcon,
|
||||
UserAvatarIcon,
|
||||
LaptopIcon,
|
||||
MoreIcon,
|
||||
AddIcon,
|
||||
},
|
||||
props: {
|
||||
const props = defineProps({
|
||||
product: {
|
||||
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 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,
|
||||
},
|
||||
{ '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,
|
||||
},
|
||||
{ 'list-card-item_detail--control__disabled': !props.product.isSetup },
|
||||
]);
|
||||
|
||||
return {
|
||||
cardClass,
|
||||
cardLogoClass,
|
||||
cardControlClass,
|
||||
typeMap: ['A', 'B', 'C', 'D', 'E'],
|
||||
handleClickManage(product) {
|
||||
const typeMap = ['A', 'B', 'C', 'D', 'E'];
|
||||
|
||||
const handleClickManage = (product: CardProductType) => {
|
||||
emit('manage-product', product);
|
||||
},
|
||||
handleClickDelete(product) {
|
||||
emit('delete-item', product);
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const handleClickDelete = (product: CardProductType) => {
|
||||
emit('delete-item', product);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -16,38 +16,27 @@
|
|||
<div v-if="size !== 'small'" class="card-spacer-bottom" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { defineProps, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Card',
|
||||
props: {
|
||||
title: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
subtitle: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
subtitle: String,
|
||||
describe: String,
|
||||
compact: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
describe: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
size: {
|
||||
type: String as PropType<string>,
|
||||
type: String,
|
||||
default: 'default',
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
});
|
||||
|
||||
const containerCls = computed(() => {
|
||||
const { compact, border } = props;
|
||||
return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
|
||||
|
@ -73,14 +62,6 @@ export default defineComponent({
|
|||
},
|
||||
];
|
||||
});
|
||||
|
||||
return {
|
||||
containerCls,
|
||||
titleCls,
|
||||
titleTextCls,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import '@/style/variables';
|
||||
|
|
|
@ -1,23 +1,20 @@
|
|||
<template>
|
||||
<div :style="style" class="color-container" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { defineProps, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { getBrandColor } from '@/config/color';
|
||||
|
||||
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)';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Color',
|
||||
props: {
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String as PropType<string>,
|
||||
default: 'default',
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
});
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const style = computed(() => {
|
||||
|
@ -27,12 +24,6 @@ export default defineComponent({
|
|||
background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
style,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.color-container {
|
||||
|
|
|
@ -8,35 +8,21 @@
|
|||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { defineProps, computed } from 'vue';
|
||||
import Result403Icon from '@/assets/assets-result-403.svg?component';
|
||||
import Result404Icon from '@/assets/assets-result-404.svg?component';
|
||||
import Result500Icon from '@/assets/assets-result-500.svg?component';
|
||||
import ResultIeIcon from '@/assets/assets-result-ie.svg?component';
|
||||
import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Result',
|
||||
props: {
|
||||
bgUrl: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
tip: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const props = defineProps({
|
||||
bgUrl: String,
|
||||
title: String,
|
||||
tip: String,
|
||||
type: String,
|
||||
});
|
||||
|
||||
const dynamicComponent = computed(() => {
|
||||
switch (props.type) {
|
||||
case '403':
|
||||
|
@ -53,11 +39,6 @@ export default defineComponent({
|
|||
return Result403Icon;
|
||||
}
|
||||
});
|
||||
return {
|
||||
dynamicComponent,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables';
|
||||
|
|
|
@ -1,22 +1,17 @@
|
|||
<template>
|
||||
<img :class="className" :src="url" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, PropType } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Thumbnail',
|
||||
props: {
|
||||
url: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
const props = defineProps({
|
||||
url: String,
|
||||
type: {
|
||||
type: String as PropType<string>,
|
||||
type: String,
|
||||
default: 'layout',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
});
|
||||
|
||||
const className = computed(() => {
|
||||
const { type } = props;
|
||||
return [
|
||||
|
@ -27,9 +22,6 @@ export default defineComponent({
|
|||
},
|
||||
];
|
||||
});
|
||||
return { className };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
|
|
|
@ -20,26 +20,18 @@
|
|||
<span>{{ describe }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, PropType } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { defineProps, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Trend',
|
||||
props: {
|
||||
type: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
describe: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
default: '',
|
||||
},
|
||||
const props = defineProps({
|
||||
type: String,
|
||||
describe: [String, Number],
|
||||
isReverseColor: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
});
|
||||
|
||||
const containerCls = computed(() => {
|
||||
const { isReverseColor, type } = props;
|
||||
return [
|
||||
|
@ -53,13 +45,6 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
const iconCls = computed(() => ['trend-icon-container']);
|
||||
|
||||
return {
|
||||
containerCls,
|
||||
iconCls,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -6,16 +6,10 @@
|
|||
</t-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TdesignStarterBreadcrumb',
|
||||
props: {
|
||||
isVisible: Boolean,
|
||||
},
|
||||
setup() {
|
||||
const crumbs = computed(() => {
|
||||
const route = useRoute();
|
||||
|
||||
|
@ -32,12 +26,6 @@ export default defineComponent({
|
|||
}, []);
|
||||
return breadcrumbs;
|
||||
});
|
||||
|
||||
return {
|
||||
crumbs,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.tdesign-breadcrumb {
|
||||
|
|
|
@ -2,18 +2,8 @@
|
|||
<div :class="prefix + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { prefix } from '@/config/global';
|
||||
|
||||
export default defineComponent({
|
||||
name: `${prefix}-footer`,
|
||||
setup() {
|
||||
return {
|
||||
prefix,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -63,8 +63,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, computed, ref } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { defineProps, PropType, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
|
||||
|
@ -76,24 +76,17 @@ import Notice from './Notice.vue';
|
|||
import Search from './Search.vue';
|
||||
import MenuContent from './MenuContent';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
tLogoFull,
|
||||
Notice,
|
||||
Search,
|
||||
MenuContent,
|
||||
},
|
||||
props: {
|
||||
const props = defineProps({
|
||||
theme: {
|
||||
type: String as PropType<string>,
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
layout: {
|
||||
type: String as PropType<string>,
|
||||
type: String,
|
||||
default: 'top',
|
||||
},
|
||||
showLogo: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
menu: {
|
||||
|
@ -101,19 +94,19 @@ export default defineComponent({
|
|||
default: () => [],
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCompact: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maxLevel: {
|
||||
type: Number as PropType<number>,
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
});
|
||||
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
|
||||
|
@ -133,8 +126,6 @@ export default defineComponent({
|
|||
.join('');
|
||||
});
|
||||
|
||||
const showMenu = computed(() => !(props.layout === 'mix' && props.showLogo));
|
||||
|
||||
const layoutCls = computed(() => [`${prefix}-header-layout`]);
|
||||
|
||||
const menuCls = computed(() => {
|
||||
|
@ -149,15 +140,9 @@ export default defineComponent({
|
|||
];
|
||||
});
|
||||
|
||||
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);
|
||||
|
@ -174,24 +159,6 @@ export default defineComponent({
|
|||
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,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import '@/style/variables.less';
|
||||
|
|
|
@ -45,14 +45,12 @@
|
|||
</t-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { NotificationItem } from '@/interface';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const { msgData } = store.state.notification;
|
||||
|
@ -78,14 +76,6 @@ export default defineComponent({
|
|||
const goDetail = () => {
|
||||
router.push('/detail/secondary');
|
||||
};
|
||||
|
||||
return {
|
||||
goDetail,
|
||||
unreadMsg,
|
||||
setRead,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -36,16 +36,13 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, PropType } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from 'vue';
|
||||
|
||||
const layout = defineProps({
|
||||
type: String,
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
layout: {
|
||||
type: String as PropType<string>,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const isSearchFocus = ref(false);
|
||||
const searchData = ref('');
|
||||
const changeSearchFocus = (value: boolean) => {
|
||||
|
@ -54,13 +51,6 @@ export default defineComponent({
|
|||
}
|
||||
isSearchFocus.value = value;
|
||||
};
|
||||
return {
|
||||
isSearchFocus,
|
||||
searchData,
|
||||
changeSearchFocus,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import '@/style/variables.less';
|
||||
|
|
|
@ -90,8 +90,8 @@
|
|||
</div>
|
||||
</t-drawer>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, watch, onMounted } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { ColorPicker } from 'vue-color-kit';
|
||||
import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
|
||||
|
@ -118,10 +118,6 @@ const MODE_OPTIONS = [
|
|||
{ type: 'auto', text: '跟随系统' },
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DefaultLayoutSetting',
|
||||
components: { Thumbnail, ColorContainer, ColorPicker },
|
||||
setup() {
|
||||
const formData = ref({ ...STYLE_CONFIG });
|
||||
const store = useStore();
|
||||
const colors = ref();
|
||||
|
@ -161,10 +157,10 @@ export default defineComponent({
|
|||
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
|
||||
},
|
||||
);
|
||||
|
||||
const changeColor = (val) => {
|
||||
const { hex } = val;
|
||||
const { setting } = store.state;
|
||||
|
||||
// hex 主题色
|
||||
const newPalette = Color.getPaletteByGradation({
|
||||
colors: [hex],
|
||||
|
@ -218,33 +214,17 @@ export default defineComponent({
|
|||
const handleCloseDrawer = () => {
|
||||
store.commit('setting/toggleSettingPanel', false);
|
||||
};
|
||||
return {
|
||||
mode,
|
||||
changeColor,
|
||||
isColoPickerDisplay,
|
||||
onPopupVisibleChange,
|
||||
MODE_OPTIONS,
|
||||
LAYOUT_OPTION,
|
||||
COLOR_OPTIONS,
|
||||
formData,
|
||||
showSettingPanel,
|
||||
handleCopy,
|
||||
getModeIcon,
|
||||
handleCloseDrawer,
|
||||
getThumbnailUrl(name: string): string {
|
||||
|
||||
const getThumbnailUrl = (name: string): string => {
|
||||
return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
|
||||
},
|
||||
};
|
||||
|
||||
watch(
|
||||
() => formData.value,
|
||||
(newVal) => {
|
||||
store.dispatch('setting/changeTheme', newVal);
|
||||
},
|
||||
watch: {
|
||||
formData: {
|
||||
handler(newVal) {
|
||||
this.$store.dispatch('setting/changeTheme', newVal);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
);
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import '@/style/variables';
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<t-row :gutter="[16, 16]">
|
||||
<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-top">
|
||||
<span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
|
||||
|
@ -202,8 +202,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
|
@ -241,13 +241,6 @@ const getThisMonth = (checkedValues?: string[]) => {
|
|||
return `${date.getFullYear()}-${startMonth} 至 ${date2.getFullYear()}-${endMonth}`;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DashboardBase',
|
||||
components: {
|
||||
Card,
|
||||
Trend,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const resizeTime = ref(1);
|
||||
|
||||
|
@ -379,31 +372,19 @@ export default defineComponent({
|
|||
},
|
||||
);
|
||||
|
||||
return {
|
||||
resizeTime,
|
||||
currentMonth,
|
||||
LAST_7_DAYS,
|
||||
PANE_LIST,
|
||||
BUY_TEND_LIST,
|
||||
SALE_TEND_LIST,
|
||||
SALE_COLUMNS,
|
||||
BUY_COLUMNS,
|
||||
onCurrencyChange(checkedValues: string[]) {
|
||||
const onCurrencyChange = (checkedValues: string[]) => {
|
||||
currentMonth.value = getThisMonth(checkedValues);
|
||||
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
|
||||
},
|
||||
onStokeDataChange(checkedValues: string[]) {
|
||||
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
|
||||
},
|
||||
rehandleClickOp(val: MouseEvent) {
|
||||
console.log(val);
|
||||
},
|
||||
getRankClass(index: number) {
|
||||
return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const onStokeDataChange = (checkedValues: string[]) => {
|
||||
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
|
||||
};
|
||||
const rehandleClickOp = (val: MouseEvent) => {
|
||||
console.log(val);
|
||||
};
|
||||
const getRankClass = (index: number) => {
|
||||
return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
|
|
|
@ -57,8 +57,8 @@
|
|||
</card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
|
@ -76,14 +76,6 @@ import Card from '@/components/card/index.vue';
|
|||
|
||||
echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DashboardDetail',
|
||||
components: {
|
||||
Card,
|
||||
Trend,
|
||||
ProductCard,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const chartColors = computed(() => store.state.setting.chartColors);
|
||||
// lineChart logic
|
||||
|
@ -147,20 +139,14 @@ export default defineComponent({
|
|||
},
|
||||
);
|
||||
|
||||
return {
|
||||
LAST_7_DAYS,
|
||||
PRODUCT_LIST,
|
||||
PANE_LIST_DATA,
|
||||
onSatisfyChange() {
|
||||
const onSatisfyChange = () => {
|
||||
scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
|
||||
},
|
||||
onMaterialChange(value: string[]) {
|
||||
};
|
||||
|
||||
const onMaterialChange = (value: string[]) => {
|
||||
const chartColors = computed(() => store.state.setting.chartColors);
|
||||
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('./index.less');
|
||||
|
|
|
@ -109,23 +109,16 @@
|
|||
</t-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
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 { ResDataType } from '@/interface';
|
||||
|
||||
import Card from '@/components/card/index.vue';
|
||||
import Product from './components/Product.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DetailAdvanced',
|
||||
components: {
|
||||
Card,
|
||||
Product,
|
||||
},
|
||||
setup() {
|
||||
const data = ref([]);
|
||||
const pagination = ref({
|
||||
defaultPageSize: 10,
|
||||
|
@ -166,34 +159,21 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
return {
|
||||
BASE_INFO_DATA,
|
||||
prefix,
|
||||
PRODUCT_LIST,
|
||||
columns: TABLE_COLUMNS_DATA,
|
||||
data,
|
||||
pagination,
|
||||
visible,
|
||||
updateCurrent,
|
||||
sortChange(val) {
|
||||
const 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 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>
|
||||
<style lang="less" scoped>
|
||||
@import url('./index.less');
|
||||
|
|
|
@ -26,8 +26,7 @@
|
|||
</card>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import Card from '@/components/card/index.vue';
|
||||
|
||||
const BASE_INFO_DATA = [
|
||||
|
@ -108,16 +107,6 @@ const BASE_INFO_DATA = [
|
|||
type: null,
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListBase',
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
BASE_INFO_DATA,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('./index.less');
|
||||
|
|
|
@ -68,8 +68,8 @@
|
|||
</t-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, onUnmounted, ref, watch, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
|
@ -78,7 +78,7 @@ import { BarChart, LineChart } from 'echarts/charts';
|
|||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
|
||||
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 Card from '@/components/card/index.vue';
|
||||
|
@ -96,10 +96,6 @@ echarts.use([
|
|||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DetailDeploy',
|
||||
components: { Card },
|
||||
setup() {
|
||||
const store = useStore();
|
||||
|
||||
const chartColors = computed(() => store.state.setting.chartColors);
|
||||
|
@ -182,32 +178,22 @@ export default defineComponent({
|
|||
changeChartsTheme([monitorChart, dataChart]);
|
||||
},
|
||||
);
|
||||
return {
|
||||
prefix,
|
||||
BASE_INFO_DATA,
|
||||
columns: TABLE_COLUMNS,
|
||||
data,
|
||||
pagination,
|
||||
visible,
|
||||
sortChange(val) {
|
||||
|
||||
const sortChange = (val) => {
|
||||
console.log(val);
|
||||
},
|
||||
rehandleChange(changeParams, triggerAndData) {
|
||||
console.log('统一Change', changeParams, triggerAndData);
|
||||
},
|
||||
listClick() {
|
||||
visible.value = true;
|
||||
},
|
||||
onConfirm() {
|
||||
visible.value = false;
|
||||
},
|
||||
deleteClickOp(e) {
|
||||
data.value.splice(e.rowIndex, 1);
|
||||
},
|
||||
onAlertChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
const rehandleChange = (changeParams, triggerAndData) => {
|
||||
console.log('统一Change', changeParams, triggerAndData);
|
||||
};
|
||||
const listClick = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
const onConfirm = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
const deleteClickOp = (e) => {
|
||||
data.value.splice(e.rowIndex, 1);
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../base/index.less');
|
||||
|
|
|
@ -49,8 +49,8 @@
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, ComputedRef } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, ComputedRef } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { NOTIFICATION_TYPES } from '@/constants';
|
||||
import { NotificationItem } from '@/interface';
|
||||
|
@ -71,12 +71,6 @@ const TAB_LIST = [
|
|||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DetailSecondary',
|
||||
components: {
|
||||
EmptyIcon,
|
||||
},
|
||||
setup() {
|
||||
const tabValue = ref('msgData');
|
||||
|
||||
const visible = ref(false);
|
||||
|
@ -119,20 +113,6 @@ export default defineComponent({
|
|||
visible.value = false;
|
||||
store.commit('notification/setMsgData', changeMsg);
|
||||
};
|
||||
|
||||
return {
|
||||
TAB_LIST,
|
||||
NOTIFICATION_TYPES,
|
||||
visible,
|
||||
selectedItem,
|
||||
tabValue,
|
||||
msgDataList,
|
||||
handleClickDeleteBtn,
|
||||
setReadStatus,
|
||||
deleteMsg,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('./index.less');
|
||||
|
|
|
@ -154,30 +154,22 @@
|
|||
</div>
|
||||
</t-form>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import { FORM_RULES, INITIAL_DATA, TYPE_OPTIONS, PARTY_A_OPTIONS, PARTY_B_OPTIONS } from './constants';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FormBase',
|
||||
setup() {
|
||||
const formData = ref({ ...INITIAL_DATA });
|
||||
return {
|
||||
TYPE_OPTIONS,
|
||||
PARTY_A_OPTIONS,
|
||||
PARTY_B_OPTIONS,
|
||||
FORM_RULES,
|
||||
formData,
|
||||
onReset() {
|
||||
|
||||
const onReset = () => {
|
||||
MessagePlugin.warning('取消新建');
|
||||
},
|
||||
onSubmit({ validateResult }) {
|
||||
};
|
||||
const onSubmit = ({ validateResult }) => {
|
||||
if (validateResult === true) {
|
||||
MessagePlugin.success('新建成功');
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
};
|
||||
const beforeUpload = (file) => {
|
||||
if (!/\.(pdf)$/.test(file.name)) {
|
||||
MessagePlugin.warning('请上传pdf文件');
|
||||
return false;
|
||||
|
@ -187,17 +179,14 @@ export default defineComponent({
|
|||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
handleFail({ file }) {
|
||||
MessagePlugin.error(`文件 ${file.name} 上传失败`);
|
||||
},
|
||||
// 用于格式化接口响应值,error 会被用于上传失败的提示文字;url 表示文件/图片地址
|
||||
formatResponse(res) {
|
||||
return { ...res, error: '上传失败,请重试', url: res.url };
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const handleFail = ({ file }) => {
|
||||
MessagePlugin.error(`文件 ${file.name} 上传失败`);
|
||||
};
|
||||
// 用于格式化接口响应值,error 会被用于上传失败的提示文字;url 表示文件/图片地址
|
||||
const formatResponse = (res) => {
|
||||
return { ...res, error: '上传失败,请重试', url: res.url };
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('./index.less');
|
||||
|
|
|
@ -139,8 +139,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ValidateResultContext } from 'tdesign-vue-next';
|
||||
import Card from '@/components/card/index.vue';
|
||||
|
@ -155,10 +155,6 @@ import {
|
|||
INITIAL_DATA3,
|
||||
} from './constants';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FormStep',
|
||||
components: { Card },
|
||||
setup() {
|
||||
const formData1 = ref({ ...INITIAL_DATA1 });
|
||||
const formData2 = ref({ ...INITIAL_DATA2 });
|
||||
const formData3 = ref({ ...INITIAL_DATA3 });
|
||||
|
@ -177,31 +173,18 @@ export default defineComponent({
|
|||
return '--';
|
||||
});
|
||||
|
||||
return {
|
||||
NAME_OPTIONS,
|
||||
TYPE_OPTIONS,
|
||||
ADDRESS_OPTIONS,
|
||||
FORM_RULES,
|
||||
formData1,
|
||||
formData2,
|
||||
formData3,
|
||||
activeForm,
|
||||
amount,
|
||||
onSubmit(result: ValidateResultContext<FormData>, val: number) {
|
||||
const onSubmit = (result: ValidateResultContext<FormData>, val: number) => {
|
||||
if (result.validateResult === true) {
|
||||
activeForm.value = val;
|
||||
}
|
||||
},
|
||||
onReset(val: number) {
|
||||
};
|
||||
const onReset = (val: number) => {
|
||||
activeForm.value = val;
|
||||
},
|
||||
complete() {
|
||||
};
|
||||
const complete = () => {
|
||||
const router = useRouter();
|
||||
router.replace({ path: '/detail/advanced' });
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('./index.less');
|
||||
|
|
|
@ -64,8 +64,8 @@
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
|
@ -78,14 +78,6 @@ import request from '@/utils/request';
|
|||
|
||||
import { COLUMNS } from './constants';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListBaseCard',
|
||||
components: {
|
||||
Card,
|
||||
SearchIcon,
|
||||
Trend,
|
||||
},
|
||||
setup() {
|
||||
const data = ref([]);
|
||||
const pagination = ref({
|
||||
defaultPageSize: 20,
|
||||
|
@ -155,44 +147,27 @@ export default defineComponent({
|
|||
resetIdx();
|
||||
};
|
||||
|
||||
return {
|
||||
CONTRACT_STATUS,
|
||||
CONTRACT_TYPES,
|
||||
CONTRACT_PAYMENT_TYPES,
|
||||
COLUMNS,
|
||||
data,
|
||||
searchValue,
|
||||
dataLoading,
|
||||
pagination,
|
||||
confirmBody,
|
||||
confirmVisible,
|
||||
rowKey: 'index',
|
||||
onConfirmDelete,
|
||||
onCancel,
|
||||
selectedRowKeys,
|
||||
rehandleSelectChange(val: number[]) {
|
||||
const rowKey = 'index';
|
||||
|
||||
const rehandleSelectChange = (val: number[]) => {
|
||||
selectedRowKeys.value = val;
|
||||
},
|
||||
rehandlePageChange(curr, pageInfo) {
|
||||
};
|
||||
const rehandlePageChange = (curr, pageInfo) => {
|
||||
console.log('分页变化', curr, pageInfo);
|
||||
},
|
||||
rehandleChange(changeParams, triggerAndData) {
|
||||
};
|
||||
const rehandleChange = (changeParams, triggerAndData) => {
|
||||
console.log('统一Change', changeParams, triggerAndData);
|
||||
},
|
||||
handleClickDetail() {
|
||||
};
|
||||
const handleClickDetail = () => {
|
||||
router.push('/detail/base');
|
||||
},
|
||||
handleSetupContract() {
|
||||
};
|
||||
const handleSetupContract = () => {
|
||||
router.push('/form/base');
|
||||
},
|
||||
handleClickDelete(row: { rowIndex: any }) {
|
||||
};
|
||||
const handleClickDelete = (row: { rowIndex: any }) => {
|
||||
deleteIdx.value = row.rowIndex;
|
||||
confirmVisible.value = true;
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables';
|
||||
|
|
|
@ -58,8 +58,8 @@
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import Card from '@/components/card/Card.vue';
|
||||
|
@ -76,14 +76,6 @@ const INITIAL_DATA = {
|
|||
amount: 0,
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListBase',
|
||||
components: {
|
||||
SearchIcon,
|
||||
Card,
|
||||
DialogForm,
|
||||
},
|
||||
setup() {
|
||||
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
|
||||
const deleteProduct = ref(undefined);
|
||||
|
||||
|
@ -121,43 +113,31 @@ export default defineComponent({
|
|||
const confirmVisible = ref(false);
|
||||
const formData = ref({ ...INITIAL_DATA });
|
||||
|
||||
return {
|
||||
pagination,
|
||||
productList,
|
||||
dataLoading,
|
||||
formDialogVisible,
|
||||
confirmBody,
|
||||
searchValue,
|
||||
confirmVisible,
|
||||
formData,
|
||||
onPageSizeChange(size: number) {
|
||||
const onPageSizeChange = (size: number) => {
|
||||
pagination.value.pageSize = size;
|
||||
pagination.value.current = 1;
|
||||
},
|
||||
onCurrentChange(current: number) {
|
||||
};
|
||||
const onCurrentChange = (current: number) => {
|
||||
pagination.value.current = current;
|
||||
},
|
||||
handleDeleteItem(product) {
|
||||
};
|
||||
const handleDeleteItem = (product) => {
|
||||
confirmVisible.value = true;
|
||||
deleteProduct.value = product;
|
||||
},
|
||||
onConfirmDelete() {
|
||||
};
|
||||
const onConfirmDelete = () => {
|
||||
const { index } = deleteProduct.value;
|
||||
productList.value.splice(index - 1, 1);
|
||||
confirmVisible.value = false;
|
||||
MessagePlugin.success('删除成功');
|
||||
},
|
||||
onCancel() {
|
||||
};
|
||||
const onCancel = () => {
|
||||
deleteProduct.value = undefined;
|
||||
formData.value = { ...INITIAL_DATA };
|
||||
},
|
||||
handleManageProduct(product) {
|
||||
};
|
||||
const handleManageProduct = (product) => {
|
||||
formDialogVisible.value = true;
|
||||
formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
|
|
|
@ -102,8 +102,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import Trend from '@/components/trend/index.vue';
|
||||
import request from '@/utils/request';
|
||||
|
@ -167,18 +167,11 @@ const searchForm = {
|
|||
type: '',
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListTable',
|
||||
components: {
|
||||
Trend,
|
||||
},
|
||||
setup() {
|
||||
const formData = ref({ ...searchForm });
|
||||
const tableConfig = {
|
||||
rowKey: 'index',
|
||||
verticalAlign: 'top',
|
||||
hover: true,
|
||||
};
|
||||
const rowKey = 'index';
|
||||
const verticalAlign = 'top';
|
||||
const hover = true;
|
||||
|
||||
const pagination = ref({
|
||||
defaultPageSize: 20,
|
||||
total: 100,
|
||||
|
@ -238,44 +231,25 @@ export default defineComponent({
|
|||
fetchData();
|
||||
});
|
||||
|
||||
return {
|
||||
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 }) {
|
||||
const handleClickDelete = ({ row }) => {
|
||||
deleteIdx.value = row.rowIndex;
|
||||
confirmVisible.value = true;
|
||||
},
|
||||
onReset(val) {
|
||||
console.log(val);
|
||||
},
|
||||
onSubmit(val) {
|
||||
console.log(val);
|
||||
},
|
||||
rehandlePageChange(curr, pageInfo) {
|
||||
console.log('分页变化', curr, pageInfo);
|
||||
},
|
||||
rehandleChange(changeParams, triggerAndData) {
|
||||
console.log('统一Change', changeParams, triggerAndData);
|
||||
},
|
||||
rehandleClickOp({ text, row }) {
|
||||
console.log(text, row);
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
const onReset = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
const onSubmit = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
const rehandlePageChange = (curr, pageInfo) => {
|
||||
console.log('分页变化', curr, pageInfo);
|
||||
};
|
||||
const rehandleChange = (changeParams, triggerAndData) => {
|
||||
console.log('统一Change', changeParams, triggerAndData);
|
||||
};
|
||||
const rehandleClickOp = ({ text, row }) => {
|
||||
console.log(text, row);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
|
|
@ -1,14 +1,6 @@
|
|||
<template>
|
||||
<common-table />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import CommonTable from '../components/CommonTable.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListBase',
|
||||
components: {
|
||||
CommonTable,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -15,38 +15,24 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { SearchIcon } from 'tdesign-icons-vue-next';
|
||||
import { prefix } from '@/config/global';
|
||||
|
||||
import { TREE_DATA } from './constants';
|
||||
import CommonTable from '../components/CommonTable.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListTree',
|
||||
components: {
|
||||
SearchIcon,
|
||||
CommonTable,
|
||||
},
|
||||
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() {
|
||||
|
||||
const expanded = ['0', '0-0', '0-1', '0-2', '0-3', '0-4'];
|
||||
|
||||
const onInput = () => {
|
||||
filterByText.value = (node) => {
|
||||
const rs = node.label.indexOf(filterText.value) >= 0;
|
||||
return rs;
|
||||
};
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
|
|
|
@ -15,14 +15,10 @@
|
|||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { useStore } from 'vuex';
|
||||
import LogoFullIcon from '@/assets/assets-logo-full.svg?component';
|
||||
|
||||
export default defineComponent({
|
||||
components: { LogoFullIcon },
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const toggleSettingPanel = () => {
|
||||
store.commit('setting/toggleSettingPanel', true);
|
||||
|
@ -35,14 +31,6 @@ export default defineComponent({
|
|||
const navToHelper = () => {
|
||||
window.open('http://tdesign.tencent.com/starter/docs/get-started');
|
||||
};
|
||||
|
||||
return {
|
||||
toggleSettingPanel,
|
||||
navToGitHub,
|
||||
navToHelper,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -70,8 +70,8 @@
|
|||
</t-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
|
@ -93,9 +93,6 @@ const FORM_RULES = {
|
|||
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: { QrcodeVue },
|
||||
setup() {
|
||||
const type = ref('password');
|
||||
|
||||
const formData = ref({ ...INITIAL_DATA });
|
||||
|
@ -124,17 +121,4 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
FORM_RULES,
|
||||
formData,
|
||||
showPsw,
|
||||
type,
|
||||
switchType,
|
||||
countDown,
|
||||
handleCounter,
|
||||
onSubmit,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -70,8 +70,8 @@
|
|||
</t-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { defineEmits, ref } from 'vue';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import { useCounter } from '@/hooks';
|
||||
|
||||
|
@ -93,10 +93,7 @@ const FORM_RULES = {
|
|||
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
setup(props, ctx) {
|
||||
const type = ref('phone');
|
||||
const emailOptions = ref([]);
|
||||
|
||||
const form = ref();
|
||||
const formData = ref({ ...INITIAL_DATA });
|
||||
|
@ -105,6 +102,8 @@ export default defineComponent({
|
|||
|
||||
const [countDown, handleCounter] = useCounter();
|
||||
|
||||
const emit = defineEmits(['registerSuccess']);
|
||||
|
||||
const onSubmit = ({ validateResult }) => {
|
||||
if (validateResult === true) {
|
||||
if (!formData.value.checked) {
|
||||
|
@ -112,7 +111,6 @@ export default defineComponent({
|
|||
return;
|
||||
}
|
||||
MessagePlugin.success('注册成功');
|
||||
const { emit } = ctx;
|
||||
emit('registerSuccess');
|
||||
}
|
||||
};
|
||||
|
@ -121,19 +119,4 @@ export default defineComponent({
|
|||
form.value.reset();
|
||||
type.value = val;
|
||||
};
|
||||
|
||||
return {
|
||||
FORM_RULES,
|
||||
formData,
|
||||
showPsw,
|
||||
form,
|
||||
type,
|
||||
emailOptions,
|
||||
countDown,
|
||||
handleCounter,
|
||||
onSubmit,
|
||||
switchType,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -22,34 +22,18 @@
|
|||
<footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import Login from './components/Login.vue';
|
||||
import Register from './components/Register.vue';
|
||||
import LoginHeader from './components/Header.vue';
|
||||
import TdesignSetting from '@/layouts/setting.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LoginIndex',
|
||||
components: {
|
||||
Login,
|
||||
Register,
|
||||
LoginHeader,
|
||||
TdesignSetting,
|
||||
},
|
||||
setup() {
|
||||
const type = ref('login');
|
||||
const switchType = (val: string) => {
|
||||
type.value = val;
|
||||
};
|
||||
|
||||
return {
|
||||
type,
|
||||
switchType,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import url('./index.less');
|
||||
|
|
|
@ -4,12 +4,6 @@
|
|||
</result>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Result403',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -4,12 +4,6 @@
|
|||
</result>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Result404',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -4,12 +4,6 @@
|
|||
</result>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Result500',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -19,15 +19,9 @@
|
|||
</result>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import Result from '@/components/result/index.vue';
|
||||
import Thumbnail from '@/components/thumbnail/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultBrowserIncompatible',
|
||||
components: { Result, Thumbnail },
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
|
|
|
@ -10,14 +10,6 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultSuccess',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
|
||||
|
|
|
@ -7,12 +7,6 @@
|
|||
</result>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import Result from '@/components/result/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultNetworkError',
|
||||
components: { Result },
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -10,14 +10,6 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultSuccess',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '@/style/variables.less';
|
||||
|
||||
|
|
|
@ -89,8 +89,8 @@
|
|||
</t-col>
|
||||
</t-row>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
|
||||
|
@ -109,11 +109,6 @@ import Card from '@/components/card/index.vue';
|
|||
|
||||
echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
setup() {
|
||||
let lineContainer: HTMLElement;
|
||||
let lineChart: echarts.ECharts;
|
||||
const store = useStore();
|
||||
|
@ -176,17 +171,6 @@ export default defineComponent({
|
|||
changeChartsTheme([lineChart]);
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
LAST_7_DAYS,
|
||||
USER_INFO_LIST,
|
||||
TEAM_MEMBERS,
|
||||
PRODUCT_LIST,
|
||||
onLineChange,
|
||||
getIcon,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('./index.less');
|
||||
|
|
Loading…
Reference in New Issue
Block a user