client-eam-v5/src/components/assetsDisposal/AssetsDisposal.vue

<template>
  <Navbar title="资产处置-处置申请单" :is-go-back="true" />
  <a-row style="display: flex;justify-content: space-between;align-items: center;">
    <a-col :span="10">
      <a-steps :current="current" size="small" type="navigation" :style="stepStyle" :items="steps" />
    </a-col>
    <a-col>
      <a-button v-if="current > 0" style="margin-right: 8px" @click="prev">上一步</a-button>
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步</a-button>
      <a-button v-if="current == steps.length - 1 && !isReadonly" type="primary" @click="saveForm">
        确定
      </a-button>
    </a-col>
  </a-row>
  <span v-if="current !== 2 && !isReadonly" style="color: red;">注意：处置方式为 “无偿调拨” 和 “捐赠” 的情况不需要选择中介机构，您可以直接单击 "下一步"
    。</span>
  <keep-alive>
    <DisposalStep1
      v-if="current === 0" :disposal-id="disposalId" :is-readonly="isReadonly"
      @get-disposal-way="getDisposalWay" @get-nature-ids="getNatureIds"
    />
  </keep-alive>
  <DisposalStep2 v-if="current === 1" ref="disposal2" :disposal-id="disposalId" :is-readonly="isReadonly" />
  <keep-alive>
    <DisposalStep3
      v-if="current === 2" ref="disposal3" :disposal-id="disposalId" :disposal-way="disposalWay"
      :is-readonly="isReadonly"
    />
  </keep-alive>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Uuid } from 'pc-component-v3';
import { message } from 'ant-design-vue';
import Common from '../../common/Common.js';
import DisposalStep1 from './DisposalStep1.vue';
import DisposalStep2 from './DisposalStep2.vue';
import DisposalStep3 from './DisposalStep3.vue';
import { addAgencyApi, saveDisposalTwoApi, saveThreeApi, queryStatusApi } from './api.js';

const current = ref(0);

const natureIds = ref(null);

const disposalId = ref('');

const disposalWay = ref('');

const disposal2 = ref();
const disposal3 = ref();

const isReadonly = ref(false);

const steps = [
  {
    title: '选择中介机构',
  },
  {
    title: '中介机构出具报告',
  },
  {
    title: '填写表单信息',
  },
];


onMounted(() => {
  disposalId.value = getQueryParams().disposalId;
  if (disposalId.value) queryStatus();
});

// 获取处置方式
const getDisposalWay = way => {
  disposalWay.value = way;
};

// 获取中介机构ids
const getNatureIds = id => {
  natureIds.value = id;
};


const next = () => {
  if (isReadonly.value) {
    current.value++;
    return;
  }
  if (current.value === 0) {
    if (disposalWay.value === '无偿调拨' || disposalWay.value === '捐赠') {
      current.value++;
      return;
    }
    if (natureIds.value) {
      addAgency();
    } else {
      current.value++;
    }
  } else if (current.value === 1) {
    saveDisposalTwo();
  }
};
const prev = () => {
  current.value--;
};

// 查询处置的状态
const queryStatus = () => {
  queryStatusApi(disposalId.value).then(
    success => {
      if (success.errorCode === 0) {
        if (success.data.value === '待审核') {
          isReadonly.value = false;
        } else {
          isReadonly.value = true;
          current.value = 2;
        }
      } else {
        message.warning(success.errorMessage);
      }
    },
    error => {
      Common.processException(error);
    },
  );
};

// 保存表单数据
const saveForm = () => {
  const formDatas = { ...disposal3.value.formState };
  const { operatorName, operatorNum, documentNumber, applyFileName, responsibilityName, disposalReason } = formDatas;
  if (!operatorName) {
    message.warning('请您填写经办人。');
    return;
  }
  if (!operatorNum) {
    message.warning('请您填写经办人联系方式。');
    return;
  }
  if (!documentNumber) {
    message.warning('请您填写文号。');
    return;
  }
  if (!applyFileName) {
    message.warning('请您填写单位申请文件名称。');
    return;
  }
  if (!responsibilityName) {
    message.warning('请您填写责任人名称。');
    return;
  }
  const params = {
    assetDisposalApplyId: disposalId.value,
    operatorName,
    operatorNum,
    documentNumber,
    applyFileName,
    responsibilityName,
    disposalReason,
    attachmentMaterialsIds: disposal3.value.fileIds,
  };
  saveThreeApi(params).then(
    success => {
      if (success.errorCode === 0) {
        message.success('生成资产处置单成功。');
        window.open(
          '/#/desktop/window1/20241101_113732' + '?uuid=' + Uuid.createUUID(),
          '_self',
        );
      } else {
        message.warning(success.errorMessage);
      }
    },
    error => {
      Common.processException(error);
    },
  );
};

// 添加中介
const addAgency = () => {
  const params = {
    assetDisposalApplyId: disposalId.value,
    assetAgencyId: natureIds.value,
  };
  addAgencyApi(params).then(
    success => {
      if (success.errorCode !== 0) {
        message.warning(success.errorMessage);
      } else {
        current.value++;
      }
    },
    error => {
      Common.processException(error);
    },
  );
};

// 保存中介机构出具报告
const saveDisposalTwo = () => {
  const params = {
    ...disposal2.value.getSaveDatas(),
  };
  saveDisposalTwoApi(params).then(
    success => {
      if (success.errorCode !== 0) {
        message.warning(success.errorMessage);
      } else {
        current.value++;
      }
    },
    error => {
      Common.processException(error);
    },
  );
};

// 获取单据Id
const getQueryParams = () => {
  const url = window.location.href;
  let urlStr = url.split('?')[1];
  const urlSearchParams = new URLSearchParams(urlStr);
  const result = Object.fromEntries(urlSearchParams.entries());
  return result;
};
const stepStyle = {
  marginBottom: '8px',
  boxShadow: '0px -1px 0 0 #e8e8e8 inset',
};
</script>

<style scoped>
:deep(.ant-steps.ant-steps-navigation) {
  padding-top: 6px;
}
</style>