2022年5月12日14:32:26

src/api/index.ts

@@ -79,7 +79,7 @@ export function get(url: string, data = {}, options = {}) {
  * post 请求
  * @param url 路径 
  * @param data 参数 
- * @param options 实例对象 
+ * @param options 实例对象
  * @returns 
  */
 export function post(url: string, data = {}, options = {}) {

src/components/SlidingBlockVerifyTwo/SlidingBlockVerifyTwo.vue

@@ -61,7 +61,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import SlideImgThreePng from '@/assets/image/slide_img_three.png';
     //md开撸第二版
     export default {

src/crud/components/CRUD.operation.vue

@@ -21,7 +21,7 @@
         </el-button-group>
     </div>
 </template>
-<script>
+<script lang="ts">
     import CRUD, {
         crudConfig
     } from "@/crud/crud"

src/crud/index.vue

@@ -44,7 +44,7 @@
             <div v-else>
                 <!-- 系统内容 -->
                 <el-form ref="ruleFormRef" :rules="rules" :model="form">
-                    <el-form-item v-for="(item,index) in tableFrom.field" :label="item.label" :prop="item.prop"
+                    <el-form-item v-for="(item,index) in tableFrom.field" :key="index" :label="item.label" :prop="item.prop"
                         :label-width="formLabelWidth">
                         <!-- 输入框 -->
                         <div style="width: 100%;" v-if="item.form.type === 'input'">
@@ -55,7 +55,7 @@
                         <div style="width: 100%;" v-else-if="item.form.type === 'select'">
                             <el-select style="width: 100%;" v-model="form[item.prop]" :disabled="item.form.disabled"
                                 :placeholder="item.form.placeholder">
-                                <el-option v-for="(itemData,index) in item.form.listData" :label="itemData.label"
+                                <el-option v-for="(itemData,index) in item.form.listData" :key="index" :label="itemData.label"
                                     :value="itemData.value" />
                             </el-select>
                         </div>

src/layout/components/Head.vue

@@ -66,7 +66,7 @@
     screenfull.toggle()
   }
   //提示点击
-  function hint(msg) {
+  function hint(msg: string) {
     if (msg === '退出登录') {
       Cookies.remove('token')
       Cookies.remove('rememberPSWD')

src/layout/components/Item.vue

@@ -1,17 +0,0 @@
-<template>
-  <el-icon>
-    <Icon v-if="icon" style="width: 16px;height: 16px;" :icon="icon" ></Icon>
-  </el-icon>
-</template>
-<script>
-  export default {
-    name: 'MenuItem',
-    functional: true,
-    props: {
-      icon: {
-        type: String,
-        default: ''
-      }
-    }
-  }
-</script>

src/layout/components/ItemIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <el-icon>
+    <icon-tab v-if="icon" style="width: 16px; height: 16px" :icon="icon"></icon-tab>
+  </el-icon>
+</template>
+<script lang="ts" setup>
+/* props 接收数据 */
+const props = defineProps({
+  icon: String,
+})
+
+//将需要暴露出去的数据与方法都可以暴露出去
+defineExpose({props})
+</script>

src/layout/components/SidebarItem.vue

@@ -1,51 +1,40 @@
 <template>
-  <template v-for="(item, index) in list" :key="item.path">
+  <template v-for="item in list" :key="item.path">
     <!-- 父级菜单 -->
-    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.title + ',' + item.path">
+    <el-sub-menu
+      v-if="item.children && item.children.length > 0"
+      :index="item.title + ',' + item.path"
+    >
       <template #title>
-        <Item :icon="item.icon" />
-        <span style="font-size:14px">{{ item.title }}</span>
+        <item-ioc :icon="item.icon" />
+        <span style="font-size: 14px">{{ item.title }}</span>
       </template>
       <el-menu-item-group>
-        <sidebarItem :list="item.children"></sidebarItem>
+        <sidebar-item :list="item.children"></sidebar-item>
       </el-menu-item-group>
     </el-sub-menu>
 
     <!-- 子项也负责跳转 -->
-    <router-link style="text-decoration: none;" v-else :to="{name:`${item.path}`}">
+    <router-link style="text-decoration: none" v-else :to="{ name: `${item.path}` }">
       <el-menu-item class="el-menu-item" :index="item.title + ',' + item.path">
-        <Item v-if="item.icon" :icon="item.icon"/>
+        <item-ioc v-if="item.icon" :icon="item.icon" />
         <template #title>
-          <span style="font-size:14px">{{ item.title }}</span>
+          <span style="font-size: 14px">{{ item.title }}</span>
         </template>
       </el-menu-item>
     </router-link>
-
   </template>
 </template>
-<script lang="ts">
-  import {
-    Document,
-    Menu as IconMenu,
-    Location,
-    Setting
-  } from '@element-plus/icons-vue'
-  import Item from './Item.vue'
+<script lang="ts" setup>
+/* eslint-disable-next-line*/
+import itemIoc from '@/layout/components/ItemIcon.vue'
 
-  export default {
-    name: 'SidebarItem',
-    components: {
-      Item
-    },
-    props: {
-      list: {
-        type: Array,
-        default: function () {
-          return []
-        },
-      },
-    },
-  }
+defineProps({
+  list: {
+    type: <any>Array,
+    default: [],
+  },
+})
 </script>
 <style lang="less" scoped>
 </style>

src/layout/index.vue

@@ -2,23 +2,34 @@
   <!-- :sources="[bgVideo]" -->
 
   <video-bg :sources="[]">
-
-    <div class="as-layout-horizontal" style="width: 100%; height: 100%;opacity: 0.9;">
+    <div class="as-layout-horizontal" style="width: 100%; height: 100%; opacity: 0.9">
       <!-- 此处先划出布局形式(按左右布局划分，左边菜单，右边内容) -->
       <!-- 菜单部分 -->
-      <div class="bg-theme" style="height: 100%;">
+      <div class="bg-theme" style="height: 100%">
         <!-- 菜单头部部分 -->
-        <div class="as-gravity-center-start" style="height: 70px;">
-          <img rel="icon" src="/logo2.png" style="width: 60px;height: 60px;" />
+        <div class="as-gravity-center-start" style="height: 70px">
+          <img rel="icon" src="/logo2.png" style="width: 60px; height: 60px" />
           <!-- D-UI框架模板 -->
-          <span class="as-bold" style="font-size:18px;color: #FFFFFF" v-show="menuStart.menuIsExpansion">黔通智联</span>
+          <span
+            class="as-bold"
+            style="font-size: 18px; color: #ffffff"
+            v-show="menuStart.menuIsExpansion"
+            >黔通智联</span
+          >
         </div>
 
         <!-- 菜单主体部分 -->
-        <div style="height: 100%;background-color: #FFFFFF;">
-          <el-scrollbar class="as-border-width" height="100%" style="background-color: #FFFFFF">
-            <el-menu :default-active="menuIndex.menuIndex" style="height: 100%" mode="vertical" :router="false"
-              @select="select" :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
+        <div style="height: 100%; background-color: #ffffff">
+          <el-scrollbar class="as-border-width" height="100%" style="background-color: #ffffff">
+            <el-menu
+              :default-active="menuIndex.menuIndex"
+              style="height: 100%"
+              mode="vertical"
+              :router="false"
+              @select="select"
+              :collapse="!menuStart.menuIsExpansion"
+              class="el-menu-vertical-demo"
+            >
               <SidebarItem :list="list" />
             </el-menu>
           </el-scrollbar>
@@ -27,18 +38,16 @@
 
       <div class="as-weight as-layout-vertical">
         <!-- 头部选项 -->
-        <div class="bg-theme" style="padding: 0px 10px 0px 10px; height: 70px;">
-
-          <Head style="height: 70px;"></Head>
+        <div class="bg-theme" style="padding: 0px 10px 0px 10px; height: 70px">
+          <Head style="height: 70px"></Head>
         </div>
 
         <el-scrollbar>
           <div class="as-layout-vertical">
             <!-- 头部 height: 8%;-->
-            <div style=" background-color: #ffffff; padding: 10px 0px 10px 0px">
+            <div style="background-color: #ffffff; padding: 10px 0px 10px 0px">
               <!-- 选项卡 -->
-              <TabContainer>
-              </TabContainer>
+              <TabContainer> </TabContainer>
 
               <!-- 主体内容页面 -->
               <router-view name="key"></router-view>
@@ -52,76 +61,68 @@
             </div>
           </div>
         </el-scrollbar>
-
       </div>
     </div>
   </video-bg>
 </template>
 
 <script setup lang="ts">
-  import SidebarItem from './components/SidebarItem.vue' //选项菜单
-  import Head from './components/Head.vue' //选项头部
-  import TabContainer from './components/TabControl.vue' //Tab选项
-  import VideoBg from '@/components/VideoBackround/VideoBackground.vue' //视频背景组件
-  import BgTwo from '@/assets/video/homeBg.mp4' //视频资源
-  import $store from "@/store/index" // 引入vuex
-  import $storeTab from '@/store/tabValue' //引入tab vuex
-  import {
-    list
-  } from '@/data/menuData.ts'
-  import {
-    ref,
-    reactive,
-    onMounted
-  } from 'vue'
-  import {
-    useRouter
-  } from 'vue-router'
+import SidebarItem from './components/SidebarItem.vue' //选项菜单
+import Head from './components/Head.vue' //选项头部
+import TabContainer from './components/TabControl.vue' //Tab选项
+import VideoBg from '@/components/VideoBackround/VideoBackground.vue' //视频背景组件
+import BgTwo from '@/assets/video/homeBg.mp4' //视频资源
+import $store from '@/store/index' // 引入vuex
+import $storeTab from '@/store/tabValue' //引入tab vuex
+import { list } from '@/data/menuData'
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 
-  const bgVideo = BgTwo
-  const router = useRouter()
-  //默认菜单为打开状态
-  let menuStart = ref($store.state.data)
-  let menuIndex = ref($storeTab.state.editableTabsValue)
-  //处理刷新页面重置问题
-  onMounted(() => {
-    const newTab = sessionStorage.getItem('newTab')
-    if (newTab) {
-      let dataTabs = JSON.parse(newTab)
-      dataTabs.name = '1'
-      let value = {
-        type: 1,
-        data: dataTabs
-      }
-      $storeTab.dispatch('addTab', value)
-      $storeTab.dispatch('updateETV', dataTabs.name)
-    } else {
-      router.replace({
-        name: 'home'
-      })
-    }
-    sessionStorage.removeItem('newTab')
-  })
-  //菜单选择监听(添加选项卡成功则添加，有就进行跳转)
-  //data(菜单名称,菜单路径)
-  function select(data) { //这里只负责tab，不负责跳转
+const bgVideo = BgTwo
+const router = useRouter()
+//默认菜单为打开状态
+let menuStart = ref($store.state.data)
+let menuIndex = ref($storeTab.state.editableTabsValue)
+//处理刷新页面重置问题
+onMounted(() => {
+  const newTab = sessionStorage.getItem('newTab')
+  if (newTab) {
+    let dataTabs = JSON.parse(newTab)
+    dataTabs.name = '1'
     let value = {
-      type: 2,
-      data: data
+      type: 1,
+      data: dataTabs,
     }
     $storeTab.dispatch('addTab', value)
+    $storeTab.dispatch('updateETV', dataTabs.name)
+  } else {
+    router.replace({
+      name: 'home',
+    })
   }
+  sessionStorage.removeItem('newTab')
+})
+//菜单选择监听(添加选项卡成功则添加，有就进行跳转)
+//data(菜单名称,菜单路径)
+function select(data: unknown) {
+  //这里只负责tab，不负责跳转
+  let value = {
+    type: 2,
+    data: data,
+  }
+  $storeTab.dispatch('addTab', value)
+}
 </script>
 
 <style lang="scss" scoped>
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 248px;
-    min-height: 400px;
-    padding-bottom: 40px;
-    border-width: 0px;
-  }
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 248px;
+  min-height: 400px;
+  padding-bottom: 40px;
+  border-width: 0px;
+}
 
-  .bg-theme {
-    background-color: $test-color;
-  }
+.bg-theme {
+  background-color: $test-color;
+}
 </style>

src/main.ts

@@ -24,7 +24,7 @@ app.use(router)
   .use(Fragment.Plugin)
   .use(ElementPlus, { // 使用element-plus
     locale: zhCn,
-  }).mount('#app')
+  })
 
 //全局图标组件
 for (const name in EleIcons) {
@@ -35,10 +35,12 @@ for (const name in EleIcons) {
 
 // 下面为全局注册图标组件
 // 创建Icon组件
-const Icon = (props: { icon: string }) => {
+const Icon: any = (props: { icon: string }) => {
   const { icon } = props
   return createVNode(EleIcons[icon as keyof typeof EleIcons])
 }
 // 注册Icon组件
-app.component('Icon', Icon)
+app.component('icon-tab', Icon)
+
+app.mount('#app')
 

src/utils/utils.ts

@@ -14,7 +14,7 @@ export function isValidKey(key: string | number | symbol, object: object): key i
  * @param {*} opts 用户配置对象
  * @returns 新的默认对象
  */
- export function mergeOptions(src: any, opts: any) {
+export function mergeOptions(src: any, opts: any) {
     const optsRet = {
         ...src
     };
@@ -24,4 +24,27 @@ export function isValidKey(key: string | number | symbol, object: object): key i
         }
     }
     return optsRet;
+}
+
+export function barkTime() {
+    const nowdate = new Date();
+    const year = nowdate.getFullYear(),
+        month = nowdate.getMonth() + 1,
+        date = nowdate.getDate(),
+        // day = nowdate.getDay(),
+        // week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+        h = nowdate.getHours(),
+        m = nowdate.getMinutes(),
+        s = nowdate.getSeconds(),
+        hs = checkTime(h),
+        ms = checkTime(m),
+        ss = checkTime(s);
+    return (year + checkTime(month) + checkTime(date) + hs + ms + ss) + ''
+}
+function checkTime(i: number) {
+    let s = i + ''
+    if (i < 10) {
+        s = "0" + i;
+    }
+    return s;
 }

src/views/dengmingcong/cardFillDo/cardFillDo.vue

@@ -51,11 +51,11 @@
         ref,
         reactive
     } from 'vue'
-    import {
-        useRequest
-    } from 'vue-request';
+    // import {
+    //     useRequest
+    // } from 'vue-request';
     import axios from 'axios';
-    
+
     import {
         getCurrentInstance
     } from 'vue'
@@ -64,7 +64,7 @@
     } = getCurrentInstance();
 
     proxy.$request.get('api/user', {}, {
-        baseURL: 'http://192.168.1.101:8080'
+        baseURL: 'http://localhost:8080'
     }).then((res) => {
         console.log(res);
     }).catch((err) => {

src/views/system/home/Home.vue

@@ -1,34 +1,50 @@
 <template>
   <!-- accept 限制上传文件格式 .text-->
-  <el-upload ref="uploadRef" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
-    on-progress="progress" :auto-upload="false">
+  <el-upload
+    ref="uploadRef"
+    action="https://jsonplaceholder.typicode.com/posts/"
+    :auto-upload="false"
+    :on-change="handleChange"
+    :file-list="fileList"
+  >
     <template #trigger>
       <el-button type="primary">select file</el-button>
     </template>
 
-    <el-button class="ml-3" type="success" @click="submitUpload">
-      upload to server
-    </el-button>
+    <el-button class="ml-3" type="success" @click="submitUpload"> upload to server </el-button>
 
     <template #tip>
-      <div class="el-upload__tip">
-        jpg/png files with a size less than 500kb
-      </div>
+      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
     </template>
   </el-upload>
 </template>
 <script lang="ts" setup>
-  import {
-    ref
-  } from 'vue'
+import { ref } from 'vue'
+import { barkTime } from '@/utils/utils'
+import { UploadProps, UploadUserFile } from 'element-plus'
 
-  const uploadRef = ref()
+const uploadRef = ref()
+const fileList = ref<UploadUserFile[]>([])
 
-  const submitUpload = () => {
-    uploadRef.value.submit()
-  }
+console.log(barkTime()) //时间戳
 
-  const progress = (evt, uploadFile, uploadFiles) => {
-    console.log(evt, uploadFile, uploadFiles);
-  }
+const submitUpload = () => {
+  uploadRef.value.submit()
+}
+
+const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
+  // console.log(uploadFile, fileList.value.slice(-1));
+
+  fileList.value = fileList.value.slice(-1)
+  // let imgSize = Number(uploadFile.size / 1024).toFixed(2); // / 1024
+  // //截取后缀名
+  // const suffix = (uploadFile.name + '').split('.')[1]
+  // //修改文件名称
+  // uploadFile.name = barkTime() + '.' + suffix
+  // if (uploadFiles) {
+  //   uploadFiles.value.split(uploadFiles.value.length, 1)
+  // }
+
+  console.log(fileList.value)
+}
 </script>