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 { resourcetableColumns } from '../../projectLib/projectInfo/projectInfo.data';
  import {
    getFieldchangeByGroupid,
    getFieldchangeFileinfoList,
  } from '../../projectLib/projectInfo/projectInfo.api';
  import { historyformSchemas } from '@/views/projectLib/projectInfoHistory/projectInfoHistory.data';
  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) => {
      historyformSchemas.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>