sfms3.0-ui/src/components/Detail/src/Detail.vue

<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"
        />
      </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="detailAllSchemasRef.tableColumns"
            :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>
</template>

<script lang="ts" setup>
import Annex from '@/components/Annex/src/Annex.vue'
import Remarks from '@/components/Remarks/src/Remarks.vue'
import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue'
import Tabs from '@/components/Tabs/src/Tabs.vue'
import * as RemarkApi from '@/api/wms/remark'
import * as FileApi from '@/api/wms/file'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import BasicForm from '@/components/BasicForm/src/BasicForm.vue'
import TableHead from '@/components/TableHead/src/TableHead.vue'

defineOptions({ name: 'Detail' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const route = useRoute() // 路由信息
const routeName = ref()
routeName.value = route.name
routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'

const props = defineProps({
  // 标签参数
  tabs: {
    type: Object,
    required: true,
    default: null
  },
  // 是否是基础数据 展现详情顶部表单
  isBasic: {
    type: Boolean,
    required: false,
    default: false
  },
  // 表单，列表 相关信息
  allSchemas: {
    type: Object,
    required: true,
    default: null
  },
  // 明细列表相关信息
  detailAllSchemas: {
    type: Object,
    required: true,
    default: null
  },
  //  明细验证
  detailAllSchemasRules: {
    type: Object,
    required: true,
    default: null
  },
  // 子表新增API
  apiCreate: {
    type: Function,
    required: false,
    default: null
  },
  // 子表编辑API
  apiUpdate: {
    type: Function,
    required: false,
    default: null
  },
  // 子表分页列表API
  apiPage: {
    type: Function,
    required: false,
    default: null
  },
  // 子表删除API
  apiDelete: {
    type: Function,
    required: false,
    default: null
  },
  // 回显字段
  Echo: {
    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'
    })
  }
} else {
  if (tabsList.value && tabsList.value.length > 0) {
  } else {
    tabsList.value = [
      {
        label: '明细',
        prop: 'Detail'
      }
    ]
  }
}
if (tabsList.value) {
}

// 附件默认数据
const annexData = reactive({
  annexList: []
})

// 备注数据
const remarksData = reactive({
  remarksList: [],
  data: {}
})

// 变更记录默认数据
const changeRecordData = reactive({
  changeRecordList: []
})
const detailData = ref({}) //详情数据
// 获取附件列表篇
const getFileList = async () => {
  detailLoading.value = true
  try {
    annexData.annexList = await FileApi.getFileList(remarksData.data)
  } finally {
    detailLoading.value = false
  }
}
/** 添加附件 */
const handleAnnexSuccess = () => {
  getFileList()
  getChangeRecordList()
}
// 删除附件成功之后所走的方法
const deleteAnnexSuccess = async () => {
  getFileList()
  getChangeRecordList()
}

// Tabs当前选择
const current = ref(0)
const change = (item, index) => {
  current.value = index
  emit('changeTabs', item)
}

//主表所需的参数
const masterParmas = ref({
  masterId: '', //主表id
  number: '', //主表单据号
  status: '' //主表状态 用于控制子表新增编辑按钮显示情况
})

// 列表头部按钮
const HeadButttondata = ref()
// 列表-操作按钮
const buttondata = ref()

/** 打开弹窗 */
const titleNameRef = ref()
const titleValueRef = ref()
const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
  titleNameRef.value = titleName
  titleValueRef.value = titleValue
  remarksData.data = {
    tableId: row.id,
    tableName: tableName
  }
  // 加载明细列表
  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
    }
    getList()
  }
  isShowDrawer.value = true
  if (row) {
    detailLoading.value = true
    try {
      detailData.value = row
      getRemarkList()
      getFileList()
      getChangeRecordList()
      // 判断详情新增按钮是否显示
      HeadButttondata.value = [
        defaultButtons.defaultAddBtn({
          hide: isShowMainButton(row, ['1'])
        }), // 新增
        defaultButtons.defaultFilterBtn(null) // 筛选
      ]
      // 动态显示操作列按钮
      buttondata.value = [
        defaultButtons.mainListEditBtn({
          hide: isShowMainButton(row, ['1'])
        }), // 编辑
        defaultButtons.mainListDeleteBtn({
          hide: isShowMainButton(row, ['1'])
        }) // 删除
      ]
    } finally {
      detailLoading.value = false
    }
  }
}
defineExpose({ openDetail }) // 提供 open 方法，用于打开弹窗

