new_huozhou_frontend/src/views/projectLib/projectInfo/modifyfieldInfo.vue

<template>
  <ProjectDetails :isEdit="false" :projectid="projectid" />
  <el-divider content-position="left">项目信息变更字段</el-divider>
  选择变更字段：<a-select
    v-model:value="selectValue"
    style="width: 30%"
    placeholder="选择变更字段"
    :options="options"
    @change="changeOptions"
  />
  <div v-if="showupload">
    <el-divider content-position="left">上传文件</el-divider>
    <el-form-item label="上传文件:">
      <el-upload
        class="upload-demo"
        ref="upload"
        action
        :http-request="httpRequest"
        :before-upload="beforeUpload"
        :on-exceed="handleExceed"
        :limit="1"
        :on-remove="removeFile"
      >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <div slot="tip" class="el-upload__tip">文件大小且不超过500M</div>
      </el-upload>
    </el-form-item>
  </div>
  <el-divider content-position="left">字段新值</el-divider>
  <BasicForm @register="registerchangeFieldForm" @submit="handleSubmit" />
</template>
<script lang="ts" name="Detailpage" setup>
  import { defineProps, onMounted, ref, reactive } from 'vue';
  import {} from './projectInfo.data';

  import {
    getChangeFieldManageDict,
    submitFieldchange,
    getRemainingMoneyinfo,
    queryProjectInfoById,
  } from './projectInfo.api';
  import ProjectDetails from '../../ProcessApprovalSubPage/component/ProjectDetails.vue';
  import { useForm, BasicForm } from '@/components/Form';
  import { formSchemas } from './projectInfo.data';
  import { message } from 'ant-design-vue';
  import { cloneDeep } from 'lodash-es';
  import { FormSchema } from '@/components/Form';

  let dataTo = defineProps(['projectid', 'stage', 'IsModify', 'fatherid']);
  let emit = defineEmits(['close']);
  console.log('dataTo11111', dataTo);
  let selectValue = ref();
  let options = ref();
  let showupload = ref(false);
  let fileList = reactive<Array<any>>([]);
  let showFormSchema: FormSchema[] = [];
  onMounted(async () => {
    options.value = await getChangeFieldManageDict();
  });
  //
  const [
    registerchangeFieldForm,
    { getFieldsValue, validate, setFieldsValue, resetSchema, appendSchemaByField },
  ] = useForm({
    resetButtonOptions: { text: '取消' },

    submitButtonOptions: { text: '提交' },
    //查询列占比 24代表一行 取值范围 0-24
    actionColOptions: { span: 14 },

    resetFunc: customResetFunc,
    labelCol: { style: { width: '120px' } },
    wrapperCol: { style: { width: 'auto' } },
    // disabled:true
  });

  function httpRequest(option) {
    fileList.push(option);
  }
  function removeFile(option) {
    for (let i = 0; i < fileList.length; i++) {
      if (fileList[i].file.name == option.name) {
        fileList.splice(i, 1);
      }
    }
    console.log(fileList, option);
  }
  // 上传前处理
  function beforeUpload(file) {
    let fileSize = file.size;
    const FIVE_M = 500 * 1024 * 1024;
    //大于5M，不允许上传
    if (fileSize > FIVE_M) {
      message.error('最大上传500M');
      return false;
    }
    //判断文件类型，必须是xlsx格式
    // let fileName = file.name
    // let reg = /^.+(\.xlsx)$/
    // if(!reg.test(fileName)){
    //   ElMessage.error("只能上传xlsx!")
    //   return false
    // }
    return true;
  }
  // 文件数量过多时提醒
  function handleExceed() {
    message.warning('最多只能上传一个文件');
  }

  async function handleSubmit(record) {
    const params = new FormData();
    // 将上传文件数组依次添加到参数paramsData中
    if (fileList.length > 0) {
      fileList.forEach((x) => {
        console.log('xxxxxxxxxx', x, x.file);
        params.append('file', x.file);
      });
    }
    params.append('id', dataTo.projectid);
    params.append('fieldValue', selectValue.value);
    if (await validate) {
      let newValue = await getFieldsValue();
      Object.keys(newValue).forEach((key) => {
        //如果是修改金额，则只提交金额相关的值
        if (selectValue.value == 'Money' && key.includes('Money')) {
          params.append(key, newValue[key]);
        }else if(selectValue.value=="manager" ){
          if (key == selectValue.value) {
            params.append(key, newValue[key]);
          }if (key == "managerPhone") {
            params.append(key, newValue[key]);
          }

        } 
        else {
          //只添加修改项有关值
          if (key == selectValue.value) {
            params.append(key, newValue[key]);
          }
        }
      });
      console.log('params', params);
      await submitFieldchange(params);

      emit('close');
    }
  }
  async function customResetFunc() {
    emit('close');
  }
  async function changeOptions(value, option) {
    let formSchemasTemp = cloneDeep(formSchemas);
    //如果是子项目修改
    if (dataTo.fatherid) {
      let subres = await getRemainingMoneyinfo({
        projectId: dataTo.fatherid, //主项目id
        id: dataTo.projectid, //子项目id
      });
      if (value == 'Money') {
        //取出含有金额的内容，并设置最大值
        let moenyform = formSchemasTemp.filter((item) => item.field.includes('Money'));
        moenyform.forEach((item) => {
          // item.componentProps['max'] = subres[item.field];
          showFormSchema.push(item);
        });
        resetSchema(moenyform);
        queryProjectInfoById({
          projectid: dataTo.projectid,
        }).then((res) => {
          setFieldsValue(res);
        });
      } else {
        formSchemasTemp.forEach((item) => {
          if (item.field == value) {
            item.dynamicDisabled = false;
            resetSchema(item);
          }
        });
      }
      //主项目修改
    } else {
      //选择修改金额，则重置金额表单，显示之前的金额值
      if (value == 'Money') {
        let moenyform = formSchemasTemp.filter((item) => item.field.includes('Money'));
        resetSchema(moenyform);
        queryProjectInfoById({
          projectid: dataTo.projectid,
        }).then((res) => {
          setFieldsValue(res);
        });
      } else if (value == 'manager') {
        let tempitem = [] as any;
        formSchemasTemp.forEach((item) => {
          if (item.field == value) {
            item.dynamicDisabled = false;
            tempitem.push(item);
          }
          if (item.field == 'managerPhone') {
            item.dynamicDisabled = false;
            tempitem.push(item);
          }
        });
        resetSchema(tempitem);
      } else {
        formSchemasTemp.forEach((item) => {
          if (item.field == value) {
            item.dynamicDisabled = false;
            resetSchema(item);
          }
        });
      }
    }

    if (option.upload == '1') {
      showupload.value = true;
    } else {
      showupload.value = false;
      fileList.pop();
    }
    selectValue.value;
  }
</script>
<style></style>