tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: prettier & lint

Browse Source 
Former-commit-id: 486f65e137348f400d7b95067bd3cd5a2f23ff44
This commit is contained in:
Jachin
2023-08-04 17:50:25 +08:00
parent a240ff04d2
commit f797606c44
72 changed files with 1234 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/dashboard/components/BarChart.vue
View File

@@ -5,15 +5,12 @@
<div class="title">
业绩柱状图
<el-tooltip effect="dark" content="点击试试下载" placement="bottom">
<i-ep-download
class="download"
@click="downloadEchart"
></i-ep-download>
<i-ep-download class="download" @click="downloadEchart" />
</el-tooltip>
</div>
</template>
<div :id="id" :class="className" :style="{ height, width }" />
<div :id="id" :class="className" :style="{ height, width }"></div>
</el-card>
</template>

86
src/views/dashboard/components/FunnelChart.vue
View File

@@ -1,96 +1,96 @@
<!-- 漏斗图 -->
<template>
<div :id="id" :class="className" :style="{ height, width }" />
<div :id="id" :class="className" :style="{ height, width }"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import * as echarts from "echarts";
const props = defineProps({
id: {
type: String,
default: 'funnelChart'
default: "funnelChart",
},
className: {
type: String,
default: ''
default: "",
},
width: {
type: String,
default: '200px',
required: true
default: "200px",
required: true,
},
height: {
type: String,
default: '200px',
required: true
}
default: "200px",
required: true,
},
});
const options = {
title: {
show: true,
text: '订单线索转化漏斗图',
x: 'center',
text: "订单线索转化漏斗图",
x: "center",
padding: 15,
textStyle: {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color: '#337ecc'
}
fontStyle: "normal",
fontWeight: "bold",
color: "#337ecc",
},
},
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
left: "2%",
right: "2%",
bottom: "10%",
containLabel: true,
},
legend: {
x: 'center',
y: 'bottom',
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
x: "center",
y: "bottom",
data: ["Show", "Click", "Visit", "Inquiry", "Order"],
},
series: [
{
name: 'Funnel',
type: 'funnel',
left: '20%',
name: "Funnel",
type: "funnel",
left: "20%",
top: 60,
bottom: 60,
width: '60%',
sort: 'descending',
width: "60%",
sort: "descending",
gap: 2,
label: {
show: true,
position: 'inside'
position: "inside",
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
type: "solid",
},
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
borderColor: "#fff",
borderWidth: 1,
},
emphasis: {
label: {
fontSize: 20
}
fontSize: 20,
},
},
data: [
{ value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order' },
{ value: 80, name: 'Click' },
{ value: 100, name: 'Show' }
]
}
]
{ value: 60, name: "Visit" },
{ value: 40, name: "Inquiry" },
{ value: 20, name: "Order" },
{ value: 80, name: "Click" },
{ value: 100, name: "Show" },
],
},
],
};
onMounted(() => {
@@ -99,7 +99,7 @@ onMounted(() => {
);
chart.setOption(options);
window.addEventListener('resize', () => {
window.addEventListener("resize", () => {
chart.resize();
});
});

60
src/views/dashboard/components/PieChart.vue
View File

@@ -2,69 +2,69 @@
<template>
<el-card>
<template #header> 产品分类饼图 </template>
<div :id="id" :class="className" :style="{ height, width }" />
<div :id="id" :class="className" :style="{ height, width }"></div>
</el-card>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import * as echarts from "echarts";
const props = defineProps({
id: {
type: String,
default: 'pieChart'
default: "pieChart",
},
className: {
type: String,
default: ''
default: "",
},
width: {
type: String,
default: '200px',
required: true
default: "200px",
required: true,
},
height: {
type: String,
default: '200px',
required: true
}
default: "200px",
required: true,
},
});
const options = {
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
left: "2%",
right: "2%",
bottom: "10%",
containLabel: true,
},
legend: {
top: 'bottom',
top: "bottom",
textStyle: {
color: '#999'
}
color: "#999",
},
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
name: "Nightingale Chart",
type: "pie",
radius: [50, 130],
center: ['50%', '50%'],
roseType: 'area',
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 1,
color: function (params: any) {
//自定义颜色
const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
return colorList[params.dataIndex];
}
},
},
data: [
{ value: 26, name: '家用电器' },
{ value: 27, name: '户外运动' },
{ value: 24, name: '汽车用品' },
{ value: 23, name: '手机数码' }
]
}
]
{ value: 26, name: "家用电器" },
{ value: 27, name: "户外运动" },
{ value: 24, name: "汽车用品" },
{ value: 23, name: "手机数码" },
],
},
],
};
onMounted(() => {
@@ -72,7 +72,7 @@ onMounted(() => {
document.getElementById(props.id) as HTMLDivElement
);
chart.setOption(options);
window.addEventListener('resize', () => {
window.addEventListener("resize", () => {
chart.resize();
});
});

76
src/views/dashboard/components/RadarChart.vue
View File

@@ -2,89 +2,89 @@
<template>
<el-card>
<template #header> 订单状态雷达图 </template>
<div :id="id" :class="className" :style="{ height, width }" />
<div :id="id" :class="className" :style="{ height, width }"></div>
</el-card>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import * as echarts from "echarts";
const props = defineProps({
id: {
type: String,
default: 'radarChart'
default: "radarChart",
},
className: {
type: String,
default: ''
default: "",
},
width: {
type: String,
default: '200px',
required: true
default: "200px",
required: true,
},
height: {
type: String,
default: '200px',
required: true
}
default: "200px",
required: true,
},
});
const options = {
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
left: "2%",
right: "2%",
bottom: "10%",
containLabel: true,
},
legend: {
x: 'center',
y: 'bottom',
data: ['预定数量', '下单数量', '发货数量'],
x: "center",
y: "bottom",
data: ["预定数量", "下单数量", "发货数量"],
textStyle: {
color: '#999'
}
color: "#999",
},
},
radar: {
// shape: 'circle',
radius: '60%',
radius: "60%",
indicator: [
{ name: '家用电器' },
{ name: '服装箱包' },
{ name: '运动户外' },
{ name: '手机数码' },
{ name: '汽车用品' },
{ name: '家具厨具' }
]
{ name: "家用电器" },
{ name: "服装箱包" },
{ name: "运动户外" },
{ name: "手机数码" },
{ name: "汽车用品" },
{ name: "家具厨具" },
],
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
name: "Budget vs spending",
type: "radar",
itemStyle: {
borderRadius: 6,
color: function (params: any) {
//自定义颜色
const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
return colorList[params.dataIndex];
}
},
},
data: [
{
value: [400, 400, 400, 400, 400, 400],
name: '预定数量'
name: "预定数量",
},
{
value: [300, 300, 300, 300, 300, 300],
name: '下单数量'
name: "下单数量",
},
{
value: [200, 200, 200, 200, 200, 200],
name: '发货数量'
}
]
}
]
name: "发货数量",
},
],
},
],
};
onMounted(() => {
@@ -93,7 +93,7 @@ onMounted(() => {
);
chart.setOption(options);
window.addEventListener('resize', () => {
window.addEventListener("resize", () => {
chart.resize();
});
});

6
src/views/dashboard/index.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
defineOptions({
// eslint-disable-next-line vue/no-reserved-component-names
name: "Dashboard",
inheritAttrs: false,
});
import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
const userStore = useUserStore();
const date: Date = new Date();

27
src/views/demo/google.vue Normal file
View File

@@ -0,0 +1,27 @@
<!-- 接口文档 -->
<template>
<div class="app-container">
<iframe
src="https://creator.xiaohongshu.com/"
width="100%"
height="100%"
frameborder="0"
></iframe>
</div>
</template>
<style lang="scss" scoped>
.app-container {
display: flex;
flex-direction: column;
/* 84 = navbar + tags-view = 50 + 34 */
height: calc(100vh - 50px);
}
.hasTagsView {
.app-container {
height: calc(100vh - 84px);
}
}
</style>

8
src/views/demo/table.vue
View File

@@ -15,8 +15,8 @@
<div class="label-wrap" @click="handleClickHead(oneCol)">
<div>{{ oneCol.label }}</div>
<template v-if="oneCol.order">
<i-ep-sort-up v-if="oneCol.order === 'asc'"></i-ep-sort-up>
<i-ep-sort-down v-else></i-ep-sort-down>
<i-ep-sort-up v-if="oneCol.order === 'asc'" />
<i-ep-sort-down v-else />
</template>
</div>
@@ -24,7 +24,7 @@
trigger="click"
@command="(command: string) => handleCommand(command, oneCol)"
>
<i-ep-arrow-down class="action-more"></i-ep-arrow-down>
<i-ep-arrow-down class="action-more" />
<template #dropdown>
<el-dropdown-menu>
<template v-if="oneCol.prop === 'id'">
@@ -56,7 +56,7 @@
action=""
:http-request="handleUploadFile"
>
<i-ep-upload-filled class="icon"></i-ep-upload-filled>
<i-ep-upload-filled class="icon" />
<div class="el-upload__text">拖拽excel到这里</div>
</el-upload>
<div v-loading="loading" class="excel-table-wrap">

1
src/views/demo/wang-editor.vue
View File

@@ -1,6 +1,7 @@
<!-- wangEditor富文本编辑器示例 -->
<script setup lang="ts">
import Editor from "@/components/WangEditor/index.vue";
const value = ref("初始内容");
</script>

12
src/views/demo/websocket.vue
View File

@@ -1,18 +1,18 @@
<!-- websocket 示例 -->
<script setup lang="ts">
import { sendToAll, sendToUser } from "@/api/websocket";
import { sendToAll, sendToUser } from "@/api/websocket"; // 点对点消息列表
import { useUserStore } from "@/store/modules/user";
import { useWebSocket } from "@vueuse/core";
const inputVal = ref("初始内容");
const topicMsgs = ref<string[]>(["接收到一条主题消息"]); // 主题消息列表
const p2pMsgs = ref<string[]>(["接收到一条点对线消息"]); // 点对点消息列表
import { useUserStore } from "@/store/modules/user";
const p2pMsgs = ref<string[]>(["接收到一条点对线消息"]);
const userId = useUserStore().userId;
import { useWebSocket } from "@vueuse/core";
const { data, status, close, send, open } = useWebSocket(
"ws://localhost:8989/ws",
{

13
src/views/error-page/401.vue
View File

@@ -1,14 +1,13 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: "Page401",
};
</script>
<script setup lang="ts">
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { defineComponent } from "vue";
defineComponent({
name: "Page401",
});
const state = reactive({
errGif: new URL(`../../assets/401_images/401.gif`, import.meta.url).href,

27
src/views/permission/components/SwitchRoles.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div>
<div style="margin-bottom: 15px">Your roles: {{ roles }}</div>
Switch roles:
<el-radio-group v-model="switchRoles">
<el-radio-button label="EDITOR" />
<el-radio-button label="ADMIN" />
</el-radio-group>
</div>
</template>
<script setup lang="ts">
import { useUserStoreHook } from "@/store/modules/user";
import { storeToRefs } from "pinia";
const emit = defineEmits(["change"]);
const store = storeToRefs(useUserStoreHook());
const { roles } = store;
const switchRoles = computed({
get: () => roles.value[0],
set: (val) => {
roles.value = [val];
emit("change");
},
});
</script>

21
src/views/permission/page.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="app-container">
<switch-roles @change="handleRolesChange" />
</div>
</template>
<script setup lang="ts">
import router from "@/router";
import SwitchRoles from "./components/SwitchRoles.vue";
defineOptions({
// eslint-disable-next-line
name: "PagePermission",
inheritAttrs: false,
});
function handleRolesChange() {
console.log("roles changed");
router.push({ path: "/permission/page?" + new Date() });
}
</script>

6
src/views/redirect/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<div />
<div></div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
@@ -11,5 +11,5 @@ const router = useRouter();
const { params, query } = route;
const { path } = params;
router.replace({ path: '/' + path, query });
router.replace({ path: "/" + path, query });
</script>

10
src/views/system/dept/index.vue
View File

@@ -1,9 +1,4 @@
<script setup lang="ts">
defineOptions({
name: "Dept",
inheritAttrs: false,
});
import {
getDeptForm,
deleteDept,
@@ -15,6 +10,11 @@ import {
import { DeptVO, DeptForm, DeptQuery } from "@/api/dept/types";
defineOptions({
name: "Dept",
inheritAttrs: false,
});
const queryFormRef = ref(ElForm);
const deptFormRef = ref(ElForm);

12
src/views/system/dict/DictData.vue
View File

@@ -1,10 +1,5 @@
<!-- 字典数据 -->
<script setup lang="ts">
defineOptions({
name: "DictData",
inheritAttrs: false,
});
import {
getDictPage,
getDictFormData,
@@ -14,6 +9,11 @@ import {
} from "@/api/dict";
import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
defineOptions({
name: "DictData",
inheritAttrs: false,
});
const props = defineProps({
typeCode: {
type: String,
@@ -311,7 +311,7 @@ onMounted(() => {
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea"></el-input>
<el-input v-model="formData.remark" type="textarea" />
</el-form-item>
</el-form>
<template #footer>

10
src/views/system/dict/index.vue
View File

@@ -1,10 +1,5 @@
<!--字典类型-->
<script setup lang="ts">
defineOptions({
name: "DictType",
inheritAttrs: false,
});
import {
getDictTypePage,
getDictTypeForm,
@@ -17,6 +12,11 @@ import DictData from "@/views/system/dict/DictData.vue";
import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "@/api/dict/types";
defineOptions({
name: "DictType",
inheritAttrs: false,
});
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

12
src/views/system/menu/index.vue
View File

@@ -1,10 +1,4 @@
<script setup lang="ts">
defineOptions({
// eslint-disable-next-line vue/no-reserved-component-names
name: "Menu",
inheritAttrs: false,
});
import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types";
import {
listMenus,
@@ -20,6 +14,12 @@ import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
import SvgIcon from "@/components/SvgIcon/index.vue";
import IconSelect from "@/components/IconSelect/index.vue";
defineOptions({
// eslint-disable-next-line vue/no-reserved-component-names
name: "Menu",
inheritAttrs: false,
});
const queryFormRef = ref(ElForm);
const menuFormRef = ref(ElForm);

10
src/views/system/role/index.vue
View File

@@ -1,9 +1,4 @@
<script setup lang="ts">
defineOptions({
name: "Role",
inheritAttrs: false,
});
import {
getRolePage,
updateRole,
@@ -17,6 +12,11 @@ import { listMenuOptions } from "@/api/menu";
import { RolePageVO, RoleForm, RoleQuery } from "@/api/role/types";
defineOptions({
name: "Role",
inheritAttrs: false,
});
const queryFormRef = ref(ElForm);
const roleFormRef = ref(ElForm);
const menuRef = ref(ElTree);

13
src/views/system/user/index.vue
View File

@@ -2,10 +2,6 @@
/**
* @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
*/
defineOptions({
name: "User",
inheritAttrs: false,
});
import { UploadFile } from "element-plus";
import {
getUserPage,
@@ -24,6 +20,11 @@ import { listRoleOptions } from "@/api/role";
import { UserForm, UserQuery, UserPageVO } from "@/api/user/types";
defineOptions({
name: "User",
inheritAttrs: false,
});
const deptTreeRef = ref(ElTree); // 部门树
const queryFormRef = ref(ElForm); // 查询表单
const userFormRef = ref(ElForm); // 用户表单
@@ -383,7 +384,7 @@ onMounted(() => {
:filter-node-method="handleDeptFilter"
default-expand-all
@node-click="handleDeptNodeClick"
></el-tree>
/>
</el-card>
</el-col>
@@ -524,7 +525,7 @@ onMounted(() => {
align="center"
prop="createTime"
width="180"
></el-table-column>
/>
<el-table-column label="操作" fixed="right" width="220">
<template #default="scope">
<el-button