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="fieldChangeDetail" 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 { getFieldchangeByGroupid, getFieldchangeFileinfoList } from '../../projectLib/projectInfo/projectInfo.api'
import { downloadFile } from "@/api/common/api"
import { FormSchema } from '@/components/Form';

let dataTo = defineProps(["fieldChangeGroupid", "isEdit"])
console.log("dataTodataTodataTo", dataTo)
let datares = ref()
let showFormSchema: FormSchema[] = []
let objnew = ref({})
let objold = ref({})
onMounted(async () => {
  let res = await getFieldchangeByGroupid({ fieldChangeGroupid: dataTo.fieldChangeGroupid })
  datares.value = await getFieldchangeFileinfoList({ fieldChangeGroupid: dataTo.fieldChangeGroupid })
  // if (datares.value) {
  //   setTableData(datares.value)
  // }
  res.forEach(itemRes => {
    formSchemas.forEach(itemformSchemas => {
      if (itemformSchemas.field == itemRes.fieldValue) {
        showFormSchema.push(itemformSchemas)
        objnew[itemRes.fieldValue] = itemRes.newvalue
        objold[itemRes.fieldValue] = itemRes.oldvalue
      }
    })
  })
  resetoldSchema(showFormSchema)
  resetnewSchema(showFormSchema)
  setnewFieldsValue(objnew)
  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.fieldChangeGroupid = dataTo.fieldChangeGroupid
  }
});
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)
}

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>