设备台账

src/components/Detail/src/DetailDeviceLedger.vue

@@ -25,7 +25,7 @@
         />
       </ContentWrap>
 
-      <Tabs :tabsList="tabsList" :current="current" @change="change" :key="tabsKay"/>
+      <Tabs :tabsList="tabsList" :current="current" @change="change" :key="tabsKay" />
       <div class="flex">
         <!-- 详情 -->
         <ContentWrap class="w-[100%]">
@@ -39,37 +39,30 @@
             @searchFormClick="searchFormClick"
             :allSchemas="detailAllSchemas"
           />
-          <!-- 默认单表展现 -->
-          <!-- <Descriptions
-            v-if="isBasic && !tabsExtend"
-            :data="detailData"
-            :schema="allSchemas.detailSchema"
-            :columns="2"
-          /> -->
           <div v-if="isBasic && tabsExtend == 1">
-            <Form
-              ref="imageFormRef"
-              :rules="upImageRules"
-              :schema="imageFormSchemas"
-            />
+            <el-form ref="imageFormRef" :model="imageFormData"  :key="formKey">
+              <el-form-item label="文件上传">
+                <UploadImgs v-model="imageFormData.filePathList"  />
+              </el-form-item>
+            </el-form>
             <el-button type="primary" @click="uploadImage">点击修改</el-button>
           </div>
-          <el-tabs type="border-card" class="demo-tabs" v-model="subIndex"   v-if="isBasic && tabsExtend == 2" @tab-change="handleTabsChange">
-            <el-tab-pane
-              v-for="(item,index) in subTabsList"
-              :key="item.value"
-              :label="item.label"
-              :name="item.value"
-            >
-            <Form
-              :ref="'fileFormRef'"
-              :rules="upFileRules"
-              :schema="fileFormSchemas"
-              :is-col="true"
-            />
-            <el-button type="primary" @click="uploadFile(index)">点击修改</el-button>
-            </el-tab-pane>
-          </el-tabs>
+          <div v-if="isBasic && tabsExtend == 2">
+            <el-tabs class="demo-tabs" v-model="imageParmas.fileBusiType" @tab-change="handleTabsChange">
+              <el-tab-pane
+                v-for="item in subTabsList"
+                :key="item.value"
+                :label="item.label"
+                :name="item.value"
+              />
+            </el-tabs>
+            <el-form ref="fileFormRef" :model="fileFormData" :key="formKey">
+              <el-form-item label="文件上传">
+                <UploadFile v-model="fileFormData.filePathList" :limit="20" />
+              </el-form-item>
+            </el-form>
+            <el-button type="primary" @click="uploadFile">点击修改</el-button>
+          </div>
           <!-- 单表切换tabs 展现table -->
           <Table
             v-if="isBasic && tabsExtend == 3"
@@ -157,9 +150,11 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import BasicForm from '@/components/BasicForm/src/BasicForm.vue'
 import TableHead from '@/components/TableHead/src/TableHead.vue'
 import DetailTable from '@/components/DetailTable/src/DetailTable.vue'
-import { getCurrentInstance} from 'vue'
+import { getCurrentInstance } from 'vue'
 import { get } from 'http'
+import { findIndex } from '@/utils'
 const { proxy } = getCurrentInstance()
+const changeFile = () => {}
 
 defineOptions({ name: 'Detail' })
 
@@ -295,33 +290,12 @@ const props = defineProps({
     required: false,
     default: false
   },
-  // 详情上传图片
-  upImageRules: {
-    type: Array,
-    required: false,
-    default: null
-  },
-  imageFormAllSchemas: {
-    type: Object,
-    required: true,
-    default: null
-  },
   // 详情上传文件
   upFileRules: {
     type: Array,
     required: false,
     default: null
   },
-  fileFormAllSchemas: {
-    type: Object,
-    required: true,
-    default: null
-  },
-  subIndex: {
-    type: String,
-    required: false,
-    default: 'A'
-  },
   // 获取图片详情方法
   getImageApi: {
     type: Function,
@@ -333,21 +307,24 @@ const props = defineProps({
     type: Function,
     required: false,
     default: null
-  },
+  }
+})
+const imageFormData = ref({
+  filePathList: []
+})
+const fileFormData = ref({
+  filePathList: []
 })
-const subIndex =  ref(props.subIndex)
+const subIndex = ref('A')
 const isShowDrawer = ref(false)
 const detailLoading = ref(false)
 const tabsList = ref(JSON.parse(JSON.stringify(props.tabs ? props.tabs : '')))
 const subTabsList = ref(JSON.parse(JSON.stringify(props.subTabs ? props.subTabs : '')))
 
-const imageFormSchemas = ref(props.imageFormAllSchemas?.formSchema)
-const fileFormSchemas = ref(props.fileFormAllSchemas?.formSchema)
-console.log('imageFormSchemas', imageFormSchemas.value)
 
 // Tabs当前选择
 const current = ref(0)
