20231120

src/assets/css/login.scss

@@ -4,16 +4,41 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: gradient(radial, 50% 50%, 0, 50% 50%, 100, from(green), to(white));
+    background: #eff7ff;
     &-main {
-        min-width: 400px;
         min-height: 300px;
-        background: rgba($color: #13194b, $alpha: .2);
+        background: rgba($color: #fff, $alpha: 1);
+        box-shadow: 0 0 10px 0 #f1f1f1;
         z-index: 2;
-        padding: 20px 50px;
+        padding:50px;
         display: flex;
-        flex-direction: column;
         justify-content: center;
-        border-radius: 4px;
+        align-items: center;
+        border-radius: 10px;
+        &-left{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: #273e6d;
+            &-h1{
+                // font-weight: 500;
+                font-size: 26px;
+                padding: 10px 0;
+            }
+            &-h2{
+                font-size: 14px;
+                padding-bottom: var(--y-padding);
+            }
+        }
+        &-right{
+            flex: 1;
+            flex-shrink: 0;
+            min-width: 300px;
+        }
+        @media screen and (max-width: 800px) {
+            &-left{display: none;}
+        }
     }
 }

src/components/Carousel.vue

@@ -1,32 +1,34 @@
 <template>
-    <div class="block text-center" m="t-4" style="margin-bottom: 20px;">
+    <div class="carouse" style="margin-bottom: 20px;height: 200px;">
         <el-carousel trigger="click" height="250px">
-            <el-carousel-item v-for="item in 4" :key="item">
-                <h3 class="small justify-center" text="2xl">{{ item }}</h3>
+            <el-carousel-item v-for="item in data.imgUrl" :key="item">
+                {{ item }}
+                <img :src="item" style="width: 100%;height: 100%;background-size:cover;">
             </el-carousel-item>
         </el-carousel>
     </div>
 </template>
   
+<script setup lang="ts">
+import { reactive } from "vue";
+const data = reactive({
+    imgUrl:[require('@/assets/img/home-Carousel.png')]
+})
+</script>
 <style scoped>
-.demonstration {
-    color: var(--el-text-color-secondary);
-}
-
-.el-carousel__item h3 {
-    color: #475669;
-    opacity: 0.75;
-    line-height: 150px;
-    margin: 0;
-    text-align: center;
-}
-
-.el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-    background-color: #d3dce6;
+.carouse {
+    border-radius: var(--el-card-border-radius);
+    background-color: var(--el-card-bg-color);
+    overflow: hidden;
+    color: var(--el-text-color-primary);
+    transition: var(--el-transition-duration);
+    --el-card-border-color: var(--el-border-color-light);
+    --el-card-border-radius: 4px;
+    --el-card-bg-color: var(--el-fill-color-blank);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--y-margin);
 }
 </style>
   

src/components/searchAdd.vue

@@ -3,13 +3,18 @@
   <div class="searchAdd">
     <div class="searchAdd-left">
       <marks></marks>
-      <el-text class="searchAdd-left-tit">
-        <slot name="searchAdd-tit">{{ props.istitle }}</slot>
-      </el-text>
-      <el-input v-model="data.input" :placeholder="props.isPlaceholder" style="width: 30%;min-width: 100px;" clearable />
+      <el-form inline="true" style="max-width: 460px;">
+        <el-form-item :label="props.istitle">
+          <el-input v-model="data.input" :placeholder="props.isPlaceholder" clearable />
+        </el-form-item>
+      </el-form>
+      
+      <el-form-item>
+        <el-button type="primary" @click="subClick">{{ props.isButtom }}</el-button>
+      </el-form-item>
     </div>
     <div class="searchAdd-right">
-      <el-button type="primary" @click="subClick">{{ props.isButtom }}</el-button>
+      <slot name="searchBtn"></slot>
     </div>
   </div>
 </template>
@@ -56,15 +61,16 @@ const subClick = () => {
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--y-margin);
-
-  &-left {
+  &-left{
     display: flex;
     align-items: center;
-    flex: 1;
-
-    &-tit {
-      padding: 20px;
-    }
   }
 }