// 获取备注列表
const getRemarkList = async () => {
  detailLoading.value = true
  try {
    remarksData.remarksList = await RemarkApi.getRemarkPage(remarksData.data)
  } finally {
    detailLoading.value = false
  }
}
// 备注提交成功之后
const remarksSubmitScuess = async (remark) => {
  detailLoading.value = false
  getRemarkList()
  getChangeRecordList()
}
// 获取变更记录
const getChangeRecordList = async () => {
  changeRecordData.changeRecordList = await RemarkApi.getChangeRecordPage(remarksData.data)
}


const tableObjectRef = ref()
const tableMethodsRef = ref()
const detailAllSchemasRef = ref()

const { tableObject, tableMethods } = useTable({
  getListApi: props.apiPage // 分页接口
})

tableObjectRef.value = tableObject
tableMethodsRef.value = tableMethods
detailAllSchemasRef.value = props.detailAllSchemas

// 根据状态返回该按钮是否显示
const isShowMainButton = (row, val) => {
  if (val.indexOf(row.status) > -1) {
    return false
  } else {
    return true
  }
}

// 获得表格的各种操作
const { getList } = tableMethodsRef.value

// 头部按钮事件
const buttonBaseClick = (val, item) => {
  if (val == 'add') {
    // 新增
    openForm('create')
  } else if (val == 'import') {
    // 导入
    handleImport()
  } else if (val == 'export') {
    // 导出
    handleExport()
  } else if (val == 'refresh') {
    // 刷新
    getList()
  } else if (val == 'filtrate') {
    // 筛选
  } else {
    // 其他按钮
    console.log('其他按钮', item)
  }
}

// 字段设置 更新主列表字段
// const updataTableColumns = (val) => {
//   detailAllSchemas.tableColumns.value = val
// }

// 列表-操作按钮事件
const buttonTableClick = async (val, row) => {
  if (val == 'edit') {
    // 编辑
    openForm('update', row)
  } else if (val == 'delete') {
    // 删除
    handleDelete(row.id)
  }
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = async (type: string, row?: number) => {
  formRef.value.open(type, row, masterParmas.value)
}
// form 提交
const submitForm = async (formType, data) => {
  try {
    if (formType === 'create') {
      await props.apiCreate(data)
      message.success(t('common.createSuccess'))
    } else {
      await props.apiUpdate(data)
      message.success(t('common.updateSuccess'))
    }
    formRef.value.dialogVisible = false
    // 刷新当前列表
    getList()
  } finally {
    formRef.value.formLoading = false
  }
}

// 查询页面返回
const searchTableSuccess = (formField, searchField, val, formRef) => {
  emit('searchTableSuccessDetail', formField, searchField, val, formRef)
}
// 传递给父类
const emit = defineEmits(['searchTableSuccessDetail', 'changeTabs'])
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await props.apiDelete(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
// 筛选提交
const searchFormClick = (searchData) => {
  tableObjectRef.value.params = {
    isSearch: true,
    filters: searchData.filters
      ? searchData.filters
      : [{ column: 'masterId', action: '==', value: masterParmas.value.masterId }]
  }
  getList() // 刷新当前列表
}

//监视属性
watch(
  () => props.apiPage,
  () => {
    const { tableObject, tableMethods } = useTable({
      getListApi: props.apiPage // 分页接口
    })
    detailAllSchemasRef.value = props.detailAllSchemas
    tableObjectRef.value = tableObject
    tableMethodsRef.value = tableMethods
    const { getList } = tableMethods
    getList()
  }
)
</script>
<style lang="scss">
.el-drawer__body {
  background: #f5f5f5 !important;
}

::v-deep(.label-class-name) {
  color: #dedede;
}
</style>
<style scoped lang="scss"></style>