From 93dd254e5ec4fc6c5d2f9f32841c1d80d555f2b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=96=AA=E5=90=8D?= <942005050@qq.com>
Date: Thu, 23 Nov 2023 15:04:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=9B=9E=E6=BB=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Detail/src/Detail.vue | 294 ++++++++++-----------------
 1 file changed, 109 insertions(+), 185 deletions(-)

diff --git a/src/components/Detail/src/Detail.vue b/src/components/Detail/src/Detail.vue
index d21abe6e6..72328df89 100644
--- a/src/components/Detail/src/Detail.vue
+++ b/src/components/Detail/src/Detail.vue
@@ -1,100 +1,69 @@
 <template>
   <div>
-    <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 v-if="!isBasic">
-        <Descriptions
-          :data="detailData"
-          labelClassName="label-class-name"
-          label-align="left"
-          direction="vertical"
-          :column="8"
-          :schema="allSchemas.detailSchema"
-          :columns="2"
-          width="200px"
+  <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 v-if="!isBasic">
+      <Descriptions :data="detailData" labelClassName="label-class-name" label-align="left" direction="vertical"
+        :column="8" :schema="allSchemas.detailSchema" :columns="2" width="200px" />
+    </ContentWrap>
+      
+    <Tabs :tabsList="tabsList" :current="current" @change="change" />
+    <div class="flex" v-if="current == 0">
+      <!-- 详情 -->
+      <ContentWrap class="w-[73%]">
+        <!-- 列表头部 -->
+        <TableHead 
+          v-if="!isBasic"
+          :HeadButttondata="HeadButttondata" 
+          :masterId="masterParmas.masterId"
+          @button-base-click="buttonBaseClick" 
+          :routeName="routeName"
+          @searchFormClick="searchFormClick"
+          :allSchemas="detailAllSchemas"
         />
+        <Descriptions v-if="isBasic" :data="detailData" :schema="allSchemas.detailSchema" :columns="2" />
+        <Table 
+          v-if="!isBasic"
+          :columns="detailAllSchemas.tableColumns" 
+          :data="tableObject.tableList" 
+          :loading="tableObject.loading"
+          :pagination="{ total: tableObject.total }" 
+          v-model:pageSize="tableObject.pageSize"
+          v-model:currentPage="tableObject.currentPage" >
+          <template #action="{ row }">
+            <ButtonBase :Butttondata="buttondata" @button-base-click="buttonTableClick($event, row)" />
+          </template>
+        </Table>
       </ContentWrap>
-
-      <Tabs :tabsList="tabsList" :current="current" @change="change" />
-      <div class="flex">
-        <!-- 详情 -->
-        <ContentWrap class="w-[73%]">
-          <!-- 列表头部 -->
-          <TableHead
-            v-if="!isBasic"
-            :HeadButttondata="HeadButttondata"
-            :masterId="masterParmas.masterId"
-            @button-base-click="buttonBaseClick"
-            :routeName="routeName"
-            @searchFormClick="searchFormClick"
-            :allSchemas="detailAllSchemas"
-          />
-          <Descriptions
-            v-if="isBasic"
-            :data="detailData"
-            :schema="allSchemas.detailSchema"
-            :columns="2"
-          />
-          <Table
-            v-if="!isBasic"
-            :columns="tableColumnsRef"
-            :data="tableObjectRef.tableList"
-            :loading="tableObjectRef.loading"
-            :pagination="{ total: tableObjectRef.total }"
-            v-model:pageSize="tableObjectRef.pageSize"
-            v-model:currentPage="tableObjectRef.currentPage"
-          >
-            <template #action="{ row }">
-              <ButtonBase
-                :Butttondata="buttondata"
-                @button-base-click="buttonTableClick($event, row)"
-              />
-            </template>
-          </Table>
-        </ContentWrap>
-        <ContentWrap class="w-[27%] ml-16px">
-          <!-- 附件组件 -->
-          <Annex
-            :annexData="annexData"
-            @handleAnnexSuccess="handleAnnexSuccess"
-            @deleteAnnexSuccess="deleteAnnexSuccess"
-            :upData="remarksData.data"
-          />
-          <!-- 备注组件 -->
-          <Remarks
-            :remarksData="remarksData"
-            class="mt-20px"
-            @remarksSubmitScuess="remarksSubmitScuess"
-          />
-          <!-- 变更记录组件 -->
-          <ChangeRecord :changeRecordData="changeRecordData" class="mt-20px" />
-        </ContentWrap>
-      </div>
-    </el-drawer>
-    <!-- 表单弹窗：添加/修改 -->
-    <BasicForm
-      ref="formRef"
-      @success="submitForm"
-      :rules="detailAllSchemasRules"
-      :formAllSchemas="detailAllSchemas"
-      :isBusiness="false"
-      :apiUpdate="apiUpdate"
-      :apiCreate="apiCreate"
-      @searchTableSuccess="searchTableSuccess"
-      :detailData="detailData"
-      @submitForm="submitForm"
-    />
-  </div>
+      <ContentWrap class="w-[27%] ml-16px">
+        <!-- 附件组件 -->
+        <Annex :annexData="annexData" @handleAnnexSuccess="handleAnnexSuccess" @deleteAnnexSuccess="deleteAnnexSuccess" :upData="remarksData.data"/>
+        <!-- 备注组件 -->
+        <Remarks :remarksData="remarksData"  class="mt-20px"
+          @remarksSubmitScuess="remarksSubmitScuess" />
+        <!-- 变更记录组件 -->
+        <ChangeRecord :changeRecordData="changeRecordData" class="mt-20px" />
+      </ContentWrap>
+    </div>
+  </el-drawer>
+  <!-- 表单弹窗：添加/修改 -->
+  <BasicForm 
+    ref="formRef" 
+    @success="getList" 
+    :rules="detailAllSchemasRules" 
+    :formAllSchemas="detailAllSchemas"
+    :isBusiness="false"
+    :apiUpdate="apiUpdate"
+    :apiCreate="apiCreate"
+    @searchTableSuccess="searchTableSuccess"
+    :detailData="detailData"
+    @submitForm="submitForm"
+  />
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -116,7 +85,7 @@ const { t } = useI18n() // 国际化
 const route = useRoute() // 路由信息
 const routeName = ref()
 routeName.value = route.name
-routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
+routeName.value = routeName.value.substring(0,routeName.value.length - 4) + 'Detail'
 
 const props = defineProps({
   // 标签参数
@@ -178,31 +147,22 @@ const props = defineProps({
     type: Array,
     required: false,
     default: null
-  }
+  },
 })
 const isShowDrawer = ref(false)
 const detailLoading = ref(false)
 const tabsList = ref(JSON.parse(JSON.stringify(props.tabs ? props.tabs : '')))
 
-if (props.isBasic == true) {
-  if (tabsList.value && tabsList.value.length > 0) {
-    tabsList.value.unshift({
-      label: '详情',
-      prop: 'Detail'
-    })
-  }
+if (tabsList.value && tabsList.value.length > 0) {
+  tabsList.value.unshift({
+    label: '详情',
+    prop: 'Detail'
+  })
 } else {
-  if (tabsList.value && tabsList.value.length > 0) {
-  } else {
-    tabsList.value = [
-      {
-        label: '明细',
-        prop: 'Detail'
-      }
-    ]
-  }
-}
-if (tabsList.value) {
+  tabsList.value = [{
+    label: '明细',
+    prop: 'Detail'
+  }]
 }
 
 // 附件默认数据
@@ -213,14 +173,14 @@ const annexData = reactive({
 // 备注数据
 const remarksData = reactive({
   remarksList: [],
-  data: {}
+  data:{}
 })
 
 // 变更记录默认数据
 const changeRecordData = reactive({
   changeRecordList: []
 })
-const detailData = ref({}) //详情数据
+const detailData = ref({})//详情数据
 // 获取附件列表篇
 const getFileList = async () => {
   detailLoading.value = true
@@ -234,9 +194,11 @@ const getFileList = async () => {
 const handleAnnexSuccess = () => {
   getFileList()
   getChangeRecordList()
+
 }
 // 删除附件成功之后所走的方法
 const deleteAnnexSuccess = async () => {
+
   getFileList()
   getChangeRecordList()
 }
@@ -245,14 +207,13 @@ const deleteAnnexSuccess = async () => {
 const current = ref(0)
 const change = (item, index) => {
   current.value = index
-  emit('changeTabs', item)
 }
 
 //主表所需的参数
-const masterParmas = ref({
-  masterId: '', //主表id
-  number: '', //主表单据号
-  status: '' //主表状态 用于控制子表新增编辑按钮显示情况
+const masterParmas=ref({
+  masterId:'',//主表id
+  number: '',//主表单据号
+  status: '',//主表状态 用于控制子表新增编辑按钮显示情况
 })
 
 // 列表头部按钮
@@ -268,19 +229,19 @@ const openDetail = async (row: any, titleName: any, titleValue: any, tableName:
   titleValueRef.value = titleValue
   remarksData.data = {
     tableId: row.id,
-    tableName: tableName
+    tableName: tableName,
   }
   // 加载明细列表
-  if (!props.isBasic) {
+  if(!props.isBasic) {
     // 设置主表id
     masterParmas.value.masterId = row.id
     masterParmas.value.number = row.number
     masterParmas.value.status = row.status
-    tableObjectRef.value.params = {
-      masterId: row.id
+    tableObject.params = {
+      masterId: row.id,
     }
     getList()
-  }
+  } 
   isShowDrawer.value = true
   if (row) {
     detailLoading.value = true
@@ -291,19 +252,13 @@ const openDetail = async (row: any, titleName: any, titleValue: any, tableName:
       getChangeRecordList()
       // 判断详情新增按钮是否显示
       HeadButttondata.value = [
-        defaultButtons.defaultAddBtn({
-          hide: isShowMainButton(row, ['1', '1', 'PLAN_PURCHASE_READY', '1'])
-        }), // 新增
-        defaultButtons.defaultFilterBtn(null) // 筛选
+        defaultButtons.defaultAddBtn({hide:isShowMainButton(row,['1','1','PLAN_PURCHASE_READY','1'])}), // 新增
+        defaultButtons.defaultFilterBtn(null), // 筛选
       ]
       // 动态显示操作列按钮
       buttondata.value = [
-        defaultButtons.mainListEditBtn({
-          hide: isShowMainButton(row, ['1', '1', 'PLAN_PURCHASE_READY', '1'])
-        }), // 编辑
-        defaultButtons.mainListDeleteBtn({
-          hide: isShowMainButton(row, ['1', '1', 'PLAN_PURCHASE_READY', '1'])
-        }) // 删除
+        defaultButtons.mainListEditBtn({hide:isShowMainButton(row,['1','1','PLAN_PURCHASE_READY','1'])}), // 编辑
+        // defaultButtons.mainListDeleteBtn({hide:isShowMainButton(row,['1','1','PLAN_PURCHASE_READY','1'])}), // 删除
       ]
     } finally {
       detailLoading.value = false
@@ -332,21 +287,12 @@ const getChangeRecordList = async () => {
   changeRecordData.changeRecordList = await RemarkApi.getChangeRecordPage(remarksData.data)
 }
 
-
-const tableObjectRef = ref()
-const tableMethodsRef = ref()
-const tableColumnsRef = ref()
-
 const { tableObject, tableMethods } = useTable({
   getListApi: props.apiPage // 分页接口
 })
 
-tableObjectRef.value = tableObject
-tableMethodsRef.value = tableMethods
-tableColumnsRef.value = props.detailAllSchemas.tableColumns
-
 // 根据状态返回该按钮是否显示
-const isShowMainButton = (row, val) => {
+const isShowMainButton = (row,val) => {
   if (val.indexOf(row.status) > -1) {
     return false
   } else {
@@ -354,27 +300,22 @@ const isShowMainButton = (row, val) => {
   }
 }
 
+
 // 获得表格的各种操作
-const { getList } = tableMethodsRef.value
+const { getList } = tableMethods
 
-// 头部按钮事件
+// 头部按钮事件 
 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)
   }
 }
@@ -384,13 +325,11 @@ const buttonBaseClick = (val, item) => {
 //   detailAllSchemas.tableColumns.value = val
 // }
 
-// 列表-操作按钮事件
+// 列表-操作按钮事件 
 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)
   }
 }
@@ -422,7 +361,9 @@ const searchTableSuccess = (formField, searchField, val, formRef) => {
   emit('searchTableSuccessDetail', formField, searchField, val, formRef)
 }
 // 传递给父类
-const emit = defineEmits(['searchTableSuccessDetail', 'changeTabs'])
+const emit = defineEmits([
+  'searchTableSuccessDetail',
+])
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
@@ -433,33 +374,16 @@ const handleDelete = async (id: number) => {
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
-  } catch {}
+  } catch { }
 }
 // 筛选提交
 const searchFormClick = (searchData) => {
-  tableObjectRef.value.params = {
+  tableObject.params = {
     isSearch: true,
-    filters: searchData.filters
-      ? searchData.filters
-      : [{ column: 'masterId', action: '==', value: masterParmas.value.masterId }]
+    filters: searchData.filters?searchData.filters:[{column: "masterId", action: "==", value: masterParmas.value.masterId}]
   }
   getList() // 刷新当前列表
 }
-
-//监视属性
-watch(
-  () => props.apiPage,
-  () => {
-    const { tableObject, tableMethods } = useTable({
-      getListApi: props.apiPage // 分页接口
-    })
-    tableColumnsRef.value = props.detailAllSchemas.tableColumns
-    tableObjectRef.value = tableObject
-    tableMethodsRef.value = tableMethods
-    const { getList } = tableMethods
-    getList()
-  }
-)
 </script>
 <style lang="scss">
 .el-drawer__body {