import ts

pull/301/head
tujin_li 2021-07-30 16:57:16 +08:00
parent 039c9c3da4
commit 20311d02df
24 changed files with 143 additions and 81 deletions

View File

@ -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%",

View File

@ -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>

View File

@ -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";

View File

@ -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";

View File

@ -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();
}; };

5
src/types/tab.ts Normal file
View File

@ -0,0 +1,5 @@
export interface tabItem {
name: string,
title: string,
path: string
}

View File

@ -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>

View File

@ -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",

View File

@ -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",

View File

@ -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 {

View File

@ -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 = () => {

View File

@ -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 {

View File

@ -16,7 +16,7 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { export default {
name: "donate" name: "donate"
}; };

View File

@ -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 {

View File

@ -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>

View File

@ -24,7 +24,7 @@
</section> </section>
</template> </template>
<script> <script lang="ts">
export default { export default {
name: "i18n" name: "i18n"
}; };

View File

@ -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>

View File

@ -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>

View File

@ -18,7 +18,7 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { export default {
name: "permission" name: "permission"
}; };

View File

@ -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);
}; };

View File

@ -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);
}; };

View 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>

15
tsconfig.json Normal file
View File

@ -0,0 +1,15 @@
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
// `this` `
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"paths": {
"@/*": [
"./*"
]
}
}
}

View File

@ -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']
} }
} })