From 412a21c0e2263a4f92bca4ade781d2311919a48b Mon Sep 17 00:00:00 2001
From: zhang_li <2235006734@qqq.com>
Date: Wed, 6 Dec 2023 15:28:57 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BasicForm/src/BasicForm.vue    |   8 +-
 src/components/Detail/src/TemplateDetails.vue | 241 ++++++++++--------
 src/components/UploadFile/src/Preview.vue     |  11 +
 src/views/spc/detectiontemplate/index.vue     |   4 +-
 .../templateItemDetails.data.ts               |  72 ++++--
 5 files changed, 208 insertions(+), 128 deletions(-)
 create mode 100644 src/components/UploadFile/src/Preview.vue

diff --git a/src/components/BasicForm/src/BasicForm.vue b/src/components/BasicForm/src/BasicForm.vue
index a39623d..7050f3f 100644
--- a/src/components/BasicForm/src/BasicForm.vue
+++ b/src/components/BasicForm/src/BasicForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="isBusiness?'60%':'40%'">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="width?width:isBusiness?'60%':'40%'">
     <Form 
       ref="formRef" 
       v-loading="formLoading" 
@@ -108,6 +108,11 @@ const props = defineProps({
   //   required: false,
   //   default: null
   // },
+  width:{
+    type: String,
+    required: false,
+    default: ''
+  },
 })
 
 const { t } = useI18n() // 国际化
@@ -120,6 +125,7 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 
 const formRef = ref() // 表单 Ref
 const formSchema = ref(props.formAllSchemas?.formSchema)
+const width = ref(props.width)
 
 /** 弹层操作 */
 // formField form表单中的字段
diff --git a/src/components/Detail/src/TemplateDetails.vue b/src/components/Detail/src/TemplateDetails.vue
index 635b88c..2f2463c 100644
--- a/src/components/Detail/src/TemplateDetails.vue
+++ b/src/components/Detail/src/TemplateDetails.vue
@@ -1,70 +1,86 @@
 <template>
   <div>
