日常开发

src/main.ts

@@ -17,6 +17,9 @@ import directive from './directive';
 import 'virtual:svg-icons-register';
 import ElementIcons from '@/plugins/svgicon';
 
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
 const app = createApp(App);
 // 预设动画
 app.config.globalProperties.animate = animate;
@@ -37,6 +40,10 @@ app.use(VueLazyload, {
     preLoad: 1.3,
     attempt: 1,
 });
+//ElementUi默认中文
+app.use(ElementPlus, {
+    locale: zhCn,
+  })
 // 自定义指令
 directive(app);
 app.mount('#app');

src/types/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     copy: typeof import('./../components/FaceWindow copy/index.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']

src/views/score/index.vue

@@ -12,15 +12,16 @@
         </div>
         <div class="bottom">
           <div class="type">
-            <div class="li more">
+            <div class="li more">项目
               <el-select class="select" v-model="project" :popper-append-to-body="false" placeholder="请选择"
                 @change="getProject" clearable>
                 <el-option v-for="item in projectList" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </div>
             <div class="li"> 成绩 </div>
-            <div class="li more"> 日期 </div>
-            <div class="li"> 报告 </div>
+            <div class="li more datePicker"> 日期 <el-date-picker v-model="date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" @change="bindDateChange" clearable>
+              </el-date-picker></div>
+            <div class="li"> 测试报告 </div>
           </div>
           <div class="list">
             <div ref="reportScrollRef" @scroll="getNext($event)" class="scrollBox">
@@ -71,19 +72,12 @@ const data = reactive<any>({
 const { parameter, reportList, page, projectList, project, date, debounceTime } = toRefs(data);
 
 //筛选日期
-const bindDateChange = (e: any) => {
-  date.value = e.detail.value;
-  getListData();
-};
-
-//取消选择日期
-const bindDateCancel = () => {
-  date.value = "";
+const bindDateChange = () => {
   getListData();
 };
 
 //筛选项目
-const getProject = (e: any) => {
+const getProject = () => {
   getListData();
 };
 
@@ -113,7 +107,7 @@ const getReportList = () => {
   if (project.value) {
     params.exam_name = project.value;
   }
-  if (date.value == "") {
+  if (!date.value) {
     params.start_date = "2021-01-01";
     delete params.end_date;
   } else {
@@ -311,6 +305,15 @@ onMounted(() => {
   margin-right: 2px;
 }
 
+.type .select {
+  width: 110px;
+  margin-left: 5px;
+}
+
+::v-deep(.type .datePicker .el-date-editor.el-input) {
+  width: 130px !important;
+  margin-left: 5px;
+}
 
 .list {
   text-align: center;
@@ -366,6 +369,7 @@ onMounted(() => {
 
 .scrollBox {
   height: 98%;
+  overflow-y: scroll;
 }
 
 .btn {