import ts
parent
039c9c3da4
commit
20311d02df
|
@ -19,9 +19,10 @@
|
||||||
"wangeditor": "^4.7.4"
|
"wangeditor": "^4.7.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vite": "2.3.7",
|
"@types/vue-router": "^2.0.0",
|
||||||
"@vitejs/plugin-vue": "^1.2.3",
|
"@vitejs/plugin-vue": "^1.2.3",
|
||||||
"@vue/compiler-sfc": "^3.1.2"
|
"@vue/compiler-sfc": "^3.1.2",
|
||||||
|
"vite": "2.3.7"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"> 1%",
|
"> 1%",
|
||||||
|
|
|
@ -2,8 +2,11 @@
|
||||||
<router-view />
|
<router-view />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {};
|
import {defineComponent} from 'vue'
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'App'
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { computed, onMounted } from "vue";
|
import { computed, onMounted } from "vue";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { computed, watch } from "vue";
|
import { computed, watch } from "vue";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
|
|
|
@ -25,15 +25,17 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
|
import { onBeforeRouteUpdate, useRoute, useRouter, } from "vue-router";
|
||||||
|
import { tabItem } from "../types/tab";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const isActive = (path) => {
|
const isActive = (path: string) => {
|
||||||
return path === route.fullPath;
|
return path === route.fullPath;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -42,7 +44,7 @@ export default {
|
||||||
const showTags = computed(() => tagsList.value.length > 0);
|
const showTags = computed(() => tagsList.value.length > 0);
|
||||||
|
|
||||||
// 关闭单个标签
|
// 关闭单个标签
|
||||||
const closeTags = (index) => {
|
const closeTags = (index: number) => {
|
||||||
const delItem = tagsList.value[index];
|
const delItem = tagsList.value[index];
|
||||||
store.commit("delTagsItem", { index });
|
store.commit("delTagsItem", { index });
|
||||||
const item = tagsList.value[index]
|
const item = tagsList.value[index]
|
||||||
|
@ -57,7 +59,7 @@ export default {
|
||||||
|
|
||||||
// 设置标签
|
// 设置标签
|
||||||
const setTags = (route) => {
|
const setTags = (route) => {
|
||||||
const isExist = tagsList.value.some((item) => {
|
const isExist = tagsList.value.some((item: tabItem): boolean => {
|
||||||
return item.path === route.fullPath;
|
return item.path === route.fullPath;
|
||||||
});
|
});
|
||||||
if (!isExist) {
|
if (!isExist) {
|
||||||
|
@ -68,7 +70,7 @@ export default {
|
||||||
name: route.name,
|
name: route.name,
|
||||||
title: route.meta.title,
|
title: route.meta.title,
|
||||||
path: route.fullPath,
|
path: route.fullPath,
|
||||||
});
|
} as tabItem);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
setTags(route);
|
setTags(route);
|
||||||
|
@ -88,7 +90,7 @@ export default {
|
||||||
});
|
});
|
||||||
store.commit("closeTagsOther", curItem);
|
store.commit("closeTagsOther", curItem);
|
||||||
};
|
};
|
||||||
const handleTags = (command) => {
|
const handleTags = (command: string) => {
|
||||||
command === "other" ? closeOther() : closeAll();
|
command === "other" ? closeOther() : closeAll();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
export interface tabItem {
|
||||||
|
name: string,
|
||||||
|
title: string,
|
||||||
|
path: string
|
||||||
|
}
|
|
@ -11,20 +11,21 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
export default {
|
import {defineComponent} from 'vue'
|
||||||
|
export default defineComponent({
|
||||||
name: "404",
|
name: "404",
|
||||||
setup() {
|
setup() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const goBack = () => {
|
const goBack = (): void => {
|
||||||
router.go(-1);
|
router.go(-1);
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
goBack,
|
goBack,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
export default {
|
export default {
|
||||||
name: "404",
|
name: "404",
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import Schart from "vue-schart";
|
import Schart from "vue-schart";
|
||||||
export default {
|
export default {
|
||||||
name: "basecharts",
|
name: "basecharts",
|
||||||
|
|
|
@ -69,7 +69,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { reactive, ref } from "vue";
|
import { reactive, ref } from "vue";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
export default {
|
export default {
|
||||||
|
@ -132,7 +132,7 @@ export default {
|
||||||
{ required: true, message: "请输入表单名称", trigger: "blur" },
|
{ required: true, message: "请输入表单名称", trigger: "blur" },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
const formRef = ref(null);
|
const formRef = ref<HTMLFormElement>();
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
name: "",
|
name: "",
|
||||||
region: "",
|
region: "",
|
||||||
|
@ -145,11 +145,10 @@ export default {
|
||||||
options: [],
|
options: [],
|
||||||
});
|
});
|
||||||
// 提交
|
// 提交
|
||||||
const onSubmit = () => {
|
const onSubmit = (): void | boolean => {
|
||||||
// 表单校验
|
// 表单校验
|
||||||
formRef.value.validate((valid) => {
|
formRef.value?.validate((valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
console.log(form);
|
|
||||||
ElMessage.success("提交成功!");
|
ElMessage.success("提交成功!");
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false;
|
||||||
|
@ -158,7 +157,7 @@ export default {
|
||||||
};
|
};
|
||||||
// 重置
|
// 重置
|
||||||
const onReset = () => {
|
const onReset = () => {
|
||||||
formRef.value.resetFields();
|
formRef.value?.resetFields();
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -77,30 +77,54 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { ref, reactive } from "vue";
|
import { ref, reactive, onMounted } from "vue";
|
||||||
import { ElMessage, ElMessageBox } from "element-plus";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
import { fetchData } from "../api/index";
|
import { fetchData } from "../api/index";
|
||||||
|
import {AxiosResponse} from 'axios'
|
||||||
|
|
||||||
|
interface SearchParam {
|
||||||
|
address: string,
|
||||||
|
name: string,
|
||||||
|
pageIndex: number,
|
||||||
|
pageSize: number
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @todo 提取为统一response
|
||||||
|
*/
|
||||||
|
interface responseType {
|
||||||
|
list: [],
|
||||||
|
pageTotal: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface formObj {
|
||||||
|
name: string,
|
||||||
|
address: string
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "basetable",
|
name: "basetable",
|
||||||
setup() {
|
setup() {
|
||||||
const query = reactive({
|
const query = reactive<SearchParam>({
|
||||||
address: "",
|
address: "",
|
||||||
name: "",
|
name: "",
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
});
|
});
|
||||||
const tableData = ref([]);
|
const tableData = ref([]);
|
||||||
const pageTotal = ref(0);
|
const pageTotal = ref<number>(0);
|
||||||
// 获取表格数据
|
// 获取表格数据
|
||||||
const getData = () => {
|
const getData = () => {
|
||||||
fetchData(query).then((res) => {
|
fetchData(query).then((res: responseType) => {
|
||||||
tableData.value = res.list;
|
tableData.value = res.list;
|
||||||
pageTotal.value = res.pageTotal || 50;
|
pageTotal.value = res.pageTotal || 50;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
getData();
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
})
|
||||||
|
|
||||||
// 查询操作
|
// 查询操作
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
|
@ -108,13 +132,13 @@ export default {
|
||||||
getData();
|
getData();
|
||||||
};
|
};
|
||||||
// 分页导航
|
// 分页导航
|
||||||
const handlePageChange = (val) => {
|
const handlePageChange = (val: number) => {
|
||||||
query.pageIndex = val;
|
query.pageIndex = val;
|
||||||
getData();
|
getData();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 删除操作
|
// 删除操作
|
||||||
const handleDelete = (index) => {
|
const handleDelete = (index: number) => {
|
||||||
// 二次确认删除
|
// 二次确认删除
|
||||||
ElMessageBox.confirm("确定要删除吗?", "提示", {
|
ElMessageBox.confirm("确定要删除吗?", "提示", {
|
||||||
type: "warning",
|
type: "warning",
|
||||||
|
@ -128,16 +152,14 @@ export default {
|
||||||
|
|
||||||
// 表格编辑时弹窗和保存
|
// 表格编辑时弹窗和保存
|
||||||
const editVisible = ref(false);
|
const editVisible = ref(false);
|
||||||
let form = reactive({
|
let form = reactive<formObj>({
|
||||||
name: "",
|
name: "",
|
||||||
address: "",
|
address: "",
|
||||||
});
|
});
|
||||||
let idx = -1;
|
let idx = -1;
|
||||||
const handleEdit = (index, row) => {
|
const handleEdit = (index: number, row: formObj) => {
|
||||||
idx = index;
|
idx = index;
|
||||||
Object.keys(form).forEach((item) => {
|
form = Object.assign({}, row);
|
||||||
form[item] = row[item];
|
|
||||||
});
|
|
||||||
editVisible.value = true;
|
editVisible.value = true;
|
||||||
};
|
};
|
||||||
const saveEdit = () => {
|
const saveEdit = () => {
|
||||||
|
|
|
@ -114,7 +114,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import Schart from "vue-schart";
|
import Schart from "vue-schart";
|
||||||
import { reactive } from "vue";
|
import { reactive } from "vue";
|
||||||
export default {
|
export default {
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "donate"
|
name: "donate"
|
||||||
};
|
};
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import WangEditor from "wangEditor";
|
import WangEditor from "wangEditor";
|
||||||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||||||
export default {
|
export default {
|
||||||
|
|
|
@ -17,13 +17,16 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { computed } from "vue";
|
import { defineComponent, computed } from "vue";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import vHeader from "../components/Header.vue";
|
import vHeader from "../components/Header.vue";
|
||||||
import vSidebar from "../components/Sidebar.vue";
|
import vSidebar from "../components/Sidebar.vue";
|
||||||
import vTags from "../components/Tags.vue";
|
import vTags from "../components/Tags.vue";
|
||||||
export default {
|
|
||||||
|
import { tabItem } from "../types/tab";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
vHeader,
|
vHeader,
|
||||||
vSidebar,
|
vSidebar,
|
||||||
|
@ -32,7 +35,7 @@ export default {
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const tagsList = computed(() =>
|
const tagsList = computed(() =>
|
||||||
store.state.tagsList.map((item) => item.name)
|
store.state.tagsList.map((item: tabItem) => item.name)
|
||||||
);
|
);
|
||||||
const collapse = computed(() => store.state.collapse);
|
const collapse = computed(() => store.state.collapse);
|
||||||
return {
|
return {
|
||||||
|
@ -40,5 +43,5 @@ export default {
|
||||||
collapse,
|
collapse,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "i18n"
|
name: "i18n"
|
||||||
};
|
};
|
||||||
|
|
|
@ -39,9 +39,9 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { computed, ref } from "vue";
|
import { defineComponent, computed, ref } from "vue";
|
||||||
export default {
|
export default defineComponent({
|
||||||
name: "icon",
|
name: "icon",
|
||||||
setup() {
|
setup() {
|
||||||
const iconList = [
|
const iconList = [
|
||||||
|
@ -171,7 +171,7 @@ export default {
|
||||||
"search",
|
"search",
|
||||||
"edit",
|
"edit",
|
||||||
];
|
];
|
||||||
const keyword = ref("");
|
const keyword = ref<string>("");
|
||||||
const list = computed(() => {
|
const list = computed(() => {
|
||||||
return iconList.filter((item) => {
|
return iconList.filter((item) => {
|
||||||
return item.indexOf(keyword.value) !== -1;
|
return item.indexOf(keyword.value) !== -1;
|
||||||
|
@ -184,7 +184,7 @@ export default {
|
||||||
list,
|
list,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -27,16 +27,20 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { ref, reactive } from "vue";
|
import { defineComponent, ref, reactive } from "vue";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
export default {
|
interface LoginParam {
|
||||||
|
username: string,
|
||||||
|
password: string | number
|
||||||
|
}
|
||||||
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const param = reactive({
|
const param = reactive<LoginParam>({
|
||||||
username: "admin",
|
username: "admin",
|
||||||
password: "123123",
|
password: "123123",
|
||||||
});
|
});
|
||||||
|
@ -53,9 +57,9 @@ export default {
|
||||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
const login = ref(null);
|
const login = ref<HTMLFormElement>();
|
||||||
const submitForm = () => {
|
const submitForm = () => {
|
||||||
login.value.validate((valid) => {
|
login.value?.validate((valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
ElMessage.success("登录成功");
|
ElMessage.success("登录成功");
|
||||||
localStorage.setItem("ms_username", param.username);
|
localStorage.setItem("ms_username", param.username);
|
||||||
|
@ -77,7 +81,7 @@ export default {
|
||||||
submitForm,
|
submitForm,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "permission"
|
name: "permission"
|
||||||
};
|
};
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { ref, reactive } from "vue";
|
import { ref, reactive } from "vue";
|
||||||
export default {
|
export default {
|
||||||
name: "tabs",
|
name: "tabs",
|
||||||
|
@ -101,16 +101,16 @@ export default {
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleRead = (index) => {
|
const handleRead = (index: number) => {
|
||||||
const item = state.unread.splice(index, 1);
|
const item = state.unread.splice(index, 1);
|
||||||
console.log(item);
|
console.log(item);
|
||||||
state.read = item.concat(state.read);
|
state.read = item.concat(state.read);
|
||||||
};
|
};
|
||||||
const handleDel = (index) => {
|
const handleDel = (index: number) => {
|
||||||
const item = state.read.splice(index, 1);
|
const item = state.read.splice(index, 1);
|
||||||
state.recycle = item.concat(state.recycle);
|
state.recycle = item.concat(state.recycle);
|
||||||
};
|
};
|
||||||
const handleRestore = (index) => {
|
const handleRestore = (index: number) => {
|
||||||
const item = state.recycle.splice(index, 1);
|
const item = state.recycle.splice(index, 1);
|
||||||
state.read = item.concat(state.read);
|
state.read = item.concat(state.read);
|
||||||
};
|
};
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import VueCropper from "vue-cropperjs";
|
import VueCropper from "vue-cropperjs";
|
||||||
import "cropperjs/dist/cropper.css";
|
import "cropperjs/dist/cropper.css";
|
||||||
|
@ -47,21 +47,21 @@ export default {
|
||||||
VueCropper,
|
VueCropper,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const imgSrc = ref("");
|
const imgSrc = ref<string>("");
|
||||||
const cropImg = ref(defaultSrc);
|
const cropImg = ref(defaultSrc);
|
||||||
const dialogVisible = ref(false);
|
const dialogVisible = ref<boolean>(false);
|
||||||
const cropper = ref(null);
|
const cropper = ref(null);
|
||||||
|
|
||||||
const setImage = (e) => {
|
const setImage = (e) => {
|
||||||
const file = e.target.files[0];
|
const file = e.target?.files[0];
|
||||||
if (!file.type.includes("image/")) {
|
if (!file.type.includes("image/")) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = (event) => {
|
reader.onload = (event) => {
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
imgSrc.value = event.target.result;
|
imgSrc.value = event.target?.result as string;
|
||||||
cropper.value && cropper.value.replace(event.target.result);
|
cropper.value && cropper.value.replace(event.target?.result);
|
||||||
};
|
};
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
};
|
};
|
||||||
|
|
|
@ -61,19 +61,25 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { reactive, ref } from "vue";
|
import { defineComponent, reactive, ref } from "vue";
|
||||||
import VueCropper from "vue-cropperjs";
|
import VueCropper from "vue-cropperjs";
|
||||||
import "cropperjs/dist/cropper.css";
|
import "cropperjs/dist/cropper.css";
|
||||||
import avatar from "../assets/img/img.jpg";
|
import avatar from "../assets/img/img.jpg";
|
||||||
export default {
|
|
||||||
|
interface formData {
|
||||||
|
old: string,
|
||||||
|
new: string,
|
||||||
|
desc: string
|
||||||
|
}
|
||||||
|
export default defineComponent({
|
||||||
name: "user",
|
name: "user",
|
||||||
components: {
|
components: {
|
||||||
VueCropper,
|
VueCropper,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const name = localStorage.getItem("ms_username");
|
const name = localStorage.getItem("ms_username");
|
||||||
const form = reactive({
|
const form = reactive<formData>({
|
||||||
old: "",
|
old: "",
|
||||||
new: "",
|
new: "",
|
||||||
desc: "不可能!我的代码怎么可能会有bug!",
|
desc: "不可能!我的代码怎么可能会有bug!",
|
||||||
|
@ -84,7 +90,7 @@ export default {
|
||||||
const imgSrc = ref("");
|
const imgSrc = ref("");
|
||||||
const cropImg = ref("");
|
const cropImg = ref("");
|
||||||
const dialogVisible = ref(false);
|
const dialogVisible = ref(false);
|
||||||
const cropper = ref(null);
|
const cropper = ref();
|
||||||
|
|
||||||
const showDialog = () => {
|
const showDialog = () => {
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
|
@ -92,15 +98,15 @@ export default {
|
||||||
};
|
};
|
||||||
|
|
||||||
const setImage = (e) => {
|
const setImage = (e) => {
|
||||||
const file = e.target.files[0];
|
const file = e.target!.files[0];
|
||||||
if (!file.type.includes("image/")) {
|
if (!file.type.includes("image/")) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = (event) => {
|
reader.onload = (event) => {
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
imgSrc.value = event.target.result;
|
imgSrc.value = event.target?.result as string;
|
||||||
cropper.value && cropper.value.replace(event.target.result);
|
cropper.value && cropper.value.replace(event.target?.result as string);
|
||||||
};
|
};
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
};
|
};
|
||||||
|
@ -129,7 +135,7 @@ export default {
|
||||||
saveAvatar,
|
saveAvatar,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "esnext",
|
||||||
|
"module": "esnext",
|
||||||
|
// 这样就可以对 `this` 上的数据属性进行更严格的推断`
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,9 +1,10 @@
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import {defineConfig} from 'vite'
|
||||||
|
|
||||||
export default {
|
export default defineConfig({
|
||||||
base: './',
|
base: './',
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
optimizeDeps: {
|
optimizeDeps: {
|
||||||
include: ['schart.js']
|
include: ['schart.js']
|
||||||
}
|
}
|
||||||
}
|
})
|
Loading…
Reference in New Issue