new_huozhou_frontend/src/views/ProcessApprovalSubPage/component/fieldChangeDetail.vue

<template>
  <!-- 自定义表单 -->
  <div class="first">
    <el-divider content-position="left">字段旧值</el-divider>
    <BasicForm @register="registeroldFieldForm" />
    <el-divider content-position="left">字段新值</el-divider>
    <BasicForm @register="registernewFieldForm" />
    <div v-if="datares">
      <el-divider content-position="left">资料详情</el-divider>
      <BasicTable @register="registerResourceTable">
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" />
        </template>
      </BasicTable>
    </div>
  </div>
</template>
<script lang="ts" name="uploadfileApproval" setup>
import { onMounted, ref, reactive } from 'vue'
import { useForm, BasicForm } from '@/components/Form';
import { BasicTable, ActionItem, TableAction, useTable } from '@/components/Table';
import { formSchemas, resourcetableColumns } from '../../projectLib/projectInfo/projectInfo.data';
import { getFieldchangeByid, getFieldchangeFileinfoList } from '../../projectLib/projectInfo/projectInfo.api'
import { downloadFile } from "@/api/common/api"
let dataTo = defineProps(["fieldChangeid", "isEdit"])
console.log("dataTodataTodataTo", dataTo)
let datares = ref()
onMounted(async () => {
  let res = await getFieldchangeByid({ fieldChangeid: dataTo.fieldChangeid })
  datares.value = await getFieldchangeFileinfoList({ fieldChangeid: dataTo.fieldChangeid })
  // if (datares.value) {
  //   setTableData(datares.value)
  // }
  formSchemas.forEach(item => {
    if (item.field == res.fieldValue) {
      resetoldSchema(item)
      resetnewSchema(item)
      let objnew = {}
      objnew[res.fieldValue] = res.newvalue
      setnewFieldsValue(objnew)
      let objold = {}
      objold[res.fieldValue] = res.oldvalue
      setoldFieldsValue(objold)
      setProps({ disabled: dataTo.isEdit == true ? false : true })
    }
  })

})

const [registeroldFieldForm, { setFieldsValue: setoldFieldsValue, resetSchema: resetoldSchema }] = useForm({
  showActionButtonGroup: false,
  labelCol: { style: { width: '120px' } },
  wrapperCol: { style: { width: 'auto' } },
  disabled: true
})
const [registernewFieldForm, { setProps, getFieldsValue: getnewFieldsValue, setFieldsValue: setnewFieldsValue, resetSchema: resetnewSchema, validate }] = useForm({
  showActionButtonGroup: false,
  labelCol: { style: { width: '120px' } },
  wrapperCol: { style: { width: 'auto' } },
  disabled: true
})


//项目资料table
const [registerResourceTable, { setTableData }] = useTable({
  size: 'small',//紧凑型表格
  title: '资料详情',
  api: getFieldchangeFileinfoList,
  columns: resourcetableColumns,
  useSearchForm: false,
  actionColumn: {
    width: 140,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
  },
  beforeFetch(param) {
    param.fieldChangeid = dataTo.fieldChangeid
  }
});
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '下载',
      ifShow: true,
      onClick: handleDetailpage.bind(null, record),
    }
  ];
}
function handleDetailpage(record) {
  console.log("我这一行的数据是", record)
  let param = {
    path: record.documentPath,
    fileName: record.documentName
  }
  //
  console.log("我这一行的数据是", param)

  downloadFile("/huzhouUploadfileinfo/downloadfile", record.documentName, param)
}
const getCssVarName = (type: string) => {
  return `--el-box-shadow${type ? '-' : ''}${type}`
}
defineExpose({ getnewFieldsValue, validate })

</script>
<style scoped>

.first {
  padding-top: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>