-const imageParmas=ref({
+const imageParmas = ref({
   funcCode: 'device_mould_picture', //获取图片详情参数
   fileBusiType: '' //获取图片详情参数
 })
@@ -355,17 +332,24 @@ const change = (item, index) => {
   current.value = index
   if (item.prop == 'Image') {
     imageParmas.value.funcCode = 'device_mould_picture'
+    imageParmas.value.fileBusiType = ''
+    getImage()
   } else if (item.prop == 'Word') {
-    imageParmas.value.funcCode  = 'device_mould_attachment'
-  } else{
-    imageParmas.value.funcCode  = ''
+    imageParmas.value.funcCode = 'device_mould_attachment'
+    imageParmas.value.fileBusiType = 'A'
+    subIndex.value = 'A'
+    formKey.value += 1
+    getImage()
+  } else {
+    imageParmas.value.funcCode = ''
+    imageParmas.value.fileBusiType = ''
   }
   emit('changeTabs', item)
 }
 
 //主表所需的参数
 const masterParmas = ref({
-  number: '' ,//主表id
+  number: '' //主表id
 })
 
 // 列表头部按钮
@@ -376,12 +360,12 @@ const buttondata = ref()
 const detailData = ref()
 const titleNameRef = ref()
 const titleValueRef = ref()
-const tabsKay =ref(0)//刷新tabs组件key值
+const tabsKay = ref(0) //刷新tabs组件key值
 const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
   titleNameRef.value = titleName
   titleValueRef.value = titleValue
   current.value = 0
-  tabsKay.value+=1
+  tabsKay.value += 1
   // 加载明细列表
   if (!props.isBasic || (props.isBasic && props.tabsExtend)) {
     // 设置主表id
@@ -394,11 +378,13 @@ const openDetail = async (row: any, titleName: any, titleValue: any, tableName:
     }
   }
   isShowDrawer.value = true
+  
+  imageParmas.value.funcCode = 'device_mould_picture'
+
   if (row) {
-    console.log(row)
     detailLoading.value = true
     try {
-    await getImage()
+      await getImage()
       detailData.value = row
       // 判断详情新增按钮是否显示
       if (routeName.value.indexOf('Job') > -1) {
@@ -470,19 +456,24 @@ const openDetail = async (row: any, titleName: any, titleValue: any, tableName:
 defineExpose({ openDetail }) // 提供 open 方法，用于打开弹窗
 
 // 获取图片详情
-const getImage=()=>{
-  props.getImageApi({
-    number:masterParmas.value.number,
-    funcCode:imageParmas.value.funcCode,
-    fileBusiType:imageParmas.value.fileBusiType
-  }).then((res)=>{
-    console.log(res)
-    nextTick(() => {
-       imageFormRef.value.setValues({
-        filePathList:res
-       })
+const formKey = ref(0)
+const getImage = () => {
+  props
+    .getImageApi({
+      number: masterParmas.value.number,
+      funcCode: imageParmas.value.funcCode,
+      fileBusiType: imageParmas.value.fileBusiType
+    })
+    .then((res) => {
+      nextTick(() => {
+        if (imageParmas.value.funcCode == 'device_mould_picture') {
+          imageFormData.value.filePathList = res
+        } else {
+          fileFormData.value.filePathList = res
+          formKey.value += 1
+        }
       })
-  })
+    })
 }
 
 const tableObjectRef = ref()
@@ -588,8 +579,7 @@ const emit = defineEmits([
   'detailOpenForm',
   'tableFormButton',
   'openImage',
-  'subTabsChick',
-  'uploadFile'
+  'subTabsChick'
 ])
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
@@ -640,17 +630,18 @@ const openImage = (item) => {
 }
 const imageFormRef = ref()
 // 上传图片
-const uploadImage =async () => {
-  const elForm = unref(imageFormRef)?.getElFormRef()
-  // 校验表单
-  if (!elForm) return
-  const valid = await elForm.validate()
-  if (!valid) return
+const uploadImage = async () => {
+  // const elForm = unref(imageFormRef)?.getElFormRef()
+  // // 校验表单
+  // if (!elForm) return
+  // const valid = await elForm.validate()
+  // if (!valid) return
+  imageFormData
   let data = {
-    number:masterParmas.value.number,
-    filePathList: imageFormRef.value.formModel.filePathList.map((item) => item.url),
+    number: masterParmas.value.number,
+    filePathList: imageFormData.value.filePathList.map((item) => item.url),
     funcCode: imageParmas.value.funcCode,
-    fileBusiType:   imageParmas.value.fileBusiType  ?   imageParmas.value.fileBusiType  : ''
+    fileBusiType: imageParmas.value.fileBusiType ? imageParmas.value.fileBusiType : ''
   }
   props.uploadImage(data).then((res) => {
     message.success('修改成功')
@@ -659,23 +650,29 @@ const uploadImage =async () => {
 }
 // 选择二级tabs
 const fileFormRef = ref()
-const  handleTabsChange=(e)=>{
-  emit('subTabsChick',e)
+const handleTabsChange = (e) => {
+  imageParmas.value.fileBusiType = e
+  getImage()
 }
 // 上传文件
-const uploadFile=async(index)=>{
-  let _lists = fileFormRef.value?.map(v => unref(v)?.getElFormRef())
-  const elForm = _lists[index]
-  // 校验表单
-  if (!elForm) return
-  const valid = await elForm.validate()
-  if (!valid) return
-  console.log(fileFormRef.value.formModel)
-  emit(
-    'uploadFile',
-    masterParmas.value.number,
-    fileFormRef.value.formModel.filePathList.map((item) => item.url)
-  )
+const uploadFile = async () => {
+  console.log(fileFormData.value.filePathList)
+  // const elForm = unref(fileFormRef)?.getElFormRef()
+  // // 校验表单
+  // if (!elForm) return
+  // const valid = await elForm.validate()
+  // if (!valid) return
+  // console.log(fileFormRef.value?.formModel.filePathList)
+  let data = {
+    number: masterParmas.value.number,
+    filePathList: fileFormData.value.filePathList.map((item) => item.url),
+    funcCode: imageParmas.value.funcCode,
+    fileBusiType: imageParmas.value.fileBusiType ? imageParmas.value.fileBusiType : ''
+  }
+  props.uploadImage(data).then((res) => {
+    message.success('修改成功')
+    getImage()
+  })
 }
 //监视属性
 watch(

src/components/UploadFile/src/UploadFile.vue

@@ -69,6 +69,7 @@ const props = defineProps({
 const valueRef = ref(props.modelValue)
 const uploadRef = ref<UploadInstance>()
 const uploadList = ref<UploadUserFile[]>([])
+console.log('88',props.modelValue)
 const fileList = props.modelValue && props.modelValue.length > 0 ? ref<UploadUserFile[]>(props.modelValue) : ref<UploadUserFile[]>([])
 const uploadNumber = ref<number>(0)
 const uploadHeaders = ref({
@@ -116,7 +117,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
     fileList.value = fileList.value.concat(uploadList.value)
     uploadList.value = []
     uploadNumber.value = 0
-    emit('update:modelValue', listToString(fileList.value))
+    emit('update:modelValue', fileList.value)
   }
 }
 // 文件数超出提示
@@ -137,6 +138,7 @@ const handleRemove = (file) => {
 }
 const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
   console.log(uploadFile)
+  window.open(uploadFile.url)
 }
 // 对象转成指定字符串分隔
 const listToString = (list: UploadUserFile[], separator?: string) => {

src/views/eam/device/deviceAccounts/deviceAccounts.data.ts

@@ -157,21 +157,7 @@ export const UpImage = useCrudSchemas(reactive<CrudSchema[]>([
     }
   },
 ]))
-// 表单校验
-export const UpFileRules = reactive({
-  filePath: [required],
-})
-export const UploadFile = useCrudSchemas(reactive<CrudSchema[]>([
-  {
-    label: '上传文件',
-    field: 'filePathList',
-    sort: 'custom',
-    isForm: true,
-    form:{
-      component:'UploadFile',
-      componentProps:{
-        limit:10
-      }
-    }
-  },
-]))
+// // 表单校验
+// export const UpFileRules = reactive({
+//   filePath: [required],
+// })

src/views/eam/device/deviceAccounts/index.vue

@@ -68,12 +68,6 @@
     :apiPage="apiPage"
     :tabsExtend="tabsExtend"
     :tableObjectExtend="tableObjectExtend"
-    :imageFormAllSchemas="UpImage.allSchemas"
-    :upImageRules="UpImageRules"
-    :fileFormAllSchemas="UploadFile.allSchemas"
-    :upFileRules="UpFileRules"
-    @subTabsChick="subTabsChick"
-    @uploadFile="uploadFile"
     :getImageApi="uploadApi.getImage"
     :uploadImage="uploadApi.uploadImage"
   />
@@ -92,10 +86,7 @@ import download from '@/utils/download'
 import {
   DeviceAccounts,
   DeviceAccountsRules,
-  UpImage,
-  UpImageRules,
-  UploadFile,
-  UpFileRules
+  UpImage
 } from './deviceAccounts.data'
 import { Item } from '@/views/eam/basic/item/item.data'
 import * as ItemApi from '@/api/eam/basic/item'
@@ -321,6 +312,7 @@ const changeTabs = (item) => {
     // apiPage.value = deviceRepairApi.getDeviceRepairPage
     // detailAllSchemas.value = DeviceRepair.allSchemas
   } else if (item.prop == 'DeviceReportRecord') {
+    console.log(item.prop)
     tabsExtend.value = 3 
      apiPage.value = deviceRepairApi.getDeviceRepairPage
     detailAllSchemas.value = DeviceRepair.allSchemas
@@ -346,23 +338,8 @@ const changeTabs = (item) => {
     }
   ]
 }
-// 二级切换事件
-const fileBusiType = ref()
-const subTabsChick = (e) => {
-  fileBusiType.value = e
-}
-// 上传文件
-const uploadFile = (number, filePath) => {
-  let data = {
-    number,
-    filePathList: filePath,
-    funcCode: funcCode.value,
-    fileBusiType: fileBusiType.value ? fileBusiType.value : ''
-  }
-  uploadApi.uploadImage(data).then((res) => {
-    console.log(res)
-  })
-}
+
+
 /** 初始化 **/
 onMounted(async () => {
   getList()