-    <el-drawer v-model="isShowDrawer" title="模版检测项" direction="rtl" size="80%" v-loading="detailLoading">
-    <!-- <template #header>
+    <el-drawer
+      v-model="isShowDrawer"
+      title="模版检测项"
+      direction="rtl"
+      size="80%"
+      v-loading="detailLoading"
+    >
+      <!-- <template #header>
       <div class="font-size-18px">
         {{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
       </div>
     </template> -->
-    <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <Search :schema="TemplateItemDetails.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <Search
+          :schema="TemplateItemDetails.allSchemas.searchSchema"
+          @search="setSearchParams"
+          @reset="setSearchParams"
+        />
+      </ContentWrap>
 
-    <!-- 列表头部 -->
-    <TableHead
-      :HeadButttondata="HeadButttondata"
-      @button-base-click="buttonBaseClick"
-      :routeName="routeName"
-      @updataTableColumns="updataTableColumns"
-      @searchFormClick="searchFormClick"
-      :allSchemas="TemplateItemDetails.allSchemas"
-    />
+      <!-- 列表头部 -->
+      <TableHead
+        :HeadButttondata="HeadButttondata"
+        @button-base-click="buttonBaseClick"
+        :routeName="routeName"
+        @updataTableColumns="updataTableColumns"
+        @searchFormClick="searchFormClick"
+        :allSchemas="TemplateItemDetails.allSchemas"
+      />
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <Table
-      :columns="tableColumns"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      v-model:sort="tableObject.sort"
-    >
-      <template #code="{row}">
-        <el-button type="primary" link @click="openDetail(row, '代码', row.code)">
-          <span>{{ row.code }}</span>
-        </el-button>
-      </template>
-      <template #action="{ row }">
-        <ButtonBase :Butttondata="butttondata" @button-base-click="buttonTableClick($event,row)" />
-      </template>
-    </Table>
-  </ContentWrap>
+      <!-- 列表 -->
+      <ContentWrap>
+        <Table
+          :columns="tableColumns"
+          :data="tableObject.tableList"
+          :loading="tableObject.loading"
+          :pagination="{
+            total: tableObject.total
+          }"
+          v-model:pageSize="tableObject.pageSize"
+          v-model:currentPage="tableObject.currentPage"
+          v-model:sort="tableObject.sort"
+        >
+          <template #code="{ row }">
+            <el-button type="primary" link @click="openDetail(row, '代码', row.code)">
+              <span>{{ row.code }}</span>
+            </el-button>
+          </template>
+          <template #action="{ row }">
+            <ButtonBase
+              :Butttondata="butttondata"
+              @button-base-click="buttonTableClick($event, row)"
+            />
+          </template>
+        </Table>
+      </ContentWrap>
     </el-drawer>
-  <!-- 表单弹窗：添加/修改 -->
-  <BasicForm
-    ref="basicFormRef"
-    @success="formsSuccess"
-    :rules="TemplateItemDetailsRules"
-    :formAllSchemas="TemplateItemDetails.allSchemas"
-    :searchTableParams="searchTableParams"
-    :apiUpdate="TemplateItemDetailsApi.updateTemplateItemDetails"
-    :apiCreate="TemplateItemDetailsApi.createTemplateItemDetails"
-    @searchTableSuccess="searchTableSuccess"
-    :isBusiness="false"
-  />
-
-</div>
+    <!-- 表单弹窗：添加/修改 -->
+    <BasicForm
+      ref="basicFormRef"
+      @success="formsSuccess"
+      :rules="TemplateItemDetailsRules"
+      :formAllSchemas="TemplateItemDetails.allSchemas"
+      :searchTableParams="searchTableParams"
+      :apiUpdate="TemplateItemDetailsApi.updateTemplateItemDetails"
+      :apiCreate="TemplateItemDetailsApi.createTemplateItemDetails"
+      @searchTableSuccess="searchTableSuccess"
+      :isBusiness="false"
+      :width="width"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
 defineOptions({ name: 'TemplateDetailsDetail' })
 import download from '@/utils/download'
-import { TemplateItemDetails,TemplateItemDetailsRules } from '@/views/spc/detectiontemplate/templateItemDetails.data'
+import {
+  TemplateItemDetails,
+  TemplateItemDetailsRules
+} from '@/views/spc/detectiontemplate/templateItemDetails.data'
 import * as TemplateItemDetailsApi from '@/api/spc/templateItemDetails'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
 const message = useMessage() // 消息弹窗
@@ -72,7 +88,7 @@ const { t } = useI18n() // 国际化
 const route = useRoute() // 路由信息
 const routeName = ref()
 const isShowDrawer = ref(false)
-const templateId = ref("")
+const templateId = ref('')
 // routeName.value = route.name
 // routeName.value = routeName.value.substring(0,routeName.value.length - 4) + 'Detail'
 const props = defineProps({
@@ -136,48 +152,52 @@ const props = defineProps({
     required: false,
     default: null
   },
+  width:{
+    type: String,
+    required: false,
+    default: ''
+  },
 })
 
-
+const tableColumns = ref(TemplateItemDetails.allSchemas.tableColumns)
 const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
-  if(row){
+console.log('tableColumns',tableColumns.value)
+  if (row) {
     isShowDrawer.value = true
-    templateId.value = row.id;
+    templateId.value = row.id
     let param = {
-      templateId:templateId.value
+      templateId: templateId.value
     }
-    setSearchParams(param);
+    await setSearchParams(param)
   }
-  
 }
 defineExpose({ openDetail }) // 提供 open 方法，用于打开弹窗
 
-const formsSuccess = async (formType,data) => {
-      data.templateId = templateId.value;
-      if(data.type=='NUMBER'&& data.upLimit<data.downLimit){
-          message.error('数值型上限值要大于下限')
-          return;
-      }
-      if(data.activeTime==0)data.activeTime = null;
-      if(data.expireTime==0)data.expireTime = null;
-      if (formType === 'create') {
-        await TemplateItemDetailsApi.createTemplateItemDetails(data)
-        message.success(t('common.createSuccess'))
-      } else {
-        await TemplateItemDetailsApi.updateTemplateItemDetails(data)
-        message.success(t('common.updateSuccess'))
-      }
-      basicFormRef.value.dialogVisible = false
-      getList()
+const formsSuccess = async (formType, data) => {
+  data.templateId = templateId.value
+  if (data.type == 'NUMBER' && data.upLimit < data.downLimit) {
+    message.error('数值型上限值要大于下限')
+    return
+  }
+  if (data.activeTime == 0) data.activeTime = null
+  if (data.expireTime == 0) data.expireTime = null
+  if (formType === 'create') {
+    await TemplateItemDetailsApi.createTemplateItemDetails(data)
+    message.success(t('common.createSuccess'))
+  } else {
+    await TemplateItemDetailsApi.updateTemplateItemDetails(data)
+    message.success(t('common.updateSuccess'))
+  }
+  basicFormRef.value.dialogVisible = false
+  getList()
 }
 //主表所需的参数
-const masterParmas=ref({
-  masterId:'',//主表id
-  number: '',//主表单据号
-  status: '',//主表状态 用于控制子表新增编辑按钮显示情况
+const masterParmas = ref({
+  masterId: '', //主表id
+  number: '', //主表单据号
+  status: '' //主表状态 用于控制子表新增编辑按钮显示情况
 })
 routeName.value = route.name
-const tableColumns = ref(TemplateItemDetails.allSchemas.tableColumns)
 
 // 字段设置 更新主列表字段
 const updataTableColumns = (val) => {
@@ -186,12 +206,12 @@ const updataTableColumns = (val) => {
 
 // 查询列表页面参数设置
 const searchTableParams = ref([
-//{
-//  formField: 'productItemCode',
-//  searchTableTitle: '物料信息',
-//  searchTableAllSchemas: Itembasic.allSchemas,
-//  searchTablePage: ItembasicApi.getItembasicPage
-//}
+  //{
+  //  formField: 'productItemCode',
+  //  searchTableTitle: '物料信息',
+  //  searchTableAllSchemas: Itembasic.allSchemas,
+  //  searchTablePage: ItembasicApi.getItembasicPage
+  //}
 ])
 
 const { tableObject, tableMethods } = useTable({
@@ -208,7 +228,7 @@ const HeadButttondata = [
   // defaultButtons.defaultExportBtn({hasPermi:'wms:templateItemDetails:export'}), // 导出
   defaultButtons.defaultFreshBtn(null), // 刷新
   // defaultButtons.defaultFilterBtn(null), // 筛选
-  defaultButtons.defaultSetBtn(null), // 设置
+  defaultButtons.defaultSetBtn(null) // 设置
   // {
   //   label: '自定义扩展按钮',
   //   name: 'zdy',
@@ -221,16 +241,22 @@ const HeadButttondata = [
 
 // 头部按钮事件
 const buttonBaseClick = (val, item) => {
-  if (val == 'add') { // 新增
+  if (val == 'add') {
+    // 新增
     openForm('create')
-  } else if (val == 'import') { // 导入
+  } else if (val == 'import') {
+    // 导入
     handleImport()
-  } else if (val == 'export') { // 导出
+  } else if (val == 'export') {
+    // 导出
     handleExport()
-  } else if (val == 'refresh') { // 刷新
+  } else if (val == 'refresh') {
+    // 刷新
     getList()
-  } else if (val == 'filtrate') { // 筛选
-  } else { // 其他按钮
+  } else if (val == 'filtrate') {
+    // 筛选
+  } else {
+    // 其他按钮
     console.log('其他按钮', item)
   }
 }
@@ -238,14 +264,16 @@ const buttonBaseClick = (val, item) => {
 // 列表-操作按钮
 const butttondata = [
   defaultButtons.mainListEditBtn(null), // 编辑
-  defaultButtons.mainListDeleteBtn(null), // 删除
+  defaultButtons.mainListDeleteBtn(null) // 删除
 ]
 
 // 列表-操作按钮事件
 const buttonTableClick = async (val, row) => {
-  if (val == 'edit') { // 编辑
+  if (val == 'edit') {
+    // 编辑
     openForm('update', row)
-  } else if (val == 'delete') { // 删除
+  } else if (val == 'delete') {
+    // 删除
     handleDelete(row.id)
   }
 }
@@ -253,6 +281,21 @@ const buttonTableClick = async (val, row) => {
 /** 添加/修改操作 */
 const basicFormRef = ref()
 const openForm = (type: string, row?: any) => {
+  if(type=='update')
+  console.log(row)
+  TemplateItemDetails.allSchemas.formSchema.forEach(item=>{
+    if(item.component == 'UploadFile'){
+      if(row[item.field]){
+        item.componentProps.modelValue = [{
+        name:row[item.field],
+        url:row[item.field],
+      }]
+      }else{
+        item.componentProps.modelValue =[]
+      }
+     
+    }
+  })
   basicFormRef.value.open(type, row)
 }
 
@@ -320,9 +363,7 @@ const searchFormClick = (searchData) => {
 
 /** 初始化 **/
 onMounted(async () => {
-  
   // importTemplateData.templateUrl = await TemplateItemDetailsApi.importTemplate()
 })
-
 </script>
 
diff --git a/src/components/UploadFile/src/Preview.vue b/src/components/UploadFile/src/Preview.vue
new file mode 100644
index 0000000..db78c27
--- /dev/null
+++ b/src/components/UploadFile/src/Preview.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="preview">
+   1
+  </div>
+</template>
+<script lang="ts" setup>
+
+</script>
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/spc/detectiontemplate/index.vue b/src/views/spc/detectiontemplate/index.vue
index a67e34b..75a8742 100644
--- a/src/views/spc/detectiontemplate/index.vue
+++ b/src/views/spc/detectiontemplate/index.vue
@@ -63,6 +63,7 @@
     :apiPage="TemplateItemDetailsApi.getTemplateItemDetailsPage"
     :apiDelete="TemplateItemDetailsApi.deleteTemplateItemDetails"
     :Echo="Echo"
+     width="60%"
     @searchTableSuccessDetail="searchTableSuccessDetail"
   />
 
@@ -107,7 +108,8 @@ const { tableObject, tableMethods } = useTable({
 })
 
 // 获得表格的各种操作
-const { getList, setSearchParams } = tableMethods
+const {getList, setSearchParams } = tableMethods
+
 
 // 列表头部按钮
 const HeadButttondata = [
diff --git a/src/views/spc/detectiontemplate/templateItemDetails.data.ts b/src/views/spc/detectiontemplate/templateItemDetails.data.ts
index d47e531..b6eddfa 100644
--- a/src/views/spc/detectiontemplate/templateItemDetails.data.ts
+++ b/src/views/spc/detectiontemplate/templateItemDetails.data.ts
@@ -107,34 +107,54 @@ export const TemplateItemDetails = useCrudSchemas(reactive<CrudSchema[]>([
     isSearch: false,
     isTable:false,
     form:{
-      component:'UploadImg',
+      component:'UploadFile',
+      componentProps:{
+        fileType:['image/jpeg', 'image/png', 'image/gif','video/mp4','video/webm'],
+        fileSize:20,
+        limit:1,
+        upData:{
+          tableId:0,tableName:"detection_template_item_details"
+        },
+        modelValue:[]
+      }
+    }
+  },
+  {
+    label: '工具图',
+    field: 'image2',
+    sort: 'custom',
+    isSearch: false,
+    isTable:false,
+    form:{
+      component:'UploadFile',
+      componentProps:{
+        fileType:['image/jpeg', 'image/png', 'image/gif','video/mp4','video/webm'],
+        fileSize:20,
+        limit:1,
+        upData:{
+          tableId:0,tableName:"detection_template_item_details"
+         }
+      }
+    }
+  },
+  {
+    label: '操作指导书',
+    field: 'image3',
+    sort: 'custom',
+    isSearch: false,
+    isTable:false,
+    form:{
+      component:'UploadFile',
+      componentProps:{
+        fileType:['image/jpeg', 'image/png', 'image/gif','video/mp4','video/webm'],
+        fileSize:20,
+        limit:1,
+        upData:{
+          tableId:0,tableName:"detection_template_item_details"
+         }
+      }
     }
   },
-  // {
-  //   label: '工具图',
-  //   field: 'image2',
-  //   sort: 'custom',
-  //   isSearch: false,
-  //   isTable:false,
-  //   form:{
-  //     component:'UploadImg',
-  //     componentProps:{
-  //       upData:{
-  //         tabelId:1,tableName:"detection"
-  //       }
-  //     }
-  //   }
-  // },
-  // {
-  //   label: '操作指导书',
-  //   field: 'image3',
-  //   sort: 'custom',
-  //   isSearch: false,
-  //   isTable:false,
-  //   form:{
-  //     component:'UploadImg',
-  //   }
-  // },
   {
     label: '创建时间',
     field: 'createTime',

From 1c0214c1f823de2084494c9c85c1cec304f5c133 Mon Sep 17 00:00:00 2001
From: zhang_li <2235006734@qqq.com>
Date: Wed, 6 Dec 2023 15:29:19 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UploadFile/src/UploadFile.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index 4067be5..a12b07b 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -8,10 +8,11 @@
       v-model:file-list="fileList"
       :show-file-list="true"
       :auto-upload="autoUpload"
-      :action="updateUrl+'?tableId='+upData?.tableId+'&tableName='+ upData?.tableName"
+      :action="updateUrl + '?tableId=' + upData?.tableId + '&tableName=' + upData?.tableName"
       :headers="uploadHeaders"
       :limit="props.limit"
       :drag="drag"
+      :accept="fileType.join(',')"
       :before-upload="beforeUpload"
       :on-exceed="handleExceed"
       :on-success="handleFileSuccess"
@@ -26,8 +27,9 @@
           大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
         </div>
         <div style="font-size: 8px;line-height: initial;">
-          格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
+          格式为 <b style="color: #f56c6c">{{ fileType.join(',') }}</b> 的文件
         </div>
+        <Preview/>
       </template>
       <template  v-if="!isShowFile" #file >
           <div>
@@ -38,6 +40,7 @@
 </template>
 <script lang="ts" setup>
 import { PropType } from 'vue'
+import  Preview  from '@/components/UploadFile/src/Preview'
 
 import { propTypes } from '@/utils/propTypes'
 import { getAccessToken, getTenantId } from '@/utils/auth'
@@ -60,15 +63,16 @@ const props = defineProps({
   fileSize: propTypes.number.def(5), // 大小限制(MB)
   limit: propTypes.number.def(5), // 数量限制
   autoUpload: propTypes.bool.def(true), // 自动上传
-  drag: propTypes.bool.def(false), // 拖拽上传
   isShowTip: propTypes.bool.def(true), // 是否显示提示
   isShowFile: propTypes.bool.def(true), // 是否显示上传的文件
   
 })
+console.log('props.upData',props.upData)
 // ========== 上传相关 ==========
 const valueRef = ref(props.modelValue)
 const uploadRef = ref<UploadInstance>()
 const uploadList = ref<UploadUserFile[]>([])
+console.log('props.modelValue',props.modelValue)
 const fileList = props.modelValue && props.modelValue.length > 0 ? ref<UploadUserFile[]>(props.modelValue) : ref<UploadUserFile[]>([])
 const uploadNumber = ref<number>(0)
 const uploadHeaders = ref({
@@ -91,7 +95,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
   })
   const isLimit = file.size < props.fileSize * 1024 * 1024
   if (!isImg) {
-    message.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`)
+    message.error(`文件格式不正确, 请上传${props.fileType.join(',')}格式!`)
     return false
   }
   if (!isLimit) {
@@ -136,7 +140,9 @@ const handleRemove = (file) => {
   }
 }
 const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
-  console.log(uploadFile)
+  console.log('uploadFile',uploadFile)
+  window.open(uploadFile.url)
+
 }
 // 对象转成指定字符串分隔
 const listToString = (list: UploadUserFile[], separator?: string) => {