+
+.el-form-item {
+  display: flex;
+  --font-size: 14px;
+  margin-bottom: 0;
+  margin-left: 10px;
+}
 </style>

src/components/table.vue

@@ -34,9 +34,11 @@
             </template>
         </el-table>
         <!-- 分页组件 -->
-        <el-pagination v-model:current-page="pageable.pageNum" v-model:page-size="pageable.pageNum"
-         :layout="props.layout" :total="pageable.total" style="margin-top: 50px;"
+        <div style="margin-top: 20px;">
+            <el-pagination v-model:current-page="pageable.pageNum" v-model:page-size="pageable.pageNum"
+         :layout="props.layout" :total="pageable.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
     </div>
 </template>
 
@@ -66,7 +68,8 @@ interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
 const props = withDefaults(defineProps<ProTableProps>(), {
     columns: () => [],//渲染表格
     pagination: true,
-    layout: 'total, prev, pager, next, jumper',
+    // layout: 'total, prev, pager, next, jumper',
+    layout: ' prev, pager, next',
     initParam: {},//请求参数
     border: false,
     toolButton: true,

src/plugins/login.ts

@@ -18,6 +18,6 @@ export function loginsetItem(rlue:any,data:any){
  */
 export function JudgmentStatus(data:any){
     return Object.keys(data).every((item,index,arr)=>{ 
-        return data[item]!=''
+        return data[item]!=undefined
     })
  }

src/views/home/index.vue

@@ -1,8 +1,7 @@
 <!--  -->
 <template>
   <div class="home">
-    <Carousel></Carousel>
-    
+    <!-- <Carousel></Carousel> -->
     <cards>
       <template #card-tit>
         <div style="display: flex;align-items: center;">

src/views/login/index copy.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="login">
+        <div class="login-main">
+            <div style="margin-bottom: 40px;">
+                <el-text tag="b" style="font-size: 20px;color: #fff;padding-bottom: 10px;">宝智达药品出入库管理平台</el-text>
+                <el-text tag="p" style="color: #fff;">Baozhida drug import and export management platform</el-text>
+            </div>
+            <el-form :model="data.form">
+                <el-form-item>
+                    <el-input v-model="data.form.bzd_username" prefix-icon="Key" />
+                </el-form-item>
+                <el-form-item>
+                    <el-input v-model="data.form.bzd_password" prefix-icon="Unlock" type="password" show-password />
+                </el-form-item>
+                <el-form-item>
+                    <el-checkbox-group v-model="data.type">
+                        <el-checkbox label="记住密码" name="type" />
+                    </el-checkbox-group>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" style="width: 100%;" @click="submitForm()">
+                        登录
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <threes style="position: absolute;top: 0;left: 0;z-index: 1;"></threes>
+    </div>
+</template>
+
+<script setup lang="ts">
+import router from "@/router";
+import { reactive,onMounted } from "vue";
+import { login } from "@/api/index";
+import md5 from "js-md5";
+import threes from "@/components/threes.vue";
+import {loginsetItem,JudgmentStatus} from "@/plugins/login";
+import { el } from "element-plus/es/locale";
+import { ElMessage, ElNotification } from 'element-plus'
+const data = reactive({
+    form: {
+        bzd_username: '',
+        bzd_password: '',
+    },
+    type: []
+})
+onMounted(()=>{
+    const info:any = sessionStorage.getItem('infos')
+    if(JSON.parse(info) && JSON.parse(info).type){
+        data.form.bzd_username = JSON.parse(info).bzd_username
+        data.form.bzd_password = JSON.parse(info).bzd_password
+        data.type = JSON.parse(info).type
+    }
+})
+const submitForm = async () => {
+    const Jud = await JudgmentStatus(data.form)
+    if (!Jud) {
+        ElMessage.error('账号或者密码不能为空');
+        return
+    }
+    const froms = { ...data.form }
+    froms.bzd_password = md5(froms.bzd_password)
+    const result: any = await login(froms)
+    console.log(result)
+    if (result.Code == 200) {
+        sessionStorage.setItem('User_tokey', result.Data)
+        loginsetItem(data.type,data.form)
+        router.push('/home')
+    }
+}
+</script>
+<style lang="scss">
+@import '@/assets/css/login.scss'
+</style>

src/views/login/index.vue

@@ -1,42 +1,41 @@
 <template>
     <div class="login">
         <div class="login-main">
-            <div style="margin-bottom: 40px;">
-                <el-text tag="b" style="font-size: 20px;color: #fff;padding-bottom: 10px;">宝智达药品出入库管理平台</el-text>
-                <el-text tag="p" style="color: #fff;">Baozhida drug import and export management platform</el-text>
+            <div class="login-main-left">
+                <div class="login-main-left-h1"><span style="color: #f3cd45;">宝智达</span>出入库管理系统</div>
+                <div class="login-main-left-h2">提升管理效率/出库/入库/统计</div>
+                <img src="@/assets/img/1700450751581.png" alt="" srcset="">
+            </div>
+            <div class="login-main-right">
+                <div style="margin-bottom: 20px;">
+                    <el-text tag="p" style="font-size: 20px;color: #273e6d;padding-bottom: 10px;">用户登录/login</el-text>
+                </div>
+                <el-form :model="data.form">
+                    <el-form-item>
+                        <el-input v-model="data.form.bzd_username" prefix-icon="Key" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-input v-model="data.form.bzd_password" prefix-icon="Unlock" type="password" show-password />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-checkbox-group v-model="data.type">
+                            <el-checkbox label="记住密码" name="type" />
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item>
+                        <loadingBtn text="登录" :data="data"/>
+                    </el-form-item>
+                </el-form>
             </div>
-            <el-form :model="data.form">
-                <el-form-item>
-                    <el-input v-model="data.form.bzd_username" prefix-icon="Key" />
-                </el-form-item>
-                <el-form-item>
-                    <el-input v-model="data.form.bzd_password" prefix-icon="Unlock" type="password" show-password />
-                </el-form-item>
-                <el-form-item>
-                    <el-checkbox-group v-model="data.type">
-                        <el-checkbox label="记住密码" name="type" />
-                    </el-checkbox-group>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" style="width: 100%;" @click="submitForm()">
-                        登录
-                    </el-button>
-                </el-form-item>
-            </el-form>
         </div>
-        <threes style="position: absolute;top: 0;left: 0;z-index: 1;"></threes>
     </div>
 </template>
 
 <script setup lang="ts">
-import router from "@/router";
-import { reactive,onMounted } from "vue";
-import { login } from "@/api/index";
-import md5 from "js-md5";
-import threes from "@/components/threes.vue";
-import {loginsetItem,JudgmentStatus} from "@/plugins/login";
-import { el } from "element-plus/es/locale";
-import { ElMessage, ElNotification } from 'element-plus'
+import { reactive, onMounted } from "vue";
+
+import loadingBtn from './loadingBtn.vue'
+
 const data = reactive({
     form: {
         bzd_username: '',
@@ -44,30 +43,15 @@ const data = reactive({
     },
     type: []
 })
-onMounted(()=>{
-    const info:any = sessionStorage.getItem('infos')
-    if(JSON.parse(info) && JSON.parse(info).type){
+onMounted(() => {
+    const info: any = sessionStorage.getItem('infos')
+    if (JSON.parse(info) && JSON.parse(info).type) {
         data.form.bzd_username = JSON.parse(info).bzd_username
         data.form.bzd_password = JSON.parse(info).bzd_password
         data.type = JSON.parse(info).type
     }
 })
-const submitForm = async () => {
-    const Jud = await JudgmentStatus(data.form)
-    if (!Jud) {
-        ElMessage.error('账号或者密码不能为空');
-        return
-    }
-    const froms = { ...data.form }
-    froms.bzd_password = md5(froms.bzd_password)
-    const result: any = await login(froms)
-    console.log(result)
-    if (result.Code == 200) {
-        sessionStorage.setItem('User_tokey', result.Data)
-        loginsetItem(data.type,data.form)
-        router.push('/home')
-    }
-}
+
 </script>
 <style lang="scss">
 @import '@/assets/css/login.scss'

src/views/login/loadingBtn.vue

@@ -0,0 +1,82 @@
+<template>
+    <el-button type="primary" :loading="data.loading" @click="submitForm()" style="width: 100%;">
+        <template #loading>
+            <div class="custom-loading">
+                <svg class="circular" viewBox="-10, -10, 50, 50">
+                    <path class="path" d="
+            M 30 15
+            L 28 17
+            M 25.61 25.61
+            A 15 15, 0, 0, 1, 15 30
+            A 15 15, 0, 1, 1, 27.99 7.5
+            L 15 15
+          " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" />
+                </svg>
+            </div>
+        </template>
+        {{props.text}}
+    </el-button>
+</template>
+<script setup lang="ts">
+import { loginsetItem, JudgmentStatus } from "@/plugins/login";
+import { ElMessage ,ElNotification} from 'element-plus'
+import { login } from "@/api/index";
+import md5 from "js-md5";
+import router from "@/router";
+import { reactive } from "vue";
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => { },
+    },
+    text:{
+        type: String,
+        default: () => '',
+    },
+})
+
+const data = reactive({
+    loading:false
+})
+
+const submitForm = async () => {
+    const Jud = await JudgmentStatus(props.data.form)
+    if (!Jud) {
+        ElMessage.error('账号或者密码不能为空');
+        return
+    }
+    const froms = { ...props.data.form }
+    froms.bzd_password = md5(froms.bzd_password)
+    const result: any = await login(froms)
+    if (result.Code == 200) {
+        sessionStorage.setItem('User_tokey', result.Data)
+        loginsetItem(props.data.type, props.data)
+        ElNotification({
+            title: '登录成功',
+            message: 'ok，登录成功，欢迎进入宝智达出入库管理系统！',
+            type: 'success',
+        })
+        setTimeout(() => {
+            router.push('/home')
+        }, 1500);
+    }
+}
+</script>
+
+<style scoped>
+.el-button .custom-loading .circular {
+  margin-right: 6px;
+  width: 18px;
+  height: 18px;
+  animation: loading-rotate 2s linear infinite;
+}
+.el-button .custom-loading .circular .path {
+  animation: loading-dash 1.5s ease-in-out infinite;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-width: 2;
+  stroke: var(--el-button-text-color);
+  stroke-linecap: round;
+}
+</style>

src/views/storageInquire/index.vue

@@ -1,13 +1,66 @@
 <!--  -->
 <template>
     <div class="">
-        库存查询
+        <searchAdd isButtom="查询" istitle="疫苗批号" isPlaceholder="请输入疫苗批号" @event="eventFn">
+            <template #searchBtn>
+                <el-button type="primary">导出</el-button>
+                <el-button type="success">下载</el-button>
+            </template>
+        </searchAdd>
+
+        <bg istitle="库存统计列表">
+            <template #bg>
+                <tables :requestApi="CompanyTree" :columns="columns" :initParam="initParam">
+                    <template #right="{ row }">
+                        <el-button type="primary">编辑</el-button>
+                        <el-button type="danger">删除</el-button>
+                    </template>
+                </tables>
+            </template>
+        </bg>
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import searchAdd from "@/components/searchAdd.vue";
+import { CompanyTree } from "@/api/index";
+import tables from "@/components/table.vue";
+import bg from '@/components/bg.vue'
+
+// 渲染表格
+const columns: any = [
+    { type: 'index', label: '编号', width: 80, },
+    { prop: 'T_D_name', label: '疫苗名称', width: 150 },
+    { prop: 'T_D_name', label: '生产企业', width: 150 },
+    { prop: 'T_D_name', label: '批准文号', width: 150 },
+    { prop: 'T_D_name', label: '批签发合格编号', width: 200, },
+    { prop: 'T_D_name', label: '规格（剂/支或粒）', width: 150, },
+    { prop: 'T_D_name', label: '生产日期', width: 150 },
+    { prop: 'T_D_name', label: '疫苗批号', width: 150 },
+    { prop: 'T_D_name', label: '疫苗效期', width: 150 },
+    { prop: 'T_D_name', label: '类型', width: 80 },
+    { prop: 'T_D_name', label: '收入数量', width: 150 },
+    { prop: 'T_D_name', label: '发出数量', width: 150 },
+    { prop: 'T_D_name', label: '结余数量', width: 150 },
+    { prop: 'T_D_name', label: '单位', width: 150 },
+    { prop: 'T_D_name', label: '剂型', width: 150 },
+    { prop: 'T_D_name', label: '领苗人', width: 150 },
+    { prop: 'T_D_name', label: '发货单位', width: 150 },
+    { prop: 'T_D_name', label: '收货单位', width: 150 },
+    { prop: 'T_D_name', label: '入/出库日期', width: 150, },
+    { prop: 'operation', label: '操作', fixed: 'right', 'min-width': 200 }
+]
+//请求参数
+const initParam = { T_name: '' }
+
+/**
+ * 
+ * @param val 子传值
+ */
+const eventFn = (val: any) => {
+    console.log('/', val);
+}
 </script>
 <style lang="scss">
 /* @import url(); 引入css类 */
-
 </style>

src/views/user/index.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="user">
     <searchAdd isButtom="查询" istitle="用户名称" isPlaceholder="请输入用户名称" @event="eventFn" />
-    <bg istitle="公司列表">
-      <template #bg>
-        <tables :requestApi="CompanyTree" :columns="columns" :initParam="initParam">
-          <template #right="{ row }">
-            <el-button type="primary">编辑</el-button>
-            <el-button type="danger">删除</el-button>
+    <div class="user-conter-table">
+        <bg istitle="用户列表">
+          <template #bg>
+            <tables :requestApi="CompanyTree" :columns="columns" :initParam="initParam">
+            <template #right="{ row }">
+              <el-button type="primary">编辑</el-button>
+              <el-button type="danger">删除</el-button>
+            </template>
+          </tables>
           </template>
-        </tables>
-      </template>
-    </bg>
+        </bg>
+      </div>
   </div>
 </template>
 
@@ -19,10 +21,13 @@ import searchAdd from "@/components/searchAdd.vue";
 import { CompanyTree } from "@/api/index";
 import tables from "@/components/table.vue";
 import bg from '@/components/bg.vue'
+import progres from './progres.vue'
+
+
 // 渲染表格
 const columns: any = [
   { type: 'index', label: '编号', width: 80, },
-  { prop: 'T_D_name', label: '名称', width: 200 },
+  { prop: 'T_D_name', label: '名称', width: 400 },
   { prop: 'operation', label: '操作', fixed: 'right', 'min-width': 200 }
 ]
 //请求参数
@@ -36,5 +41,20 @@ const eventFn = (val: any) => {
 }
 </script>
 <style lang="scss">
-.user {}
+.user {
+  &-conter {
+    // display: grid;
+    // grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    // grid-gap: 20px;
+    gap: 20px;
+    display: flex;
+    &-table {
+      flex: .6;
+    }
+
+    &-prog {
+      flex: .4;
+    }
+  }
+}
 </style>

src/views/user/progres.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="demo-progress">
+    <el-progress type="dashboard" :percentage="80">
+      <template #default="{ percentage }">
+        <span class="percentage-value">{{ percentage }}人</span>
+        <span class="percentage-label">用户总数</span>
+      </template>
+    </el-progress>
+  </div>
+</template>
+<style scoped lang="scss">
+.demo-progress {
+  border-radius: var(--el-card-border-radius);
+  background-color: var(--el-card-bg-color);
+  overflow: hidden;
+  color: var(--el-text-color-primary);
+  transition: var(--el-transition-duration);
+  --el-card-border-color: var(--el-border-color-light);
+  --el-card-border-radius: 4px;
+  --el-card-bg-color: var(--el-fill-color-blank);
+  padding: var(--y-padding);
+  display: flex;
+  // justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--y-margin);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.percentage-value {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.percentage-label {
+  display: block;
+  margin-top: 10px;
+  font-size: 12px;
+}
+</style>
+