perf: 🚀 封装了图片得公共组件

components.d.ts

@@ -61,6 +61,7 @@ declare module '@vue/runtime-core' {
     ElText: typeof import('element-plus/es')['ElText']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
+    Image: typeof import('./src/components/Image/index.vue')['default']
     Loading: typeof import('./src/components/Loading/index.vue')['default']
     Pagination: typeof import('./src/components/TableBase/components/Pagination.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/Image/index.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Picture } from '@element-plus/icons-vue'
+
+interface PropsType {
+  src: string
+}
+const props = defineProps<PropsType>()
+const src = ref(props.src)
+</script>
+
+<template>
+  <el-image
+    fit="cover"
+    loading="lazy"
+    :lazy="true"
+    style="width: 50px; height: 50px"
+    :src="src"
+    :preview-src-list="[src]"
+    :preview-teleported="true"
+  >
+    <template #error>
+      <div class="image-slot">
+        <el-icon><Picture /></el-icon>
+      </div>
+    </template>
+  </el-image>
+</template>
+
+<style scoped>
+.el-image {
+  cursor: pointer;
+}
+.image-slot .el-icon {
+  font-size: 30px;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+</style>

src/hooks/useTablePublic.ts

@@ -24,6 +24,13 @@ export interface OvertimeUserInfoIn {
   T_prove_img: string
 }
 
+export const Project_State = [
+  { id: 1, name: '待审核' },
+  { id: 2, name: '进行中' },
+  { id: 3, name: '已完成' },
+  { id: 4, name: '已发绩效' }
+]
+
 export function useTablePublic() {
   //判断是否相等，相同时改变背景颜色
   const tableRowClassName = (T_uuid: string, T_uuid2: string): any => {

src/layouts/Header/Notice.vue

@@ -33,7 +33,10 @@ const previewNotice = async (item: NoticeType) => {
       type: 'success',
       message: '确认查看消息！'
     })
-    newsList.value.filter((notice: NoticeType) => item.Id !== notice.Id)
+    globalStore.SET_NoticeList(
+      newsList.value.filter((notice: NoticeType) => item.Id !== notice.Id),
+      true
+    )
   }
 }
 

src/views/home/Home.vue

@@ -48,7 +48,7 @@ const previewNotice = async (item: NoticeType) => {
       type: 'success',
       message: '确认查看消息！'
     })
-    newsList.value.filter((notice: NoticeType) => item.Id !== notice.Id)
+    globalStore.SET_NoticeList( newsList.value.filter((notice: NoticeType) => item.Id !== notice.Id),true)
   }
 }
 

src/views/project/Project.vue

@@ -5,12 +5,12 @@ import { ref, reactive, nextTick } from 'vue'
 import { UserFilled } from '@element-plus/icons-vue'
 import TableBase from '@/components/TableBase/index.vue'
 import { ColumnProps } from '@/components/TableBase/interface/index'
-import { Project_List, Project_Get, Project_Edit, Project_User_List } from '@/api/project/index'
-import { Edit, View } from '@element-plus/icons-vue'
+import { Project_List, Project_Get, Project_Edit, Project_User_List, Project_Approval } from '@/api/project/index'
+import { Edit, View, CircleCheck } from '@element-plus/icons-vue'
 import Drawer from '@/components/Drawer/index.vue'
 import ProjectDetail from './ProjectDetail.vue'
 import type { FormInstance, FormRules } from 'element-plus'
-import { useTablePublic } from '@/hooks/useTablePublic'
+import { useTablePublic, Project_State } from '@/hooks/useTablePublic'
 
 interface UserInfoIn {
   T_name: string
@@ -30,12 +30,13 @@ const userInfo = ref<UserInfoIn>({
 })
 const isNew = ref(true)
 const disabled = ref(false)
-const TableRef = ref()
 const formLabelWidth = ref('120px')
 const globalStore = GlobalStore()
 const User_tokey = globalStore.GET_User_tokey
 const ruleFormRef = ref<FormInstance>()
 const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
+const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
+const TableProjectRef = ref<InstanceType<typeof TableBase> | null>(null)
 const projectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(null)
 const { tableRowClassName } = useTablePublic()
 const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, userInfo.value.T_uuid)
@@ -49,8 +50,8 @@ const columnsProject: ColumnProps[] = [
   { prop: 'T_end_date', label: '结束时间' },
   { prop: 'T_planning_cycle', label: '计划完成周期（工作日）', width: 125 },
   { prop: 'T_bonus', label: '绩效总金额' },
-  { prop: 'T_Perf', label: '状态' },
-  { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
+  { prop: 'T_State', label: '状态', name: 'T_State', width: 120 },
+  { prop: 'operation', label: '操作', width: 160, fixed: 'right' }
 ]
 const initParam = { User_tokey: globalStore.GET_User_tokey }
 const initParamProject = reactive({ User_tokey: globalStore.GET_User_tokey, T_uuid: userInfo.value.T_uuid, page_z: 99 })
@@ -140,6 +141,13 @@ const addProject = (formEl: FormInstance | undefined) => {
     } else return false
   })
 }
+const changeState = async (id: number, row: any) => {
+  const res: any = await Project_Approval({ User_tokey: globalStore.GET_User_tokey, T_id: row.Id, T_State: id })
+  if (res.Code === 200) {
+    ElMessage.success('审核成功！')
+    TableProjectRef.value?.getTableList()
+  }
+}
 </script>
 <template>
   <div class="project">
@@ -175,12 +183,31 @@ const addProject = (formEl: FormInstance | undefined) => {
           </div>
         </el-card>
         <TableBase
+          ref="TableProjectRef"
           :columns="columnsProject"
           :requestApi="Project_List"
           :initParam="initParamProject"
           :displayHeader="true"
           :pagination="false"
         >
+          <template #T_State="{ row }">
+            <el-dropdown trigger="click" size="small">
+              <el-button type="primary" size="small" :disabled="row.T_State === 4">
+                {{ Project_State[row.T_State - 1].name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    v-for="item in Project_State"
+                    :key="item.id"
+                    :icon="CircleCheck"
+                    @click="changeState(item.id, row)"
+                    >{{ item.name }}</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
           <template #right="{ row }">
             <el-button link type="success" size="small" :icon="View" @click="openProjectDrawer('view', row)"
               >详情</el-button

src/views/project/ProjectFinance.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import { GlobalStore } from '@/stores/index'
-import { ref, reactive } from 'vue'
-import { getFormatDuration } from '@/utils/common'
+import { ref, reactive, nextTick } from 'vue'
 import { UserFilled } from '@element-plus/icons-vue'
 import TableBase from '@/components/TableBase/index.vue'
 import { ColumnProps } from '@/components/TableBase/interface/index'
-import { User_List } from '@/api/user/index'
-import { Project_Finance_List } from '@/api/project/index'
+import { Project_Finance_List, Project_Get, Project_User_List, Project_Approval } from '@/api/project/index'
+import { View, CircleCheck } from '@element-plus/icons-vue'
+import Drawer from '@/components/Drawer/index.vue'
+import ProjectDetail from './ProjectDetail.vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useTablePublic, Project_State } from '@/hooks/useTablePublic'
 
 interface UserInfoIn {
   T_name: string
@@ -25,36 +28,88 @@ const userInfo = ref<UserInfoIn>({
   T_dept_name: '',
   T_post_name: ''
 })
-const TableRef = ref()
+
+const formLabelWidth = ref('120px')
 const globalStore = GlobalStore()
+const ruleFormRef = ref<FormInstance>()
+const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
+const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
+const projectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(null)
+const { tableRowClassName } = useTablePublic()
+const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, userInfo.value.T_uuid)
+
 const columns: ColumnProps[] = [{ prop: 'T_name', label: '姓名' }]
-const columnsProject: ColumnProps[] = [{ prop: 'T_name', label: '姓名' }]
+const columnsProject: ColumnProps[] = [
+  { prop: 'Id', label: 'ID' },
+  { prop: 'T_name', label: '项目名称' },
+  { prop: 'T_user_name', label: '项目负责人' },
+  { prop: 'T_set_up_date', label: '立项日期' },
+  { prop: 'T_end_date', label: '结束时间' },
+  { prop: 'T_planning_cycle', label: '计划完成周期（工作日）', width: 125 },
+  { prop: 'T_bonus', label: '绩效总金额' },
+  { prop: 'T_State', label: '状态', name: 'T_State', width: 120 },
+  { prop: 'operation', label: '操作', width: 80, fixed: 'right' }
+]
 const initParam = { User_tokey: globalStore.GET_User_tokey }
 const initParamProject = reactive({ User_tokey: globalStore.GET_User_tokey, T_uuid: userInfo.value.T_uuid, page_z: 99 })
 
+const form = ref({
+  Id: '',
+  T_name: '',
+  T_end_date: '',
+  T_set_up_date: '',
+  T_description: '',
+  T_detail: '',
+  T_planning_cycle: '',
+  T_reality_cycle: '',
+  T_bonus: '',
+  T_Perf: '',
+  T_remark: '',
+  T_approver: '',
+  T_advance_day: '',
+  T_uuid: ''
+})
+const rules = reactive<FormRules>({
+  T_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
+})
+
+const openProjectDrawer = (type: string, row?: any) => {
+  nextTick(async () => {
+    form.value = { ...row }
+    form.value.T_approver = row.T_approver_name
+    form.value.T_uuid = row.T_approver
+    const res: any = await Project_Get({ T_id: row.Id })
+    if (res.Code === 200) {
+      projectDetailRef.value?.setDetailData(res.Data.T_Detail)
+    }
+  })
+  drawerRef.value?.openDrawer()
+}
+
 const getSalaryParams = (row: any) => {
   userInfo.value.T_uuid = ''
-  console.log(row)
   setTimeout(() => {
     userInfo.value = { ...row }
     initParamProject.T_uuid = userInfo.value.T_uuid
   }, 100)
 }
 
-const tableRowClassName = (data: any): any => {
-  //判断是否相等，相同时改变背景颜色
-  let user: any = undefined
-  if (data.row.T_uuid === userInfo.value.T_uuid) {
-    user = data.row
-  }
-  if (user !== undefined) {
-    let rowBackground = {
-      background: '#e3eefd',
-      color: '#0d7bff'
-    }
-    return rowBackground
-  } else {
-    return ''
+const callbackDrawer = (done: () => void) => {
+  resetForm(ruleFormRef.value)
+  projectDetailRef.value?.clearDetail()
+  done()
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+// 切换状态
+const changeState = async (id: number, row: any) => {
+  const res: any = await Project_Approval({ User_tokey: globalStore.GET_User_tokey, T_id: row.Id, T_State: id })
+  if (res.Code === 200) {
+    ElMessage.success('审核成功！')
+    TableRef.value?.getTableList()
   }
 }
 </script>
@@ -62,13 +117,12 @@ const tableRowClassName = (data: any): any => {
   <div class="project-finance">
     <div style="width: 290px" class="project-table">
       <TableBase
-        ref="TableRef"
         :columns="columns"
-        :requestApi="User_List"
+        :requestApi="Project_User_List"
         :initParam="initParam"
         layout="prev, pager, next"
         :rowClick="getSalaryParams"
-        :tableRowClassName="tableRowClassName"
+        :tableRowClassName="tableRowClassNameHandle"
       >
         <template #table-header>
           <h3 class="title">员工列表</h3>
@@ -92,31 +146,167 @@ const tableRowClassName = (data: any): any => {
           </div>
         </el-card>
         <TableBase
+          ref="TableRef"
           :columns="columnsProject"
           :requestApi="Project_Finance_List"
           :initParam="initParamProject"
           :displayHeader="true"
           :pagination="false"
         >
-          <template #table-header>
-            <h3 class="title">员工列表</h3>
+          <template #T_State="{ row }">
+            <el-dropdown trigger="click" size="small">
+              <el-button type="primary" size="small" :disabled="row.T_State === 4">
+                {{ Project_State[row.T_State - 1].name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    v-for="item in Project_State"
+                    :key="item.id"
+                    :icon="CircleCheck"
+                    @click="changeState(item.id, row)"
+                    >{{ item.name }}</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+          <template #right="{ row }">
+            <el-button link type="success" size="small" :icon="View" @click="openProjectDrawer('view', row)"
+              >详情</el-button
+            >
           </template>
         </TableBase>
       </div>
     </transition>
+    <Drawer ref="drawerRef" :handleClose="callbackDrawer" size="50%">
+      <template #header="{ params }">
+        <h4 :id="params.titleId" :class="params.titleClass">项目 - 详情</h4>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" :rules="rules">
+        <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="T_name">
+          <el-input
+            v-model="form.T_name"
+            class="w-50"
+            :disabled="true"
+            type="text"
+            autocomplete="off"
+            placeholder="请输入项目名称"
+          />
+        </el-form-item>
+        <el-form-item label="项目结束日期：" :label-width="formLabelWidth" prop="T_end_date">
+          <el-date-picker
+            style="flex: 0 0 50%"
+            class="my-date-picker"
+            v-model="form.T_end_date"
+            :disabled="true"
+            type="date"
+            placeholder="项目结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="项目立项日期：" :label-width="formLabelWidth" prop="T_set_up_date">
+          <el-date-picker
+            style="flex: 0 0 50%"
+            class="my-date-picker"
+            v-model="form.T_set_up_date"
+            :disabled="true"
+            type="date"
+            placeholder="项目立项日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="项目简介：" :label-width="formLabelWidth" prop="T_description">
+          <el-input
+            v-model="form.T_description"
+            :disabled="true"
+            :autosize="{ minRows: 6, maxRows: 8 }"
+            type="textarea"
+            placeholder="请输入项目简介"
+          />
+        </el-form-item>
+        <el-form-item label="项目明细：" :label-width="formLabelWidth" prop="T_detail">
+          <ProjectDetail ref="projectDetailRef" :disabled="true" :isShow="false"></ProjectDetail>
+        </el-form-item>
+        <el-form-item label="计划完成周期：" :label-width="formLabelWidth" prop="T_planning_cycle">
+          <div style="display: flex; white-space: nowrap; flex: 1">
+            <el-input
+              v-model="form.T_planning_cycle"
+              style="flex: 0 0 33.33%"
+              :disabled="true"
+              type="text"
+              autocomplete="off"
+              placeholder="请输入计划完成周期"
+            />
+            <span style="margin: 0 10px">工作日</span>
+            <span style="color: #bbb"
+              ><el-icon><QuestionFilled /></el-icon>备注;根据项目明细计划时间自动计算</span
+            >
+          </div>
+        </el-form-item>
+        <el-form-item label="实际完成周期：" :label-width="formLabelWidth" prop="T_reality_cycle">
+          <div style="display: flex; white-space: nowrap; flex: 1">
+            <el-input
+              v-model="form.T_reality_cycle"
+              class="w-50"
+              :disabled="true"
+              type="text"
+              autocomplete="off"
+              placeholder="请输入实际完成周期"
+            />
+            <span style="margin: 0 10px">工作日</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="提前完成天数：" :label-width="formLabelWidth" prop="T_advance_day">
+          <div style="display: flex; white-space: nowrap; flex: 1">
+            <el-input
+              v-model="form.T_advance_day"
+              class="w-50"
+              :disabled="true"
+              type="text"
+              autocomplete="off"
+              placeholder="请输入提前完成天数"
+            />
+            <span style="margin: 0 10px">工作日</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="奖励金额：" :label-width="formLabelWidth" prop="T_bonus">
+          <div style="display: flex; white-space: nowrap; flex: 1">
+            <el-input
+              v-model="form.T_bonus"
+              class="w-50"
+              :disabled="true"
+              type="text"
+              autocomplete="off"
+              placeholder="请输入奖励金额"
+            />
+            <span style="margin: 0 10px">元</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="绩效总金额：" :label-width="formLabelWidth" prop="T_Perf">
+          <div style="display: flex; white-space: nowrap; flex: 1">
+            <el-input
+              v-model="form.T_Perf"
+              class="w-50"
+              :disabled="true"
+              type="text"
+              autocomplete="off"
+              placeholder="请输入绩效总金额"
+            />
+            <span style="margin: 0 10px">元</span>
+          </div>
+        </el-form-item>
+      </el-form>
+    </Drawer>
   </div>
 </template>
 
 <style scoped lang="scss">
 @import '@/styles/var.scss';
-:deep(.el-table--enable-row-hover .el-table__body tr > td) {
-  transition: all 0.5s ease-in-out;
-}
-:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
-  box-shadow: 0 0 6px #dfdfdf;
-  transform: translateX(-2px);
-}
 .project-finance {
+  width: 100%;
   height: 100%;
   display: flex;
   overflow: hidden;
@@ -126,8 +316,8 @@ const tableRowClassName = (data: any): any => {
   }
   .project-container {
     @include f-direction;
+    width: calc(100% - 290px);
     z-index: 0;
-    flex: 1;
     margin-left: 12px;
     .box-card {
       border-radius: 8px;
@@ -137,6 +327,9 @@ const tableRowClassName = (data: any): any => {
         transition: all 5s ease-in-out;
       }
     }
+    :deep(.el-table .cell) {
+      white-space: normal !important;
+    }
     .text {
       text-align: left;
     }
@@ -164,5 +357,8 @@ const tableRowClassName = (data: any): any => {
     font-size: 20px;
     color: #707b84;
   }
+  .w-50 {
+    flex: 0 0 50%;
+  }
 }
 </style>

src/views/storehouse/InventoryStatistics.vue

@@ -15,6 +15,7 @@ import { GlobalStore } from '@/stores/index'
 import TableBase from '@/components/TableBase/index.vue'
 import type { ColumnProps } from '@/components/TableBase/interface/index'
 import { dayJs } from '@/utils/common'
+import ImageCom from '@/components/Image/index.vue'
 
 const globalStore = GlobalStore()
 const DrawerRef = ref<InstanceType<typeof Drawer> | null>(null)
@@ -83,15 +84,23 @@ const T_date_detail = ref<string[]>([])
 const T_date_export = ref<string[]>([])
 const visible = ref(false)
 const exportExcel = () => (visible.value = true)
-const confirmExpor = async () => {
+const confirmExpor = async (project_id?: string) => {
+  console.log(project_id)
+
   const params = {
     User_tokey: globalStore.GET_User_tokey,
     T_depot_id: initParam.T_depot_id,
     T_start_date: T_date.value[0],
-    T_end_date: T_date.value[1]
+    T_end_date: T_date.value[1],
+    T_project_id: ''
+  }
+  if (typeof project_id === 'number') {
+    params['T_project_id'] = project_id
+  }
+  const res: any = await Storehouse_Stock_Detail_Excel(params)
+  if (res.Code === 200) {
+    window.open(res.Data)
   }
-  const res = await Storehouse_Stock_Detail_Excel(params)
-  console.log(res)
 }
 
 // 拿到仓库列表
@@ -265,19 +274,7 @@ onMounted(() => {
         </div>
       </template>
       <template #T_product_img="{ row }">
-        <el-image
-          fit="cover"
-          style="width: 50px; height: 50px"
-          :src="row.T_product_img"
-          :preview-src-list="[row.T_product_img]"
-          :preview-teleported="true"
-        >
-          <template #error>
-            <div class="image-slot">
-              <el-icon><Picture /></el-icon>
-            </div>
-          </template>
-        </el-image>
+        <ImageCom :src="row.T_product_img" />
       </template>
       <template #right="{ row }">
         <el-button link type="primary" size="small" :icon="List" @click="previewDetail(row.T_product_id)"
@@ -289,6 +286,7 @@ onMounted(() => {
       <template #header="{ params }">
         <h4 :id="params.titleId" :class="params.titleClass">库存明细</h4>
       </template>
+      <el-divider />
       <TableBase
         border
         ref="TableDetailRef"
@@ -301,7 +299,7 @@ onMounted(() => {
         <template #table-header>
           <el-row class="head-search">
             <el-col :span="12"
-              ><el-form-item label="产品名称">
+              ><el-form-item label="日期范围">
                 <el-date-picker
                   v-model="T_date_detail"
                   type="daterange"
@@ -312,6 +310,9 @@ onMounted(() => {
                   value-format="YYYY-MM-DD"
                   @change="dateDetailChange" /></el-form-item
             ></el-col>
+            <el-col :span="12">
+              <el-button type="success" @click="confirmExpor(detailInitParam.T_product_id)">导出</el-button>
+            </el-col>
           </el-row>
         </template>
       </TableBase>
@@ -355,18 +356,5 @@ onMounted(() => {
   .head-search.active {
     height: 85px;
   }
-  .image-slot {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    background: var(--el-fill-color-light);
-    color: var(--el-text-color-secondary);
-    font-size: 30px;
-  }
-  .image-slot .el-icon {
-    font-size: 30px;
-  }
 }
 </style>

src/views/storehouse/ProductionList.vue

@@ -14,8 +14,9 @@ import Drawer from '@/components/Drawer/index.vue'
 import TableBase from '@/components/TableBase/index.vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
-import { Edit, Delete, Picture, Plus } from '@element-plus/icons-vue'
+import { Edit, Delete, Plus } from '@element-plus/icons-vue'
 import type { ColumnProps } from '@/components/TableBase/interface/index'
+import ImageCom from '@/components/Image/index.vue'
 
 const isNew = ref(true)
 const globalStore = GlobalStore()
@@ -187,19 +188,7 @@ onMounted(() => {
         </div>
       </template>
       <template #T_img="{ row }">
-        <el-image
-          style="width: 50px; height: 50px"
-          :src="row.T_img"
-          fit="cover"
-          :preview-src-list="[row.T_img]"
-          :preview-teleported="true"
-        >
-          <template #error>
-            <div class="image-slot">
-              <el-icon><Picture /></el-icon>
-            </div>
-          </template>
-        </el-image>
+        <ImageCom :src="row.T_img" />
       </template>
       <template #T_remark="{ row }">
         <el-tooltip effect="customized" placement="left">
@@ -275,23 +264,6 @@ onMounted(() => {
 }
 .production-list {
   @include f-direction;
-
-  .el-image {
-    cursor: pointer;
-  }
-  .image-slot {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    background: var(--el-fill-color-light);
-    color: var(--el-text-color-secondary);
-    font-size: 30px;
-  }
-  .image-slot .el-icon {
-    font-size: 30px;
-  }
   .input-suffix {
     width: 100%;
     .inline-flex {

src/views/storehouse/inventory/Device.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { GlobalStore } from '@/stores/index'
-import Dialog from '@/components/dialog/Dialog.vue'
 import TableBase from '@/components/TableBase/index.vue'
 import { Storehouse_Device_List } from '@/api/storehouse/index'
 import type { ColumnProps } from '@/components/TableBase/interface/index'
+import ImageCom from '@/components/Image/index.vue'
 
 const globalStore = GlobalStore()
 const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
@@ -24,16 +24,6 @@ const columns: ColumnProps[] = [
   { prop: 'T_State', label: '状态', name: 'T_State' }
 ]
 
-// 查看图片
-const url = ref('')
-const srcList = ref<any[]>([])
-const dialog = ref<InstanceType<typeof Dialog> | null>(null)
-const previewImg = (str: string) => {
-  dialog.value?.DialogOpen()
-  url.value = str
-  srcList.value.push(str)
-}
-
 // 搜索
 const options = reactive([
   { name: '已出库', id: 1 },
@@ -80,18 +70,9 @@ const searchHandle = () => {
         <el-tag v-else type="danger" effect="dark"> 未出库 </el-tag>
       </template>
       <template #T_product_img="{ row }">
-        <el-image
-          v-if="row.T_product_img"
-          style="height: 50px"
-          :src="row.T_product_img"
-          fit="cover"
-          @click="previewImg(row.T_product_img)"
-        />
+        <ImageCom :src="row.T_product_img" />
       </template>
     </TableBase>
-    <Dialog ref="dialog" width="50%">
-      <el-image :src="url" :zoom-rate="1.2" :preview-src-list="srcList" fit="cover" />
-    </Dialog>
   </div>
 </template>
 

src/views/storehouse/inventory/InStorageDetail.vue

@@ -5,6 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 import Drawer from '@/components/Drawer/index.vue'
 import { InStorageInfoType } from '@/hooks/useDepot'
 import { Storehouse_StockIn_Get } from '@/api/storehouse/index'
+import ImageCom from '@/components/Image/index.vue'
 
 const tableData = ref<any[]>([])
 const tableSnData = ref<any[]>([])
@@ -102,15 +103,7 @@ onMounted(() => {
                       <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                       <el-tag v-else type="success" effect="dark">否</el-tag>
                     </span>
-                    <el-image
-                      v-if="item.prop === 'T_product_img'"
-                      style="height: 50px"
-                      :src="row.T_product_img"
-                      :zoom-rate="1.2"
-                      :preview-src-list="[row.T_product_img]"
-                      :preview-teleported="true"
-                      fit="cover"
-                    />
+                    <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
                     <el-tooltip
                       v-if="item.prop === 'T_product_model'"
                       effect="dark"

src/views/storehouse/inventory/InStorageForm.vue

@@ -9,8 +9,7 @@ import InStorageProduct from './InStorageProduct.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { Delete, CirclePlus } from '@element-plus/icons-vue'
 import { Storehouse_StockIn_Add, Storehouse_ProductClass_List } from '@/api/storehouse/index'
-
-type Fn = () => void
+import ImageCom from '@/components/Image/index.vue'
 
 const tableData = ref<any[]>([])
 const globalStore = GlobalStore()
@@ -131,7 +130,7 @@ const deleteProduct = (row: any) => {
   drawerSnRef.value?.deleteDeviceSn(row.Id)
 }
 
-const callbackDrawer = (done: Fn) => {
+const callbackDrawer = (done: () => void) => {
   resetForm(ruleFormRef.value)
   done()
 }
@@ -290,7 +289,7 @@ defineExpose({
                     <el-tag v-if="row.T_relation_sn === 1" effect="dark">是</el-tag>
                     <el-tag v-else type="success" effect="dark">否</el-tag>
                   </span>
-                  <el-image v-if="item.prop === 'T_img'" style="height: 50px" :src="row.T_img" fit="cover" />
+                  <ImageCom v-if="item.prop === 'T_img'" :src="row.T_img" />
                 </template>
               </el-table-column>
               <el-table-column v-if="item.ellipsis && item.prop === 'T_model'" v-bind="item">

src/views/storehouse/inventory/InStorageProduct.vue

@@ -10,8 +10,7 @@ import { GlobalStore } from '@/stores/index'
 import Drawer from '@/components/Drawer/index.vue'
 import { ref, reactive, onMounted, nextTick } from 'vue'
 import { default as vElTableInfiniteScroll } from 'el-table-infinite-scroll'
-
-type Fn = () => void
+import ImageCom from '@/components/Image/index.vue'
 
 let total = 0
 const autoSelect = ref('')
@@ -32,7 +31,7 @@ const initParam = reactive({
   page: 1,
   page_z: 20
 })
-const callbackProductDrawer = (done: Fn) => done()
+const callbackProductDrawer = (done: () => void) => done()
 const querySearchAsync = async (queryString: string) => {
   if (queryString) {
     loading.value = true
@@ -160,6 +159,7 @@ defineExpose({
               <el-select
                 v-model="autoSelect"
                 filterable
+                clearable
                 remote
                 reserve-keyword
                 placeholder="按产品名称搜索"
@@ -204,20 +204,7 @@ defineExpose({
                 <el-tag v-if="row.T_relation_sn === 1" effect="dark">是</el-tag>
                 <el-tag v-else type="success" effect="dark">否</el-tag>
               </span>
-              <el-image
-                v-if="item.prop === 'T_img'"
-                fit="cover"
-                style="width: 50px; height: 50px"
-                :src="row.T_img"
-                :preview-src-list="[row.T_img]"
-                :preview-teleported="true"
-              >
-                <template #error>
-                  <div class="image-slot">
-                    <el-icon><Picture /></el-icon>
-                  </div>
-                </template>
-              </el-image>
+              <ImageCom v-if="item.prop === 'T_img'" :src="row.T_img" />
             </template>
           </el-table-column>
           <el-table-column v-if="item.ellipsis && item.prop === 'T_model'" align="center" v-bind="item">
@@ -267,17 +254,4 @@ defineExpose({
     }
   }
 }
-.image-slot .el-icon {
-  font-size: 30px;
-}
-.image-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-secondary);
-  font-size: 30px;
-}
 </style>

src/views/storehouse/outStock/OutStockDetail.vue

@@ -5,6 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 import Drawer from '@/components/Drawer/index.vue'
 import { Storehouse_StockOut_Get } from '@/api/storehouse/index'
 import { InfoType } from '@/hooks/useDepot'
+import ImageCom from '@/components/Image/index.vue'
 
 const tableSnData = ref<any[]>([])
 const info = ref<InfoType | undefined>()
@@ -105,14 +106,7 @@ onMounted(() => {
                       <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                       <el-tag v-else type="success" effect="dark">否</el-tag>
                     </span>
-                    <el-image
-                      v-if="item.prop === 'T_product_img'"
-                      style="height: 50px"
-                      :src="row.T_product_img"
-                      :preview-src-list="[row.T_product_img]"
-                      :preview-teleported="true"
-                      fit="cover"
-                    />
+                    <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
                     <el-tooltip
                       v-if="item.prop === 'T_product_model'"
                       effect="dark"

src/views/storehouse/outStock/OutStockProduct.vue

@@ -10,8 +10,7 @@ import { GlobalStore } from '@/stores/index'
 import Drawer from '@/components/Drawer/index.vue'
 import { ref, reactive, onMounted, nextTick, watch } from 'vue'
 import { default as vElTableInfiniteScroll } from 'el-table-infinite-scroll'
-
-type Fn = () => void
+import ImageCom from '@/components/Image/index.vue'
 
 let total = 0
 const loading = ref(false)
@@ -32,7 +31,7 @@ const initParam = reactive({
   page: 1,
   page_z: 20
 })
-const callbackProductDrawer = (done: Fn) => done()
+const callbackProductDrawer = (done: () => void) => done()
 const querySearchAsync = async (queryString: string) => {
   if (queryString) {
     loading.value = true
@@ -63,7 +62,7 @@ const handleSelect = (item: any) => {
 const searchModelHandle = () => {
   total = 0
   initParam.page = 1
-  tableProductData.value = []
+  clearProdctData()
   getProductList(props.depotId)
 }
 
@@ -101,7 +100,7 @@ const getNameAsync = async (str: string): Promise<any> => {
  */
 const getProductList = async (depotId: number) => {
   const res: any = await Storehouse_Stock_List({ ...initParam, T_name: autoSelect.value, T_depot_id: depotId })
-  res.Data.Data ? tableProductData.value.push(...res.Data.Data) : (tableProductData.value = [])
+  res.Data.Data ? tableProductData.value.push(...res.Data.Data) : clearProdctData()
   total = res.Data.Num
 }
 
@@ -137,6 +136,7 @@ const productColumns = [
   { prop: 'T_product_relation_sn', label: '关联SN', name: 'T_product_relation_sn' }
 ]
 
+const clearProdctData = () => (tableProductData.value = [])
 const openDrawer = () => drawerProductRef.value?.openDrawer()
 const clearSelection = () => selectTable.value?.clearSelection()
 const selectTableChange = (row: any) => {
@@ -149,6 +149,7 @@ const emit = defineEmits<{ (event: 'ontableData', value: any): void; (event: 'on
 defineExpose({
   openDrawer,
   clearSelection,
+  clearProdctData,
   selectTableChange
 })
 </script>
@@ -173,6 +174,7 @@ defineExpose({
               <el-select
                 v-model="autoSelect"
                 filterable
+                clearable
                 remote
                 reserve-keyword
                 placeholder="按产品名称搜索"
@@ -217,20 +219,7 @@ defineExpose({
                 <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                 <el-tag v-else type="success" effect="dark">否</el-tag>
               </span>
-              <el-image
-                v-if="item.prop === 'T_product_img'"
-                fit="cover"
-                style="width: 50px; height: 50px"
-                :src="row.T_product_img"
-                :preview-src-list="[row.T_product_img]"
-                :preview-teleported="true"
-              >
-                <template #error>
-                  <div class="image-slot">
-                    <el-icon><Picture /></el-icon>
-                  </div>
-                </template>
-              </el-image>
+              <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
             </template>
           </el-table-column>
           <el-table-column v-if="item.ellipsis && item.prop === 'T_model'" align="center" v-bind="item">
@@ -281,17 +270,4 @@ defineExpose({
     }
   }
 }
-.image-slot .el-icon {
-  font-size: 30px;
-}
-.image-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-secondary);
-  font-size: 30px;
-}
 </style>

src/views/storehouse/outStock/ReceiveOutStock.vue

@@ -10,6 +10,7 @@ import ReceiveUser from './receiveUser.vue'
 import InStorageSn from '../inventory/InStorageSn.vue'
 import OutStockProduct from './OutStockProduct.vue'
 import { depotHooks, ReceiveFormType } from '@/hooks/useDepot'
+import ImageCom from '@/components/Image/index.vue'
 
 const router = useRouter()
 const tableData = ref<any[]>([])
@@ -34,7 +35,7 @@ const form = reactive<ReceiveFormType>({
 
 const validate_T_product = (rule: any, value: any, callback: any) => {
   if (value.includes(undefined) || value === '') {
-    callback(new Error('请填写产品数量,数量不能大于库存数量!'))
+    callback(new Error('请填写产品数量,出库数量不能大于库存数量!'))
   } else if (value.includes(null)) {
     callback(new Error('请添加产品SN'))
   } else {
@@ -58,7 +59,7 @@ const columns = [
   { label: '产品规格', prop: 'T_product_spec', align: 'center ' },
   { label: '是否关联SN', prop: 'T_product_relation_sn', align: 'center ', width: 120, name: 'T_relation_sn' },
   { label: '库存数量', prop: 'T_total', align: 'center ' },
-  { label: '*数量', prop: 'count', align: 'center ', name: 'count' },
+  { label: '*出库数量', prop: 'count', align: 'center ', name: 'count' },
   { label: '*关联设备', prop: 'sn', align: 'center ', name: 'sn' },
   { prop: 'operation', label: '操作', width: 80, fixed: 'right' }
 ]
@@ -205,6 +206,7 @@ const getReceiveInfo = ({ T_uuid, T_name }: { T_uuid: string; T_name: string })
 
 // 拿到仓库列表
 const { options } = depotHooks()
+const changeDepot = () => drawerProductRef.value?.clearProdctData()
 </script>
 
 <template>
@@ -218,7 +220,7 @@ const { options } = depotHooks()
         <el-input v-model="form.T_number" disabled type="text" placeholder="系统自动生成" class="w-50" />
       </el-form-item>
       <el-form-item label="出库仓库：" :label-width="formLabelWidth" prop="T_depot_id">
-        <el-select v-model="form.T_depot_id" class="w-50" clearable placeholder="请选择出库仓库~">
+        <el-select v-model="form.T_depot_id" class="w-50" clearable placeholder="请选择出库仓库~" @change="changeDepot">
           <el-option v-for="item in options" :key="item.Id" :label="item.T_name" :value="item.Id" />
         </el-select>
       </el-form-item>
@@ -276,20 +278,7 @@ const { options } = depotHooks()
                   <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                   <el-tag v-else type="success" effect="dark">否</el-tag>
                 </span>
-                <el-image
-                  v-if="item.prop === 'T_product_img'"
-                  fit="cover"
-                  style="width: 50px; height: 50px"
-                  :src="row.T_product_img"
-                  :preview-src-list="[row.T_product_img]"
-                  :preview-teleported="true"
-                >
-                  <template #error>
-                    <div class="image-slot">
-                      <el-icon><Picture /></el-icon>
-                    </div>
-                  </template>
-                </el-image>
+                <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
               </template>
             </el-table-column>
             <el-table-column v-if="item.ellipsis && item.prop === 'T_model'" v-bind="item">

src/views/storehouse/outStock/SaleOutStock.vue

@@ -10,6 +10,7 @@ import InStorageSn from '../inventory/InStorageSn.vue'
 import ContractNumber from './ContractNumber.vue'
 import { depotHooks, SaleFormType, delivery_type } from '@/hooks/useDepot'
 import { Storehouse_StockOut_Add, Storehouse_Contract_Product_List } from '@/api/storehouse/index'
+import ImageCom from '@/components/Image/index.vue'
 
 const router = useRouter()
 const tableData = ref<any[]>([])
@@ -55,7 +56,7 @@ const columns = [
 
 const validate_T_product = (rule: any, value: any, callback: any) => {
   if (value.includes(undefined) || value === '') {
-    callback(new Error('请填写产品数量,数量不能大于库存数量!'))
+    callback(new Error('请填写产品数量,出库数量不能大于库存数量!'))
   } else if (value.includes(null)) {
     callback(new Error('请添加产品SN'))
   } else {
@@ -296,12 +297,7 @@ const { options } = depotHooks()
                   <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                   <el-tag v-else type="success" effect="dark">否</el-tag>
                 </span>
-                <el-image
-                  v-if="item.prop === 'T_product_img'"
-                  style="height: 50px"
-                  :src="row.T_product_img"
-                  fit="cover"
-                />
+                <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
               </template>
             </el-table-column>
             <el-table-column v-if="item.ellipsis && item.prop === 'T_model'" v-bind="item">

src/views/storehouse/outStock/index.scss

@@ -47,17 +47,3 @@
     }
   }
 }
-
-.image-slot .el-icon {
-  font-size: 30px;
-}
-.image-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-secondary);
-  font-size: 30px;
-}

src/views/storehouse/sales/ContractDetail.vue

@@ -5,6 +5,7 @@ import { GlobalStore } from '@/stores/index'
 import { fnMd5 } from '@/utils/common'
 import { ElMessage } from 'element-plus'
 import Drawer from '@/components/Drawer/index.vue'
+import ImageCom from '@/components/Image/index.vue'
 import { Storehouse_Contract_Get, Storehouse_Contract_Approval } from '@/api/storehouse/index'
 
 interface InfoType {
@@ -155,14 +156,7 @@ onUnmounted(() => {
                       <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                       <el-tag v-else type="success" effect="dark">否</el-tag>
                     </span>
-                    <el-image
-                      v-if="item.prop === 'T_product_img'"
-                      style="height: 50px"
-                      :src="row.T_product_img"
-                      :preview-src-list="[row.T_product_img]"
-                      :preview-teleported="true"
-                      fit="cover"
-                    />
+                    <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
                     <el-tooltip
                       v-if="item.prop === 'T_product_model'"
                       effect="dark"

src/views/storehouse/sales/ContractForm.vue

@@ -16,6 +16,7 @@ import {
 } from '@/api/storehouse/index'
 import { ElMessage } from 'element-plus'
 import { default as vElTableInfiniteScroll } from 'el-table-infinite-scroll'
+import ImageCom from '@/components/Image/index.vue'
 
 let selectProductData: any[] = []
 const isNew = ref(true)
@@ -50,6 +51,10 @@ const rules = reactive<FormRules>({
 const callbackDrawer = (done: Fn) => {
   resetForm(ruleFormRef.value)
   isNew.value = true
+  initParam.T_class = ''
+  initParam.T_model = ''
+  initParam.T_name = ''
+  tableProductData.value = []
   done()
 }
 const callbackProductDrawer = (done: Fn) => done()
@@ -197,7 +202,7 @@ const getProductClassList = async () => {
 }
 // 获取产品型号
 const getProductModelList = async () => {
-  const res: any = await Storehouse_Product_Model_List({ T_name: autoSelect.value })
+  const res: any = await Storehouse_Product_Model_List({ T_name: initParam.T_name })
   modelOptions.value = res.Data.map((item: any, index: number) => {
     return {
       value: item,
@@ -206,9 +211,9 @@ const getProductModelList = async () => {
   })
 }
 const AddProductionDetailed = () => {
-  // getProductList()
   !classOptions.value.length && getProductClassList()
   drawerProductRef.value?.openDrawer()
+  !tableProductData.value.length && getProductList()
 }
 
 // 搜索模型
@@ -246,7 +251,7 @@ const load = () => {
 let total = 0
 const tableProductData = ref<any[]>([])
 const getProductList = async () => {
-  const res: any = await Storehouse_Product_List({ ...initParam, T_name: autoSelect.value })
+  const res: any = await Storehouse_Product_List({ ...initParam })
   tableProductData.value.push(...res.Data.Data)
   total = res.Data.Num
   if (!isNew.value) {
@@ -285,7 +290,6 @@ const productColumns = [
 
 // 自动搜索
 const loading = ref(false)
-const autoSelect = ref('')
 const querySearchAsync = async (queryString: string) => {
   if (queryString) {
     loading.value = true
@@ -376,7 +380,7 @@ defineExpose({
                     <el-tag v-if="row.T_relation_sn === 1" effect="dark">是</el-tag>
                     <el-tag v-else type="success" effect="dark">否</el-tag>
                   </span>
-                  <el-image v-if="item.prop === 'T_img'" style="height: 50px" :src="row.T_img" fit="cover" />
+                  <ImageCom v-if="item.prop === 'T_img'" :src="row.T_img" />
                 </template>
               </el-table-column>
               <el-table-column v-bind="item" v-if="item.fixed === 'right'">
@@ -455,7 +459,7 @@ defineExpose({
                   <el-col :xl="7" :lg="8" :md="10" class="d-flex">
                     <span class="inline-flex items-center">产品名称：</span>
                     <el-select
-                      v-model="autoSelect"
+                      v-model="initParam.T_name"
                       filterable
                       remote
                       reserve-keyword
@@ -494,6 +498,7 @@ defineExpose({
               :data="tableProductData"
               style="width: 100%; height: 99%"
               v-el-table-infinite-scroll="load"
+              :infinite-scroll-immediate="false"
               :header-cell-style="{ background: '#dedfe0', height: '50px' }"
               @selection-change="ProductselectionChange"
             >
@@ -509,7 +514,7 @@ defineExpose({
                       <el-tag v-if="row.T_relation_sn === 1" effect="dark">是</el-tag>
                       <el-tag v-else type="success" effect="dark">否</el-tag>
                     </span>
-                    <el-image v-if="item.prop === 'T_img'" style="height: 50px" :src="row.T_img" fit="cover" />
+                    <ImageCom v-if="item.prop === 'T_img'" :src="row.T_img" />
                   </template>
                 </el-table-column>
                 <el-table-column v-if="item.ellipsis && item.prop === 'T_model'" align="center" v-bind="item">

src/views/workAttendance/Overtime.vue

@@ -8,6 +8,7 @@ import TableBase from '@/components/TableBase/index.vue'
 import { ColumnProps } from '@/components/TableBase/interface/index'
 import { Overtime_List, Overtime_Approval } from '@/api/workAttendance/index'
 import { useTablePublic, OvertimeUserInfoIn } from '@/hooks/useTablePublic'
+import ImageCom from '@/components/Image/index.vue'
 
 const TableRef = ref()
 const globalStore = GlobalStore()
@@ -107,14 +108,7 @@ const LeaveUser = async (T_State: number) => {
             </div>
             <div style="display: flex">
               <span>取证：</span>
-              <el-image
-                v-if="userInfo.T_prove_img"
-                style="width: 200px"
-                :preview-src-list="[userInfo.T_prove_img]"
-                :preview-teleported="true"
-                :src="userInfo.T_prove_img"
-                fit="cover"
-              />
+              <ImageCom v-if="userInfo.T_prove_img" :src="userInfo.T_prove_img" />
               <span v-else>无</span>
             </div>
             <div>
@@ -128,63 +122,6 @@ const LeaveUser = async (T_State: number) => {
           </div>
         </el-card>
       </div>
-      <!-- <el-row class="h-100 f-1 margin-left-3" v-if="userInfo.Id">
-        <el-col :span="24" class="h-100" style="overflow: hidden; display: flex; flex-direction: column">
-          <el-card class="m-b-3 b-show-0">
-            <h3 class="title-user m-b-5">员工基本信息</h3>
-            <div class="info-content">
-              <el-avatar shape="square" size="large" :icon="UserFilled" />
-              <div class="info-name">
-                <h4 class="m-b-3">名字：{{ userInfo.T_user_name }}</h4>
-              </div>
-            </div>
-          </el-card>
-          <el-card class="b-show-0 f-1">
-            <el-row>
-              <el-col :span="12"
-                ><div>
-                  开始时间：<el-tag v-if="userInfo.T_start_time" type="success" effect="dark">
-                    {{ userInfo.T_start_time }}
-                  </el-tag>
-                </div></el-col
-              >
-              <el-col :span="12"
-                ><div>
-                  结束时间：<el-tag v-if="userInfo.T_end_time" type="success" effect="dark">
-                    {{ userInfo.T_end_time }}
-                  </el-tag>
-                </div></el-col
-              >
-            </el-row>
-            <el-row>
-              <el-col :span="12"
-                ><div>
-                  加班时长：<el-tag v-if="userInfo.T_duration" type="success" effect="dark">
-                    {{ getFormatDuration(userInfo.T_duration as any) }}
-                  </el-tag>
-                </div></el-col
-              >
-            </el-row>
-            <el-row>
-              <el-col style="display: flex">
-                取证：
-                <img v-if="userInfo.T_prove_img" :src="userInfo.T_prove_img" class="img" />
-                <span v-else>无</span>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col>
-                <span class="ml-3 w-35 text-gray-600 inline-flex items-center">内容：</span>
-                {{ userInfo.T_text }}
-              </el-col>
-            </el-row>
-            <div class="btn">
-              <el-button type="primary" @click="LeaveUser(1)">通过</el-button>
-              <el-button type="danger" @click="LeaveUser(0)">不通过</el-button>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row> -->
     </transition>
   </div>
 </template>

src/views/workAttendance/records/Records.vue

@@ -9,6 +9,7 @@ import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
 import { ColumnProps } from '@/components/TableBase/interface/index'
 import { useTablePublic } from '@/hooks/useTablePublic'
 import { Leave_User_list, Overtime_User_list, Overtime_Stat } from '@/api/workAttendance/index'
+import ImageCom from '@/components/Image/index.vue'
 
 let clientHeight = ref(0)
 const globalStore = GlobalStore()
@@ -66,7 +67,6 @@ const userInfo = reactive({
 
 // 加班记录
 let url = ''
-let srcList: string[] = []
 const OvertimeEmptyObject = {
   T_start_time: '',
   T_end_time: '',
@@ -112,7 +112,6 @@ const getSalaryParams = (row: any) => {
 // 查看加班记录
 const viewOvertime = (row: any) => {
   url = row.T_prove_img
-  srcList.push(row.T_prove_imgl)
   OvertimeInfo.value = { ...row }
   drawerOvertimeRef.value && drawerOvertimeRef.value.openDrawer()
 }
@@ -121,7 +120,6 @@ const closerOvertime = () => {
   drawerLeaveRef.value && drawerLeaveRef.value.closeDrawer()
   nextTick(() => {
     url = ''
-    srcList = []
     LeaveInfo.value = {}
     OvertimeInfo.value = {}
   })
@@ -258,14 +256,8 @@ const searchHandle = () => TableRef.value?.searchTable()
             ><el-text type="primary">{{ OvertimeInfo.T_end_time }}</el-text></el-descriptions-item
           >
           <el-descriptions-item label="取证：" :span="2">
-            <el-image
-              style="width: 100px; height: 100px"
-              :src="url"
-              :zoom-rate="1.2"
-              :preview-src-list="srcList"
-              :initial-index="4"
-              fit="cover"
-          /></el-descriptions-item>
+            <ImageCom :src="url" />
+          </el-descriptions-item>
           <el-descriptions-item label="内容：">
             <el-text type="primary">{{ OvertimeInfo.T_text }}</el-text>
           </el-descriptions-item>